/* ============================================================
   CCSPP DESIGN FOUNDATION — v1 · child theme
   Global tokens, typography, button restyle, section styles.
   "Azure, never teal." UI teal retired; teal lives only in the logo.
   Component styles for custom elements live in the ccspp-elements plugin.
   ============================================================ */

:root{
  /* ---- Azure ramp — hue held at ~204° so nothing drifts toward teal ---- */
  --cc-azure-950:#0B2534;
  --cc-azure-900:#0E2E40;
  --cc-azure-800:#15425B;   /* PRIMARY — "Dark Azure", client-confirmed */
  --cc-azure-700:#1B5474;
  --cc-azure-600:#21688F;
  --cc-azure-500:#2E7FAD;
  --cc-azure-300:#7FB3D3;
  --cc-azure-100:#D8E8F2;
  --cc-azure-50:#EEF5FA;

  /* ---- Accent — emphasis only, never small text on white ---- */
  --cc-gold-500:#E3A63C;
  --cc-gold-100:#FBEED8;

  /* ---- Candidate third color (team review) ---- */
  --cc-fern-500:#5F7D62;
  --cc-fern-50:#EAF0E8;

  /* ---- Neutrals ---- */
  --cc-ink-900:#1E2A32;     /* body text */
  --cc-ink-600:#4A5A64;     /* secondary text */
  --cc-line:#E3EAEF;
  --cc-mist:#F5F8FA;        /* alternating "muted" section background */
  --cc-paper:#FFFFFF;

  /* ---- Brand-mark colors — LOGO ONLY. Never on UI surfaces. ---- */
  --cc-mark-plum:#4C176D;
  --cc-mark-teal:#149A9A;

  /* ---- Effects ---- */
  --cc-shadow-card:0 2px 6px rgba(14,46,64,.06), 0 10px 28px rgba(14,46,64,.10);
  --cc-shadow-card-hover:0 4px 10px rgba(14,46,64,.08), 0 18px 44px rgba(14,46,64,.16);
  --cc-radius:12px;

  /* ---- FONT ROLES ----------------------------------------------------
     Target font system (style guide): Inter + Merriweather.
       Primary = Inter    Secondary = Inter    Tertiary = Merriweather
     NOTE: the LIVE theme currently compiles Barlow for primary/secondary.
     The real switch happens in the YOOtheme Customizer LESS vars
     (@global-primary-font-family / @global-secondary-font-family → 'Inter'),
     which regenerates .uk-font-primary/secondary that the elements use.
     These --cc-font-* vars are the fallback/utility copy — keep them in sync.
     -------------------------------------------------------------------- */
  --cc-font-primary:"Inter", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --cc-font-secondary:"Inter", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --cc-font-tertiary:"Merriweather", Georgia, "Times New Roman", serif;

  /* ---- Responsive body size — 17px floor → 19px ceiling ---- */
  --cc-body-size:clamp(1.0625rem, 1rem + .3vw, 1.1875rem);
}

/* ---- Font-role utility classes (used by custom elements' font pickers) ---- */
.cc-font-primary{ font-family:var(--cc-font-primary); }
.cc-font-secondary{ font-family:var(--cc-font-secondary); }
.cc-font-tertiary{ font-family:var(--cc-font-tertiary); }

/* ============================================================
   TEXT SELECTION — light + transparent so selected text stays readable
   (fixes the "selection color too dark" feedback)
   ============================================================ */
::selection{ background:rgba(46,127,173,.22); color:inherit; }

/* ============================================================
   RESPONSIVE BODY TYPE — bigger, but not on phones
   Scoped to the theme body so it lifts default copy without fighting
   UIkit's explicit text-size utilities (uk-text-large etc. still win).
   ============================================================ */
body,
.uk-text-default{
  font-size:var(--cc-body-size);
  line-height:1.65;
}

/* ============================================================
   BUTTONS — restyle YOOtheme / UIkit native .uk-button variants
   so every existing button on the site adopts the CCSPP look.
   Bold, larger, no underline, no decoration, visible focus ring.
   ============================================================ */
/* NOTE: !important is used here deliberately. YOOtheme prints its compiled
   theme CSS AFTER enqueued stylesheets and uses selectors like `a.uk-button`
   and `.tm-navbar .uk-button` (higher specificity, but NO !important). A single
   !important on the restyle is the clean, reliable way to win site-wide
   (header + body) without a specificity arms race. Per-button overrides in the
   builder should use the element's own CSS field (also prefixed/scoped). */
.uk-button{
  font-family:var(--cc-font-primary) !important;
  font-weight:700 !important;
  font-size:1.0625rem !important;
  line-height:1 !important;
  text-transform:none !important;
  letter-spacing:0 !important;
  text-decoration:none !important;
  padding:1rem 1.75rem !important;
  border-radius:9px !important;
  border:2px solid transparent !important;
  transition:background .18s ease, transform .18s ease, box-shadow .18s ease, color .18s ease, border-color .18s ease;
}
.uk-button:hover,
.uk-button:focus{ text-decoration:none !important; }
.uk-button:focus-visible{ outline:3px solid var(--cc-azure-500) !important; outline-offset:3px !important; }

/* Primary — the page's main action */
.uk-button-primary{ background:var(--cc-azure-800) !important; color:#fff !important; }
.uk-button-primary:hover,
.uk-button-primary:focus{ background:var(--cc-azure-700) !important; color:#fff !important; transform:translateY(-1px); box-shadow:0 6px 16px rgba(21,66,91,.28); }

/* Secondary — supporting action (outline azure) */
.uk-button-secondary{ background:transparent !important; color:var(--cc-azure-800) !important; border-color:var(--cc-azure-800) !important; }
.uk-button-secondary:hover,
.uk-button-secondary:focus{ background:var(--cc-azure-50) !important; color:var(--cc-azure-800) !important; }

/* Default — quiet neutral outline */
.uk-button-default{ background:transparent !important; color:var(--cc-azure-800) !important; border-color:var(--cc-line) !important; }
.uk-button-default:hover,
.uk-button-default:focus{ background:var(--cc-azure-50) !important; color:var(--cc-azure-800) !important; border-color:var(--cc-azure-300) !important; }

/* Danger — repurposed as the GOLD ACCENT (giving / support CTAs).
   Gold fill + Azure Night text passes AA (7.4:1). "Donate", "Get Tickets", etc.
   Pick "Danger" style in the builder's Button element to get the gold CTA. */
.uk-button-danger{ background:var(--cc-gold-500) !important; color:var(--cc-azure-950) !important; }
.uk-button-danger:hover,
.uk-button-danger:focus{ background:var(--cc-gold-500) !important; color:var(--cc-azure-950) !important; filter:brightness(1.06); transform:translateY(-1px); box-shadow:0 6px 16px rgba(227,166,60,.35); }

/* Text button — keep as a quiet inline link style, azure */
.uk-button-text{ color:var(--cc-azure-600) !important; font-weight:700 !important; padding-left:0 !important; padding-right:0 !important; border:0 !important; }
.uk-button-text:hover,
.uk-button-text:focus{ color:var(--cc-azure-800) !important; }

/* Size modifiers — preserve small/large (the base !important padding would
   otherwise flatten them). Re-assert with !important so they win back.
   Exclude .uk-button-text so text/link buttons stay flush-left (no horizontal
   padding) even when YOOtheme adds .uk-button-small (e.g. card CTAs). */
.uk-button-small:not(.uk-button-text){ padding:.5rem 1rem !important; font-size:.8125rem !important; border-radius:7px !important; }
.uk-button-large:not(.uk-button-text){ padding:1.15rem 2.25rem !important; font-size:1.1875rem !important; }

/* ---- Contextual button helpers for use ON dark azure surfaces ----
   (crisis band, split-callout content panel). Add the class in the
   builder's Button element "General → CSS class" field when on azure. */
.cc-btn-ghost-light{ background:transparent !important; color:#fff !important; border:2px solid rgba(255,255,255,.7) !important; }
.cc-btn-ghost-light:hover,
.cc-btn-ghost-light:focus{ background:rgba(255,255,255,.12) !important; color:#fff !important; }
.cc-btn-crisis{ background:#fff !important; color:var(--cc-azure-900) !important; border-color:#fff !important; }
.cc-btn-crisis:hover,
.cc-btn-crisis:focus{ background:#fff !important; color:var(--cc-azure-900) !important; filter:brightness(.97); }

/* ============================================================
   SECTION SEPARATION (#7) — map native YOOtheme section "Style"
   options to the CCSPP register so editors need no custom element:
     • Default  → white   ("learn" register)
     • Muted    → mist     (alternate educational sections)
     • Primary  → azure    (reserved for crisis / action)
     • Secondary→ deep azure (hero / heaviest action)
   RULE: dark azure bands are reserved for crisis/action moments.
   When two dark sections would touch, one becomes light.
   ============================================================ */
.uk-section-muted{ background:var(--cc-mist); }
.uk-section-primary{ background:var(--cc-azure-800); }
.uk-section-secondary{ background:var(--cc-azure-950); }

/* Gold seam — a visible rule between two ideas (e.g. "Warning Signs").
   Add class "cc-seam" to a section (or "cc-seam-gold" via the element). */
.cc-seam{ border-top:4px solid var(--cc-gold-500); }

/* ============================================================
   CARDS — apply the design-system card treatment to YOOtheme's
   native card element (§ Cards): rounded corners + soft azure-tinted
   shadow, replacing the default square/hard-gray shadow. overflow:hidden
   clips the media image to the rounded corners.
   ============================================================ */
.uk-card{
  border-radius:var(--cc-radius) !important;
  overflow:hidden;
  box-shadow:var(--cc-shadow-card) !important;
  transition:transform .2s ease, box-shadow .2s ease;
}
/* Linked cards (whole card wrapped in a link) lift on hover; static cards don't. */
a:hover > .uk-card,
a:hover .uk-card{ box-shadow:var(--cc-shadow-card-hover) !important; transform:translateY(-4px); }

/* Uniform card images: force every card's top media to one aspect ratio (16:10,
   per the guide) and crop to fill — so mismatched source photos all line up. */
.uk-card-media-top{ aspect-ratio:16/10; overflow:hidden; }
.uk-card-media-top img,
.uk-card-media-top picture{ width:100%; height:100%; object-fit:cover; display:block; }

/* "Text" button variant → azure link with a trailing arrow (matches the guide's
   card CTA, e.g. "Get help →"). The base .uk-button-text styling is in § Buttons. */
.uk-button-text::after{ content:"\00a0\2192"; font-weight:800; }

/* ============================================================
   GLOBAL CARD / IMAGE TREATMENTS reused across the site
   (headshots, generic media shadow) — the "Team treatment, everywhere".
   Opt-in via class so they don't hijack every image.
   ============================================================ */
.cc-headshot{ border-radius:var(--cc-radius); overflow:hidden; box-shadow:var(--cc-shadow-card); aspect-ratio:1/1; }
.cc-headshot img{ width:100%; height:100%; object-fit:cover; filter:grayscale(1); transition:filter .3s ease; }
.cc-headshot:hover img{ filter:grayscale(0); }

/* ============================================================
   ACCESSIBILITY — honor reduced motion for any CCSPP animation
   (countdown ticks still update; only transitions/animation stop).
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  .uk-button,
  .uk-card,
  .cc-headshot img{ transition:none; }
}

/* ============================================================
   HEADER — transparent overlay nav treatment
   Pairs with these YOOtheme Customizer settings (set on the dev site):
     • Navbar → Transparent (hero slides under logo + nav)
     • Navbar → Sticky = "On scroll up" (reveal)
     • Navbar → Sticky Style = a dark style (Azure Night)
   The CSS below adds the always-on nav scrim and reinforces the reveal fill.
   Calibrated for the transparent navbar; verify/tune during the dev walk-through.
   ============================================================ */

/* --- Nav scrim: Azure Night gradient behind the transparent navbar so the
   white logo + links stay legible over ANY hero (esp. light photos).
   The header overlay is position:absolute, so its ::before scrolls away with
   it — the scrim only shows at the top of the page over the hero. On solid-
   header pages the header's own background hides it, so it's harmless there. */
.tm-header::before,
.tm-header-mobile::before{
  content:"";
  position:absolute; top:0; left:0; right:0; height:170px;
  z-index:-1; pointer-events:none;
  background:linear-gradient(180deg,
    rgba(11,37,52,.82) 0%,
    rgba(11,37,52,.40) 45%,
    rgba(11,37,52,0) 100%);
}
/* When the navbar reveals/sticks it supplies its own solid fill — drop the scrim. */
.tm-header.uk-sticky-fixed::before,
.tm-header-mobile.uk-sticky-fixed::before{ display:none; }

/* --- Reveal-sticky navbar solid fill = Azure Night (reinforces the Customizer
   "Sticky Style"; applies when the navbar container is in its fixed state). --- */
.uk-sticky-fixed .uk-navbar-container,
.tm-header.uk-sticky-fixed,
.tm-header-mobile.uk-sticky-fixed{
  background-color:var(--cc-azure-950);
}
/* Light text on the azure-filled reveal nav (the sticky style renders dark links,
   which are unreadable on Azure Night). */
.uk-sticky-fixed:has(.uk-navbar-nav) .uk-navbar-nav > li > a{ color:rgba(255,255,255,.9) !important; }
.uk-sticky-fixed:has(.uk-navbar-nav) .uk-navbar-nav > li > a:hover,
.uk-sticky-fixed:has(.uk-navbar-nav) .uk-navbar-nav > li.uk-active > a{ color:#fff !important; }
.uk-sticky-fixed:has(.uk-navbar-nav) .uk-navbar-toggle,
.uk-sticky-fixed:has(.uk-navbar-nav) .tm-social a{ color:rgba(255,255,255,.9) !important; }

/* ============================================================
   OPTION B — full-width crisis bar pinned at the very top, with the
   transparent reveal-nav BELOW it (nav hides on scroll-down, reappears
   on scroll-up UNDER the bar; the crisis bar never hides).
   The crisis band element lives in the "Top" widget position.
   ============================================================ */
:root{ --cc-crisis-h:75px; }   /* crisis bar height; the nav is offset below this */

/* Crisis bar: full-width, SQUARE edges, always pinned at the top, above the nav.
   left+right:0 (not width:100%) so a fixed element spans exactly the viewport;
   content is centered to ~1200px via padding so buttons never clip on wide screens. */
.cc-crisis-band{
  position:fixed !important;
  top:0 !important; left:0 !important; right:0 !important;
  width:auto !important; margin:0 !important;
  box-sizing:border-box !important;
  border-radius:0 !important;      /* square edges (full-width bar) */
  z-index:1000 !important;         /* above the nav so the reveal tucks BELOW the bar */
  /* Match the header's content box (uk-container: 1600px max-width, 40px min
     side padding) so the message lines up with the logo and the buttons line
     up with the end of the nav/social icons. */
  padding-left:max(40px, calc((100% - 1600px) / 2)) !important;
  padding-right:max(40px, calc((100% - 1600px) / 2)) !important;
}

/* Transparent nav sits BELOW the crisis bar — at rest AND when it reveals on scroll-up.
   The reveal navbar is a SEPARATE .uk-sticky element (not .tm-header), so target the
   fixed sticky that actually contains the nav links and offset it below the bar. */
/* Desktop header is position:absolute (overlay) — position it with top.
   Mobile header is position:relative (in flow) inside .tm-page, so the
   .tm-page padding-top below already offsets it — do NOT add margin there
   (that double-offsets it). */
.tm-header{ top:var(--cc-crisis-h) !important; }
/* The revealed navbar is a separate .uk-sticky element. On desktop it wraps
   .uk-navbar-nav; on mobile the sticky lives INSIDE .tm-header-mobile. Offset
   both below the bar so the reveal never hides behind the crisis bar. */
.uk-sticky-fixed:has(.uk-navbar-nav),
.tm-header-mobile .uk-sticky-fixed{ top:var(--cc-crisis-h) !important; }

/* Reserve space so page content isn't hidden beneath the fixed bar */
.tm-page{ padding-top:var(--cc-crisis-h); }

/* Safety: constrain the mobile header logo so the transparent header can't
   render it oversized (it was scaling to 640px and overflowing the viewport). */
.tm-header-mobile .uk-logo img{ max-width:170px !important; width:auto !important; height:auto !important; }