/* =============================================================
   HEADER V5 — Inline Logo + Horizontal Nav + Hamburger Mobile

   All classes prefixed with `hv5-` to avoid conflicts.
   Designed as a swappable header module.
   ============================================================= */

/* ── Tokens ── */
.hv5-header {
    --hv5-height: 72px;
    --hv5-height-mobile: 60px;
    --hv5-bg: #ffffff;
    --hv5-text: #1a1a2e;
    --hv5-text-muted: #64748b;
    --hv5-accent: var(--main-bg, #025273);
    --hv5-accent-light: var(--bg-third, #F5FDFF);
    --hv5-border: rgba(0, 0, 0, 0.06);
    --hv5-shadow: 0 1px 0 var(--hv5-border);
    --hv5-dropdown-shadow:
        0 4px 6px -1px rgba(0, 0, 0, 0.07),
        0 12px 24px -4px rgba(0, 0, 0, 0.09);
    --hv5-radius: 10px;
    --hv5-ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --hv5-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --hv5-font: 'poppins', -apple-system, BlinkMacSystemFont, sans-serif;
    --hv5-speed: 0.22s;
    --hv5-pad-x: 36px;
    --hv5-pad-x-mobile: 16px;
}

/* ── Base ── */
.hv5-header {
    position: relative;
    z-index: 100;
    font-family: var(--hv5-font);
    -webkit-font-smoothing: antialiased;
}

.hv5-bar {
    width: 100%;
    height: var(--hv5-height);
    background: var(--hv5-bg);
    box-shadow: var(--hv5-shadow);
    position: relative;
    z-index: 102;
}

.hv5-container {
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 var(--hv5-pad-x) !important;
    gap: 8px;
}

/* ── Logo ── */
.hv5-logo {
    flex-shrink: 0;
    position: relative;
    z-index: 103;
}

.hv5-logo-link {
    display: flex;
    align-items: center;
    height: var(--hv5-height);
    text-decoration: none !important;
}

/* Handle logo images */
.hv5-logo img,
.hv5-logo .logo-img {
    max-height: 42px;
    width: auto;
    object-fit: contain;
    display: block;
}

/* Handle text logos */
.hv5-logo .logo-lg-text-light {
    font-size: 20px;
    font-weight: 700;
    color: var(--hv5-text);
    letter-spacing: -0.02em;
    white-space: nowrap;
    line-height: 1;
}

/* ── Desktop Navigation ── */
.hv5-nav {
    display: flex;
    align-items: center;
    height: 100%;
    margin-left: auto;
    min-width: 0;
}

.hv5-menu {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    height: 100%;
    gap: 2px;
}

.hv5-item {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
}

/* ── Nav Links ── */
.hv5-link {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 6px 14px;
    height: auto;
    font-family: var(--hv5-font);
    font-size: 14px;
    font-weight: 600;
    color: var(--hv5-text);
    text-decoration: none !important;
    white-space: nowrap;
    border: none;
    background: none;
    cursor: pointer;
    border-radius: 8px;
    transition:
        background var(--hv5-speed) var(--hv5-ease),
        color var(--hv5-speed) var(--hv5-ease);
    position: relative;
    line-height: 1.5;
    letter-spacing: -0.01em;
}

.hv5-link:hover,
.hv5-link:focus-visible {
    background: var(--hv5-accent-light);
    color: var(--hv5-accent);
    text-decoration: none !important;
}

/* Active indicator — thin line under the link on hover */
.hv5-link::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 14px;
    right: 14px;
    height: 2px;
    border-radius: 2px;
    background: var(--hv5-accent);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.3s var(--hv5-ease-out);
    pointer-events: none;
}

/* Only show the underline for top-level items in desktop (not inside mobile) */
@media (min-width: 769px) {
    .hv5-item:hover > .hv5-link::after,
    .hv5-item:focus-within > .hv5-link::after {
        transform: scaleX(1);
    }
}

/* ── Chevron ── */
.hv5-chevron {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    transition: transform 0.3s var(--hv5-ease-out);
    margin-left: 1px;
}

/* ── Dropdowns (Desktop) ── */
.hv5-dropdown {
    position: absolute;
    top: calc(100% - 4px);
    left: 0;
    padding-top: 8px;
    z-index: 200;
    pointer-events: none;
}

.hv5-dropdown-inner {
    min-width: 230px;
    background: var(--hv5-bg);
    border: 1px solid var(--hv5-border);
    border-radius: var(--hv5-radius);
    box-shadow: var(--hv5-dropdown-shadow);
    padding: 6px;
    opacity: 0;
    transform: translateY(6px);
    transition:
        opacity var(--hv5-speed) var(--hv5-ease),
        transform var(--hv5-speed) var(--hv5-ease);
}

/* Show dropdown on hover (desktop only) */
@media (min-width: 769px) {
    .hv5-item--has-children:hover > .hv5-dropdown,
    .hv5-item--has-children:focus-within > .hv5-dropdown {
        pointer-events: auto;
    }

    .hv5-item--has-children:hover > .hv5-dropdown .hv5-dropdown-inner,
    .hv5-item--has-children:focus-within > .hv5-dropdown .hv5-dropdown-inner {
        opacity: 1;
        transform: translateY(0);
    }

    .hv5-item--has-children:hover > .hv5-link .hv5-chevron,
    .hv5-item--has-children:focus-within > .hv5-link .hv5-chevron {
        transform: rotate(180deg);
    }
}

/* ── Dropdown Links ── */
.hv5-dropdown-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    font-size: 13.5px;
    font-weight: 500;
    font-family: var(--hv5-font);
    color: var(--hv5-text);
    text-decoration: none !important;
    border-radius: 7px;
    transition:
        background var(--hv5-speed) var(--hv5-ease),
        color var(--hv5-speed) var(--hv5-ease);
    line-height: 1.4;
}

.hv5-dropdown-link:hover,
.hv5-dropdown-link:focus-visible {
    background: var(--hv5-accent-light);
    color: var(--hv5-accent);
    text-decoration: none !important;
}

/* Small decorative dot */
.hv5-dropdown-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--hv5-border);
    flex-shrink: 0;
    transition: background var(--hv5-speed) var(--hv5-ease);
}

.hv5-dropdown-link:hover .hv5-dropdown-dot {
    background: var(--hv5-accent);
}


/* =============================================================
   HAMBURGER BUTTON
   ============================================================= */
.hv5-hamburger {
    display: none; /* hidden on desktop */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    margin: 0;
    margin-left: auto;
    background: none;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    position: relative;
    z-index: 103;
    -webkit-tap-highlight-color: transparent;
    transition: background var(--hv5-speed) var(--hv5-ease);
}

.hv5-hamburger:hover {
    background: var(--hv5-accent-light);
}

.hv5-hamburger-line {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--hv5-text);
    border-radius: 2px;
    transition:
        transform 0.3s var(--hv5-ease-out),
        opacity 0.2s ease;
    position: absolute;
}

.hv5-hamburger-line:nth-child(1) { transform: translateY(-6px); }
.hv5-hamburger-line:nth-child(2) { transform: translateY(0); }
.hv5-hamburger-line:nth-child(3) { transform: translateY(6px); }

/* Animate to X */
.hv5-hamburger.active .hv5-hamburger-line:nth-child(1) {
    transform: rotate(45deg) translateY(0);
}
.hv5-hamburger.active .hv5-hamburger-line:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}
.hv5-hamburger.active .hv5-hamburger-line:nth-child(3) {
    transform: rotate(-45deg) translateY(0);
}


/* =============================================================
   BACKDROP
   ============================================================= */
.hv5-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.2);
    z-index: 99;
    opacity: 0;
    visibility: hidden;
    transition:
        opacity 0.3s var(--hv5-ease),
        visibility 0.3s;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}

.hv5-backdrop.active {
    opacity: 1;
    visibility: visible;
}


/* =============================================================
   MOBILE (< 769px)
   ============================================================= */
@media (max-width: 768px) {
    .hv5-bar {
        height: var(--hv5-height-mobile);
        margin-bottom: 12px;
    }

    .hv5-container {
        padding: 0 var(--hv5-pad-x-mobile) !important;
    }

    .hv5-logo-link {
        height: var(--hv5-height-mobile);
    }

    .hv5-logo .logo-lg-text-light {
        font-size: 17px;
    }

    .hv5-logo img,
    .hv5-logo .logo-img {
        max-height: 34px;
    }

    /* Show hamburger */
    .hv5-hamburger {
        display: flex;
    }

    /* Mobile nav panel */
    .hv5-nav {
        position: fixed;
        top: var(--hv5-height-mobile);
        left: 0;
        right: 0;
        bottom: 0;
        background: var(--hv5-bg);
        margin-left: 0;
        flex-direction: column;
        align-items: stretch;
        height: auto;
        max-height: calc(100dvh - var(--hv5-height-mobile));
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        z-index: 101;
        padding: 8px 0 32px;
        transform: translateY(-8px);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition:
            transform 0.3s var(--hv5-ease-out),
            opacity 0.25s var(--hv5-ease),
            visibility 0.3s;
        box-shadow: var(--hv5-dropdown-shadow);
        text-align: left !important;
    }

    .hv5-nav.active {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    /* Mobile menu layout */
    .hv5-menu {
        flex-direction: column;
        align-items: stretch;
        height: auto;
        gap: 0;
        padding: 0 12px;
    }

    .hv5-item {
        height: auto;
        flex-direction: column;
        align-items: stretch;
    }

    .hv5-link {
        padding: 12px 16px;
        font-size: 15px;
        border-radius: 10px;
        width: 100%;
        display: flex !important;
        justify-content: flex-start !important;
        text-align: left !important;
    }

    .hv5-link--parent {
        justify-content: space-between !important;
    }

    .hv5-link span,
    .hv5-dropdown-link span,
    .hv5-dropdown-link {
        text-align: left !important;
    }

    /* Kill the desktop underline effect */
    .hv5-link::after {
        display: none;
    }

    /* Mobile dropdown (accordion) */
    .hv5-dropdown {
        position: static;
        padding-top: 0;
        pointer-events: auto;
    }

    .hv5-dropdown-inner {
        min-width: auto;
        border: none;
        border-radius: 0;
        box-shadow: none;
        padding: 0 0 4px 12px;
        max-height: 0;
        overflow: hidden;
        opacity: 1;
        transform: none;
        transition: max-height 0.35s var(--hv5-ease-out);
    }

    .hv5-item--has-children.open > .hv5-dropdown .hv5-dropdown-inner {
        max-height: 600px;
    }

    .hv5-item--has-children.open > .hv5-link .hv5-chevron {
        transform: rotate(180deg);
    }

    .hv5-dropdown-link {
        padding: 10px 16px;
        font-size: 14px;
        border-radius: 8px;
    }

    /* Staggered entrance animation for menu items */
    .hv5-nav.active .hv5-item {
        animation: hv5SlideIn 0.3s var(--hv5-ease-out) both;
    }
    .hv5-nav.active .hv5-item:nth-child(1) { animation-delay: 0.03s; }
    .hv5-nav.active .hv5-item:nth-child(2) { animation-delay: 0.06s; }
    .hv5-nav.active .hv5-item:nth-child(3) { animation-delay: 0.09s; }
    .hv5-nav.active .hv5-item:nth-child(4) { animation-delay: 0.12s; }
    .hv5-nav.active .hv5-item:nth-child(5) { animation-delay: 0.15s; }
    .hv5-nav.active .hv5-item:nth-child(6) { animation-delay: 0.18s; }
    .hv5-nav.active .hv5-item:nth-child(7) { animation-delay: 0.21s; }
    .hv5-nav.active .hv5-item:nth-child(8) { animation-delay: 0.24s; }
}

@keyframes hv5SlideIn {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* =============================================================
   SMALL REFINEMENTS
   ============================================================= */

/* Prevent body scroll when mobile menu is open */
body.hv5-menu-open {
    overflow: hidden;
}

/* Ensure the header doesn't inherit unwanted styles from parent layouts */
.hv5-header *,
.hv5-header *::before,
.hv5-header *::after {
    box-sizing: border-box;
}

.hv5-header ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.hv5-header a {
    text-decoration: none !important;
}

.hv5-header button {
    font-family: inherit;
}

/* ── Match blocks container width ── */
/* builder.css constrains .container:has(> .row.sortable-container) to
   var(--page-max-desktop) at 992px+. Apply the same cap to the header
   inner container so logo/nav align with the page content column. */
@media (min-width: 992px) {
    .hv5-container {
        max-width: var(--page-max-desktop) !important;
    }
}