/* ==========================================================================
   oa-elevation-v2.css — elevation + hero-system pass
   --------------------------------------------------------------------------
   v1 (31 May): lifted the finder dropdown + tools cards off the cream
   background (near-white surface + shadow).
   v2 (31 May, r2): hero system — consistent hero heights across pages, fix the
   homepage dropdown being clipped by the hero's overflow, stronger hero text
   scrim for legibility, and an accordion treatment for the activity-page FAQ.
   Loaded site-wide, LAST (priority 100), so it wins on source order over
   brand-v8 / theme-v12 / oa-home.
   ========================================================================== */

:root { --oa-surface-1: #FFFCF6; } /* warm near-white — one step above cream/paper */

/* ===== Elevation (v1) ===================================================== */

/* Hero finder dropdown — float clearly above the cream section beneath the
   hero, and show the whole list (the 10-region menu previously scrolled). */
.finder-field .oa-cs-list {
	background: var(--oa-surface-1);
	border-color: rgba(19, 19, 19, 0.10);
	box-shadow: 0 28px 56px -16px rgba(8, 15, 25, 0.55);
	max-height: min(72vh, 540px);
}

/* Tools cards — a real surface + a resting shadow so the grid reads as cards. */
.tool-card {
	background: var(--oa-surface-1);
	border-color: rgba(19, 19, 19, 0.10);
	box-shadow: 0 10px 26px -14px rgba(19, 19, 19, 0.16);
}
.tool-card.is-live:hover { box-shadow: 0 30px 50px -24px rgba(19, 19, 19, 0.22); }
.tool-card.is-soon { background: rgba(255, 253, 246, 0.55); opacity: 0.75; }
.tool-card.is-live:hover .cta { color: var(--ink); border-color: var(--ink); }

/* ===== Hero system (v2) =================================================== */

/* 1. CLIPPING FIX — the homepage hero has overflow:hidden, which clipped the
      open finder dropdown so its lower options vanished behind the next
      section. Let the hero overflow; the background image is an inset:0 layer
      so it stays bounded regardless. */
.home-hero { overflow: visible; }

/* 2. CONSISTENT HEIGHTS — .page-head heroes (activity / spot / map / trip
      reports / tools / contact) had no min-height, so they ranged from tall
      (pages with stat rows) to very short (a spot with little above-fold
      content). Give them a shared floor so they read as one family. */
.page-head { min-height: 58vh; display: flex; flex-direction: column; }
.page-head > .wrap { margin-top: auto; margin-bottom: 0; }

/* 3. TEXT LEGIBILITY — the homepage hero scrim was very light at the top
      (~0.10), so the white nav + subtitle struggled over bright sky. Deepen
      the gradient at the top (for the nav) and the lower third (for the
      subtitle) while keeping the middle open so the photo still reads. */
.home-hero .bg::after {
	background: linear-gradient(
		180deg,
		rgba(10, 18, 28, 0.55) 0%,
		rgba(10, 18, 28, 0.28) 26%,
		rgba(10, 18, 28, 0.45) 68%,
		rgba(10, 18, 28, 0.82) 100%
	);
}

/* ===== Activity-page FAQ accordion (v2) =================================== */

/* The "Common questions" block sat fully expanded, pushing the actual spots a
   long way down the page. Collapse each question into a native <details>
   accordion (no JS) so the section is a compact list by default and the spot
   grid is much closer to the fold. Content stays in the DOM for SEO/AEO. */
.cat-faq .faq-list {
	display: block;
	max-width: 820px;
}
.cat-faq details.faq-row {
	border-top: 1px solid var(--rule, rgba(19, 19, 19, 0.12));
	padding: 0;
}
.cat-faq details.faq-row:last-child {
	border-bottom: 1px solid var(--rule, rgba(19, 19, 19, 0.12));
}
.cat-faq details.faq-row > summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 24px;
	padding: 22px 2px;
	font-family: var(--serif, 'Bricolage Grotesque'), serif;
	font-weight: 700;
	font-size: 19px;
	line-height: 1.25;
	color: var(--ink);
	transition: color 0.15s;
}
.cat-faq details.faq-row > summary::-webkit-details-marker { display: none; }
.cat-faq details.faq-row > summary:hover { color: var(--muted); }
.cat-faq details.faq-row > summary::after {
	content: "+";
	flex: none;
	font-family: var(--sans, 'Manrope'), sans-serif;
	font-weight: 400;
	font-size: 26px;
	line-height: 1;
	color: var(--ink);
	transition: transform 0.2s;
}
.cat-faq details.faq-row[open] > summary::after {
	content: "\2212"; /* minus */
}
.cat-faq details.faq-row .faq-a {
	padding: 0 2px 24px;
}
.cat-faq details.faq-row .faq-a p {
	margin: 0;
	font-family: var(--sans, 'Manrope'), sans-serif;
	font-size: 16px;
	line-height: 1.6;
	color: var(--ink-2, #3a3a3a);
	max-width: 72ch;
}