/* ============================================
   WaitWise Shared Theme System
   Extracted to eliminate duplication across pages.
   DO NOT MODIFY STYLES — only extracted for reuse.
   ============================================ */

/* ── Theme Variables ────────────────────────────────────────── */
:root {
    --bg-primary:     #18181b;
    --bg-secondary:   #27272a;
    --bg-tertiary:    #3f3f46;
    --text-primary:   #ffffff;
    --text-secondary: #a1a1aa;
    --accent:         #3b82f6;
    --border:         #3f3f46;
}

/* Light Mode */
[data-theme="light"] {
    --bg-primary:     #f4f4f5;
    --bg-secondary:   #ffffff;
    --bg-tertiary:    #e8e8ea;
    --text-primary:   #111113;
    --text-secondary: #52525b;
    --accent:         #2563eb;
    --border:         #d1d1d6;
}

/* Dark Mode */
[data-theme="dark"] {
    --bg-primary:     #09090b;
    --bg-secondary:   #111113;
    --bg-tertiary:    #1c1c1f;
    --text-primary:   #fafafa;
    --text-secondary: #71717a;
    --accent:         #3b82f6;
    --border:         #27272a;
}

/* ── Nav & Footer follow theme ───────────────────────────────── */
nav    { background-color: var(--bg-secondary) !important; border-color: var(--border) !important; }
footer { background-color: var(--bg-secondary) !important; border-color: var(--border) !important; }
[data-theme="light"] nav    { background-color: var(--bg-secondary) !important; box-shadow: 0 1px 0 var(--border); }
[data-theme="dark"]  nav    { background-color: #0d0d0f !important; }

/* Reserve vertical space for the dynamically injected nav to prevent "big flash" / layout shift on navigation */
#site-nav {
    min-height: 48px; /* matches the nav's h-12 */
}
@media (min-width: 768px) {
    #site-nav {
        min-height: 64px; /* matches the nav's h-16 */
    }
}

/* ── Light: remap hardcoded zinc ────────────────────────────── */
[data-theme="light"] body                   { background-color: var(--bg-primary); color: var(--text-primary); }
[data-theme="light"] .bg-zinc-950,
[data-theme="light"] .bg-zinc-900           { background-color: var(--bg-secondary) !important; }
[data-theme="light"] .bg-zinc-800           { background-color: var(--bg-tertiary)  !important; }
[data-theme="light"] .border-zinc-800,
[data-theme="light"] .border-zinc-700       { border-color: var(--border) !important; }
[data-theme="light"] .text-zinc-600,
[data-theme="light"] .text-zinc-500,
[data-theme="light"] .text-zinc-400         { color: var(--text-secondary) !important; }
[data-theme="light"] .text-zinc-300,
[data-theme="light"] .text-zinc-200         { color: var(--text-primary) !important; }
/* Scope text-white override to nav/footer only — hero must stay white */
[data-theme="light"] nav    .text-white,
[data-theme="light"] footer .text-white     { color: #000000 !important; }

/* Darker footer text in light mode for better readability on bright screens */
[data-theme="light"] footer .text-zinc-400,
[data-theme="light"] footer .text-zinc-500,
[data-theme="light"] footer .text-zinc-600 {
    color: #222222 !important;
}

[data-theme="light"] footer a:hover {
    color: #000000 !important;
}
[data-theme="light"] input[type="text"]     { color: var(--text-primary); background-color: var(--bg-secondary); }
[data-theme="light"] select                 { color: var(--text-primary); background-color: var(--bg-tertiary); }
[data-theme="light"] input::placeholder     { color: var(--text-secondary); }
[data-theme="light"] .park-card             { border-color: var(--border) !important; box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
[data-theme="light"] .fav-btn               { background-color: #fef3c7 !important; color: #92400e !important; }

@media (hover: hover) {
    [data-theme="light"] .hover\:bg-zinc-700:hover,
    [data-theme="light"] .hover\:bg-zinc-800:hover { background-color: var(--bg-tertiary) !important; }
    [data-theme="light"] nav .hover\:text-white:hover  { color: #000000 !important; }
    [data-theme="light"] .hover\:text-white:hover  { color: var(--text-primary) !important; }
    [data-theme="light"] .hover\:text-yellow-300:hover { color: #fde047 !important; }
    [data-theme="light"] .hover\:border-zinc-700:hover { border-color: var(--border) !important; }
    [data-theme="light"] .fav-btn:hover { background-color: #fde68a !important; }
}

/* Fix dark tap/active state on mobile menu button in light mode */
[data-theme="light"] .nav-mobile-trigger button:active,
[data-theme="light"] .nav-mobile-trigger button:hover {
    background-color: var(--bg-tertiary) !important;
    color: #000000 !important;
}

/* Data freshness pill - light mode readability */
[data-theme="light"] #data-freshness {
    background-color: #dcfce7 !important;
    color: #166534 !important;
}
[data-theme="light"] #data-freshness.bg-amber-900\/40 {
    background-color: #fef3c7 !important;
    color: #854d0e !important;
}

/* === STAR STYLING (Theme-independent) === */
button[data-park-id] {
    color: #52525b;
}
/* Lighter grey in light mode — less prominent when unselected */
[data-theme="light"] button[data-park-id] {
    color: #d4d4d8 !important;
}
button[data-park-id].text-yellow-400 {
    color: #facc15 !important;
}
@media (hover: hover) {
    button[data-park-id]:hover {
        color: #fde047 !important;
    }
    button[data-park-id].text-yellow-400:hover {
        color: #facc15 !important;
    }
}

/* Ensure active favorite stars stay properly yellow in light mode on index page */
[data-theme="light"] button[data-park-id].text-yellow-400,
[data-theme="light"] button[onclick*="toggleFavorite"].text-yellow-400 {
    color: #facc15 !important;
}
@media (hover: hover) {
    [data-theme="light"] button[data-park-id].text-yellow-400:hover,
    [data-theme="light"] button[onclick*="toggleFavorite"].text-yellow-400:hover {
        color: #facc15 !important;
    }
}

/* ── Dark: remap hardcoded zinc ─────────────────────────────── */
[data-theme="dark"] .bg-zinc-950,
[data-theme="dark"] .bg-zinc-900  { background-color: var(--bg-secondary) !important; }
[data-theme="dark"] .bg-zinc-800  { background-color: var(--bg-tertiary)  !important; }
[data-theme="dark"] .border-zinc-800,
[data-theme="dark"] .border-zinc-700 { border-color: var(--border) !important; }
[data-theme="dark"] .text-zinc-500,
[data-theme="dark"] .text-zinc-400  { color: var(--text-secondary) !important; }

/* Additional dark remaps present in some pages */
[data-theme="dark"] .bg-zinc-800  { background-color: var(--bg-tertiary)  !important; }
[data-theme="dark"] .border-zinc-800,
[data-theme="dark"] .border-zinc-700 { border-color: var(--border) !important; }

/* ── Hero: replace pitch-black with brand navy in light mode ── */
[data-theme="light"] .hero-section {
    background: linear-gradient(160deg, #0d2137 0%, #1b3a5c 55%, #112233 100%) !important;
}
[data-theme="light"] .hero-section .bg-gradient-to-br {
    background: linear-gradient(to bottom right, rgba(59,130,246,0.15), transparent, rgba(34,197,94,0.08)) !important;
}

/* Hero stats badge - lighter / softer in light mode */
[data-theme="light"] .hero-section .bg-zinc-900 {
    background-color: #f8fafc !important;   /* very light slate */
    border-color: #e2e8f0 !important;
}
[data-theme="light"] .hero-section .border-zinc-700 {
    border-color: #e2e8f0 !important;
}

/* Make the "LIVE • XXX PARKS" text match the "OPEN NOW" green in light mode */
[data-theme="light"] .hero-section .text-emerald-400 {
    color: #059669 !important;
}

/* Match the dot color too for consistency in light mode */
[data-theme="light"] .hero-section .bg-emerald-400 {
    background-color: #059669 !important;
}

/* Social icons: white in dark, black in light */
.social-icon-black { display: none; }
.social-icon-white { display: inline; }
[data-theme="light"] .social-icon-black { display: inline; }
[data-theme="light"] .social-icon-white { display: none; }

.social-icon { filter: none; }
[data-theme="light"] .social-icon { filter: brightness(0); }
[data-theme="dark"] .social-icon { filter: none; }

/* Favourite star — explicit CSS so both themes behave identically */
#favorite-btn { color: #52525b; }
#favorite-btn.fav-active { color: #facc15 !important; }
@media (hover: hover) {
    #favorite-btn:hover { color: #fde047 !important; }
    #favorite-btn.fav-active:hover { color: #fde047 !important; }
}

/* Favorite stars: lighter in light mode when NOT favorited.
   We explicitly exclude .text-yellow-400 (used on index page) and .fav-active (used on park.html)
   so that active stars stay yellow. */
[data-theme="light"] button[onclick*="toggleFavorite"]:not(.text-yellow-400):not(.fav-active) {
    color: #d4d4d8 !important;
}

@media (hover: hover) {
    [data-theme="light"] button[onclick*="toggleFavorite"]:not(.text-yellow-400):not(.fav-active):hover {
        color: #fde047 !important;   /* nice yellow on hover for unselected */
    }
}

/* Additional light mode rules from support/privacy */
[data-theme="light"] .bg-zinc-900.border-zinc-700 { background-color: #1c1c1f !important; border-color: #3f3f46 !important; }

/* ============================================
   ACCESSIBILITY CONTRAST FIXES (PageSpeed Insights)
   Ensure OPEN NOW / CLOSED status text meets 4.5:1+ in park cards
   (dark zinc-900 cards + emerald/red text was failing)
   ============================================ */
.park-card .text-emerald-400 {
    color: #22c55e !important; /* brighter emerald-500 for guaranteed contrast on dark cards */
}
.park-card .text-red-400 {
    color: #f87171 !important; /* brighter red-400 for closed status */
}

/* Theme-aware high-contrast status colors inside park cards.
   Light mode: use rich, saturated emerald/red (not too dark) so it still feels vibrant and "open".
   Dark mode: very bright versions for contrast on dark cards. */
[data-theme="light"] .park-card .text-emerald-400 {
    color: #059669 !important; /* fresher emerald-600 — better vibrancy while maintaining contrast on light cards */
}
[data-theme="light"] .park-card .text-red-400 {
    color: #b91c1c !important; /* strong but not overly dark red */
}

[data-theme="dark"] .park-card .text-emerald-400 {
    color: #4ade80 !important;
}
[data-theme="dark"] .park-card .text-red-400 {
    color: #fb7185 !important;
}

/* Matching high-contrast dots for the status indicators in cards */
[data-theme="light"] .park-card .bg-emerald-400 {
    background-color: #059669 !important;
}
[data-theme="light"] .park-card .bg-red-400 {
    background-color: #b91c1c !important;
}

[data-theme="dark"] .park-card .bg-emerald-400 {
    background-color: #4ade80 !important;
}
[data-theme="dark"] .park-card .bg-red-400 {
    background-color: #fb7185 !important;
}

/* Also boost contrast for the detail view status badges (subtle tint bg + colored text) */
.text-emerald-400.bg-emerald-500\/10,
.bg-emerald-500\/10.text-emerald-400 {
    color: #4ade80 !important;
}
.text-red-400.bg-red-500\/10,
.bg-red-500\/10.text-red-400 {
    color: #fb7185 !important;
}

/* Boost secondary gray text inside park cards (the main source of remaining
   contrast failures). "country • continent", "Tap for details →", and
   "Checking status..." were too low on dark zinc cards. */
.park-card .text-zinc-400,
.park-card .text-zinc-500 {
    color: #a1a1aa !important;   /* noticeably better contrast than base --text-secondary while still looking muted */
}

[data-theme="dark"] .park-card .text-zinc-400,
[data-theme="dark"] .park-card .text-zinc-500 {
    color: #a3a3a3 !important;   /* even safer on the darkest card backgrounds */
}

/* Also help small labels in the park detail view (LIVE DATA, MIN, timestamps, etc.) */
#park-detail-view .text-zinc-500,
#park-detail-view .text-\[10px\] {
    color: #a1a1aa !important;
}

/* Map page secondary elements (stats pill, search subtitles, inactive continent buttons) */
#map-stats,
.sr-sub,
.c-btn:not(.active) {
    color: #a1a1aa !important;
}

/* Small header badges and filter labels that sometimes get flagged */
.bg-zinc-800.text-zinc-400,
label.text-xs.font-semibold.text-zinc-400 {
    color: #a1a1aa !important;
}

/* Prose content colours for privacy page */
.prose-content h2 { color: var(--text-primary); }
.prose-content p  { color: var(--text-primary); }

/* ============================================
   AUTO-HIDE NAV ON SCROLL
   ============================================ */

nav {
    transition: transform 0.25s ease-in-out;
    will-change: transform;
}

nav.nav-hidden {
    transform: translateY(-100%);
    /* Keep pointer-events enabled so mobile menu can still be opened */
}

/* Always show nav when at the very top */
nav.nav-hidden[data-at-top="true"] {
    transform: none;
    pointer-events: auto;
}

/* ============================================
   MOBILE NAV MENU (responsive header)
   ============================================ */

@media (max-width: 639px) {
    /* Hide text buttons and settings icon on small screens */
    .nav-desktop-only {
        display: none !important;
    }

    /* Show mobile menu trigger */
    .nav-mobile-trigger {
        display: flex !important;
    }
}

/* Desktop: hide mobile trigger */
@media (min-width: 640px) {
    .nav-mobile-trigger {
        display: none !important;
    }
}

/* Mobile dropdown menu styling */
.nav-mobile-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    min-width: 160px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
    z-index: 999999 !important;
    overflow: hidden;
}

/* Ensure links (Home/Map/Compare) inside the mobile menu have proper text color
   (the buttons already declare it). This applies whether the menu is in its
   original location or temporarily moved for map stacking. */
.nav-mobile-menu a {
    color: var(--text-primary);
    text-decoration: none;
}

/* Map page header dropdown is positioned via JS in toggleMobileNavMenu (fixed + high z)
   to escape the nav's stacking context and sit above Leaflet. */

.nav-mobile-menu button {
    width: 100%;
    padding: 12px 16px;
    text-align: left;
    font-size: 14px;
    color: var(--text-primary);
    background: transparent;
    border: none;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.nav-mobile-menu button:hover {
    background: var(--bg-tertiary);
}

.nav-mobile-menu button + button {
    border-top: 1px solid var(--border);
}