/* ═══════════════════════════════════════════════════════
   Nashville Live Weather — styles.css
   Deep Ocean Teal color scheme
   ═══════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

/* ── SR-ONLY (screen reader only, SEO visible) ────────── */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ═══════════════════════════════════════════════════════
   WEATHER-REACTIVE ACCENT STRIP
   Subtle top-of-page accent + hero card glow that
   shifts color based on current weather conditions.
   ═══════════════════════════════════════════════════════ */
.wx-bg {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 1000;
  pointer-events: none;
  transition: background 1.5s ease;
}

/* Default / night */
.wx-bg                     { background: linear-gradient(90deg, #0ca6a6, #1a8a8a); }
/* Warm */
.wx-bg[data-wx="warm"]     { background: linear-gradient(90deg, #f59e0b, #ef7d1a, #f59e0b); }
/* Hot */
.wx-bg[data-wx="hot"]      { background: linear-gradient(90deg, #ef4444, #f97316, #ef4444); }
/* Cool */
.wx-bg[data-wx="cool"]     { background: linear-gradient(90deg, #06b6d4, #0891b2, #06b6d4); }
/* Cold */
.wx-bg[data-wx="cold"]     { background: linear-gradient(90deg, #3b82f6, #6366f1, #3b82f6); }
/* Icy */
.wx-bg[data-wx="icy"]      { background: linear-gradient(90deg, #a5b4fc, #c4b5fd, #a5b4fc); }
/* Rain */
.wx-bg[data-wx="rain"]     { background: linear-gradient(90deg, #64748b, #3b82f6, #64748b); }
/* Storm */
.wx-bg[data-wx="storm"]    { background: linear-gradient(90deg, #fbbf24, #dc2626, #fbbf24); box-shadow: 0 0 12px rgba(220,38,38,0.4); }
/* Fog */
.wx-bg[data-wx="fog"]      { background: linear-gradient(90deg, #94a3b8, #64748b, #94a3b8); }
/* Overcast */
.wx-bg[data-wx="overcast"] { background: linear-gradient(90deg, #64748b, #475569, #64748b); }

/* Weather-reactive hero card glow */
.wx-hero-glow { transition: box-shadow 1.5s ease, border-color 1.5s ease; }

/* Light mode — subtler accent */
html:not(.dark) .wx-bg { height: 2px; opacity: 0.6; }

/* ── GLASS CARD ───────────────────────────────────────── */
.glass {
  background: rgba(19, 62, 72, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 0.625rem;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.glass:hover { border-color: rgba(255, 255, 255, 0.1); }

/* ── HEADER ───────────────────────────────────────────── */
.header-base {
  background: rgba(8, 32, 38, 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

/* Condensed weather strip in header */
.header-wx {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  color: #94a3b8;
  white-space: nowrap;
  overflow: hidden;
  transition: opacity 0.3s ease, max-width 0.3s ease;
}
.header-wx .hw-temp { color: #e0f2fe; font-size: 0.875rem; }
.header-wx .hw-sep { width: 1px; height: 14px; background: rgba(255,255,255,0.1); flex-shrink: 0; }
.header-wx .hw-item { display: flex; align-items: center; gap: 0.25rem; }
@media (max-width: 640px) { .header-wx .hw-hide-mobile { display: none; } }

/* ── LIGHT MODE ───────────────────────────────────────── */
html:not(.dark) body       { background: #e8f0f2; color: #1e293b; }
html:not(.dark) .header-base { background: rgba(232,240,242,0.92); border-bottom-color: rgba(0,0,0,0.06); }
html:not(.dark) .glass     { background: rgba(255,255,255,0.72); border-color: rgba(0,0,0,0.06); }
html:not(.dark) .tab       { color: #64748b; }
html:not(.dark) .tab.active{ color: #0d6e7e; border-color: #0d6e7e; }
html:not(.dark) .rmode.active { background: #0d6e7e; color: #fff; border-color: #0d6e7e; }
html:not(.dark) .sk        { background: linear-gradient(90deg, rgba(0,0,0,0.04) 25%, rgba(0,0,0,0.08) 50%, rgba(0,0,0,0.04) 75%); background-size: 200% 100%; }
html:not(.dark) .hdr-btn   { color: #64748b; }
html:not(.dark) .hdr-btn:hover { background: rgba(0,0,0,0.04); color: #0d6e7e; }
html:not(.dark) .ctrl-btn  { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.08); color: #475569; }
html:not(.dark) .ad-placeholder { background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.08); color: #94a3b8; }
html:not(.dark) .donate-btn { border-color: rgba(0,0,0,0.06); }
html:not(.dark) .tip-bubble { background: #ffffff; color: #1e293b; border-color: rgba(0,0,0,0.08); box-shadow: 0 8px 28px rgba(0,0,0,0.12); }
html:not(.dark) .tip-bubble::after { border-bottom-color: #ffffff; }
html:not(.dark) .tip-ind { background: rgba(0,0,0,0.06); color: #475569; }
html:not(.dark) .header-wx { color: #475569; }
html:not(.dark) .header-wx .hw-temp { color: #1e293b; }
html:not(.dark) .header-wx .hw-sep { background: rgba(0,0,0,0.1); }

/* ── SKELETON ─────────────────────────────────────────── */
.sk {
  background: linear-gradient(90deg, rgba(255,255,255,0.02) 25%, rgba(255,255,255,0.06) 50%, rgba(255,255,255,0.02) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
  border-radius: 0.25rem;
}
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ── TABS ─────────────────────────────────────────────── */
.tab-bar { display: flex; gap: 0.125rem; overflow-x: auto; border-bottom: 1px solid rgba(255,255,255,0.06); padding-bottom: 1px; }
.tab-bar::-webkit-scrollbar { display: none; }
.tab-bar { -ms-overflow-style: none; scrollbar-width: none; }
.tab { flex-shrink: 0; padding: 0.5rem 0.875rem; font-size: 0.75rem; font-weight: 600; font-family: 'Outfit', system-ui, sans-serif; color: rgba(148,163,184,0.7); border-bottom: 2px solid transparent; background: none; cursor: pointer; transition: color 0.15s, border-color 0.15s; }
.tab:hover { color: #cbd5e1; }
.tab.active { color: #67e8f9; border-bottom-color: #67e8f9; }

/* ── RADAR MODE BUTTONS ───────────────────────────────── */
.rmode { flex-shrink: 0; padding: 0.3rem 0.75rem; font-size: 0.6875rem; font-weight: 600; font-family: 'Outfit', system-ui, sans-serif; border-radius: 999px; background: rgba(255,255,255,0.04); color: #94a3b8; border: 1px solid rgba(255,255,255,0.06); cursor: pointer; transition: all 0.15s; }
.rmode:hover { background: rgba(255,255,255,0.08); }
.rmode.active { background: #0ca6a6; color: #021a1e; border-color: #0ca6a6; }

/* ── HEADER BUTTON ────────────────────────────────────── */
.hdr-btn { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 0.5rem; background: transparent; border: none; color: #64748b; cursor: pointer; transition: background 0.15s, color 0.15s; }
.hdr-btn:hover { background: rgba(255,255,255,0.06); color: #67e8f9; }

/* ── PLAYBACK CONTROLS ────────────────────────────────── */
.ctrl-btn { display: flex; align-items: center; justify-content: center; height: 34px; min-width: 34px; padding: 0 0.5rem; border-radius: 0.5rem; border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.04); color: #cbd5e1; font-size: 0.8125rem; font-family: 'Outfit', system-ui, sans-serif; font-weight: 600; cursor: pointer; transition: all 0.15s; }
.ctrl-btn:hover { background: rgba(12,166,166,0.12); border-color: rgba(12,166,166,0.3); }

/* ── AD PLACEHOLDERS ──────────────────────────────────── */
.ad-placeholder { background: rgba(255,255,255,0.015); border: 1px dashed rgba(255,255,255,0.08); border-radius: 0.625rem; padding: 1rem; text-align: center; font-size: 0.6875rem; color: rgba(148,163,184,0.4); font-family: 'IBM Plex Mono', monospace; }

/* ── DONATE BUTTONS ───────────────────────────────────── */
.donate-btn { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.375rem 0.75rem; border-radius: 0.5rem; font-size: 0.6875rem; font-weight: 600; font-family: 'Outfit', system-ui, sans-serif; border: 1px solid rgba(255,255,255,0.06); text-decoration: none; transition: all 0.15s; }
.donate-btn:hover { filter: brightness(1.2); }

/* ── ALERT SEVERITY ───────────────────────────────────── */
.alert-extreme  { border-left: 3px solid #dc2626; background: rgba(220,38,38,0.1); }
.alert-severe   { border-left: 3px solid #f97316; background: rgba(249,115,22,0.08); }
.alert-moderate { border-left: 3px solid #eab308; background: rgba(234,179,8,0.08); }
.alert-minor    { border-left: 3px solid #67e8f9; background: rgba(103,232,249,0.06); }
.alert-unknown  { border-left: 3px solid #64748b; background: rgba(100,116,139,0.06); }

/* ── SCROLLBAR ────────────────────────────────────────── */
.scrollbar-thin::-webkit-scrollbar { height: 4px; }
.scrollbar-thin::-webkit-scrollbar-track { background: transparent; }
.scrollbar-thin::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 999px; }

/* ── HOURLY TABLE ─────────────────────────────────────── */
#hourlyBody tr { border-bottom: 1px solid rgba(255,255,255,0.03); transition: background 0.12s; }
#hourlyBody tr:hover { background: rgba(12,166,166,0.06); }

/* ── DAILY ROWS ───────────────────────────────────────── */
.daily-row { transition: transform 0.2s, box-shadow 0.2s, background 0.15s; }
.daily-row:hover { background: rgba(12,166,166,0.06); box-shadow: 0 2px 12px rgba(12,166,166,0.04); }

/* ── NEWS ─────────────────────────────────────────────── */
.news-link { color: #67e8f9; text-decoration: none; transition: color 0.12s; }
.news-link:hover { color: #a5f3fc; text-decoration: underline; }

/* ── FADE IN ──────────────────────────────────────────── */
.fin { animation: fadeIn 0.35s ease-out; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

/* ═══════════════════════════════════════════════════════
   STAT-TIP — hover/focus tooltip
   ★ FIX: z-index on hover raises card above siblings
   ═══════════════════════════════════════════════════════ */
.stat-tip { position: relative; cursor: help; outline: none; }
.stat-tip:hover, .stat-tip:focus-visible {
  border-color: rgba(12,166,166,0.4);
  box-shadow: 0 0 0 1px rgba(12,166,166,0.15), 0 8px 24px rgba(12,166,166,0.1);
  transform: translateY(-1px);
  z-index: 50;
}
.tip-ind { display: inline-flex; align-items: center; justify-content: center; width: 13px; height: 13px; border-radius: 50%; background: rgba(12,166,166,0.15); color: #0ca6a6; font-size: 9px; font-weight: 700; font-family: 'Outfit', system-ui, sans-serif; opacity: 0.7; transition: opacity 0.15s, background 0.15s; }
.stat-tip:hover .tip-ind, .stat-tip:focus-visible .tip-ind { opacity: 1; background: rgba(12,166,166,0.3); }
.tip-bubble { position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(-4px); width: max-content; max-width: 260px; padding: 0.625rem 0.75rem; background: #082026; color: #e0f2fe; border: 1px solid rgba(12,166,166,0.3); border-radius: 0.5rem; font-size: 0.6875rem; line-height: 1.45; font-weight: 400; font-family: 'IBM Plex Sans', system-ui, sans-serif; letter-spacing: 0; text-transform: none; box-shadow: 0 12px 32px rgba(0,0,0,0.5); opacity: 0; pointer-events: none; transition: opacity 0.18s ease, transform 0.18s ease; z-index: 100; white-space: normal; }
.tip-bubble::after { content: ""; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-bottom-color: #082026; }
.stat-tip:hover .tip-bubble, .stat-tip:focus-visible .tip-bubble { opacity: 1; transform: translateX(-50%) translateY(0); }
@media (max-width: 640px) { .tip-bubble { max-width: 200px; font-size: 0.625rem; } }

/* ── LEAFLET OVERRIDES ────────────────────────────────── */
.dark .leaflet-tile-pane { filter: brightness(0.7) contrast(1.1) saturate(0.25) hue-rotate(10deg); }
html:not(.dark) .leaflet-tile-pane { filter: none; }
.leaflet-overlay-pane { filter: brightness(1) !important; }
.dark .leaflet-overlay-pane img { filter: brightness(1.15) saturate(1.3); }
.dark .leaflet-control-zoom a { background: #0d3640; color: #94a3b8; border-color: rgba(255,255,255,0.08); }
.dark .leaflet-control-attribution { background: rgba(8,32,38,0.8); color: #475569; }
.dark .leaflet-control-attribution a { color: #64748b; }

/* ── RESPONSIVE ───────────────────────────────────────── */
@media (max-width: 640px) {
  .tab { padding: 0.5rem 0.6rem; font-size: 0.6875rem; }
  #radarMap { height: 55vh !important; }
}