/*
Theme Name: Hello Biz Child
Theme URI: https://www.whitefeatherfund.org/
Description: Child theme for White Feather Fund. Design refresh (SSPG): deep-ocean background for contrast, gold Donate accent, carded cause blocks, refined buttons/nav, sticky mobile Donate bar.
Author: SSPG
Template: hello-biz
Version: 1.0.0
*/

/* ============================================================
   White Feather Fund — design refresh (SSPG)
   All page text is already #fff; the core fix is a deep-ocean
   background so it finally has contrast. Homepage-specific rules
   are scoped to .home so interior pages are untouched.
   ============================================================ */
:root{
  --wff-navy:#0e2c47; --wff-navy-deep:#081d30;
  --wff-gold:#e7b24c; --wff-gold-dk:#caa036;
  --wff-ink:#12293f; --wff-line:rgba(255,255,255,.14);
}

/* 0) SITE-WIDE ocean palette — root-cause contrast fix.
   The pale-blue wash across every page comes from two Elementor
   global colours; text is globally white. Flipping the globals to
   navy fixes white-on-pale-blue contrast everywhere at the source. */
.elementor-kit-1956{
  --e-global-color-7b722e1:#0e2c47 !important; /* was #A0C1E3 */
  --e-global-color-4c7b43a:#0a2237 !important; /* was #8DACD0 */
  --e-global-color-35574c9:#123a57 !important; /* was #B4C0D6 */
}
body{ background:var(--wff-navy-deep) !important; }
.elementor-widget-image img{ border-radius:14px; }

/* 1) Ocean background — home hero-to-content gradient */
body.home{ background:var(--wff-navy-deep) !important; }
.home .elementor-element-1136f5b5{
  background-image:linear-gradient(180deg,#12395a 0%,#0e2c47 42%,#0a2237 100%) !important;
}

/* 2) Mission block: readable measure + rhythm */
.home .elementor-element-1136f5b5 .elementor-widget-text-editor{ line-height:1.75; }
.home .elementor-element-1136f5b5 .elementor-widget-text-editor p{
  max-width:820px; margin-left:auto; margin-right:auto;
}
.home .elementor-element-1136f5b5 h2{ letter-spacing:.5px; }

/* 3) Cause imagery: consistent rounded cards with depth */
.home .elementor-element-1136f5b5 img{
  border-radius:16px !important;
  box-shadow:0 24px 55px rgba(0,0,0,.42);
}
/* translucent panel behind each cause text column */
.home .elementor-element-1136f5b5 .e-con.e-child:has(h3):has(.elementor-widget-text-editor){
  background:rgba(255,255,255,.05);
  border:1px solid var(--wff-line);
  border-radius:18px;
  -webkit-backdrop-filter:blur(2px);
  backdrop-filter:blur(2px);
}
/* cause titles: brighter + gold accent rule */
.home .elementor-element-1136f5b5 h3{
  color:#fff !important; position:relative;
  padding-bottom:14px; margin-bottom:10px;
}
.home .elementor-element-1136f5b5 h3::after{
  content:""; position:absolute; left:0; bottom:0;
  width:56px; height:3px; border-radius:3px; background:var(--wff-gold);
}
.home .elementor-element-1136f5b5 li{ color:#eaf1f8 !important; }

/* 4a) Buttons on the ocean background = elegant ghost (home only) */
.home .elementor-button{
  border-radius:999px !important;
  padding:15px 38px !important;
  font-weight:600 !important;
  letter-spacing:1.4px !important;
  transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease !important;
  background:transparent !important;
  color:#fff !important;
  border:2px solid rgba(255,255,255,.75) !important;
}
.home .elementor-button:hover{
  background:#fff !important; color:var(--wff-ink) !important; transform:translateY(-2px);
}

/* 4b) Donate = bold gold. Matched narrowly: real /donate/ links + the
   Elementor popup-donate trigger only. (Avoid a bare [href*="action"]
   which would catch call-to-action / transaction / utm=action etc.) */
a.elementor-button[href*="donate" i],
a.elementor-button[href*="elementor-action" i]{
  border-radius:999px !important;
  padding:15px 38px !important;
  font-weight:600 !important;
  letter-spacing:1.4px !important;
  background:var(--wff-gold) !important;
  color:#1a2434 !important;
  border:2px solid var(--wff-gold) !important;
  box-shadow:0 10px 26px rgba(231,178,76,.35) !important;
  transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease !important;
}
a.elementor-button[href*="donate" i]:hover,
a.elementor-button[href*="elementor-action" i]:hover{
  background:var(--wff-gold-dk) !important; color:#12202f !important; transform:translateY(-2px);
  box-shadow:0 14px 30px rgba(231,178,76,.5) !important;
}
/* keyboard focus visibility for all custom CTAs (WCAG 2.4.7) */
.home .elementor-button:focus-visible,
a.elementor-button[href*="donate" i]:focus-visible,
a.elementor-button[href*="elementor-action" i]:focus-visible,
.elementor-nav-menu a.elementor-item[href*="donate" i]:focus-visible,
.wff-footer a:focus-visible,
.wff-mobile-donate:focus-visible{
  outline:3px solid #0a2237 !important; outline-offset:2px !important;
}
.home .elementor-button:focus-visible{ outline-color:#fff !important; }

/* 5) Header nav.
   Desktop bar (>1250px): compact so all 10 items + the gold Donate pill
   fit on ONE line. Below 1250px the horizontal bar can't fit 10 items, so
   a full-screen overlay menu takes over (Elementor's native breakpoint is
   only ~767, which left a cramped, wrapping menu across the whole tablet
   range — this fixes that). */
#top nav.elementor-nav-menu--main a.elementor-item{
  font-size:15px; padding-left:10px !important; padding-right:10px !important; margin-right:10px !important; letter-spacing:.6px;
}
#top nav.elementor-nav-menu--main li.menu-item:last-child a.elementor-item{ margin-right:0 !important; }
/* no "|" divider crowding the Donate button, and give the pill breathing room */
#top nav.elementor-nav-menu--main li.menu-item:nth-last-child(2)::after{ display:none !important; }
#top nav.elementor-nav-menu--main a.elementor-item[href*="donate" i]{
  background:var(--wff-gold); color:#1a2434 !important;
  border-radius:999px; padding:8px 20px !important; margin-left:20px; font-weight:700;
}
#top nav.elementor-nav-menu--main a.elementor-item[href*="donate" i]:hover{ background:var(--wff-gold-dk); }

/* ≤1250px — full-screen overlay menu (fixed inset:0, so no positioning issues) */
@media (max-width:1250px){
  #top nav.elementor-nav-menu--main{ display:none !important; }
  /* the header centres the nav widget, which strands the toggle mid-bar —
     push it to the right (standard hamburger position) */
  #top .elementor-element-12fb0b10{ margin-left:auto !important; }
  #top .elementor-menu-toggle{ display:inline-flex !important; position:relative !important; z-index:100000 !important; width:48px !important; height:48px !important; align-items:center !important; justify-content:center !important; }
  /* the theme's "open" toggle icon is a custom SVG that spells "MENU" — replace
     it with a clean 3-line hamburger (the X close icon stays Elementor's) */
  #top .elementor-menu-toggle__icon--open svg{ display:none !important; }
  #top .elementor-menu-toggle__icon--open{ display:block !important; position:relative !important; width:28px !important; height:2px !important; background:#fff !important; border-radius:2px; }
  #top .elementor-menu-toggle__icon--open::before{ content:'' !important; position:absolute; left:0; top:-9px; width:28px; height:2px; background:#fff; border-radius:2px; }
  #top .elementor-menu-toggle__icon--open::after{ content:'' !important; position:absolute; left:0; top:9px; width:28px; height:2px; background:#fff; border-radius:2px; }
  /* when the menu is OPEN, hide the hamburger so only Elementor's X shows */
  #top .elementor-menu-toggle.elementor-active .elementor-menu-toggle__icon--open{ display:none !important; }
  #top .elementor-menu-toggle:focus:not(:focus-visible){ outline:none !important; }
  #top .elementor-menu-toggle:focus-visible{ outline:2px solid var(--wff-gold) !important; outline-offset:6px !important; border-radius:0 !important; }
  /* The dropdown is ALWAYS a full-screen fixed overlay (never reverts to the
     native top-right panel), and just fades in/out via the toggle's active
     state. This kills the "dark panel collapsing in the corner" on close. */
  #top nav.elementor-nav-menu--dropdown{
    display:flex !important; position:fixed !important; inset:0 !important;
    width:100vw !important; height:100vh !important; height:100dvh !important;
    max-width:none !important; max-height:none !important; margin:0 !important; z-index:99990 !important;
    background:rgba(7,24,42,.985) !important; -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
    align-items:center !important; justify-content:center !important; border:0 !important; box-shadow:none !important; overflow:auto !important;
    /* kill Elementor's scaleY() collapse animation — fade opacity instead */
    transform:none !important;
    opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity .3s ease, visibility 0s linear .3s !important;
  }
  #top .elementor-menu-toggle.elementor-active + nav.elementor-nav-menu--dropdown{
    opacity:1 !important; visibility:visible !important; pointer-events:auto !important;
    transition:opacity .32s ease, visibility 0s linear 0s !important;
  }
  #top nav.elementor-nav-menu--dropdown ul.elementor-nav-menu{ width:100% !important; max-width:460px !important; padding:0 !important; }
  #top nav.elementor-nav-menu--dropdown a.elementor-item{
    color:#eaf1f8 !important; font-family:'futura-pt',sans-serif !important; font-size:20px !important; letter-spacing:1.6px !important;
    text-transform:uppercase !important; text-align:center !important; padding:16px !important;
    border:0 !important; border-bottom:1px solid rgba(255,255,255,.08) !important; background:transparent !important;
  }
  #top nav.elementor-nav-menu--dropdown a.elementor-item:hover{ color:var(--wff-gold) !important; }
  #top nav.elementor-nav-menu--dropdown a.elementor-item[href*="donate" i]{ color:var(--wff-gold) !important; font-weight:700 !important; }
}

/* 6) Mobile polish + sticky Donate bar */
@media (max-width:600px){
  .home .elementor-element-8ef8fe9 .elementor-heading-title{ font-size:46px !important; line-height:1.1 !important; }
  .home .elementor-element-1136f5b5 .elementor-widget-text-editor p{ padding-left:6px; padding-right:6px; }
}
.wff-mobile-donate{ display:none; }
@media (max-width:767px){
  .wff-mobile-donate{
    display:block;
    position:fixed; left:0; right:0; bottom:0; z-index:9999;
    background:var(--wff-gold); text-align:center;
    padding:14px; padding-bottom:calc(14px + env(safe-area-inset-bottom));
    font-size:15px; line-height:1.2; white-space:nowrap; font-weight:700; letter-spacing:1.5px;
    color:#152232 !important; text-decoration:none;
    box-shadow:0 -6px 20px rgba(0,0,0,.3);
  }
  body{ padding-bottom:calc(54px + env(safe-area-inset-bottom)); }
}

/* ============================================================
   7) SITE-WIDE FOOTER (rendered via wp_footer in functions.php)
   ============================================================ */
.wff-footer{ position:relative; background:#07182a; color:#eaf1f8; font-family:Roboto,sans-serif;
  border-top:3px solid var(--wff-gold); padding:64px 40px 0; overflow:hidden; }
.wff-footer .wff-feather-bg{ position:absolute; right:-40px; top:-30px; font-size:340px; line-height:1;
  color:rgba(255,255,255,.03); pointer-events:none; transform:rotate(18deg); }
.wff-footer .wff-inner{ max-width:1140px; margin:0 auto; display:grid;
  grid-template-columns:1.6fr 1fr 1.2fr 1.2fr; gap:44px; position:relative; z-index:1; }
.wff-footer h4{ font-family:'futura-pt',sans-serif; text-transform:uppercase; letter-spacing:2px;
  font-size:14px; color:var(--wff-gold); margin:0 0 20px; font-weight:700; }
.wff-footer .wff-brandname{ font-family:'linotype-didot-headline',Georgia,serif; font-size:30px;
  line-height:1.05; color:#fff; margin:0 0 16px; }
.wff-footer .wff-tag{ font-size:15px; line-height:1.7; color:rgba(234,241,248,.72); max-width:320px; margin:0 0 20px; }
.wff-footer .wff-loc{ font-size:13.5px; color:rgba(234,241,248,.6); display:flex; align-items:center; gap:8px; }
.wff-footer ul{ list-style:none; padding:0; margin:0; }
.wff-footer li{ margin:0 0 12px; }
.wff-footer a{ color:rgba(234,241,248,.78); text-decoration:none; font-size:15px;
  transition:color .15s ease, padding-left .15s ease; }
.wff-footer li a:hover{ color:var(--wff-gold); padding-left:5px; }
.wff-footer .wff-cause{ display:block; }
.wff-footer .wff-cause small{ display:block; color:rgba(234,241,248,.72); font-size:12.5px; margin-top:2px; }
.wff-footer .wff-contact-row{ display:flex; align-items:center; gap:11px; margin:0 0 14px;
  color:rgba(234,241,248,.82); font-size:14.5px; }
.wff-footer .wff-contact-row svg{ flex:0 0 auto; width:18px; height:18px; fill:var(--wff-gold); }
.wff-footer .wff-contact-row a{ font-size:14.5px; }
.wff-footer .wff-socials{ display:flex; gap:12px; margin:20px 0 22px; }
.wff-footer .wff-socials a{ width:40px; height:40px; border:1px solid rgba(255,255,255,.22); border-radius:50%;
  display:flex; align-items:center; justify-content:center; transition:all .18s ease; }
.wff-footer .wff-socials a svg{ width:18px; height:18px; fill:#eaf1f8; transition:fill .18s ease; }
.wff-footer .wff-socials a:hover{ background:var(--wff-gold); border-color:var(--wff-gold); transform:translateY(-3px); }
.wff-footer .wff-socials a:hover svg{ fill:#12202f; }
.wff-footer .wff-donate{ display:inline-block; background:var(--wff-gold); color:#152232 !important;
  font-family:'futura-pt',sans-serif; font-weight:700; letter-spacing:1.4px; padding:13px 34px; border-radius:999px;
  box-shadow:0 10px 26px rgba(231,178,76,.32); transition:transform .18s ease, background .18s ease; }
.wff-footer .wff-donate:hover{ background:var(--wff-gold-dk); transform:translateY(-2px); color:#12202f !important; }
.wff-footer .wff-bottom{ max-width:1140px; margin:56px auto 0; border-top:1px solid rgba(255,255,255,.1);
  padding:22px 0 26px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
  font-size:13px; color:rgba(234,241,248,.7); position:relative; z-index:1; }
.wff-footer .wff-bottom a{ font-size:13px; color:rgba(234,241,248,.72); }
.wff-footer .wff-bottom a:hover{ color:var(--wff-gold); }
@media (max-width:900px){ .wff-footer .wff-inner{ grid-template-columns:1fr 1fr; gap:34px; } }
@media (max-width:560px){
  .wff-footer{ padding:48px 22px 0; }
  .wff-footer .wff-inner{ grid-template-columns:1fr; gap:30px; }
  .wff-footer .wff-bottom{ flex-direction:column; text-align:left; }
}
@media (max-width:767px){
  /* keep the sticky Donate bar clear of the footer's bottom bar */
  .wff-footer .wff-bottom{ padding-bottom:70px; }
}

/* ============================================================
   8) ARTICLES page (page-id 2437) — content used deep-blue #053881
   titles and pure-black excerpts, near-invisible on the navy, plus
   mixed blue/gold Read More buttons. Brighten everything for navy
   readability and unify buttons; the hero heading (48b999ee) sits on
   a bright sky photo so its original ink is restored.
   ============================================================ */
.elementor-page-2437 .elementor-heading-title{ color:#ffffff !important; }
.elementor-page-2437 .elementor-widget-text p,
.elementor-page-2437 .elementor-widget-text-editor p{ color:#d7e3f1 !important; }
.elementor-page-2437 a.elementor-button{
  background:var(--wff-gold) !important; color:#1a2434 !important;
  border:2px solid var(--wff-gold) !important; border-radius:999px !important;
  box-shadow:0 8px 20px rgba(231,178,76,.28) !important;
  transition:transform .18s ease, background .18s ease !important;
}
.elementor-page-2437 a.elementor-button:hover{
  background:var(--wff-gold-dk) !important; transform:translateY(-2px);
}
/* keep the hero heading/intro readable on its light sky image */
.elementor-page-2437 .elementor-element-48b999ee .elementor-heading-title{ color:#053881 !important; }
.elementor-page-2437 .elementor-element-48b999ee .elementor-widget-text p{ color:inherit !important; }

/* ============================================================
   9) SAFETY NET — GiveWP donation forms render on their own light
   panels; the site's global text colour is white, which would make
   form labels invisible. Force dark ink inside any Give form so a
   donation form dropped on any page stays readable.
   ============================================================ */
.give-form label,
.give-form legend,
.give-form .give-total-label,
.give-form .give-donation-level-btn,
.give-form .give-currency-symbol,
.give-form .give-form-title{ color:#20303f !important; }

/* ============================================================
   10) CUSTOM HOMEPAGE ("editorial ocean") — rendered by the child
   theme's front-page.php (bypasses Elementor on the homepage for a
   slicker layout + lighter page). All rules are namespaced to
   #wff-home / .wh-* so nothing leaks elsewhere.
   ============================================================ */
#wff-home{ --navy:#0e2c47; --deep:#081d30; --gold:#e7b24c; --gold-dk:#caa036; --mist:#dfe8f2;
  font-family:'Roboto',sans-serif; color:#eaf1f8; background:var(--deep); position:relative; z-index:1; }
#wff-home *{ box-sizing:border-box; }
.wh-skip{ position:absolute; left:-9999px; top:0; z-index:100000; background:var(--wff-gold,#e7b24c); color:#12202f;
  font-family:'futura-pt',sans-serif; font-weight:700; letter-spacing:.05em; padding:12px 20px; border-radius:0 0 8px 0; text-decoration:none; }
.wh-skip:focus{ left:0; }
#wff-home .wh-eyebrow{ font-family:'futura-pt',sans-serif; text-transform:uppercase; letter-spacing:.32em;
  font-size:13px; font-weight:600; color:var(--gold); display:inline-block; }
#wff-home .wh-display{ font-family:'linotype-didot-headline',Georgia,serif; font-weight:400; line-height:1.02; letter-spacing:.5px; }
#wff-home a{ text-decoration:none; }

/* HERO */
#wff-home .wh-hero{ position:relative; min-height:560px; display:flex; flex-direction:column; justify-content:center; align-items:stretch; overflow:hidden; padding:clamp(120px,15vh,168px) 40px clamp(56px,8vh,88px); }
#wff-home .wh-hero-media{ position:absolute; inset:0; pointer-events:none; background-position:center 35%; background-size:cover; background-repeat:no-repeat; transform:scale(1.06); animation:wh-kb 18s ease-out forwards; }
@keyframes wh-kb{ to{ transform:scale(1); } }
#wff-home .wh-hero-scrim{ position:absolute; inset:0; pointer-events:none; background:
  linear-gradient(to top right, rgba(8,29,48,.85) 0%, rgba(8,29,48,.5) 34%, rgba(8,29,48,0) 64%),
  linear-gradient(180deg, transparent 52%, rgba(8,29,48,.68) 84%, var(--deep) 100%); }
#wff-home .wh-hero-inner{ position:relative; width:100%; max-width:1140px; margin:0 auto; padding:0 0 88px; }
#wff-home .wh-hero-rule{ width:64px; height:2px; background:var(--gold); margin-bottom:26px; transform:scaleX(0); transform-origin:left; animation:wh-rule 1s .5s cubic-bezier(.2,.7,.2,1) forwards; }
@keyframes wh-rule{ to{ transform:scaleX(1); } }
#wff-home .wh-hero h1{ margin:0; color:#fff; font-size:clamp(48px,7.6vw,116px); line-height:.95; letter-spacing:1px; text-shadow:0 8px 40px rgba(0,0,0,.45); }
#wff-home .wh-hero h1 span{ display:block; }
#wff-home .wh-hero-tag{ margin:26px 0 34px; max-width:540px; font-size:clamp(17px,1.5vw,21px); line-height:1.6; color:#eef4fb; text-shadow:0 2px 16px rgba(0,0,0,.5); }
#wff-home .wh-cta{ display:flex; gap:16px; flex-wrap:wrap; }
#wff-home .wh-btn{ font-family:'futura-pt',sans-serif; text-transform:uppercase; letter-spacing:.16em; font-weight:600; font-size:14px;
  padding:16px 40px; border-radius:999px; display:inline-flex; align-items:center; gap:10px; transition:transform .25s cubic-bezier(.2,.7,.2,1), background .25s, box-shadow .25s, color .25s; }
#wff-home .wh-btn-gold{ background:var(--gold); color:#12202f; box-shadow:0 14px 34px rgba(231,178,76,.34); }
#wff-home .wh-btn-gold:hover{ background:#fff; transform:translateY(-3px); box-shadow:0 18px 40px rgba(0,0,0,.3); }
#wff-home .wh-btn-ghost{ background:rgba(255,255,255,.08); color:#fff; border:1.5px solid rgba(255,255,255,.6); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }
#wff-home .wh-btn-ghost:hover{ background:#fff; color:var(--navy); transform:translateY(-3px); border-color:#fff; }
#wff-home .wh-btn:focus-visible{ outline:3px solid #fff; outline-offset:3px; }
#wff-home .wh-fade{ opacity:0; transform:translateY(22px); animation:wh-fade 1s .35s cubic-bezier(.2,.7,.2,1) forwards; }
#wff-home .wh-fade.d2{ animation-delay:.55s; } #wff-home .wh-fade.d3{ animation-delay:.75s; }
@keyframes wh-fade{ to{ opacity:1; transform:none; } }

/* MISSION */
#wff-home .wh-mission{ padding:clamp(80px,11vw,150px) 40px; background:var(--deep); }
#wff-home .wh-mission-inner{ max-width:1140px; margin:0 auto; display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(40px,7vw,110px); align-items:start; }
#wff-home .wh-mission-h{ margin:18px 0 0; color:#fff; font-size:clamp(34px,4.4vw,64px); }
#wff-home .wh-mission-h em{ font-style:italic; color:var(--gold); }
#wff-home .wh-mission-right{ padding-top:14px; }
#wff-home .wh-mission-right p{ font-size:17px; line-height:1.85; color:var(--mist); margin:0 0 26px; }
#wff-home .wh-arrowlink{ font-family:'futura-pt',sans-serif; text-transform:uppercase; letter-spacing:.16em; font-weight:600; font-size:14px; color:#fff; display:inline-flex; align-items:center; gap:12px; }
#wff-home .wh-arrowlink .wh-ar{ width:34px; height:1.5px; background:var(--gold); transition:width .3s; }
#wff-home .wh-arrowlink:hover .wh-ar{ width:52px; }
#wff-home .wh-arrowlink:focus-visible{ outline:3px solid var(--gold); outline-offset:4px; }

/* CAUSES */
#wff-home .wh-causes{ padding:0 40px clamp(70px,9vw,120px); background:linear-gradient(180deg,var(--deep),var(--navy)); }
#wff-home .wh-causes-head{ max-width:1140px; margin:0 auto clamp(36px,5vw,60px); }
#wff-home .wh-causes-head h2{ margin:14px 0 0; color:#fff; font-size:clamp(30px,4vw,54px); }
#wff-home .wh-cards{ max-width:1140px; margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
#wff-home .wh-card{ position:relative; border-radius:20px; overflow:hidden; background:#0c243b; border:1px solid rgba(255,255,255,.08);
  display:flex; flex-direction:column; transition:transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s, border-color .4s; }
#wff-home .wh-card:hover{ transform:translateY(-8px); box-shadow:0 30px 60px rgba(0,0,0,.45); border-color:rgba(231,178,76,.5); }
#wff-home .wh-card:focus-visible{ outline:3px solid var(--gold); outline-offset:3px; }
#wff-home .wh-card-media{ position:relative; aspect-ratio:4/3.2; overflow:hidden; }
#wff-home .wh-card-media::after{ content:''; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg,transparent 40%,rgba(12,36,59,.85)); }
#wff-home .wh-card-img{ position:absolute; inset:0; background-size:cover; background-position:center; transition:transform .8s cubic-bezier(.2,.7,.2,1); }
#wff-home .wh-card:hover .wh-card-img{ transform:scale(1.09); }
#wff-home .wh-card-num{ position:absolute; top:16px; left:18px; z-index:2; font-family:'linotype-didot-headline',serif; font-size:40px; color:rgba(255,255,255,.92); text-shadow:0 4px 20px rgba(0,0,0,.5); }
#wff-home .wh-card-tag{ position:absolute; z-index:2; top:22px; right:18px; font-family:'futura-pt',sans-serif; text-transform:uppercase; letter-spacing:.18em; font-size:11px; font-weight:600; color:#12202f; background:var(--gold); padding:6px 12px; border-radius:999px; }
#wff-home .wh-card-body{ padding:24px 24px 28px; display:flex; flex-direction:column; flex:1; }
#wff-home .wh-card-body h3{ font-family:'linotype-didot-headline',Georgia,serif; font-weight:400; color:#fff; font-size:25px; line-height:1.12; margin:0 0 14px; }
#wff-home .wh-card ul{ list-style:none; margin:0 0 22px; padding:0; }
#wff-home .wh-card li{ position:relative; padding-left:22px; font-size:14.5px; line-height:1.5; color:var(--mist); margin-bottom:10px; }
#wff-home .wh-card li::before{ content:''; position:absolute; left:0; top:8px; width:8px; height:8px; border-radius:50%; background:var(--gold); }
#wff-home .wh-more{ margin-top:auto; font-family:'futura-pt',sans-serif; text-transform:uppercase; letter-spacing:.14em; font-weight:600; font-size:13px; color:var(--gold); display:inline-flex; align-items:center; gap:10px; }
#wff-home .wh-more .wh-ar{ width:26px; height:1.5px; background:var(--gold); transition:width .3s; }
#wff-home .wh-card:hover .wh-more .wh-ar{ width:42px; }

/* CTA band */
#wff-home .wh-cta-band{ position:relative; padding:clamp(80px,11vw,140px) 40px; text-align:center; overflow:hidden; background:var(--navy); }
#wff-home .wh-cta-band .wh-cta-bg{ position:absolute; inset:0; pointer-events:none; background-size:cover; background-position:center; opacity:.22; }
#wff-home .wh-cta-band::after{ content:''; position:absolute; inset:0; pointer-events:none; background:radial-gradient(60% 100% at 50% 100%, rgba(231,178,76,.14), transparent 70%); }
#wff-home .wh-cta-inner{ position:relative; z-index:2; max-width:760px; margin:0 auto; }
#wff-home .wh-cta-inner h2{ margin:16px 0 18px; color:#fff; font-size:clamp(38px,6vw,80px); line-height:1; }
#wff-home .wh-cta-inner p{ font-size:18px; line-height:1.7; color:var(--mist); margin:0 auto 34px; max-width:560px; }

/* scroll reveal — hidden ONLY when JS has flagged support (html.wh-anim),
   so content is always visible if JS fails or is disabled */
.wh-anim #wff-home .wh-reveal{ opacity:0; transform:translateY(30px); transition:opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); }
.wh-anim #wff-home .wh-reveal.is-in{ opacity:1; transform:none; }
#wff-home .wh-reveal.s2{ transition-delay:.12s; } #wff-home .wh-reveal.s3{ transition-delay:.24s; }

@media (max-width:900px){
  #wff-home .wh-mission-inner{ grid-template-columns:1fr; gap:30px; }
  #wff-home .wh-cards{ grid-template-columns:1fr; max-width:460px; }
  /* on portrait/tablet the tall 92vh hero left a big empty gap above the
     wordmark; size the hero to its content instead so it fills naturally */
  #wff-home .wh-hero{ min-height:auto; padding-top:clamp(96px,15vh,132px); padding-bottom:52px; }
}
@media (max-width:600px){
  #wff-home .wh-hero{ padding-left:22px; padding-right:22px; }
  #wff-home .wh-hero-inner{ padding-bottom:64px; }
  #wff-home .wh-mission, #wff-home .wh-causes, #wff-home .wh-cta-band{ padding-left:22px; padding-right:22px; }
}
/* very short windows: keep the hero content clear of the header */
@media (max-height:640px){
  #wff-home .wh-hero{ padding-top:104px; }
  #wff-home .wh-hero h1{ font-size:clamp(40px,6.4vw,84px); }
  #wff-home .wh-hero-inner{ padding-bottom:56px; }
}
@media (prefers-reduced-motion:reduce){
  #wff-home .wh-hero-media{ animation:none; transform:scale(1); }
  #wff-home .wh-fade{ animation:none; opacity:1; transform:none; }
  #wff-home .wh-hero-rule{ animation:none; transform:none; }
  .wh-anim #wff-home .wh-reveal{ opacity:1; transform:none; transition:none; }
}

/* ============================================================
   11) ABOUT page (page-id 3156) — was a contrast/palette mess:
   team names + several headings were deep-blue/black on navy
   (invisible), and the photo-gallery sections used a light-grey
   background that clashed with the navy and hid white text.
   Unify everything to the ocean palette and make it readable.
   ============================================================ */
.elementor-page-3156 h2, .elementor-page-3156 h3{ color:#ffffff !important; }
/* the big Patron heading as a gold accent */
.elementor-page-3156 .elementor-element-a499779 h2{ color:var(--wff-gold) !important; }
/* hero sits on a light sky photo — keep its wordmark white + quote dark */
.elementor-page-3156 .elementor-element-62ca6683 h1{ color:#fff !important; }
.elementor-page-3156 .elementor-element-62ca6683 h2{ color:#0a2237 !important; }
/* unify the light-grey gallery/timeline sections to ocean navy */
.elementor-page-3156 .elementor-element-c777520,
.elementor-page-3156 .elementor-element-039c0b1,
.elementor-page-3156 .elementor-element-39e5745{ background:#0a2237 !important; }
/* any non-photo text on those sections -> light */
.elementor-page-3156 .elementor-element-c777520 .elementor-widget-text-editor, .elementor-page-3156 .elementor-element-c777520 .elementor-widget-text-editor *,
.elementor-page-3156 .elementor-element-039c0b1 .elementor-widget-text-editor, .elementor-page-3156 .elementor-element-039c0b1 .elementor-widget-text-editor *,
.elementor-page-3156 .elementor-element-39e5745 .elementor-widget-text-editor, .elementor-page-3156 .elementor-element-39e5745 .elementor-widget-text-editor *{ color:#eaf1f8 !important; }
/* softly rounded gallery imagery */
.elementor-page-3156 .elementor-widget-image img{ border-radius:12px; }

/* ============================================================
   12) ABOUT page — EDITORIAL enhancement (match the homepage feel):
   full-bleed hero w/ scrim, editorial founder story (didot heading,
   gold eyebrow + drop-cap), team cards w/ hover, gold patron quote,
   hover-zoom photo-timeline (Elementor CTA tiles). Builds on §11.
   ============================================================ */
.elementor-page-3156{ --gold:#e7b24c; --gold-dk:#caa036; --mist:#dfe8f2; }

/* HERO */
.elementor-page-3156 .elementor-element-62ca6683{ position:relative; min-height:70vh; }
.elementor-page-3156 .elementor-element-62ca6683::after{ content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(8,29,48,.30) 0%, rgba(8,29,48,.35) 45%, rgba(8,29,48,.8) 85%, #081d30 100%); }
.elementor-page-3156 .elementor-element-62ca6683 > *{ position:relative; z-index:1; }
.elementor-page-3156 .elementor-element-62ca6683 h1{ color:#fff !important; font-size:clamp(46px,7vw,104px) !important; line-height:1 !important; text-shadow:0 6px 30px rgba(0,0,0,.4); }
.elementor-page-3156 .elementor-element-62ca6683 h2{ color:#fff !important; font-style:italic !important; font-weight:400 !important; font-size:clamp(17px,1.9vw,24px) !important; opacity:.92; }

/* FOUNDER STORY — editorial */
.elementor-page-3156 .elementor-element-9ce3ebc{ padding-top:clamp(70px,9vw,120px) !important; padding-bottom:clamp(70px,9vw,120px) !important; }
.elementor-page-3156 .elementor-element-9ce3ebc h2{ font-family:'futura-pt',sans-serif !important; text-transform:uppercase !important; letter-spacing:.28em !important; font-size:14px !important; color:var(--gold) !important; }
.elementor-page-3156 .elementor-element-9ce3ebc h1, .elementor-page-3156 .elementor-element-9ce3ebc h3{ font-family:'linotype-didot-headline',Georgia,serif !important; color:#fff !important; font-size:clamp(34px,4.6vw,62px) !important; line-height:1.05 !important; }
.elementor-page-3156 .elementor-element-9ce3ebc .elementor-widget-text-editor{ max-width:760px; margin-left:auto; margin-right:auto; }
.elementor-page-3156 .elementor-element-9ce3ebc .elementor-widget-text-editor p{ color:var(--mist) !important; font-size:16.5px !important; line-height:1.9 !important; }
.elementor-page-3156 .elementor-element-9ce3ebc .elementor-widget-text-editor p:first-of-type::first-letter{ font-family:'linotype-didot-headline',Georgia,serif; font-size:64px; float:left; line-height:.8; padding:6px 12px 0 0; color:var(--gold); }

/* TEAM cards */
.elementor-page-3156 .elementor-element-9d2744c img{ border-radius:50% !important; transition:transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s; box-shadow:0 12px 30px rgba(0,0,0,.35); }
.elementor-page-3156 .elementor-element-9d2744c .elementor-widget-image:hover img{ transform:translateY(-6px) scale(1.03); box-shadow:0 22px 46px rgba(0,0,0,.5); }
.elementor-page-3156 .elementor-element-9d2744c h3{ font-family:'futura-pt',sans-serif !important; text-transform:uppercase !important; letter-spacing:.12em !important; font-size:16px !important; color:#fff !important; margin-top:14px !important; }
.elementor-page-3156 .elementor-element-9d2744c .elementor-widget-text-editor *{ color:var(--gold) !important; font-size:13.5px !important; letter-spacing:.05em; }

/* PATRON premium quote */
.elementor-page-3156 .elementor-element-a499779 h2{ font-family:'linotype-didot-headline',Georgia,serif !important; color:var(--gold) !important; }
.elementor-page-3156 .elementor-element-a499779 .elementor-widget-text-editor p{ font-size:16px !important; line-height:1.85 !important; color:var(--mist) !important; }

/* TIMELINE gallery (Elementor CTA tiles) */
.elementor-page-3156 .elementor-widget-call-to-action .elementor-cta{ border-radius:14px !important; overflow:hidden !important; }
.elementor-page-3156 .elementor-cta__bg{ transition:transform .8s cubic-bezier(.2,.7,.2,1) !important; }
.elementor-page-3156 .elementor-widget-call-to-action:hover .elementor-cta__bg{ transform:scale(1.07) !important; }
.elementor-page-3156 .elementor-cta__bg-overlay{ background:linear-gradient(180deg,transparent 35%,rgba(6,20,35,.85)) !important; opacity:1 !important; }
.elementor-page-3156 .elementor-cta__title{ font-family:'linotype-didot-headline',Georgia,serif !important; font-size:26px !important; color:#fff !important; }
.elementor-page-3156 .elementor-cta__description{ color:var(--gold) !important; font-family:'futura-pt',sans-serif; letter-spacing:.06em; }