/* ---------------------------------------------------------------------------
   Site header — custom hardcoded chrome (global)
   ---------------------------------------------------------------------------
   Loaded site-wide because header.php in the child theme replaces
   Flatsome's parent header.php and pulls in template-parts/site-header.php.

   Design direction: modern, minimalist, premium. References — Riot Games,
   Vercel, Linear, Topgolf, Bowlero. Solid dark bg (no gradients, no
   multi-layer neon glow — those read dated now). Big bold uppercase
   typography. One-effect hover: thin white underline that grows from the
   center. No yellow CTA — every item is treated equally.
*/

/* Scroll lock — when the arcade menu is open. position:fixed is the
   only reliable iOS Safari lock (overflow:hidden alone leaks); the
   scrollY preservation lives in js/site-header.js (sets body.top to
   -scrollY on open, restores it on close). When this class is on, the
   sticky header also slides up out of view so the menu owns the
   entire viewport. */
body.fz-nav-locked {
    position: fixed;
    width: 100%;
    overflow: hidden;
    overscroll-behavior: contain;
}

/* Header transform — same translateY(-100%) is used by:
   - body.fz-nav-locked (arcade menu open)
   - .is-scroll-hidden (user scrolled down past threshold; reveals on
     scroll-up or pull-tab click)
   Both produce the same hide, so they layer without conflict. */
.fz-site-header {
    transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}
body.fz-nav-locked .fz-site-header,
.fz-site-header.is-scroll-hidden {
    transform: translateY(-100%);
}

/* ── Pull tab — small centred chip that appears whenever the header is
   retracted, signalling "the nav is up there, tap to bring it back".
   Hangs from the very top edge with a rounded-bottom pill shape so it
   reads as a literal tab. Click / tap re-shows the header even when
   the user hasn't started scrolling back up yet. */
.fz-header-tab {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%) translateY(-100%);
    z-index: 101;
    /* Hard reset against Flatsome's <button> inheritance — without
       this, line-height + min-height from the parent-theme rules
       inflate the chip to ~24 px tall regardless of our padding. */
    box-sizing: border-box;
    font: inherit;
    font-size: 0;
    line-height: 0;
    min-height: 0;
    appearance: none;
    -webkit-appearance: none;
    /* Explicit box: horizontal grab bar hanging from the top edge.
       16 px tall reads as a slim handle without sacrificing tap
       ergonomics on touch — the ::before below still extends the hit
       surface to a comfortable ~44 px, but the visible chip itself is
       now big enough to land a deliberate finger on. */
    width: 72px;
    height: 16px;
    padding: 0;
    display: grid;
    place-items: center;
    /* Light frosted glass — heavy blur + saturate over a low-opacity navy
       so whatever section is above reads through the chip in a wash of
       its own colour. Subtler chrome than the prior solid pill. */
    background: rgba(12, 12, 62, 0.28);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    backdrop-filter: blur(14px) saturate(150%);
    /* Border replaced by inset box-shadow so the chip box stays
       symmetric (a real border-bottom would shift the SVG's grid
       centring half a pixel up and the chevron read as low). The
       inset shadows are the "neon trim" along left + right + bottom
       only — there's no inset on top, so the edge under the section
       above stays clean. */
    border: 0;
    border-radius: 0 0 6px 6px;
    color: rgba(0, 240, 255, 0.85);
    cursor: pointer;
    box-shadow:
        inset 0 -1px 0 rgba(0, 240, 255, 0.7),
        inset 1px 0 0 rgba(0, 240, 255, 0.45),
        inset -1px 0 0 rgba(0, 240, 255, 0.45);
    /* visibility:hidden when out so the tab is removed from the tab
       order and pointer events until the body class flips. The 0 s
       delay on the reveal side + 0.32 s delay on the hide side make
       the transitions feel symmetric. */
    visibility: hidden;
    opacity: 0;
    transition:
        transform 0.32s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.28s ease,
        visibility 0s linear 0.32s,
        background 0.2s ease,
        box-shadow 0.2s ease;
}
body.fz-header-retracted .fz-header-tab {
    visibility: visible;
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    transition:
        transform 0.32s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.28s ease,
        visibility 0s linear 0s,
        background 0.2s ease,
        box-shadow 0.2s ease;
}
/* When the arcade menu is open, the tab would otherwise float above the
   menu overlay (z-index 101 > the menu's 99). Force-hide the tab while
   the menu owns the viewport; it returns to its scroll-driven state
   the moment the menu closes. Dual-class selector beats the single
   `body.fz-header-retracted` rule on specificity. */
body.fz-nav-locked.fz-header-retracted .fz-header-tab,
body.fz-nav-locked .fz-header-tab {
    visibility: hidden;
    opacity: 0;
    transform: translateX(-50%) translateY(-100%);
}
.fz-header-tab:hover,
.fz-header-tab:focus-visible {
    background: rgba(0, 240, 255, 0.16);
    color: #00f0ff;
    box-shadow:
        inset 0 -1px 0 #00f0ff,
        inset 1px 0 0 rgba(0, 240, 255, 0.7),
        inset -1px 0 0 rgba(0, 240, 255, 0.7);
    outline: none;
}
.fz-header-tab:hover::after,
.fz-header-tab:focus-visible::after {
    height: 32px;
    background: radial-gradient(
        ellipse 60% 100% at 50% 0%,
        rgba(0, 240, 255, 0.8) 0%,
        rgba(0, 240, 255, 0.3) 40%,
        transparent 75%
    );
}
/* Invisible hit-area extension — the visible chip is intentionally
   shallow for subtlety, so the ::before stretches the click / tap
   surface to ~44 px tall (WCAG touch-target minimum) without
   touching the visual. */
.fz-header-tab::before {
    content: '';
    position: absolute;
    inset: -14px -16px;
}

/* Neon halo — radial gradient anchored to the BOTTOM edge so the glow
   only ever spills downward + sideways, never above. Replaces the
   prior box-shadow which radiated equally in all directions and would
   leak a faint cyan haze above the top edge against whatever section
   sits there. */
.fz-header-tab::after {
    content: '';
    position: absolute;
    top: 100%;
    left: -10px;
    right: -10px;
    height: 22px;
    background: radial-gradient(
        ellipse 50% 100% at 50% 0%,
        rgba(0, 240, 255, 0.55) 0%,
        rgba(0, 240, 255, 0.18) 45%,
        transparent 75%
    );
    pointer-events: none;
    transition: opacity 0.22s ease, height 0.22s ease;
}

.fz-header-tab-icon {
    display: block;
    vertical-align: top;
    transition: transform 0.22s ease;
}
.fz-header-tab:hover .fz-header-tab-icon,
.fz-header-tab:focus-visible .fz-header-tab-icon {
    transform: translateY(2px);
}


.fz-skip-link {
    position: absolute;
    left: -10000px;
    top: 0;
    background: #ffffff;
    color: #0c0c3e;
    padding: 0.6rem 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    text-decoration: none;
    z-index: 1000;
    border-radius: 0 0 6px 0;
}
.fz-skip-link:focus {
    left: 0;
}

/* ── Header bar ──────────────────────────────────────────────────────────── */

.fz-site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: #0c0c3e;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

/* Anchor scroll offset is now computed in JS (see funzone_inline_anchor_fix_script
   in inc/setup/assets.php) using the actual measured header height.
   scroll-margin-top here would be a fallback for the browser's native
   anchor scroll if our JS fails to load — kept at the measured desktop
   header height for that edge case. */
.activities-section,
.contact-us-section,
.family-fun-section,
.gift-voucher-section,
.section-location,
.fz-site-location {
    scroll-margin-top: 96px;
}

.fz-site-header-inner {
    max-width: 1320px;
    margin: 0 auto;
    padding: 1rem 2rem;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1.5rem;
}

/* ── Logo ────────────────────────────────────────────────────────────────── */

.fz-site-header-logo {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    transition: opacity 0.18s ease;
}
.fz-site-header-logo img {
    height: 65px; /* 50 → 65 (+30% per redesign brief) */
    width: auto;
    display: block;
}
.fz-site-header-logo:hover {
    opacity: 0.85;
}
.fz-site-header-logo:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 4px;
    border-radius: 4px;
}

/* ── Nav (desktop) ───────────────────────────────────────────────────────── */

.fz-site-nav {
    justify-self: center;
}

.fz-site-nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.fz-site-nav-link,
.fz-site-nav-link:link,
.fz-site-nav-link:visited {
    color: #ffffff;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    font-size: 1.02rem; /* 0.85 → 1.02 (+20% per redesign brief) */
    font-weight: 600;
    /* Asymmetric vertical padding — uppercase text has no descenders, so
       its visual centre sits above the geometric centre of the box. The
       extra 3px on top shifts the perceived baseline downward, aligning
       optically with the logo glyphs to its left. */
    padding: 0.75rem 1rem 0.45rem;
    line-height: 1.2;
    position: relative;
    display: inline-block;
    transition: none;
    -webkit-font-smoothing: antialiased;
}

/* Flatsome's parent stylesheet sets `a:hover { color: <primary> }`
   globally, which would turn the nav text dark on hover. Pin white
   explicitly with extra specificity so the only thing that changes
   on hover is the underline. */
.fz-site-header .fz-site-nav-link,
.fz-site-header .fz-site-nav-link:link,
.fz-site-header .fz-site-nav-link:visited,
.fz-site-header .fz-site-nav-link:hover,
.fz-site-header .fz-site-nav-link:focus,
.fz-site-header .fz-site-nav-link:focus-visible,
.fz-site-header .fz-site-nav-link:active,
.fz-site-header .fz-site-nav-link.is-current {
    color: #ffffff;
}

/* Single-effect hover: thin white underline grows from center. No glow,
   no color shift — keeps the chrome quiet so the page content carries
   the personality. Persists on the current page. */
.fz-site-nav-link::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0.35rem;
    width: 0;
    height: 1.5px;
    background: #ffffff;
    transform: translateX(-50%);
    transition: width 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.fz-site-nav-link:hover::after,
.fz-site-nav-link:focus-visible::after,
.fz-site-nav-link.is-current::after {
    width: calc(100% - 2rem);
}
.fz-site-nav-link:focus-visible {
    /* WCAG 2.4.11 / 2.4.13: focus indicator must be visibly distinct
       from the hover-only state. The 1.5 px underline already animates
       in on :hover, so a keyboard user couldn't tell focus apart from
       hover. Cyan box-shadow ring + small offset radius adds a clear,
       WCAG-compliant focus cue without disturbing the underline. */
    outline: none;
    box-shadow: 0 0 0 2px #00f0ff;
    border-radius: 4px;
}

/* ── Burger button (mobile only) ─────────────────────────────────────────── */

.fz-site-header-burger {
    display: none;
    background: transparent;
    border: 0;
    cursor: pointer;
    width: 44px;
    height: 44px;
    padding: 0;
    /* Reset Flatsome / UA <button> defaults explicitly so the header
       chrome is Flatsome-independent: the parent theme adds both a
       margin-right (pushed the burger inward from the screen edge) and
       a margin-bottom (made the inner taller "by accident"). Zeroing
       all four sides here puts us fully in control — the header's
       height is owned by min-height on .fz-site-header-inner below. */
    margin: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    justify-self: end;
}
.fz-site-header-burger span {
    display: block;
    width: 26px;
    height: 2px;
    background: #ffffff;
    border-radius: 2px;
    transition: transform 0.28s ease, opacity 0.2s ease;
}
.fz-site-header-burger[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.fz-site-header-burger[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
}
.fz-site-header-burger[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}
.fz-site-header-burger:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
    border-radius: 6px;
}

/* ── Mobile (≤850px): burger + arcade overlay swap in ────────────────────── */

@media (max-width: 850px) {
    .fz-site-header-inner {
        grid-template-columns: auto 1fr auto;
        padding: 0.65rem 1.25rem;
        gap: 1rem;
        /* Explicit min-height — we don't rely on Flatsome's <button>
           margin to make the bar tall. Logo (48px) + burger (44px) both
           vertically centre inside this band via align-items: center. */
        min-height: 76px;
    }
    .fz-site-header-logo img {
        height: 48px;
    }
    .fz-site-header-burger {
        display: flex;
    }
    .fz-site-nav {
        display: none !important;
    }
}
@media (min-width: 851px) {
    .fz-nav-arcade {
        display: none !important;
    }
}

/* ════════════════════════════════════════════════════════════════════════
   Mobile/tablet menu — Arcade Start Screen
   Fullscreen takeover. Logo top-centre, close X absolute top-right,
   particles drifting through a 2-col icon grid, social row at bottom.
   ════════════════════════════════════════════════════════════════════════ */

.fz-nav-arcade {
    position: fixed;
    inset: 0;
    z-index: 99;
    box-sizing: border-box;
    background: radial-gradient(ellipse at 50% 40%, #1a1a6e 0%, #0c0c3e 70%);
    /* Fluid padding — scales with viewport size so iPhone SE doesn't
       feel cramped and tablets don't look empty. vw drives horizontal
       breathing room; vh drives vertical (close X clearance + bottom
       safe area on phones with home indicators). */
    padding: clamp(18px, 3.5vh, 36px) clamp(20px, 5.5vw, 40px);
    overflow: hidden;
    visibility: hidden;
    pointer-events: none;
    opacity: 0;
    transform: scale(1.02);
    transition: opacity 0.28s ease, transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s linear 0.32s;
    /* Three children — header (logo), grid, social — distributed evenly
       down the viewport. justify-content: space-evenly puts equal gaps
       between each child AND between the first/last child and the edges,
       so the menu reads as a balanced 3-band layout regardless of phone
       height. */
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}
.fz-nav-arcade *,
.fz-nav-arcade *::before,
.fz-nav-arcade *::after {
    box-sizing: border-box;
}
.fz-nav-arcade.is-open {
    visibility: visible;
    pointer-events: auto;
    opacity: 1;
    transform: scale(1);
    transition: opacity 0.28s ease, transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s linear 0s;
}

/* Closing — bg + container fade and zoom out slightly while the cards
   play their own exit animations on top. */
.fz-nav-arcade.is-closing {
    opacity: 0;
    transform: scale(0.96);
    transition: opacity 0.32s ease, transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Close button — absolute top-right corner ─────────────────────────── */

.fz-nav-arcade-close {
    position: absolute;
    top: clamp(10px, 2vh, 18px);
    right: clamp(10px, 3vw, 18px);
    z-index: 3;
    width: clamp(40px, 11vw, 46px);
    height: clamp(40px, 11vw, 46px);
    background: transparent;
    border: 0;
    color: #ffffff;
    font-size: clamp(1.2rem, 4.5vw, 1.4rem);
    cursor: pointer;
    border-radius: 999px;
    transition: background 0.18s ease, transform 0.28s ease, color 0.18s ease;
}
.fz-nav-arcade-close:hover,
.fz-nav-arcade-close:focus-visible {
    background: rgba(255, 255, 255, 0.1);
    color: #00f0ff;
    transform: rotate(90deg);
    outline: none;
}
.fz-nav-arcade-close:focus-visible {
    /* Icon-only close button on a dark overlay — without a dedicated
       ring the keyboard user has no visible focus stop (background tint
       + colour swap match the hover state exactly). */
    box-shadow: 0 0 0 2px rgba(0, 240, 255, 0.9);
}

/* ── Particles ─────────────────────────────────────────────────────────── */

.fz-nav-arcade-particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}
.fz-nav-arcade-particles span {
    position: absolute;
    width: 5px;
    height: 5px;
    background: #00f0ff;
    box-shadow: 0 0 10px rgba(0, 240, 255, 0.7);
    animation: fz-nav-arcade-float linear infinite;
    opacity: 0;
}
.fz-nav-arcade-particles span:nth-child(1)  { left:  6%; bottom: -8px; animation-duration: 14s; animation-delay:  0.0s; }
.fz-nav-arcade-particles span:nth-child(2)  { left: 18%; bottom: -8px; animation-duration: 18s; animation-delay:  2.4s; background: #fce803; box-shadow: 0 0 10px rgba(252, 232, 3, 0.7); }
.fz-nav-arcade-particles span:nth-child(3)  { left: 28%; bottom: -8px; animation-duration: 16s; animation-delay:  1.0s; }
.fz-nav-arcade-particles span:nth-child(4)  { left: 39%; bottom: -8px; animation-duration: 20s; animation-delay:  4.0s; background: #fce803; box-shadow: 0 0 10px rgba(252, 232, 3, 0.7); }
.fz-nav-arcade-particles span:nth-child(5)  { left: 50%; bottom: -8px; animation-duration: 15s; animation-delay:  2.2s; }
.fz-nav-arcade-particles span:nth-child(6)  { left: 61%; bottom: -8px; animation-duration: 17s; animation-delay:  3.5s; }
.fz-nav-arcade-particles span:nth-child(7)  { left: 70%; bottom: -8px; animation-duration: 19s; animation-delay:  1.6s; background: #fce803; box-shadow: 0 0 10px rgba(252, 232, 3, 0.7); }
.fz-nav-arcade-particles span:nth-child(8)  { left: 79%; bottom: -8px; animation-duration: 13s; animation-delay:  0.8s; }
.fz-nav-arcade-particles span:nth-child(9)  { left: 85%; bottom: -8px; animation-duration: 21s; animation-delay:  5.0s; }
.fz-nav-arcade-particles span:nth-child(10) { left: 92%; bottom: -8px; animation-duration: 14s; animation-delay:  2.7s; background: #fce803; box-shadow: 0 0 10px rgba(252, 232, 3, 0.7); }
.fz-nav-arcade-particles span:nth-child(11) { left: 14%; bottom: -8px; animation-duration: 18s; animation-delay:  3.0s; }
.fz-nav-arcade-particles span:nth-child(12) { left: 56%; bottom: -8px; animation-duration: 16s; animation-delay:  4.4s; }

@keyframes fz-nav-arcade-float {
    0%   { transform: translateY(0)     scale(1);   opacity: 0;   }
    10%  { opacity: 1; }
    100% { transform: translateY(-100vh) scale(0.5); opacity: 0;  }
}

/* ── Logo top-centre ───────────────────────────────────────────────────── */

.fz-nav-arcade-header {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    /* No padding here — parent's space-evenly handles vertical breathing
       room around all three children (header / grid / social). */
    padding: 0;
    flex: 0 0 auto;
}
.fz-nav-arcade-logo {
    /* Logo scales with viewport width — bigger on tablets, smaller on
       narrow phones so it doesn't crowd the close X or eat the available
       vertical space the cards need. */
    height: clamp(68px, 18vw, 110px);
    width: auto;
    display: block;
    filter: drop-shadow(0 0 22px rgba(0, 240, 255, 0.4));
}

/* ── Grid of icon cards — centred + capped width so cards never reach the
   viewport edge on any phone size. Wider phones get a comfortable rail
   either side; narrower phones fill the available width up to the cap. */

.fz-nav-arcade-grid {
    position: relative;
    z-index: 2;
    list-style: none;
    /* Vertical spacing owned by the parent's justify-content: space-evenly.
       Horizontal auto centres the grid under its capped width.
       max-width 300 (was 360) + gap 16-24 (was 8-14) shrinks each card
       further AND opens up the channel between them so the row reads as
       deliberate chips rather than a packed grid. */
    margin: 0 auto;
    padding: 0;
    width: 100%;
    max-width: 300px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(16px, 5vw, 24px);
    align-content: start;
    flex: 0 0 auto;
}

.fz-nav-arcade-cell {
    opacity: 0;
}
.fz-nav-arcade.is-open .fz-nav-arcade-cell {
    animation: fz-nav-arcade-card-in 0.42s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    animation-delay: var(--fz-cell-delay, 0s);
}

@keyframes fz-nav-arcade-card-in {
    from { opacity: 0; transform: translateY(14px) scale(0.92); }
    to   { opacity: 1; transform: translateY(0) scale(1);       }
}

/* Closing — non-picked cards retract; picked card pops + glows brighter. */
.fz-nav-arcade.is-closing .fz-nav-arcade-cell:not(.is-picked) {
    animation: fz-nav-arcade-card-out 0.26s ease-in forwards;
}
.fz-nav-arcade.is-closing .fz-nav-arcade-cell.is-picked {
    animation: fz-nav-arcade-card-picked 0.36s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    z-index: 4;
}

@keyframes fz-nav-arcade-card-out {
    from { opacity: 1; transform: translateY(0) scale(1);          }
    to   { opacity: 0; transform: translateY(-10px) scale(0.85);    }
}
@keyframes fz-nav-arcade-card-picked {
    0%   { transform: scale(1);    filter: brightness(1);   }
    45%  { transform: scale(1.12); filter: brightness(1.5); }
    100% { transform: scale(1.04); filter: brightness(1.2); }
}
.fz-nav-arcade-cell.is-picked .fz-nav-arcade-card {
    border-color: #00f0ff !important;
    background: linear-gradient(160deg, rgba(0,240,255,0.32) 0%, rgba(0,240,255,0.12) 100%) !important;
    box-shadow: 0 0 40px rgba(0, 240, 255, 0.75) !important;
}

/* ── The cards themselves — smaller padding + icon/font sizes ─────────── */

.fz-nav-arcade-card,
.fz-nav-arcade-card:link,
.fz-nav-arcade-card:visited {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(0.3rem, 1.5vw, 0.55rem);
    background: linear-gradient(160deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%);
    border: 1.5px solid rgba(0, 240, 255, 0.3);
    border-radius: clamp(10px, 2.5vw, 14px);
    padding: clamp(0.65rem, 2.5vw, 1rem) clamp(0.4rem, 2vw, 0.7rem);
    text-decoration: none;
    color: #ffffff;
    /* Wider-than-tall aspect ratio so 3 rows of cards leave room for
       logo + socials on short iPhones (SE/Mini). At 1.35, a 165 px-wide
       card is only ~122 px tall — 3 rows = ~366 px vs ~430 px at 1.15. */
    aspect-ratio: 1.35;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.fz-nav-arcade-card:hover,
.fz-nav-arcade-card:focus-visible,
.fz-nav-arcade-card:active {
    border-color: #00f0ff;
    background: linear-gradient(160deg, rgba(0,240,255,0.15) 0%, rgba(0,240,255,0.05) 100%);
    box-shadow: 0 0 22px rgba(0, 240, 255, 0.4);
    transform: translateY(-2px);
    outline: none;
}
.fz-nav-arcade-card i {
    font-size: clamp(1.15rem, 4.5vw, 1.55rem);
    color: #00f0ff;
    text-shadow: 0 0 12px rgba(0, 240, 255, 0.6);
}
.fz-nav-arcade-card span {
    font-size: clamp(0.6rem, 2vw, 0.75rem);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    text-align: center;
    line-height: 1.15;
}

/* ── Social row pinned at the bottom ──────────────────────────────────── */

.fz-nav-arcade-social {
    position: relative;
    z-index: 2;
    margin: 0 auto;
    padding-top: clamp(0.75rem, 2vh, 1.1rem);
    width: 100%;
    /* Match the grid's max-width so the border-top divider lines up
       cleanly under the cards. */
    max-width: 300px;
    display: flex;
    justify-content: center;
    gap: clamp(0.6rem, 2.5vw, 1rem);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    flex: 0 0 auto;
}
.fz-nav-arcade-social-link,
.fz-nav-arcade-social-link:link,
.fz-nav-arcade-social-link:visited {
    /* Social chips scale with viewport too — but stay tappable: clamp
       lower bound is 40 px, above the WCAG 24 px target and on par
       with the 44 px iOS HIG recommendation. */
    width: clamp(40px, 11vw, 48px);
    height: clamp(40px, 11vw, 48px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    color: #ffffff;
    font-size: clamp(0.95rem, 3.5vw, 1.1rem);
    text-decoration: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

/* Per-brand colour fills — matches the footer's hover palette so the
   colour identity reads the same wherever the user lands. Applied as the
   DEFAULT state here (not on hover) so the icons read as branded chips
   the moment the menu opens. */
.fz-nav-arcade-social-link--facebook {
    background: #1877f2;
}
.fz-nav-arcade-social-link--instagram {
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
}
.fz-nav-arcade-social-link--tiktok {
    background: linear-gradient(135deg, #25f4ee 0%, #000000 50%, #fe2c55 100%);
}

.fz-nav-arcade-social-link:hover,
.fz-nav-arcade-social-link:focus-visible {
    border-color: rgba(255, 255, 255, 0.55);
    box-shadow:
        0 8px 22px rgba(0, 0, 0, 0.35),
        0 0 0 4px rgba(4, 187, 211, 0.3);
    transform: translateY(-3px) scale(1.05);
    outline: none;
}

/* ── Reduced motion — skip transitions / animations ────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .fz-site-header-burger span,
    .fz-site-nav,
    .fz-site-nav-link,
    .fz-site-nav-link::after,
    .fz-site-header-logo,
    .fz-skip-link,
    .fz-site-header,
    .fz-header-tab,
    .fz-header-tab-icon,
    .fz-nav-arcade,
    .fz-nav-arcade-particles span,
    .fz-nav-arcade-cell,
    .fz-nav-arcade-close,
    .fz-nav-arcade-social-link {
        transition: none !important;
        animation: none !important;
    }
    /* Reduced motion: header stays pinned. The scroll-hide is a
       motion-y affordance; skip it. */
    .fz-site-header.is-scroll-hidden {
        transform: none !important;
    }
}