/* ============================================================================
   SurfCheck.nz LIGHT THEME (additive override file)
   ----------------------------------------------------------------------------
   The dark theme is the default and is defined by the :root tokens in site.css.
   This file NEVER changes dark rendering: everything below is either
     (a) the .theme-toggle button (a new element, styled for both themes), or
     (b) scoped under html[data-theme="light"], which only exists when the
         user has opted into light mode (theme.js + localStorage "sc-theme").
   Load order: after all page CSS, so equal-specificity overrides win.
   ========================================================================== */

/* ---- Theme toggle button (lives in the header, both themes) -------------- */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; flex: 0 0 auto;
  background: transparent; border: 1px solid var(--border);
  border-radius: 999px; cursor: pointer; color: var(--text-2);
  transition: background 0.15s ease, color 0.15s ease;
}
.theme-toggle:hover { background: rgba(127,127,127,0.12); color: var(--text); }
.theme-toggle svg { display: block; width: 17px; height: 17px; }
/* sun shown while dark (tap = go light); moon shown while light */
.theme-toggle .tt-moon { display: none; }
html[data-theme="light"] .theme-toggle .tt-sun { display: none; }
html[data-theme="light"] .theme-toggle .tt-moon { display: block; }

/* Mobile: keep the round toggle in the header; the CTA drops to just "Book"
   (the .cta-word span hides) so everything fits on one row. */
@media (max-width: 720px) {
  .header-actions .theme-toggle { width: 31px; height: 31px; }
  .btn-header-cta .cta-word { display: none; }
}

/* ---- Light token palette -------------------------------------------------- */
html[data-theme="light"] {
  --bg:           #f2f5f9;
  --bg-2:         #e9eef5;
  --bg-3:         #dfe7f0;
  --surface:      #ffffff;
  --surface-2:    #f2f6fa;
  --border:       rgba(12,28,44,0.12);
  --border-2:     rgba(12,28,44,0.20);

  --text:         #0e1f30;
  --text-2:       #33495d;
  --text-3:       #4f6579;
  --text-muted:   #5f7387;

  --accent:       #0b6fc4;
  --accent-2:     #0a5da5;
  --accent-dim:   #8ec4ec;
  --sand:         #9a7414;
  --teal:         #0c8a77;

  /* Rating tiers darkened for contrast on white / pale tints. Same hues,
     daylight-legible. Dark-theme values in site.css are untouched. */
  --epic:         #0083b0;
  --mint:         #2a68b0;
  --good:         #257a41;
  --fair:         #9a7414;
  --poor:         #b64848;
  --grim:         #9d352c;
  --flat:         #5a6b7c;

  color-scheme: light;
}

/* ---- Chrome: header / nav / footer / search overlay ----------------------- */
html[data-theme="light"] .site-header {
  background: rgba(255,255,255,0.88);
  border-bottom: 1px solid var(--border);
}
html[data-theme="light"] .nav-toggle:hover { background: rgba(12,28,44,0.06); }
@media (max-width: 720px) {
  html[data-theme="light"] .primary-nav {
    background: rgba(250,252,254,0.98);
  }
}
/* Accent CTA buttons hardcode dark-navy text (fine on the pale dark-theme
   accent). The light accent is a deep blue, so the text flips to white. */
html[data-theme="light"] .btn-header-cta,
html[data-theme="light"] .btn-header-cta:hover,
html[data-theme="light"] .cta-btn.primary,
html[data-theme="light"] .cta-btn.primary:hover {
  color: #ffffff;
}
html[data-theme="light"] .search-overlay-bg { background: rgba(14,31,48,0.45); }
html[data-theme="light"] .search-overlay-panel {
  background: #ffffff;
  border: 1px solid var(--border);
}
html[data-theme="light"] .site-footer { background: var(--bg-2); }
html[data-theme="light"] .footer-bottom { background: var(--bg-3); }

/* ---- Forecast grid (spot page + drawers share these classes) -------------- */
html[data-theme="light"] .fc-row { border-bottom-color: rgba(12,28,44,0.07); }
html[data-theme="light"] .fc-col { border-left-color: rgba(12,28,44,0.05); }
html[data-theme="light"] .fc-col.first-of-day { border-left-color: rgba(12,28,44,0.16); }
html[data-theme="light"] .fc-col.now { background: rgba(11,111,196,0.08); }
html[data-theme="light"] .fc-scroll {
  scrollbar-color: rgba(12,28,44,0.25) transparent;
}
html[data-theme="light"] .fc-scroll::-webkit-scrollbar-thumb { background: rgba(12,28,44,0.25); }
/* Two-tone wave bar: same blue reads well on white; wind-chop goes a touch
   darker so the split stays visible. */
html[data-theme="light"] .wave-bar { background: rgba(11,111,196,0.50); }
html[data-theme="light"] .wb-ground { background: rgba(11,111,196,0.55); }
html[data-theme="light"] .wb-wind   { background: rgba(90,112,133,0.50); }
html[data-theme="light"] .fc-legend .lg-ground { background: rgba(11,111,196,0.55); }
html[data-theme="light"] .fc-legend .lg-wind   { background: rgba(90,112,133,0.50); }
html[data-theme="light"] .rating-chip.flat { background: rgba(90,107,124,0.10); border-color: rgba(90,107,124,0.30); }
html[data-theme="light"] .rating-chip.flat .rating-chip-score,
html[data-theme="light"] .rating-chip.flat .rating-chip-label { color: #5a6b7c; }
html[data-theme="light"] .tide-event.high { background: rgba(11,111,196,0.12); }
html[data-theme="light"] .tide-event.low  { background: rgba(154,116,20,0.14); }

/* ---- Hardcoded dark-theme colours that don't flow from the tokens ---------- */
/* Brand wordmark hardcodes near-white; invisible on the light header. */
html[data-theme="light"] .brand-wordmark { color: var(--text); }
/* CTA buttons hardcode the pale dark-theme accent (#5fb7ff) as background;
   force the token so the deep light accent + white text (set above) apply. */
html[data-theme="light"] .btn-header-cta,
html[data-theme="light"] .cta-btn.primary {
  background: var(--accent);
  border-color: var(--accent);
}
html[data-theme="light"] .btn-header-cta:hover,
html[data-theme="light"] .cta-btn.primary:hover {
  background: var(--accent-2);
  border-color: var(--accent-2);
}
/* Embed CTA hardcodes the dark surface. */
html[data-theme="light"] .embed-cta-btn {
  background: var(--surface);
  border-color: var(--border-2);
  color: var(--text);
}
/* These hardcode the dark-theme secondary text (#b4c2d3). */
html[data-theme="light"] .spot-contribute-btn { color: var(--text-2); }
html[data-theme="light"] .footer-powered a { color: var(--text-2); }
/* UV chips get their band colour inline from JS (tuned for dark). Darken the
   rendered chip as a whole so the numbers read on pale backgrounds. */
html[data-theme="light"] .uv-chip { filter: brightness(0.55) saturate(1.6); }

/* ============================================================================
   PHOTO HEROES ARE PERMANENT DARK ZONES
   Every page hero (.page-hero-bg: home, spots, forecast, lessons, learn,
   regions, stories, favourites) is a photo with a dark scrim. Titles, subs and
   glass widgets inside it must keep the dark-theme look in light mode, so the
   dark token set is re-pinned locally. Result: white hero titles, dark-glass
   now-widget/scope toggles, all readable over imagery in both themes.
   ========================================================================== */
html[data-theme="light"] .page-hero-bg,
html[data-theme="light"] .spot-hero,
html[data-theme="light"] .drawer-hero {
  --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;
  --sand:      #e8b84b;
  --epic:      #4ddeff;
  --mint:      #4a8fd6;
  --good:      #41a05e;
  --fair:      #e8b84b;
  --poor:      #e08585;
  --grim:      #c85048;
  --flat:      #7d8c9a;
}
/* Inherited text: children with no colour rule of their own inherit the RESOLVED
   colour from body (light navy), not the re-pinned var. Setting color on the hero
   container makes descendants inherit the pale value. */
html[data-theme="light"] .page-hero-bg,
html[data-theme="light"] .spot-hero,
html[data-theme="light"] .drawer-hero { color: var(--text); }
/* Inside a hero the accent is the pale dark-theme blue again, so accent-filled
   controls go back to dark text (the global white-text rules above assume the
   deep light accent). */
html[data-theme="light"] .page-hero-bg .cta-btn.primary,
html[data-theme="light"] .page-hero-bg .cta-btn.primary:hover,
html[data-theme="light"] .page-hero-bg .now-scope-btn.active,
html[data-theme="light"] .page-hero-bg .sort-btn.active,
html[data-theme="light"] .page-hero-bg .filter-pill.active,
html[data-theme="light"] .page-hero-bg .filter-pill.active .pill-icon { color: #04101c; }

/* ---- Sticky filter toolbars (dark glass -> light glass) ------------------- */
html[data-theme="light"] .spots-toolbar,
html[data-theme="light"] .lessons-toolbar,
html[data-theme="light"] .map-toolbar {
  background: rgba(250,252,254,0.92);
}
html[data-theme="light"] .day-toolbar { background: rgba(255,255,255,0.72); }

/* ---- Pills (filter pills, map pills) ----------------------------------------
   :not(.active) so the base override can never outrank the active state (it did
   in v2 draft: active pills lost their accent background). Inactive pills also
   pin their text (the lessons variant hardcodes white for the old dark strip). */
html[data-theme="light"] .filter-pill:not(.active),
html[data-theme="light"] .map-pill:not(.active) {
  background: rgba(12,28,44,0.05);
  color: var(--text-2);
}
html[data-theme="light"] .filter-pill:not(.active):hover,
html[data-theme="light"] .map-pill:not(.active):hover {
  background: rgba(12,28,44,0.10);
  color: var(--text);
}
/* Active pills: accent background restated + white text (dark hardcodes #04101c). */
html[data-theme="light"] .filter-pill.active {
  background: var(--accent);
  border-color: var(--accent);
}
html[data-theme="light"] .filter-pill.active,
html[data-theme="light"] .filter-pill.active .pill-icon { color: #ffffff; }
html[data-theme="light"] .map-pill.active { background: rgba(11,111,196,0.14); }
html[data-theme="light"] .map-pill.active,
html[data-theme="light"] .map-pill.active .pill-icon { color: var(--accent); }

/* ---- Segmented toggles (sort, NZ-wide/near-me scope) ----------------------- */
html[data-theme="light"] .sort-segmented,
html[data-theme="light"] .now-scope-toggle { background: rgba(12,28,44,0.06); }
html[data-theme="light"] .sort-btn:hover,
html[data-theme="light"] .now-scope-btn:hover { color: var(--text); }
html[data-theme="light"] .sort-btn.active,
html[data-theme="light"] .now-scope-btn.active { color: #ffffff; }

/* ---- Header search trigger -------------------------------------------------- */
html[data-theme="light"] .header-search-trigger {
  background: rgba(12,28,44,0.06);
  border-color: var(--border-2);
}
html[data-theme="light"] .header-search-trigger:hover { background: rgba(12,28,44,0.10); }

/* ---- Save stars -------------------------------------------------------------
   Default (white cards, e.g. .spot-row lists): light chip + navy star. Stars
   that sit OVER PHOTOS (heroes, drawer hero image) keep the dark-glass look. */
html[data-theme="light"] .save-star {
  background: rgba(12,28,44,0.08);
  color: rgba(12,28,44,0.55);
}
html[data-theme="light"] .save-star:hover { background: rgba(12,28,44,0.16); }
html[data-theme="light"] .save-star.saved {
  color: #b8860b;
  background: rgba(184,134,11,0.12);
  border-color: rgba(184,134,11,0.4);
}
html[data-theme="light"] .page-hero-bg .save-star,
html[data-theme="light"] .spot-hero .save-star,
html[data-theme="light"] .drawer-hero .save-star {
  background: rgba(0,0,0,0.5);
  color: rgba(255,255,255,0.5);
}
html[data-theme="light"] .page-hero-bg .save-star.saved,
html[data-theme="light"] .spot-hero .save-star.saved,
html[data-theme="light"] .drawer-hero .save-star.saved {
  color: #e8b84b;
  background: rgba(0,0,0,0.7);
  border-color: rgba(232,184,75,0.5);
}

/* ---- Map page chrome (tiles stay dark for now — chrome goes light) --------- */
html[data-theme="light"] .map-legend { background: rgba(250,252,254,0.94); }
html[data-theme="light"] .tile-toggle { background: rgba(12,28,44,0.05); }
html[data-theme="light"] .locate-btn {
  background: rgba(250,252,254,0.94);
  color: var(--text-2);
}
html[data-theme="light"] .locate-btn:hover { background: #ffffff; border-color: var(--accent); }
html[data-theme="light"] .tile-toggle-btn.active { color: #ffffff; }
/* Spot-name chips on pins (hover / zoomed-in labels): white chip + navy text.
   Selected pin keeps the accent chip, white text on the deep light accent. */
html[data-theme="light"] .map-pin::after {
  background: rgba(255,255,255,0.94);
  border-color: rgba(12,28,44,0.18);
  color: #0e1f30;
}
html[data-theme="light"] .map-pin.selected::after {
  background: var(--accent);
  border-color: var(--accent);
  color: #ffffff;
}

/* ---- Lessons ---------------------------------------------------------------- */
/* Card badges sit on card PHOTOS: keep dark glass + light text in both themes. */
html[data-theme="light"] .lesson-card-badge { color: #eef2f7; }
html[data-theme="light"] .lesson-card-badge.lesson { color: #04101c; }
/* Lesson card "Book" buttons: same look as the header Book-a-lesson CTA
   (accent + white). The dark theme hardcodes navy text, which reads as a
   dark button on the deep light accent. Headliner CTAs = the flagship
   program cards (Surf Tour / Kids Camp / Youth Camp). */
html[data-theme="light"] .lesson-card-cta,
html[data-theme="light"] .lesson-card-cta:hover,
html[data-theme="light"] .headliner-cta,
html[data-theme="light"] .headliner-cta:hover { color: #ffffff; }

/* Trust bar + "Browse all programs" live inside the hero photo but read better
   as solid light chips (Che). White surfaces work over any photo. !important
   because site.css's hero-readability block forces dark glass with !important. */
html[data-theme="light"] .page-hero-bg .trust-bar {
  background: rgba(255,255,255,0.92) !important;
  border-color: rgba(12,28,44,0.12) !important;
  color: #33495d !important;
}
html[data-theme="light"] .trust-bar .trust-star { color: #9a7414; }
html[data-theme="light"] .trust-bar .trust-sep { color: #0b6fc4; }
html[data-theme="light"] .page-hero-bg .lessons-hero-cta-row .cta-btn:not(.primary) {
  background: rgba(255,255,255,0.92) !important;
  border-color: rgba(12,28,44,0.15) !important;
  color: #0e1f30 !important;
}
html[data-theme="light"] .page-hero-bg .lessons-hero-cta-row .cta-btn:not(.primary) .label-sub { color: #5f7387; }

/* ---- Homepage "Right now in NZ" widget: WHITE card over the hero photo (Che).
   The hero re-pin made it dark glass; un-pin back to the light tokens inside the
   widget so spot names read dark on white, tiers use daylight colours. ---- */
html[data-theme="light"] .page-hero-bg .now-widget {
  --bg:        #f2f5f9;
  --bg-2:      #e9eef5;
  --surface:   #ffffff;
  --surface-2: #f2f6fa;
  --border:    rgba(12,28,44,0.12);
  --border-2:  rgba(12,28,44,0.20);
  --text:      #0e1f30;
  --text-2:    #33495d;
  --text-3:    #4f6579;
  --text-muted:#5f7387;
  --accent:    #0b6fc4;
  --accent-2:  #0a5da5;
  --sand:      #9a7414;
  --epic:      #0083b0;
  --mint:      #2a68b0;
  --good:      #257a41;
  --fair:      #9a7414;
  --poor:      #b64848;
  --grim:      #9d352c;
  --flat:      #5a6b7c;
  /* Translucent glass like the dark widget: the hero photo shows through. */
  background: linear-gradient(180deg, rgba(255,255,255,0.88) 0%, rgba(255,255,255,0.72) 100%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-color: rgba(12,28,44,0.14);
  color: var(--text);
}
/* "Open the map" (hero ghost CTA) matches the light glass of the widget.
   !important: site.css's hero-readability block forces dark glass. */
html[data-theme="light"] .page-hero-bg .hero-ctas .cta-btn:not(.primary) {
  background: rgba(255,255,255,0.85) !important;
  border-color: rgba(12,28,44,0.15) !important;
  color: #0e1f30 !important;
}
html[data-theme="light"] .page-hero-bg .hero-ctas .cta-btn:not(.primary) .label-sub { color: #5f7387; }
html[data-theme="light"] .page-hero-bg .hero-ctas .cta-btn:not(.primary) .label-arrow { color: #0b6fc4; }

/* Feedback button (feedback.js injects its styles at runtime, so !important). */
html[data-theme="light"] .fbk-btn {
  background: #ffffff !important;
  color: #33495d !important;
  border-color: rgba(12,28,44,0.18) !important;
  box-shadow: 0 4px 18px rgba(12,28,44,0.18) !important;
}
html[data-theme="light"] .fbk-btn:hover { background: #f2f6fa !important; }

/* Feedback modal (also injected by feedback.js) — light card. */
html[data-theme="light"] .fbk-modal {
  background: #ffffff;
  border-color: rgba(12,28,44,0.14);
  color: #0e1f30;
}
html[data-theme="light"] .fbk-x { color: #33495d; }
html[data-theme="light"] .fbk-h { color: #0e1f30; }
html[data-theme="light"] .fbk-sub { color: #33495d; }
html[data-theme="light"] .fbk-type {
  background: rgba(12,28,44,0.05);
  border-color: rgba(12,28,44,0.14);
  color: #33495d;
}
html[data-theme="light"] .fbk-type.on {
  background: #0b6fc4;
  border-color: #0b6fc4;
  color: #ffffff;
}
html[data-theme="light"] .fbk-label { color: #5f7387; }
html[data-theme="light"] .fbk-ta,
html[data-theme="light"] .fbk-field input {
  background: #f2f6fa;
  border-color: rgba(12,28,44,0.16);
  color: #0e1f30;
}
html[data-theme="light"] .fbk-send { background: #0b6fc4; color: #ffffff; }
html[data-theme="light"] .fbk-note { color: #7d90a2; }
html[data-theme="light"] .fbk-done { color: #0e1f30; }

html[data-theme="light"] .page-hero-bg .now-widget .now-widget-head { background: rgba(11,111,196,0.06); }
html[data-theme="light"] .page-hero-bg .now-widget .now-all-link { background: rgba(12,28,44,0.05); }
html[data-theme="light"] .page-hero-bg .now-widget .now-scope-toggle { background: rgba(12,28,44,0.06); }
html[data-theme="light"] .page-hero-bg .now-widget .now-scope-btn.active { color: #ffffff; }
html[data-theme="light"] .page-hero-bg .now-widget .now-scope-btn:hover { color: var(--text); }

/* ============================================================================
   SURFGURU CHAT WIDGET — light mode
   surfguru.js injects its own dark styles at runtime (a <style> in <head>);
   these higher-specificity overrides flip the panel light. The launch bubble
   keeps its pale-blue brand look in both themes.
   ========================================================================== */
html[data-theme="light"] #sg-panel {
  background: #ffffff;
  border-color: rgba(12,28,44,0.14);
}
html[data-theme="light"] #sg-panel .sg-head {
  background: #f2f6fa;
  border-bottom-color: rgba(12,28,44,0.10);
}
html[data-theme="light"] #sg-panel .sg-head b { color: #0e1f30; }
html[data-theme="light"] #sg-panel .sg-head small { color: #5f7387; }
html[data-theme="light"] #sg-panel .sg-ico { color: #33495d; }
html[data-theme="light"] #sg-panel .sg-ico:hover { color: #0e1f30; background: rgba(12,28,44,0.06); }
html[data-theme="light"] #sg-panel .sg-ico.spk-on { color: #0b6fc4; }
html[data-theme="light"] #sg-panel .sg-msg.bot {
  background: #f0f4f9;
  color: #0e1f30;
}
html[data-theme="light"] #sg-panel .sg-msg.bot a { color: #0b6fc4; }
html[data-theme="light"] #sg-panel .sg-msg.bot strong { color: #0e1f30; }
html[data-theme="light"] #sg-panel .sg-msg.me {
  background: #0b6fc4;
  color: #ffffff;
}
html[data-theme="light"] #sg-panel .sg-sugg button {
  border-color: rgba(11,111,196,0.45);
  color: #0b6fc4;
}
html[data-theme="light"] #sg-panel .sg-sugg button:hover { background: rgba(11,111,196,0.10); }
html[data-theme="light"] #sg-panel .sg-foot {
  background: #ffffff;
  border-top-color: rgba(12,28,44,0.10);
}
html[data-theme="light"] #sg-panel .sg-row textarea {
  background: #f2f6fa;
  border-color: rgba(12,28,44,0.14);
  color: #0e1f30;
}
html[data-theme="light"] #sg-panel .sg-row textarea::placeholder { color: #7d90a2; }
html[data-theme="light"] #sg-panel .sg-geo,
html[data-theme="light"] #sg-panel .sg-mic {
  background: #f2f6fa;
  border-color: rgba(12,28,44,0.14);
  color: #5f7387;
}
html[data-theme="light"] #sg-panel .sg-mic:hover { color: #0e1f30; border-color: rgba(12,28,44,0.25); }
html[data-theme="light"] #sg-panel .sg-geo.on { background: #0b6fc4; color: #ffffff; border-color: #0b6fc4; }
html[data-theme="light"] #sg-panel .sg-send { background: #0b6fc4; color: #ffffff; }
html[data-theme="light"] #sg-panel .sg-disc,
html[data-theme="light"] #sg-panel .sg-typing { color: #7d90a2; }
html[data-theme="light"] #sg-panel .sg-video {
  background: #f2f6fa;
  border-color: rgba(12,28,44,0.14);
}
html[data-theme="light"] #sg-panel .sg-video-title { color: #33495d; }