/* ============================================================
   navigation.css — companion to /scripts/navigation.js.
   Loads AFTER main.css, so its .overlay rules win by source order
   and convert the full-screen fade overlay into a right-side
   flyout drawer (matching the customer-site campaign-2 mobile menu).
   ============================================================ */

/* --- Flyout drawer --------------------------------------------------
   main.css positions .overlay as a full-screen fade (inset:0,
   opacity transition). These overrides narrow it to a right-side
   panel and switch the animation to a horizontal slide. The
   visibility timing mirrors main.css's so the drawer is
   untabbable/hidden when closed. */
.overlay {
    left: auto;
    right: 0;
    width: min(85vw, 380px);
    opacity: 1;
    transform: translateX(100%);
    transition: transform .35s var(--ease-out, ease-out), visibility 0s .35s;
    box-shadow: -16px 0 48px rgba(0, 0, 0, .3);
}

.overlay.is-open {
    transform: none;
    transition: transform .35s var(--ease-out, ease-out), visibility 0s 0s;
}

/* --- Scrim -----------------------------------------------------------
   Created by navigation.js; dims the page and provides the
   click-outside-to-close surface (page content is inert while the
   drawer is open, so clicks out there never dispatch). Sits one
   z-index below main.css's .overlay (9999999). */
.nav-scrim {
    position: fixed;
    inset: 0;
    z-index: 9999998;
    background: rgba(4, 20, 45, .55);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, visibility 0s .3s;
}

.nav-scrim.is-open {
    opacity: 1;
    visibility: visible;
    transition: opacity .3s ease, visibility 0s 0s;
}

/* --- Button resets ---------------------------------------------------
   The hamburger and close controls are <button>s; strip native
   chrome so they keep the anchor-era styling from main.css.
   (Mirrors the #close-overlay reset in the customer nav-base.css.) */
.menu-open-button .btn-open,
.overlay-close-btn {
    -webkit-appearance: none;
    appearance: none;
    background: none;
    border: 0;
    padding: 0;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

/* main.css targets ".menu-open-button a" for color, so restate it,
   give the hamburger the same 44px hit area the close button has,
   and frame it with a white border so it reads as a button. */
.menu-open-button .btn-open {
    color: #fff;
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, .85);
    border-radius: 10px;
    transition: background-color .2s ease, border-color .2s ease;
}

.menu-open-button .btn-open:hover,
.menu-open-button .btn-open:active {
    background-color: rgba(255, 255, 255, .12);
    border-color: #fff;
    color: #fff;
}

/* --- More visible drawer close button -------------------------------
   main.css gives .overlay-close-btn a faint 10%-white circle that's
   easy to miss against the navy drawer. Strengthen it: matching white
   border (same language as the hamburger), brighter fill, larger icon. */
.overlay-close-btn {
    width: 48px;
    height: 48px;
    color: #fff; /* explicit: the button reset's color:inherit otherwise wins over main.css's white and picks up the gray body color */
    background: rgba(255, 255, 255, .18);
    border: 1px solid rgba(255, 255, 255, .85);
    font-size: 1.5rem;
}

.overlay-close-btn:hover,
.overlay-close-btn:active {
    background: rgba(255, 255, 255, .3);
    border-color: #fff;
    color: #fff;
}

/* --- Keyboard focus rings (customer nav-polish section 4, adapted) --
   Scoped under html.kbd-nav (toggled by navigation.js) so the ring
   only appears for keyboard users — iOS otherwise shows it on every
   tap because programmatic focus() matches :focus-visible in WebKit. */
html.kbd-nav .menu-open-button .btn-open:focus-visible,
html.kbd-nav .overlay-close-btn:focus-visible,
html.kbd-nav .overlay-menu li a:focus-visible,
html.kbd-nav .overlay-cta-button:focus-visible {
    outline: 2px solid #fbd445;
    outline-offset: 3px;
}

/* Suppress any default ring when not keyboard-navigating (Safari
   would otherwise still paint its native one on programmatic focus). */
html:not(.kbd-nav) .menu-open-button .btn-open:focus,
html:not(.kbd-nav) .overlay-close-btn:focus {
    outline: none;
}

/* --- Drawer-width layout tweaks -------------------------------------
   main.css designed the menu for a full-screen canvas (large centered
   links). In a 380px panel, left-aligned reads better and matches the
   campaign-2 drawer. Delete this block to keep the centered look. */
.overlay-nav {
    justify-content: flex-start;
    padding: 1.5rem 1rem;
}

.overlay-menu {
    align-items: stretch;
    width: 100%;
}

.overlay-menu li a {
    font-size: 1.5rem;
    padding: .85rem 1.5rem;
}

/* --- Animated top-nav underline (customer nav-polish section 1) -----
   Replaces main.css's instant text-decoration underline with a bar
   that sweeps in from the left. currentColor keeps it white with the
   nav links; bottom:-10px matches the old text-underline-offset. The
   Get Started pill (.nav-highlight) is excluded. */
#int-header nav ul li a:not(.nav-highlight) {
    position: relative;
}

#int-header nav ul li a:not(.nav-highlight):hover {
    text-decoration: none; /* retire the old instant underline */
}

#int-header nav ul li a:not(.nav-highlight)::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -10px;
    height: 2px;
    background: currentColor;
    transform: scaleX(0);
    /* Sweep-through: at rest the origin is on the RIGHT, so on hover-out
       the bar exits rightward — opposite the side it entered from. Moving
       the cursor along the menu reads as one bar traveling with it. */
    transform-origin: right center;
    transition: transform .25s ease;
}

@media (hover: hover) and (pointer: fine) {
    #int-header nav ul li a:not(.nav-highlight):hover::after {
        transform: scaleX(1);
        transform-origin: left center; /* enter from the left */
    }
}

html.kbd-nav #int-header nav ul li a:not(.nav-highlight):focus-visible::after {
    transform: scaleX(1);
    transform-origin: left center;
}

/* --- Scrolled-header gradient ---------------------------------------
   The scrolled state deepens from flat navy into a navy → deep-navy
   gradient (#0f2b54 is the deep tone used on the featured testimonial
   card). Built as a fading ::before layer because background-image
   gradients can't transition — opacity can. main.css's .scrolled
   background-color stays underneath as the base/fallback, and the
   resting header stays flat var(--blue) on purpose: at the top of the
   page it sits flush on the hero banner, and a gradient there would
   create a visible seam at the header's bottom edge. */
header::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, var(--navy) 0%, #0f2b54 130%);
    opacity: 0;
    transition: opacity .25s ease;
    pointer-events: none;
}

header.scrolled::before {
    opacity: 1;
}

/* Keep the header's content painting above the gradient layer. */
#int-header {
    position: relative;
    z-index: 1;
}

/* --- Reduced motion (customer nav-polish section 6, adapted) -------- */
@media (prefers-reduced-motion: reduce) {
    .overlay,
    .nav-scrim,
    #int-header nav ul li a::after,
    header::before {
        transition: none !important;
    }
}