/*
 * header.css
 *
 * BTV Header styles – loaded site-wide via functions.php.
 * Organized: base → mobile media query → is-scrolled → reduced-motion
 *
 * @package BTV
 * @since   1.0.0
 */

/* === Base styles (desktop default) === */

/* Collapse the auto-generated wp:template-part wrapper so position:sticky on .btv-header
   binds to the full-document scroll container instead of the wrapper's short box. */
body > .wp-site-blocks > header.wp-block-template-part {
    display: contents;
}

/* Chain `.wp-block-group` so specificity (0,2,0) wins over the
 * `.wp-container-N { z-index: 10 }` layout reset WP injects, which
 * ties on (0,1,0) but loads after this stylesheet. Without this the
 * site alert (z-index 90) would visually layer over the header. */
.wp-block-group.btv-header {
    width: 100%;
    z-index: 100;
    transition: padding 0.2s ease, height 0.2s ease, box-shadow 0.3s ease;
}

/* Shadow appears only once the header is in its sticky/shrunk state */
.btv-header.is-scrolled {
    box-shadow: 0 4px 12px rgba(32, 43, 82, 0.08);
}

.btv-header__skip-link {
    /* WP's .screen-reader-text already hides this; we override on :focus in Task 16 */
}

.btv-header__main {
    min-height: 101px;
    /* layout handled by block attributes */
}

.btv-header__logo {
    margin: 0;
    flex: 0 0 auto;
}

.btv-header__logo img {
    display: block;
    width: 176px;
    height: 60px;
    object-fit: contain;
}

.btv-header__logo a {
    display: block;
    line-height: 0;
}

.btv-header__main-right {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--wp--preset--spacing--50);
    flex: 1 1 auto;
    justify-content: flex-end;
}

/* Reserve space for the absolutely-positioned expanding search only
 * on desktop — on mobile the search lives inside the drawer, so the
 * extra 60px makes the header content drift left. */
@media (min-width: 1024px) {
    .btv-header__main-right {
        padding-right: 60px;
    }
}

.btv-header__nav {
    flex: 0 0 auto;
}

/* Reset list */
.btv-header__nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: var(--wp--preset--spacing--50);
    align-items: center;
}

.btv-header__nav-list > li { margin: 0; }

/* Top-level nav item — green underline on hover / focus / open */
.btv-header__nav-item.has-child {
    position: relative;
    border-bottom: 2px solid transparent;
    transition: border-color 0.15s ease;
}
.btv-header__nav-item.has-child:hover,
.btv-header__nav-item.has-child:focus-within,
.btv-header__nav-item.has-child[aria-expanded="true"] {
    border-bottom-color: var(--wp--preset--color--secondary);
}

/* Trigger button mirrors a top-level link */
.btv-header__nav-trigger {
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    cursor: pointer;
    color: var(--wp--preset--color--nav-link);
    font: inherit;
    text-transform: uppercase;
    letter-spacing: 0.075rem;
    font-weight: 900;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.btv-header__nav-chevron {
    display: inline-flex;
    width: 10px;
    height: 6px;
    transition: transform 0.15s ease;
}

.btv-header__nav-item.has-child:hover .btv-header__nav-chevron,
.btv-header__nav-item.has-child:focus-within .btv-header__nav-chevron,
.btv-header__nav-trigger[aria-expanded="true"] .btv-header__nav-chevron {
    transform: rotate(180deg);
}

/* Submenu panel — Figma design (matches utility pill submenu) */
.btv-header__submenu {
    list-style: none;
    margin: 0;
    padding: 42px 44px;
    background: var(--wp--preset--color--base);
    border: 1.5px solid #e8e9ed;
    border-radius: 24px;
    box-shadow: 0 50px 60px -15px rgba(32, 43, 82, 0.3);
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 8px;
    min-width: 240px;
    z-index: 50;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease, visibility 0.15s ease;
}

/* Invisible bridge over the 8px gap so hover survives the cursor crossing */
.btv-header__submenu::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -8px;
    height: 8px;
}

.btv-header__submenu > li { margin: 0; }

.btv-header__submenu .btv-header__nav-link {
    padding: 0;
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 24.2px;
    letter-spacing: 1.044px;
    text-transform: none;
    color: var(--wp--preset--color--nav-link);
    white-space: nowrap;
    text-decoration: none;
    display: block;
}

.btv-header__submenu .btv-header__nav-link:hover,
.btv-header__submenu .btv-header__nav-link:focus-visible {
    background: transparent;
    color: var(--wp--preset--color--nav-link);
    text-decoration: none;
}

/* Reveal submenu on hover/focus (covers desktop pointer + keyboard) */
.btv-header__nav-item.has-child:hover > .btv-header__submenu,
.btv-header__nav-item.has-child:focus-within > .btv-header__submenu {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

/* === Inline expanding search (desktop) ===
   Closed state: looks like a 44×44 button with magnifier.
   Open state: expands left to reveal close-X + input + magnifier-as-submit. */
.btv-search {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: 44px;
    width: 44px;
    background: rgba(255, 255, 255, 0.4);
    border: 1px solid rgba(32, 43, 82, 0.1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.1);
    border-radius: 14px;
    overflow: hidden;
    margin: 0;
    padding: 0;
    z-index: 3;
    transition:
        width 0.35s cubic-bezier(0.4, 0, 0.2, 1),
        border-radius 0.3s ease,
        background-color 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}

.btv-search.is-active {
    /* Width is computed at runtime in header.js to span exactly from the
     * primary nav's left edge to the trigger's right edge. Falls back to
     * 100% of .btv-header__main-right when JS is unavailable. */
    width: var(--btv-search-active-width, 100%);
    border-radius: 22px;
    background: #ffffff;
    border-color: transparent;
    box-shadow: 0 18px 36px -8px rgba(32, 43, 82, 0.32), 0 6px 16px rgba(32, 43, 82, 0.14);
}

/* Close (X) button — invisible until expanded */
.btv-search__close {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    margin-left: 6px;
    background: transparent;
    border: 0;
    border-radius: 50%;
    color: var(--wp--preset--color--nav-navy);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease 0.15s, background 0.15s ease;
}

.btv-search.is-active .btv-search__close {
    opacity: 1;
    pointer-events: auto;
}

.btv-search__close:hover,
.btv-search__close:focus-visible {
    background: rgba(209, 203, 189, 0.15);
}

.btv-search__close svg { width: 16px; height: 16px; }

/* Input — full-flex middle area */
.btv-search__input {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    margin: 0;
    padding: 0 10px;
    border: 0;
    outline: 0;
    background: transparent;
    font-family: 'Outfit', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    color: var(--wp--preset--color--nav-link);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease 0.15s;
}

.btv-search.is-active .btv-search__input {
    opacity: 1;
    pointer-events: auto;
}

.btv-search__input::placeholder {
    color: #8a93a8;
    opacity: 1;
}

/* Magnifier trigger / submit — always visible on the right */
.btv-search__trigger {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    background: transparent;
    border: 0;
    border-radius: 14px;
    color: var(--wp--preset--color--nav-navy);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, border-radius 0.3s ease;
}

.btv-search.is-active .btv-search__trigger {
    border-radius: 50%;
}

.btv-search__trigger:hover,
.btv-search__trigger:focus-visible {
    background: rgba(209, 203, 189, 0.15);
}

.btv-search__trigger svg {
    width: 18px;
    height: 18px;
}

/* Compound selector (0,2,0) so the gap beats WP's
 * `:root :where(.is-layout-flex) { gap: 0px }` (0,1,0) on the cascade. */
.wp-block-group.btv-header__utility {
    min-height: 39px;
    gap: 48px;
    position: relative;
    z-index: 2;
    transform: translateY(0);
    transition: transform 0.3s ease, min-height 0.3s ease, height 0.3s ease, padding 0.3s ease;
    /* Allows pills to extend below the bar's box without clipping */
    overflow: visible;
}

/* === Pill (Employees / Business) === */

.btv-pill {
    position: relative;
    height: 44px;
    background: var(--wp--preset--color--nav-navy);
    color: var(--wp--preset--color--base);
    border-radius: 0 0 16px 16px;
    box-shadow: 0 4px 2px rgba(0,0,0,0.1);
    flex: 0 0 auto;
}

/* Glue Employees ↔ Business pills together */
.btv-pill--employees { border-bottom-right-radius: 0; }
.btv-pill--employees + .btv-pill--business {
    margin-left: -48px;
    border-bottom-left-radius: 0;
}
.btv-pill--employees + .btv-pill--business::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 1px;
    background: rgba(255, 255, 255, 0.3);
}

.btv-pill__trigger {
    /* button reset */
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 0;
    color: inherit;
    /* layout */
    height: 100%;
    padding: 0 16px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    /* typography */
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    /* behavior */
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.btv-pill__chevron {
    width: 10px;
    height: 6px;
    transition: transform 0.15s ease;
}

.btv-pill__trigger[aria-expanded="true"] .btv-pill__chevron,
.btv-pill:hover .btv-pill__chevron {
    transform: rotate(180deg);
}

/* Invisible bridge over the 4px gap so hover doesn't break between summary and menu */
.btv-pill__menu::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -4px;
    height: 4px;
}

.btv-pill__menu {
    position: absolute;
    top: 100%;
    right: 0;
    margin: 4px 0 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 42px 44px;
    list-style: none;
    background: var(--wp--preset--color--base);
    border: 1.5px solid #e8e9ed;
    border-radius: 24px;
    box-shadow: 0 50px 60px -15px rgba(32, 43, 82, 0.3);
    z-index: 10;
}

/* Restore [hidden] semantics — our flex display would otherwise win over the UA rule */
.btv-pill__menu[hidden] { display: none; }

.btv-pill__menu li { margin: 0; }

.btv-pill__menu a {
    display: inline-block;
    color: var(--wp--preset--color--nav-link);
    text-decoration: none;
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 24.2px;
    letter-spacing: 1.044px;
    white-space: nowrap;
}

.btv-pill__menu a:hover,
.btv-pill__menu a:focus-visible {
    text-decoration: none;
}

/* === Single moving indicator (sits behind hovered/focused link) === */
.btv-pill__menu::after,
.btv-header__submenu::after {
    content: "";
    position: absolute;
    top: var(--indicator-top, 0);
    left: var(--indicator-left, 0);
    width: var(--indicator-width, 0);
    height: var(--indicator-height, 0);
    background: rgba(209, 203, 189, 0.15);
    border-radius: 999px;
    opacity: 0;
    pointer-events: none;
    z-index: 0;
    transition: opacity 0.15s ease;
}
.btv-pill__menu.is-indicating::after,
.btv-header__submenu.is-indicating::after {
    opacity: 1;
    transition: top 0.2s ease, left 0.2s ease, width 0.2s ease, height 0.2s ease, opacity 0.15s ease;
}

/* Keep text above the indicator — and force transparency so the indicator shows through */
.btv-pill__menu > li,
.btv-pill__menu a,
.btv-header__submenu > li,
.btv-header__submenu .btv-header__nav-link {
    position: relative;
    z-index: 1;
    background: transparent;
}

.btv-header__separator {
    display: inline-block;
    width: 1px;
    height: 32px;
    background: var(--wp--preset--color--border);
    flex: 0 0 auto;
    align-self: center;
}

.btv-lang-switch {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    color: #1d2c4d;
    text-decoration: none;
    font-family: 'Outfit', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: normal;
    flex: 0 0 auto;
}

.btv-lang-switch:hover,
.btv-lang-switch:focus-visible {
    color: var(--wp--preset--color--primary);
    text-decoration: none;
}

.btv-lang-switch__icon {
    width: 20px;
    height: 20px;
}

/* Lock body scroll while overlay is open (shared utility class) */
body.has-overlay-open {
    overflow: hidden;
}

/* === Mobile menu trigger (hamburger) — revealed by mobile @media === */

.btv-menu-btn {
    display: none;
    align-items: center;
    gap: 10px;
    height: 44px;
    padding: 0;
    background: transparent;
    border: 0;
    color: #1d2c4d;
    cursor: pointer;
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    text-transform: uppercase;
    letter-spacing: 0.075rem;
}

.btv-menu-btn__icon {
    display: inline-flex;
    width: 20px;
    height: 14px;
}

.btv-menu-btn__icon svg { width: 100%; height: 100%; }

/* === Mobile menu overlay === */

.btv-mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: var(--wp--preset--color--base);
    overflow-y: auto;
    /* Closed state: invisible + just above the viewport. Visibility
     * is transitioned with a delay equal to the rest of the animation
     * so the element stays in the a11y tree until the fade-out
     * finishes (without it the menu pops out instantly even though
     * opacity is still animating). */
    visibility: hidden;
    opacity: 0;
    transform: translateY(-12px);
    transition:
        opacity 0.22s ease,
        transform 0.22s ease,
        visibility 0s linear 0.22s;
}

.btv-mobile-menu[aria-hidden="false"] {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    transition:
        opacity 0.22s ease,
        transform 0.22s ease,
        visibility 0s linear 0s;
}

@media (prefers-reduced-motion: reduce) {
    .btv-mobile-menu {
        transition: visibility 0s linear 0s;
        transform: none;
    }
    .btv-mobile-menu[aria-hidden="false"] {
        transition: visibility 0s linear 0s;
    }
}

.wp-block-group.btv-mobile-menu__panel,
.btv-mobile-menu__panel {
    padding: 1.25rem 1.5rem 3rem;
    max-width: 720px;
    margin: 0 auto;
}

.wp-block-group.btv-mobile-menu__header,
.btv-mobile-menu__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0 1.25rem;
    margin-bottom: 0.5rem;
}

.btv-mobile-menu__heading {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 20px;
    text-transform: uppercase;
    letter-spacing: 0.075rem;
    color: var(--wp--preset--color--nav-navy);
}

.btv-mobile-menu__close {
    width: 44px;
    height: 44px;
    background: transparent;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    color: var(--wp--preset--color--nav-navy);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btv-mobile-menu__close:hover { background: rgba(209, 203, 189, 0.15); }
.btv-mobile-menu__close svg { width: 22px; height: 22px; }

/* Search field */
.btv-mobile-menu__search {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    padding: 0.5rem 0.75rem;
    border: 1.5px solid #e8e9ed;
    border-radius: 999px;
    background: var(--wp--preset--color--base);
}

.btv-mobile-menu__search input {
    flex: 1;
    border: 0;
    outline: 0;
    background: transparent;
    font-family: 'Outfit', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 24.2px;
    color: var(--wp--preset--color--nav-link);
}

.btv-mobile-menu__search input::placeholder {
    color: #8a93a8;
    opacity: 1;
}

.btv-mobile-menu__search button {
    width: 36px;
    height: 36px;
    background: var(--wp--preset--color--nav-link);
    color: var(--wp--preset--color--base);
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btv-mobile-menu__search button svg { width: 16px; height: 16px; }

/* Section headings */
.btv-mobile-menu__utility h2 {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 12px;
    line-height: 16px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--wp--preset--color--nav-navy);
    margin: 1.75rem 0 0.5rem;
}

.btv-mobile-menu__utility ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.btv-mobile-menu__utility li { margin: 0; }

.btv-mobile-menu__utility a {
    display: block;
    padding: 0.875rem 0;
    color: var(--wp--preset--color--nav-link);
    text-decoration: none;
    border-bottom: 1px solid #f0f1f4;
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 24.2px;
    letter-spacing: 1.044px;
}

.btv-mobile-menu__utility a:hover,
.btv-mobile-menu__utility a:focus-visible {
    background: rgba(209, 203, 189, 0.15);
}

/* --- Primary nav accordions --------------------------------------- */

.btv-mobile-menu__nav {
    display: flex;
    flex-direction: column;
}

/* Shared row look for both <details> sections and top-level direct
 * links — uppercase nav-style with a bottom divider. */
.btv-mobile-menu__summary,
.btv-mobile-menu__top-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 1rem 0;
    border-bottom: 1px solid #f0f1f4;
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 20px;
    color: var(--wp--preset--color--nav-link);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
}

.btv-mobile-menu__summary { list-style: none; }
.btv-mobile-menu__summary::-webkit-details-marker { display: none; }

/* Chevron — inline SVG via data URI so the stroke color tracks the
 * surrounding text color. Rotates 180° when the section is open. */
.btv-mobile-menu__summary::after {
    content: "";
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none"><path d="M5 7.5L10 12.5L15 7.5" stroke="%231c509f" stroke-width="1.667" stroke-linecap="round" stroke-linejoin="round"/></svg>') center/contain no-repeat;
    transition: transform 0.2s ease;
}

.btv-mobile-menu__section[open] > .btv-mobile-menu__summary::after {
    transform: rotate(180deg);
}

.btv-mobile-menu__summary:hover,
.btv-mobile-menu__top-link:hover {
    background: rgba(209, 203, 189, 0.15);
}

/* Keyboard-only focus indicator — outline instead of bg so the row
 * doesn't visually stay "selected" after a tap toggles a section
 * on touch devices (where `:focus-visible` can persist). */
.btv-mobile-menu__summary:focus-visible,
.btv-mobile-menu__top-link:focus-visible {
    outline: 2px solid var(--wp--preset--color--nav-link);
    outline-offset: -2px;
}

/* Child list inside an open accordion — only the expanded panel
 * gets the tinted bg (the summary above stays plain). Negative
 * inline margins match the panel's 1.5rem horizontal padding so
 * the bg sangra até as bordas; matching inner padding restores
 * the link alignment to the rest of the menu rows. */
.btv-mobile-menu__sublist {
    list-style: none;
    margin: 0;
    margin-inline: -1.5rem;
    padding: 0.5rem 1.5rem 1rem;
    background: rgba(112, 196, 232, 0.09);
}

.btv-mobile-menu__sublist li { margin: 0; }

.btv-mobile-menu__sublist a {
    display: block;
    padding: 0.875rem 0;
    color: var(--wp--preset--color--military-blue);
    text-decoration: none;
    font-family: 'Outfit', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
    letter-spacing: 0;
}

.btv-mobile-menu__sublist a:hover,
.btv-mobile-menu__sublist a:focus-visible {
    color: var(--wp--preset--color--nav-link);
}

.btv-mobile-menu__lang {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 2rem;
    padding: 0.75rem 1.25rem;
    border: 1.5px solid #e8e9ed;
    border-radius: 999px;
    color: #1d2c4d;
    text-decoration: none;
    font-family: 'Outfit', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
}

/* === Mobile (< 1024px) === */

@media (max-width: 1023.98px) {
    /* Hide desktop-only header elements */
    .btv-header__utility,
    .btv-header__nav,
    .btv-search {
        display: none !important;
    }

    /* Reveal mobile menu trigger */
    .btv-menu-btn {
        display: inline-flex;
    }

    /* Strip the outer root padding so .btv-header__main controls all horizontal spacing */
    .btv-header {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Match mobile-menu inner container (max 720px, 1.5rem horizontal padding) */
    .btv-header__main {
        max-width: 720px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
        min-height: 70px;
    }

    /* Shrink logo */
    .btv-header__logo img {
        max-width: 100px;
        width: 100px;
        height: auto;
    }
}

/* === Shrink-on-scroll === */

.btv-header.is-scrolled .btv-header__utility {
    transform: translateY(-100%);
    min-height: 0;
    height: 0;
    padding-top: 0;
    padding-bottom: 0;
    overflow: hidden;
    pointer-events: none;
}

.btv-header.is-scrolled .btv-header__main {
    min-height: 80px;
}

@media (max-width: 1023.98px) {
    .btv-header.is-scrolled .btv-header__main {
        min-height: 60px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .btv-header,
    .btv-header__utility {
        transition: none;
    }
}