/* 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 --- */

/* One static photo instead of the camping map's rotating set: the
   .hero-bg-layer.active rule in style.css already handles the fade-in. */
.parks-hero #hero-bg .hero-bg-layer {
  background-position: center 40%;
}

/* --- 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);
}

#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,
.map-layer-country {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}

.map-layer-country {
  margin-top: var(--sp-2);
  padding-bottom: var(--sp-1);
  border-bottom: 1px solid var(--border);
}

.map-layer-country:first-child {
  margin-top: 0;
}

.map-layer-country-name {
  font-size: var(--text-3xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.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-country:hover .map-layer-only-btn,
.map-layer-country: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));
}

/* 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);
}