/* ============================================================
   AffirmFunding — Premium Header Styles
   Enhances the Astra theme header with:
   • Clean white header bar
   • Refined typography with Montserrat nav links
   • Animated gold underline on hover
   • Premium "Get A Quote" button glow
   • Smooth dropdown transitions with delay
   • Working sub-submenus
   ============================================================ */

/* ── DESIGN TOKENS ───────────────────────────── */
:root {
    --hdr-navy: #162347;
    --hdr-navy-90: rgba(22, 35, 71, 0.92);
    --hdr-gold: #c59a5c;
    --hdr-gold-light: rgba(197, 154, 92, 0.25);
    --hdr-white: #ffffff;
    --hdr-white-soft: rgba(255, 255, 255, 0.95);
    --hdr-glass: rgba(22, 35, 71, 0.65);
    --hdr-shadow: 0 2px 20px rgba(0, 0, 0, 0.12);
    --hdr-transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── BASE HEADER ──────────────────────────────── */

/* Transparent header = positioned over hero.
   We add a frosted-glass backdrop so the nav
   is readable over any hero image.              */
#masthead,
.site-header {
    transition: background var(--hdr-transition),
        box-shadow var(--hdr-transition),
        backdrop-filter var(--hdr-transition);
}

.ast-primary-header-bar {
    background: var(--hdr-white) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.06) !important;
    transition: all var(--hdr-transition) !important;
}

/* Override Astra transparent header mode */
.ast-theme-transparent-header .ast-primary-header-bar,
.ast-theme-transparent-header #masthead,
.ast-theme-transparent-header .site-header,
.ast-theme-transparent-header .main-header-bar {
    background: var(--hdr-white) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* ── NAV LINK TYPOGRAPHY ──────────────────────── */

/* Montserrat 500 weight, uppercase tracking, navy text
   with a gold animated underline on hover.           */
.ast-header .menu-link,
.ast-nav-menu a,
.main-navigation a {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    color: var(--hdr-navy) !important;
    position: relative;
    padding-bottom: 4px !important;
    transition: color var(--hdr-transition) !important;
}

/* Gold underline: grows from center on hover */
.ast-header .menu-link::after,
.ast-nav-menu a::after,
.main-navigation a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) scaleX(0);
    width: 80%;
    height: 2px;
    background: var(--hdr-gold);
    border-radius: 1px;
    transition: transform var(--hdr-transition);
    transform-origin: center;
}

.ast-header .menu-link:hover::after,
.ast-nav-menu a:hover::after,
.main-navigation a:hover::after {
    transform: translateX(-50%) scaleX(1);
}

.ast-header .menu-link:hover,
.ast-nav-menu a:hover,
.main-navigation a:hover {
    color: var(--hdr-gold) !important;
}

/* Active / current page link */
.ast-nav-menu .current-menu-item>a,
.ast-nav-menu .current-menu-ancestor>a {
    color: var(--hdr-gold) !important;
}

.ast-nav-menu .current-menu-item>a::after,
.ast-nav-menu .current-menu-ancestor>a::after {
    transform: translateX(-50%) scaleX(1) !important;
}

/* ── DROPDOWN SUB-MENU ────────────────────────── */

/* Submenu: white bg, visible via opacity/visibility for smooth transitions */
.ast-nav-menu .sub-menu,
.ast-header .sub-menu {
    background: var(--hdr-white) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12) !important;
    padding: 8px 0 !important;
    margin-top: 0 !important;
    /* NO overflow:hidden — sub-submenus must be able to escape */
    overflow: visible !important;
    /* Transition for smooth open/close */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease !important;
    /* Keep a 300ms delay on close so humans can reach the menu */
    transition-delay: 0.3s !important;
}

/* Show submenu on hover — instant open (0ms delay) */
.ast-nav-menu .menu-item:hover>.sub-menu,
.ast-header .menu-item:hover>.sub-menu {
    opacity: 1 !important;
    visibility: visible !important;
    transition-delay: 0s !important;
}

/* Sub-submenu positioning (fly-out right) */
.ast-nav-menu .sub-menu .sub-menu,
.ast-header .sub-menu .sub-menu {
    top: 0 !important;
    left: 100% !important;
    margin-top: 0 !important;
    margin-left: 0 !important;
}

.ast-nav-menu .sub-menu a,
.ast-header .sub-menu a {
    font-size: 13px !important;
    text-transform: none !important;
    letter-spacing: 0.02em !important;
    padding: 10px 20px !important;
    color: var(--hdr-navy) !important;
    transition: background var(--hdr-transition),
        color var(--hdr-transition) !important;
}

.ast-nav-menu .sub-menu a:hover,
.ast-header .sub-menu a:hover {
    background: rgba(197, 154, 92, 0.12) !important;
    color: var(--hdr-gold) !important;
}

/* Remove underline animation from sub-menu links */
.ast-nav-menu .sub-menu a::after,
.ast-header .sub-menu a::after {
    display: none !important;
}

/* Sub-submenu indicator arrow for items with children */
.ast-nav-menu .sub-menu .menu-item-has-children>.menu-link::before {
    content: '›';
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    color: var(--hdr-navy);
    opacity: 0.5;
}

/* ── DROPDOWN CHEVRON / CARET ─────────────────── */

.ast-header .ast-menu-toggle,
.ast-header .dropdown-menu-toggle {
    color: var(--hdr-navy) !important;
    transition: color var(--hdr-transition), transform var(--hdr-transition) !important;
}

.ast-header .menu-item:hover>.ast-menu-toggle,
.ast-header .menu-item:hover>.dropdown-menu-toggle {
    color: var(--hdr-gold) !important;
}

/* ── GET A QUOTE BUTTON ───────────────────────── */

/* Allow the button container to expand for the text */
#masthead .ast-builder-button-wrap,
#masthead .ast-header-button-1,
.site-header .ast-builder-button-wrap,
.site-header .ast-header-button-1 {
    flex-shrink: 0 !important;
    min-width: max-content !important;
}

/* The <a> wrapper */
#masthead .ast-custom-button-link,
.site-header .ast-custom-button-link,
.ast-custom-button-link {
    display: inline-block !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    background: var(--hdr-gold) !important;
    color: var(--hdr-navy) !important;
    border: none !important;
    border-radius: 50px !important;
    padding: 10px 24px !important;
    box-shadow: 0 2px 12px rgba(197, 154, 92, 0.3);
    transition: all var(--hdr-transition) !important;
    white-space: nowrap !important;
    text-decoration: none !important;
}

/* The inner <div> inside the button */
#masthead .ast-custom-button,
.site-header .ast-custom-button,
.ast-custom-button-link .ast-custom-button {
    display: inline !important;
    white-space: nowrap !important;
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
    border: none !important;
    font-family: inherit !important;
    font-weight: inherit !important;
    font-size: inherit !important;
    letter-spacing: inherit !important;
    text-transform: inherit !important;
    color: inherit !important;
}

#masthead .ast-custom-button-link:hover,
.site-header .ast-custom-button-link:hover,
.ast-custom-button-link:hover {
    background: #d4a96b !important;
    color: var(--hdr-navy) !important;
    box-shadow: 0 4px 24px rgba(197, 154, 92, 0.5) !important;
    transform: translateY(-1px);
}

#masthead .ast-custom-button-link:active,
.site-header .ast-custom-button-link:active,
.ast-custom-button-link:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(197, 154, 92, 0.3) !important;
}

/* ── LOGO ─────────────────────────────────────── */

.site-logo-img .custom-logo,
.ast-header .custom-logo {
    transition: transform var(--hdr-transition),
        filter var(--hdr-transition) !important;
    filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
}

.site-logo-img .custom-logo:hover,
.ast-header .custom-logo:hover {
    transform: scale(1.04);
}

/* ── SCROLLED STATE (when Astra adds .ast-header-sticky-active) ── */

/* When scrolled, white with a slightly deeper shadow */
.ast-header-sticky-active .ast-primary-header-bar,
.ast-primary-sticky-header-active .ast-primary-header-bar {
    background: var(--hdr-white) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom-color: rgba(0, 0, 0, 0.06) !important;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.10) !important;
}

/* ── MOBILE HEADER ────────────────────────────── */

@media (max-width: 921px) {
    .ast-primary-header-bar {
        background: var(--hdr-white) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    /* Mobile toggle button */
    .ast-mobile-menu-trigger-minimal,
    .ast-button-wrap .menu-toggle {
        color: var(--hdr-navy) !important;
        border: 1px solid rgba(22, 35, 71, 0.2) !important;
        border-radius: 6px !important;
        padding: 6px 10px !important;
        transition: all var(--hdr-transition) !important;
    }

    .ast-mobile-menu-trigger-minimal:hover,
    .ast-button-wrap .menu-toggle:hover {
        border-color: var(--hdr-gold) !important;
        color: var(--hdr-gold) !important;
    }

    /* Mobile nav dropdown */
    .ast-mobile-popup-drawer .ast-mobile-popup-inner,
    .ast-mobile-header-content {
        background: var(--hdr-white) !important;
    }

    .ast-mobile-popup-drawer a,
    .ast-mobile-header-content a {
        color: var(--hdr-navy) !important;
        font-family: 'Montserrat', sans-serif !important;
        font-weight: 500 !important;
        padding: 12px 20px !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
    }

    .ast-mobile-popup-drawer a:hover,
    .ast-mobile-header-content a:hover {
        color: var(--hdr-gold) !important;
        background: rgba(197, 154, 92, 0.08) !important;
    }
}