/* ===========================================================
   /guides/state-parks, Field Guide 04, and its 69 park pages. Rendered
   by Astro from src/content/state-parks (src/pages/guides/state-parks/).
   Loads after monocle.css and article.css, whose stat strip, body blocks,
   data tables, sources list and map frame it uses as they are. What it
   adds: the map (.parkmap), drawn in five greys by drive time from the
   Public Square; the filter row over the full table (.park-chips, the
   global .filter-chip, shown only once the page has set html.js); the
   table's park cell; and a park page's facts, lists and nearby row.
   Monochrome per DESIGN.md's accent rule: Blue Slate marks a hovered dot
   and nothing else, and the chips take the global slate hover and yellow
   selection.
   =========================================================== */

.hero-figure { max-width: 1120px; }

/* ------- The map ------- */
.parkmap { display: block; width: 100%; height: auto; }
.parkmap .state { fill: var(--paper-grey); stroke: var(--dispatch-grey); stroke-width: 1; }
.parkmap .dot { stroke: var(--press-black); stroke-width: 1; }
.parkmap .b0 { fill: var(--press-black); }
.parkmap .b1 { fill: #3d3d3d; }
.parkmap .b2 { fill: var(--dispatch-grey); }
.parkmap .b3 { fill: #a6a6a6; }
.parkmap .b4 { fill: var(--editorial-white); }
.parkmap .closed { fill: var(--editorial-white); stroke-dasharray: 2 2; }
.parkmap a:hover .dot, .parkmap a:focus-visible .dot { stroke: var(--blue-slate); stroke-width: 3; }
.parkmap .home { fill: var(--editorial-white); stroke: var(--press-black); stroke-width: 2; }
.parkmap .home-label { font: 700 11px var(--sans); letter-spacing: .08em; fill: var(--press-black); }
.parkmap .here { fill: var(--press-black); stroke: var(--editorial-white); stroke-width: 2; }
.map-key { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 14px 0 0; padding: 0; list-style: none; font: 400 12px/1.4 var(--sans); color: var(--ink-soft); }
.map-key li { display: inline-flex; align-items: center; gap: 7px; }
.map-key i { width: 11px; height: 11px; border-radius: 50%; border: 1px solid var(--press-black); display: inline-block; }
.map-key .b0 { background: var(--press-black); }
.map-key .b1 { background: #3d3d3d; }
.map-key .b2 { background: var(--dispatch-grey); }
.map-key .b3 { background: #a6a6a6; }
.map-key .b4 { background: var(--editorial-white); }
.map-key .closed { background: var(--editorial-white); border-style: dashed; }

/* ------- The full table and its filter row ------- */
.park-chips { display: none; flex-wrap: wrap; gap: 8px; margin: 18px 0 14px; }
html.js .park-chips { display: flex; }
.park-chips .shown { font: 400 12px var(--sans); color: var(--ink-soft); align-self: center; margin-left: 4px; }
.data-table tr[hidden] { display: none; }
.data-table .park a { color: var(--ink); font-weight: 700; text-decoration: none; }
.data-table .park a:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--blue-slate); }
.data-table .park .sub { display: block; font-weight: 400; }
.data-table .park .phone { display: none; }
.data-table .band-row td { padding-top: 22px; font: 700 11px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); border-bottom: 2px solid var(--ink); }
.data-table .closed-tag { font: 700 10px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }

/* ------- A park's page ------- */
.park-head .facts { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 14px 0 0; font: 400 13px/1.5 var(--sans); color: var(--ink-soft); }
.park-head .facts a { color: inherit; }
.locator { margin: 28px 0 0; }
.locator svg { max-width: 560px; }
.whats-there { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; margin: 8px 0 20px; }
.whats-there h3 { font: 700 11px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); margin: 14px 0 8px; padding-top: 10px; border-top: 2px solid var(--ink); }
.whats-there ul { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 20px; font: 400 14px/1.5 var(--sans); color: var(--ink-muted); }
.whats-there li { break-inside: avoid; padding: 3px 0; }
.camp-list { list-style: none; margin: 0 0 20px; padding: 0; font-family: var(--sans); }
.camp-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; padding: 10px 0; border-top: 1px solid var(--hairline); font-size: 14px; color: var(--ink); }
.camp-list li:last-child { border-bottom: 1px solid var(--hairline); }
.camp-list .types { font-size: 12px; color: var(--ink-soft); text-align: right; }
.contact { font: 400 15px/1.6 var(--sans); color: var(--ink-muted); margin: 0 0 16px; }
.contact a.tel { white-space: nowrap; }
.nearby { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 20px; margin: 8px 0 0; padding: 0; list-style: none; font-family: var(--sans); }
.nearby li { border-top: 2px solid var(--ink); padding-top: 10px; }
.nearby a { display: block; font: 700 16px/1.3 var(--serif); color: var(--ink); text-decoration: none; }
.nearby a:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--blue-slate); }
.nearby span { display: block; margin-top: 4px; font-size: 12px; line-height: 1.4; color: var(--ink-soft); }
.back-to-guide { font: 700 12px var(--sans); letter-spacing: .06em; text-transform: uppercase; }
.back-to-guide a { color: var(--ink); }

@media (max-width: 760px) {
  .whats-there { grid-template-columns: 1fr; }
  .nearby { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; }
}
/* On a phone article.css stacks a table's cells into a card per row, which
   would make the 69-park table about 16,000px long. Here each park is its
   name and county with the drive beside it and one line below for its
   trails and overnight (.phone, hidden on wider screens, where those are
   columns), and the section lists keep their figures two to a line. */
@media (max-width: 640px) {
  .data-table[data-all-parks] tr[data-park] { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 14px; padding: 12px 0 13px; }
  .data-table[data-all-parks] tr[data-park][hidden] { display: none; }
  .data-table[data-all-parks] tr[data-park] td.park { grid-column: 1; grid-row: 1; font-size: 16px; margin: 0; }
  .data-table[data-all-parks] tr[data-park] td:first-child { grid-column: 2; grid-row: 1; text-align: right; font-size: 15px; margin: 0; }
  .data-table[data-all-parks] tr[data-park] td:first-child::before { content: none; }
  .data-table[data-all-parks] tr[data-park] td:nth-child(n+3) { display: none; }
  .data-table[data-all-parks] .park .phone { display: block; margin-top: 3px; color: var(--ink-muted); }
  .data-table[data-all-parks] .band-row td { padding-top: 18px; }
  .data-table[data-trails] td:first-child { font-size: 15px; }
  .data-table[data-list] tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
  .data-table[data-list] td:first-child { grid-column: 1 / -1; margin-bottom: 0; }
}
@media (max-width: 480px) {
  .whats-there ul { columns: 1; }
}