/* Parks page (site/parks.html) - only what the page adds on top of
   style.css. The header, hero, search panel, map chrome, detail panel
   shell and card grid are all style.css rules reused as-is; this file
   covers the page switch, the camping block in the detail panel, and the
   NPS-style rows (hours, fees, activities) the camping map never shows.
   Every color comes from style.css's tokens so both themes hold. */

/* --- Hero: style.css's light band as it stands (the photo came out
   2026-09-25). --- */

/* --- Browse section --- */

#parks-browse-section {
  background: var(--tint);
  border-radius: 20px;
  margin-top: var(--sp-7);
  margin-bottom: var(--sp-7);
}

#parks-browse-section h2 {
  margin-bottom: var(--sp-2);
  color: var(--accent-deep-ink);
}

#parks-browse-subhead {
  color: var(--ink-muted);
  margin-top: 0;
  font-size: var(--text-sm);
}

/* The list's controls (2026-09-29): chips on the browse section's light
   ground, one row per group, the label at the left. */
.list-controls {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin: var(--sp-4) 0 var(--sp-3);
  padding: var(--sp-3) 0;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.list-controls-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-3);
}

.list-controls-label {
  flex: 0 0 8.5rem;
  font-size: var(--text-2xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
}

.list-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.list-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 0.25rem 0.7rem;
  border: 1px solid rgba(0, 0, 0, 0.18);
  border-radius: 999px;
  background: white;
  color: var(--ink);
  font: inherit;
  font-size: var(--text-xs);
  cursor: pointer;
}

.list-chip:hover {
  border-color: var(--accent-green, #2e8b40);
}

.list-chip[aria-pressed="true"] {
  background: var(--accent-green, #2e8b40);
  border-color: var(--accent-green, #2e8b40);
  color: white;
}

.list-chip-count {
  font-size: var(--text-3xs);
  opacity: 0.7;
}

.list-check {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
  font-size: var(--text-xs);
  color: var(--ink);
  cursor: pointer;
}

.list-check input {
  accent-color: var(--accent-green, #2e8b40);
}

.list-controls-note {
  color: var(--ink-muted);
  font-size: var(--text-3xs);
}

.list-controls .filter-clear {
  margin-left: auto;
  color: var(--accent-green-dark, #1f3b2a);
}

@media (max-width: 720px) {
  .list-controls-label {
    flex-basis: 100%;
  }
}

#parks-back-link {
  display: inline-block;
  margin-top: var(--sp-3);
  font-size: var(--text-xs);
  font-weight: 500;
  text-decoration: none;
}

#parks-back-link:hover {
  text-decoration: underline;
}

#parks-state-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--sp-4);
  margin-top: var(--sp-6);
}

#parks-results {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--sp-5);
  margin-top: var(--sp-6);
}

/* Unconditional "display" above beats the UA [hidden] rule - same
   footgun style.css documents for #campground-cards/#state-grid. */
#parks-state-grid[hidden],
#parks-results[hidden],
#parks-back-link[hidden],
#parks-load-more[hidden] {
  display: none;
}

#parks-load-more {
  display: block;
  margin: var(--sp-6) auto 0;
  padding: var(--sp-3) var(--sp-6);
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--accent-deep-ink);
  font-family: inherit;
  font-size: var(--text-xs);
  font-weight: 600;
  cursor: pointer;
}

#parks-load-more:hover {
  border-color: var(--accent-deep-ink);
}

.parks-empty {
  color: var(--ink-muted);
  font-size: var(--text-sm);
}

/* --- Map layers --- */

/* One colour per map layer (LAYERS in parks.js), carried by the pin, the
   numbered pin, the list number, the badge, the swatch and the card's top
   border. National parks keep the camping map's NPS brown - they are the
   ones people come for; monuments, recreation areas and historic sites
   get their own hues, the historic layer the quietest since its 380 pins
   would otherwise be the loudest thing on the map. State parks keep the
   camping map's rose. Both themes: the hues sit on white pins/badges. */
:root {
  --layer-npark: var(--accent-nps);
  --layer-monument: #6b4c9a;
  --layer-recreation: #1f7fa8;
  --layer-historic: #7d7566;
  --layer-stateparks: var(--accent-statepark);
}

.site-marker-npark, .site-marker-numbered-npark, .state-list-number-npark, .agency-badge-npark, .map-layer-swatch-npark {
  background: var(--layer-npark);
}

.site-marker-monument, .site-marker-numbered-monument, .state-list-number-monument, .agency-badge-monument, .map-layer-swatch-monument {
  background: var(--layer-monument);
}

.site-marker-recreation, .site-marker-numbered-recreation, .state-list-number-recreation, .agency-badge-recreation, .map-layer-swatch-recreation {
  background: var(--layer-recreation);
}

.site-marker-historic, .site-marker-numbered-historic, .state-list-number-historic, .agency-badge-historic, .map-layer-swatch-historic {
  background: var(--layer-historic);
}

/* National parks draw a larger pin (parkIcon in parks.js) and a heavier
   ring so the 63 read at a glance among 6,000 dots. */
.site-marker-npark {
  box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--layer-npark);
}

/* The selected pin stays style.css's blue halo whatever its layer - the
   layer rules above are later in the cascade, so restate it here. */
.site-marker.site-marker-highlighted {
  background: var(--accent-blue);
  box-shadow: 0 0 0 4px rgba(28, 110, 140, 0.35), 0 1px 6px rgba(0, 0, 0, 0.5);
}

/* Card top border says which layer the park belongs to, the same cue the
   pins use. */
.park-card-npark { border-top-color: var(--layer-npark); }
.park-card-monument { border-top-color: var(--layer-monument); }
.park-card-recreation { border-top-color: var(--layer-recreation); }
.park-card-historic { border-top-color: var(--layer-historic); }
.park-card-stateparks { border-top-color: var(--layer-stateparks); }

/* Each layer row is the checkbox label plus an "only" shortcut - the one-
   click answer to "just the US national parks". The rows sit under a
   heading per country with its own "only". */
.map-layer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}

/* The country rows are the camping map's layer groups (style.css) with
   an "only" button between the label and the caret. */
.map-layer-group-head .map-layer-toggle {
  flex: 1;
}

.map-layer-only-btn,
.map-layer-all-btn {
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  font-size: var(--text-3xs);
  color: var(--accent-blue);
  cursor: pointer;
  text-decoration: underline;
  white-space: nowrap;
}

.map-layer-only-btn {
  visibility: hidden;
}

.map-layer-row:hover .map-layer-only-btn,
.map-layer-row:focus-within .map-layer-only-btn,
.map-layer-group-head:hover .map-layer-only-btn,
.map-layer-group-head:focus-within .map-layer-only-btn {
  visibility: visible;
}

.map-layer-only-btn:hover,
.map-layer-all-btn:hover {
  color: var(--accent-blue-dark);
}

.map-layer-all-btn {
  align-self: flex-start;
  margin-top: var(--sp-1);
}

@media (hover: none) {
  .map-layer-only-btn {
    visibility: visible;
  }
}

.park-card .card-name {
  margin: 0;
}

.card-camping {
  font-size: var(--text-2xs);
  color: var(--accent-green);
  font-weight: 600;
}

.park-card .card-detail-btn {
  align-self: flex-start;
  margin-top: var(--sp-2);
}

/* --- Name / place search dropdown --- */

.name-search-empty {
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--text-xs);
  color: var(--ink-muted);
}

/* --- Detail panel --- */

/* "← Tennessee parks" on a park opened from a state's list. */
.detail-back-btn {
  display: inline-block;
  margin: 0 0 var(--sp-3);
  padding: 0;
  border: none;
  background: none;
  font-family: inherit;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--accent-deep-ink);
  cursor: pointer;
}

.detail-back-btn:hover {
  text-decoration: underline;
}

/* The state's park list, in the map panel. Rows reuse style.css's
   .state-list-item and .state-list-number (NPS brown / state-park rose),
   the same number the park's pin carries. */
.park-list-item {
  align-items: center;
}

.park-list-item:focus-visible {
  outline: 2px solid var(--accent-blue);
  outline-offset: -2px;
}

.park-list-camping {
  margin-left: var(--sp-2);
  font-size: var(--text-3xs);
  color: var(--accent-green);
}

/* "12.4 mi" on a search result's row. */
.park-list-distance {
  margin-left: var(--sp-2);
  font-size: var(--text-3xs);
  color: var(--ink-muted);
  white-space: nowrap;
}

.park-list-key {
  margin: calc(-1 * var(--sp-2)) 0 var(--sp-3);
  font-size: var(--text-3xs);
  color: var(--ink-muted);
}

.park-list-key,
.park-list-camping,
.park-list-distance {
  font-family: var(--font-body);
}

.detail-subtitle {
  margin: calc(-1 * var(--sp-3)) 0 var(--sp-3);
  font-size: var(--text-xs);
  color: var(--ink-muted);
}

.detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.detail-figure {
  margin: 0 0 var(--sp-4);
}

.detail-figure .detail-image {
  margin-bottom: var(--sp-2);
}

.detail-figure figcaption {
  font-size: var(--text-3xs);
  color: var(--ink-muted);
  line-height: 1.4;
}

/* The camping block is the one thing this panel has that a park's own
   site doesn't - it sits above the visitor-info rows, tinted so the eye
   lands on it, green when there is camping and neutral when there isn't. */
.detail-camping {
  margin: var(--sp-3) 0 var(--sp-4);
  padding: var(--sp-4);
  border-radius: 8px;
  background: var(--tint);
  border-left: 3px solid var(--accent-green);
  font-size: var(--text-sm);
}

.detail-camping-no {
  border-left-color: var(--border);
}

.detail-camping h3 {
  margin: 0 0 var(--sp-2);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--accent-deep-ink);
}

.detail-camping ul {
  margin: 0;
  padding-left: var(--sp-5);
}

.detail-camping li {
  margin-bottom: var(--sp-1);
}

.detail-camping p {
  margin: 0;
}

.detail-camping-hint {
  margin-top: var(--sp-2) !important;
  font-size: var(--text-3xs);
  color: var(--ink-muted);
}

.camping-mode {
  font-size: var(--text-3xs);
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.camping-more {
  color: var(--ink-muted);
  list-style: none;
  margin-left: calc(-1 * var(--sp-5));
}

/* Trails (since 2026-10-14): the Park Service's public trails for the
   open park, drawn on the map and listed by name under a fold. The
   block keeps the camping block's shape, edged in the line colour. */
.detail-trails {
  margin: 0 0 var(--sp-4);
  padding: var(--sp-4);
  border-radius: 8px;
  background: var(--tint);
  border-left: 3px solid #b5451b;
  font-size: var(--text-sm);
}

.detail-trails h3 {
  margin: 0 0 var(--sp-2);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--accent-deep-ink);
}

.detail-trails p {
  margin: 0;
}

.detail-trails-toggle {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin: var(--sp-2) 0;
  cursor: pointer;
}

.detail-trails-names {
  margin-top: var(--sp-1);
}

.trail-list {
  margin: var(--sp-2) 0 0;
  padding: 0;
  list-style: none;
  max-height: 16rem;
  overflow-y: auto;
}

.trail-list li {
  margin: 0;
}

.trail-link {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-3);
  width: 100%;
  padding: 3px 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--text-xs);
  color: var(--accent-blue);
  text-align: left;
  cursor: pointer;
}

.trail-link:hover,
.trail-link:focus-visible {
  text-decoration: underline;
}

.trail-link-closed {
  color: var(--ink-muted);
}

.trail-miles {
  flex: 0 0 auto;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}

.detail-trails-unnamed,
.detail-trails-loading {
  margin-top: var(--sp-2) !important;
  font-size: var(--text-3xs);
  color: var(--ink-muted);
}

.detail-trails-hint {
  margin-top: var(--sp-2) !important;
  font-size: var(--text-3xs);
  color: var(--ink-muted);
}

.detail-trails-page {
  margin-top: var(--sp-2) !important;
  font-size: var(--text-xs);
}

.detail-trails-page a {
  color: var(--accent-blue);
  font-weight: 500;
}

.trail-tooltip {
  font-size: var(--text-3xs);
  line-height: 1.35;
}

/* Trailheads: the Service's points as a round "T" pin over the lines
   (the marker pane sits above the overlay pane), the same mark inline
   in the list's note. */
.trailhead-pin {
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #b5451b;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3);
  color: #fff;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  line-height: 12px;
  text-align: center;
  cursor: pointer;
}

.trailhead-pin-inline {
  display: inline-block;
  vertical-align: -3px;
  cursor: default;
}

.trail-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.trail-row .trail-link {
  flex: 1 1 auto;
  min-width: 0;
}

.trail-drive {
  flex: 0 0 auto;
  font-size: var(--text-3xs);
  font-weight: 600;
  color: #b5451b;
  text-decoration: none;
  white-space: nowrap;
}

.trail-drive:hover,
.trail-drive:focus-visible {
  text-decoration: underline;
}

.trail-tooltip .trail-drive {
  font-size: inherit;
}

.detail-trails-heads {
  margin-top: var(--sp-2) !important;
  font-size: var(--text-3xs);
  color: var(--ink-muted);
}

.trailhead-popup {
  font-size: var(--text-xs);
}

.trailhead-popup p {
  margin: var(--sp-2) 0 0;
}

.trailhead-trails {
  margin: var(--sp-1) 0 0;
  padding-left: var(--sp-4);
}

.trailhead-credit {
  font-size: var(--text-3xs);
  color: var(--ink-muted);
}

/* Rows whose value is a paragraph, a list or a chip cloud stack the
   label above the value instead of the label-left / value-right layout
   the short facts use. */
.detail-row-stack {
  flex-direction: column;
  gap: var(--sp-2);
}

.detail-row-stack .detail-value {
  text-align: left;
}

.detail-more {
  font-size: var(--text-xs);
  margin-top: var(--sp-1);
}

.detail-more summary {
  cursor: pointer;
  color: var(--accent-blue);
  font-weight: 500;
}

.detail-more p {
  margin: var(--sp-2) 0 0;
  text-align: left;
  color: var(--ink);
  line-height: 1.5;
}

.fee-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.fee-list li {
  margin-bottom: var(--sp-2);
}

.fee-cost {
  font-weight: 600;
  white-space: nowrap;
}

.activity-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.activity-chip {
  padding: 2px var(--sp-3);
  border-radius: 999px;
  background: var(--tint);
  border: 1px solid var(--border);
  font-size: var(--text-3xs);
  color: var(--ink);
}

.activity-chip-more {
  background: transparent;
  color: var(--ink-muted);
}

.detail-attribution {
  margin: calc(-1 * var(--sp-3)) 0 var(--sp-4);
  font-size: var(--text-3xs);
  color: var(--ink-muted);
}

/* Filters (since 2026-09-17): the Filters pill sits with Near me and Along
   my route in the links row (same ghost-pill look, style.css's rule is by
   id so it is repeated here), and unfolds #filter-panel under the route
   form inside the hero's glass panel - white-on-dark chips, a chosen one
   filled white. */
#search-form #filter-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 999px;
  background: transparent;
  color: white;
  font-size: var(--text-xs);
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

#filter-toggle svg {
  width: 14px;
  height: 14px;
}

#filter-toggle:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.6);
}

#filter-toggle.active {
  background: rgba(255, 255, 255, 0.18);
  border-color: white;
}

.filter-count {
  min-width: 1.4em;
  padding: 0 var(--sp-2);
  border-radius: 999px;
  background: white;
  color: var(--accent-green-dark, #1f3b2a);
  font-size: var(--text-3xs);
  font-weight: 700;
  text-align: center;
  line-height: 1.5;
}

.filter-count[hidden] {
  display: none;
}

#filter-panel {
  padding-top: var(--sp-5);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

#filter-panel[hidden] {
  display: none;
}

.filter-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
}

.filter-clear {
  padding: 0;
  border: 0;
  background: none;
  color: #e4eef0;
  font-size: var(--text-2xs);
  text-decoration: underline;
  cursor: pointer;
}

.filter-clear[hidden] {
  display: none;
}

.filter-check {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--text-xs);
  color: #e4eef0;
  cursor: pointer;
}

.filter-check input {
  accent-color: white;
}

.filter-group {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.filter-group-label {
  font-size: var(--text-2xs);
  font-weight: 600;
  color: #e4eef0;
}

.filter-group-note {
  font-weight: 400;
  color: #b9d3d6;
}

.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 2px var(--sp-3);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 999px;
  background: transparent;
  color: white;
  font-size: var(--text-2xs);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.filter-chip:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.6);
}

.filter-chip[aria-pressed="true"] {
  background: white;
  border-color: white;
  color: var(--accent-green-dark, #1f3b2a);
}

.filter-chip-count {
  font-size: var(--text-3xs);
  opacity: 0.75;
}

.filter-chip[aria-pressed="true"] .filter-chip-count {
  opacity: 0.7;
}

/* The distance from the visitor's own location on a state list's rows and
   the cards, once Near me (or an earlier grant) has given one. */
.card-distance-you,
.park-list-distance-you {
  color: var(--ink-muted);
  font-weight: 500;
}

/* style.css lays the phone header out in two rows for the camping map,
   with a forced break before its mode toggle. This page has no toggle -
   its header is the logo, the feedback chip and the Camping link - so
   the break is dropped and all three share one row, feedback and the
   link pushed to the right. The map then gets the screen below a one-row
   header, 51px (style.css's height and scroll padding assume the two-row
   one). */
@media (max-width: 720px) {
  html {
    scroll-padding-top: 51px;
  }

  #site-header::after {
    display: none;
  }

  #header-feedback-link {
    margin-left: auto;
  }

  #site-header nav {
    margin-left: 0;
  }

  #map-section {
    height: calc(100vh - 51px);
    height: calc(100svh - 51px);
  }

  /* The focused state's name and count, top-right where the region
     switcher sits when no state is focused (parks.js hides the switcher
     for the focus) - the state list's heading and close button in one
     pill, standing in for the list a phone no longer gets (see
     renderFocusList). Styled after #map-clear-search. Kept out from
     under an open park sheet by the same sibling rule that hides the
     clear-search pill there; it comes right after the panel in the
     markup for that. */
  #map-state-focus {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 1000;
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    max-width: calc(100% - 5rem);
    padding: var(--sp-2) var(--sp-4);
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--overlay);
    color: var(--ink);
    font-size: var(--text-2xs);
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
  }

  #map-state-focus-label {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #map-state-focus span[aria-hidden] {
    font-size: 1.2em;
    line-height: 1;
  }

  #map-state-focus[hidden],
  #detail-panel:not([hidden]) ~ #map-state-focus {
    display: none;
  }
}