/* ============================================================
   CCG ADAPTIVE DESKTOP NAVIGATION
   ------------------------------------------------------------
   Loaded after the shared navigation styles. Desktop-only
   density changes prevent clipping while mobile keeps the
   established drawer layout.
============================================================ */

/* The full scroll authority is installed by the shared runtime, but the
   desktop gutter must exist before that deferred script runs. Reserving it
   here prevents a 10px document-width handoff (and 5px centered-header
   shift) on pages whose vertical overflow is discovered after first paint. */
@media (min-width: 821px) {
    html[data-ccg-page] {
        scrollbar-gutter: stable;
    }
}

.ccg-header .ccg-auth-slot {
    min-width: 0;
}

.ccg-header .ccg-profile-link {
    display: inline-flex;
    min-width: 0;
    max-width: min(310px, 42vw);
    align-items: center;
    gap: 0.38em;
}

.ccg-header .ccg-profile-link__label {
    flex: 0 0 auto;
    font-weight: 800;
}

.ccg-header .ccg-profile-link__name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (min-width: 1200px) {
    .ccg-header .ccg-nav {
        --ccg-nav-control-size: clamp(0.61rem, 0.57vw, 0.7rem);
        gap: 6px !important;
        overflow: visible !important;
        contain: none !important;
    }

    /*
       FIRST-FRAME DESKTOP DENSITY CONTRACT
       ---------------------------------------------------------
       The canonical desktop navigation always settles at the tight
       density because the shared header inner shell is capped at 1320px.
       Use one extra nav-specific selector level so the late responsive
       safety stylesheet cannot temporarily expand the controls before
       ccg-nav-fit.js performs its next fit pass.
    */
    .ccg-header .ccg-nav .ccg-nav__list {
        gap: 3px !important;
        font-size: var(--ccg-nav-control-size);
    }

    .ccg-header .ccg-nav .ccg-nav__link,
    .ccg-header .ccg-nav .ccg-nav__more-toggle {
        min-height: 38px !important;
        padding: 6px 5px !important;
        font-size: var(--ccg-nav-control-size) !important;
        letter-spacing: 0.035em !important;
        white-space: nowrap;
    }

    /*
       Orbitron arrives after the first HTML/CSS paint on a cold document.
       The fallback face is narrower, so a content-sized centered nav used
       to contract and then grow by roughly 40px even though every control
       already had its final height/padding/font-size. Reserve the measured
       settled group metrics in em units so the reservation follows the
       responsive control size at 1200, 1440 and 1920 rather than imposing
       one fixed desktop width. Once Orbitron is available the real content
       naturally fills the same space, so there is no visual width handoff.
    */
    .ccg-header .ccg-nav .ccg-nav__list--primary {
        min-width: 56.87em;
    }

    .ccg-header .ccg-nav .ccg-nav__list--secondary {
        min-width: 43.67em;
    }

    .ccg-header .ccg-nav .ccg-nav__more {
        min-width: calc(3.97em + 20.6px);
        font-size: var(--ccg-nav-control-size);
        justify-content: center;
    }

    /*
       CCG Games, Install CCG App, About Me and Contact are permanent
       desktop More destinations. Hide their secondary-list copies in CSS
       before JavaScript runs so the first painted header already has the
       same geometry as the fitted header. They remain available in the
       mobile drawer because this rule is desktop-only.
    */
    .ccg-header [data-ccg-nav-secondary] > li:has(> a[href="/games/ccg-games/"]),
    .ccg-header [data-ccg-nav-secondary] > li:has(> a[href="/install-app.html"]),
    .ccg-header [data-ccg-nav-secondary] > li:has(> a[href="/about.html"]),
    .ccg-header [data-ccg-nav-secondary] > li:has(> a[href="/contact.html"]) {
        display: none !important;
    }

    /* Reserve the More control from first paint. The fit script owns its
       contents and hidden state after startup, but the control itself must
       not pop into the header a frame later. */
    .ccg-header .ccg-nav__more {
        position: relative;
        display: inline-flex !important;
        align-items: center;
        flex: 0 0 auto;
        z-index: 30;
    }

    .ccg-header .ccg-nav__more[hidden] {
        display: none !important;
    }

    /*
       Desktop More menus must be allowed to escape the visual header
       panel. The Home header normally uses overflow: clip on its inner
       shell to contain neon glow; if that stays active while More is
       open, the dropdown is cut off at the bottom of the header.

       Only release clipping/paint containment for the short period in
       which the More menu is open. Normal desktop header containment
       resumes immediately when the menu closes.
    */
    .ccg-header.ccg-header--more-open,
    .ccg-header.ccg-header--more-open .ccg-header-inner,
    .ccg-header.ccg-header--more-open .ccg-nav,
    .ccg-header.ccg-header--more-open .ccg-nav__bar,
    .ccg-header.ccg-header--more-open .ccg-nav__more {
        overflow: visible !important;
        contain: none !important;
    }

    /* The opened dropdown must sit above mode hints, socials, hero media,
       page overlays and other independently stacked content. */
    .ccg-header.ccg-header--more-open {
        position: relative !important;
        z-index: 2147482000 !important;
        isolation: isolate;
    }

    .ccg-header .ccg-nav__bar,
    .ccg-header .ccg-nav__list {
        min-width: 0;
    }

    .ccg-header .ccg-nav--fit-compact .ccg-nav__list {
        gap: clamp(4px, 0.4vw, 7px) !important;
    }

    .ccg-header .ccg-nav--fit-compact .ccg-nav__link,
    .ccg-header .ccg-nav--fit-compact .ccg-nav__more-toggle {
        min-height: 42px !important;
        padding: 7px clamp(8px, 0.75vw, 11px) !important;
        font-size: clamp(0.67rem, 0.64vw, 0.76rem) !important;
        letter-spacing: 0.055em !important;
        white-space: nowrap;
    }

    .ccg-header .ccg-nav--fit-tight .ccg-nav__list {
        gap: 3px !important;
    }

    .ccg-header .ccg-nav--fit-tight .ccg-nav__link,
    .ccg-header .ccg-nav--fit-tight .ccg-nav__more-toggle {
        min-height: 38px !important;
        padding: 6px 5px !important;
        font-size: var(--ccg-nav-control-size) !important;
        letter-spacing: 0.035em !important;
        white-space: nowrap;
    }

    .ccg-header .ccg-nav--has-overflow .ccg-nav__more {
        display: inline-flex !important;
    }

    .ccg-header .ccg-header-socials {
        position: relative;
        z-index: 10;
    }

    .ccg-header.ccg-header--more-open .ccg-nav,
    .ccg-header .ccg-nav.ccg-nav--more-open {
        position: relative;
        z-index: 2147482500 !important;
        isolation: isolate;
    }

    .ccg-header .ccg-nav.ccg-nav--more-open .ccg-nav__more {
        z-index: 2147482600 !important;
    }

    .ccg-header .ccg-nav__more-menu {
        position: absolute;
        top: calc(100% + 8px);
        right: 0;
        z-index: 2147483000 !important;
        display: grid;
        width: max-content;
        min-width: min(260px, 82vw);
        max-width: min(340px, 88vw);
        padding: 8px;
        border: 1px solid rgba(var(--accent-rgb), 0.48);
        background: rgba(3, 7, 18, 0.98);
        box-shadow: 0 18px 42px rgba(0, 0, 0, 0.72), 0 0 22px rgba(var(--accent-rgb), 0.18);
        pointer-events: auto !important;
        isolation: isolate;
    }

    /* Modern browsers place manual popovers in the browser top layer. This
       lets More escape every page/header clipping and stacking context while
       keeping the menu in the same DOM location for accessibility and logic. */
    .ccg-header .ccg-nav__more-menu[popover] {
        position: fixed !important;
        inset: auto;
        right: auto;
        margin: 0 !important;
    }

    .ccg-header .ccg-nav__more-menu[popover]:popover-open {
        display: grid;
        pointer-events: auto !important;
    }

    .ccg-header .ccg-nav__more-menu[hidden] {
        display: none !important;
    }

    .ccg-header .ccg-nav__more-menu .ccg-nav-fit__link {
        position: relative;
        z-index: 1;
        display: block;
        width: 100%;
        min-height: 40px !important;
        padding: 9px 11px !important;
        border: 0 !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.09) !important;
        text-align: left;
        white-space: normal;
        pointer-events: auto !important;
    }

    .ccg-header .ccg-nav__more-menu .ccg-nav-fit__link:last-child {
        border-bottom: 0 !important;
    }

    .ccg-header .ccg-nav__more-menu .ccg-nav-fit__link:hover,
    .ccg-header .ccg-nav__more-menu .ccg-nav-fit__link:focus-visible {
        background: rgba(var(--accent-rgb), 0.14) !important;
    }
}

/* A mobile/tablet header must never expose the desktop navigation row.
   This lives in the render-blocking nav-fit sheet so the fail-safe applies
   even before the deferred responsive safety loader has run. */
@media (max-width: 1199px) {
    .ccg-header .ccg-nav-toggle {
        display: inline-flex !important;
    }

    .ccg-header .ccg-nav {
        display: none !important;
    }

    .ccg-header .ccg-profile-link {
        max-width: min(270px, 54vw);
    }

    .ccg-header .ccg-auth-slot {
        gap: 6px;
    }

    .ccg-header .ccg-btn-auth {
        min-height: 40px !important;
        padding: 7px 9px !important;
        font-size: 0.7rem !important;
    }
}

@media (max-width: 620px) {
    .ccg-header .ccg-profile-link {
        max-width: min(205px, 58vw);
    }

    .ccg-header .ccg-profile-link__label {
        font-size: 0.62rem;
    }
}

/* ============================================================
   FIRST-PAINT MOBILE HEADER CONTRACT
   ------------------------------------------------------------
   Match the final compact <=520px responsive-page-polish contract from
   the first render. The phone must not paint a larger three-row header and
   then collapse after deferred responsive CSS arrives.
============================================================ */
@media (max-width: 520px) {
    .ccg-header {
        position: relative !important;
        top: auto !important;
        padding: 5px 6px 6px !important;
    }

    .ccg-header .ccg-header-inner {
        width: 100% !important;
        max-width: 100% !important;
        padding-inline: 0 !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        grid-template-areas:
            "brand toggle"
            "actions actions" !important;
        column-gap: 6px !important;
        row-gap: 4px !important;
        align-items: center !important;
    }

    .ccg-header .ccg-brand {
        grid-area: brand !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 6px !important;
        padding: 4px 6px !important;
        text-align: left !important;
        overflow: hidden !important;
    }

    .ccg-header .ccg-brand__logo {
        width: auto !important;
        height: 40px !important;
        max-height: 40px !important;
        flex: 0 0 auto !important;
        object-fit: contain !important;
    }

    .ccg-header .ccg-brand__text {
        min-width: 0 !important;
        max-width: 100% !important;
        align-items: flex-start !important;
        text-align: left !important;
    }

    .ccg-header .ccg-brand__kicker {
        display: none !important;
    }

    .ccg-header .ccg-brand__title {
        font-size: clamp(0.64rem, 3.2vw, 0.72rem) !important;
        line-height: 1.04 !important;
        letter-spacing: 0.055em !important;
        gap: 0 !important;
        white-space: normal !important;
    }

    .ccg-header .ccg-nav-toggle {
        grid-area: toggle !important;
        display: inline-flex !important;
        width: 44px !important;
        min-width: 44px !important;
        max-width: 44px !important;
        min-height: 38px !important;
        padding: 7px !important;
        justify-self: end !important;
        align-self: center !important;
        justify-content: center !important;
    }

    .ccg-header .ccg-nav-toggle__label {
        display: none !important;
    }

    .ccg-header .ccg-nav {
        display: none !important;
    }

    .ccg-header .ccg-header-actions {
        grid-area: actions !important;
        display: grid !important;
        width: 100% !important;
        min-width: 0 !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-areas:
            "mode"
            "auth"
            "socials" !important;
        justify-items: center !important;
        align-items: center !important;
        row-gap: 3px !important;
        margin: 0 !important;
        padding: 0 !important;
        position: relative !important;
        overflow: visible !important;
    }

    .ccg-header .ccg-mode-hint {
        display: none !important;
    }

    .ccg-header .ccg-mode-toggle {
        grid-area: mode !important;
        width: min(330px, 100%) !important;
        max-width: 100% !important;
        min-height: 34px !important;
    }

    .ccg-header .ccg-mode-toggle__pill {
        gap: 3px !important;
        padding: 3px 4px !important;
    }

    .ccg-header .ccg-mode-toggle__label {
        padding: 4px 5px !important;
        font-size: 0.5rem !important;
        letter-spacing: 0.065em !important;
    }

    .ccg-header .ccg-auth-slot {
        grid-area: auth !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        gap: 4px !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .ccg-header .ccg-profile-link,
    .ccg-header .ccg-btn-auth {
        min-height: 34px !important;
    }

    .ccg-header .ccg-profile-link {
        flex: 1 1 170px !important;
        max-width: calc(100% - 78px) !important;
    }

    .ccg-header .ccg-btn-auth {
        padding: 5px 7px !important;
        font-size: 0.62rem !important;
    }

    .ccg-header .ccg-header-socials {
        grid-area: socials !important;
        display: flex !important;
        justify-content: center !important;
        flex-wrap: wrap !important;
        gap: 4px !important;
        width: auto !important;
        max-width: 100% !important;
        padding: 2px 3px !important;
    }

    .ccg-header .ccg-header-socials a {
        width: 30px !important;
        height: 30px !important;
        min-height: 30px !important;
    }
}