/* ============================================================
   Site header
   Figma: desktop 935:3582 (1440), mobile 1305:22757 (393). The tablet
   frame (1140:58073, an inline nav) is not built: from 1024 down the
   header is the mobile one, with the burger (Alex, 23 Oct). Every page frame uses the transparent
   bar over its hero. The white "filled" variant is what the bar
   turns into while a dropdown is open, and once the page has scrolled
   past 50px (header.js adds .is-scrolled).
   ============================================================ */

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding-left: var(--space-gutter);
    padding-right: var(--space-gutter);
    z-index: 100;
    transition: background-color var(--transition-base), box-shadow var(--transition-base);
}
.site-header.is-filled,
.site-header.is-scrolled {
    background: var(--color-surface);
    box-shadow: var(--shadow-action);   /* the declared "Action" effect, a small lift off the page */
}

/* Fixed, so below the WordPress admin bar when someone is signed in */
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) {
    .admin-bar .site-header { top: 46px; }
}

/* A link to an on-page section (#form-001) lands below the bar: 80px on
   desktop, 56 from 1024 down (the mobile bar) */
html { scroll-padding-top: 80px; }
@media (max-width: 1024px) { html { scroll-padding-top: 56px; } }

/* Desktop: logo, nav, search and Ask Coplus 40px apart (911:3692) */
.header__inner {
    max-width: var(--layout-content-max-w);
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 40px;
    padding-top: 16px;
    padding-bottom: 16px;
}

/* WP's custom-logo markup is <a class="custom-logo-link"><img class="custom-logo"> */
.custom-logo-link,
.logo {
    display: block;
    flex-shrink: 0;
}
.custom-logo,
.logo img {
    height: 48px; /* Figma logo frame is 47.6px */
    width: auto;
}

/* ── Nav ──────────────────────────────────────────────────── */
.header__inner .nav { display: flex; }

.nav__links {
    display: flex;
    align-items: center;
    gap: 24px;
}

.nav__item { position: relative; }

/* Figma sets these in Poppins Medium 18 with no text style; built in
   Futura 100 (Alex, 29 Sep). */
.nav__item > a,
.nav__dropdown-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 12px 0;
    border: none;
    border-radius: 999px;
    background: none;
    font-family: var(--font-heading);
    font-weight: var(--weight-medium);
    font-size: 18px;
    line-height: 20px; /* 12px padding + 20px + 12px = the 44px nav item in Figma */
    color: var(--color-secondary);
}
.nav__dropdown-btn { cursor: pointer; }
.nav__item > a:focus-visible,
.nav__dropdown-btn:focus-visible {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 2px;
}

.nav__item--active > a,
.nav__item--active > .nav__dropdown-btn { color: var(--color-primary); }

/* The open item's label goes bold (935:3581) */
.nav__item--open > .nav__dropdown-btn { font-weight: var(--weight-heavy); }

.nav__item .caret {
    width: 20px;
    height: 20px;
    padding: 7px 5px;
    color: currentColor;
    transition: transform var(--transition-base);
}
.nav__item--dropdown.nav__item--open .caret { transform: rotate(180deg); }

/* The dropdown hangs from the bottom of the bar: 18px below the 44px item
   on desktop, with the links 20px in from the panel edge (911:3630) */
.nav__dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 18px);
    left: -20px;
    flex-direction: column;
    padding: 10px 0;
    border-radius: 0 0 14px 14px;
    background: var(--color-surface-tint);
    box-shadow: var(--shadow-action);
    z-index: 50;
}
.nav__item--open .nav__dropdown { display: flex; }

/* Bridges the gap between the item and the panel, so the pointer can cross
   it without the hover (header.js) letting go */
.nav__dropdown::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: 18px;
}

.nav__dropdown a {
    display: flex;
    align-items: center;
    height: 44px;
    padding: 0 20px;
    font-family: var(--font-action);
    font-weight: var(--weight-heavy);
    font-size: var(--text-action);           /* Figma: dropdown items are Action */
    line-height: var(--leading-action);
    letter-spacing: var(--tracking-action);
    color: var(--color-secondary);
    white-space: nowrap;
}
.nav__dropdown a:hover { color: var(--color-primary); }
.nav__dropdown a:focus-visible {
    color: var(--color-primary);
    outline: 2px solid var(--color-focus-ring);
    outline-offset: -2px;
}

/* ── Search ───────────────────────────────────────────────── */
/* Both hook the plugin by attribute only — data-ask-coplus-launch on the
   form, data-ask-coplus-open on the button — and carry no plugin classes,
   so the plugin's own launcher styling cannot reach them. */
.site-header .header__search {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 12px;
    border: 1px solid rgba(23, 117, 145, 0.2);
    border-radius: 99px;
    background: var(--color-surface-glass);
    box-shadow: var(--shadow-action);
    transition: background var(--transition-base), border-color var(--transition-base);
}
.site-header.is-filled .header__search,
.site-header.is-scrolled .header__search,
.site-header .header__search:focus-within {
    background: var(--color-surface);
}
.site-header .header__search:focus-within { border-color: var(--color-primary); }

.header__search-icon {   /* Figma "search", 17.2px (917:3788) */
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    color: var(--color-text);
}

.site-header .header__search-input {
    flex: 1;
    min-width: 0;
    border: 0;
    padding: 0;
    background: none;
    font-family: var(--font-heading);
    font-size: 16px;
    line-height: 1;
    color: var(--color-text);
}

.site-header .header__search-input::placeholder { color: rgba(0, 0, 0, 0.5); }
.site-header .header__search-input:focus { outline: none; }

/* ── Actions ──────────────────────────────────────────────── */
.header__actions {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-left: auto;
}

/* Material "dehaze", 40px (1305:22750) */
.nav-toggle {
    display: none;
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    background: none;
    color: var(--color-secondary);
}
.nav-toggle svg { width: 40px; height: 40px; display: block; }
.nav-toggle:focus-visible {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ── Tablet and mobile (1305:22754) ───────────────────────────
   From 1024 down the header is the mobile one: a 56px bar with the
   logo, then the Ask Coplus mark and the burger. The nav and the search
   move into the menu panel (Alex, 23 Oct; the tablet frame 1140:58072
   drew an inline nav).
   ───────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .header__inner {
        padding-top: 8px;
        padding-bottom: 8px;
    }
    .custom-logo,
    .logo img { height: 33px; }   /* Figma 32.8px */

    .site-header .header__search { display: none; }
    .header__inner .nav { display: none; }
    .nav-toggle { display: block; }

    /* The gold mark circle: the label stays as the accessible name */
    .header__ask {
        width: 40px;
        padding: 0 4px;
        gap: 0;
    }
    .header__ask .btn__label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
}

/* ── Inverse: AncillaryHUB pages (1331:138304, mobile 1331:137432) ──
   The bar is transparent over the indigo hero, so the logo, nav and burger
   are white. While a dropdown fills the bar white (.is-filled), or the page
   has scrolled (.is-scrolled), they go back to normal; the dropdown and mobile menu panels never change. ───────── */
.custom-logo-link--inverse { display: none; }
.site-header--inverse:not(.is-filled):not(.is-scrolled) .header__inner > .custom-logo-link:not(.custom-logo-link--inverse) { display: none; }
.site-header--inverse:not(.is-filled):not(.is-scrolled) .header__inner > .custom-logo-link--inverse { display: block; }
.mobile-menu .custom-logo-link--inverse { display: none; }

.site-header--inverse:not(.is-filled):not(.is-scrolled) .nav__item > a,
.site-header--inverse:not(.is-filled):not(.is-scrolled) .nav__dropdown-btn,
.site-header--inverse:not(.is-filled):not(.is-scrolled) .nav-toggle { color: var(--color-text-inverse); }
.site-header--inverse:not(.is-filled):not(.is-scrolled) .nav__item > a:focus-visible,
.site-header--inverse:not(.is-filled):not(.is-scrolled) .nav__dropdown-btn:focus-visible,
.site-header--inverse:not(.is-filled):not(.is-scrolled) .nav-toggle:focus-visible { outline-color: var(--color-text-inverse); }

/* ── Mobile menu (1305:22755) ─────────────────────────────────
   Opens over the page from the top, on a white to pale-blue wash
   (--color-wash, tokenised from the frame and flagged).
   ───────────────────────────────────────────────────────────── */
.mobile-menu {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 100vh;
    height: 100dvh;   /* the whole screen, whatever the browser bars are doing (Alex, 23 Oct) */
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 32px var(--space-gutter) calc(32px + env(safe-area-inset-bottom, 0px));   /* the bar's own gutter (40 on tablet, 20 on mobile), so the logo doesn't move */
    background: linear-gradient(160deg, var(--color-wash) 0%, var(--color-surface) 100%);
    z-index: 110;
    /* Eases in from slightly above; header.js adds .is-open a frame after
       un-hiding it, and hides it again once the fade has finished */
    opacity: 0;
    transform: translateY(-16px);
    transition: opacity 300ms ease, transform 300ms ease;
}
.mobile-menu.is-open {
    opacity: 1;
    transform: none;
}
.mobile-menu[hidden] { display: none; }

@media (min-width: 1025px) {
    .mobile-menu { display: none; }
}

.mobile-menu__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 44px;
}
.mobile-menu__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-right: -12px;
    padding: 0;
    border: none;
    background: none;
    color: var(--color-secondary);
}
.mobile-menu__close svg { width: 20px; height: 20px; }
.mobile-menu__close:focus-visible {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: -2px;
    border-radius: 4px;
}

.site-header .mobile-menu__search { display: flex; flex: 0 0 auto; }  /* overrides the bar's tablet hide */
.mobile-menu__nav { margin-top: -20px; }  /* the search and list are one group in the frame, no gap */

.mobile-menu__toggle,
.mobile-menu__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 56px;
    padding: 0;
    border: none;
    background: none;
    font-family: var(--font-action);
    font-weight: var(--weight-heavy);
    font-size: var(--text-action);
    line-height: var(--leading-action);
    letter-spacing: var(--tracking-action);
    color: var(--color-secondary);
    text-align: left;
    cursor: pointer;
    border-bottom: 1px solid var(--color-border);  /* Secondary Accent, under each row */
}
.mobile-menu__chevron {
    width: 14px;
    height: 8px;
    flex-shrink: 0;
    color: var(--color-primary);
    transition: transform 300ms ease;
}
.mobile-menu__toggle[aria-expanded="true"] .mobile-menu__chevron { transform: rotate(180deg); }

/* The accordion slides open and shut: header.js animates its height */
.mobile-menu__sub {
    overflow: hidden;
    transition: height 300ms ease;
}

@media (prefers-reduced-motion: reduce) {
    .mobile-menu,
    .mobile-menu__sub,
    .mobile-menu__chevron,
    .nav__item .caret { transition: none; }
}

/* The accordion's links sit 16px in, at 65% (1108:16157) */
.mobile-menu__sub a {
    display: flex;
    align-items: center;
    height: 44px;
    padding-left: 16px;
    font-family: var(--font-action);
    font-weight: var(--weight-heavy);
    font-size: var(--text-action);
    line-height: var(--leading-action);
    letter-spacing: var(--tracking-action);
    color: var(--color-secondary);
    opacity: 0.65;
}
.mobile-menu__sub a:hover { opacity: 1; }

.mobile-menu__toggle:focus-visible,
.mobile-menu__link:focus-visible,
.mobile-menu__sub a:focus-visible {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: -2px;
    opacity: 1;
}

.mobile-menu__actions {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: auto;   /* the menu fills the screen, so the buttons sit at its foot */
}
.mobile-menu__actions .btn { width: 100%; }

/* "Talk To Us" is the Primary button with the Secondary Gradient fill (1108:16188) */
.btn--primary.mobile-menu__talk { background: var(--gradient-primary); }
.btn--primary.mobile-menu__talk:hover { background: var(--button-primary-bg-hover); }
.btn--primary.mobile-menu__talk:active { background: var(--button-primary-bg-pressed); }

html.has-mobile-menu { overflow: hidden; }

/* ── Search suggestions (Alex, 21 Oct 2026; no frame draws them, so built
   to the site's tokens and logged as D79) ───────────────────── */
.site-header .header__search { position: relative; }

/* A type=search input would otherwise take the browser's own look and a clear button */
.site-header .header__search-input { -webkit-appearance: none; appearance: none; }
.site-header .header__search-input::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }

.header__search-panel {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    z-index: 5;
    padding: 8px;
    border-radius: 20px;
    background: var(--color-surface);
    box-shadow: var(--shadow-action);
    max-height: min(420px, 70vh);
    overflow-y: auto;
}
.header__search-panel[hidden],
.header__search-empty[hidden] { display: none; }

.header__search-option {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 12px;
    font-family: var(--font-heading);
    font-weight: var(--weight-medium);
    font-size: 16px;
    line-height: 1.3;
    color: var(--color-text);
    text-decoration: none;
}
.header__search-option:hover,
.header__search-option.is-active { background: var(--color-surface-tint); }
.header__search-option.is-active { outline: 2px solid var(--color-focus-ring); outline-offset: -2px; }

.header__search-type {
    flex-shrink: 0;
    font-size: var(--text-body-small);
    line-height: var(--leading-body-small);
    color: var(--color-primary);
}
.header__search-empty {
    margin: 0;
    padding: 10px 12px;
    font-family: var(--font-body);
    font-size: var(--text-body-small);
    line-height: 1.3;
    color: var(--color-text);
}

/* The spinner at the right of the box while suggestions load */
.header__search-spinner {
    display: none;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    border: 2px solid var(--color-surface-tint);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: header-search-spin 700ms linear infinite;
}
.header__search.is-loading .header__search-spinner { display: block; }
@keyframes header-search-spin { to { transform: rotate( 360deg ); } }
@media (prefers-reduced-motion: reduce) {
    .header__search-spinner { animation: none; }   /* a still ring: the box still says "working" */
}