/* =============================================================================
   CCM BRAND SYSTEM — shared base stylesheet
   CSS variable convention: --clr- prefix (avoids Squarespace collisions).

   Created 2026-09-10 (site refactor Phase 1, "hard half"). This is the single
   canonical home for the design tokens, the reset, and the two reusable
   section-boundary primitives (.section-wave / .photo-overlay) that had been
   hand-copied — and had drifted — across index.html, citizen_science.html,
   incident_report.html, email_subscribe.html, admin.html, and the 5 form pages.

   Token values were already identical everywhere they overlapped; the drift was
   which subset each page declared. This file is the union. Individual pages keep
   only genuinely page-local rules in their own <style> block (or forms.css).

   Linked by every page in the site. Bump the ?v= query string on every <link>
   whenever this file changes.
   ============================================================================= */

:root {
  --clr-bayou-green:  #1A5C55;
  --clr-gulf-blue:    #256E93;
  --clr-marsh-amber:  #A66A1E;
  --clr-danger-red:   #A32D2D;
  --clr-shell-white:  #F7F1E1;   /* page background — warm (A/B: warm ✓) */
  --clr-peat-black:   #0B2D2B;

  /* Derived tones */
  --clr-green-dark:   #183222;
  --clr-green-light:  #DDE7E6;
  --clr-blue-light:   #DEE9EF;
  --clr-amber-light:  #EDE0C4;
  --clr-red-light:    #F5DEDE;
  --clr-surface:      #FFFFFF;
  --clr-border:       #E3DECF;
  --clr-text-muted:   #5E726B;

  /* Hazard-site status shades (LNG markers) — added 2026-07-20, range
     expanded 2026-07-21 (Joe: give "delayed" its own "sooty grey").
     All shades stay inside the cautionary red/amber/brown/grey family
     on purpose (see feedback_hazard_site_styling memory) — status is
     conveyed by shade/intensity within that family, never by
     crossing into brand green/blue. Ordered roughly by "how live is
     this as a hazard right now": Operational is most intense,
     Defeated is most desaturated. Delayed used to share the
     brown-amber tone with Permitted/Planned (too easy to mix up at a
     glance) — now a genuinely distinct dark, warm grey, "sooty" rather
     than "amber," and pairs thematically with the new smokestack/flame
     marker icon (see staticMarkerLabel below). Kept distinguishable
     from Defeated's neutral grey — sooty is darker and warmer. */
  --clr-hazard-operational:   #A32D2D;  /* = danger-red — running now */
  --clr-hazard-construction:  #C1440E;  /* burnt orange-red — being built */
  --clr-hazard-permitted:     #854F0B;  /* = marsh-amber — approved, not yet built */
  --clr-hazard-planned:       #D98C3B;  /* lighter amber — proposed, earliest stage */
  --clr-hazard-delayed:       #4A4642;  /* sooty grey — stalled, not simply "another amber" */
  --clr-hazard-defeated:      #6B6560;  /* cancelled, no longer active — near --clr-text-muted */

  /* Softened, desaturated blue for CRMS/monitoring markers — distinct
     from --clr-gulf-blue (used elsewhere for links/UI) so this one
     change doesn't ripple into unrelated brand-blue usage. */
  --clr-monitor-blue: #6E93B8;

  /* Teal for the NOAA Tides weather-marker icon badge — added
     2026-07-22 per Joe: give the tide station its own icon distinct
     from NWS weather stations (--clr-gulf-blue) and from CRMS pins
     (--clr-monitor-blue). Water/tide-adjacent without colliding with
     either existing blue. */
  --clr-tide-teal: #3E8E8E;

  /* Community Science (CATCH) markers — added 2026-08-22. One color
     identity for the whole family (rose/magenta — not claimed by brand
     green/blue, the hazard red/orange/amber/grey range, monitor-blue,
     tide-teal, or the PLANETAI side quest's purple), same "family color
     + per-subtype glyph" pattern as hazard's flame vs. smokestack —
     see catchMarkerGlyph() below. These pins are CATCH program field
     stations (noise/sediment/hydraulic-impact monitoring proposed in
     HRP's Calcasieu Estuary Fisheries Community Science Monitoring
     Plan, Aug 2026) — deliberately one shared shape/color so they read
     as "one program" on the map, distinguished from each other by
     glyph only, same way LNG vs. Industrial both stay inside the
     hazard family but read as different hazard TYPES. */
  --clr-catch-community: #A8386F;

  /* PLANETAI side-quest purple — added 2026-09-11 (Phase 1 leftover). Lifted
     from sidequest_planetai.html's own :root, the one other place this family
     is defined. index.html's .teaser-card .report-type-badge.learn has
     referenced --clr-quest-light/--clr-quest-2 since 2026-08-20 without either
     ever being defined here, so that badge has been silently colorless this
     whole time — this fixes it. Not used by sidequest_planetai.html itself,
     which still carries its own copy (that page predates base.css and isn't
     part of the form-family/base split); keep both in sync if this ever
     changes. */
  --clr-quest-1:      #8C5CB8;
  --clr-quest-2:      #5A2C8C;
  --clr-quest-dark:   #3D1D63;
  --clr-quest-light:  #EDE5F5;

  /* EPA AQI colors — NON-OVERRIDABLE */
  --aqi-good:         #00E400;
  --aqi-moderate:     #FFFF00;
  --aqi-usg:          #FF7E00;
  --aqi-unhealthy:    #FF0000;
  --aqi-very:         #8F3F97;
  --aqi-hazardous:    #7E0023;

  /* Layout (index.html map shell) */
  --header-h:         64px;
  --alert-h:          48px;
  --sidebar-w:        360px;
  --card-gap:         12px;
  --nav-h:            52px;

  /* Surface primitives (form-family pages) */
  --radius:           14px;
  --shadow:           0 2px 14px rgba(26,25,22,0.08);
  --shadow-lg:        0 8px 32px rgba(26,25,22,0.16);

  /* Type */
  --font-display:     'Barlow Condensed', Impact, sans-serif;
  --font-ui:          'Barlow', system-ui, sans-serif;
  --font-data:        'DM Mono', 'Courier New', monospace;
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font-ui);
  background: var(--clr-shell-white);
  color: var(--clr-peat-black);
  font-size: 15px;
  line-height: 1.6;
}

/* -----------------------------------------------------------------------------
   Reusable section-boundary wave + photo overlay, added 2026-09-03 per Joe
   (Roseate restyle follow-up). Two independent pieces:

   1) .section-wave — a thin decorative SVG that sits right at a color change
      between two stacked sections, so the seam reads as a soft curve instead of
      a hard edge. Drop one in as the LAST child of a section to wave its BOTTOM
      edge (give the <path> a fill matching the color of whatever comes AFTER
      it), or as the FIRST child with class "top" added to wave its TOP edge
      instead (fill matching whatever comes BEFORE it). Same SVG markup either
      way — the "top" class just flips it vertically with CSS.

   2) .photo-overlay — a real photograph layered semi-transparently on top of a
      section's solid/gradient background (never replacing it). Tune per
      instance via CSS custom properties on that specific .photo-overlay
      element — nothing else about the markup or this rule changes:
        --photo-x, --photo-y  shift the image, in px      (default 0px)
        --photo-rotate        spin it, in deg             (default 0deg)
        --photo-scale         zoom, plain multiplier      (default 1.15 — kept
                               above 1 so a pan/rotate never reveals empty edges)
        --photo-opacity       how much color shows through (default 0.35)
      Example:  <div class="photo-overlay" style="--photo-opacity:0.5; --photo-rotate:4deg;">

   .section-wave is absolutely positioned (not static flow) so it spans the FULL
   width of the section edge-to-edge, ignoring that section's own left/right
   padding — a static-flow div would sit inset by that padding instead.
   -------------------------------------------------------------------------- */
.section-wave { display: block; position: absolute; left: 0; right: 0; bottom: 0; height: 44px; line-height: 0; overflow: hidden; z-index: 1; }
.section-wave.top { bottom: auto; top: 0; transform: scaleY(-1); }
.section-wave svg { display: block; width: 100%; height: 100%; }

.photo-overlay { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.photo-overlay img {
  position: absolute;
  top: 50%; left: 50%;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: var(--photo-opacity, 0.35);
  transform: translate(-50%, -50%)
             translate(var(--photo-x, 0px), var(--photo-y, 0px))
             rotate(var(--photo-rotate, 0deg))
             scale(var(--photo-scale, 1.15));
}

/* .pattern-overlay — added 2026-09-17, ROSEATE rebrand (Joe). Sibling to
   .photo-overlay above, but for a REPEATING/tiled image instead of one
   cover-fit photo — .photo-overlay's <img object-fit:cover> can't tile, so
   this uses a plain CSS background-image instead. position:fixed so it
   covers the full viewport and stays put while the page scrolls, per Joe's
   "filling the viewport" ask; a page that only shows this element while its
   own container is display:none (e.g. an inactive .page in a single-page
   app) is correctly hidden along with it — no separate show/hide needed.
   Tune per instance via CSS custom properties, same convention as
   .photo-overlay:
     --pattern-image    background-image url(), REQUIRED (no default)
     --pattern-size     tile size, background-size shorthand (default 160px)
     --pattern-opacity  how much shows through               (default 0.22)
   GOTCHA: url() inside --pattern-image resolves relative to THIS stylesheet
   (base.css, always at .../global/base.css), NOT relative to the HTML page
   that sets the inline style -- confirmed the hard way, 2026-09-17 (a
   'global/brand/...' path from the hub 404'd as .../global/global/brand/...).
   Since base.css's location never changes, every caller uses the same
   base.css-relative path regardless of where the calling page itself lives:
   Example:  <div class="pattern-overlay" style="--pattern-image:url('brand/SVG/HexIconPattern.svg');"></div>

   GOTCHA #2, also 2026-09-17: z-index:0 put this ABOVE plain static content,
   not below it, despite being first in the DOM -- per CSS stacking rules,
   ANY positioned element (position:fixed here) with z-index 0/auto paints
   after (on top of) normal in-flow static siblings, regardless of DOM
   order; only non-positioned siblings that come later in the DOM, or
   positioned siblings with their own z-index, reliably stack above it. That
   made the pattern cover sections of a landing page that don't happen to
   set their own `position`. Fixed with z-index:-1 below -- negative
   z-index is spec-guaranteed to paint behind ALL static content in the
   same stacking context (but still above the context's own background),
   so this no longer depends on every calling page's sections happening to
   be positioned. */
.pattern-overlay {
  position: fixed;
  /* Extends past the strict viewport edge on purpose (not inset:0) --
     mobile Safari's elastic overscroll bounce briefly scrolls the visual
     viewport beyond 0/100dvh at the top/bottom, and a fixed element sized
     to exactly 100dvh runs out of tiled image right at that moment,
     revealing a gap right where the header/footer sit -- Joe, 2026-09-18.
     z-index:-1 + pointer-events:none below mean this can never sit above
     or intercept clicks on the header/dropdowns/banners no matter how far
     it extends, so no extra header/footer padding is needed to compensate. */
  top: -150px; bottom: -150px; left: 0; right: 0;
  z-index: -1;
  pointer-events: none;
  opacity: var(--pattern-opacity, 0.22);
  background-image: var(--pattern-image);
  background-repeat: repeat;
  background-size: var(--pattern-size, 160px);
}

/* -----------------------------------------------------------------------------
   .topbar — the dark "back to X" bar on every standalone leaf page (the 5
   citizen-science forms, the hub, incident_report, email_subscribe). Not used
   by index.html (which has its own #site-nav). Pages override .topbar-inner's
   max-width to line up with their own content column.
   -------------------------------------------------------------------------- */
.topbar { background: var(--clr-peat-black); border-bottom: 2px solid var(--clr-green-dark); position: sticky; top: 0; z-index: 60; }
.topbar-inner { max-width: 880px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 12px 20px; gap: 12px; flex-wrap: wrap; }
.topbar-brand { font-family: var(--font-display); font-weight: 600; color: #fff; font-size: .95rem; }
.topbar-brand span { display: block; font-family: var(--font-ui); font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.5); margin-top: 2px; }
.topbar-back { color: rgba(255,255,255,.75); text-decoration: none; font-size: .72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; border: 1px solid rgba(255,255,255,.25); border-radius: 20px; padding: 6px 14px; transition: all .15s; }
.topbar-back:hover { color: #fff; border-color: #fff; }