/* vn-header — sitewide nav bar.
   Transparent over the hero, then a solid bar once the page scrolls (logo shrinks in).
   Not in the Figma mockups: the heroes carry the big logo, so the top state stays out of their way.
   Heights and colors come from VN Elements → Header as CSS variables (BUG-038). */

/* Sizes live on :root so the chip and non-hero pages can read them too.
   The Header settings feed the *-set variables; the breakpoints below override the plain ones,
   so a desktop setting can't leak into tablet and phone (BUG-038). */
:root {
    --vn-hdr-h: var(--vn-hdr-h-set, 104px);
    --vn-hdr-h-sticky: var(--vn-hdr-h-sticky-set, 72px);
    --vn-hdr-logo: var(--vn-hdr-logo-set, 62px);
    --vn-hdr-logo-sticky: var(--vn-hdr-logo-sticky-set, 46px);
    --vn-hdr-pad: clamp(18px, 4vw, 74px);
}

.vn-header {
    position: absolute;
    z-index: 1000;
    top: 0;
    left: 0;
    width: 100%;
    font-family: var(--vn-font-body);
    color: var(--vn-hdr-link, var(--vn-navy));
    transition: background-color 0.25s ease, box-shadow 0.25s ease, color 0.25s ease;
}

.vn-header--sticky { position: fixed; }

/* White fade behind the top state: solid behind the links, then fading out over the hero,
   so the links read on any photo before the bar turns solid. Color and strength come
   from Header settings (--vn-hdr-scrim is an rgba).
   The mask keeps it off the left third: every hero's own logo lives there on a light
   background already, and the fade would wash it out (the header layer is above the page). */
.vn-header::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0 0 auto;
    height: calc(var(--vn-hdr-h) * 1.5);
/*     background: linear-gradient(
        to bottom,
        var(--vn-hdr-scrim, rgba(255, 255, 255, 0.94)) 0%,
        var(--vn-hdr-scrim, rgba(255, 255, 255, 0.94)) 58%,
        var(--vn-hdr-scrim-clear, rgba(255, 255, 255, 0)) 100%
    ); */
    -webkit-mask-image: linear-gradient(to right, transparent 0, transparent 30%, #000 48%);
    mask-image: linear-gradient(to right, transparent 0, transparent 30%, #000 48%);
    opacity: var(--vn-hdr-scrim-opacity, 1);
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.vn-header.is-stuck {
    background-color: var(--vn-hdr-bg, var(--vn-navy));
    color: var(--vn-hdr-bg-link, var(--vn-white));
    box-shadow: 0 2px 18px -6px rgba(0, 0, 0, 0.35);
}

.vn-header.is-stuck::before { opacity: 0; }

.admin-bar .vn-header { top: 32px; }

.vn-header__inner {
    display: flex;
    align-items: center;
    gap: clamp(16px, 2vw, 36px);
    max-width: 1780px;
    height: var(--vn-hdr-h);
    margin: 0 auto;
    padding: 0 var(--vn-hdr-pad);
    transition: height 0.25s ease;
}

.vn-header.is-stuck .vn-header__inner { height: var(--vn-hdr-h-sticky); }

/* ── Logo ──
   Default mode is "scrolled": the hero's own logo brands the top of the page,
   and this one fades in only once the bar turns solid. */

.vn-header__logo {
    flex: none;
    display: flex;
    align-items: center;
    margin-right: auto;
}

.vn-header__logo img {
    display: block;
    width: auto;
    height: var(--vn-hdr-logo, 62px);
    transition: height 0.25s ease, opacity 0.25s ease, transform 0.25s ease;
}

.vn-header.is-stuck .vn-header__logo img { height: var(--vn-hdr-logo-sticky, 46px); }

/* One logo for the see-through bar, a light one for the dark scrolled bar */
/* Scoped through .vn-header__logo: the plain `.vn-header__logo img { display: block }` rule above
   outranks a single class, which left both logos showing side by side in "Always" mode. */
.vn-header .vn-header__logo .vn-header__logo-stuck { display: none; }
.vn-header.is-stuck .vn-header__logo .vn-header__logo-top { display: none; }
.vn-header.is-stuck .vn-header__logo .vn-header__logo-stuck { display: block; }

/* Navy hero (Contact): light logo at the top too */
.vn-header--on-dark .vn-header__logo .vn-header__logo-top { display: none; }
.vn-header--on-dark .vn-header__logo .vn-header__logo-stuck { display: block; }

.vn-header-logo-scrolled .vn-header__logo {
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.vn-header-logo-scrolled.is-stuck .vn-header__logo { opacity: 1; transform: none; }

/* "Always" mode: the bar carries the logo the whole way, so the hero's own is hidden.
   It stays in the layout as an invisible spacer as tall as the bar: in the Panel and Mask heroes
   and on tablet/phone the logo sits in the flow, and removing it pulled the headline up under
   the fixed bar. Where the logo is absolutely positioned (Fade/Solid on desktop) this has no effect. */
.vn-header-has-logo .vn-hero .vn-hero__logo {
    visibility: hidden;
    width: 0;
    height: var(--vn-hdr-h);
}

/* ── Links ── */

.vn-header__nav {
    display: flex;
    align-items: center;
    gap: clamp(16px, 2vw, 36px);
}

.vn-header__list {
    display: flex;
    align-items: center;
    gap: clamp(14px, 1.7vw, 32px);
    margin: 0;
    padding: 0;
    list-style: none;
}

.vn-header__list li { position: relative; margin: 0; }

.vn-header__list a {
    display: block;
    padding: 6px 2px;
    font-size: var(--vn-hdr-link-size, 17px);
    font-weight: 600;
    letter-spacing: 0.3px;
    color: inherit;
    text-decoration: none;
}

.vn-header__list > li > a::after {
    content: "";
    display: block;
    height: 2px;
    margin-top: 3px;
    background-color: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.18s ease;
}

.vn-header__list > li > a:hover::after,
.vn-header__list > li > a:focus-visible::after,
.vn-header__list > li.current-menu-item > a::after,
.vn-header__list > li.current-menu-ancestor > a::after { transform: scaleX(1); }

/* Hover colors: one for the see-through state, one for the solid bar and the phone drawer.
   Submenu links keep their own navy-on-white hover further down. */
.vn-header__list > li > a:hover,
.vn-header__list > li > a:focus-visible,
.vn-header__phone:hover,
.vn-header__phone:focus-visible { color: var(--vn-hdr-link-hover, inherit); }

.vn-header.is-stuck .vn-header__list > li > a:hover,
.vn-header.is-stuck .vn-header__list > li > a:focus-visible,
.vn-header.is-stuck .vn-header__phone:hover,
.vn-header.is-stuck .vn-header__phone:focus-visible { color: var(--vn-hdr-bg-link-hover, inherit); }

.vn-header a:focus-visible {
    outline: 3px solid currentColor;
    outline-offset: 3px;
    border-radius: 4px;
}

/* ── Dropdown ── */

.vn-header__list .menu-item-has-children > a { padding-right: 16px; }

/* Both buttons below are scoped to .vn-header on purpose: Hello Elementor's reset.css loads
   after plugin CSS and its [type="button"] selector ties with a plain class, so the theme wins. */

.vn-header .vn-header__caret {
    position: absolute;
    top: 50%;
    right: 0;
    width: 10px;
    height: 10px;
    margin-top: -5px;
    border: 0;
    padding: 0;
    background: none;
    color: inherit;
    cursor: pointer;
}

.vn-header .vn-header__caret::before {
    content: "";
    display: block;
    width: 7px;
    height: 7px;
    margin: -2px 0 0 1px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.2s ease;
}

.vn-header__list .sub-menu {
    position: absolute;
    z-index: 5;
    top: calc(100% + 10px);
    left: -18px;
    min-width: 232px;
    margin: 0;
    padding: 10px 0;
    background-color: var(--vn-white);
    border-radius: 12px;
    box-shadow: 0 14px 34px -12px rgba(7, 49, 114, 0.35);
    list-style: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}

.vn-header__list li:hover > .sub-menu,
.vn-header__list li:focus-within > .sub-menu,
.vn-header__list li.is-open > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.vn-header__list li.is-open > a .vn-header__caret::before,
.vn-header__list li.is-open > .vn-header__caret::before { transform: rotate(-135deg); }

.vn-header__list .sub-menu a {
    padding: 9px 22px;
    font-weight: 500;
    color: var(--vn-navy);
    white-space: nowrap;
}

.vn-header__list .sub-menu a:hover,
.vn-header__list .sub-menu a:focus-visible { background-color: var(--vn-mist); }

/* ── Phone + call to action ── */

.vn-header__actions {
    display: flex;
    align-items: center;
    gap: clamp(12px, 1.4vw, 24px);
}

.vn-header__phone {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: var(--vn-hdr-link-size, 17px);
    font-weight: 700;
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
}

.vn-header__phone svg { width: 18px; height: 18px; fill: currentColor; }

/* Scoped with .vn-header: Hello's reset.css `a:hover { color: #336 }` outranks a single class,
   which turned the button text dark navy on hover. Hover keeps the button's colors. */
.vn-header .vn-header__cta {
    display: inline-flex;
    align-items: center;
    padding: 11px 26px;
    border-radius: 999px;
    background-color: var(--vn-hdr-cta-bg, var(--vn-navy));
    font-size: var(--vn-hdr-link-size, 17px);
    font-weight: 600;
    color: var(--vn-hdr-cta-text, var(--vn-white));
    text-decoration: none;
    white-space: nowrap;
    transition: transform 0.15s ease, background-color 0.15s ease;
}

.vn-header .vn-header__cta:hover,
.vn-header .vn-header__cta:focus-visible { transform: translateY(-1px); }

.vn-header.is-stuck .vn-header__cta {
    background-color: var(--vn-hdr-cta-bg-stuck, var(--vn-white));
    color: var(--vn-hdr-cta-text-stuck, var(--vn-navy));
}

/* ── Hamburger ── */

.vn-header .vn-header__toggle {
    display: none;
    flex: none;
    width: 44px;
    height: 44px;
    border: 0;
    padding: 10px;
    background: none;
    color: inherit;
    cursor: pointer;
}

.vn-header .vn-header__toggle span {
    display: block;
    height: 2px;
    margin: 4px 0;
    background-color: currentColor;
    border-radius: 2px;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.vn-nav-open .vn-header__toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.vn-nav-open .vn-header__toggle span:nth-child(2) { opacity: 0; }
.vn-nav-open .vn-header__toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.vn-header__backdrop {
    position: fixed;
    inset: 0;
    z-index: -1;
    background-color: rgba(7, 49, 114, 0.45);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s;
}

/* ── Chip and anchors clear the bar ── */

/* The chip sits just under the bar; above the header layer so the fade can't wash it out.
   Hidden while the phone/tablet menu is open, which it would otherwise cover. */
.vn-has-header .vn-chip { z-index: 1001; }
.vn-nav-open .vn-chip { visibility: hidden; }

/* Only while the chip is a floating corner chip — on phones it becomes a bottom bar
   (top: auto) and pushing its top down would stretch it over the whole page. */
@media (min-width: 768px) {
    .vn-has-sticky-header .vn-chip { top: calc(var(--vn-chip-top, 24px) + var(--vn-hdr-h-sticky)); }
    .admin-bar.vn-has-sticky-header .vn-chip { top: calc(var(--vn-chip-top, 24px) + var(--vn-hdr-h-sticky) + 32px); }
}

/* Pages without a hero would start underneath the bar (blog posts, 404 — no .vn-main there) */
body.vn-header-push { padding-top: var(--vn-hdr-h); }

html { scroll-padding-top: calc(var(--vn-hdr-h-sticky, 72px) + 16px); }

@media (max-width: 1024px) {
    :root { --vn-hdr-h: 84px; --vn-hdr-h-sticky: 64px; --vn-hdr-logo: 48px; --vn-hdr-logo-sticky: 40px; }

    .vn-header .vn-header__toggle { display: block; }

    /* Only the menu button shows here and every hero starts on a plain background at this width,
       so the fade has nothing to fix — and it would sit over the headline */
    .vn-header::before { display: none; }

    .vn-header__nav {
        position: fixed;
        z-index: 4;
        top: 0;
        right: 0;
        bottom: 0;
        width: min(84vw, 360px);
        padding: calc(var(--vn-hdr-h) + 16px) 28px 40px;
        background-color: var(--vn-hdr-bg, var(--vn-navy));
        color: var(--vn-hdr-bg-link, var(--vn-white));
        overflow-y: auto;
        overscroll-behavior: contain;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        transform: translateX(100%);
        visibility: hidden;
        transition: transform 0.28s ease, visibility 0.28s;
    }

    .admin-bar .vn-header__nav { top: 32px; }

    .vn-nav-open .vn-header__nav { transform: none; visibility: visible; }
    .vn-nav-open .vn-header__backdrop { opacity: 1; visibility: visible; }
    .vn-nav-open { overflow: hidden; }

    .vn-header__list {
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        width: 100%;
    }

    .vn-header__list > li { border-bottom: 1px solid rgba(255, 255, 255, 0.16); }
    .vn-header__list a { padding: 14px 2px; font-size: 1.05rem; }
    .vn-header__list > li > a::after { display: none; }

    .vn-header .vn-header__caret { right: 4px; width: 40px; height: 48px; margin-top: -24px; }
    .vn-header .vn-header__caret::before { margin: 0 auto; }

    /* Submenus open in place instead of floating */
    .vn-header__list .sub-menu {
        position: static;
        display: none;
        min-width: 0;
        padding: 0 0 8px 14px;
        background: none;
        border-radius: 0;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        transform: none;
    }

    .vn-header__list li.is-open > .sub-menu { display: block; }
    .vn-header__list .sub-menu a { padding: 10px 2px; color: inherit; font-size: 1rem; }
    .vn-header__list .sub-menu a:hover,
    .vn-header__list .sub-menu a:focus-visible { background: none; text-decoration: underline; }

    /* The drawer is the dark bar's palette, whatever the scroll state */
    .vn-header .vn-header__nav .vn-header__list a:hover,
    .vn-header .vn-header__nav .vn-header__list a:focus-visible,
    .vn-header .vn-header__nav .vn-header__phone:hover,
    .vn-header .vn-header__nav .vn-header__phone:focus-visible { color: var(--vn-hdr-bg-link-hover, inherit); }

    .vn-header__actions {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
        margin-top: 26px;
    }

    .vn-header .vn-header__nav .vn-header__cta {
        justify-content: center;
        background-color: var(--vn-white);
        color: var(--vn-navy);
    }

    .vn-header__nav .vn-header__phone { justify-content: center; font-size: 1.15rem; }
}

@media (max-width: 767px) {
    :root { --vn-hdr-h: 72px; --vn-hdr-h-sticky: 60px; --vn-hdr-logo: 40px; --vn-hdr-logo-sticky: 40px; --vn-hdr-pad: 18px; }
}

@media (prefers-reduced-motion: reduce) {
    .vn-header,
    .vn-header *,
    .vn-header::before { transition-duration: 0.01ms !important; }
}