/* =====================================================================
   Healing Heroes Hawaii -- master.css
   Brand-aligned overrides + custom components on top of UIkit 3.

   Brand palette (from Brand Guide):
     --hhh-deep-navy   : #0B2A4A
     --hhh-ocean-blue  : #1F6FB2
     --hhh-aqua        : #5BC0EB
     --hhh-soft-sand   : #F2EBDC
     --hhh-muted-gold  : #C8A96A
   Typography:
     Headings -- Montserrat
     Body     -- Open Sans
   Tone:
     Warm, ocean-inspired, trustworthy, human.
     NEVER military green / harsh military / clinical / touristy.
===================================================================== */

:root {
  --hhh-deep-navy:   #0B2A4A;
  --hhh-ocean-blue:  #1F6FB2;
  --hhh-aqua:        #5BC0EB;
  --hhh-soft-sand:   #F2EBDC;
  --hhh-muted-gold:  #C8A96A;
  --hhh-white:       #FFFFFF;
  --hhh-text:        #1d2733;
  --hhh-text-muted:  #5a6779;
  --hhh-radius:      12px;
  --hhh-shadow-sm:   0 4px 14px rgba(11, 42, 74, 0.08);
  --hhh-shadow-md:   0 10px 30px rgba(11, 42, 74, 0.12);
  --hhh-gradient:    linear-gradient(135deg, var(--hhh-deep-navy) 0%, var(--hhh-ocean-blue) 55%, var(--hhh-aqua) 100%);
}

/* ---------- Base ---------- */
html, body {
  font-family: 'Open Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--hhh-text);
  background: #ffffff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.uk-h1, .uk-h2, .uk-h3, .uk-h4, .uk-h5, .uk-h6,
.uk-heading-line, .uk-heading-medium, .uk-heading-large {
  font-family: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--hhh-deep-navy);
  letter-spacing: 0.01em;
}

a { color: var(--hhh-ocean-blue); transition: color 0.2s ease; }
a:hover, a:focus { color: var(--hhh-deep-navy); text-decoration: underline; }

/* UIkit colors <em> in pinkish red (--uk-base-em-color = #f0506e) which
   clashes with our blue/gold palette. Restore browser-default italic
   emphasis by inheriting the surrounding text color. */
em { color: inherit; font-style: italic; }

/* Skip to main content -- accessibility */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--hhh-deep-navy);
  color: #fff;
  padding: 12px 16px;
  z-index: 10001;
  border-radius: 0 0 6px 0;
}
.skip-link:focus {
  left: 0;
  outline: 3px solid var(--hhh-aqua);
  outline-offset: 2px;
  text-decoration: none;
}

/* Focus rings, system-wide */
:focus-visible {
  outline: 3px solid var(--hhh-aqua);
  outline-offset: 2px;
}

/* ---------- UIkit color overrides ---------- */
.uk-button-primary {
  background: var(--hhh-ocean-blue);
  color: #fff;
  border-radius: 6px;
  padding-left: 24px;
  padding-right: 24px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: var(--hhh-shadow-sm);
}
.uk-button-primary:hover,
.uk-button-primary:focus {
  /* Subtle deepening of ocean blue rather than going all the way to
     deep-navy -- keeps the button feeling alive, not heavy. */
  background: #1A5E96;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: var(--hhh-shadow-md);
}

/* Donate CTAs -- on hover, label fades from white to soft-sand
   (#f3e7db, per brand guide). Targets any anchor primary-button whose
   href references the donate flow ("/donate/", "/donate/#monthly",
   "#donate-form" on the donate page itself). Non-donate primary
   buttons keep the default white-on-blue hover. */
a.uk-button-primary[href*="donate"]:hover,
a.uk-button-primary[href*="donate"]:focus {
  color: #f3e7db;
}

/* On-blue button variant
   --------------------------------------------------------------------
   Use as a modifier alongside `.uk-button-primary` when a CTA sits on
   one of the blue brand sections (e.g. `.hhh-section--ocean` or the
   home hero). Swaps the ocean-blue fill for muted-gold so the button
   has real contrast against a blue background while staying in-brand.
*/
.uk-button-primary.hhh-btn--on-blue {
  background: var(--hhh-muted-gold);
  color: var(--hhh-deep-navy);
}
.uk-button-primary.hhh-btn--on-blue:hover,
.uk-button-primary.hhh-btn--on-blue:focus {
  background: #d6bc82;          /* slightly warmer/lighter gold */
  color: var(--hhh-deep-navy);  /* keep navy text -- sand-on-gold has poor contrast */
}
/* Bump specificity so this beats the donate-hover label rule above */
a.uk-button-primary.hhh-btn--on-blue[href*="donate"]:hover,
a.uk-button-primary.hhh-btn--on-blue[href*="donate"]:focus {
  color: var(--hhh-deep-navy);
}
.uk-button-secondary {
  background: var(--hhh-deep-navy);
  border-radius: 6px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
}
.uk-button-default {
  border-radius: 6px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
}
.uk-button-text {
  font-family: 'Montserrat', sans-serif;
  color: var(--hhh-ocean-blue);
}
.uk-button-text::before { border-bottom-color: var(--hhh-ocean-blue); }

.uk-section-secondary { background: var(--hhh-deep-navy); }
.uk-section-muted     { background: var(--hhh-soft-sand); }

/* ---------- Header ---------- */
#page-header {
  background: #ffffff;
  border-bottom: 1px solid rgba(11, 42, 74, 0.06);
  position: sticky; top: 0;
  z-index: 1000;
  backdrop-filter: saturate(180%) blur(8px);
  -webkit-backdrop-filter: saturate(180%) blur(8px);
  transition: box-shadow 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}
/* Stronger separation once the page has scrolled. Toggled by master.js. */
#page-header.is-scrolled {
  background: rgba(255, 255, 255, 0.96);
  border-bottom-color: rgba(11, 42, 74, 0.16);
  box-shadow: 0 6px 18px rgba(11, 42, 74, 0.12);
}
.hhh-logo-link { display: inline-flex; align-items: center; }
.hhh-logo { height: 56px; display: block; width: auto; }
@media (max-width: 480px) {
  .hhh-logo { height: 44px; }
}

.hhh-nav { list-style: none; margin: 0; padding: 0; gap: 20px; }
.hhh-nav > li > a {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--hhh-deep-navy);
  text-transform: none;
  text-decoration: none;
  padding: 8px 4px;
  position: relative;
}
.hhh-nav > li > a:hover,
.hhh-nav > li > a:focus { color: var(--hhh-ocean-blue); }

/* Active page indicator -- color shift to ocean-blue + aqua underline */
.hhh-nav > li.uk-active > a,
.hhh-nav > li[aria-current="page"] > a {
  color: var(--hhh-ocean-blue);
  font-weight: 700;
}
.hhh-nav > li.uk-active > a::after,
.hhh-nav > li[aria-current="page"] > a::after {
  content: "";
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: -2px;
  height: 3px;
  border-radius: 3px;
  background: var(--hhh-aqua);
}

/* Off-canvas (mobile) menu active state */
.hhh-offcanvas .uk-nav > li.uk-active > a,
.hhh-offcanvas .uk-nav > li[aria-current="page"] > a {
  color: var(--hhh-aqua) !important;
  font-weight: 700;
}
.hhh-offcanvas .uk-nav > li.uk-active > a::before,
.hhh-offcanvas .uk-nav > li[aria-current="page"] > a::before {
  content: "› ";
  color: var(--hhh-aqua);
  font-weight: 700;
}
.hhh-nav .hhh-nav-cta a { color: #fff; }

/* Header donate CTA -- override UIkit's compact small-button padding
   so the button has more room to breathe than the rest of the nav. */
.hhh-nav-cta .uk-button {
  padding: 9px 28px;
  font-size: 0.9rem;
  line-height: 1.2;
}

.hhh-mobile-toggle {
  font-size: 1.5rem;
  color: var(--hhh-deep-navy);
  padding: 8px 12px;
  display: inline-flex;
  align-items: center;
}
.hhh-mobile-toggle:hover, .hhh-mobile-toggle:focus { color: var(--hhh-ocean-blue); }

.hhh-offcanvas { background: var(--hhh-gradient); color: #fff; }
.hhh-offcanvas a { color: #fff; text-decoration: none; }
.hhh-offcanvas a:hover, .hhh-offcanvas a:focus {
  color: var(--hhh-aqua);
  text-decoration: none;     /* no hover underline in the mobile menu */
}

/* ---------- Page title band (non-home) ---------- */
.hhh-title-band {
  background: var(--hhh-gradient);
  color: #fff;
  padding-top: 80px !important;
  padding-bottom: 80px !important;
}
.hhh-title-band h1 {
  color: #fff;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
}
.hhh-title-band p { color: rgba(255,255,255,0.9); }

/* ---------- Home hero ---------- */
.hhh-home-hero {
  position: relative;
  min-height: 78vh;
  display: flex;
  align-items: center;
  color: #fff;
  /* Solid navy fallback while the Vimeo iframe loads (and for users
     with prefers-reduced-motion who never see the video). */
  background: var(--hhh-deep-navy);
  overflow: hidden;
}

/* Background-video layer (Vimeo iframe scaled to cover the hero, like
   background-size: cover but for an iframe). Sits behind the gradient
   overlay and content. */
.hhh-hero-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.hhh-hero-video iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  /* Always cover the section: 16:9 ratio, scaled by whichever axis
     is the longest. */
  width: 100vw;
  height: 56.25vw;       /* width * 9/16 */
  min-width: 177.78vh;   /* height * 16/9 */
  min-height: 100%;
  transform: translate(-50%, -50%);
  border: 0;
  pointer-events: none;
}

/* Gradient overlay above the video, below the content. Reuses the
   brand gradient at reduced opacity so the video is visible behind
   while text stays readable. The radial accents are layered on top
   of the linear gradient in a single image. */
.hhh-home-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(ellipse at 20% 80%, rgba(91, 192, 235, 0.18) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 20%, rgba(255, 255, 255, 0.10) 0%, transparent 55%),
    linear-gradient(135deg,
      rgba(11, 42, 74, 0.78) 0%,
      rgba(31, 111, 178, 0.58) 55%,
      rgba(91, 192, 235, 0.42) 100%);
  pointer-events: none;
}

.hhh-home-hero .uk-container { position: relative; z-index: 2; }

/* Honor prefers-reduced-motion -- hide the autoplay video; the gradient
   alone still provides a complete hero. */
@media (prefers-reduced-motion: reduce) {
  .hhh-hero-video { display: none; }
  .hhh-home-hero { background: var(--hhh-gradient); }
  .hhh-home-hero::before {
    /* No video underneath, so we can let the linear gradient breathe
       at full opacity and just keep the radial accents subtle. */
    background:
      radial-gradient(ellipse at 20% 80%, rgba(91, 192, 235, 0.35) 0%, transparent 60%),
      radial-gradient(ellipse at 80% 20%, rgba(255, 255, 255, 0.18) 0%, transparent 55%);
  }
}

/* Hero content sits flush-left so it aligns with the header logo
   (both are inside <div class="uk-container">). On medium+ viewports
   it caps at 2/3 of the container width for readability. */
.hhh-home-hero-inner {
  text-align: left;
  width: 100%;
  max-width: 100%;
}
@media (min-width: 960px) {
  .hhh-home-hero-inner { max-width: 66.66%; }
}

.hhh-home-hero h1 {
  color: #fff;
  font-weight: 800;
  font-size: clamp(2.4rem, 5vw, 4rem);
  line-height: 1.05;
  margin: 0 0 24px 0;
}
.hhh-home-hero p { color: rgba(255,255,255,0.95); font-size: 1.1rem; max-width: 680px; }

/* Hero CTA: stacked on mobile, side-by-side from small viewports up. */
.hhh-home-hero-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}
@media (min-width: 640px) {
  .hhh-home-hero-cta { flex-direction: row; flex-wrap: wrap; }
}

/* ---------- Sections ---------- */
.hhh-section { padding: 70px 0; }
.hhh-section--sand   { background: var(--hhh-soft-sand); }
.hhh-section--ocean  {
  background: var(--hhh-gradient);
  color: #fff;
  position: relative;
  overflow: hidden;            /* keep the wave clipped to the section */
}

/* ---------- Warm donation-ask section ----------
   Used in § 7 (Help a Hero Heal). Hosts a real "veteran relaxed and
   happy" photo as the section's background, with the same brand-blue
   gradient overlay as the home hero on top so text is readable and
   the section visually ties to the rest of the brand-gradient sections.
   (Class name kept for stability; the look is now more "ocean" than
   "warm.") */
.hhh-section--warm-cta {
  position: relative;
  overflow: hidden;
  background: var(--hhh-deep-navy);   /* fallback before the bg layer paints */
  color: #fff;
}
.hhh-section--warm-cta h1,
.hhh-section--warm-cta h2,
.hhh-section--warm-cta h3 { color: #fff; }
.hhh-section--warm-cta .hhh-eyebrow { color: var(--hhh-aqua); }

/* Background plate -- holds the real photo as a `cover` background.
   The actual `background-image: url(...)` is set as an inline style
   on the element so it can pick up a `?v=<filemtime>` cache-buster
   from PHP. Falls back to deep-navy if the image is missing.
   Brand-gradient overlay sits on top via ::before. */
.hhh-warm-cta-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-color: var(--hhh-deep-navy);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.hhh-warm-cta-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  /* Same brand-blue gradient overlay used on the home hero -- semi-
     transparent linear deep-navy → ocean → aqua, plus two soft radial
     accents. Photo shows through the lighter areas, text stays
     readable across the whole section. */
  background:
    radial-gradient(ellipse at 20% 80%, rgba(91, 192, 235, 0.18) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 20%, rgba(255, 255, 255, 0.10) 0%, transparent 55%),
    linear-gradient(135deg,
      rgba(11, 42, 74, 0.78) 0%,
      rgba(31, 111, 178, 0.58) 55%,
      rgba(91, 192, 235, 0.42) 100%);
  pointer-events: none;
}

/* Foreground content sits above the bg plate + overlay. */
.hhh-warm-cta-content { position: relative; z-index: 1; }
.hhh-section--ocean h1, .hhh-section--ocean h2, .hhh-section--ocean h3 { color: #fff; }
.hhh-section--ocean a { color: var(--hhh-aqua); }
.hhh-section--ocean a:hover { color: #fff; }

/* Brand wave decoration at the bottom-right of every ocean section.
   Uses /media/png/blue-wave.png at its natural size, anchored to the
   bottom-right of the section. The section's `overflow: hidden`
   clips the left/top portion of the image when the viewport is
   narrower than the image (2170 px wide). Uses ::before so it
   doesn't collide with the dev section-overlay badge (::after). */
.hhh-section--ocean::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("/media/png/blue-wave.png");
  background-repeat: no-repeat;
  background-position: right bottom;
  background-size: auto;            /* natural size */
  pointer-events: none;
  z-index: 0;
}
/* Ensure section content sits above the decoration. */
.hhh-section--ocean > .uk-container { position: relative; z-index: 1; }

.hhh-eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--hhh-ocean-blue);
}
.hhh-section--ocean .hhh-eyebrow { color: var(--hhh-aqua); }

.hhh-divider {
  width: 64px; height: 4px;
  background: var(--hhh-aqua);
  border-radius: 4px;
  margin: 16px 0 24px;
}
.hhh-divider--center { margin-left: auto; margin-right: auto; }
.hhh-section--ocean .hhh-divider { background: var(--hhh-muted-gold); }

/* Reusable centered intro/outro block (caps reading width). */
.hhh-section-intro { max-width: 760px; margin-left: auto; margin-right: auto; }

/* ---------- Chips (compact icon + label tiles) ----------
   Used to break up dense text blocks with a quick visual scan.
   Defaults to a light/sand look for use on light sections; an override
   below adapts them for `.hhh-section--ocean` and the home hero. */
.hhh-chip {
  background: rgba(11, 42, 74, 0.04);
  border: 1px solid rgba(11, 42, 74, 0.12);
  border-radius: 12px;
  padding: 18px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 10px;
  height: 100%;
  min-height: 110px;
  color: var(--hhh-deep-navy);
  transition: background 0.2s, border-color 0.2s, transform 0.2s;
}
.hhh-chip:hover {
  background: rgba(31, 111, 178, 0.08);
  border-color: var(--hhh-ocean-blue);
  transform: translateY(-2px);
}
.hhh-chip i { color: var(--hhh-ocean-blue); font-size: 1.6rem; }
.hhh-chip span {
  color: var(--hhh-deep-navy);
  font-size: 0.85rem;
  font-weight: 600;
  font-family: 'Montserrat', sans-serif;
  line-height: 1.3;
}

/* Glass variant for blue sections / hero -- semi-transparent white
   over the gradient, with aqua icons. */
.hhh-section--ocean .hhh-chip,
.hhh-home-hero .hhh-chip {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.20);
  color: #fff;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.hhh-section--ocean .hhh-chip:hover,
.hhh-home-hero .hhh-chip:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: var(--hhh-aqua);
}
.hhh-section--ocean .hhh-chip i,
.hhh-home-hero .hhh-chip i { color: var(--hhh-aqua); }
.hhh-section--ocean .hhh-chip span,
.hhh-home-hero .hhh-chip span { color: rgba(255, 255, 255, 0.95); }

/* ---------- Chip mosaic (small square glass tiles) ----------
   Used in § 4 (Retreats and Restorative Programs). Lives inside the
   standard uk-container (no full-bleed). 12 small square tiles arranged
   in a 6x2 / 4x3 / 3x4 / 2x6 grid depending on viewport. Generous gaps;
   tiles never touch and never overlap (no hover scale, no z-index pop).
*/

.hhh-chip-mosaic {
  display: grid;
  /* Tiles target 100x100. They shrink down to 0 if the container is
     narrower; on wider viewports they cap at 100px and the grid
     auto-centers within the surrounding container. */
  grid-template-columns: repeat(6, minmax(0, 100px));
  /* Equal horizontal and vertical gap (shorthand sets both). */
  column-gap: 28px;
  row-gap: 28px;
  justify-content: center;
}

/* Each chip is a strict 1:1 square. We override the base chip's
   `height: 100%` and `min-height` so aspect-ratio is what drives the
   final dimensions (otherwise the grid row stretches the chip and
   breaks the square). */
.hhh-chip-mosaic .hhh-chip {
  aspect-ratio: 1 / 1;
  width: 100%;
  height: auto;         /* override base .hhh-chip height: 100% */
  min-height: 0;        /* override base min-height: 110px */
  padding: 8px 6px;
  gap: 4px;
  border-radius: 12px;
}

.hhh-chip-mosaic .hhh-chip i { font-size: 1.2rem; }
.hhh-chip-mosaic .hhh-chip span {
  font-size: 0.65rem;
  letter-spacing: 0.01em;
  line-height: 1.2;
}

/* Glass appearance inside ocean sections -- slightly more opaque so
   each tile reads as a distinct rectangle against the gradient. */
.hhh-section--ocean .hhh-chip-mosaic .hhh-chip {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.28);
}

/* Hover: subtle lift + soft shadow. No scale, no z-index changes. */
.hhh-chip-mosaic .hhh-chip:hover,
.hhh-chip-mosaic .hhh-chip:focus-within {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
  background: rgba(255, 255, 255, 0.18);
  border-color: var(--hhh-aqua);
}

/* Tablet: 4 columns × 3 rows. Tiles still capped at ~100px each. */
@media (max-width: 1024px) {
  .hhh-chip-mosaic {
    grid-template-columns: repeat(4, minmax(0, 110px));
    column-gap: 22px;
    row-gap: 22px;
  }
}

/* Small tablet: 3 columns × 4 rows. */
@media (max-width: 760px) {
  .hhh-chip-mosaic {
    grid-template-columns: repeat(3, minmax(0, 120px));
    column-gap: 18px;
    row-gap: 18px;
  }
  .hhh-chip-mosaic .hhh-chip span { font-size: 0.7rem; }
  .hhh-chip-mosaic .hhh-chip i    { font-size: 1.3rem; }
}

/* Phone: 2 columns × 6 rows -- let tiles grow a bit so labels stay
   legible at small viewport widths. */
@media (max-width: 480px) {
  .hhh-chip-mosaic {
    grid-template-columns: repeat(2, minmax(0, 130px));
    column-gap: 14px;
    row-gap: 14px;
  }
  .hhh-chip-mosaic .hhh-chip span { font-size: 0.75rem; }
  .hhh-chip-mosaic .hhh-chip i    { font-size: 1.4rem; }
}

@media (prefers-reduced-motion: reduce) {
  .hhh-chip-mosaic .hhh-chip { transform: none !important; }
}

/* ---------- Burden cards (§ 5 — invisible wounds) ----------
   Five small cards used in § 5 (Healing Beyond What Others Can See) to
   replace a "Some carry X. Some carry Y..." run-on list. A single
   "SOME CARRY..." prefix sits above the row; each card carries one
   word (Trauma / Chronic pain / Grief / Exhaustion / Silence) with a
   symbolic icon. */

.hhh-burden-prefix {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--hhh-muted-gold);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0;
}

.hhh-burden-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px;
  margin-top: 18px;
}

.hhh-burden-card {
  background: #fff;
  border-radius: 12px;
  padding: 28px 16px;
  text-align: center;
  border-top: 3px solid var(--hhh-muted-gold);
  box-shadow: var(--hhh-shadow-sm);
  transition: transform 0.2s, box-shadow 0.2s, border-top-color 0.2s;
}
.hhh-burden-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--hhh-shadow-md);
  border-top-color: var(--hhh-ocean-blue);
}
.hhh-burden-card i {
  display: block;
  font-size: 1.8rem;
  color: var(--hhh-deep-navy);
  margin-bottom: 12px;
  opacity: 0.9;
}
.hhh-burden-card h3 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  color: var(--hhh-deep-navy);
  margin: 0;
  font-size: 1.1rem;
  letter-spacing: 0.01em;
}

/* Tablet: tighter padding so 5 cards still sit comfortably in a row. */
@media (max-width: 960px) {
  .hhh-burden-row { gap: 14px; }
  .hhh-burden-card { padding: 22px 10px; }
  .hhh-burden-card i { font-size: 1.5rem; }
  .hhh-burden-card h3 { font-size: 1rem; }
}

/* Phone: stack into a single column with horizontal layout per card so
   the row stays visually compact even with 5 items. */
@media (max-width: 560px) {
  .hhh-burden-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .hhh-burden-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 18px;
    text-align: left;
    border-top: none;
    border-left: 3px solid var(--hhh-muted-gold);
  }
  .hhh-burden-card:hover { border-top-color: transparent; border-left-color: var(--hhh-ocean-blue); }
  .hhh-burden-card i { margin: 0; font-size: 1.4rem; flex-shrink: 0; }
  .hhh-burden-card h3 { font-size: 1.05rem; }
}

/* ---------- Cards ---------- */
.hhh-card {
  background: #fff;
  border-radius: var(--hhh-radius);
  padding: 28px;
  /* Tight shadow so it doesn't visually extend into the gap between
     cards. Subtle is fine; the lift on hover does the work. */
  box-shadow: 0 2px 8px rgba(11, 42, 74, 0.06);
  height: 100%;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  border-top: 3px solid var(--hhh-aqua);
}
.hhh-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 14px rgba(11, 42, 74, 0.10);
}

/* Card grid wrapper -- vertical gap is generous so adjacent rows
   read as clearly separated, not visually connected. */
.hhh-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 48px;
  row-gap: 96px;
}
@media (max-width: 960px) {
  .hhh-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 36px;
    row-gap: 72px;
  }
}
@media (max-width: 640px) {
  .hhh-card-grid {
    grid-template-columns: 1fr;
    column-gap: 0;
    row-gap: 40px;
  }
}

/* 2-column variant -- same generous row-gap, but 2 cols on desktop
   too. Used in Get Involved §§ 1-4 where there are 4 cards. */
.hhh-card-grid--2col {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 640px) {
  .hhh-card-grid--2col {
    grid-template-columns: 1fr;
  }
}
.hhh-card .hhh-card-icon {
  font-size: 2rem;
  color: var(--hhh-ocean-blue);
  margin-bottom: 12px;
}
.hhh-card h3 { margin: 0 0 8px 0; font-size: 1.25rem; }

.hhh-tier-card {
  background: #fff;
  border-radius: var(--hhh-radius);
  padding: 28px 24px;
  text-align: center;
  box-shadow: var(--hhh-shadow-sm);
  height: 100%;
  border: 2px solid transparent;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.hhh-tier-card:hover { border-color: var(--hhh-aqua); transform: translateY(-3px); }
.hhh-tier-card .hhh-tier-amount {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  color: var(--hhh-deep-navy);
  font-size: 2.2rem;
  margin: 0 0 8px;
  line-height: 1;
}
.hhh-tier-card .hhh-tier-amount.featured { color: var(--hhh-muted-gold); }

/* ---------- Lists ---------- */
/* NOTE: list bullets below use plain Unicode glyphs (not Font Awesome
   pseudo-elements). The site loads Font Awesome via the RaneWorks kit
   in SVG-with-JS mode, which swaps <i> tags into inline <svg> at
   runtime but does not load the FA webfont -- so CSS `content: "\f00c"`
   falls back to the raw codepoint and renders as boxes/garbled text.
   Inline <i class="fa-..."> tags throughout the site keep working as
   normal. */

.hhh-check-list { list-style: none; margin: 0; padding: 0; }
.hhh-check-list li {
  position: relative;
  padding: 6px 0 6px 32px;
}
.hhh-check-list li::before {
  content: "\2713";          /* ✓ -- Unicode check mark */
  position: absolute;
  left: 4px; top: 6px;
  color: var(--hhh-ocean-blue);
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1;
}
.hhh-section--ocean .hhh-check-list li::before { color: var(--hhh-aqua); }

.hhh-bullet-list { list-style: none; margin: 0; padding: 0; }
.hhh-bullet-list li {
  position: relative;
  padding: 8px 0 8px 28px;
  border-bottom: 1px solid rgba(11,42,74,0.08);
}
.hhh-bullet-list li::before {
  content: "\2022";          /* • -- Unicode bullet */
  position: absolute; left: 8px; top: 7px;
  color: var(--hhh-aqua);
  font-size: 1.4rem;
  line-height: 1;
}
.hhh-bullet-list li:last-child { border-bottom: 0; }

/* ---------- Values strip (5 brand pillars) ---------- */
.hhh-values {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}
@media (max-width: 768px) { .hhh-values { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .hhh-values { grid-template-columns: 1fr; } }
.hhh-value {
  background: #fff;
  border-radius: var(--hhh-radius);
  padding: 24px 16px;
  text-align: center;
  box-shadow: var(--hhh-shadow-sm);
  border-top: 4px solid var(--hhh-aqua);
}
.hhh-value i {
  font-size: 1.8rem;
  color: var(--hhh-ocean-blue);
  margin-bottom: 10px;
  display: block;
}
.hhh-value h3 {
  font-size: 1.05rem;
  margin: 0 0 6px;
}
.hhh-value p {
  font-size: 0.92rem;
  color: var(--hhh-text-muted);
  margin: 0;
}

/* ---------- Footer social icons (placeholders) ----------
   Small filled-square buttons. Hover transitions to aqua. Hrefs are
   "#" placeholders pending real social-media URLs. */
.hhh-social-icons {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
}
.hhh-social-icons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 0.95rem;
  text-decoration: none;
  transition: background 0.2s, color 0.2s, transform 0.2s;
}
.hhh-social-icons a:hover,
.hhh-social-icons a:focus {
  background: var(--hhh-aqua);
  color: var(--hhh-deep-navy);
  text-decoration: none;
  transform: translateY(-2px);
}

/* ---------- Brand pillars strip (footer) ----------
   Matches the values strip in the brand guide -- icon + label per
   pillar, evenly spaced, centered, white on the deep-navy footer.
   Sits below the 3-column footer grid with a hairline separator. */
.hhh-brand-pillars {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 28px 56px;
  margin: 56px 0 0;
  padding: 32px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
}
.hhh-brand-pillars > li {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.hhh-brand-pillars > li > i {
  color: var(--hhh-aqua);
  font-size: 1.4rem;
  flex-shrink: 0;
}

@media (max-width: 760px) {
  .hhh-brand-pillars { gap: 20px 28px; padding-top: 24px; margin-top: 40px; }
  .hhh-brand-pillars > li { font-size: 0.78rem; letter-spacing: 0.12em; }
  .hhh-brand-pillars > li > i { font-size: 1.2rem; }
}

/* ---------- Crisis / disclaimer callout ---------- */
.hhh-callout {
  background: #fff5f5;
  border-left: 5px solid #b71c1c;
  padding: 20px 24px;
  border-radius: 8px;
}
.hhh-callout strong { color: #b71c1c; }

/* ---------- Donation embed slot ---------- */
.hhh-embed-slot {
  background: var(--hhh-soft-sand);
  border: 2px dashed var(--hhh-muted-gold);
  border-radius: var(--hhh-radius);
  padding: 60px 24px;
  text-align: center;
  color: var(--hhh-text-muted);
}
.hhh-embed-slot h3 {
  color: var(--hhh-deep-navy);
  margin: 0 0 8px;
}
.hhh-embed-slot code {
  background: rgba(11,42,74,0.08);
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.9rem;
}

/* ---------- Static photo wrapper ----------
   Used for real photography in two-column section layouts. Forces a
   uniform 4:3 aspect with object-fit: cover so different source-image
   aspect ratios still produce visually consistent columns. */
.hhh-photo {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--hhh-radius);
  box-shadow: var(--hhh-shadow-md);
}

/* ---------- Donation form embed wrapper ----------
   Hosts a cross-origin iframe served from the donation platform.
   We can't style the form's interior from this page (cross-origin
   security); the platform's admin theme controls that. What we CAN
   style is the outer frame: cap width for readable layout, brand
   border-radius + shadow, deep-navy fallback while the iframe
   loads. */
.hhh-donate-embed {
  max-width: 720px;
  margin: 0 auto;
  border-radius: var(--hhh-radius);
  overflow: hidden;
  background: var(--hhh-deep-navy);
  box-shadow: var(--hhh-shadow-md);
}
.hhh-donate-embed iframe {
  display: block;
  width: 100%;
  border: 0;
}

/* ---------- Vimeo (or other iframe) video embed wrapper ----------
   Pairs with the responsive padding-top: 56.25% trick that Vimeo's
   embed-snippet uses for 16:9. Gives the iframe brand-matching
   rounded corners + soft shadow so it sits cleanly next to copy. */
.hhh-video-embed {
  border-radius: var(--hhh-radius);
  overflow: hidden;
  box-shadow: var(--hhh-shadow-md);
  background: var(--hhh-deep-navy);  /* fallback before iframe loads */
}
.hhh-video-embed iframe { display: block; }

/* ---------- Image placeholders (Hawaii ocean themed) ---------- */
.hhh-image-placeholder {
  background:
    linear-gradient(180deg, rgba(11,42,74,0.55), rgba(31,111,178,0.35)),
    linear-gradient(135deg, var(--hhh-deep-navy), var(--hhh-ocean-blue) 50%, var(--hhh-aqua));
  border-radius: var(--hhh-radius);
  min-height: 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.85);
  text-align: center;
  padding: 24px;
  font-family: 'Montserrat', sans-serif;
}
.hhh-image-placeholder i { font-size: 2.5rem; margin-bottom: 12px; opacity: 0.85; }
.hhh-image-placeholder small { display: block; opacity: 0.7; margin-top: 6px; font-style: italic; }

/* On-blue placeholder variant -- use when the placeholder sits on a
   blue brand section so it doesn't clash. Sand + muted-gold gradient
   with deep-navy lettering. */
.hhh-image-placeholder.hhh-image-placeholder--on-blue {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 60%),
    linear-gradient(135deg, var(--hhh-soft-sand) 0%, #ecdfc7 55%, var(--hhh-muted-gold) 100%);
  color: var(--hhh-deep-navy);
  box-shadow: 0 6px 20px rgba(11, 42, 74, 0.18);
}
.hhh-image-placeholder.hhh-image-placeholder--on-blue i {
  color: var(--hhh-deep-navy);
  opacity: 0.7;
}
.hhh-image-placeholder.hhh-image-placeholder--on-blue small {
  color: rgba(11, 42, 74, 0.65);
  opacity: 1;
}

/* ---------- Footer ---------- */
#page-footer { background: var(--hhh-deep-navy); color: rgba(255,255,255,0.85); }
#page-footer h2, #page-footer h3 { color: #fff; }
#page-footer a { color: var(--hhh-aqua); }
#page-footer a:hover, #page-footer a:focus { color: #fff; }

/* In-footer Stay Connected section. `uk-light` is NOT applied to
   this section's ancestor (it sits on `.hhh-footer-main` and
   `.hhh-footer-bottom` only). The explicit color rules below are
   belt-and-suspenders in case anything else in the cascade tries to
   force light text here. */
.hhh-footer-signup {
  color: var(--hhh-deep-navy);
}
.hhh-footer-signup h1,
.hhh-footer-signup h2,
.hhh-footer-signup h3,
.hhh-footer-signup h4,
.hhh-footer-signup h5,
.hhh-footer-signup h6 {
  color: var(--hhh-deep-navy) !important;
}
.hhh-footer-signup p {
  color: var(--hhh-deep-navy);
}
.hhh-footer-signup .hhh-eyebrow {
  color: var(--hhh-ocean-blue);
}
.hhh-signup-form .uk-input {
  background: rgba(255,255,255,0.95);
  color: var(--hhh-text);
  border: 0;
  border-radius: 6px;
}

/* On mobile the email field would otherwise stretch (or `uk-form-width-large`
   would force a fixed 500 px) edge-to-edge against the viewport. Add inline
   padding to the form and let the input fill that constrained area. */
@media (max-width: 640px) {
  .hhh-signup-form { padding-left: 16px; padding-right: 16px; }
  .hhh-signup-form .uk-input { width: 100%; max-width: 100%; }
}
.hhh-signup-form .uk-input::placeholder { color: var(--hhh-text-muted); }

.hhh-footer-main {
  background: var(--hhh-deep-navy);
  border-top: 1px solid rgba(255,255,255,0.08);
}
.hhh-footer-logo { max-width: 260px; height: auto; }
.hhh-footer-tag {
  font-family: 'Montserrat', sans-serif;
  font-style: italic;
  color: var(--hhh-aqua);
}
.hhh-footer-list { list-style: none; padding: 0; margin: 0; }
.hhh-footer-list li { padding: 4px 0; }
.hhh-footer-list i { color: var(--hhh-aqua); margin-right: 8px; }

/* Disclaimers sit inside the bottom bar -- centered, small, muted.
   The divider rule below (.hhh-footer-divider) lives OUTSIDE
   uk-container so it spans the full footer width; the disclaimer
   block stays capped for readable line lengths. */
.hhh-footer-disclaimers {
  color: rgba(255,255,255,0.55);
  max-width: 920px;
  margin: 0 auto;
  text-align: center;
  font-size: 0.72rem;
  line-height: 1.55;
}
.hhh-footer-disclaimers p { margin: 0 0 6px; }
.hhh-footer-disclaimers p:last-child { margin-bottom: 0; }

/* Full-width hairline divider between disclaimers and copyright. */
.hhh-footer-divider {
  border: 0;
  border-top: 1px solid rgba(255,255,255,0.10);
  margin: 14px 0;
  width: 100%;
}

.hhh-footer-bottom {
  background: #04111f;
  color: rgba(255,255,255,0.5);
}

/* ---------- Utility ---------- */
.hhh-text-gold { color: var(--hhh-muted-gold); }
.hhh-text-aqua { color: var(--hhh-aqua); }
.hhh-bg-sand   { background: var(--hhh-soft-sand); }

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* =====================================================================
   DEV-only section overlay
   --------------------------------------------------------------------
   Activated by adding `body.hhh-debug-sections` (master.js handles the
   toggling via `?dev=sections` / `?dev=off` URL params, persisted in
   localStorage). Each <section> on the page that carries
   `data-hhh-section` and `data-hhh-section-title` attributes gets a
   labeled badge in its top-left corner showing the spec section number
   and title from the customer's website document.
===================================================================== */
body.hhh-debug-sections [data-hhh-section] {
  position: relative;
  outline: 2px dashed rgba(91, 192, 235, 0.45);
  outline-offset: -2px;
}
body.hhh-debug-sections [data-hhh-section]::after {
  content: "§ " attr(data-hhh-section) " — " attr(data-hhh-section-title);
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 9998;            /* below the toggle button (9999) */
  background: #0B2A4A;
  color: #5BC0EB;
  border: 2px solid #5BC0EB;
  padding: 6px 12px;
  border-radius: 6px;
  font-family: 'Montserrat', monospace;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
@media (max-width: 640px) {
  body.hhh-debug-sections [data-hhh-section]::after {
    font-size: 0.7rem;
    max-width: calc(100vw - 24px);
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* L&F preview-mode toast (master.js shows this when an internal page
   link is clicked during L&F review). Visible briefly, fades out. */
.hhh-preview-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: rgba(11, 42, 74, 0.95);
  color: #fff;
  padding: 12px 22px;
  border-radius: 8px;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
  opacity: 0;
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 99999;
  pointer-events: none;
  max-width: calc(100vw - 48px);
  text-align: center;
}
.hhh-preview-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Floating dev toggle button */
.hhh-debug-toggle {
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 9999;
  background: #0B2A4A;
  color: #5BC0EB;
  border: 2px solid #5BC0EB;
  border-radius: 6px;
  padding: 8px 14px;
  font-family: 'Montserrat', monospace;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.hhh-debug-toggle:hover,
.hhh-debug-toggle:focus { background: #5BC0EB; color: #0B2A4A; }