/* ============================================================================
   RIVERSIDE RV PARK — SHARED STYLESHEET
   Every page pulls from this one file. Change a colour here, it changes
   everywhere.

   DESIGN DIRECTION — "the park map, made live"
   The paper campground map is the park's best asset. The whole site is built
   to look like that map: its pale grass greens, its pond blue, its flat vector
   shapes. Deep forest ink on map paper, with aspen gold for anything you can
   act on. No stock-photo gradients, no drop shadows pretending to be depth.
   ========================================================================== */

/* --- 1. Tokens ----------------------------------------------------------- */

:root {
  /* Colour, sampled from the park's own printed map */
  --ink:         #16241d;  /* deep forest, near-black          */
  --forest:      #1f4034;  /* header ground                    */
  --moss:        #3d6b52;  /* secondary text on dark           */
  --sage:        #cadfb6;  /* map grass                        */
  --sage-deep:   #9dbf85;  /* map grass, shaded                */
  --paper:       #f2f3ee;  /* map paper                        */
  --paper-warm:  #e8eae1;  /* map paper, recessed              */
  --river:       #a9d4e4;  /* water fill                       */
  --river-deep:  #2b6f8c;  /* water line, links                */
  --asphalt:     #d9d9d3;  /* roads, pads                      */
  --asphalt-ink: #8c8c85;  /* road edges                       */
  --aspen:       #d8a12a;  /* the one action colour            */
  --aspen-deep:  #a97a12;
  --rule:        #c8cbc0;

  /* Type */
  --display: 'Bricolage Grotesque', system-ui, sans-serif;
  --body:    'Public Sans', system-ui, -apple-system, sans-serif;
  --mono:    'DM Mono', ui-monospace, 'SF Mono', monospace;

  /* Scale */
  --step--1: clamp(0.78rem, 0.76rem + 0.1vw, 0.84rem);
  --step-0:  clamp(0.98rem, 0.95rem + 0.15vw, 1.06rem);
  --step-1:  clamp(1.2rem, 1.1rem + 0.5vw, 1.5rem);
  --step-2:  clamp(1.5rem, 1.3rem + 1vw, 2.1rem);
  --step-3:  clamp(2rem, 1.5rem + 2.4vw, 3.4rem);
  --step-4:  clamp(2.6rem, 1.6rem + 4.4vw, 5.2rem);

  --gutter: clamp(1.1rem, 4vw, 2.5rem);
  --measure: 62ch;
}

/* --- 2. Base ------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--step-0);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.03;
  letter-spacing: -0.022em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 1em; max-width: var(--measure); }

a { color: var(--river-deep); text-underline-offset: 3px; }

:focus-visible {
  outline: 3px solid var(--aspen);
  outline-offset: 2px;
  border-radius: 2px;
}

.wrap {
  width: min(1180px, 100%);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.narrow { width: min(760px, 100%); margin-inline: auto; padding-inline: var(--gutter); }

/* The eyebrow doubles as a map label — set in the utility face, like the
   legend text on a real survey sheet. */
.eyebrow {
  font-family: var(--mono);
  font-size: var(--step--1);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--moss);
  margin: 0 0 0.9rem;
}

.skip {
  position: absolute; left: -9999px;
  background: var(--aspen); color: var(--ink);
  padding: 0.7rem 1.1rem; font-weight: 700; z-index: 200;
}
.skip:focus { left: 1rem; top: 1rem; }

/* --- 3. Demo ribbon ------------------------------------------------------ */
/* DELETE THIS ELEMENT FROM EVERY PAGE BEFORE GOING LIVE. One line each. */

.demo-ribbon {
  background: var(--ink);
  color: var(--sage);
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-align: center;
  padding: 0.5rem var(--gutter);
}
.demo-ribbon b { color: var(--aspen); font-weight: 500; }

/* --- 4. Header ----------------------------------------------------------- */

.masthead {
  position: sticky; top: 0; z-index: 100;
  background: var(--forest);
  color: var(--paper);
  border-bottom: 1px solid rgba(255,255,255,0.12);
}

.masthead .wrap {
  display: flex; align-items: center; gap: 1.5rem;
  min-height: 68px; flex-wrap: wrap;
}

.wordmark {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.12rem;
  letter-spacing: -0.02em;
  color: var(--paper);
  text-decoration: none;
  line-height: 1.1;
  margin-right: auto;
}
.wordmark span {
  display: block;
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  color: var(--sage-deep);
  font-weight: 400;
}

.nav { display: flex; gap: 1.4rem; align-items: center; flex-wrap: wrap; }

.nav a {
  color: var(--sage);
  text-decoration: none;
  font-size: 0.92rem;
  padding: 0.3rem 0;
  border-bottom: 2px solid transparent;
}
.nav a:hover { color: #fff; border-bottom-color: var(--sage-deep); }
.nav a[aria-current='page'] { color: #fff; border-bottom-color: var(--aspen); }

/* The one button that matters, and it is the only aspen-gold thing up here. */
.book-btn {
  background: var(--aspen);
  color: var(--ink) !important;
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.92rem;
  padding: 0.6rem 1.15rem !important;
  border-radius: 3px;
  border-bottom: none !important;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s ease;
}
.book-btn:hover { background: #eeb43c; color: var(--ink) !important; }

/* --- 5. Hero ------------------------------------------------------------- */

/* A full-bleed photograph with nothing written over it. The words live in the
   .hero-text band directly beneath, where they are always legible.
   Pages supply only the background-image; the geometry belongs here.
   Bounded in px as well as vh so a short laptop still shows the headline
   without scrolling, and a tall monitor doesn't get a wall of photo. */
.hero-image {
  display: block;
  width: 100%;
  height: clamp(280px, 56vh, 560px);
  background: var(--forest) center / cover no-repeat;
}

.hero-text { padding: clamp(2.6rem, 7vw, 4.5rem) 0; }
.hero-text .wrap > div { max-width: 60ch; }

.hero {
  background: var(--forest) center / cover no-repeat;
  color: var(--paper);
  padding: clamp(3rem, 9vw, 6.5rem) 0 clamp(3.5rem, 10vw, 7rem);
  position: relative;
  overflow: hidden;
}

/* Contour lines — the map's own vernacular, used as atmosphere rather than
   a gradient. Deliberately faint. */
.hero::after {
  content: '';
  position: absolute; inset: 0;
  background-image:
    radial-gradient(ellipse 120% 80% at 78% 118%, transparent 44%, rgba(202,223,182,0.07) 44.4%, transparent 45.4%),
    radial-gradient(ellipse 120% 80% at 78% 118%, transparent 54%, rgba(202,223,182,0.07) 54.4%, transparent 55.4%),
    radial-gradient(ellipse 120% 80% at 78% 118%, transparent 64%, rgba(202,223,182,0.07) 64.4%, transparent 65.4%),
    radial-gradient(ellipse 120% 80% at 78% 118%, transparent 74%, rgba(202,223,182,0.07) 74.4%, transparent 75.4%);
  pointer-events: none;
}
.hero .wrap { position: relative; z-index: 1; }

.hero-coords {
  font-family: var(--mono);
  font-size: var(--step--1);
  letter-spacing: 0.15em;
  color: var(--sage-deep);
  text-transform: uppercase;
  margin: 0 0 1.6rem;
}

.hero h1 {
  font-size: var(--step-4);
  max-width: 15ch;
  margin-bottom: 1.4rem;
}
.hero h1 em {
  font-style: normal;
  color: var(--sage);
  display: block;
}

.hero-lede {
  font-size: var(--step-1);
  color: var(--sage);
  max-width: 46ch;
  line-height: 1.45;
  margin-bottom: 2.2rem;
}

.hero-actions { display: flex; gap: 0.9rem; flex-wrap: wrap; }

.btn {
  display: inline-block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1rem;
  padding: 0.85rem 1.6rem;
  border-radius: 3px;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.15s ease;
}
.btn-primary { background: var(--aspen); color: var(--ink); }
.btn-primary:hover { background: #eeb43c; }
.btn-ghost { border-color: var(--sage-deep); color: var(--sage); background: transparent; }
.btn-ghost:hover { border-color: var(--sage); color: #fff; }

/* Season strip sits directly under the hero — the single most-asked question */
.season-strip {
  background: var(--sage);
  color: var(--ink);
  font-family: var(--mono);
  font-size: var(--step--1);
  letter-spacing: 0.06em;
  padding: 0.75rem 0;
}
.season-strip .wrap {
  display: flex; gap: 0.6rem 2.4rem; flex-wrap: wrap; justify-content: center;
}

/* --- 6. Sections --------------------------------------------------------- */

.band { padding: clamp(3rem, 8vw, 5.5rem) 0; }
.band--paper { background: var(--paper); }
.band--warm  { background: var(--paper-warm); border-block: 1px solid var(--rule); }
.band--ink   { background: var(--ink); color: var(--paper); }
.band--ink h1, .band--ink h2, .band--ink h3 { color: var(--paper); }
.band--ink h1 em, .band--ink h2 em { color: var(--sage); }
.band--ink .hero-lede { color: var(--sage); }
.band--ink .eyebrow { color: var(--sage-deep); }

.band-head { margin-bottom: 2.6rem; }
.band-head h2 { font-size: var(--step-3); max-width: 20ch; }
.band-head p { color: #4a5a50; font-size: var(--step-1); margin-top: 1rem; }
.band--ink .band-head p { color: var(--sage); }

/* --- 7. Map ------------------------------------------------------------- */

.mapwrap {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 1.6rem;
  align-items: start;
}

.legend {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 1.1rem 1.2rem 1.3rem;
  position: sticky; top: 88px;
}
.band--warm .legend { background: #fff; }

.legend h3 {
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--moss);
  margin-bottom: 0.9rem;
}

.filters { display: flex; flex-direction: column; gap: 0.15rem; margin-bottom: 1.2rem; }

.filters label {
  display: flex; align-items: center; gap: 0.6rem;
  font-size: 0.9rem; padding: 0.34rem 0.4rem;
  border-radius: 3px; cursor: pointer;
}
.filters label:hover { background: var(--paper-warm); }
.filters input { accent-color: var(--river-deep); width: 15px; height: 15px; margin: 0; }

/* Price, set flush right in the utility face so the column reads as a table */
.filters label b {
  margin-left: auto; padding-left: 0.6rem;
  font-family: var(--mono); font-weight: 500;
  font-size: 0.82rem; color: var(--moss);
}

.swatch {
  width: 13px; height: 13px; border-radius: 2px;
  border: 1.5px solid var(--asphalt-ink); flex: none;
}
.sw-rv       { background: var(--asphalt); }
.sw-tent     { background: var(--sage-deep); border-color: #6f8f5c; }
.sw-pullthru { background: #e6dcc2; border-color: #b3a377; }
.sw-river    { background: var(--river); border-color: var(--river-deep); }

.legend-note {
  font-size: 0.78rem; color: #5d6d63; line-height: 1.45;
  border-top: 1px solid var(--rule); padding-top: 0.9rem; margin: 0;
}

.reset {
  background: none; border: none; padding: 0; margin-top: 0.7rem;
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--river-deep); cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
}

.map-stage {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 0.6rem;
}
#parkmap { display: block; width: 100%; height: auto; }

/* Site pads */
.pad {
  fill: var(--asphalt);
  stroke: var(--asphalt-ink);
  stroke-width: 1.2;
  cursor: pointer;
  transition: fill 0.14s ease, stroke 0.14s ease;
}
/* Fill carries the category, so the four filters are four distinct colours.
   Back-in keeps the plain asphalt grey — it is the default case. */
.pad.is-pullthru  { fill: #e6dcc2; stroke: #b3a377; }
.pad.is-tent      { fill: var(--sage-deep); stroke: #6f8f5c; }
.pad.is-river     { fill: var(--river); stroke: var(--river-deep); }
.pad:hover        { fill: var(--aspen); stroke: var(--aspen-deep); }
.pad.is-selected  { fill: var(--aspen); stroke: var(--ink); stroke-width: 2.4; }
.pad.is-dimmed    { opacity: 0.17; pointer-events: none; }

.pad-num {
  font-family: var(--mono); font-size: 10px; fill: var(--ink);
  text-anchor: middle; dominant-baseline: central; pointer-events: none;
  transition: opacity 0.14s ease;
}
.pad-num.is-dimmed { opacity: 0.15; }

.unknown-pad { fill: #cfcfc8; stroke: #9a9a92; stroke-width: 1.2; stroke-dasharray: 3 2; }
.unknown-num { font-family: var(--mono); font-size: 9px; fill: #6b6b64;
               text-anchor: middle; dominant-baseline: central; pointer-events: none; }

.feature-label {
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.08em;
  fill: #59695f; text-anchor: middle; text-transform: uppercase;
  pointer-events: none;
}
.water-label { fill: var(--river-deep); }

/* Detail panel */
.detail {
  margin-top: 1rem;
  background: #fff;
  border: 1px solid var(--rule);
  border-left: 4px solid var(--aspen);
  border-radius: 4px;
  padding: 1.2rem 1.4rem;
  min-height: 128px;
}
.detail-empty { color: #5d6d63; font-size: 0.92rem; margin: 0; }
.detail h3 { font-size: var(--step-2); margin-bottom: 0.15rem; }
.detail .kind {
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--moss); margin-bottom: 0.9rem;
}
.specs { display: flex; gap: 1.8rem; flex-wrap: wrap; margin-bottom: 1.1rem; }
.spec dt {
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--moss); margin-bottom: 0.15rem;
}
.spec dd { margin: 0; font-family: var(--display); font-weight: 700; font-size: 1.28rem; }

/* --- 8. Rates ------------------------------------------------------------ */

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

table.rates {
  width: 100%; border-collapse: collapse; background: #fff;
  border: 1px solid var(--rule); font-size: 0.95rem; min-width: 460px;
}
table.rates caption {
  text-align: left; font-family: var(--mono); font-size: 0.72rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--moss);
  padding-bottom: 0.7rem;
}
table.rates th, table.rates td {
  text-align: left; padding: 0.78rem 1rem; border-bottom: 1px solid var(--rule);
}
table.rates thead th {
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--moss); font-weight: 500;
  background: var(--paper-warm);
}
table.rates tbody tr:last-child td { border-bottom: none; }
table.rates td.num {
  font-family: var(--display); font-weight: 700; font-size: 1.08rem;
  white-space: nowrap;
}
.tbd {
  font-family: var(--mono); font-size: 0.78rem; color: #94794a;
  background: #fbf3dd; border: 1px dashed #d8bd70;
  padding: 0.1rem 0.45rem; border-radius: 2px; white-space: nowrap;
}

/* --- 9. Cards ------------------------------------------------------------ */

.grid { display: grid; gap: 1.2rem; }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); }

.card {
  background: #fff; border: 1px solid var(--rule); border-radius: 4px;
  padding: 1.5rem 1.5rem 1.6rem;
}
.band--ink .card {
  background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.14);
}
.card h3 { font-size: var(--step-1); margin-bottom: 0.5rem; }
.card p { font-size: 0.94rem; color: #4a5a50; margin-bottom: 0; }
.band--ink .card p { color: var(--sage); }

.card-mark {
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--aspen-deep); margin-bottom: 0.7rem;
}
.band--ink .card-mark { color: var(--aspen); }

.plainlist { list-style: none; padding: 0; margin: 0; }
.plainlist li {
  padding: 0.55rem 0 0.55rem 1.5rem; position: relative;
  border-bottom: 1px solid var(--rule); font-size: 0.94rem;
}
.plainlist li:last-child { border-bottom: none; }
.plainlist li::before {
  content: ''; position: absolute; left: 0; top: 1.05em;
  width: 8px; height: 8px; border: 2px solid var(--aspen); border-radius: 50%;
}

/* --- 10. Policies -------------------------------------------------------- */

.policy-block { margin-bottom: 2.2rem; }
.policy-block h3 {
  font-size: var(--step-1); margin-bottom: 0.6rem;
  padding-bottom: 0.4rem; border-bottom: 2px solid var(--sage);
}
.policy-block p, .policy-block li { color: #3d4c44; }
.policy-block ul { padding-left: 1.1rem; margin: 0 0 1em; }
.policy-block li { margin-bottom: 0.35rem; max-width: var(--measure); }

/* --- 11. Footer ---------------------------------------------------------- */

.foot { background: var(--ink); color: var(--sage); padding: 3.2rem 0 2.2rem; }
.foot a { color: var(--sage); }
.foot h2 { color: var(--paper); font-size: var(--step-2); margin-bottom: 0.9rem; }
.foot-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 2rem; margin-bottom: 2.4rem;
}
.foot-grid h3 {
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--sage-deep); margin-bottom: 0.7rem;
  font-weight: 500;
}
.foot-grid p { font-size: 0.92rem; margin-bottom: 0.3rem; }
.foot-base {
  border-top: 1px solid rgba(255,255,255,0.13); padding-top: 1.3rem;
  font-family: var(--mono); font-size: 0.72rem; color: var(--moss);
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}

/* --- 12. Responsive ------------------------------------------------------ */

@media (max-width: 900px) {
  .mapwrap { grid-template-columns: 1fr; }
  .legend { position: static; }
  .filters { flex-direction: row; flex-wrap: wrap; }
  .filters label { border: 1px solid var(--rule); }
}

@media (max-width: 720px) {
  /* The nav wraps to two rows here. Sticking that to the top would eat a
     sixth of a phone screen, so it scrolls away instead. */
  .masthead { position: static; }
  .legend { top: 12px; }
  .masthead .wrap { min-height: 0; padding-block: 0.7rem; gap: 0.7rem 1rem; }
  .wordmark { font-size: 1rem; margin-right: 0; width: 100%; }
  .nav { width: 100%; gap: 0.9rem 1.1rem; }
  .nav a { font-size: 0.86rem; }
  .book-btn { margin-left: auto; }
  .hero h1 { max-width: 100%; }
  .hero-actions .btn { flex: 1 1 100%; text-align: center; }
}

@media print {
  /* The legend stays: it is the map's colour key and carries the prices, so
     a printed map is useless without it. Only its controls go. */
  .masthead, .demo-ribbon, .hero-actions, .book-btn,
  .hero-image, .filters input, .reset { display: none; }

  body { background: #fff; }
  .band, .hero-text { padding-block: 1.2rem; }
  .mapwrap { grid-template-columns: 1fr; }
  .legend { position: static; border: 1px solid #999; break-inside: avoid; }
  .filters label { padding-left: 0; }
  .map-stage, .card { break-inside: avoid; }

  /* Print the destination of a link the reader cannot click. */
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; word-break: break-all; }
}