/* Styling for the static per-park SEO pages (/park/*.html). Self-contained,
   "Alpine dusk" theme, mobile-first. */
:root {
  --bg: #0e1218; --panel: #151b23; --panel-2: #1c232d; --border: #2a333f;
  --text: #eff3f8; --text-dim: #8896a6; --accent: #f97316; --accent-2: #2dd4bf;
  --on-accent: #200d00;
}
/* Light theme ("Alpine day") — set on <html> by js/theme.js, same tokens and
   values as the light block in css/styles.css so both stay in step. */
:root[data-theme="light"] {
  --bg: #eaeef3; --panel: #ffffff; --panel-2: #f2f5f9; --border: #d9e0e8;
  --text: #172230; --text-dim: #5f6e7e; --accent: #e8620c; --accent-2: #0d9488;
  --on-accent: #ffffff;
}
:root[data-theme="light"] .topbar { background: linear-gradient(180deg, #ffffff 0%, #eef2f6 100%); }
@font-face { font-family: "Inter"; font-weight: 400; font-display: swap; src: url("/fonts/inter-400.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 600; font-display: swap; src: url("/fonts/inter-600.woff2") format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-weight: 700; font-display: swap; src: url("/fonts/space-grotesk-700.woff2") format("woff2"); }
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: 1.6;
}
h1, h2, .topbar a { font-family: "Space Grotesk", "Inter", system-ui, sans-serif; }
a { color: var(--accent); }
.topbar {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 18px;
  background: linear-gradient(180deg, #1b2531 0%, var(--panel) 100%);
  border-bottom: 2px solid transparent;
  border-image: linear-gradient(90deg, var(--accent) 0%, var(--accent-2) 100%) 1;
}
.topbar a { color: var(--text); text-decoration: none; font-weight: 800; }
.langsel { margin-left: auto; display: flex; gap: 4px; }
.langsel a { font-weight: 600; font-size: 12px; color: var(--text-dim); padding: 3px 7px; border-radius: 999px; }
.langsel a.on { background: var(--accent); color: var(--on-accent); }
.wrap { max-width: 760px; margin: 0 auto; padding: 24px 18px 60px; }
.crumbs { font-size: 13px; color: var(--text-dim); margin-bottom: 14px; }
.crumbs a { color: var(--text-dim); }
h1 { font-size: 30px; margin: 0 0 6px; line-height: 1.15; }
.loc { color: var(--text-dim); margin-bottom: 16px; }
/* Hero photo. Fixed aspect so the page doesn't jump as it loads, and the
   credit line stays attached to the image it belongs to. */
.hero { margin: 0 0 18px; }
.hero img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid var(--border);
  display: block;
}
.hero figcaption {
  margin-top: 6px;
  font-size: 11.5px;
  color: var(--text-dim);
}
.hero figcaption a { color: var(--text-dim); }

.badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.badge {
  font-size: 11px; font-weight: 600; letter-spacing: 0.4px; text-transform: uppercase;
  padding: 3px 10px; border-radius: 999px; background: var(--panel);
  border: 1px solid var(--border); color: var(--text-dim);
}
.facts { display: grid; grid-template-columns: 1fr; gap: 8px; margin: 0 0 22px; }
.fact { display: flex; gap: 10px; padding: 10px 12px; background: var(--panel-2);
  border: 1px solid var(--border); border-radius: 10px; font-size: 14px; }
.fact b { color: var(--text-dim); font-weight: 600; min-width: 96px; }
h2 { font-size: 16px; margin: 22px 0 8px; color: var(--text-dim); }
p { margin: 0 0 14px; }
.cta {
  display: inline-block; margin: 6px 10px 6px 0; padding: 11px 18px;
  border-radius: 12px; font-weight: 700; text-decoration: none;
}
.cta.primary { background: var(--accent); color: var(--on-accent); }
.cta.ghost { border: 1px solid var(--border); color: var(--text); }
/* Rating + comments block (populated by parkpage.js, hidden without a backend). */
.live { margin: 24px 0 18px; }
.live[hidden] { display: none; }
.rating-row { margin-bottom: 12px; }
.rating-row .rating { margin: 0; }
.rating-row .rating-star { font-size: 26px; }
#park-weather { max-width: 340px; }
#park-conditions { margin-bottom: 12px; }
.cond-empty { color: var(--text-dim); font-size: 14px; margin: 0 0 12px; }

footer { margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--border);
  font-size: 13px; color: var(--text-dim); }
@media (min-width: 560px) { .fact { font-size: 15px; } }