/* ==========================================================
   FINTECHOISIS
   Header v2.0
   Sprint 17.2 - Part 1
   Foundation • Layout • Branding
========================================================== */

/* ----------------------------------------------------------
   HEADER
---------------------------------------------------------- */

.header{
    position:sticky;
    top:0;
    left:0;
    width:100%;
    z-index:1000;

    background:rgba(255,255,255,.96);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);

    border-bottom:1px solid rgba(15,41,77,.08);

    transition:
        background .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;
}

/* Gold Accent */

.header::before{

    content:"";

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:3px;

    background:linear-gradient(
        90deg,
        #C9A227,
        #E4C767,
        #C9A227
    );

}

/* ----------------------------------------------------------
   TOOL BUTTONS
---------------------------------------------------------- */

.repository-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    white-space:nowrap;

    padding:11px 20px;

    border-radius:30px;

    background:#0F294D;

    color:#FFFFFF;

    text-decoration:none;

    font-weight:700;

    font-size:13.5px;

    transition:all .35s ease;

}

.main-nav a.repository-btn,
.main-nav a.repository-btn:hover{

    color:#ffffff;
}

.repository-btn:hover{

    background:#D4AF37;

    color:#071A2F;

    transform:translateY(-2px);

    box-shadow:0 10px 24px rgba(0,0,0,.15);

}


/* ----------------------------------------------------------
   CONTAINER
---------------------------------------------------------- */

.header-container{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:16px;

    min-height:82px;

    padding:0 20px;

}

/* A generic .container rule elsewhere caps content to 1200px; the
   header specifically needs the full 1400px system width now that
   the primary nav carries nine categories. Two-class selector wins
   on specificity regardless of stylesheet load order. */

.container.header-container{

    width:min(1400px, calc(100% - 40px));

    max-width:1400px;

}


/* ----------------------------------------------------------
   BRAND
---------------------------------------------------------- */

.brand{

    flex-shrink:0;

}

.brand-link{

    display:flex;

    align-items:center;

    gap:10px;

    text-decoration:none;

}


/* ----------------------------------------------------------
   LOGO
---------------------------------------------------------- */

.brand-logo{

    width:54px;

    height:54px;

    display:block;

    transition:transform .30s ease;

}

.brand-link:hover .brand-logo{

    transform:scale(1.02);

}

.brand-link:focus-visible .brand-logo{
    transform:scale(1.02);
}

@media (prefers-reduced-motion: reduce){

    .brand-logo{

        transition:none;

    }

}



/* ----------------------------------------------------------
   BRAND TEXT
---------------------------------------------------------- */

.brand-text{

    display:flex;

    flex-direction:column;

    justify-content:center;

}

.brand-text h1{

    margin:0;

    font-size:1.58rem;

    font-weight:800;

    letter-spacing:.06em;

    color:#0F294D;

    line-height:1.1;

    text-transform:uppercase;

}

.brand-tagline{

    margin-top:5px;

    font-size:.82rem;

    font-weight:500;

    color:#6E7785;

    letter-spacing:.05em;

}

/* ==========================================
   Executive Brand Identity
========================================== */

.brand-label{

    display:block;

    font-size:11px;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

    color:#8A94A6;

    margin-bottom:6px;

}

.brand-repository{

    display:flex;

    align-items:center;

    gap:10px;

    margin-top:8px;

}

.repository-pill{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:5px 12px;

    border-radius:999px;

    background:#D4AF37;

    color:#071A2F;

    font-size:11px;

    font-weight:800;

    letter-spacing:1px;

}

.repository-text{

    font-size:13px;

    font-weight:600;

    color:#4A5568;

    letter-spacing:.02em;

}

/* ----------------------------------------------------------
   NAVIGATION
---------------------------------------------------------- */

.main-nav{

    display:flex;

    align-items:center;

    gap:clamp(16px, 2vw, 24px);

    margin-left:auto;

}

.main-nav ul{

    list-style:none;

    display:flex;

    align-items:center;

    /* Fluid, not tiered: spacing grows continuously with viewport width
       instead of jumping at fixed breakpoints, so the adaptive nav
       (script.js) never sees a sudden capacity drop as the window
       resizes — items only move into "More" when they truly stop
       fitting, not because a spacing tier just kicked in. */
    gap:clamp(4px, 0.7vw, 8px);

    margin:0;

    padding:0;

}

nav li{

    margin:0;

    padding:0;

}


/* ----------------------------------------------------------
   HEADER TOOLS
---------------------------------------------------------- */

.header-tools{

    display:flex;

    align-items:center;

    gap:14px;

    margin-left:8px;

}


/* ----------------------------------------------------------
   TOOL BUTTONS
---------------------------------------------------------- */

.header-tool{

    display:flex;

    align-items:center;

    gap:8px;

    padding:10px 14px;

    border:none;

    border-radius:10px;

    background:#F7F9FC;

    color:#334155;

    font-size:.85rem;

    font-weight:500;

    cursor:pointer;

    transition:
        background .30s ease,
        transform .30s ease,
        box-shadow .30s ease;

}

.header-tool:hover{

    background:#EEF4FB;

    transform:translateY(-2px);

    box-shadow:0 8px 18px rgba(15,41,77,.08);

}

/* ----------------------------------------------------------
   SEARCH
---------------------------------------------------------- */

.search-toggle{

    display:flex;

    align-items:center;

    justify-content:center;

    width:40px;

    height:40px;

    flex-shrink:0;

    padding:0;

    border:none;

    border-radius:10px;

    background:#F7F9FC;

    color:#12325B;

    cursor:pointer;

    transition:background .25s ease, color .25s ease;
}

.search-toggle svg{

    width:18px;

    height:18px;
}

.search-toggle:hover,
.search-toggle:focus-visible{

    background:rgba(200,162,74,.14);

    color:#0F294D;
}

.search-overlay{

    position:fixed;

    inset:0;

    z-index:1200;

    display:flex;

    align-items:flex-start;

    justify-content:center;

    padding:12vh 20px 20px;

    opacity:0;

    visibility:hidden;

    transition:opacity .25s ease, visibility .25s ease;
}

.search-overlay.is-open{

    opacity:1;

    visibility:visible;
}

.search-overlay-backdrop{

    position:absolute;

    inset:0;

    background:rgba(15,41,77,.45);

    backdrop-filter:blur(2px);
}

.search-panel{

    position:relative;

    width:min(640px, 100%);

    background:#ffffff;

    border-radius:var(--radius-lg, 16px);

    box-shadow:0 30px 70px rgba(15,41,77,.28);

    padding:22px;

    transform:translateY(-12px) scale(.98);

    transition:transform .25s cubic-bezier(.16,1,.3,1);
}

.search-overlay.is-open .search-panel{

    transform:translateY(0) scale(1);
}

.search-panel-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    margin-bottom:16px;
}

.search-panel-title{

    font-size:13px;

    font-weight:800;

    letter-spacing:1px;

    text-transform:uppercase;

    color:#8A94A6;
}

.search-panel-close{

    display:flex;

    align-items:center;

    justify-content:center;

    width:30px;

    height:30px;

    border:none;

    border-radius:8px;

    background:transparent;

    color:#8A94A6;

    cursor:pointer;

    transition:background .2s ease, color .2s ease;
}

.search-panel-close svg{

    width:16px;

    height:16px;
}

.gpir-assistant-trigger{
    margin-left:auto;
    border:1px solid var(--border);
    background:var(--surface);
    color:var(--primary);
    padding:8px 12px;
    border-radius:6px;
    font:inherit;
    font-size:12px;
    font-weight:700;
    letter-spacing:.04em;
}

.gpir-assistant-trigger:focus-visible,
.gpir-assistant-trigger:hover{
    border-color:var(--accent);
}

.gpir-assistant{
    border-bottom:1px solid var(--border);
    padding:16px 0 18px;
}

.gpir-assistant[hidden]{
    display:none;
}

.gpir-assistant-header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:16px;
}

.gpir-assistant-kicker,
.gpir-assistant-note,
.gpir-assistant-source-note{
    margin:0;
    color:var(--muted);
    font-size:12px;
}

.gpir-assistant-kicker{
    text-transform:uppercase;
    letter-spacing:.08em;
    font-weight:700;
}

.gpir-assistant h2,
.gpir-assistant h3{
    margin:4px 0 8px;
    color:var(--primary);
}

.gpir-assistant h2{
    font-size:20px;
}

.gpir-assistant h3{
    font-size:16px;
}

.gpir-assistant-close,
.gpir-assistant-actions button{
    border:1px solid var(--border);
    background:transparent;
    color:var(--primary);
    border-radius:6px;
    padding:7px 10px;
    font:inherit;
    font-size:12px;
}

.gpir-assistant-close:hover,
.gpir-assistant-close:focus-visible,
.gpir-assistant-actions button:hover,
.gpir-assistant-actions button:focus-visible{
    border-color:var(--accent);
}

.gpir-assistant-actions{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin:14px 0;
}

.gpir-assistant-answer ul{
    display:grid;
    gap:8px;
    margin:10px 0 14px;
    padding-left:18px;
}

.gpir-assistant-answer li small{
    display:block;
    color:var(--muted);
    font-size:11px;
}

.gpir-assistant-answer a{
    color:var(--link);
    font-weight:600;
}

.search-panel-close:hover{

    background:#F7F9FC;

    color:#12325B;
}

.search-input-row{

    display:flex;

    align-items:center;

    gap:12px;

    padding:14px 16px;

    border:1.5px solid var(--hero-light-border, #E4E9F0);

    border-radius:12px;

    transition:border-color .2s ease;
}

.search-input-row:focus-within{

    border-color:#D4AF37;
}

.search-input-row svg{

    width:19px;

    height:19px;

    flex-shrink:0;

    color:#8A94A6;
}

.search-input{

    flex:1;

    min-width:0;

    border:none;

    outline:none;

    font-size:15px;

    font-family:inherit;

    color:#12325B;

    background:transparent;
}

.search-input::placeholder{

    color:#A0AAB8;
}

.search-results{

    margin-top:8px;

    max-height:50vh;

    overflow-y:auto;
}

.search-result-group{

    padding:14px 4px 6px;

    font-size:11px;

    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;

    color:#C9A227;
}

.search-result{

    display:block;

    padding:11px 12px;

    border-radius:8px;

    text-decoration:none;

    color:#12325B;

    font-size:14.5px;

    font-weight:600;

    transition:background .18s ease;
}

.search-result:hover,
.search-result.is-active{

    background:rgba(200,162,74,.10);
}

.search-empty,
.search-hint{

    padding:20px 8px;

    text-align:center;

    color:#8A94A6;

    font-size:13.5px;
}

.search-result-count{

    margin:0 0 6px;

    padding:4px 12px;

    color:#8A94A6;

    font-size:11px;

    font-weight:700;

    letter-spacing:.04em;

    text-transform:uppercase;
}

.search-unavailable{

    margin:0 0 8px;

    padding:10px 12px;

    border-radius:8px;

    background:rgba(200,80,60,.08);

    color:#8A2A2A;

    font-size:12.5px;

    line-height:1.5;
}

.search-result--content{

    display:flex;

    flex-direction:column;

    gap:3px;

    padding:12px;

    margin-bottom:2px;
}

.search-result-type{

    color:#B8863B;

    font-size:10px;

    font-weight:800;

    letter-spacing:.06em;

    text-transform:uppercase;
}

.search-result-title{

    color:#12325B;

    font-size:14.5px;

    font-weight:700;

    line-height:1.35;
}

.search-result-excerpt{

    color:#5A6579;

    font-size:12.5px;

    line-height:1.55;
}

.search-result-excerpt mark{

    background:rgba(200,162,74,.28);

    color:#12325B;

    border-radius:2px;

    padding:0 1px;
}

.search-result-location{

    color:#8A94A6;

    font-size:11px;

    font-weight:600;
}

/*=====================================================
GPIR INTELLIGENCE DETAIL PANEL

Same overlay/panel language as the search modal (rounded white
card, navy/gold palette) so this reads as part of one product,
not a bolted-on news widget.
======================================================*/

.intel-overlay{

    position:fixed;

    inset:0;

    z-index:1210;

    display:flex;

    align-items:flex-start;

    justify-content:center;

    padding:10vh 20px 20px;

    opacity:0;

    visibility:hidden;

    transition:opacity .25s ease, visibility .25s ease;
}

.intel-overlay.is-open{

    opacity:1;

    visibility:visible;
}

.intel-overlay-backdrop{

    position:absolute;

    inset:0;

    background:rgba(15,41,77,.45);

    backdrop-filter:blur(2px);
}

.intel-panel{

    position:relative;

    width:min(600px, 100%);

    max-height:80vh;

    overflow-y:auto;

    background:#ffffff;

    border-radius:var(--radius-lg, 16px);

    box-shadow:0 30px 70px rgba(15,41,77,.28);

    padding:22px;

    transform:translateY(-12px) scale(.98);

    transition:transform .25s cubic-bezier(.16,1,.3,1);
}

.intel-overlay.is-open .intel-panel{

    transform:translateY(0) scale(1);
}

.intel-panel-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    margin-bottom:16px;
}

.intel-detail-meta{

    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:8px;

    margin-bottom:10px;

    color:#8A94A6;

    font-size:12px;

    font-weight:700;

    letter-spacing:.03em;

    text-transform:uppercase;
}

.intel-detail-flag{

    display:inline-flex;

    align-items:center;
}

.intel-detail-flag img{

    width:18px;

    height:auto;

    border-radius:3px;
}

.intel-detail-flag svg{

    width:16px;

    height:16px;

    color:var(--color-primary, #B8863B);
}

.intel-detail-title{

    margin:0 0 12px;

    color:#12325B;

    font-size:22px;

    font-weight:800;

    line-height:1.3;
}

.intel-badges{

    display:flex;

    flex-wrap:wrap;

    gap:8px;

    margin-bottom:16px;
}

.intel-badge{

    padding:4px 11px;

    border-radius:999px;

    font-size:11px;

    font-weight:700;

    letter-spacing:.04em;

    text-transform:uppercase;
}

.intel-badge--ok{

    background:rgba(45,140,90,.12);

    color:#1F7A4C;
}

.intel-badge--pending{

    background:rgba(200,80,60,.12);

    color:#B8402C;
}

.intel-badge--recency{

    background:rgba(200,162,74,.14);

    color:#8A6A1E;
}

.intel-summary{

    margin:0 0 14px;

    color:#33415C;

    font-size:14.5px;

    line-height:1.65;
}

.intel-why{

    margin:0 0 16px;

    padding:14px 16px;

    border-radius:12px;

    background:#F7F9FC;
}

.intel-why h4{

    margin:0 0 6px;

    color:#12325B;

    font-size:12px;

    font-weight:800;

    letter-spacing:.06em;

    text-transform:uppercase;
}

.intel-why p{

    margin:0;

    color:#33415C;

    font-size:14px;

    line-height:1.6;
}

.intel-source-block{

    margin-bottom:16px;

    padding:14px 16px;

    border:1px solid #E4E9F0;

    border-radius:12px;
}

.intel-source-block--pending p{

    margin:0;

    color:#8A94A6;

    font-size:13px;

    line-height:1.6;
}

.intel-source-list{

    display:grid;

    grid-template-columns:auto 1fr;

    gap:4px 12px;

    margin:0 0 12px;

    font-size:13px;
}

.intel-source-list dt{

    color:#8A94A6;

    font-weight:700;
}

.intel-source-list dd{

    margin:0;

    color:#12325B;

    font-weight:600;

    word-break:break-word;
}

.intel-source-link,
.intel-gpir-link{

    display:inline-block;

    color:#0F294D;

    font-size:13.5px;

    font-weight:700;

    text-decoration:none;

    border-bottom:1.5px solid rgba(200,162,74,.5);

    transition:border-color .18s ease, color .18s ease;
}

.intel-source-link:hover,
.intel-gpir-link:hover{

    color:#B8863B;

    border-color:#B8863B;
}

.intel-gpir-link{

    display:block;

    margin-top:2px;
}

/*=====================================================
TRUST / SOURCE VERIFICATION LAYER
======================================================*/

.intel-badge--warning{

    background:rgba(230,140,20,.14);

    color:#9A5B00;
}

.intel-badge--blocked{

    background:rgba(200,50,50,.14);

    color:#B01F1F;
}

.intel-badge--confidence,
.intel-badge--content{

    background:#F1F3F7;

    color:#5A6579;
}

.intel-badge--lifecycle{

    background:#eef2f7;
    color:#0a2540;

}

.intel-reader-view{

    margin-top:24px;

}

.intel-reader-view h4{

    margin:0 0 10px;
    color:#0a2540;
    font-size:1rem;

}

.intel-summary-heading{

    margin:0 0 4px;

    color:#8A94A6;

    font-size:11px;

    font-weight:800;

    letter-spacing:.06em;

    text-transform:uppercase;
}

.intel-source-block--warning{

    border-color:rgba(230,140,20,.4);

    background:rgba(230,140,20,.06);
}

.intel-source-block--blocked{

    border-color:rgba(200,50,50,.35);

    background:rgba(200,50,50,.06);
}

.intel-security-notice{

    margin:0 0 10px;

    color:#7A4C00;

    font-size:13px;

    line-height:1.55;
}

.intel-source-block--blocked p{

    margin:0;

    color:#8A2A2A;

    font-size:13px;

    line-height:1.55;
}

.intel-reveal-source{

    padding:8px 14px;

    border:1.5px solid rgba(230,140,20,.5);

    border-radius:8px;

    background:transparent;

    color:#9A5B00;

    font-size:13px;

    font-weight:700;

    cursor:pointer;

    transition:background .18s ease;
}

.intel-reveal-source:hover{

    background:rgba(230,140,20,.12);
}

.intel-source-block--warning code{

    display:block;

    margin-bottom:8px;

    padding:6px 8px;

    border-radius:6px;

    background:#FFF6E8;

    color:#7A4C00;

    font-size:12px;

    word-break:break-all;
}

.intel-report-block{

    margin-top:14px;
}

.intel-report-toggle{

    padding:0;

    border:none;

    background:transparent;

    color:#8A94A6;

    font-size:12.5px;

    font-weight:700;

    cursor:pointer;

    text-decoration:underline;

    text-underline-offset:2px;
}

.intel-report-toggle:hover{

    color:#12325B;
}

.intel-report-options{

    display:flex;

    flex-wrap:wrap;

    gap:8px;

    margin-top:10px;
}

.intel-report-reason{

    padding:5px 11px;

    border:1px solid #E4E9F0;

    border-radius:999px;

    color:#33415C;

    font-size:12px;

    font-weight:600;

    text-decoration:none;

    transition:background .18s ease, border-color .18s ease;
}

.intel-report-reason:hover{

    background:#F7F9FC;

    border-color:#C8A24A;
}

.intel-disclaimer{

    margin:16px 0 0;

    padding-top:12px;

    border-top:1px solid #E4E9F0;

    color:#A0AAB8;

    font-size:11px;

    line-height:1.6;
}

.intel-related{

    margin-top:16px;

    padding-top:14px;

    border-top:1px solid #E4E9F0;
}

.intel-related h4{

    margin:0 0 8px;

    color:#8A94A6;

    font-size:11px;

    font-weight:800;

    letter-spacing:.06em;

    text-transform:uppercase;
}

.intel-related-list{

    list-style:none;

    margin:0;

    padding:0;

    display:flex;

    flex-direction:column;

    gap:2px;
}

.intel-related-item{

    display:block;

    width:100%;

    padding:8px 10px;

    border:none;

    border-radius:8px;

    background:transparent;

    color:#33415C;

    font-size:13px;

    font-weight:600;

    text-align:left;

    text-decoration:none;

    cursor:pointer;

    transition:background .18s ease;
}

.intel-related-item:hover{

    background:#F7F9FC;

    color:#12325B;
}

.ticker-tag--suspension{

    background:rgba(200,50,50,.16) !important;

    color:#D14343 !important;
}

.ticker-card--suspension:hover{

    border-color:rgba(200,50,50,.4);

    background:rgba(200,50,50,.1);
}

button.ticker-card{

    border:1px solid rgba(255,255,255,.10);

    cursor:pointer;

    font:inherit;

    text-align:left;

    -webkit-appearance:none;

    appearance:none;
}

@media (max-width:560px){

    .intel-panel{

        padding:16px;

        max-height:85vh;
    }

    .intel-overlay{

        padding:6vh 12px 12px;
    }

    .search-panel{

        padding:16px;
    }

    .search-overlay{

        padding:8vh 12px 12px;
    }
}


/* ----------------------------------------------------------
   SCROLL STATE
---------------------------------------------------------- */

.header.scrolled{

    background:rgba(255,255,255,.99);

    box-shadow:
        0 18px 45px rgba(15,41,77,.10);

    border-bottom:1px solid rgba(212,175,55,.20);

}

/* ----------------------------------------------------------
   TRANSITIONS
---------------------------------------------------------- */

*{

    scroll-behavior:smooth;

}

.main-nav a{

    position:relative;

    color:#12325B;

    text-decoration:none;

    font-weight:600;

    font-size:clamp(11.5px, 0.4vw + 6.5px, 12.5px);

    letter-spacing:0;

    transition:all .3s ease;

}
.main-nav a.active{

    color:#D4AF37;

}

.main-nav a.active::after{

    width:100%;

}

.main-nav a:hover{

    color:#D4AF37;

}

.main-nav a{

    position:relative;

}

.main-nav a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:2px;

    background:#D4AF37;

    transition:.35s ease;

}

.main-nav a:hover::after{

    width:100%;

}


/* ----------------------------------------------------------
   RESEARCH MEGA-MENU
---------------------------------------------------------- */

.nav-item-mega{

    position:relative;

}

.main-nav > ul > li > a{

    white-space:nowrap;

}

.nav-mega-trigger{

    display:inline-flex;

    align-items:center;

    gap:3px;

}

.mega-caret{

    width:11px;

    height:11px;

    transition:transform .25s ease;

}

.nav-item-mega:hover > .nav-mega-trigger .mega-caret,
.nav-item-mega:focus-within > .nav-mega-trigger .mega-caret,
.nav-item-mega.is-open > .nav-mega-trigger .mega-caret{

    transform:rotate(180deg);

}

.nav-item-mega::after{

    content:"";

    position:absolute;

    left:0;

    right:0;

    top:100%;

    height:20px;

}

.mega-menu{

    position:absolute;

    top:calc(100% + 20px);

    left:50%;

    --edge-shift:0px;

    transform:translate(calc(-50% + var(--edge-shift)),-10px) scale(.98);

    width:min(760px, 90vw);

    background:#ffffff;

    border:1px solid var(--border-light);

    border-radius:var(--radius-lg);

    box-shadow:var(--shadow-xl);

    padding:28px 8px 28px 28px;

    opacity:0;

    visibility:hidden;

    pointer-events:none;

    transition:
        opacity .28s cubic-bezier(.16,1,.3,1),
        transform .28s cubic-bezier(.16,1,.3,1),
        visibility .28s;

    z-index:200;
}

.nav-item-mega:hover > .mega-menu,
.nav-item-mega:focus-within > .mega-menu,
.nav-item-mega.is-open > .mega-menu{

    opacity:1;

    visibility:visible;

    pointer-events:auto;

    transform:translate(calc(-50% + var(--edge-shift)),0) scale(1);
}

/* Applied briefly by the menu controller (script.js) when a different
   primary item takes over, or the viewport is resized while a menu is
   open. Without this the ~280ms opacity/visibility fade above would let
   two mega-menus render on screen at once during fast pointer movement
   between adjacent nav items -- this collapses that fade to effectively
   nothing for just that one state change, then the class is removed so
   the next genuine open/close keeps its normal, "forgiving" animation. */
.nav-item-mega.is-instant-close > .mega-menu{

    transition-duration:.001s;
}

/* Placed after the base .mega-menu rule (not in the earlier sitewide
   reduced-motion block) so equal-specificity source order lets this
   actually override the transition it's meant to remove. */
@media (prefers-reduced-motion: reduce){

    .mega-menu,
    .mega-caret{

        transition:none;

    }

}

.mega-menu-inner{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:8px 28px;

    max-height:60vh;

    overflow-y:auto;

    padding-right:20px;
}

.mega-col ul{

    list-style:none;

    margin:0 0 8px;

    padding:0;

    display:flex;

    flex-direction:column;

    gap:2px;

    text-align:left;

}

.mega-col a{

    display:block;

    padding:7px 0;

    color:#374151;

    font-size:13.5px;

    font-weight:500;

    text-decoration:none;

    letter-spacing:0;

    transition:color .2s ease;
}

.mega-col a::after{

    display:none;

}

.mega-col a:hover{

    color:var(--color-primary);

}

.mega-col-cta{

    display:inline-block;

    margin-top:8px;

    font-size:13px;

    font-weight:700;

    color:var(--color-primary);
}

/* ----------------------------------------------------------
   HEADED-COLUMN MEGA-MENU (icon-headed columns + description links)
---------------------------------------------------------- */

.mega-menu--headed{

    width:min(820px, 92vw);

}

.mega-menu--wide{

    width:min(980px, 92vw);

}

.mega-menu-inner--headed{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:8px 30px;

    max-height:60vh;

    overflow-y:auto;

    padding-right:20px;
}

.mega-menu-inner--4col{

    grid-template-columns:repeat(4,1fr);
}

.mega-col--headed{

    display:flex;

    flex-direction:column;

    min-width:0;

}

.mega-col-header{

    display:flex;

    align-items:center;

    gap:10px;

    padding-bottom:14px;

    margin-bottom:14px;

    border-bottom:1px solid var(--hero-light-border);

}

.mega-col-icon{

    flex-shrink:0;

    width:34px;

    height:34px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:9px;

    background:rgba(200,162,74,.12);

    color:var(--hero-navy);

}

.mega-col-icon svg{

    width:18px;

    height:18px;

}

.mega-col-heading{

    display:flex;

    flex-direction:column;

    gap:1px;

}

.mega-col-heading strong{

    font-size:13.5px;

    font-weight:700;

    color:var(--hero-navy);

    line-height:1.3;

}

.mega-col-heading small{

    font-size:11px;

    color:#8A94A6;

    line-height:1.3;
}

.mega-col-desc-list{

    list-style:none;

    margin:0 0 10px;

    padding:0;

    display:flex;

    flex-direction:column;

    gap:2px;

}

.mega-col-desc-list a{

    display:flex;

    flex-direction:column;

    gap:3px;

    padding:9px 8px;

    margin:0 -8px;

    border-radius:8px;

    text-decoration:none;

    transition:background .18s ease;

}

.mega-col-desc-list a:hover{

    background:rgba(200,162,74,.07);
}

.mega-col-desc-list a strong{

    font-size:13px;

    font-weight:700;

    color:var(--hero-navy);

    line-height:1.3;

}

.mega-col-desc-list a small{

    font-size:11.5px;

    color:#8A94A6;

    line-height:1.45;

}

/* ----------------------------------------------------------
   "SOON" ITEMS — real menu structure kept visible for content
   that doesn't exist yet, per the no-invented-pages rule: shown
   as a muted, non-interactive label instead of a dead link.
---------------------------------------------------------- */

.mega-item-soon{

    display:flex;

    flex-direction:column;

    gap:3px;

    padding:9px 8px;

    margin:0 -8px;

    border-radius:8px;

    cursor:default;

}

.mega-item-soon strong{

    display:flex;

    align-items:center;

    gap:7px;

    font-size:13px;

    font-weight:700;

    color:#A6AEBC;

    line-height:1.3;

}

.mega-item-soon small{

    font-size:11.5px;

    color:#B7BEC9;

    line-height:1.45;

}

.soon-tag{

    display:inline-block;

    font-size:9px;

    font-weight:700;

    letter-spacing:.04em;

    text-transform:uppercase;

    color:#B8863B;

    background:rgba(184,134,59,.13);

    padding:2px 7px;

    border-radius:999px;

    flex-shrink:0;

}

/* ----------------------------------------------------------
   CARDS MENU — coming-soon information architecture. No Cards
   content exists on the site yet; this preserves the intended
   taxonomy without inventing pages behind it.
---------------------------------------------------------- */

.mega-menu--soon{

    width:min(560px, 92vw);

}

.mega-menu-soon{

    padding:26px 30px 28px;

}

.mega-menu-soon-lede{

    margin:0 0 16px;

    font-size:13.5px;

    color:#4A5568;

    line-height:1.6;

    max-width:440px;

}

.mega-soon-groups{

    display:flex;

    flex-wrap:wrap;

    gap:8px;

}

.mega-soon-groups span{

    display:inline-block;

    padding:6px 13px;

    border-radius:999px;

    background:#F7F9FC;

    border:1px solid var(--hero-light-border, rgba(15,39,71,.12));

    font-size:12px;

    font-weight:600;

    color:#5B6472;

}

.mega-soon-badge{

    margin-top:18px;

    display:inline-block;

}

/* ----------------------------------------------------------
   "MORE" MENU — a real static menu (Resources / Directory /
   FINTECHOISIS / Legal) that's always present, per the nav brief.
   .nav-more-list is a secondary shelf beneath the static columns:
   initializeAdaptiveNav() in script.js appends a plain link there,
   in the rare case a top-level category genuinely doesn't fit at
   the current width — it's degraded to a simple link (not its own
   nested mega-menu) to keep this edge case simple, and the shelf
   stays hidden entirely whenever nothing has overflowed into it.
---------------------------------------------------------- */

.nav-more-list{

    list-style:none;

    margin:16px 0 0;

    padding:16px 0 0;

    border-top:1px solid var(--hero-light-border, rgba(15,39,71,.12));

    display:flex;

    flex-wrap:wrap;

    gap:6px 18px;
}

.nav-more-list:empty{

    display:none;

    margin:0;

    padding:0;

    border-top:none;
}

.nav-more-list > li{

    position:relative;
}

.nav-more-list > li > a{

    display:block;

    padding:6px 0;

    font-size:13px;

    font-weight:600;

    color:#12325B;

    text-decoration:none;
}

.nav-more-list > li > a:hover{

    color:var(--hero-gold,#B8863B);
}

@media (max-width:767px){

    /* Mega-menus become inline accordion panels under the mobile nav
       instead of floating panels, so the same real content stays
       reachable at laptop / tablet widths. "More" is now a real
       static category (not just desktop overflow), so it stays
       visible here like every other accordion item. */

    .mega-menu{

        position:static;

        width:100%;

        max-width:none;

        opacity:1;

        visibility:visible;

        pointer-events:auto;

        transform:none;

        box-shadow:none;

        border:none;

        border-top:1px solid rgba(15,41,77,.08);

        border-radius:0;

        background:rgba(15,41,77,.02);

        padding:6px 4px 6px 18px;

        margin-top:4px;

        max-height:0;

        overflow:hidden;

        transition:max-height .35s ease, padding .35s ease;

    }

    .nav-item-mega:not(.is-expanded) .mega-menu{

        padding-top:0;

        padding-bottom:0;

    }

    /* The desktop hover/open positioning rules match with higher
       specificity than the plain ".mega-menu" reset above, so a
       focused or open trigger on mobile would otherwise keep the
       menu's translate(-50%...) offset and render it half off-screen.
       Re-assert the reset at matching specificity here. */
    .nav-item-mega:hover > .mega-menu,
    .nav-item-mega:focus-within > .mega-menu,
    .nav-item-mega.is-open > .mega-menu,
    .nav-item-mega.is-expanded > .mega-menu{

        position:static;

        left:auto;

        top:auto;

        margin-left:0;

        transform:none;

    }

    .mega-menu-inner,
    .mega-menu-inner--headed{

        display:block;

        max-height:none;

        overflow:visible;

        padding-right:0;

    }

    .mega-col,
    .mega-col--headed{

        margin-bottom:18px;

    }

    .nav-item-mega.is-expanded .mega-caret{

        transform:rotate(180deg);
    }

    /* .main-nav a{display:block} (below) matches these links at equal
       specificity and would otherwise collapse their flex layout. */

    .main-nav .mega-col-desc-list a{

        display:flex;

        flex-direction:column;

        align-items:flex-start;

        padding:9px 8px;
    }

}


/* ----------------------------------------------------------
   MOBILE NAV TOGGLE (hamburger)
---------------------------------------------------------- */

.nav-toggle{

    display:none;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:5px;

    width:42px;

    height:42px;

    border:none;

    border-radius:10px;

    background:transparent;

    cursor:pointer;

    flex-shrink:0;
}

.nav-toggle span{

    display:block;

    width:22px;

    height:2px;

    border-radius:2px;

    background:#12325B;

    transition:transform .3s ease, opacity .3s ease;
}

.nav-toggle[aria-expanded="true"] span:nth-child(1){

    transform:translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] span:nth-child(2){

    opacity:0;
}

.nav-toggle[aria-expanded="true"] span:nth-child(3){

    transform:translateY(-7px) rotate(-45deg);
}


/* ----------------------------------------------------------
   RESPONSIVE NAVIGATION
---------------------------------------------------------- */

@media (max-width:767px){

    .header-container{

        gap:16px;

        padding:0 20px;
    }

    .nav-toggle{

        display:flex;
    }

    .brand{

        flex-shrink:1;

        min-width:0;
    }

    .brand-link{

        min-width:0;
    }

    .brand-text{

        min-width:0;
    }

    .brand-tagline,
    .repository-text{

        overflow:hidden;

        text-overflow:ellipsis;

        white-space:nowrap;
    }

    .brand-logo{

        flex-shrink:0;
    }

    .main-nav{

        position:fixed;

        top:var(--header-height,84px);

        left:0;

        width:100%;

        flex-direction:column;

        align-items:stretch;

        gap:0;

        max-height:0;

        overflow:hidden;

        background:#ffffff;

        box-shadow:0 20px 40px rgba(15,41,77,.14);

        transition:max-height .4s ease;

        z-index:999;
    }

    .header.nav-open .main-nav{

        max-height:calc(100vh - 84px);

        overflow-y:auto;
    }

    .main-nav ul{

        flex-direction:column;

        align-items:stretch;

        gap:0;

        padding:12px 24px 8px;
    }

    .main-nav li{

        border-bottom:1px solid rgba(15,41,77,.08);
    }

    .main-nav a{

        display:block;

        padding:16px 4px;

        font-size:1rem;
    }

    .main-nav a::after{

        display:none;
    }

    .header-tools{

        display:none;

        margin-left:0;
    }

    .header.nav-open .header-tools{

        display:flex;

        padding:12px 24px 24px;
    }

    .repository-btn{

        width:100%;

        justify-content:center;
    }
}

@media (max-width:560px){

    .brand-text h1{

        font-size:1.22rem;
    }

    .repository-text{

        display:none;
    }

    .brand-logo{

        width:42px;

        height:42px;
    }
}