/*
Theme Name: Somali Diaspora Support
Theme URI: https://www.sds.so
Author: Somali Diaspora Support
Author URI: https://www.sds.so
Description: Custom theme for Somali Diaspora Support (SDS), partner of SONSA. Deep navy and layered-green palette with Fraunces / Public Sans / IBM Plex Mono typography.
Version: 1.0.3
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sds-theme
*/

/* ===========================================================
   Somali Diaspora Support — theme styles
   Palette: deep navy + layered greens (no brown, per brief)
   =========================================================== */
/* ===========================================================
   Somali Diaspora Support — shared styles
   Palette: deep navy + layered greens (no brown, per brief)
   =========================================================== */
:root{
  /* Tells browsers (esp. Android Chrome / Samsung Internet "force dark")
     that this site's colors are intentional, so they stop auto-recoloring
     links/headings — this is what was turning the white footer text blue
     on some visits. */
  color-scheme: light;
  --navy:#152344;
  --navy-2:#0e1830;
  --navy-soft:#223159;
  --forest:#2E6E45;
  --forest-dark:#1F4D3A;
  --moss:#4C7A4F;
  --sage:#8FB573;
  --mint:#C7DDB5;
  --gold:#C99A3C;
  --bg:#FFFFFF;
  --bg-alt:#FFFFFF;
  --bg-tint:#FFFFFF;
  --paper:#FFFFFF;
  --ink:#1B2233;
  --ink-soft:#4B5566;
  --line:#D8DECB;
  --radius:14px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth; overflow-x:hidden;}
body{
  margin:0;
  overflow-x:hidden;
  background:var(--bg);
  color:var(--ink);
  font-family:'Public Sans', sans-serif;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{
  font-family:'Fraunces', serif;
  font-weight:700;
  margin:0;
  letter-spacing:-0.01em;
}
.mono{ font-family:'IBM Plex Mono', monospace; }
a{ color:inherit; }
img{ max-width:100%; display:block; }
.wrap{ max-width:1160px; margin:0 auto; padding:0 28px; }
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'IBM Plex Mono', monospace;
  font-size:12px; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--forest-dark);
  background:rgba(46,110,69,0.08);
  padding:6px 12px; border-radius:100px;
  border:1px solid rgba(46,110,69,0.18);
}
.eyebrow::before{ content:"●"; font-size:8px; color:var(--gold); }
.eyebrow.on-dark{ background:rgba(199,221,181,0.15); color:#DCEAD1; border-color:rgba(199,221,181,0.3); }

/* ---------- HEADER / NAV ---------- */
header{
  position:sticky; top:0; z-index:50;
  background:var(--bg);
  border-bottom:1px solid rgba(21,35,68,0.1);
}

/* ---------- HEADER OVER HERO VIDEO ----------
   On pages that open with a full-bleed video (home, about, services,
   contact, our story), the header floats transparently on top of the
   video instead of sitting in a solid bar above it — so the video reads
   as extending all the way up behind the nav. Logo, links, icons and the
   button switch to white for visibility over the footage. Once the user
   scrolls past the hero, the header becomes the normal solid white bar. */
body.has-hero-video header{
  position:fixed; top:0; left:0; right:0; width:100%;
  background:transparent; border-bottom:1px solid transparent;
  transition:background .25s ease, border-color .25s ease, box-shadow .25s ease;
}
body.has-hero-video header.scrolled{
  background:var(--bg);
  border-bottom-color:rgba(21,35,68,0.1);
  box-shadow:0 2px 16px rgba(21,35,68,0.06);
}
/* Bright/light-colored hero video frames (pale sky, sand, haze, etc.) can
   wash out the white logo/nav-toggle/links, making them look like they've
   "disappeared". This scrim gives a consistent dark backdrop at the top of
   any hero video regardless of footage color, and the drop-shadows below
   are a second safety net so text/icons stay legible either way. */
body.has-hero-video header:not(.scrolled)::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(9,14,28,0.45) 0%, rgba(9,14,28,0.16) 70%, rgba(9,14,28,0) 100%);
  pointer-events:none;
  z-index:0;
}
body.has-hero-video header:not(.scrolled) .nav{ position:relative; z-index:1; }
body.has-hero-video header:not(.scrolled) .site-logo-color{ display:none; }
body.has-hero-video header:not(.scrolled) .site-logo-white{ display:block; }
body.has-hero-video header.scrolled .site-logo-color{ display:block; }
body.has-hero-video header.scrolled .site-logo-white{ display:none; }

body.has-hero-video header:not(.scrolled) nav.links a{
  color:#fff; opacity:0.92; text-shadow:0 1px 3px rgba(0,0,0,0.5);
}
body.has-hero-video header:not(.scrolled) nav.links a:hover{ opacity:1; }
body.has-hero-video header:not(.scrolled) nav.links a.active{ border-bottom-color:#fff; }
body.has-hero-video header:not(.scrolled) .header-social a{
  color:#fff !important; opacity:0.9; filter:drop-shadow(0 1px 3px rgba(0,0,0,0.5));
}
body.has-hero-video header:not(.scrolled) .nav-toggle span{
  background:#fff; box-shadow:0 1px 3px rgba(0,0,0,0.5);
}
body.has-hero-video header:not(.scrolled) .cta-btn{
  background:#fff !important; color:var(--navy) !important;
}
body.has-hero-video header:not(.scrolled) .cta-btn:hover{
  box-shadow:0 6px 18px rgba(255,255,255,0.35);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 28px;
  max-width:1160px; margin:0 auto;
  position:relative;
}
.brand{ display:flex; align-items:center; gap:12px; text-decoration:none; }
.logo-badge{
  flex:none; display:flex; align-items:center; justify-content:center;
  background:#fff; border-radius:50%; box-shadow:0 0 0 1px rgba(21,35,68,0.08);
}
.brand .logo-badge{ height:44px; width:44px; }
.brand .logo-badge img{ height:36px; width:36px; }
.logo-badge.lg{ height:52px; width:52px; }
.logo-badge.lg img{ height:42px; width:42px; }
.logo-badge img{ border-radius:50%; display:block; object-fit:contain; }
/* Full lockup (mark + wordmark) — used in the site header on a white background,
   so no circular crop/shadow is applied; the image already includes its own
   white background and framing. */
/* Bare logo mark — no badge/frame, just the transparent PNG sized to sit
   snugly in the header, letting its own transparency show through. */
.site-logo{ height:56px; width:auto; display:block; }
.site-logo-white{ display:none; }
.brand-text{ color:var(--navy); line-height:1.15; }
.brand-text strong{ font-family:'Fraunces', serif; font-size:16px; display:block; }
.brand-text span{ font-size:11px; color:var(--forest-dark); letter-spacing:0.06em; }
nav.links{ display:flex; gap:26px; }
nav.links a{
  color:var(--navy); text-decoration:none; font-size:14px; font-weight:600;
  padding:4px 0; border-bottom:2px solid transparent; opacity:0.82;
}
.nav-toggle{
  display:none; flex:none; width:38px; height:38px; margin-left:6px;
  border:0; background:transparent; cursor:pointer;
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
}
.nav-toggle span{
  display:block; width:22px; height:2px; background:var(--navy);
  border-radius:2px; transition:transform .2s ease, opacity .2s ease;
}
.nav-toggle.is-active span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle.is-active span:nth-child(2){ opacity:0; }
.nav-toggle.is-active span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
nav.links a:hover{ opacity:1; }
nav.links a.active{ opacity:1; border-bottom-color:var(--navy); }
.cta-btn{
  background:var(--gold); color:var(--navy-2); font-weight:700;
  padding:10px 18px; border-radius:100px; text-decoration:none;
  font-size:14px; white-space:nowrap; display:inline-block;
  transition:transform 0.15s ease, box-shadow 0.15s ease;
  border:none; cursor:pointer;
}
header .cta-btn{ background:var(--gold) !important; color:var(--navy-2) !important; }
.cta-btn:hover{ transform:translateY(-1px); box-shadow:0 6px 18px rgba(201,154,60,0.35); }
.cta-btn.ghost{ background:transparent; color:var(--navy); border:1px solid rgba(21,35,68,0.3); }
.cta-btn.green{ background:var(--forest); color:#fff; }
.cta-btn.green:hover{ box-shadow:0 6px 18px rgba(46,110,69,0.35); }

/* ---------- PAGE HERO (interior pages) ---------- */
.page-hero{
  background:var(--bg-tint); color:var(--navy); padding:64px 0 54px; position:relative; overflow:hidden;
  border-bottom:1px solid var(--line);
}
.page-hero::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(600px 380px at 85% 0%, rgba(143,181,115,0.22), transparent 60%);
}
.page-hero .wrap{ position:relative; z-index:1; }
.page-hero h1{ font-size:clamp(30px,4vw,44px); color:var(--navy); }
.page-hero p{ color:var(--ink-soft); margin-top:14px; max-width:560px; font-size:15.5px; line-height:1.6; }

/* ---------- PAGE HERO — full-width video variant (Our Story only) ---------- */
.page-hero.page-hero-video{
  background:none; border-bottom:none; padding:0;
  min-height:340px; height:56vh; max-height:520px;
  display:flex; align-items:center; color:#fff;
}
.page-hero.page-hero-video::before{ content:none; }
.page-hero-video .wrap{ position:relative; z-index:2; }
.page-hero-video h1{ color:#fff; font-size:clamp(36px,4.8vw,52px); }
.page-hero-video p{ color:rgba(255,255,255,0.88); font-size:20px; max-width:640px; }
@media (max-width:900px){
  .page-hero.page-hero-video{ height:auto; min-height:0; padding:64px 0 40px; }
}

/* ---------- HERO (home) — full-width video ---------- */
.hero{
  position:relative; overflow:hidden; color:#fff;
  min-height:640px; height:88vh; max-height:820px;
  display:flex; align-items:center; padding:0;
}
.hero-bg-video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center; z-index:0;
}
.hero-overlay{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(90deg, rgba(14,24,48,0.82) 0%, rgba(14,24,48,0.55) 42%, rgba(14,24,48,0.22) 75%, rgba(14,24,48,0.15) 100%),
    linear-gradient(0deg, rgba(14,24,48,0.55) 0%, rgba(14,24,48,0) 45%);
}
.hero-content{ position:relative; z-index:2; max-width:640px; }
.hero h1{ font-size:clamp(38px,5.2vw,62px); line-height:1.08; color:#fff; }
.hero h1 em{ font-style:normal; color:var(--mint); }
.hero p.lead{ font-size:19.5px; line-height:1.6; color:rgba(255,255,255,0.88); max-width:540px; margin-top:18px; }
.hero-actions{ display:flex; gap:14px; margin-top:32px; flex-wrap:wrap; }
.hero .cta-btn.ghost{ color:#fff; border-color:rgba(255,255,255,0.55); }
.hero .cta-btn.ghost:hover{ background:rgba(255,255,255,0.14); transform:translateY(-1px); }
.hero-stats{ display:flex; gap:34px; margin-top:48px; flex-wrap:wrap; }
.hero-stats div strong{ display:block; font-family:'Fraunces',serif; font-size:26px; color:#fff; }
.hero-stats div span{ font-size:12px; color:rgba(255,255,255,0.75); letter-spacing:0.04em; }

/* ---------- SECTION GENERIC ---------- */
section{ position:relative; padding:80px 0; }
.section-head{ max-width:640px; margin-bottom:44px; }
.section-head h2{ font-size:clamp(26px,3vw,36px); margin-top:14px; }
.section-head p{ color:var(--ink-soft); margin-top:12px; font-size:15.5px; line-height:1.6; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }

/* ---------- MISSION STRIP ---------- */
.mission{
  background:var(--bg-tint); color:var(--navy); padding:64px 0;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  border-left:4px solid var(--forest);
}
.mission blockquote{ margin:0; font-family:'Fraunces',serif; font-weight:600; font-size:clamp(20px,2.6vw,30px); line-height:1.4; max-width:820px; color:var(--navy); }
.mission blockquote b{ color:var(--forest-dark); font-weight:700; }
.mission cite{ display:block; margin-top:18px; font-style:normal; font-size:13px; color:var(--ink-soft); letter-spacing:0.04em; }
.sonsa-badge{ display:block; width:84px; height:84px; border-radius:50%; object-fit:cover; margin:14px 0; border:3px solid #fff; box-shadow:0 0 0 1px var(--line); background:#fff; }

/* ---------- SERVICES ---------- */
.services-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px; }
.service-card{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:26px;
  transition:transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.service-card:hover{ transform:translateY(-4px); box-shadow:0 16px 34px rgba(21,35,68,0.10); border-color:var(--sage); }
.service-icon{
  width:46px; height:46px; border-radius:10px; background:rgba(46,110,69,0.09);
  display:flex; align-items:center; justify-content:center; margin-bottom:16px; color:var(--forest-dark);
}
.service-card h3{ font-size:17px; margin-bottom:8px; }
.service-card p{ font-size:14px; color:var(--ink-soft); line-height:1.55; margin:0; }
.service-card.featured{ border-color:var(--gold); background:linear-gradient(180deg,#FCFDFA,#FBF6E9); }
.tag-new{
  display:inline-block; font-family:'IBM Plex Mono',monospace; font-size:10px;
  background:var(--gold); color:var(--navy-2); padding:2px 8px; border-radius:100px; margin-bottom:10px; letter-spacing:0.05em;
}
.services-cta{ text-align:center; margin-top:36px; }

/* ---------- PLACEHOLDER PHOTOS ---------- */
.ph{
  border-radius:var(--radius); position:relative; overflow:hidden;
  display:flex; align-items:flex-end; background:linear-gradient(135deg,var(--mint),var(--sage));
  min-height:200px; border:1px solid var(--line);
}
.ph.c2{ background:linear-gradient(135deg,#DCE9CE,var(--moss)); }
.ph.c3{ background:linear-gradient(135deg,var(--sage),var(--mint)); }
.ph.c4{ background:linear-gradient(135deg,#E8EEE0,var(--sage)); }
.ph.c5{ background:linear-gradient(135deg,var(--mint),var(--forest)); }
.ph.c6{ background:linear-gradient(135deg,var(--sage),#DCE9CE); }
.ph .ph-label{
  position:relative; z-index:1; color:var(--navy); padding:10px 14px; margin:14px; border-radius:100px;
  background:rgba(255,255,255,0.75); font-size:11px; font-family:'IBM Plex Mono',monospace;
  letter-spacing:0.04em; display:flex; align-items:center; gap:8px;
}
.ph::after{ content:""; position:absolute; inset:0; background:repeating-linear-gradient(45deg, rgba(255,255,255,0.10) 0 2px, transparent 2px 14px); }

/* Real photo swapped in via sds_photo() — same slot/shape as the placeholder, no gradient/texture */
.ph.sds-photo{ background:none; object-fit:cover; width:100%; height:100%; display:block; }
.ph.sds-photo::after{ content:none; }

.community-grid{ display:grid; grid-template-columns:1.3fr 1fr 1fr; grid-template-rows:1fr 1fr; gap:16px; height:420px; }
.community-grid .ph:first-child{ grid-row:1/3; }
.community-grid .ph:nth-child(4){ grid-column:2/4; }

.gallery-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.gallery-grid .ph{ aspect-ratio:4/3; min-height:0; }

/* ---------- GALLERY PAGE: minimalist grid, no visible system ---------- */
.gallery-flow{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
}

.gallery-flow figure,
.gallery-flow .wp-block-image{ margin:0; }
.gallery-flow .wp-block-gallery{ display:contents; margin:0; padding:0; }
.gallery-flow .wp-block-gallery .wp-block-image,
.gallery-flow .wp-block-gallery li{ list-style:none; }

/* Every tile is the same shape, image cropped to fill it, no border, no
   shadow — flat and uniform so the photos are the only thing the eye
   registers, not the grid holding them */
.gallery-flow figure,
.gallery-flow .wp-block-image{
  position:relative;
  aspect-ratio:1/1;
  border-radius:10px;
  overflow:hidden;
  background:var(--bg-alt);
  cursor:zoom-in;
}
.gallery-flow img{
  width:100%; height:100%; display:block;
  object-fit:cover; object-position:center;
  transition:transform .35s ease;
}
.gallery-flow figure:hover img,
.gallery-flow .wp-block-image:hover img{ transform:scale(1.04); }
/* Captions are intentionally not shown — keeps the grid a clean photo wall */
.gallery-flow figcaption{ display:none; }

/* Photos past the initial batch stay hidden until the sentinel below
   scrolls into view — keeps a large library from landing on the visitor
   all at once, with no button or loading UI to look at */
.gallery-flow .wp-block-image.sds-gallery-hidden,
.gallery-flow figure.sds-gallery-hidden{ display:none; }
.gallery-sentinel{ height:1px; }

.gallery-empty{ background:var(--bg-alt); border:1px dashed var(--line); border-radius:14px; padding:28px; text-align:center; color:var(--ink-soft); }

@media (max-width:900px){
  .gallery-flow{ grid-template-columns:repeat(2,1fr); gap:18px; }
}
@media (max-width:640px){
  .gallery-flow{ grid-template-columns:repeat(2,1fr); gap:12px; }
}

/* ---------- GALLERY LIGHTBOX (click to enlarge) ---------- */
.sds-lightbox{
  position:fixed; inset:0; z-index:9999;
  background:rgba(9,14,28,.92);
  display:none; align-items:center; justify-content:center;
  padding:40px;
}
.sds-lightbox.is-open{ display:flex; }
.sds-lightbox img{
  max-width:100%; max-height:100%;
  border-radius:10px;
  box-shadow:0 20px 60px rgba(0,0,0,.5);
}
.sds-lightbox .sds-lb-close,
.sds-lightbox .sds-lb-prev,
.sds-lightbox .sds-lb-next{
  position:absolute;
  background:rgba(255,255,255,.12);
  color:#fff;
  border:1px solid rgba(255,255,255,.3);
  border-radius:50%;
  width:44px; height:44px;
  display:flex; align-items:center; justify-content:center;
  font-size:20px; line-height:1;
  cursor:pointer;
  transition:background .2s ease;
}
.sds-lightbox .sds-lb-close:hover,
.sds-lightbox .sds-lb-prev:hover,
.sds-lightbox .sds-lb-next:hover{ background:rgba(255,255,255,.28); }
.sds-lightbox .sds-lb-close{ top:22px; right:22px; }
.sds-lightbox .sds-lb-prev{ left:22px; top:50%; transform:translateY(-50%); }
.sds-lightbox .sds-lb-next{ right:22px; top:50%; transform:translateY(-50%); }
@media (max-width:640px){
  .sds-lightbox{ padding:16px; }
  .sds-lightbox .sds-lb-prev,
  .sds-lightbox .sds-lb-next{ width:38px; height:38px; font-size:16px; }
}

/* ---------- MEMBERSHIP / CTA BLOCK ---------- */
#membership .wrap{ max-width:1800px; }
.membership{
  background:#fff; color:var(--navy); border-radius:24px; padding:56px;
  border:1px solid var(--line); box-shadow:0 20px 50px rgba(21,35,68,0.05);
  display:grid; grid-template-columns:0.8fr 1.2fr; gap:50px;
}
.membership-left{ display:flex; flex-direction:column; }
.membership-left h2{ color:var(--navy); font-size:34px; }
.membership-left p{ color:var(--ink-soft); margin-top:16px; line-height:1.65; font-size:16.5px; max-width:440px; }
.qr-step{
  display:flex; align-items:center; gap:22px; margin-top:28px;
  padding:22px; background:#fff; border:2px solid var(--forest);
  border-radius:14px;
}
.qr-step-img{
  width:150px; height:150px; flex:none; display:block;
  border-radius:10px; border:1px solid var(--line);
}
.qr-step-label{
  display:block; font-weight:800; color:var(--forest-dark); font-size:15px;
  text-transform:uppercase; letter-spacing:0.03em; margin-bottom:8px;
}
.qr-step-text p{ font-size:16.5px; line-height:1.55; color:var(--ink-soft); margin:0; }
.qr-step-link{
  display:inline-block; margin-top:12px; font-size:15px; font-weight:700;
  color:var(--forest-dark); text-decoration:underline;
}
.qr-step-link--btn{
  background:none; border:none; padding:0; font-family:inherit; cursor:pointer;
}
.fee-box{ margin-top:32px; display:flex; align-items:baseline; gap:10px; }
.fee-box .amount{ font-family:'Fraunces',serif; font-size:56px; color:var(--forest-dark); font-weight:800; }
.fee-box .period{ font-family:'IBM Plex Mono',monospace; font-size:14.5px; color:var(--ink-soft); }
.steps{ margin-top:30px; display:flex; flex-direction:column; gap:22px; }
.steps div{ display:flex; gap:16px; align-items:flex-start; font-size:19px; font-weight:600; color:var(--navy); }
.steps .step-text{ line-height:1.5; padding-top:4px; }
.steps .num{
  flex:none; width:34px; height:34px; border-radius:50%; background:var(--forest); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:15px; font-family:'IBM Plex Mono',monospace;
  margin-top:1px;
}
.membership-bank-list{ display:grid; grid-template-columns:1fr 1fr; gap:16px; align-content:start; }
.bank-card{ background:var(--bg-tint); border:1px solid var(--line); border-radius:12px; overflow:hidden; margin-bottom:0; }
.bank-head{ padding:14px 18px; font-weight:700; font-size:16px; display:flex; align-items:center; gap:12px; color:#fff; }
.bank-head.salaam{ background:#0576BA; }
.bank-head.premier{ background:var(--navy-soft); }
.bank-head.dahabshil{ background:var(--forest-dark); }
.bank-head.ibs{ background:var(--gold); color:var(--navy-2); }
.bank-logo{ width:26px; height:26px; border-radius:50%; object-fit:cover; flex-shrink:0; background:#fff; }
.bank-body{ padding:18px 20px; }
.bank-body .label{ font-size:12px; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-soft); }
.bank-body .label.spaced{ margin-top:16px; }
.bank-body .val{ font-family:'IBM Plex Mono',monospace; font-size:16px; color:var(--navy); margin-top:3px; }
.bank-body .acct{ display:inline-block; margin-top:3px; font-family:'IBM Plex Mono',monospace; background:#fff; border:1px solid var(--line); padding:10px 14px; border-radius:8px; font-size:17px; letter-spacing:0.03em; color:var(--navy); }
.donate-note{ grid-column:1 / -1; font-size:12.5px; color:var(--ink-soft); margin-top:6px; line-height:1.5; }
.swift-note{ font-size:12px; color:var(--ink-soft); margin-top:14px; line-height:1.5; border-top:1px dashed var(--line); padding-top:12px; }
.wire-routing{ margin-top:14px; border-top:1px dashed var(--line); padding-top:12px; }
.wire-routing .swift-note{ border-top:none; margin-top:0; padding-top:0; margin-bottom:10px; }
.wire-routing .val{ font-size:13px; line-height:1.5; }
.wire-routing .label.spaced{ margin-top:12px; }

/* ---------- PARTNER STRIP ---------- */
.partner{ background:var(--bg-alt); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:40px 0; }
.partner .wrap{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; text-align:center; max-width:560px; margin-left:auto; margin-right:auto; }
.partner p{ margin:0; font-size:14.5px; color:var(--ink-soft); }
.partner strong{ color:var(--ink); }
.partner-logo-badge{
  width:76px; height:76px; border-radius:50%; background:#fff; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 0 1px rgba(21,35,68,0.08);
}
.partner-logo{ width:56px; height:56px; object-fit:contain; display:block; }

/* ---------- SOCIAL WIDGETS (home) ---------- */
.social-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.social-grid.single-feed{ grid-template-columns:1fr; }
.social-card{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:22px; min-width:0; }
.social-card h3{ font-size:15px; display:flex; align-items:center; gap:8px; margin-bottom:14px; }
.social-embed{
  border-radius:10px; overflow:hidden; background:var(--bg-alt); min-height:340px;
  display:flex; align-items:center; justify-content:center; border:1px dashed var(--line);
  max-width:100%;
}
.social-embed > *{ max-width:100%; }
.social-note{ font-size:12px; color:var(--ink-soft); margin-top:10px; line-height:1.5; }
.social-embed-linkout{
  min-height:0; border:none; background:transparent; padding:60px 0; flex-direction:column; gap:14px;
}
.social-card > div:not(.social-embed):not(.social-embed-linkout){ margin-bottom:4px; } /* room for a plugin-rendered feed */
.social-embed.x-embed-list{
  display:block; min-height:0; max-height:340px; overflow-y:auto; border:1px solid var(--line);
  background:var(--paper); padding:6px 10px;
}

/* ---------- BLOG: archive grid + cards ---------- */
.blog-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:24px; }
.blog-card{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; display:flex; flex-direction:column;
  transition:transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.blog-card:hover{ transform:translateY(-4px); box-shadow:0 16px 34px rgba(21,35,68,0.10); border-color:var(--sage); }
.blog-card-thumb{ aspect-ratio:16/9; background:var(--bg-tint); overflow:hidden; }
.blog-card-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.blog-card-thumb-fallback{ object-fit:contain !important; padding:30px; opacity:0.5; }
.blog-card-body{ padding:22px; display:flex; flex-direction:column; gap:8px; flex:1; }
.blog-meta{
  font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:0.06em;
  text-transform:uppercase; color:var(--ink-soft);
}
.blog-card-body h3{ font-size:18px; line-height:1.3; }
.blog-card-body h3 a{ text-decoration:none; color:var(--navy); }
.blog-card-body h3 a:hover{ color:var(--forest-dark); }
.blog-card-body p{ font-size:14px; color:var(--ink-soft); line-height:1.55; margin:0; flex:1; }
.blog-card-link{
  font-size:13.5px; font-weight:700; color:var(--forest-dark); text-decoration:none; margin-top:4px;
}
.blog-card-link:hover{ text-decoration:underline; }

/* ---------- BLOG: pagination ---------- */
.sds-pagination{ margin-top:44px; display:flex; justify-content:center; }
.sds-pagination ul{ list-style:none; display:flex; gap:8px; margin:0; padding:0; flex-wrap:wrap; }
.sds-pagination .page-numbers{
  display:flex; align-items:center; justify-content:center;
  min-width:38px; height:38px; padding:0 12px; border-radius:100px;
  border:1px solid var(--line); background:var(--paper); color:var(--navy);
  text-decoration:none; font-size:14px; font-weight:600; transition:border-color .15s ease, background .15s ease;
}
.sds-pagination .page-numbers:hover{ border-color:var(--sage); }
.sds-pagination .page-numbers.current{ background:var(--navy); border-color:var(--navy); color:#fff; }
.sds-pagination .page-numbers.dots{ border:none; background:none; }

/* ---------- BLOG: single article ---------- */
.single-post-thumb{
  border-radius:var(--radius); overflow:hidden; margin-bottom:36px; border:1px solid var(--line);
}
.single-post-thumb img{ width:100%; height:auto; display:block; }
.single-post-footer{ margin-top:48px; padding-top:28px; border-top:1px solid var(--line); }
.article-content{ font-size:16.5px; line-height:1.75; color:var(--ink); }
.article-content h2{ font-size:26px; margin-top:40px; margin-bottom:14px; }
.article-content h3{ font-size:20px; margin-top:32px; margin-bottom:12px; }
.article-content p{ margin:0 0 20px; }
.article-content a{ color:var(--forest-dark); text-decoration:underline; text-decoration-color:rgba(46,110,69,0.35); }
.article-content a:hover{ text-decoration-color:var(--forest-dark); }
.article-content ul, .article-content ol{ margin:0 0 20px; padding-left:22px; }
.article-content li{ margin-bottom:8px; }
.article-content img{ border-radius:var(--radius); margin:28px 0; }
.article-content blockquote{
  margin:28px 0; padding:4px 0 4px 20px; border-left:3px solid var(--forest);
  font-family:'Fraunces', serif; font-style:italic; color:var(--navy); font-size:19px;
}
.article-content figcaption{ font-size:13px; color:var(--ink-soft); margin-top:-16px; margin-bottom:24px; }

/* ---------- ABOUT PAGE ---------- */
.values-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:18px; }
.value-card{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:24px; }
.value-card .num{ font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--sage); }
.value-card h3{ font-size:16px; margin:8px 0; }
.value-card p{ font-size:14px; color:var(--ink-soft); line-height:1.55; margin:0; }
.timeline{ display:flex; flex-direction:column; gap:0; border-left:2px solid var(--line); padding-left:26px; }
.timeline .t-item{ position:relative; padding-bottom:32px; }
.timeline .t-item:last-child{ padding-bottom:0; }
.timeline .t-item::before{ content:""; position:absolute; left:-31px; top:2px; width:10px; height:10px; border-radius:50%; background:var(--forest); border:2px solid var(--paper); box-shadow:0 0 0 2px var(--forest); }
.timeline .t-item .t-label{ font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--sage); }
.timeline .t-item h4{ font-family:'Fraunces',serif; font-size:17px; margin:4px 0 6px; }
.timeline .t-item p{ font-size:14px; color:var(--ink-soft); margin:0; max-width:520px; }

/* ---------- CONTACT PAGE ---------- */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:50px; }
.contact-grid.wrap{ max-width:1800px; }
.contact-info-card{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:26px; margin-bottom:16px; display:flex; gap:16px; }
.contact-info-card .ic{ flex:none; width:40px; height:40px; border-radius:10px; background:rgba(46,110,69,0.09); display:flex; align-items:center; justify-content:center; color:var(--forest-dark); }
.contact-info-card h4{ font-family:'Public Sans',sans-serif; font-weight:700; font-size:14px; margin:0 0 4px; }
.contact-info-card p{ margin:0; font-size:14px; color:var(--ink-soft); }
.contact-info-card a{ color:var(--forest-dark) !important; text-decoration:none; font-weight:600; }

.form-card{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:30px; }
.form-row{ margin-bottom:18px; }
.form-row label{ display:block; font-size:13px; font-weight:600; margin-bottom:6px; color:var(--ink); }
.form-row input, .form-row textarea, .form-row select{
  width:100%; padding:11px 13px; border-radius:8px; border:1px solid var(--line); background:var(--bg);
  font-family:'Public Sans',sans-serif; font-size:14px; color:var(--ink);
}
.form-row textarea{ resize:vertical; min-height:110px; }
.form-row input:focus, .form-row textarea:focus, .form-row select:focus{ outline:2px solid var(--sage); outline-offset:1px; }
.map-embed{ margin-top:24px; }
.map-embed iframe{ width:100%; border-radius:var(--radius); }
.map-link{
  display:inline-block; margin-top:10px; font-size:12.5px; font-weight:600;
  color:var(--forest-dark); text-decoration:none;
}
.map-link:hover{ text-decoration:underline; }

/* ---------- FOOTER ---------- */
footer{ background:var(--navy-2); color:#fff; padding:56px 0 28px; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:34px; }
.footer-brand{ display:flex; gap:12px; align-items:center; margin-bottom:14px; text-decoration:none; }
.logo-badge.sm{ height:40px; width:40px; overflow:hidden; box-shadow:none; }
.logo-badge.sm img{ height:100%; width:100%; object-fit:cover; }
.footer-brand strong{ color:#fff; font-family:'Fraunces',serif; font-size:16px; }
footer h4{ color:#fff; font-size:12px; letter-spacing:0.08em; text-transform:uppercase; margin:0 0 14px; font-family:'Public Sans',sans-serif; }
footer ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:9px; font-size:14px; }
footer a{ text-decoration:none; color:#fff; }
footer a:hover{ color:var(--mint); }
.header-right{ display:flex; align-items:center; gap:18px; }
.header-social{ display:flex; gap:14px; align-items:center; }
header .header-social a{
  width:18px; height:18px;
  display:flex; align-items:center; justify-content:center;
  color:var(--ink-soft) !important; opacity:0.85; transition:opacity .15s ease, color .15s ease;
}
.header-social a:hover{ opacity:1; color:var(--forest); }
.header-social a svg{ display:block; width:100%; height:100%; }
@media (max-width:900px){
  .header-social{ display:none; }
}
.footer-social{ display:flex; gap:14px; margin-top:14px; }
.footer-social a{
  width:22px; height:22px;
  display:flex; align-items:center; justify-content:center;
  color:#fff; opacity:0.85; transition:opacity .15s ease;
}
.footer-social a:hover{ opacity:1; }
.footer-social a svg{ display:block; width:100%; height:100%; }
.footer-bottom{
  margin-top:44px; padding-top:22px; border-top:1px solid rgba(255,255,255,0.08);
  display:flex; justify-content:space-between; font-size:12.5px; color:#6E7A93; flex-wrap:wrap; gap:10px;
}

@media (max-width:1024px){
  .social-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:900px){
  .hero{ height:auto; min-height:0; padding:88px 0 56px; }
  .hero-content{ max-width:100%; }
  .hero-overlay{
    background:
      linear-gradient(180deg, rgba(14,24,48,0.5) 0%, rgba(14,24,48,0.6) 55%, rgba(14,24,48,0.88) 100%);
  }
  .hero-actions .cta-btn.ghost{ display:none; }
  .membership{ grid-template-columns:1fr; padding:36px 22px; border-radius:16px; }
  .qr-step{ flex-direction:column; text-align:center; margin-top:24px; }
  .qr-step-img{ width:180px; height:180px; }
  .community-grid{ grid-template-columns:1fr 1fr; grid-template-rows:auto; height:auto; }
  .community-grid .ph:first-child{ grid-row:auto; grid-column:1/3; height:200px; }
  .community-grid .ph:nth-child(4){ grid-column:1/3; height:160px; }
  .gallery-grid{ grid-template-columns:1fr 1fr; }
  .gallery-flow{ column-count:2; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .social-grid{ grid-template-columns:1fr; }
  .contact-grid{ grid-template-columns:1fr; }
  .values-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:680px){
  .nav-toggle{ display:flex; }
  nav.links{
    display:none; position:absolute; top:100%; left:0; right:0;
    flex-direction:column; gap:0; background:var(--bg);
    border-bottom:1px solid rgba(21,35,68,0.1);
    box-shadow:0 12px 24px -12px rgba(21,35,68,0.18);
  }
  nav.links.nav-open{ display:flex; }
  nav.links a{
    padding:14px 24px; border-bottom:1px solid rgba(21,35,68,0.06);
    width:100%; box-sizing:border-box;
  }
  /* The open mobile menu always has a white dropdown background (see
     nav.links above), so its links must always be navy — even on
     hero-video pages where the collapsed header's links are white.
     Without this, the open menu shows white text on a white background. */
  body.has-hero-video header:not(.scrolled) nav.links.nav-open a{
    color:var(--navy); opacity:0.82;
  }
  body.has-hero-video header:not(.scrolled) nav.links.nav-open a:hover{ opacity:1; }
  body.has-hero-video header:not(.scrolled) nav.links.nav-open a.active{
    border-bottom-color:var(--navy);
  }
  .nav .cta-btn{ display:none; }
  body.nav-locked{ overflow:hidden; }
  .hero-actions .cta-btn.ghost{ display:none; }
  .gallery-grid{ grid-template-columns:1fr; }
  .gallery-flow{ column-count:1; }
  .values-grid{ grid-template-columns:1fr; }
}
/* ---------- COMMUNITY PHOTOS: hover ---------- */
.ph{ transition:box-shadow 0.25s ease, transform 0.25s ease; }
.ph.sds-photo{ transition:transform 0.4s ease; }
.community-grid .ph{ overflow:hidden; }
.community-grid .ph:hover{ box-shadow:0 16px 34px rgba(21,35,68,0.14); }
.community-grid .ph.sds-photo:hover{ transform:scale(1.045); }
.community-grid .ph:not(.sds-photo):hover{ transform:translateY(-3px); }

/* ---------- SOCIAL CARDS: hover ---------- */
.social-card{ transition:transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; }
.social-card:hover{ transform:translateY(-3px); box-shadow:0 16px 34px rgba(21,35,68,0.08); border-color:var(--sage); }

/* ---------- MEMBERSHIP PANEL: hover ---------- */
.membership{ transition:box-shadow 0.25s ease; }
.membership:hover{ box-shadow:0 26px 60px rgba(21,35,68,0.09); }
.qr-step{ transition:border-color 0.2s ease, box-shadow 0.2s ease; }
.qr-step:hover{ box-shadow:0 10px 26px rgba(31,77,58,0.12); }

/* ---------- SCROLL-REVEAL TRANSITIONS ---------- */
/* Only hides content if the reveal script actually runs (html.js) —
   if JS fails to load, everything stays visible by default. */
html.js .reveal{
  opacity:0; transform:translateY(28px);
  transition:opacity 0.7s cubic-bezier(.2,.7,.3,1), transform 0.7s cubic-bezier(.2,.7,.3,1);
  transition-delay:var(--reveal-delay, 0s);
}
html.js .reveal.is-visible{ opacity:1; transform:translateY(0); }
html.js .hero-content{ opacity:0; transform:translateY(18px); animation:sds-hero-in 0.8s cubic-bezier(.2,.7,.3,1) 0.15s forwards; }
@keyframes sds-hero-in{ to{ opacity:1; transform:translateY(0); } }

@media (prefers-reduced-motion: reduce){
  .service-card, .cta-btn{ transition:none; }
  .ph, .ph.sds-photo, .social-card, .membership, .qr-step{ transition:none; }
  html.js .reveal{ opacity:1; transform:none; transition:none; }
  html.js .hero-content{ animation:none; opacity:1; transform:none; }
}

/* WordPress nav menu active-state mapping */
nav.links a.current-menu-item,
nav.links a.current_page_item{
  color:#fff; border-bottom-color:var(--sage);
}
.screen-reader-text{
  position:absolute !important; clip:rect(1px,1px,1px,1px); width:1px; height:1px;
  overflow:hidden; word-wrap:normal !important;
}