@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap');
@import "tailwindcss";

@theme {
  --color-linen: #F6F1E8;
  --color-surface: #EDE7DA;
  --color-surface-2: #E4DBCB;
  --color-bg-card: #FFFDF8;
  --color-charcoal: #181510;
  --color-ink-soft: #2C271E;
  --color-warm-grey: #897F70;
  --color-warm-grey-2: #B4AA99;
  --color-line: #E3DACB;
  --color-line-soft: #EDE6D9;
  --color-terracotta: #A8884C;
  --color-terracotta-press: #856526;
  --color-terracotta-hover: #92702F;
  --color-terracotta-tint: #F1E8D4;
  --color-terracotta-tint-2: #E3D3AC;
  --color-sage: #6F8472;
  --color-sage-press: #54675A;
  --color-sage-tint: #E4E9E1;
  --color-gold: #B08C3C;
  --color-plum: #74566A;
  --color-clay: #C99A82;
  --color-clay-tint: #F1E7DD;
  --color-clay-deep: #9A6A52;
  --color-fg: #181510;
  --color-fg-2: #38332A;
  --color-fg-muted: #897F70;
  --color-border-strong: #D6CBB7;
  --color-on-charcoal: #F6F1E8;
  --color-success: #5C7A5E;
  --color-danger: #A6503B;
  --color-nightlife-tint: #ECE0E6;

  --font-sans: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  --shadow-xs: 0 1px 2px rgba(24, 21, 16, 0.05);
  --shadow-sm: 0 1px 2px rgba(24, 21, 16, 0.05), 0 2px 6px rgba(24, 21, 16, 0.05);
  --shadow-md: 0 2px 4px rgba(24, 21, 16, 0.04), 0 12px 28px rgba(24, 21, 16, 0.10);
  --shadow-lg: 0 4px 8px rgba(24, 21, 16, 0.06), 0 24px 56px rgba(24, 21, 16, 0.14);
  --shadow-focus: 0 0 0 3px rgba(168, 136, 76, 0.34);
}

/* Base styles */
html {
  /* Reserve the scrollbar gutter so the fixed nav and in-flow content
     share the same available width (keeps their left/right edges aligned). */
  scrollbar-gutter: stable;
}

body {
  font-family: var(--font-sans);
  background-color: var(--color-linen);
  color: var(--color-fg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Type utilities matching the design system */
.t-display {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 60px;
  line-height: 1.02;
  letter-spacing: -0.025em;
}

.t-label {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.t-score {
  font-family: var(--font-mono);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Hero entrance — single, restrained page-load reveal */
@keyframes hero-rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
.hero-rise { animation: hero-rise 0.9s cubic-bezier(0.2, 0.6, 0.2, 1) both; }
.hero-rise-delay { animation-delay: 0.18s; }

@media (prefers-reduced-motion: reduce) {
  .hero-rise { animation: none; }
}

/* Overlay nav (home hero) — light treatment while at the top of the page */
.nav-logo, .nav-link, .nav-search, .nav-search-icon, .nav-search-input {
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}
/* Logo swap: black on solid bg, white on the transparent hero overlay */
.nav-logo-white { display: none; }
.nav-light .nav-logo-black { display: none; }
.nav-light .nav-logo-white { display: block; }
.nav-light .nav-logo { filter: drop-shadow(0 1px 16px rgba(0, 0, 0, 0.4)); }
.nav-light .nav-link { color: rgba(255, 255, 255, 0.9); }
.nav-light .nav-link:hover { color: #fff; }
.nav-light .nav-logo,
.nav-light .nav-link { text-shadow: 0 1px 16px rgba(0, 0, 0, 0.4); }
.nav-light .nav-search {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.30);
}
.nav-light .nav-search-icon { color: rgba(255, 255, 255, 0.85); }
.nav-light .nav-search-input { color: #fff; }
.nav-light .nav-search-input::placeholder { color: rgba(255, 255, 255, 0.72); }

/* Mobile burger inherits the overlay-nav light treatment on the home hero */
.nav-burger { transition: color 0.2s ease; }
.nav-light .nav-burger { color: #fff; }

/* Full-screen mobile menu */
.mobile-panel {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}
.mobile-panel.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.mobile-panel .mobile-link {
  opacity: 0;
  transform: translateY(10px);
}
.mobile-panel.is-open .mobile-link {
  opacity: 1;
  transform: none;
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.mobile-panel.is-open .mobile-link:nth-child(2) { transition-delay: 0.06s; }

@media (prefers-reduced-motion: reduce) {
  .mobile-panel, .mobile-panel .mobile-link { transition: none; }
}

/* ── Legal / long-form pages ──────────────────────────────────── */
/* "Quiet Minimal": narrow measure, generous rhythm, type carries it. */
.legal-section { margin-top: 52px; scroll-margin-top: 96px; }
.legal-section:first-of-type { margin-top: 0; }

.legal-num {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--color-terracotta);
}
.legal-h {
  font-size: 21px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin-top: 8px;
  color: var(--color-fg);
}

.legal-prose { color: var(--color-fg-2); font-size: 15.5px; line-height: 1.72; }
.legal-prose > p { margin-top: 16px; max-width: 65ch; }
.legal-prose > p:first-child { margin-top: 14px; }
.legal-prose strong { color: var(--color-fg); font-weight: 600; }
.legal-prose a {
  color: var(--color-terracotta);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.legal-prose a:hover { color: var(--color-terracotta-hover); }

.legal-prose ul { margin-top: 16px; padding-left: 0; list-style: none; max-width: 65ch; }
.legal-prose li { position: relative; padding-left: 22px; margin-top: 9px; }
.legal-prose li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 11px;
  width: 5px;
  height: 5px;
  background: var(--color-terracotta);
  border-radius: var(--radius-pill);
}

/* ── Map (MapLibre / OpenFreeMap) ─────────────────────────────── */
.tv-map-pin { cursor: pointer; filter: drop-shadow(0 2px 3px rgba(24, 21, 16, 0.35)); }
.tv-map-pin svg { display: block; }
.tv-map-airport { cursor: pointer; filter: drop-shadow(0 2px 3px rgba(24, 21, 16, 0.3)); }
.tv-map-airport svg { display: block; }

/* Popup must sit above all markers (markers carry an inline z-index of 1–2) */
.maplibregl-popup { z-index: 10; }

/* Popup restyled to match the linen / charcoal design system */
.maplibregl-popup.maplibregl-popup .maplibregl-popup-content {
  background: #FFFDF8;
  border: 1px solid #E3DACB;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(24, 21, 16, 0.18);
  padding: 12px 14px;
  font-family: "Geist", ui-sans-serif, system-ui, sans-serif;
}
.maplibregl-popup-anchor-top .maplibregl-popup-tip { border-bottom-color: #FFFDF8; }
.maplibregl-popup-anchor-bottom .maplibregl-popup-tip { border-top-color: #FFFDF8; }
.maplibregl-popup-anchor-left .maplibregl-popup-tip { border-right-color: #FFFDF8; }
.maplibregl-popup-anchor-right .maplibregl-popup-tip { border-left-color: #FFFDF8; }
.tv-map-popup__kicker {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #897F70;
  margin-bottom: 3px;
}
.tv-map-popup__name { font-size: 14px; font-weight: 600; color: #181510; line-height: 1.25; }
.tv-map-popup__name a { color: #A8884C; text-decoration: none; outline: none; }
.tv-map-popup__name a:hover { color: #856526; }
/* The marker click auto-focuses the popup link — drop the default blue focus ring */
.tv-map-popup__name a:focus, .tv-map-popup__name a:focus-visible { outline: none; box-shadow: none; }
.tv-map-popup__detail { font-size: 12px; color: #897F70; margin-top: 3px; }