/* ==========================================================================
   SurfCheck.nz — site-wide foundation (v3)
   ========================================================================== */

:root {
  --bg:           #06121f;
  --bg-2:         #0b1b2e;
  --bg-3:         #0f2238;
  --surface:      #122b46;
  --surface-2:    #173552;
  --border:       rgba(255,255,255,0.08);
  --border-2:     rgba(255,255,255,0.14);

  --text:         #eef2f7;
  --text-2:       #b4c2d3;
  --text-3:       #7e8ea3;
  --text-muted:   #5f6f86;

  --accent:       #5fb7ff;
  --accent-2:     #7ac8ff;
  --accent-dim:   #2c6aa3;
  --sand:         #e8b84b;
  --teal:         #22c5ad;

  /* Rating palette — 7 tiers (2026-06-25). Warm low end, blue MINT, cyan EPIC.
     FLAT grey · GRIM deep red · POOR soft red · FAIR amber · GOOD green ·
     MINT brand blue · EPIC electric cyan. The component CSS derives every
     border/background tint from these via color-mix(), so changing a tier's
     colour (or adding one) is a one-line edit here. */
  --epic:         #4ddeff;
  --mint:         #4a8fd6;
  --good:         #41a05e;
  --fair:         #e8b84b;
  --poor:         #e08585;
  --grim:         #c85048;
  --flat:         #7d8c9a;

  --r-1:          6px;
  --r-2:          10px;
  --r-3:          14px;
  --r-4:          20px;

  --f-display:    clamp(36px, 5.5vw, 60px);
  --f-h1:         clamp(28px, 4vw, 42px);
  --f-h2:         clamp(22px, 3vw, 30px);
  --f-h3:         clamp(18px, 2.2vw, 22px);
  --f-body:       16px;
  --f-small:      14px;
  --f-tiny:       12px;

  --gap-1:        4px;
  --gap-2:        8px;
  --gap-3:        12px;
  --gap-4:        16px;
  --gap-5:        24px;
  --gap-6:        32px;
  --gap-7:        48px;
  --gap-8:        64px;

  --max-w:        1400px;
  --header-h:     56px;

  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; overflow-x: hidden; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: var(--f-body);
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
  background-image:
    radial-gradient(1400px 800px at 20% -10%, rgba(95,183,255,0.07) 0%, transparent 60%),
    radial-gradient(1200px 600px at 90% 5%, rgba(34,197,173,0.05) 0%, transparent 55%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100dvh;
}

a { color: var(--accent); text-decoration: none; transition: color 0.15s; }
a:hover { color: var(--accent-2); }

img { max-width: 100%; height: auto; display: block; }

/* ── Site header ────────────────────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(6, 18, 31, 0.85);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--border);
}

.site-header-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--gap-5);
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: var(--gap-4);
}
.site-header-spacer { flex: 1; }

.brand-wordmark {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-2);
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -0.01em;
  color: var(--text);
  white-space: nowrap;
  flex-shrink: 0;
}
.brand-wordmark:hover { color: var(--text); }
.brand-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 12px rgba(95,183,255,0.7);
  flex-shrink: 0;
}
.brand-tld { color: var(--accent); margin-left: -2px; }

.primary-nav {
  display: flex;
  align-items: center;
  gap: var(--gap-5);
  /* Visual breathing room between the brand wordmark and the first nav
     item — keeps the logo feeling like its own element, not part of the
     menu. Sits on top of the .site-header-inner's own flex gap. */
  margin-left: var(--gap-4);
}
.primary-nav a {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text-2);
  white-space: nowrap;
}
.primary-nav a:hover { color: var(--text); }
.primary-nav a.active { color: var(--accent); }
.nav-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 2px 5px;
  margin-left: 4px;
  vertical-align: 2px;
  background: var(--accent);
  color: var(--bg);
  border-radius: 3px;
  text-transform: uppercase;
}

/* Header actions (right side: favourites pill + Book CTA) */
.header-actions {
  display: flex;
  align-items: center;
  gap: var(--gap-3);
  flex-shrink: 0;
}
.header-fav-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border);
  color: var(--text-2);
  transition: background 0.15s, color 0.15s;
}
.header-fav-pill:hover {
  background: rgba(255,255,255,0.1);
  color: var(--text);
}
.header-fav-pill .star { color: var(--sand); font-size: 13px; }
/* Always show the pill — discoverability of /favourites/. When empty we
   suppress just the count so it reads as a plain "★" affordance. */
.header-fav-pill[data-count="0"] .count { display: none; }
.header-fav-pill .count {
  font-variant-numeric: tabular-nums;
}

/* Desktop: hide the in-nav pill (it's the mobile-only fallback) */
.primary-nav .header-fav-pill { display: none; }

.btn-header-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
  background: var(--accent);
  color: #04101c;
  border: 1px solid var(--accent);
  transition: background 0.15s, transform 0.05s;
  white-space: nowrap;
}
.btn-header-cta:hover {
  background: var(--accent-2);
  border-color: var(--accent-2);
  color: #04101c;
}
.btn-header-cta:active { transform: translateY(1px); }

/* ── Header search trigger ──────────────────────────────────────────────────
   "Fake input" button in the header. Clicking it opens .search-overlay.
   On desktop it looks like a search input with a ⌘K hint; on mobile it
   collapses to an icon-only button so it fits next to the hamburger. */
.header-search-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 999px;
  /* Slightly darker bg + stronger border so the pill stays visible on
     spot/article pages where the sticky header sits over a bright hero
     image — the previous rgba(255,255,255,0.04) was washed out. */
  background: rgba(0,0,0,0.28);
  border: 1px solid rgba(255,255,255,0.12);
  color: var(--text-2);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  min-width: 220px;
  justify-content: flex-start;
}
.header-search-trigger:hover {
  background: rgba(0,0,0,0.42);
  border-color: rgba(255,255,255,0.22);
  color: var(--text);
}
.header-search-trigger svg { flex-shrink: 0; color: var(--text-2); opacity: 0.85; }
.header-search-trigger-label { flex: 1; text-align: left; }
.header-search-trigger-kbd {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 5px;
  letter-spacing: 0.04em;
}
/* Below 1024px we don't have room for a full fake-input — collapse to an
   icon button next to the fav pill. */
@media (max-width: 1023px) {
  .header-search-trigger {
    min-width: 0;
    padding: 8px;
    border-radius: 999px;
  }
  .header-search-trigger-label,
  .header-search-trigger-kbd { display: none; }
}

/* Mobile: hide nav + fav pill (move into hamburger), keep brand + CTA visible.
   Spacer is hidden on mobile (line 225), so push .header-actions to the right
   with margin-left:auto — otherwise it sits flush with the logo on the left. */
@media (max-width: 720px) {
  .header-actions {
    gap: var(--gap-2);
    margin-left: auto;
  }
  .header-fav-pill { display: none !important; }   /* move into hamburger menu */
  .btn-header-cta {
    padding: 7px 11px;
    font-size: 12.5px;
  }
}

/* ── Search overlay ─────────────────────────────────────────────────────────
   Fixed full-viewport modal anchored from the top. Hidden by default; .open
   adds the visible state via opacity + transform. The bg div is the click
   target for closing on click-outside (data-close="1"). */
.search-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 8vh;
  opacity: 0;
  transition: opacity 0.18s ease;
  pointer-events: none;
}
.search-overlay.open {
  opacity: 1;
  pointer-events: auto;
}
.search-overlay-bg {
  position: absolute;
  inset: 0;
  background: rgba(0, 8, 18, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: pointer;
}
.search-overlay-panel {
  position: relative;
  width: min(640px, calc(100vw - 32px));
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  background: rgba(13, 26, 41, 0.98);
  border: 1px solid var(--border-2);
  border-radius: var(--r-3);
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  overflow: hidden;
  transform: translateY(-8px) scale(0.99);
  transition: transform 0.18s ease;
}
.search-overlay.open .search-overlay-panel { transform: translateY(0) scale(1); }

.search-overlay-inputrow {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,0.02);
}
.search-overlay-icon { color: var(--text-muted); display: inline-flex; }
.search-overlay-icon svg { width: 18px; height: 18px; }
.search-overlay-input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: 0;
  color: var(--text);
  font-size: 16px;        /* 16px prevents iOS auto-zoom on focus */
  font-family: inherit;
  padding: 4px 0;
}
.search-overlay-input::placeholder { color: var(--text-muted); }
.search-overlay-input::-webkit-search-cancel-button { display: none; }
.search-overlay-close {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  border: 0;
  color: var(--text-2);
  font-size: 13px;
  cursor: pointer;
  flex-shrink: 0;
  font-family: inherit;
  transition: background 0.15s;
}
.search-overlay-close:hover { background: rgba(255,255,255,0.12); color: var(--text); }

.search-overlay-results {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 6px 0;
}
.search-overlay-results::-webkit-scrollbar { width: 10px; }
.search-overlay-results::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.08);
  border-radius: 999px;
}

.search-section-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 10px 16px 6px;
}

.search-result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.08s;
  border-left: 3px solid transparent;
}
.search-result:hover,
.search-result.active {
  background: rgba(95,183,255,0.12);
  border-left-color: var(--accent);
  color: var(--text);
}
.search-result-name {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}
.search-result-name mark {
  background: transparent;
  color: var(--accent);
  font-weight: 700;
}
/* Region results get a small "Region" badge in front of the name so the
   user can tell at a glance that this jumps to a region landing page,
   not a spot detail page. */
.search-result-kind {
  display: inline-block;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: rgba(95,183,255,0.15);
  border: 1px solid rgba(95,183,255,0.30);
  color: var(--accent);
  padding: 1px 6px;
  border-radius: 4px;
  margin-right: 8px;
  vertical-align: 1px;
}
.search-result-region {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
}

.search-overlay-empty,
.search-loading {
  padding: 24px 16px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13.5px;
}

.search-overlay-hint {
  padding: 10px 16px;
  font-size: 11.5px;
  color: var(--text-muted);
  border-top: 1px solid var(--border);
  background: rgba(255,255,255,0.02);
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.search-overlay-hint kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  padding: 1px 4px;
  font-family: inherit;
  font-size: 10.5px;
  font-weight: 600;
  background: rgba(255,255,255,0.08);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-2);
}
/* Below 540px the hint row eats too much height — hide it. */
@media (max-width: 540px) {
  .search-overlay { padding-top: 0; }
  .search-overlay-panel {
    width: 100vw;
    max-height: 100vh;
    height: 100vh;
    border-radius: 0;
    border: 0;
  }
  .search-overlay-hint { display: none; }
}

/* Lock the page behind the overlay so background scrolling doesn't leak. */
html.no-scroll, html.no-scroll body { overflow: hidden; }

/* Hamburger button — DESKTOP HIDDEN by default with !important to beat any cache leak */
.nav-toggle {
  display: none !important;
  background: transparent;
  border: 0;
  color: var(--text);
  padding: 8px;
  margin: 0 -8px 0 0;
  cursor: pointer;
  border-radius: 6px;
}
.nav-toggle:hover { background: rgba(255,255,255,0.06); }
.nav-toggle svg { display: block; }

/* Mobile (≤ 720px): show hamburger, hide inline nav until toggled */
@media (max-width: 720px) {
  .site-header-spacer { display: none; }
  .nav-toggle { display: inline-flex !important; }
  .primary-nav {
    position: fixed;
    top: var(--header-h);
    left: 0; right: 0;
    background: rgba(6, 18, 31, 0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--gap-2) 0 var(--gap-3);
    max-height: 0;
    overflow: hidden;
    visibility: hidden;
    transition: max-height 0.25s ease, visibility 0s linear 0.25s;
    z-index: 49;
  }
  .primary-nav.open {
    max-height: 500px;
    visibility: visible;
    transition: max-height 0.3s ease, visibility 0s linear;
  }
  .primary-nav a {
    padding: 14px var(--gap-5);
    border-bottom: 1px solid var(--border);
    font-size: 15.5px;
  }
  .primary-nav a:last-child { border-bottom: 0; }
  /* Favourites pill shown inside hamburger menu (mobile) */
  .primary-nav .header-fav-pill {
    display: inline-flex !important;
    margin: var(--gap-3) var(--gap-5) 0;
    align-self: flex-start;
  }
}

/* ── Container ──────────────────────────────────────────────────────────── */
.container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--gap-5);
}

/* ── Site footer ────────────────────────────────────────────────────────── */
.site-footer {
  margin-top: var(--gap-8);
  padding: var(--gap-7) 0 var(--gap-6);
  border-top: 1px solid var(--border);
  background: rgba(0,0,0,0.18);
}
.site-footer-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--gap-5);
}
.footer-brand-row {
  margin-bottom: var(--gap-6);
  padding-bottom: var(--gap-5);
  border-bottom: 1px solid var(--border);
}
.footer-cols-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap-5);
}
@media (min-width: 768px) {
  .site-footer-inner {
    display: grid;
    grid-template-columns: 2fr 3fr;
    gap: var(--gap-7);
  }
  .footer-brand-row {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
  }
}

.footer-brand .brand-wordmark { font-size: 18px; }
.footer-tagline {
  margin: var(--gap-3) 0 0;
  color: var(--text-3);
  font-size: 14px;
  line-height: 1.55;
  max-width: 340px;
}
.footer-powered {
  margin-top: var(--gap-4);
  font-size: 12.5px;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.footer-powered a { color: var(--text-2); }
.footer-powered a:hover { color: var(--accent); }

.footer-col h4 {
  margin: 0 0 var(--gap-3);
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}
.footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.footer-col a {
  font-size: 13.5px;
  color: var(--text-2);
}
.footer-col a:hover { color: var(--accent); }

.footer-bottom {
  max-width: var(--max-w);
  margin: var(--gap-6) auto 0;
  padding: var(--gap-4) var(--gap-5) 0;
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--gap-3);
  font-size: 12.5px;
  color: var(--text-muted);
}

/* ── Save-star (favourite/bookmark toggle) ─────────────────────────────────
   Universal save-star used across cards, story modal, map drawer, etc.
   Implemented as <span role="button"> so it can sit inside a clickable parent
   without nested-interactive HTML breakage. Per-page CSS (learn.css, map.css,
   stories.css) overrides position/size/colour for context; this file owns the
   base shape + interaction behaviour. */
.save-star {
  position: absolute;
  top: 10px; right: 10px;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.5);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  transition: background 0.15s, color 0.15s, transform 0.05s, border-color 0.15s;
  user-select: none;
  -webkit-user-select: none;
  font-family: inherit;
  padding: 0;
}
.save-star:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
/* Hover styles ONLY on devices with true pointer-hover. On touch devices,
   :hover sticks after tap and looks like "saved" — bug Che caught. */
@media (hover: hover) {
  .save-star:hover {
    background: rgba(0,0,0,0.7);
    color: var(--sand);
    border-color: rgba(232,184,75,0.5);
  }
}
.save-star.saved {
  background: rgba(232,184,75,0.22);
  color: var(--sand);
  border-color: rgba(232,184,75,0.6);
  box-shadow: 0 0 12px rgba(232,184,75,0.4);
}
.save-star:active { transform: scale(0.92); }

/* ── Utilities ──────────────────────────────────────────────────────────── */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-2);
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.pill-accent {
  color: var(--accent);
  border-color: rgba(95,183,255,0.4);
  background: rgba(95,183,255,0.12);
}

/* ── Shared CTA buttons + Aotearoa Surf promo block ──────────────────────
   Used by spot pages, article pages, lessons page, homepage, etc. Originally
   lived in spot.css — moved here so article pages get the same styling. */
.cta-stack { display: grid; gap: var(--gap-2); }
.cta-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-radius: var(--r-2);
  border: 1px solid var(--border-2);
  background: rgba(255,255,255,0.04);
  color: var(--text);
  transition: background 0.15s, border-color 0.15s, transform 0.05s;
  text-align: left;
  cursor: pointer;
  line-height: 1.3;
  width: 100%;
  font-weight: 700;
}
.cta-btn:hover {
  background: rgba(255,255,255,0.08);
  border-color: var(--border-2);
  color: var(--text);
}
.cta-btn:active { transform: translateY(1px); }
.cta-btn.primary {
  background: var(--accent);
  color: #04101c;
  border-color: var(--accent);
}
.cta-btn.primary:hover {
  background: var(--accent-2);
  border-color: var(--accent-2);
  color: #04101c;
}
.cta-btn .label-main  { display: block; font-size: 14.5px; font-weight: 700; }
.cta-btn .label-sub   { display: block; font-size: 12px; font-weight: 500; opacity: 0.75; margin-top: 2px; }
.cta-btn .label-arrow { font-size: 18px; font-weight: 400; flex-shrink: 0; margin-left: 12px; }

.aotearoa-promo {
  margin: var(--gap-6) 0;
  padding: var(--gap-5);
  background: linear-gradient(135deg, rgba(34,197,173,0.10) 0%, rgba(34,197,173,0.04) 100%);
  border: 1px solid rgba(34,197,173,0.30);
  border-radius: var(--r-3);
}
.aotearoa-promo h3 {
  margin: 0 0 var(--gap-2);
  font-size: 18px; font-weight: 700; color: var(--teal);
}
.aotearoa-promo p {
  margin: 0 0 var(--gap-3);
  color: var(--text-2);
  font-size: 14.5px; line-height: 1.55;
}
.aotearoa-promo .promo-actions { display: flex; flex-wrap: wrap; gap: var(--gap-2); }
.aotearoa-promo .cta-btn { flex: 1 1 auto; min-width: 220px; width: auto; }

/* ── FareHarbor Lightframe overrides ──────────────────────────────────────
   FareHarbor's default lightframe iframe sizes to 100% × 100% of the viewport,
   which hides the underlying page completely (you see the iframe's own white
   background, not the dark shade behind). To get the modal-style overlay
   (centered card with dark shade visible around it, like Aotearoa Surf's),
   we constrain the iframe to a centered card and force the shade dark.

   Both layers required:
     1. Iframe sized to a centered card (max 960×820, never exceeds 94vw/92vh)
     2. Shade behind iframe is our dark site colour at 85% opacity. */

/* CSS-variable level (matches FareHarbor's cascade pattern, belt-and-braces) */
:root,
html,
html.fareharbor-lightframe-shade--dark,
html.fareharbor-lightframe-shade--light,
html.fareharbor-lightframe-shade--auto {
  --lightframe-shade-surface: rgba(4, 12, 24, 0.85) !important;
}

/* Backdrop (shade) — dark translucent over the surfcheck page */
#fareharbor-lightframe-shade,
.fareharbor-is-showing #fareharbor-lightframe-shade {
  background-color: rgba(4, 12, 24, 0.85) !important;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

/* Iframe — constrained centered card with rounded corners + soft shadow */
#fareharbor-lightframe-iframe,
.fareharbor-is-showing #fareharbor-lightframe-iframe {
  width: min(960px, 94vw) !important;
  height: min(820px, 92vh) !important;
  max-width: 94vw !important;
  max-height: 92vh !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) !important;
  border-radius: 14px !important;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55) !important;
  background: transparent !important;
}

/* Loading spinner — keep it centered too */
#fareharbor-lightframe-loading,
.fareharbor-is-loading #fareharbor-lightframe-loading {
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) !important;
}

/* ==========================================================================
   PAGE HEROES — background-image patterns shared across top of every page

   Usage: any existing hero/intro section can opt-in by adding `.page-hero-bg`
   AND setting --page-hero-img custom property. Pages with no image set
   degrade gracefully to the existing gradient/dark background.

     <section class="lessons-hero page-hero-bg"
              style="--page-hero-img:url('/assets/img/page-heroes/page-hero-test.jpg?v=1');">
       <div class="lessons-hero-inner">...</div>
     </section>

   Variants:
     .page-hero-bg.slim       — shorter min-height for Spots / Forecast pages
     (default)                — taller for Home / Lessons / Learn / Stories /
                                Favourites / Regions
   ========================================================================== */
.page-hero-bg {
  position: relative;
  /* Important on the image-related declarations because per-page CSS
     (.lessons-hero, .fav-hero, etc.) all set `background:` shorthand
     which wipes background-image. We want the photo to win. */
  background-image: var(--page-hero-img, none) !important;
  background-size: cover !important;
  /* --page-hero-pos lets a page bias the crop toward the water when the
     image's surf lives below centre (region heroes, Che 2026-06-12) */
  background-position: var(--page-hero-pos, center) !important;
  background-repeat: no-repeat !important;
  /* Per-page heroes set their own border-bottom — disable so the photo
     blends into the next section without the rendered hairline that
     looks awkward at the dark/light boundary. */
  border-bottom: none !important;
  isolation: isolate;
  overflow: hidden;
}
/* Dark gradient overlay above the image, beneath the content. Three-stop
   gradient = readable text at the bottom, darker at top + bottom, lighter
   middle so the photo's hero subject still reads. */
.page-hero-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(6, 18, 31, 0.55) 0%,
      rgba(6, 18, 31, 0.20) 40%,
      rgba(6, 18, 31, 0.30) 75%,
      rgba(6, 18, 31, 0.65) 100%);
  z-index: 0;
  pointer-events: none;
}
/* Make sure ALL inner content sits above the overlay */
.page-hero-bg > * { position: relative; z-index: 1; }

/* Min-heights so the photo always reads.
   Default = roomy for marketing pages, slim = tight for utility list pages. */
.page-hero-bg                    { min-height: 360px; }
.page-hero-bg.slim               { min-height: 200px; }
@media (max-width: 720px) {
  .page-hero-bg                  { min-height: 280px; }
  .page-hero-bg.slim             { min-height: 160px; }
}

/* ── Readability rules for content sitting INSIDE a page hero photo ────────
   Trust bars, subtitles, and secondary CTAs are all designed to sit on dark
   page backgrounds and barely have any backdrop of their own. On a photo
   they disappear. Scope these fixes to .page-hero-bg so non-photo pages
   stay unchanged. */

/* Pill-style trust bars / credential rows */
.page-hero-bg .trust-bar {
  background: rgba(11, 27, 46, 0.78) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-color: rgba(255, 255, 255, 0.20) !important;
  color: var(--text) !important;
}

/* Hero subtitle paragraphs across every page-hero variant.
   Brighter text + soft drop shadow = readable on any photo. */
.page-hero-bg .hero-sub,
.page-hero-bg .lessons-hero-sub,
.page-hero-bg .learn-hero-subtitle,
.page-hero-bg .stories-hero-subtitle,
.page-hero-bg .fav-hero-sub,
.page-hero-bg .regions-index-sub,
.page-hero-bg .spots-page-sub,
.page-hero-bg .forecast-page-sub,
.page-hero-bg .region-detail-blurb {
  color: rgba(255, 255, 255, 0.94) !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
}

/* Hero titles — soft shadow so the white/gradient text stays legible
   over the brighter parts of the photo. Doesn't interfere with the
   existing gradient-text effects (background-clip: text). */
.page-hero-bg h1,
.page-hero-bg .hero-title,
.page-hero-bg .lessons-hero-title,
.page-hero-bg .learn-hero-title,
.page-hero-bg .fav-hero-title,
.page-hero-bg .regions-index-title,
.page-hero-bg .stories-hero-title,
.page-hero-bg .spots-page-title,
.page-hero-bg .forecast-page-title {
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.50);
}

/* Secondary CTAs (anything that isn't .primary) need a backdrop to read
   over a photo. Primary CTAs already have a solid accent fill. */
.page-hero-bg .cta-btn:not(.primary) {
  background: rgba(11, 27, 46, 0.68) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-color: rgba(255, 255, 255, 0.22) !important;
  color: var(--text) !important;
}