/* ═══════════════════════════════════════════════════════════
   TIMEWARP ARCADE — GLOBAL CSS
   Design tokens · Star field · Nav · Footer · Shared components
   Mobile-first, fully responsive
   ═══════════════════════════════════════════════════════════ */

/* Fonts loaded via wp_enqueue_style('timewarp-fonts') in functions.php.
   @import removed — it was render-blocking and duplicated the enqueue. */

/* ── DESIGN TOKENS ── */
:root {
    --yellow:       #FFE600;
    --pink:         #FF2D6B;
    --cyan:         #00E5FF;
    --green:        #39FF14;
    --purple:       #9D4EDD;

    --bg:           #05050E;
    --bg-mid:       #080818;
    --bg-panel:     #0E0E24;
    --bg-card:      #12122E;

    --border:       rgba(120, 100, 255, 0.18);
    --border-glow:  rgba(0, 229, 255, 0.35);

    --text:         #A8BCD8;
    --text-bright:  #D0E4F8;

    --font-display: 'Orbitron', sans-serif;
    --font-body:    'DM Mono', monospace;
    --font-pixel:   'Press Start 2P', monospace;

    --nav-h:        64px;
    --max-w:        1100px;
    --max-w-sm:     780px;
}

/* ── RESET ── */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
    overflow-x: hidden; /* here instead of body — keeps position:fixed working on mobile */
}

body {
    /* !important: GeneratePress prints an inline body{background-color:var(--base-2)}
       (light grey) after this file, which otherwise wins and shows through any gap
       above the content - e.g. the strip under the WP admin bar. */
    background: var(--bg) !important;
    color: var(--text);
    font-family: var(--font-body);
    line-height: 1.65;
    /* Reset GeneratePress defaults */
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Override GeneratePress layout containers */
.site-container,
.site-content,
.inside-site-content,
.content-area,
.site-main,
#page,
#content,
.hfeed,
.generate-columns-container {
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    background: transparent !important;
}

/* Remove GeneratePress header/footer completely */
.site-header,
.main-navigation,
.site-footer.has-footer-bar,
#generate-footer {
    display: none !important;
}

img {
    max-width: 100%;
    display: block;
    height: auto;
}

a {
    color: inherit;
    text-decoration: none;
}

/* ── STAR FIELD (CSS background on body) ── */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image:
        radial-gradient(1px 1px at 8%  12%, rgba(232,244,255,0.90) 0%, transparent 100%),
        radial-gradient(1px 1px at 22% 38%, rgba(232,244,255,0.60) 0%, transparent 100%),
        radial-gradient(1.5px 1.5px at 38% 6%, rgba(232,244,255,0.90) 0%, transparent 100%),
        radial-gradient(1px 1px at 54% 58%, rgba(232,244,255,0.50) 0%, transparent 100%),
        radial-gradient(1px 1px at 68% 22%, rgba(232,244,255,0.70) 0%, transparent 100%),
        radial-gradient(1.5px 1.5px at 80% 72%, rgba(232,244,255,0.80) 0%, transparent 100%),
        radial-gradient(1px 1px at 91% 33%, rgba(232,244,255,0.60) 0%, transparent 100%),
        radial-gradient(1px 1px at 14% 82%, rgba(232,244,255,0.50) 0%, transparent 100%),
        radial-gradient(1px 1px at 45% 88%, rgba(232,244,255,0.60) 0%, transparent 100%),
        radial-gradient(2px 2px at 5%  48%, rgba(157,78,221,0.70) 0%, transparent 100%),
        radial-gradient(2px 2px at 76%  8%, rgba(0,229,255,0.50) 0%, transparent 100%),
        radial-gradient(1.5px 1.5px at 42% 68%, rgba(255,45,107,0.40) 0%, transparent 100%),
        radial-gradient(1px 1px at 62% 15%, rgba(232,244,255,0.70) 0%, transparent 100%),
        radial-gradient(1px 1px at 30% 55%, rgba(232,244,255,0.40) 0%, transparent 100%),
        radial-gradient(1px 1px at 85% 45%, rgba(232,244,255,0.60) 0%, transparent 100%);
    pointer-events: none;
    z-index: 0;
}

/* Scanline overlay */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 3px,
        rgba(0, 0, 0, 0.06) 3px,
        rgba(0, 0, 0, 0.06) 4px
    );
    pointer-events: none;
    z-index: 9999;
}

/* ── SUPERNOVA RINGS ── */
.star-field {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
}

.supernova-ring {
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-style: solid;
}

.ring-1 {
    width: clamp(200px, 40vw, 360px);
    height: clamp(200px, 40vw, 360px);
    border-width: 1px;
    border-color: rgba(157, 78, 221, 0.18);
    animation: ringPulse 4s ease-in-out infinite;
}
.ring-2 {
    width: clamp(350px, 65vw, 600px);
    height: clamp(350px, 65vw, 600px);
    border-width: 1px;
    border-color: rgba(157, 78, 221, 0.09);
    animation: ringPulse 4s 0.8s ease-in-out infinite;
}
.ring-3 {
    width: clamp(500px, 90vw, 850px);
    height: clamp(500px, 90vw, 850px);
    border-width: 1px;
    border-color: rgba(255, 230, 0, 0.05);
    animation: ringPulse 4s 1.6s ease-in-out infinite;
}

@keyframes ringPulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1);    opacity: 0.5; }
    50%       { transform: translate(-50%, -50%) scale(1.04); opacity: 1;   }
}

/* Shooting stars */
.shooting-star {
    position: absolute;
    width: 2px;
    height: 2px;
    background: #fff;
    border-radius: 50%;
    /* Hidden until its animation starts. Each star waits (animation-delay)
       before its first run, and during that wait it would otherwise sit
       visible, frozen at its start point. */
    opacity: 0;
}
.shooting-star::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 120px;
    height: 1px;
    background: linear-gradient(to left, rgba(255,255,255,0.8), transparent);
}
.ss-1 { top: 12%; left: -5%; animation: shootingStar 7s 1s   linear infinite; }
.ss-2 { top: 32%; left: -5%; animation: shootingStar 9s 4s   linear infinite; }
.ss-3 { top: 7%;  left: -5%; animation: shootingStar 6s 6.5s linear infinite; }
/* Two extra, on long slow cycles so the sky never gets busy */
.ss-4 { top: 48%; left: -5%; animation: shootingStar 13s 9s  linear infinite; }
.ss-5 { top: 22%; left: 30%; animation: shootingStar 15s 12s linear infinite; }
.ss-4::after, .ss-5::after { width: 80px; opacity: 0.7; }

/* Twinkling stars - three layers of tiny dots, each fading on its own
   rhythm so neighbouring stars never pulse in step. Opacity-only animation,
   so it runs on the GPU and costs nothing on scroll. */
.twinkle {
    position: absolute;
    inset: 0;
    background-repeat: no-repeat;
    animation: twinkle 5s ease-in-out infinite alternate;
    will-change: opacity;
}
.twinkle-a {
    background-image:
        radial-gradient(2.5px 2.5px at 7% 18%,  #fff 50%, transparent 100%),
        radial-gradient(2px 2px     at 19% 64%, #fff 50%, transparent 100%),
        radial-gradient(2.5px 2.5px at 33% 9%,  rgba(0,229,255,.9) 50%, transparent 100%),
        radial-gradient(2px 2px     at 46% 78%, #fff 50%, transparent 100%),
        radial-gradient(3px 3px     at 58% 27%, #fff 50%, transparent 100%),
        radial-gradient(2px 2px     at 71% 55%, #fff 50%, transparent 100%),
        radial-gradient(2.5px 2.5px at 84% 14%, rgba(255,230,0,.85) 50%, transparent 100%),
        radial-gradient(2px 2px     at 93% 71%, #fff 50%, transparent 100%);
    animation-duration: 4.2s;
}
.twinkle-b {
    background-image:
        radial-gradient(2px 2px     at 3% 46%,  #fff 50%, transparent 100%),
        radial-gradient(2.5px 2.5px at 15% 31%, rgba(157,78,221,.95) 50%, transparent 100%),
        radial-gradient(2px 2px     at 27% 88%, #fff 50%, transparent 100%),
        radial-gradient(3px 3px     at 40% 42%, #fff 50%, transparent 100%),
        radial-gradient(2px 2px     at 52% 6%,  #fff 50%, transparent 100%),
        radial-gradient(2.5px 2.5px at 66% 83%, rgba(0,229,255,.85) 50%, transparent 100%),
        radial-gradient(2px 2px     at 78% 38%, #fff 50%, transparent 100%),
        radial-gradient(2.5px 2.5px at 89% 92%, #fff 50%, transparent 100%);
    animation-duration: 6.4s;
    animation-delay: -2.1s;
}
.twinkle-c {
    background-image:
        radial-gradient(2px 2px     at 11% 92%, #fff 50%, transparent 100%),
        radial-gradient(2.5px 2.5px at 24% 22%, #fff 50%, transparent 100%),
        radial-gradient(2px 2px     at 37% 57%, rgba(255,45,107,.85) 50%, transparent 100%),
        radial-gradient(2px 2px     at 49% 34%, #fff 50%, transparent 100%),
        radial-gradient(2.5px 2.5px at 62% 66%, #fff 50%, transparent 100%),
        radial-gradient(2px 2px     at 75% 4%,  #fff 50%, transparent 100%),
        radial-gradient(3px 3px     at 87% 49%, rgba(0,229,255,.8) 50%, transparent 100%),
        radial-gradient(2px 2px     at 97% 26%, #fff 50%, transparent 100%);
    animation-duration: 7.8s;
    animation-delay: -4.6s;
}
@keyframes twinkle {
    0%   { opacity: 0.05; }
    100% { opacity: 1;    }
}

/* Visitors who have asked their device for less motion get a still sky:
   stars stay visible, nothing moves. */
@media (prefers-reduced-motion: reduce) {
    .star-field *,
    .star-field *::after {
        animation: none !important;
    }
    .shooting-star { display: none; }
    .twinkle { opacity: 0.6; }
}

@keyframes shootingStar {
    0%   { transform: translateX(-120px) translateY(-120px); opacity: 0; }
    10%  { opacity: 1; }
    90%  { opacity: 0.8; }
    100% { transform: translateX(calc(100vw + 200px)) translateY(calc(100vh + 200px)); opacity: 0; }
}

/* ── TICKER ── */
.ticker-wrap {
    background: var(--yellow);
    overflow: hidden;
    white-space: nowrap;
    padding: 0.6rem 0;
    position: relative;
    z-index: 1;
}
.ticker-inner {
    display: inline-block;
    animation: ticker 35s linear infinite;
    font-family: var(--font-pixel);
    font-size: clamp(0.35rem, 1vw, 0.52rem);
    color: var(--bg);
    letter-spacing: 0.04em;
}
@keyframes ticker {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* ── NAVIGATION ── */
.site-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--nav-h);
    z-index: 8000;
    background: rgba(5, 5, 14, 0.94);
    backdrop-filter: blur(20px) saturate(1.5);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 clamp(1rem, 4vw, 2.5rem);
}

/* Logged-in admins: WordPress pushes the page down for its toolbar (32px,
   46px on narrow screens), so the fixed nav must sit below it rather than
   hide behind it. Visitors never get the .admin-bar class. */
.admin-bar .site-nav { top: 32px; }
.admin-bar .nav-mobile { top: calc(var(--nav-h) + 32px); }
@media screen and (max-width: 782px) {
    .admin-bar .site-nav { top: 46px; }
    .admin-bar .nav-mobile { top: calc(var(--nav-h) + 46px); }
}

.nav-logo {
    text-decoration: none;
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.nav-logo-img {
    height: 44px;
    width: auto;
    display: block;
}

.nav-menu-wrap {
    display: flex;
    align-items: center;
}

/* WordPress wp_nav_menu() outputs a <ul> with class nav-menu */
ul.nav-menu {
    display: flex;
    align-items: center;
    gap: 0.1rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

ul.nav-menu li a {
    font-family: var(--font-body);
    font-size: clamp(0.63rem, 1.25vw, 0.82rem);
    color: var(--text);
    text-decoration: none;
    padding: 0.4rem clamp(0.35rem, 0.9vw, 0.8rem);
    border: 1px solid transparent;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    transition: all 0.18s;
    white-space: nowrap;
    display: block;
}

ul.nav-menu li a:hover,
ul.nav-menu li.current-menu-item > a,
ul.nav-menu li.current_page_item > a {
    color: var(--cyan);
    border-color: rgba(0, 229, 255, 0.35);
    text-shadow: 0 0 10px rgba(0, 229, 255, 0.5);
}

/* Hide WP sub-menus (we don't use them) */
ul.nav-menu .sub-menu { display: none !important; }

.nav-book {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(0.63rem, 1.25vw, 0.82rem);
    background: var(--yellow);
    color: var(--bg) !important;
    padding: 0.45rem 1rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border: none;
    margin-left: 0.5rem;
    transition: background 0.2s;
    display: inline-block;
    text-shadow: none !important;
}
.nav-book:hover { background: #fff; color: var(--bg) !important; }

/* ── NAV STATUS PILL ── */
.nav-status {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-family: var(--font-pixel);
    font-size: 0.42rem;
    letter-spacing: 0.05em;
    padding: 0.35rem 0.65rem;
    border: 1px solid;
    white-space: nowrap;
    line-height: 1.6;
    margin-left: 0.75rem;
}
.nav-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}
.nav-status-sub {
    display: block;
    opacity: 0.7;
    font-size: 0.9em;
}
.nav-status--open {
    color: var(--green);
    border-color: rgba(57, 255, 20, 0.3);
    background: rgba(57, 255, 20, 0.04);
}
.nav-status--open .nav-status-dot {
    background: var(--green);
    box-shadow: 0 0 6px var(--green);
    animation: status-pulse 2s ease-in-out infinite;
}
.nav-status--closed {
    color: rgba(168, 188, 216, 0.55);
    border-color: rgba(168, 188, 216, 0.12);
}
.nav-status--closed .nav-status-dot {
    background: rgba(168, 188, 216, 0.3);
}
.nav-status,
.nav-status-mobile,
.nav-status:visited,
.nav-status-mobile:visited,
.nav-status:hover,
.nav-status-mobile:hover {
    text-decoration: none !important;
}
.nav-status--open,
.nav-status--open:visited,
.nav-status--open:hover  { color: var(--green) !important; }
.nav-status--closed,
.nav-status--closed:visited,
.nav-status--closed:hover { color: rgba(168, 188, 216, 0.55) !important; }
.nav-status:hover,
.nav-status-mobile:hover { opacity: 0.8; }

@keyframes status-pulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 6px var(--green); }
    50%       { opacity: 0.5; box-shadow: 0 0 2px var(--green); }
}

/* Mobile nav bar status pill (hidden on desktop, shown in nav on mobile) */
.nav-status-mobile {
    display: none;
}
.nav-status-mobile-text {
    font-family: var(--font-pixel);
    font-size: 0.45rem;
    letter-spacing: 0.05em;
    line-height: 1.8;
    text-align: center;
}

/* Mobile drawer status */
.mob-status {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-pixel);
    font-size: 0.5rem;
    letter-spacing: 0.04em;
    padding: 0.75rem 1rem;
    margin-top: 0.5rem;
    border-top: 1px solid rgba(255,255,255,0.05);
    text-decoration: none;
    flex-wrap: wrap;
}
.mob-status,
.mob-status:visited,
.mob-status:hover { text-decoration: none !important; color: inherit !important; }
.mob-status-hint {
    display: block;
    width: 100%;
    font-size: 0.45rem;
    opacity: 0.5;
    margin-top: 0.2rem;
    letter-spacing: 0.03em;
}

/* Hamburger toggle */
.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: 1px solid var(--border);
    padding: 0.45rem 0.55rem;
    cursor: pointer;
    flex-shrink: 0;
}
.hamburger-bar {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--text-bright);
    transition: all 0.25s;
}
.nav-toggle[aria-expanded="true"] .hamburger-bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .hamburger-bar:nth-child(2) {
    opacity: 0;
}
.nav-toggle[aria-expanded="true"] .hamburger-bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* Mobile drawer */
.nav-mobile {
    display: none;
    position: fixed;
    top: var(--nav-h);
    left: 0;
    right: 0;
    background: rgba(5, 5, 14, 0.98);
    border-bottom: 1px solid var(--border);
    z-index: 7999;
    padding: 1.25rem 1.5rem 1.75rem;
    flex-direction: column;
    gap: 0;
}
.nav-mobile.open { display: flex; }

.mob-nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.mob-nav-list li a {
    font-family: var(--font-body);
    font-size: 1.06rem;
    color: var(--text);
    text-decoration: none;
    padding: 0.75rem 0;
    border-bottom: 1px solid rgba(120, 100, 255, 0.1);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    transition: color 0.15s;
    display: block;
}
.mob-nav-list li:last-child a { border-bottom: none; }
.mob-nav-list li a:hover { color: var(--cyan); }

.mob-book {
    display: block;
    font-family: var(--font-display);
    font-size: 0.99rem;
    color: var(--yellow) !important;
    padding: 0.75rem 0;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border-top: 1px solid rgba(255, 230, 0, 0.15);
    margin-top: 0.5rem;
}

/* Nav fallback message (admin only) */
.nav-fallback {
    font-size: 0.86rem;
    color: var(--pink);
    padding: 0.4rem 0.8rem;
    background: rgba(255, 45, 107, 0.1);
    border: 1px solid rgba(255, 45, 107, 0.3);
}
.nav-fallback a { color: var(--cyan); }

/* ── PAGE WRAP ── */
.page-wrap {
    padding-top: var(--nav-h);
    position: relative;
    z-index: 1;
}

/* ── SHARED SECTION CHROME ── */
section {
    padding: clamp(3rem, 7vw, 5.5rem) clamp(1rem, 5vw, 2.5rem);
    position: relative;
    z-index: 1;
}

.inner    { max-width: var(--max-w);   margin: 0 auto; }
.inner-sm { max-width: var(--max-w-sm); margin: 0 auto; }

.section-header {
    text-align: center;
    margin-bottom: clamp(2rem, 5vw, 3.5rem);
}

.eyebrow {
    display: block;
    font-size: clamp(0.66rem, 1.98vw, 0.76rem);
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--pink);
    margin-bottom: 0.7rem;
}

.section-title {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: clamp(1.5rem, 4.5vw, 3rem);
    color: #fff;
    text-transform: uppercase;
    line-height: 1.05;
}
.section-title em { color: var(--yellow); font-style: normal; }

.section-sub {
    font-size: clamp(0.86rem, 1.98vw, 0.95rem);
    line-height: 1.9;
    color: var(--text);
    max-width: 580px;
    margin: 1rem auto 0;
}

/* ── PAGE HERO (inner pages) ── */
.page-hero {
    padding: calc(var(--nav-h) + clamp(2.5rem, 6vw, 4rem))
             clamp(1rem, 5vw, 2.5rem)
             clamp(2.5rem, 5vw, 4rem);
    text-align: center;
    position: relative;
    overflow: hidden;
    z-index: 1;
    background: var(--bg-mid);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Tint over the hero photo. Light, because the starfield photo is already
   dark - 0.60 crushed it to near-black. Slightly stronger than the home hero
   so the small pink eyebrow text stays readable over the busier stars. */
.page-hero--img::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(5, 5, 14, 0.32);
    z-index: 0;
    pointer-events: none;
}
/* Lift the text above the tint. Not the star layer: it must stay
   position:absolute to cover the whole hero. */
.page-hero--img > *:not(.star-field) {
    position: relative;
    z-index: 1;
}

.page-hero::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--yellow), transparent);
    z-index: 2;
}
.page-hero .page-title {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: clamp(2rem, 7vw, 4.5rem);
    color: #fff;
    text-transform: uppercase;
    line-height: 0.95;
}
.page-hero .page-title em { color: var(--yellow); font-style: normal; }
.page-hero .page-sub {
    font-size: clamp(0.86rem, 1.98vw, 0.99rem);
    line-height: 1.9;
    color: var(--text);
    max-width: 580px;
    margin: 1.25rem auto 0;
}

/* ── STATS STRIP ── */
.stats-strip {
    background: var(--bg-panel);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: clamp(1.5rem, 4vw, 2.5rem) 1rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    position: relative;
    z-index: 1;
}
.stat {
    flex: 1 1 140px;
    max-width: 220px;
    text-align: center;
    padding: 1rem clamp(0.75rem, 2vw, 1.5rem);
    border-right: 1px solid rgba(120, 100, 255, 0.1);
}
.stat:last-child { border-right: none; }
.stat-num {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: clamp(1.6rem, 4vw, 2.4rem);
    color: var(--yellow);
    display: block;
    animation: statGlow 3s ease-in-out infinite;
}
.stat-lbl {
    font-size: clamp(0.66rem, 1.58vw, 0.76rem);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--text);
    margin-top: 0.25rem;
    display: block;
}

/* ── BUTTONS ── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(0.79rem, 1.98vw, 0.99rem);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    padding: clamp(0.7rem, 2vw, 0.95rem) clamp(1.2rem, 3vw, 1.9rem);
    text-decoration: none;
    cursor: pointer;
    border: none;
    clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);
    transition: all 0.2s;
    white-space: nowrap;
    position: relative;
    z-index: 1;
}
.btn-yellow {
    background: var(--yellow);
    color: var(--bg);
    box-shadow: 0 0 28px rgba(255, 230, 0, 0.35);
}
.btn-yellow:visited { color: var(--bg) !important; }
.btn-yellow:hover {
    background: #fff;
    box-shadow: 0 0 45px rgba(255, 255, 255, 0.45);
    transform: translateY(-2px);
    color: var(--bg);
}
.btn-cyan {
    background: var(--cyan);
    color: var(--bg);
    box-shadow: 0 0 28px rgba(0, 229, 255, 0.35);
}
.btn-cyan:visited { color: var(--bg); }
.btn-cyan:hover {
    background: #fff;
    box-shadow: 0 0 45px rgba(255, 255, 255, 0.45);
    transform: translateY(-2px);
    color: var(--bg);
}
.btn-outline {
    background: transparent;
    color: var(--cyan);
    border: 1px solid var(--cyan) !important;
    clip-path: none;
    box-shadow: 0 0 15px rgba(0, 229, 255, 0.12);
}
.btn-outline:visited { color: var(--cyan); }
.btn-outline:hover {
    background: rgba(0, 229, 255, 0.1);
    box-shadow: 0 0 30px rgba(0, 229, 255, 0.3);
    transform: translateY(-2px);
    color: var(--cyan);
}
.btn-pink {
    background: var(--pink);
    color: #fff;
    box-shadow: 0 0 20px rgba(255, 45, 107, 0.3);
}
.btn-pink:visited { color: #fff; }
.btn-pink:hover { background: #ff527a; color: #fff; transform: translateY(-2px); }
.btn-full  { width: 100%; clip-path: none; }

/* ── CARDS ── */
.card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    padding: clamp(1.25rem, 3vw, 1.75rem);
    transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s;
    position: relative;
    overflow: hidden;
}
.card:hover {
    border-color: var(--border-glow);
    transform: translateY(-4px);
    box-shadow: 0 16px 50px rgba(0, 0, 0, 0.6);
}
.card::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; }
.card-y::after  { background: var(--yellow); }
.card-p::after  { background: var(--pink); }
.card-c::after  { background: var(--cyan); }
.card-pu::after { background: var(--purple); }

/* ── FORM CONTROLS ── */
.form-group { margin-bottom: 1.1rem; }
.form-label {
    display: block;
    font-size: clamp(0.66rem, 1.58vw, 0.76rem);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--cyan);
    margin-bottom: 0.4rem;
}
.form-control {
    width: 100%;
    background: rgba(0, 229, 255, 0.04);
    border: 1px solid rgba(0, 229, 255, 0.2);
    color: #fff;
    padding: clamp(0.6rem, 2vw, 0.75rem) clamp(0.75rem, 2vw, 1rem);
    font-family: var(--font-body);
    font-size: clamp(0.86rem, 1.98vw, 0.95rem);
    outline: none;
    transition: all 0.2s;
    appearance: none;
    border-radius: 0;
    color-scheme: dark;
}
.form-control:focus {
    border-color: var(--cyan);
    box-shadow: 0 0 16px rgba(0, 229, 255, 0.15);
    background: rgba(0, 229, 255, 0.07);
    color: #fff;
}
.form-control option { background: var(--bg-panel); color: var(--text-bright); }
textarea.form-control { resize: vertical; min-height: 110px; }
select.form-control {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2300E5FF' stroke-width='2' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    padding-right: 2.5rem;
}

/* ── FOOTER ── */
.site-footer {
    background: #030308;
    border-top: 1px solid rgba(120, 100, 255, 0.1);
    padding: clamp(2.5rem, 5vw, 3.5rem) clamp(1rem, 5vw, 2.5rem) clamp(1.5rem, 3vw, 2rem);
    position: relative;
    z-index: 1;
}
.footer-inner { max-width: var(--max-w); margin: 0 auto; }
.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: clamp(1.5rem, 3vw, 2.5rem);
    margin-bottom: clamp(2rem, 4vw, 2.5rem);
    padding-bottom: clamp(2rem, 4vw, 2.5rem);
    border-bottom: 1px solid rgba(120, 100, 255, 0.08);
}
.footer-logo {
    display: block;
    margin-bottom: 1rem;
    text-decoration: none;
}

.footer-logo-img {
    height: 50px;
    width: auto;
    display: block;
}
.footer-desc {
    font-size: clamp(0.73rem, 1.72vw, 0.82rem);
    line-height: 1.95;
    color: rgba(168, 188, 216, 0.75);
}
.footer-col h4 {
    font-family: var(--font-display);
    font-size: clamp(0.66rem, 1.32vw, 0.73rem);
    color: var(--cyan);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    margin-bottom: 1rem;
}
.footer-col ul { list-style: none; }
.footer-col ul li { margin-bottom: 0.55rem; }
.footer-col ul li a {
    font-size: clamp(0.73rem, 1.58vw, 0.82rem);
    color: rgba(168, 188, 216, 0.7);
    text-decoration: none;
    transition: color 0.2s;
}
.footer-col ul li a:hover { color: var(--cyan); }
.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
}
.footer-copy {
    font-size: clamp(0.63rem, 1.32vw, 0.73rem);
    color: rgba(168, 188, 216, 0.18);
}
.footer-pixel {
    font-family: var(--font-pixel);
    font-size: clamp(0.32rem, 0.8vw, 0.4rem);
    color: var(--yellow);
    opacity: 0.55;
    cursor: pointer;
    user-select: none;
}
.footer-pixel:hover { opacity: 0.9; }

/* ── WE'RE OPEN! PLUGIN OVERRIDES (Noah Hearle / Design Extreme) ── */
/*
  Targets the HTML output of the "We're Open!" plugin (stylesheet="false").
  We provide all styling — the plugin's own stylesheet is suppressed.
  Classes used: .opening-hours, .day, .day-name, .hours,
                .today, .closed, .special, .open-now, .closed-now
                .opening-hours-conditional, .show, .hide
*/

/* Strip default plugin wrapper styles */
.openhours-wrap .opening-hours {
    width: 100% !important;
    border-collapse: collapse !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    font-family: var(--font-body) !important;
}

/* Suppress any plugin title output */
.openhours-wrap .opening-hours-title,
.openhours-wrap h3.widget-title { display: none !important; }

/* Each day row */
.openhours-wrap .opening-hours tr.day {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 0.5rem 0 !important;
    border-bottom: 1px solid rgba(255,255,255,0.04) !important;
    font-size: clamp(0.79rem, 1.85vw, 0.88rem) !important;
    background: transparent !important;
}
.openhours-wrap .opening-hours tr.day:last-child { border-bottom: none !important; }

/* Day name (th) */
.openhours-wrap .opening-hours .day-name {
    color: var(--text-bright) !important;
    font-weight: 500 !important;
    text-align: left !important;
    font-family: var(--font-body) !important;
}

/* Hours (td) */
.openhours-wrap .opening-hours .hours {
    color: var(--green) !important;
    font-weight: 500 !important;
    text-align: right !important;
    font-family: var(--font-body) !important;
}

/* Closed days */
.openhours-wrap .opening-hours .day.closed .hours {
    color: rgba(168,188,216,0.3) !important;
    font-weight: 400 !important;
}

/* Today highlight */
.openhours-wrap .opening-hours .day.today {
    background: rgba(255,230,0,0.05) !important;
    border-left: 2px solid var(--yellow) !important;
    padding-left: 0.6rem !important;
}
.openhours-wrap .opening-hours .day.today .day-name { color: var(--yellow) !important; }

/* Special / exception rows in the regular table */
.openhours-wrap .opening-hours .day.special {
    background: rgba(255,45,107,0.04) !important;
    border-left: 2px solid var(--pink) !important;
    padding-left: 0.6rem !important;
}
.openhours-wrap .opening-hours .day.special .day-name { color: var(--pink) !important; }
.openhours-wrap .opening-hours .day.special .hours    { color: var(--cyan) !important; }
.openhours-wrap .opening-hours .day.special.closed .hours { color: rgba(255,45,107,0.4) !important; }

/* Conditional shortcode wrappers — remove visual impact */
.openhours-wrap .opening-hours-conditional { margin: 0 !important; padding: 0 !important; }
.openhours-wrap .opening-hours-conditional.hide { display: none !important; }

/* Open/Closed status badge (our custom HTML inside [open_now]/[closed_now]) */
.oh-status {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-display);
    font-size: clamp(0.73rem, 1.58vw, 0.86rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border: 1px solid;
    padding: 0.4rem 0.9rem;
    margin-bottom: 1.25rem;
}
.oh-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.oh-status--open  {
    color: var(--green);
    border-color: rgba(57,255,20,0.35);
    background: rgba(57,255,20,0.04);
}
.oh-status--open .oh-status-dot {
    background: var(--green);
    box-shadow: 0 0 6px var(--green);
    animation: status-pulse 2s ease-in-out infinite;
}
.oh-status--closed {
    color: rgba(168,188,216,0.5);
    border-color: rgba(168,188,216,0.15);
    background: transparent;
}
.oh-status--closed .oh-status-dot { background: rgba(168,188,216,0.3); }

/* ── THE EVENTS CALENDAR PLUGIN OVERRIDES ── */
.tribe-wrap .tribe-events-header,
.tribe-wrap .tribe-common-header,
.tribe-wrap .tribe-events-c-search,
.tribe-wrap .tribe-common-c-btn,
.tribe-wrap .tribe-event-featured-image { display: none !important; }
.tribe-wrap .tribe-events { background: transparent !important; font-family: var(--font-body) !important; color: var(--text) !important; }
.tribe-wrap .tribe-events-calendar-list__event-row { background: var(--bg-card) !important; border: 1px solid var(--border) !important; border-top: 2px solid var(--cyan) !important; margin-bottom: 1.25rem !important; padding: clamp(1.25rem,3vw,1.75rem) !important; transition: border-color .2s, transform .2s !important; display: block !important; }
.tribe-wrap .tribe-events-calendar-list__event-row:hover { border-color: var(--border-glow) !important; transform: translateY(-2px) !important; }
.tribe-wrap .tribe-events-calendar-list__event-row--featured { border-top-color: var(--yellow) !important; }
.tribe-wrap .tribe-events-calendar-list__event-title a,
.tribe-wrap h2.tribe-events-list-event-title a { font-family: var(--font-display) !important; font-weight: 700 !important; font-size: clamp(0.85rem,2.5vw,1.05rem) !important; color: #fff !important; text-decoration: none !important; text-transform: uppercase !important; }
.tribe-wrap .tribe-events-calendar-list__event-datetime,
.tribe-wrap abbr.tribe-events-abbr { font-family: var(--font-display) !important; font-size: clamp(0.73rem,1.72vw,0.86rem) !important; color: var(--cyan) !important; letter-spacing: 0.08em !important; }
.tribe-wrap .tribe-events-calendar-list__event-description p { font-size: clamp(0.79rem,1.85vw,0.87rem) !important; line-height: 1.85 !important; color: var(--text) !important; font-family: var(--font-body) !important; }
.tribe-wrap .tribe-events-calendar-list__event-cost { font-family: var(--font-display) !important; font-size: clamp(0.79rem,1.85vw,0.95rem) !important; color: var(--yellow) !important; font-weight: 700 !important; }
.tribe-wrap a.tribe-events-read-more { display: inline-block !important; font-family: var(--font-display) !important; font-size: clamp(0.66rem,1.58vw,0.76rem) !important; color: var(--cyan) !important; text-decoration: none !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; border: 1px solid rgba(0,229,255,0.3) !important; padding: 0.3rem 0.7rem !important; margin-top: 0.75rem !important; transition: all .2s !important; }
.tribe-wrap a.tribe-events-read-more:hover { background: rgba(0,229,255,0.1) !important; }
.tribe-wrap .tribe-events-c-nav__list { display: flex !important; gap: 1rem !important; margin-top: 1.5rem !important; list-style: none !important; padding: 0 !important; flex-wrap: wrap !important; }
.tribe-wrap .tribe-events-c-nav__list-item a { font-family: var(--font-display) !important; font-size: clamp(0.73rem,1.58vw,0.82rem) !important; color: var(--cyan) !important; border: 1px solid rgba(0,229,255,0.3) !important; padding: 0.45rem 0.9rem !important; text-decoration: none !important; text-transform: uppercase !important; transition: all .2s !important; display: inline-block !important; }
.tribe-wrap .tribe-events-c-nav__list-item a:hover { background: rgba(0,229,255,0.1) !important; }

/* ── ANIMATIONS ── */
@keyframes fadeUp  { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn  { from { opacity: 0; }                              to { opacity: 1; } }
@keyframes statGlow {
    0%, 100% { text-shadow: 0 0 10px var(--yellow), 0 0 28px rgba(255,230,0,0.3); }
    50%      { text-shadow: 0 0 22px var(--yellow), 0 0 55px rgba(255,230,0,0.55); }
}

.anim-1 { animation: fadeUp 0.65s 0.10s both; }
.anim-2 { animation: fadeUp 0.65s 0.25s both; }
.anim-3 { animation: fadeUp 0.65s 0.40s both; }
.anim-4 { animation: fadeUp 0.65s 0.55s both; }
.anim-5 { animation: fadeUp 0.65s 0.70s both; }

/* ══════════════════════════════════════════
   RESPONSIVE BREAKPOINTS
   ══════════════════════════════════════════ */

/* Large tablets */
@media (max-width: 1024px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr 1fr;
    }
    .footer-grid .footer-brand {
        grid-column: 1 / -1;
    }
}

/* Tablets & large phones — hamburger kicks in */
@media (max-width: 768px) {
    :root { --nav-h: 58px; }

    .nav-menu-wrap     { display: none; }
    .nav-toggle        { display: flex; }
    .nav-status-mobile {
        display: flex;
        align-items: center;
        gap: 0.4rem;
        flex-direction: row;
        padding: 0.3rem 0.6rem;
        border: 1px solid;
    }
    .nav-status-mobile.nav-status--open  { border-color: rgba(57,255,20,0.3);   color: var(--green); }
    .nav-status-mobile.nav-status--closed { border-color: rgba(168,188,216,0.15); color: rgba(168,188,216,0.6); }
    .mob-status { display: none; } /* nav bar pill makes this redundant on mobile */

    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }
    .footer-grid .footer-brand {
        grid-column: 1 / -1;
    }

    .stat {
        flex: 1 1 40%;
        border-right: none;
        border-bottom: 1px solid rgba(120, 100, 255, 0.1);
    }
    .stat:nth-child(odd) {
        border-right: 1px solid rgba(120, 100, 255, 0.1);
    }
}

/* Mobile phones */
@media (max-width: 480px) {
    :root { --nav-h: 54px; }

    .footer-grid {
        grid-template-columns: 1fr;
    }
    .footer-grid .footer-brand {
        grid-column: auto;
    }
    .footer-bottom {
        flex-direction: column;
        text-align: center;
    }
    .stat {
        flex: 1 1 100%;
        border-right: none;
    }
    .btn {
        font-size: 0.82rem;
        padding: 0.75rem 1.25rem;
    }
}

/* ── BACK TO TOP ── */
#back-to-top {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 9999;
    background: #12122E;
    border: 1px solid var(--cyan);
    box-shadow: 0 0 12px rgba(0, 229, 255, 0.25), inset 0 0 12px rgba(0, 229, 255, 0.04);
    color: var(--cyan);
    font-family: var(--font-display);
    font-size: 0.55rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    padding: 0.65rem 0.85rem;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 0.3s, visibility 0.3s, transform 0.3s, box-shadow 0.2s, background 0.2s;
}
#back-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
#back-to-top:hover {
    background: #1a1a40;
    box-shadow: 0 0 20px rgba(0, 229, 255, 0.45), inset 0 0 12px rgba(0, 229, 255, 0.08);
}

/* #tw-easter-egg styles injected by global.js at runtime */