/* ============================================================================
   spotwaterfalls.com - template stylesheet (written from scratch, no Cassiopeia).
   Field-guide / expedition cartography. Design tokens + minimal base + the full
   CD responsive system. Page look is delivered by the inline-styled html/ overrides;
   this file provides the tokens they reference, a base reset, and the breakpoints.
   ============================================================================ */

:root {
  /* Claude Design colour tokens (HANDOFF §2) */
  --paper:   #E9EDE6;   /* base / canvas            */
  --paper2:  #DEE4D8;   /* secondary panels / stripes */
  --panel:   #F3F1E7;   /* cards / raised surfaces  */
  --ink:     #16211C;   /* text, rules, borders     */
  --inksoft: #3B4842;   /* secondary text           */
  --hydro:   #0E3A46;   /* deep water, links, active */
  --spruce:  #1F4A38;   /* secondary water accents  */
  --contour: #AEB9A6;   /* topo lines / hairlines   */
  --line:    #C4CCBD;   /* hairline borders         */
  --orange:  #E0522B;   /* PRIMARY "Book a tour" CTA - large bold only */
  --orange2: #BE3E1C;   /* small/non-bold Tours pills (AA 5.39:1)      */
}

/* ---- Base reset / canvas ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.site {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Archivo', system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  overflow-x: hidden;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
img { max-width: 100%; height: auto; }
a { color: var(--hydro); }

/* Field-guide display + mono families available site-wide */
h1, h2, h3, .sw-display { font-family: 'Zilla Slab', Georgia, serif; letter-spacing: -0.01em; }
.sw-mono { font-family: 'Space Mono', ui-monospace, monospace; }

/* The single content column: the overrides paint their own full-bleed sections,
   so <main> is just a flex-growing wrapper - no gutters, no max-width, no grid. */
.sw-main { flex: 1 0 auto; width: 100%; display: block; }
.sw-site-header, .sw-site-footer, .sw-banner { width: 100%; display: block; }

/* Browse + country ("atlas") pages: the category override renders inside a bare
   .sw-atlas div with no container of its own, so give it the same 1200px centred
   gutter every other section uses (home/fall/footer). Without this it runs edge to
   edge - the heading + toolbar + card grid jam against the viewport's left edge. */
.sw-atlas { max-width: 1200px; margin: 0 auto; padding: 40px 24px; box-sizing: border-box; }

/* Breadcrumbs (if the module is published) sit unobtrusively above the component */
.sw-main > .breadcrumb, .sw-main nav[aria-label] { max-width: 1200px; margin: 0 auto; padding: 8px 24px; }

/* ---- Accessibility: keyboard focus ring site-wide (WCAG 2.4.7) ---- */
:focus-visible { outline: 2px solid var(--hydro); outline-offset: 2px; border-radius: 3px; }
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--hydro); outline-offset: 2px; }

/* Text selection - neutral ink tint (user runs Redshift; warm tints wash out at night). */
::selection { background: rgba(14, 58, 70, 0.22); color: var(--ink); }

/* A-Z action pills meet the 24px min touch target. */
.az-actions a { min-height: 24px; display: inline-flex; align-items: center; }

/* Every FallCard establishes its own positioning + clips children, so absolutely
   positioned badges/flags can never escape to the page. */
.sw-fallcard { position: relative; overflow: hidden; }

/* Hide the auto-rendered custom-field list on articles - the override places fields itself. */
.com-content-article__extra-fields,
dl.article-info.fields,
.fields-container { display: none; }

/* ============================================================================
   RESPONSIVE SYSTEM - CD v3 breakpoints (HANDOFF §4), mapped to the live DOM
   (inline-grid elements targeted via attribute selectors).
   1024: hero stacks | 900: waterfall 2-col stacks + rail static
   820: remaining 2-col grids stack, footer 2-col, nav wraps | 640: mobile A-Z
   560: h1 shrinks, footer 1-col | 400: narrow-phone h1 step
   ============================================================================ */

/* <=1024: homepage hero (thesis + drop-chart) stacks */
@media (max-width: 1024px) {
  .sw-home > section:first-child > div[style*="grid-template-columns"] { display: block !important; }
}

/* <=900: waterfall page 2-col body + hero stack; sticky rail static + above season chart */
@media (max-width: 900px) {
  .sw-page div[style*="grid-template-columns:1.5fr 1fr"],
  .sw-page div[style*="grid-template-columns: 1.5fr 1fr"] { grid-template-columns: 1fr !important; }
  .sw-page div[style*="position:sticky"],
  .sw-page div[style*="position: sticky"] { position: static !important; top: auto !important; order: -1 !important; }
  .sw-stay div[style*="grid-template-columns:1.3fr 1fr"],
  .sw-stay div[style*="grid-template-columns: 1.3fr 1fr"] { grid-template-columns: 1fr !important; }
  .sw-plan-grid { grid-template-columns: 1fr !important; }
}

/* <=820: remaining 2-col grids stack; footer to 2-col; nav links wrap */
@media (max-width: 820px) {
  .sw-about div[style*="grid-template-columns"] { display: block !important; }
  .sw-about > div > div > div:last-child { margin-top: 20px; }
  .sw-foot { grid-template-columns: 1fr 1fr !important; }
  .sw-nav { flex-wrap: wrap; row-gap: 8px; }
  .sw-browse .sw-cont-tab { min-width: 33% !important; }
  .sw-page .sw-mobile-book { display: block; }
  .sw-page { padding-bottom: 76px; }
}

/* <=560: display headline shrinks; footer single column; footbar left-aligns */
@media (max-width: 560px) {
  .sw-home h1, .sw-page h1 { font-size: 40px !important; }
  .sw-foot { grid-template-columns: 1fr !important; }
  .sw-footbar { justify-content: flex-start !important; }
  .sw-nav-links { gap: 14px !important; }
  .sw-navrandom { margin-left: 0 !important; }
}

/* <=400: narrow-phone headline step (CD's .sw-h1 34px) - prevents mid-word wrap. */
@media (max-width: 400px) {
  .sw-home h1, .sw-page h1 { font-size: 34px !important; }
}

/* ===== Mobile A-Z (CD v4): <=640 the table header hides, a Sort-by select shows,
   and each row reflows to a stacked card. ===== */
@media (max-width: 640px) {
  .sw-azsort-m { display: flex !important; }
  .sw-azhead { display: none !important; }
  .sw-azwrap { overflow-x: visible !important; }
  .sw-azinner { min-width: 0 !important; }
  .sw-azrow { display: flex !important; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 11px 13px !important; }
  .sw-azrow .az-num { display: none !important; }
  .sw-azrow .az-name { flex: 1 1 auto; font-size: 17px !important; padding: 0 !important; }
  .sw-azrow .az-drop { flex: none; padding: 0 !important; font-size: 13px !important; white-space: nowrap; color: var(--inksoft); }
  .sw-azrow .az-country { flex: 0 1 auto; order: 2; padding: 0 !important; }
  .sw-azrow .az-grade { flex: 0 1 auto; order: 3; padding: 0 !important; margin-left: auto; }
  .sw-azrow .az-actions { flex: 1 1 100%; order: 4; justify-content: flex-start !important; padding: 5px 0 0 0 !important; }
}

/* ---- Mobile sticky Book (Tours) bar - CD non-negotiable; injected on waterfall pages ---- */
.sw-mobile-book {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: var(--paper); border-top: 1.5px solid var(--ink);
}
.sw-mobile-book a {
  display: block; text-align: center; text-decoration: none;
  background: var(--orange); color: #fff; border: 1.5px solid var(--ink);
  border-radius: 3px; padding: 13px; font-family: 'Zilla Slab', serif; font-weight: 700; font-size: 18px;
}

/* ---- "Ask Kayak AI" helper (rail): lead line + copyable prompt + Copy button.
   Same pattern as worldheritagex's .whx-ai, drawn in the field-guide palette. ---- */
.sw-ai { margin: 4px 0 0; }
.sw-ai__lead {
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: 12.5px; color: var(--inksoft); margin: 0 0 10px; line-height: 1.5;
}
.sw-ai__link { color: var(--hydro); text-decoration: none; border-bottom: 1px solid var(--hydro); }
.sw-ai__link:hover { color: var(--ink); border-bottom-color: var(--ink); }
.sw-ai__box {
  display: flex; align-items: stretch;
  border: 1.5px solid var(--ink); border-radius: 3px; overflow: hidden;
}
.sw-ai__prompt {
  flex: 1 1 auto; font-family: 'Archivo', system-ui, sans-serif; font-size: 12px;
  color: var(--ink); background: var(--panel); padding: 11px 14px; line-height: 1.4;
}
.sw-ai__copy {
  flex: none; font-family: 'Space Mono', monospace; font-size: 10px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: #fff; background: var(--hydro);
  border: none; border-left: 1.5px solid var(--ink); cursor: pointer; padding: 0 16px;
  transition: background 0.15s ease;
}
.sw-ai__copy:hover, .sw-ai__copy.is-copied { background: var(--ink); }