/* ============================================================
   CCG-NAV.CSS — GLOBAL NAV STABILITY LAYER
   ------------------------------------------------------------
   • Shared nav/pill artefact suppression
   • Focus-visible Omega ring consistency
   • Scroll-safe nav container defaults
============================================================ */

:root {
    --ccg-nav-focus-core: rgba(var(--accent-rgb), 0.94);
    --ccg-nav-focus-halo: rgba(var(--accent-rgb), 0.30);
}

/* ===================================================
   OMEGA UI LOCK — FOCUS / TAP ARTEFACT PREVENTION
   Prevents browser blue flash regressions
   Focus-visible keeps keyboard navigation accessible while
   tap highlight suppression removes mobile UA blue flash.
   =================================================== */

:where(button,
       a,
       [role="button"]) {
    -webkit-appearance: none;
    appearance: none;
}

/* ============================================================
   OMEGA STABILITY LOCK: NAV / PILL ARTEFACT SUPPRESSION
   ------------------------------------------------------------
   Why: remove default browser blue edge flash and uncontrolled
   focus shadows while preserving keyboard accessibility.
============================================================ */

:where(.ccg-nav__link,
       .ccg-nav__more-toggle,
       .ccg-nav-toggle,
       .ccg-nav-drawer__close,
       .menu-pill,
       .pill,
       .nav-pill,
       .floating-menu a,
       .floating-menu button) {
    position: relative;
    isolation: isolate;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    touch-action: manipulation;
    background-clip: padding-box;
}

:where(.ccg-nav-toggle,
       .menu-pill,
       .nav-pill) {
    overflow: hidden; /* OMEGA containment fix: keep shimmer clipped to nav/menu controls */
}

:where(.ccg-nav__link,
       .ccg-nav__more-toggle,
       .ccg-nav-toggle,
       .ccg-nav-drawer__close,
       .menu-pill,
       .pill,
       .nav-pill,
       .floating-menu a,
       .floating-menu button):focus {
    outline: none;
    box-shadow: none;
}

:where(.ccg-nav__link,
       .ccg-nav__more-toggle,
       .ccg-nav-toggle,
       .ccg-nav-drawer__close,
       .menu-pill,
       .pill,
       .nav-pill,
       .floating-menu a,
       .floating-menu button):focus-visible {
    outline: 2px solid var(--ccg-nav-focus-core);
    outline-offset: 3px;
    box-shadow:
        0 0 0 2px rgba(2, 6, 14, 0.88),
        0 0 0 6px var(--ccg-nav-focus-halo),
        0 0 18px rgba(var(--accent-rgb), 0.4);
}

:where(.ccg-nav__link,
       .ccg-nav__more-toggle,
       .ccg-nav-toggle,
       .ccg-nav-drawer__close,
       .menu-pill,
       .pill,
       .nav-pill,
       .floating-menu a,
       .floating-menu button)::before,
:where(.ccg-nav__link,
       .ccg-nav__more-toggle,
       .ccg-nav-toggle,
       .ccg-nav-drawer__close,
       .menu-pill,
       .pill,
       .nav-pill,
       .floating-menu a,
       .floating-menu button)::after {
    background-clip: padding-box;
    pointer-events: none;
}

:where(.ccg-nav__link,
       .ccg-nav__more-toggle,
       .ccg-nav-toggle,
       .ccg-nav-drawer__close,
       .menu-pill,
       .pill,
       .nav-pill,
       .floating-menu a,
       .floating-menu button):active {
    outline: none;
}

/* ============================================================
   OMEGA STABILITY LOCK: NAV SCROLL BEHAVIOUR SAFETY
   ------------------------------------------------------------
   Why: keep nav wrappers from creating independent scroll zones.
   Do not remove: nav panels can trap wheel/touch and jitter page.
============================================================ */

:where(.ccg-nav,
       .ccg-nav__bar,
       .ccg-nav__list,
       .ccg-nav__more,
       .ccg-nav__more-menu,
       .floating-menu) {
    max-height: none;
    overflow-y: visible;
}

:where(.ccg-nav,
       .ccg-nav__bar,
       .floating-menu) {
    contain: paint;
}

@media (prefers-reduced-motion: reduce) {
    :where(.ccg-nav,
           .ccg-nav__bar,
           .ccg-nav__list,
           .ccg-nav__link,
           .ccg-nav__more-toggle,
           .ccg-nav-toggle,
           .ccg-nav-drawer__close,
           .floating-menu a,
           .floating-menu button) {
        transition: none !important;
        animation: none !important;
    }
}


/* ============================================================
   GLOBAL HEADER + NAV ALIGNMENT LOCK
   ------------------------------------------------------------
   Shared centering contract for logo, navigation and socials.
============================================================ */
.ccg-header-inner {
    width: min(100% - clamp(20px, 3.6vw, 48px), 1320px) !important;
    max-width: 1320px !important;
    margin-inline: auto !important;
    padding-inline: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(240px, auto) minmax(0, 1fr) auto !important;
    align-items: center !important;
    column-gap: clamp(14px, 2vw, 28px) !important;
}

.ccg-header .ccg-nav,
.ccg-header .ccg-nav__bar,
.ccg-header .ccg-nav__list,
.ccg-header .ccg-header-actions {
    margin-inline: 0 !important;
    transform: none !important;
}

.ccg-header .ccg-nav {
    justify-self: center !important;
    width: 100% !important;
    max-width: 100% !important;
}

.ccg-header .ccg-header-actions {
    justify-self: end !important;
}

.ccg-header .ccg-auth-slot {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

@media (min-width: 1200px) {
    .ccg-header-inner {
        grid-template-columns: minmax(180px, 1fr) auto minmax(180px, 1fr) !important;
        grid-template-areas:
            "auth brand mode"
            "nav nav nav"
            "socials socials socials" !important;
        align-items: center !important;
        row-gap: clamp(10px, 1.2vw, 16px) !important;
    }

    .ccg-header .ccg-brand {
        grid-area: brand !important;
        justify-self: center !important;
    }

    .ccg-header .ccg-nav {
        grid-area: nav !important;
        justify-self: center !important;
        width: auto !important;
        max-width: 100% !important;
    }

    .ccg-header .ccg-header-actions {
        display: contents !important;
    }

    .ccg-header .ccg-auth-slot {
        grid-area: auth !important;
        justify-self: start !important;
        min-height: 42px !important;
        display: inline-flex !important;
        align-items: center !important;
        position: relative;
        z-index: 5;
        pointer-events: auto;
    }

    .ccg-header .ccg-mode-hint,
    .ccg-header .ccg-mode-toggle {
        grid-area: mode !important;
        justify-self: end !important;
    }

    .ccg-header .ccg-mode-hint {
        display: block !important;
        min-height: 18px !important;
        align-self: end !important;
    }

    .ccg-header .ccg-mode-toggle {
        min-height: 40px !important;
        align-self: start !important;
    }

    .ccg-header .ccg-header-socials {
        grid-area: socials !important;
        justify-self: center !important;
        margin-inline: auto !important;
        min-height: 38px !important;
        display: inline-flex !important;
        align-items: center !important;
    }
}


@keyframes ccg-social-neon-pulse {
    0%,
    100% {
        box-shadow:
            0 0 0 1px rgba(124, 219, 255, 0.42),
            0 0 10px rgba(86, 210, 255, 0.52),
            0 0 20px rgba(35, 130, 255, 0.30),
            inset 0 0 10px rgba(130, 210, 255, 0.14);
    }

    50% {
        box-shadow:
            0 0 0 1px rgba(160, 232, 255, 0.58),
            0 0 14px rgba(112, 220, 255, 0.68),
            0 0 28px rgba(44, 150, 255, 0.42),
            inset 0 0 14px rgba(170, 228, 255, 0.24);
    }
}

.ccg-header .ccg-header-socials a {
    background: radial-gradient(circle at 30% 24%, rgba(210, 245, 255, 0.24), rgba(6, 18, 42, 0.95)) !important;
    border: 1px solid rgba(146, 226, 255, 0.62) !important;
    box-shadow:
        0 0 0 1px rgba(124, 219, 255, 0.42),
        0 0 10px rgba(86, 210, 255, 0.52),
        0 0 20px rgba(35, 130, 255, 0.30),
        inset 0 0 10px rgba(130, 210, 255, 0.14) !important;
    animation: ccg-social-neon-pulse 3.6s ease-in-out infinite;
}

.ccg-header .ccg-header-socials a:hover,
.ccg-header .ccg-header-socials a:focus-visible {
    transform: translateY(-1px) scale(1.06) !important;
    border-color: rgba(186, 240, 255, 0.96) !important;
    box-shadow:
        0 0 0 1px rgba(176, 238, 255, 0.75),
        0 0 16px rgba(132, 230, 255, 0.82),
        0 0 34px rgba(52, 166, 255, 0.58),
        inset 0 0 16px rgba(194, 242, 255, 0.30) !important;
    animation-play-state: paused;
}

.ccg-header .ccg-header-socials a:active {
    animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
    .ccg-header .ccg-header-socials a {
        animation: none !important;
    }

    .ccg-header .ccg-header-socials a:hover,
    .ccg-header .ccg-header-socials a:focus-visible {
        transform: none !important;
    }
}

@media (max-width: 1199px) {
    .ccg-nav-toggle {
        display: inline-flex !important;
    }

    .ccg-header .ccg-nav__bar,
    .ccg-header .ccg-nav__list--secondary,
    .ccg-header .ccg-nav__more {
        display: none !important;
    }

    .ccg-header .ccg-nav {
        width: auto !important;
    }
}

@media (min-width: 1200px) {
    .ccg-nav-toggle {
        display: none !important;
    }

    .ccg-header .ccg-nav__bar {
        display: contents !important;
    }

    .ccg-header .ccg-nav__list--secondary {
        display: flex !important;
    }

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

@media (max-width: 1099px) {
    .ccg-header-inner {
        grid-template-columns: minmax(0, 1fr) auto auto !important;
        width: 100% !important;
    }
}

@media (max-width: 900px) {
    .ccg-header-inner {
        width: min(100% - 24px, 1320px) !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
    }
}

/* ============================================================
   MENU GHOST RECTANGLE + MODE HINT VISIBILITY HOTFIX
============================================================ */

html,
body {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

:where(#menu-wrapper,
       nav#main-nav,
       .menu-float-bg,
       .menu-deco-layer,
       .ccg-nav,
       .ccg-nav__bar,
       .ccg-nav__list,
       .ccg-nav__more-menu) {
    transform: none !important;
    will-change: auto !important;
}

@media (min-width: 768px) {
    #menu-wrapper,
    nav#main-nav,
    .ccg-nav {
        position: relative;
    }
}

nav#main-nav:hover,
.ccg-nav:hover {
    transform: none !important;
}

:where(.mode-switch-container,
       .ccg-mode-hint) {
    position: relative;
    z-index: 9999 !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

:where(.mode-switch-container .mode-switch-text,
       .ccg-mode-hint) {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 0 0 4px rgba(0, 0, 0, 0.45);
}

@media (max-width: 767px) {
    .mode-switch-container {
        padding: 8px 12px;
    }

    :where(.mode-switch-container .mode-switch-text,
           .ccg-mode-hint) {
        font-size: 16px !important;
        line-height: 1.4 !important;
    }
}

:where(.mode-switch-wrap,
       .mode-switch-bg,
       .mode-switch-deco,
       .ccg-header-actions,
       .ccg-mode-toggle,
       .ccg-mode-toggle__pill) {
    overflow: visible !important;
}

/* Idle-state fix: remove nav toggle ghost glass rectangle without changing layout/interaction. */
button.ccg-nav-toggle.ccg-btn-ghost:not(:hover):not(:focus-visible):not(:active) {
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}