/*
Theme Name: Hands In Unison
Theme URI: https://handsinunison.local
Author: Hands In Unison
Author URI: https://handsinunison.local
Description: Radiant Stewardship design system — high-end editorial block theme combining Christian foundation gravitas with vibrant Jamaican youth energy. Tonal depth, glassmorphism navigation, no-line rule, teal + gold palette.
Version: 0.2.0
Requires at least: 6.4
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: handsinunison
Tags: block-theme, full-site-editing, wide-blocks, block-styles, editor-style
*/

/* ============================================================
   GOOGLE FONTS
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');


/* ============================================================
   DESIGN TOKENS — CSS CUSTOM PROPERTIES
   All tokens mirror theme.json so both systems stay in sync.
   ============================================================ */
:root {
  /* — Primary ——————————————————————————————————————— */
  --hiu-primary:                #006874;
  --hiu-primary-container:      #9DEAEC;
  --hiu-primary-fixed-dim:      #004A55;
  --hiu-on-primary:             #FFFFFF;
  --hiu-on-primary-container:   #001F24;

  /* — Tertiary (Jamaican Sun) ————————————————————— */
  --hiu-tertiary:               #7A5900;
  --hiu-tertiary-container:     #FFDEA3;
  --hiu-on-tertiary:            #FFFFFF;
  --hiu-on-tertiary-container:  #271900;

  /* — Secondary ——————————————————————————————————— */
  --hiu-secondary:              #C99400;
  --hiu-secondary-bright:       #FFC439;
  --hiu-secondary-highlight:    #FDBC13;

  /* — Accent ——————————————————————————————————————— */
  --hiu-accent:                 #0891B2;
  --hiu-accent-light:           #47AAB9;

  /* — Surface Tiers ——————————————————————————————— */
  --hiu-background:             #F8F9FF;
  --hiu-surface-lowest:         #FFFFFF;
  --hiu-surface-low:            #EFF4FF;
  --hiu-surface:                #E6EEFF;
  --hiu-surface-high:           #DDE9FF;
  --hiu-surface-highest:        #D5E3FD;
  --hiu-surface-footer:         #F8FAFC;

  /* — Text ——————————————————————————————————————— */
  --hiu-on-surface:             #0D1C2F;
  --hiu-on-surface-variant:     #4A5A6B;
  --hiu-outline-variant:        #BDC9CB;

  /* — Semantic ——————————————————————————————————— */
  --hiu-error:                  #BA1A1A;

  /* — Glassmorphism ——————————————————————————————— */
  --hiu-glass-blur:             16px;
  --hiu-glass-blur-heavy:       24px;
  --hiu-glass-bg:               rgba(248, 249, 255, 0.72);
  --hiu-glass-bg-dark:          rgba(13, 28, 47, 0.64);
  --hiu-glass-border:           rgba(255, 255, 255, 0.20);

  /* — Ghost Border (15% opacity outline-variant) —— */
  --hiu-ghost-border:           rgba(189, 201, 203, 0.15);

  /* — Radius ———————————————————————————————————— */
  --hiu-radius-sm:              0.5rem;
  --hiu-radius-md:              0.75rem;
  --hiu-radius-lg:              1.5rem;
  --hiu-radius-xl:              3rem;
  --hiu-radius-pill:            999px;

  /* — Shadows (ambient, navy-tinted) ——————————— */
  --hiu-shadow-xs:   0 2px 8px 0 rgba(13, 28, 47, 0.04);
  --hiu-shadow-sm:   0 4px 16px -2px rgba(13, 28, 47, 0.05);
  --hiu-shadow-md:   0 8px 32px -4px rgba(13, 28, 47, 0.06);
  --hiu-shadow-lg:   0 16px 48px -8px rgba(13, 28, 47, 0.07);
  --hiu-shadow-xl:   0 32px 80px -16px rgba(13, 28, 47, 0.08);
  --hiu-shadow-teal: 0 16px 48px -12px rgba(0, 104, 116, 0.22);
  --hiu-shadow-gold: 0 16px 48px -12px rgba(122, 89, 0, 0.20);

  /* — Transitions ———————————————————————————————— */
  --hiu-t-fast:   150ms cubic-bezier(0.4, 0, 0.2, 1);
  --hiu-t-base:   220ms cubic-bezier(0.4, 0, 0.2, 1);
  --hiu-t-slow:   350ms cubic-bezier(0.4, 0, 0.2, 1);
  --hiu-t-spring: 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
}


/* ============================================================
   GLOBAL RESET & BASE
   ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* No pure black. All text uses on-surface (#0D1C2F). */
body {
  background-color: var(--hiu-background);
  color: var(--hiu-on-surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* No sharp corners anywhere — minimum 0.5rem radius */
img,
video,
iframe {
  border-radius: var(--hiu-radius-sm);
  max-width: 100%;
  display: block;
}

/* Remove all explicit borders from WordPress core blocks */
.wp-block-separator,
hr {
  border: none !important;
  background-color: transparent !important;
  margin-block: var(--wp--preset--spacing--70, 3rem) !important;
}

/* Editorial left-alignment — no centered long text blocks */
.wp-block-paragraph,
.wp-block-list {
  text-align: left;
  max-width: 68ch;
}


/* ============================================================
   TYPOGRAPHY — DISPLAY SCALE
   ============================================================ */
.wp-block-heading,
h1, h2, h3, h4, h5, h6 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--hiu-on-surface);
}

h1 { line-height: 1.0; }
h2 { line-height: 1.1; }

/* Display-LG — hero statements only */
.is-style-display-lg,
.hiu-display-lg {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(3.5rem, 6vw, 5.5rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.0;
  color: var(--hiu-on-surface);
}

/* High-contrast scale pairing: large headline + small body */
.hiu-editorial-pair .hiu-editorial-pair__headline {
  font-size: clamp(3rem, 5vw, 4.5rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin-bottom: var(--wp--preset--spacing--50, 1.5rem);
}
.hiu-editorial-pair .hiu-editorial-pair__body {
  font-size: var(--wp--preset--font-size--lg, 1.25rem);
  font-weight: 400;
  line-height: 1.65;
  color: var(--hiu-on-surface-variant);
  max-width: 52ch;
}


/* ============================================================
   NAVIGATION — GLASSMORPHISM
   "Do use backdrop-blur on navigation bars"
   ============================================================ */
.wp-block-template-part[data-slug="header"],
.site-header,
header.wp-block-group {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--hiu-glass-bg) !important;
  backdrop-filter: blur(var(--hiu-glass-blur));
  -webkit-backdrop-filter: blur(var(--hiu-glass-blur));
  /* Ghost border bottom instead of a 1px line */
  box-shadow: 0 1px 0 0 var(--hiu-ghost-border), var(--hiu-shadow-xs);
  border-bottom: none !important;
}

/* Dark-mode glass nav (when placed over dark hero) */
.hiu-glass-dark {
  background: var(--hiu-glass-bg-dark) !important;
  backdrop-filter: blur(var(--hiu-glass-blur));
  -webkit-backdrop-filter: blur(var(--hiu-glass-blur));
  color: var(--hiu-on-primary) !important;
}
.hiu-glass-dark .wp-block-navigation-item a,
.hiu-glass-dark .wp-block-site-title a {
  color: var(--hiu-on-primary) !important;
}


/* ============================================================
   BUTTONS
   ============================================================ */

/* Primary — pill, gradient, tactile hover */
.wp-block-button__link,
.wp-element-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.01em;
  line-height: 1;
  padding: 0.875rem 2.5rem;
  border-radius: var(--hiu-radius-pill);
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--hiu-t-base), box-shadow var(--hiu-t-base), transform var(--hiu-t-spring);
  /* Signature gradient: primary top → primary-fixed-dim bottom */
  background: linear-gradient(180deg, var(--hiu-primary) 0%, #005560 100%);
  color: var(--hiu-on-primary);
  box-shadow: var(--hiu-shadow-sm), inset 0 1px 0 rgba(255,255,255,0.12);
}

.wp-block-button__link:hover,
.wp-element-button:hover {
  background: linear-gradient(180deg, #005560 0%, var(--hiu-primary-fixed-dim) 100%);
  box-shadow: var(--hiu-shadow-teal);
  transform: translateY(-1px);
}

.wp-block-button__link:focus-visible,
.wp-element-button:focus-visible {
  outline: 2px solid var(--hiu-primary);
  outline-offset: 3px;
  background: linear-gradient(180deg, #005560 0%, var(--hiu-primary-fixed-dim) 100%);
}

/* Secondary / Ghost button */
.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent !important;
  color: var(--hiu-primary) !important;
  border: 1.5px solid var(--hiu-ghost-border) !important;
  box-shadow: none;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: rgba(0, 104, 116, 0.06) !important;
  border-color: rgba(189, 201, 203, 0.30) !important;
  box-shadow: none;
  transform: none;
}

/* Tertiary / Gold CTA button */
.wp-block-button.is-style-tertiary .wp-block-button__link {
  background: linear-gradient(180deg, var(--hiu-secondary) 0%, var(--hiu-tertiary) 100%);
  color: var(--hiu-on-tertiary);
  box-shadow: var(--hiu-shadow-gold);
}
.wp-block-button.is-style-tertiary .wp-block-button__link:hover {
  background: linear-gradient(180deg, var(--hiu-tertiary) 0%, #5C4200 100%);
  box-shadow: var(--hiu-shadow-gold);
}


/* ============================================================
   CARDS & CONTAINERS — SURFACE TIERS, NO DIVIDERS
   ============================================================ */

/* Base card — surface-container-lowest on surface-container-low */
.wp-block-group.is-style-card,
.hiu-card {
  background: var(--hiu-surface-lowest) !important;
  border-radius: var(--hiu-radius-xl);
  border: none !important;
  box-shadow: var(--hiu-shadow-md);
  padding: var(--wp--preset--spacing--80, 4rem);
  /* Use vertical white space, not lines, to separate content */
}

/* High-elevation card (donation, primary action) */
.wp-block-group.is-style-card-elevated,
.hiu-card-elevated {
  background: var(--hiu-surface-lowest) !important;
  border-radius: var(--hiu-radius-xl);
  border: none !important;
  box-shadow: var(--hiu-shadow-xl);
  padding: var(--wp--preset--spacing--90, 6rem);
}

/* Section containers — use tonal background instead of borders */
.wp-block-group.is-style-section-low {
  background: var(--hiu-surface-low) !important;
  border: none !important;
}
.wp-block-group.is-style-section-mid {
  background: var(--hiu-surface) !important;
  border: none !important;
}

/* Absolutely no divider lines between list items */
.wp-block-list li + li {
  border-top: none !important;
  padding-top: 0 !important;
}
.wp-block-list {
  list-style: none;
  padding-left: 0;
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--50, 1.5rem);
}
.wp-block-list li::before {
  content: '—';
  color: var(--hiu-primary);
  margin-right: 0.75rem;
  font-weight: 700;
}


/* ============================================================
   INPUT FIELDS
   "surface-container-highest, 0.5rem radius, focus glow"
   ============================================================ */
.wp-block-search__input,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="search"],
input[type="url"],
input[type="number"],
textarea,
select {
  background: var(--hiu-surface-highest);
  color: var(--hiu-on-surface);
  border: 1px solid var(--hiu-ghost-border);
  border-radius: var(--hiu-radius-sm);
  padding: 0.75rem 1rem;
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  width: 100%;
  transition: border-color var(--hiu-t-base), box-shadow var(--hiu-t-base);
  outline: none;
}

/* Focus: surface-tint glow, not a harsh border change */
.wp-block-search__input:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="url"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
  border-color: transparent;
  box-shadow: 0 0 0 2px rgba(0, 104, 116, 0.18), var(--hiu-shadow-sm);
}

/* Remove autofill yellow */
input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px var(--hiu-surface-highest) inset;
  -webkit-text-fill-color: var(--hiu-on-surface);
}


/* ============================================================
   IMPACT CHIP — "Tertiary jewels"
   For community stats, Jamaican regions, program highlights
   ============================================================ */
.hiu-chip,
.wp-block-button.is-style-chip .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  background: var(--hiu-tertiary-container) !important;
  color: var(--hiu-on-tertiary-container) !important;
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.375rem 0.875rem;
  border-radius: var(--hiu-radius-pill);
  border: none !important;
  box-shadow: none !important;
  transition: background var(--hiu-t-fast), transform var(--hiu-t-spring);
}
.hiu-chip:hover {
  background: color-mix(in srgb, var(--hiu-tertiary-container) 85%, var(--hiu-tertiary) 15%) !important;
  transform: translateY(-1px);
}

/* Primary stat chip variant */
.hiu-chip--primary {
  background: rgba(0, 104, 116, 0.10) !important;
  color: var(--hiu-primary) !important;
}


/* ============================================================
   FLOATING IMAGE LAYER — "Interactive Overlaps"
   "image container (rounded xl) overlaps surface-container block"
   ============================================================ */
.hiu-floating-layer {
  position: relative;
}
.hiu-floating-layer__image {
  position: relative;
  z-index: 2;
  border-radius: var(--hiu-radius-xl);
  box-shadow: var(--hiu-shadow-xl);
  overflow: hidden;
}
/* Overlap pulls image over the section above/below */
.hiu-floating-layer__image--overlap-up {
  margin-top: -4rem;
}
.hiu-floating-layer__image--overlap-down {
  margin-bottom: -4rem;
}

/* Asymmetric layout helper */
.hiu-asymmetric {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: var(--wp--preset--spacing--80, 4rem);
  align-items: center;
}
.hiu-asymmetric--reverse {
  grid-template-columns: 2fr 3fr;
}
@media (max-width: 768px) {
  .hiu-asymmetric,
  .hiu-asymmetric--reverse {
    grid-template-columns: 1fr;
  }
}


/* ============================================================
   GLASSMORPHISM UTILITY CLASSES
   ============================================================ */
.hiu-glass {
  background: var(--hiu-glass-bg) !important;
  backdrop-filter: blur(var(--hiu-glass-blur));
  -webkit-backdrop-filter: blur(var(--hiu-glass-blur));
  border: 1px solid var(--hiu-glass-border);
  box-shadow: var(--hiu-shadow-md);
}

.hiu-glass--heavy {
  backdrop-filter: blur(var(--hiu-glass-blur-heavy));
  -webkit-backdrop-filter: blur(var(--hiu-glass-blur-heavy));
}

.hiu-glass--dark {
  background: var(--hiu-glass-bg-dark) !important;
  color: var(--hiu-on-primary) !important;
}


/* ============================================================
   SECTION SPACING — "Double the padding if crowded"
   Generous whitespace is core to the Radiant system.
   ============================================================ */
.wp-block-group.alignfull,
section.wp-block-group {
  padding-block: var(--wp--preset--spacing--90, 6rem);
}

.wp-block-group.alignfull.is-style-spacious {
  padding-block: var(--wp--preset--spacing--110, 10rem);
}

/* Hero groups get maximum breathing room */
.hiu-hero {
  padding-block: var(--wp--preset--spacing--100, 8rem);
  min-height: 80vh;
  display: flex;
  align-items: center;
}
@media (max-width: 768px) {
  .hiu-hero {
    padding-block: var(--wp--preset--spacing--80, 4rem);
    min-height: unset;
  }
}


/* ============================================================
   FOOTER
   ============================================================ */
.wp-block-template-part[data-slug="footer"],
footer.wp-block-group {
  background: #0D1C2F !important;
  border-top: none !important;
}


/* ============================================================
   BLOCK STYLE VARIATIONS — registered via PHP
   ============================================================ */

/* Tonal quote — no left border, elevated surface */
.wp-block-quote.is-style-tonal {
  background: var(--hiu-surface-low);
  border: none !important;
  border-radius: var(--hiu-radius-lg);
  padding: var(--wp--preset--spacing--70, 3rem);
}
.wp-block-quote.is-style-tonal cite {
  color: var(--hiu-on-surface-variant);
  font-style: normal;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-top: var(--wp--preset--spacing--50, 1.5rem);
  display: block;
}

/* Teal-surface highlight block */
.wp-block-group.is-style-teal-surface {
  background: linear-gradient(180deg, var(--hiu-primary) 0%, #004A55 100%) !important;
  color: var(--hiu-on-primary) !important;
  border-radius: var(--hiu-radius-xl);
  border: none !important;
}
.wp-block-group.is-style-teal-surface * {
  color: var(--hiu-on-primary) !important;
}

/* Dark navy hero section */
.wp-block-group.is-style-dark-hero {
  background: linear-gradient(180deg, #0D1C2F 0%, #122337 100%) !important;
  color: var(--hiu-on-primary) !important;
  border: none !important;
}
.wp-block-group.is-style-dark-hero > .wp-block-group__inner-container > p,
.wp-block-group.is-style-dark-hero > .wp-block-group__inner-container > h1,
.wp-block-group.is-style-dark-hero > .wp-block-group__inner-container > h2,
.wp-block-group.is-style-dark-hero > .wp-block-group__inner-container > h3 {
  color: var(--hiu-on-primary);
}
.wp-block-group.is-style-dark-hero .hiu-chip {
  background: rgba(157, 234, 236, 0.15) !important;
  color: var(--hiu-primary-container) !important;
}


/* ============================================================
   ACCESSIBILITY — Ghost Border fallback
   When a border is semantically required, use outline-variant at 15%.
   Never full-opacity high-contrast borders.
   ============================================================ */
[data-required-border] {
  outline: 1px solid var(--hiu-ghost-border);
  outline-offset: -1px;
}

:focus-visible {
  outline: 2px solid var(--hiu-primary);
  outline-offset: 3px;
  border-radius: var(--hiu-radius-sm);
}


/* ============================================================
   FIXES — Icon badges, placeholder images, ghost buttons
   ============================================================ */

/* Icon badge — 48×48 square, not full-width */
.hiu-icon-badge,
.wp-block-group.hiu-icon-badge {
  width: 3rem !important;
  height: 3rem !important;
  min-height: 3rem !important;
  max-width: 3rem !important;
  flex: 0 0 3rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 0.75rem !important;
  padding: 0 !important;
}
.hiu-icon-badge > * {
  margin: 0 !important;
}

/* Image placeholder — shows tonal surface when src is empty */
.wp-block-image img[src=""],
.wp-block-image img:not([src]),
.wp-block-image img[src="#"] {
  background: linear-gradient(135deg, var(--hiu-surface) 0%, var(--hiu-surface-high) 100%);
  background-image:
    linear-gradient(135deg, rgba(0,104,116,0.08) 0%, rgba(122,89,0,0.06) 100%),
    repeating-linear-gradient(45deg, transparent 0 12px, rgba(0,104,116,0.04) 12px 24px);
  min-height: 240px;
  display: block;
  position: relative;
}
.wp-block-image:has(img[src=""]),
.wp-block-image:has(img:not([src])),
.wp-block-image:has(img[src="#"]) {
  background: linear-gradient(135deg, var(--hiu-surface) 0%, var(--hiu-surface-high) 100%);
  min-height: 240px;
  border-radius: inherit;
  overflow: hidden;
}
.wp-block-image:has(img[src=""])::after,
.wp-block-image:has(img:not([src]))::after {
  content: "Image placeholder";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--hiu-on-surface-variant);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  pointer-events: none;
}

/* Ghost / Outline button — guaranteed visible pill */
.wp-block-button.is-style-outline .wp-block-button__link,
.wp-block-button.is-style-outline > a {
  background: transparent !important;
  color: var(--hiu-primary) !important;
  border: 1.5px solid rgba(0,104,116,0.22) !important;
  box-shadow: none !important;
  padding: 0.875rem 2rem;
  border-radius: 999px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  transition: background var(--hiu-t-base), border-color var(--hiu-t-base);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: rgba(0,104,116,0.06) !important;
  border-color: rgba(0,104,116,0.40) !important;
  transform: none;
}

/* Dark-section outline button */
.is-style-dark-hero .wp-block-button.is-style-outline .wp-block-button__link,
.wp-block-cover .wp-block-button.is-style-outline .wp-block-button__link {
  color: #FFFFFF !important;
  border-color: rgba(255,255,255,0.35) !important;
}
.is-style-dark-hero .wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-cover .wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: rgba(255,255,255,0.08) !important;
  border-color: rgba(255,255,255,0.60) !important;
}

/* Chip when flexed inline */
.hiu-chip {
  width: fit-content;
  max-width: max-content;
}

/* Story cards — force image to render even when empty */
.hiu-story-card .wp-block-image {
  margin: 0;
  overflow: hidden;
}
.hiu-story-card .wp-block-image img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
  border-radius: 0;
}

/* Floating image layer — placeholder version */
.hiu-floating-layer__image {
  min-height: 400px;
  aspect-ratio: 1 / 1;
  width: 100%;
}
.hiu-floating-layer__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

/* Dark hero image column */
.is-style-dark-hero .wp-block-image,
.is-style-dark-hero .wp-block-image img {
  min-height: 520px;
  border-radius: 3rem;
  overflow: hidden;
}

/* Footer list reset — no bullets, no dashes */
.hiu-footer-nav {
  list-style: none !important;
  padding-left: 0 !important;
}
.hiu-footer-nav li::before {
  content: "" !important;
  display: none !important;
}
.hiu-footer-nav li {
  padding: 0 !important;
  margin: 0 !important;
}
.hiu-footer-nav li a {
  color: rgba(255, 255, 255, 0.65) !important;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  transition: color var(--hiu-t-fast);
}
.hiu-footer-nav li a:hover {
  color: var(--hiu-primary-container) !important;
}


/* ============================================================
   SITE HEADER — glassmorphic sticky bar
   ============================================================ */
.hiu-site-header {
  background: var(--hiu-glass-bg);
  -webkit-backdrop-filter: blur(var(--hiu-glass-blur));
  backdrop-filter: blur(var(--hiu-glass-blur));
  border-bottom: 1px solid var(--hiu-ghost-border);
  z-index: 50;
}
.hiu-site-header .wp-block-navigation-item__label {
  color: var(--hiu-on-surface);
  transition: color var(--hiu-t-fast);
}
.hiu-site-header .wp-block-navigation-item:hover .wp-block-navigation-item__label,
.hiu-site-header .wp-block-navigation-item.current-menu-item .wp-block-navigation-item__label {
  color: var(--hiu-primary);
}
.hiu-site-header .wp-block-site-title a,
.hiu-site-header .wp-block-site-title {
  color: var(--hiu-primary);
  text-decoration: none;
  font-size: 1.05rem;
}


/* ============================================================
   SECTION 2 — OUR MISSION
   ============================================================ */
.hiu-mission-section {
  position: relative;
  overflow: visible;
}
.hiu-floating-quote {
  position: absolute;
  top: -2rem;
  right: 2rem;
  max-width: 280px;
  box-shadow: var(--hiu-shadow-lg);
  z-index: 5;
}
.hiu-mission-focus-card {
  min-height: 360px;
  text-align: center;
  position: relative;
  z-index: 1;
}
.hiu-mission-focus-card::before,
.hiu-mission-focus-card::after {
  content: "";
  display: block;
  height: 1px;
  width: 88px;
  margin: 0.5rem auto;
  background: rgba(255, 255, 255, 0.18);
}


/* ============================================================
   SECTION 3 — IMPACT STAT CARDS
   ============================================================ */
.hiu-stat-card {
  transition: transform var(--hiu-t-base), box-shadow var(--hiu-t-base);
  box-shadow: var(--hiu-shadow-sm);
}
.hiu-stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--hiu-shadow-md);
}
.hiu-stat-card--dark {
  color: #FFFFFF;
}
.hiu-stat-card--dark * {
  color: inherit;
}
.hiu-stat-card--gold {
  box-shadow: var(--hiu-shadow-gold);
}


/* ============================================================
   SECTION 4 — INITIATIVE CARDS
   ============================================================ */
.hiu-initiative-card {
  background: #FFFFFF;
  box-shadow: var(--hiu-shadow-sm);
  transition: transform var(--hiu-t-base), box-shadow var(--hiu-t-base);
  overflow: hidden;
}
.hiu-initiative-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--hiu-shadow-md);
}
.hiu-initiative-card > .wp-block-cover {
  border-radius: var(--hiu-radius-lg) var(--hiu-radius-lg) 0 0 !important;
}
.hiu-initiative-card > .wp-block-group {
  padding: var(--wp--preset--spacing--50, 1.5rem) var(--wp--preset--spacing--60, 2rem) var(--wp--preset--spacing--60, 2rem);
}


/* ============================================================
   SECTION 5 — SUCCESS STORY CARD (video-player look)
   ============================================================ */
.hiu-success-card {
  position: relative;
  min-height: 420px;
  overflow: hidden;
  text-align: center;
  background: linear-gradient(180deg, #0D1C2F 0%, #1A2B45 100%) !important;
}
.hiu-success-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(253, 188, 19, 0.12) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(157, 234, 236, 0.08) 0%, transparent 50%);
  pointer-events: none;
}
.hiu-success-card > * {
  position: relative;
  z-index: 1;
}


/* ============================================================
   FOOTER — newsletter form
   ============================================================ */
.hiu-newsletter-form input[type="email"]:focus {
  background: rgba(255, 255, 255, 0.10) !important;
  border-color: rgba(157, 234, 236, 0.45) !important;
}
.hiu-newsletter-form button:hover {
  background: var(--hiu-primary-fixed-dim) !important;
}


/* ============================================================
   RESPONSIVE UTILITIES
   ============================================================ */
@media (max-width: 1024px) {
  .hiu-card,
  .hiu-card-elevated {
    padding: var(--wp--preset--spacing--70, 3rem);
  }
  .hiu-floating-quote {
    top: -1rem;
    right: 1rem;
    max-width: 240px;
  }
}

@media (max-width: 782px) {
  .hiu-floating-quote {
    position: static !important;
    max-width: 100%;
    margin-bottom: var(--wp--preset--spacing--50, 1.5rem);
  }
  .hiu-mission-section .wp-block-columns {
    gap: var(--wp--preset--spacing--60, 2rem) !important;
  }
  .hiu-success-card {
    min-height: 260px;
  }
  .hiu-mission-focus-card {
    min-height: 280px;
  }
}

@media (max-width: 600px) {
  .hiu-card,
  .hiu-card-elevated {
    padding: var(--wp--preset--spacing--60, 2rem);
    border-radius: var(--hiu-radius-lg);
  }
  .wp-block-button__link,
  .wp-element-button {
    width: 100%;
    justify-content: center;
  }
  .hiu-site-header .wp-block-group {
    gap: var(--wp--preset--spacing--30, 0.75rem) !important;
  }
  .hiu-stat-card--dark {
    min-height: 260px !important;
  }
}