/* 4Kids Africa — visual/UX overrides (additive theme layer, does not modify the compiled bundle)
   Change 1: lighter/airier theme  |  Change 2: Mission + Pillars readability  |  Change 3: full-width Facebook feed */

/* ---------------------------------------------------------------------------
   CHANGE 1 — Brighten the whole thing (client: "everything feels too dark")
   Strategy: soften the brand forest green everywhere, drop the two big dark
   CONTENT blocks (impact stats + mission) to a light "cream/sand" so the page
   reads bright and airy while keeping brand colours as accents.
--------------------------------------------------------------------------- */

/* Softer, airier forest green for the remaining dark brand blocks
   (hero, marquee, volunteer, footer). Cream text keeps WCAG AA on this tone. */
#root .bg-forest{ background-color:#2b6047 !important; }
#root .border-forest{ border-color:#2b6047 !important; }

/* Hero photo overlay: lighter so the imagery breathes (was ~60% dark) */
#root .absolute.inset-0.backdrop-blur-sm{ background-color:rgba(31,66,49,0.42) !important; }

/* --- Flip the IMPACT stats band (the "59,721+ …" block) to light --- */
#root [data-testid="impact-section"]{
  background-color:#f4f1ea !important;
  border-top:1px solid rgba(31,74,55,0.10);
  border-bottom:1px solid rgba(31,74,55,0.10);
}
#root [data-testid="impact-section"] [class*="text-cream"]{ color:#20493699 ; color:#1f4a37 !important; }
#root [data-testid="impact-section"] [class*="border-cream"]{ border-color:rgba(31,74,55,0.15) !important; }
/* keep the big terracotta numbers as the accent (unchanged) */

/* ---------------------------------------------------------------------------
   CHANGE 2 — Readability of "Our Mission" and "Our Pillars"
--------------------------------------------------------------------------- */

/* --- OUR MISSION card: flip to light + stronger hierarchy & breathing room --- */
#root .bg-forest.rounded-sm.relative.overflow-hidden{
  background-color:#f6f3ec !important;
  box-shadow:inset 5px 0 0 0 #c76541;      /* terracotta accent rail */
  padding-top:3.75rem !important;
  padding-bottom:3.75rem !important;
}
#root .bg-forest.rounded-sm.relative.overflow-hidden [class*="text-cream"]{ color:#1f4a37 !important; }
/* the giant decorative quote mark stays a faint watermark, not solid */
#root .bg-forest.rounded-sm.relative.overflow-hidden [aria-hidden="true"][class*="text-cream"]{
  color:rgba(31,74,55,0.07) !important;
}
/* more air between the "Our mission" eyebrow row and the statement */
#root .bg-forest.rounded-sm.relative.overflow-hidden > .flex.items-center{ margin-bottom:2rem !important; }
/* mission statement: comfortable line-height for easy scanning */
#root .bg-forest.rounded-sm.relative.overflow-hidden > p[class*="font-heading"]{
  line-height:1.55 !important;
}

/* --- OUR PILLARS: clearer heading gap, roomier tiles, looser body text --- */
/* bigger gap between the section heading and the tile grid + between tiles */
#root #pillars [class*="lg:grid-cols-5"]{
  margin-top:5rem !important;
  column-gap:2rem !important;
  row-gap:3rem !important;
}
/* pillar tile titles: larger, clearer, more space above/below */
#root #pillars h3[class*="leading-tight"]{
  font-size:1.4rem !important;
  line-height:1.25 !important;
  margin-top:1.75rem !important;
  margin-bottom:0.65rem !important;
}
/* pillar tile body copy: bigger + more line-height so it isn't cramped */
#root #pillars p[class*="text-sm"]{
  font-size:0.95rem !important;
  line-height:1.85 !important;
  color:rgba(26,59,42,0.82) !important;
}

/* ---------------------------------------------------------------------------
   CHANGE 3 — Facebook feed: fill the full width of the media section
   (Option A) The native FB Page Plugin is hard-capped at 500px wide, so we
   scale the embed up (transform: scale) to fill its container. The JS file
   computes the exact factor from the live container width; this CSS just
   removes the centering/side-padding that created the big empty gutters.
--------------------------------------------------------------------------- */
#root [data-testid="facebook-feed"] .flex.justify-center{
  justify-content:flex-start !important;
  padding:0 !important;
}
#root [data-testid="facebook-feed"] iframe{
  max-width:none !important;
  display:block;
}

/* ===========================================================================
   RESPONSIVE (RWD) FIXES — whole site
   =========================================================================== */

/* 1) Never allow sideways scrolling / content bleeding off-screen */
html, body { max-width:100%; overflow-x:hidden; }
#root { overflow-x:hidden; }
/* Only normalise images that DON'T carry an explicit height utility (h-20, h-28,
   h-full, h-[115%] …). A blanket `height:auto` here outranks Tailwind's height
   utilities and blows up the logo on desktop — so we scope it out. */
#root img:not([class*="h-"]):not([class*="object-"]),
#root svg:not([class*="h-"]),
#root video { max-width:100%; }
/* Explicit safety for the brand logos at every width */
#root [data-testid="logo-link"] :is(img,svg){ width:auto !important; }
@media (min-width:1024px){
  #root [data-testid="logo-link"] :is(img,svg){ height:5.75rem !important; }
  #root footer img[class*="h-28"]{ height:7rem !important; width:auto !important; }
}

/* 2) Sticky header — keep a SOLID, opaque background once scrolled.
   backdrop-blur + 85% translucency silently fails on many mobile browsers,
   which is why the menu "loses" its background and text overlaps content. */
#root [data-testid="site-header"][class*="bg-cream"]{
  background-color:#faf8f5 !important;          /* solid cream */
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
  box-shadow:0 4px 24px rgba(26,59,42,0.10);
}
/* header top row: single line, sane gaps, children may shrink (no overflow) */
#root [data-testid="site-header"] > div[class*="max-w-"]{
  flex-wrap:nowrap !important;
  gap:0.6rem;
  min-width:0;
}
#root [data-testid="site-header"] > div[class*="max-w-"] > *{ min-width:0; }

/* 3) Oversized logo (h-20 = 80px) breaks the mobile header — scale it down */
@media (max-width:1023px){
  #root [data-testid="logo-link"] :is(img,svg){ height:3.25rem !important; width:auto !important; }
}
@media (max-width:480px){
  #root [data-testid="logo-link"] :is(img,svg){ height:2.6rem !important; }
  #root [data-testid="header-donate-btn"]{
    padding-left:0.95rem !important; padding-right:0.95rem !important;
    font-size:12px !important; white-space:nowrap;
  }
  #root [data-testid="mobile-menu-btn"]{ flex:0 0 auto; }
}

/* 4) Mobile slide-in menu — fully opaque + scrollable */
#root [data-testid="mobile-menu"]{
  background-color:#1a3b2a !important;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}

/* 5) Phone rhythm: dial back very large spacing + prevent long words overflowing */
#root h1, #root h2, #root h3 { overflow-wrap:anywhere; }
@media (max-width:640px){
  #root #pillars [class*="lg:grid-cols-5"]{
    margin-top:2.5rem !important;
    row-gap:2.25rem !important;
    column-gap:1.25rem !important;
  }
  #root [data-testid="impact-section"] [class*="text-4xl"],
  #root [data-testid="impact-section"] [class*="text-5xl"]{
    font-size:2rem !important; line-height:1.05 !important;
  }
}

/* 6) Facebook feed can never exceed the viewport width */
#root [data-testid="facebook-feed"]{ overflow:hidden; }

/* ===========================================================================
   PHOTOS gallery — clickable (opens lightbox) + stronger hover zoom on desktop
   =========================================================================== */
#root [data-testid="gallery-section"] img{ cursor:zoom-in; }
@media (hover:hover) and (min-width:1024px){
  #root [data-testid="gallery-section"] .group:hover img{ transform:scale(1.09) !important; }
}

/* ===========================================================================
   MOTION + TYPOGRAPHY refinements
   =========================================================================== */

/* The top pillar marquee references `animation:marquee` but the compiled CSS
   never defined the @keyframes, so the band sat static. Define it and let it
   scroll SLOWLY (content is duplicated once, so -50% loops seamlessly). */
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
#root .marquee-track{
  animation: marquee 60s linear infinite !important;
  will-change: transform;
}
#root .marquee-mask:hover .marquee-track{ animation-play-state: paused; }
@media (prefers-reduced-motion: reduce){
  #root .marquee-track{ animation: none !important; }
}

/* Make the main body copy slightly heavier + easier to read (was font-light 300).
   Bump the light weight to a comfortable regular across the text-heavy areas. */
#root .font-light{ font-weight:400 !important; }
#root p{ font-weight:400; }

/* ===========================================================================
   BRAND COLOUR — interweave the forest green with the logo teal #113a48
   so the dark blocks alternate green / teal as you scroll.
   Cream text stays high-contrast (AA) on the teal.
   =========================================================================== */
/* Marquee band -> teal */
#root .marquee-mask{ background-color:#113a48 !important; }
#root .marquee-mask[class*="border-"]{ border-color:rgba(250,248,245,0.12) !important; }
/* Volunteer sign-up section -> teal */
#root [data-testid="volunteer-section"]{ background-color:#113a48 !important; }
/* Small program stat card (e.g. "60,000+ meals") -> teal accent */
#root .bg-forest.rounded-sm.p-5{ background-color:#113a48 !important; }
/* Footer -> teal (bookends the page with the logo colour) */
#root footer[class*="bg-forest"], #root footer.bg-forest{ background-color:#113a48 !important; }
/* Hero + remaining bg-forest blocks stay the softened green (#2b6047) */

/* ===========================================================================
   HERO heading — the per-line reveal masks use overflow-hidden with a very
   tight line-height (0.92), which clipped letter descenders (e.g. the "g" tail
   in "grow"). Give each masked line room below and pull the next line back up
   so the descenders are safe without loosening the tight stacked look.
   =========================================================================== */
#root [data-testid="hero-section"] h1 span[class*="overflow-hidden"]{
  padding-bottom:0.22em !important;
  margin-bottom:-0.14em !important;
}
/* edit-mode / fallback single-node heading: nudge line-height off the clip point */
#root [data-testid="hero-section"] h1{ padding-bottom:0.12em; }





/* =====================================================================
   v2.7.0 — Simplified homepage + subpages + Ways to Give + form modal
   ===================================================================== */

/* Hide every non-home section by default (no flash before the router runs).
   The router shows the right ones per "page" via inline display:block. */
#root main > [data-testid="programs-section"],
#root main > [data-testid="impact-section"],
#root main > [data-testid="story-section"],
#root main > [data-testid="gallery-section"],
#root main > [data-testid="press-section"],
#root main > [data-testid="board-section"],
#root main > [data-testid="volunteer-section"],
#root main > [data-testid="donate-section"],
#root [data-testid="fk-donate-page"],
#root [data-testid="fk-media-page"],
#root [data-testid="fk-impact-cta"] { display: none; }

/* Board of Directors + old donation section are removed for good */
#root main > [data-testid="board-section"],
#root main > [data-testid="donate-section"] { display: none !important; }

/* gentle fade when a subpage opens */
#root main[data-fk-page] > [style*="display: block"],
#root main[data-fk-page] > [data-testid="fk-donate-page"][style*="display: block"] {
  animation: fkFade .45s ease both;
}
@keyframes fkFade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* keep the header visible/solid on every subpage (not only when scrolled) */
#root:has(main[data-fk-page]:not([data-fk-page="home"])) [data-testid="site-header"] {
  background: #faf8f5 !important;
  box-shadow: 0 1px 0 rgba(26,59,42,.08);
  padding-top: .7rem !important; padding-bottom: .7rem !important;
}

/* =====================================================================
   v2.7.3 — Header on subpages: force the dark/solid state so the menu is
   readable on the cream background (was cream-on-cream = invisible).
   The router adds .fk-sub to the header on every non-home page.
   ===================================================================== */
#root [data-testid="site-header"].fk-sub {
  background: #faf8f5 !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  box-shadow: 0 4px 24px rgba(26,59,42,.10) !important;
  padding-top: .7rem !important; padding-bottom: .7rem !important;
}
#root [data-testid="site-header"].fk-sub nav a,
#root [data-testid="site-header"].fk-sub [data-testid="header-login-btn"] { color: #1a3b2a !important; }
#root [data-testid="site-header"].fk-sub nav a:hover,
#root [data-testid="site-header"].fk-sub [data-testid="header-login-btn"]:hover { opacity: .62; }
#root [data-testid="site-header"].fk-sub [data-testid="lang-switcher"] { border-color: rgba(26,59,42,.32) !important; }
#root [data-testid="site-header"].fk-sub [data-testid="lang-pl"],
#root [data-testid="site-header"].fk-sub [data-testid="lang-en"] { color: #1a3b2a !important; }
#root [data-testid="site-header"].fk-sub [data-testid="lang-en"].bg-terracotta,
#root [data-testid="site-header"].fk-sub [data-testid="lang-pl"].bg-terracotta { color: #fff !important; }
#root [data-testid="site-header"].fk-sub .lucide-menu { color: #1a3b2a !important; }
#root [data-testid="site-header"].fk-sub .fk-social a { color: #1a3b2a !important; }

/* =====================================================================
   v2.7.3 — Donate cards now open Donorbox in the styled popup on click
   (no more six embeds mounting at once → the Donate page no longer hangs).
   Quick-amount chips pre-select a value; the main button lets the donor
   choose any amount.
   ===================================================================== */
.fk-dbox-amts { margin-top: auto; margin-bottom: .9rem; }
.fk-dbox-amts-lbl { display: block; font-family: 'Manrope', sans-serif; font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: rgba(26,59,42,.55); margin-bottom: .5rem; }
.fk-dbox-amts-row { display: flex; gap: .5rem; flex-wrap: wrap; }
.fk-amt-chip { font-family: 'Manrope', sans-serif; font-weight: 700; font-size: .95rem; color: #113a48; background: #f4f1ea; border: 1px solid rgba(26,59,42,.18); border-radius: 999px; padding: .5rem 1.05rem; cursor: pointer; transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease; }
.fk-amt-chip:hover { background: #5a9071; color: #fff; border-color: #5a9071; transform: translateY(-1px); }
.fk-dbox-btn { margin-top: 0 !important; align-self: stretch !important; text-align: center; padding: .8rem 1.2rem !important; font-size: .95rem !important; }
.fk-ov-donate .fk-ov-box { max-width: 560px; padding-top: 2.4rem; }
.fk-ov-price { font-family: 'Manrope', sans-serif; font-weight: 700; color: #113a48; font-size: 1.15rem; margin: .1rem 0 .5rem; }
.fk-ov-chosen { font-family: 'Manrope', sans-serif; font-weight: 700; color: #5a9071; font-size: 1rem; margin: 0 0 .5rem; }
.fk-db-loading { font-family: 'Manrope', sans-serif; color: rgba(26,59,42,.6); font-size: .9rem; padding: 2rem 0; text-align: center; }
.fk-db-iframe { width: 100%; min-width: 250px; height: 685px; max-height: none; border: 0; border-radius: 8px; background: #fff; display: block; transition: opacity .3s ease; }

/* =====================================================================
   v2.7.4 — Cleaner "nolimistudio" hero.
   Desktop: the founder photo sits in a contained right-hand panel so the
   whole group (founder + both girls) is visible with NO cropped heads,
   while the copy breathes on a solid green panel to the left.
   Mobile: full-bleed photo (narrow/tall crop keeps all heads), with a
   readable bottom scrim.
   ===================================================================== */
#root [data-testid="hero-section"] h1 {
  font-size: clamp(2.3rem, 4.4vw, 4.4rem) !important;
  line-height: 1.02 !important;
  max-width: 14ch !important;
}

/* ---- desktop / large tablet: split layout ---- */
@media (min-width: 1024px) {
  #root [data-testid="hero-section"] { min-height: 80vh !important; }
  /* image wrapper -> right panel */
  #root [data-testid="hero-section"] > div.absolute:first-child {
    left: auto !important; right: 0 !important; width: 47% !important; z-index: 11 !important;
  }
  #root [data-testid="hero-section"] > div.absolute:first-child > div { height: 100% !important; }
  #root [data-testid="hero-section"] > div.absolute:first-child img {
    height: 100% !important;
  }
  /* soft fade where the photo meets the green panel */
  #root [data-testid="hero-section"] > div.absolute:first-child::before {
    content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 160px; z-index: 4;
    background: linear-gradient(90deg, rgb(43,96,71) 0%, rgba(43,96,71,0) 100%); pointer-events: none;
  }
  /* drop the full-bleed gradient + left scrim (left panel is solid green) */
  #root [data-testid="hero-section"] [class*="bg-gradient"] { display: none !important; }
  #root [data-testid="hero-section"]::after { display: none !important; }
  /* copy: vertically centred, capped so it never runs under the photo */
  #root [data-testid="hero-section"] > div[class*="justify-end"] {
    min-height: 80vh !important; justify-content: flex-start !important;
    padding-top: 11rem !important; padding-bottom: 4rem !important;
  }
  #root [data-testid="hero-section"] > div[class*="justify-end"] p { max-width: 32ch !important; }
}

/* ---- phone / small tablet: full-bleed, all heads visible ---- */
@media (max-width: 1023px) {
  #root [data-testid="hero-section"] { min-height: 74vh !important; }
  #root [data-testid="hero-section"] > div[class*="justify-end"] { min-height: 74vh !important; }
  #root [data-testid="hero-section"] img[data-fk-hero] { height: 100% !important; }
  #root [data-testid="hero-section"]::after {
    content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
    background: linear-gradient(180deg, rgba(18,42,32,.30) 0%, rgba(18,42,32,.55) 52%, rgba(18,42,32,.86) 100%);
  }
}

/* ---- hero auto-slideshow (crossfade) + minimal dots ---- */
.fk-hero-slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.4s ease; }
.fk-hero-slide.active { opacity: 1; }
.fk-hero-dots { position: absolute; z-index: 6; left: 0; right: 0; bottom: 1.15rem; display: flex; justify-content: center; gap: .5rem; }
.fk-hero-dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.5); cursor: pointer; transition: background .3s ease, transform .3s ease; }
.fk-hero-dot:hover { background: rgba(255,255,255,.8); }
.fk-hero-dot.active { background: #fff; transform: scale(1.35); }

/* ---- declutter the hero for a simpler look ---- */
#root [data-testid="hero-section"] > div[class*="bottom-8"] { display: none !important; }   /* the "Scroll" hint */
#root [data-testid="hero-section"] .fk-hero-social { display: none !important; }             /* duplicate social row (still in header) */

/* ---- homepage: more breathing room between the few remaining sections ---- */
#root main[data-fk-page="home"] > [data-testid="about-section"] { padding-top: 7rem !important; padding-bottom: 7rem !important; }
#root main[data-fk-page="home"] > [data-testid="pillars-section"] { padding-top: 2rem !important; padding-bottom: 8rem !important; }
@media (max-width: 640px) {
  #root main[data-fk-page="home"] > [data-testid="about-section"] { padding-top: 4rem !important; padding-bottom: 4rem !important; }
  #root main[data-fk-page="home"] > [data-testid="pillars-section"] { padding-bottom: 4.5rem !important; }
}

/* ---------------- generic subpage shell ---------------- */
.fk-page { background: #faf8f5; padding: 10.5rem 1.5rem 4.5rem; }
.fk-page-inner { max-width: 1180px; margin: 0 auto; }
.fk-eyebrow {
  font-family: 'Manrope', sans-serif; text-transform: uppercase; letter-spacing: .22em;
  font-size: 12px; font-weight: 600; color: #c76541; margin-bottom: .9rem;
}
.fk-page-title {
  font-family: 'Cormorant Garamond', serif; font-weight: 600; color: #1a3b2a;
  font-size: clamp(2.4rem, 5vw, 3.6rem); line-height: 1.05; margin: 0 0 1rem;
}
.fk-page-lead { font-family: 'Manrope', sans-serif; color: rgba(26,59,42,.78); font-size: 1.05rem; line-height: 1.7; max-width: 720px; margin: 0 0 2.5rem; }

/* ---------------- Ways to Give ---------------- */
.fk-dgroup { margin-top: 3rem; }
.fk-dgroup-title {
  font-family: 'Cormorant Garamond', serif; font-weight: 600; color: #113a48;
  font-size: clamp(1.6rem, 3vw, 2.1rem); margin: 0 0 1.6rem; padding-bottom: .7rem;
  border-bottom: 1px solid rgba(26,59,42,.12);
}
.fk-dgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1.75rem; }
.fk-dbox {
  background: #fff; border: 1px solid rgba(26,59,42,.1); border-radius: 8px;
  padding: 1.6rem 1.5rem; display: flex; flex-direction: column;
  box-shadow: 0 10px 30px rgba(26,59,42,.06); transition: box-shadow .3s ease, transform .3s ease;
}
.fk-dbox:hover { box-shadow: 0 18px 44px rgba(26,59,42,.12); transform: translateY(-3px); }
.fk-dbox-head { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.fk-dbox-title { font-family: 'Cormorant Garamond', serif; font-weight: 600; color: #1a3b2a; font-size: 1.5rem; margin: 0; }
.fk-dbox-badge { background: #c76541; color: #fff; font-family: 'Manrope', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; }
.fk-dbox-price { font-family: 'Manrope', sans-serif; font-weight: 700; color: #113a48; font-size: 1.15rem; margin-top: .35rem; }
.fk-dbox-desc { font-family: 'Manrope', sans-serif; color: rgba(26,59,42,.8); font-size: .95rem; line-height: 1.65; margin: .8rem 0 1.1rem; }
.fk-dbox-iframe { width: 100%; max-width: 100%; min-width: 250px; height: 900px; max-height: none !important; border: 0; margin-top: auto; }

/* corporate contact form */
.fk-contact { display: flex; flex-direction: column; gap: .6rem; margin: 0 0 1.1rem; }
.fk-contact-in { font-family: 'Manrope', sans-serif; font-size: .92rem; padding: .7rem .85rem; border: 1px solid rgba(26,59,42,.2); border-radius: 6px; background: #faf8f5; }
.fk-contact-in:focus { outline: none; border-color: #5a9071; background: #fff; }
.fk-contact-ta { min-height: 84px; resize: vertical; }
.fk-btn-solid { font-family: 'Manrope', sans-serif; font-weight: 600; background: #5a9071; color: #fff; border: 0; border-radius: 6px; padding: .7rem 1.2rem; cursor: pointer; transition: background .25s ease; align-self: flex-start; }
.fk-btn-solid:hover { background: #4a7c60; }

/* impact-page CTA (Sponsor a Child + gallery link) */
.fk-impact-cta { background: #f4f1ea; }
.fk-cta-inner { display: flex; flex-direction: column; align-items: flex-start; }
.fk-cta-btns { display: flex; gap: .9rem; flex-wrap: wrap; margin-top: .3rem; }
.fk-btn-ghost { font-family: 'Manrope', sans-serif; font-weight: 600; background: transparent; color: #1a3b2a; border: 1px solid rgba(26,59,42,.28); border-radius: 6px; padding: .7rem 1.2rem; cursor: pointer; transition: background .25s ease, color .25s ease; }
.fk-btn-ghost:hover { background: #1a3b2a; color: #fff; }

/* ---------------- Media & Press ---------------- */
.fk-mgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1.75rem; }
.fk-mcard { background: #fff; border: 1px solid rgba(26,59,42,.1); border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 10px 30px rgba(26,59,42,.06); transition: box-shadow .3s ease, transform .3s ease; }
.fk-mcard:hover { box-shadow: 0 18px 44px rgba(26,59,42,.12); transform: translateY(-3px); }
.fk-video { position: relative; width: 100%; padding-bottom: 56.25%; background: #0d2a34; }
.fk-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.fk-mcard-reel .fk-reel-if { width: 100%; height: 560px; border: 0; background: #fafafa; display: block; }
.fk-mcard-body { padding: 1.2rem 1.3rem 1.4rem; display: flex; flex-direction: column; gap: .35rem; }
.fk-mcard-title { font-family: 'Cormorant Garamond', serif; font-weight: 600; color: #1a3b2a; font-size: 1.35rem; margin: 0; line-height: 1.2; }
.fk-mcard-sub { font-family: 'Manrope', sans-serif; color: rgba(26,59,42,.72); font-size: .9rem; line-height: 1.5; margin: 0; }
.fk-mlink { font-family: 'Manrope', sans-serif; font-weight: 600; color: #c76541; font-size: .9rem; text-decoration: none; margin-top: .3rem; }
.fk-mlink:hover { text-decoration: underline; }
.fk-mcard-link { justify-content: center; background: #f4f1ea; }

/* main sponsors */
.fk-sponsors { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: center; }
.fk-sponsor { display: inline-flex; align-items: center; justify-content: center; background: #fff; border: 1px solid rgba(26,59,42,.1); border-radius: 10px; padding: 1.1rem 1.4rem; width: 190px; height: 130px; transition: box-shadow .3s ease, transform .3s ease; }
.fk-sponsor:hover { box-shadow: 0 14px 34px rgba(26,59,42,.14); transform: translateY(-3px); }
.fk-sponsor img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }

@media (max-width: 640px) {
  .fk-mgrid { grid-template-columns: 1fr; }
  .fk-sponsor { width: 46%; height: 110px; }
}

/* ---------------- Our Impact: program tabs (1:1 content) ---------------- */
.fk-prog-tabs { display: flex; flex-wrap: wrap; gap: .3rem; margin: 2.4rem 0 2rem; border-bottom: 1px solid rgba(26,59,42,.14); }
.fk-prog-tab { font-family: 'Manrope', sans-serif; font-weight: 600; font-size: .95rem; color: rgba(26,59,42,.6); background: none; border: 0; border-bottom: 2px solid transparent; padding: .7rem 1rem; cursor: pointer; transition: color .2s ease, border-color .2s ease; }
.fk-prog-tab:hover { color: #1a3b2a; }
.fk-prog-tab.active { color: #c76541; border-bottom-color: #c76541; }
.fk-prog-panel { display: none; }
.fk-prog-panel.active { display: block; animation: fkFade .4s ease both; }
.fk-prog-title { font-family: 'Cormorant Garamond', serif; font-weight: 600; color: #1a3b2a; font-size: clamp(1.9rem, 4vw, 2.7rem); line-height: 1.08; margin: .4rem 0 1.6rem; }
.fk-prog-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; margin-bottom: 2rem; }
.fk-prog-gallery.one { grid-template-columns: minmax(0, 620px); }
.fk-prog-gallery img { width: 100%; height: 260px; object-fit: cover; border-radius: 8px; box-shadow: 0 10px 26px rgba(26,59,42,.1); }
.fk-prose { max-width: 820px; }
.fk-prose-h { font-family: 'Cormorant Garamond', serif; font-weight: 600; color: #113a48; font-size: 1.5rem; margin: 1.8rem 0 .6rem; }
.fk-prose-p { font-family: 'Manrope', sans-serif; color: rgba(26,59,42,.82); font-size: 1.02rem; line-height: 1.75; margin: 0 0 1rem; }
.fk-prose-ul { list-style: none; padding: 0; margin: 0 0 1.2rem; }
.fk-prose-ul li { position: relative; font-family: 'Manrope', sans-serif; color: rgba(26,59,42,.82); font-size: 1.02rem; line-height: 1.65; padding-left: 1.6rem; margin-bottom: .5rem; }
.fk-prose-ul li::before { content: ""; position: absolute; left: 0; top: .55em; width: 8px; height: 8px; border-radius: 50%; background: #c76541; }

/* ---------------- standalone About / Pillars / Volunteer clearance ---------------- */
#root main[data-fk-page="about"] > [data-testid="about-section"],
#root main[data-fk-page="pillars"] > [data-testid="pillars-section"],
#root main[data-fk-page="volunteer"] > [data-testid="volunteer-section"] { padding-top: 10rem; }

/* ---------------- Volunteer extras (handbooks + photos) ---------------- */
.fk-vol-extra { padding-top: 2rem; padding-bottom: 1rem; }
.fk-vol-books { margin-bottom: .5rem; }
.fk-vol-btnrow { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: .6rem; }
.fk-vol-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin-top: 2rem; }
.fk-vol-gallery img { width: 100%; height: 240px; object-fit: cover; border-radius: 8px; box-shadow: 0 10px 26px rgba(26,59,42,.1); }

@media (max-width: 640px) {
  .fk-prog-gallery img, .fk-vol-gallery img { height: 210px; }
}

/* ---------------- overlay / modal (form) ---------------- */
.fk-ov { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: flex-start; justify-content: center; padding: 4vh 4vw; background: rgba(17,58,72,.72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transition: opacity .25s ease; overflow-y: auto; }
.fk-ov.fk-in { opacity: 1; }
.fk-ov-box { position: relative; width: 100%; max-width: 720px; background: #faf8f5; border-radius: 10px; padding: 2rem 1.8rem 1.5rem; box-shadow: 0 30px 80px rgba(0,0,0,.4); transform: translateY(14px); transition: transform .25s ease; }
.fk-ov.fk-in .fk-ov-box { transform: none; }
.fk-ov-close { position: absolute; top: 10px; right: 14px; font-size: 30px; line-height: 1; color: #1a3b2a; background: none; border: 0; cursor: pointer; padding: 4px 8px; }
.fk-ov-title { font-family: 'Cormorant Garamond', serif; font-weight: 600; color: #1a3b2a; font-size: 1.9rem; margin: 0 0 .4rem; padding-right: 30px; }
.fk-ov-sub { font-family: 'Manrope', sans-serif; color: rgba(26,59,42,.72); font-size: .95rem; margin: 0 0 1.1rem; }
.fk-form-iframe { width: 100%; height: 72vh; min-height: 520px; border: 0; border-radius: 8px; background: #fff; }

@media (max-width: 640px) {
  .fk-page { padding: 6.5rem 1.1rem 3rem; }
  .fk-dgrid { grid-template-columns: 1fr; }
  .fk-ov { padding: 0; }
  .fk-ov-box { max-width: 100%; min-height: 100vh; border-radius: 0; }
  .fk-form-iframe { height: 78vh; }
}


/* =====================================================================
   v2.7.6 — Impact: Before/After comparison sliders (Infrastructure) +
   sanitation gallery, and a cleaner Volunteer gallery with lightbox.
   ===================================================================== */
.fk-ba-heading { font-family: 'Cormorant Garamond', serif; font-weight: 600; color: #113a48; font-size: clamp(1.5rem, 3vw, 2rem); margin: 2.2rem 0 .4rem; }
.fk-ba-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 1.6rem; margin: 1.2rem 0 2.4rem; }
.fk-ba { position: relative; width: 100%; aspect-ratio: 3 / 2; border-radius: 12px; overflow: hidden; background: #10231b; box-shadow: 0 16px 44px rgba(26,59,42,.20); cursor: ew-resize; user-select: none; -webkit-user-select: none; touch-action: pan-y; }
.fk-ba-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.fk-ba-before { position: absolute; inset: 0; height: 100%; width: 100%; overflow: hidden; -webkit-clip-path: inset(0 50% 0 0); clip-path: inset(0 50% 0 0); }
.fk-ba-handle { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: #faf8f5; transform: translateX(-50%); z-index: 3; box-shadow: 0 0 0 1px rgba(0,0,0,.12); }
.fk-ba-grip { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 40px; height: 40px; border-radius: 50%; background: #faf8f5; box-shadow: 0 6px 18px rgba(0,0,0,.32); display: flex; align-items: center; justify-content: center; }
.fk-ba-grip::before { content: "\2039\00A0\203A"; font-size: 18px; font-weight: 700; color: #113a48; line-height: 1; }
.fk-ba.drag .fk-ba-grip { transform: translate(-50%, -50%) scale(1.08); }
.fk-ba-tag { position: absolute; top: 12px; z-index: 4; font-family: 'Manrope', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; color: #fff; pointer-events: none; }
.fk-ba-tag-b { left: 12px; background: rgba(16,35,27,.82); }
.fk-ba-tag-a { right: 12px; background: #c76541; }
.fk-ba-cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; padding: 1.1rem 1rem .8rem; font-family: 'Manrope', sans-serif; font-weight: 600; font-size: .95rem; color: #fff; background: linear-gradient(0deg, rgba(0,0,0,.6), rgba(0,0,0,0)); pointer-events: none; }
@media (max-width: 640px) { .fk-ba-grid { grid-template-columns: 1fr; } .fk-ba { aspect-ratio: 4 / 3; } }

/* sanitation gallery (click to enlarge via lightbox) */
.fk-lgal-title { margin-top: 2.4rem !important; }
.fk-lgal { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin: 1rem 0 1rem; }
.fk-lgal img { width: 100%; height: 240px; object-fit: cover; border-radius: 10px; cursor: zoom-in; box-shadow: 0 10px 26px rgba(26,59,42,.12); transition: transform .3s ease, box-shadow .3s ease; }
.fk-lgal img:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 18px 40px rgba(26,59,42,.2); }
@media (max-width: 640px) { .fk-lgal img { height: 200px; } }

/* ---- Volunteer page: single clean gallery (teal bg) with lightbox ---- */
#root [data-testid="volunteer-section"] > div:first-child .grid[class*="grid-cols-3"] { display: none !important; }
.fk-eyebrow-cream { color: #e9b7a2 !important; }
.fk-vol-gtitle { font-family: 'Cormorant Garamond', serif; font-weight: 600; color: #faf8f5; font-size: clamp(1.7rem, 3.4vw, 2.4rem); line-height: 1.1; margin: 0 0 .6rem; }
.fk-vol-gsub { font-family: 'Manrope', sans-serif; color: rgba(250,248,245,.78); font-size: 1rem; line-height: 1.65; max-width: 640px; margin: 0 0 1.8rem; }
.fk-vol-extra { padding-top: 3.5rem !important; padding-bottom: 1rem; }
.fk-vol-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
.fk-vol-gallery img { width: 100%; height: 260px; object-fit: cover; border-radius: 10px; cursor: zoom-in; box-shadow: 0 10px 26px rgba(0,0,0,.22); transition: transform .3s ease, box-shadow .3s ease; }
.fk-vol-gallery img:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 18px 42px rgba(0,0,0,.34); }
@media (max-width: 640px) { .fk-vol-gallery img { height: 220px; } }

/* =====================================================================
   v2.7.7 — Before/After: fixed reveal (clip-path, visibility-safe) +
   zoom-to-enlarge button & modal; main sponsor embedded in the footer.
   ===================================================================== */
.fk-ba-zoom { position: absolute; bottom: 10px; right: 10px; z-index: 5; width: 36px; height: 36px; border-radius: 50%; border: 0; background: rgba(16,35,27,.72); color: #fff; font-size: 17px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .2s ease, transform .2s ease; }
.fk-ba-zoom:hover { background: #c76541; transform: scale(1.08); }
.fk-ov-ba .fk-ov-box { max-width: 900px; }
.fk-ba-modal .fk-ba { aspect-ratio: 3 / 2; margin-top: 1rem; }
@media (max-width: 640px) { .fk-ba-modal .fk-ba { aspect-ratio: 4 / 3; } }

/* footer main sponsor */
.fk-foot-sponsor { margin-top: 3.5rem; padding-top: 2.2rem; border-top: 1px solid rgba(250,248,245,.15); text-align: center; }
.fk-foot-sponsor-label { font-family: 'Manrope', sans-serif; text-transform: uppercase; letter-spacing: .2em; font-size: 11px; font-weight: 600; color: rgba(250,248,245,.6); margin-bottom: 1rem; }
.fk-foot-sponsor-row { display: flex; flex-wrap: wrap; gap: 1.2rem; align-items: center; justify-content: center; }
.fk-foot-sponsor-item { display: inline-flex; align-items: center; justify-content: center; background: #faf8f5; border-radius: 12px; padding: .9rem 1.4rem; height: 76px; min-width: 160px; transition: transform .3s ease, box-shadow .3s ease; }
.fk-foot-sponsor-item:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(0,0,0,.28); }
.fk-foot-sponsor-item img { max-height: 100%; max-width: 210px; width: auto; object-fit: contain; }

/* =====================================================================
   v2.7.8 — mobile tab reliability + cross-browser hardening,
   rounded Volunteer sign-up card.
   ===================================================================== */

/* Program tabs: reliable, comfortable tap targets on touch devices.
   `touch-action: manipulation` removes the 300ms tap delay and prevents
   double-tap zoom stealing the tap on iOS Safari / older Android. */
#root .fk-prog-tab {
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(199,101,65,.18);
  -webkit-user-select: none;
  user-select: none;
}
#root .fk-prog-tabs { -webkit-overflow-scrolling: touch; }
@media (max-width: 640px) {
  #root .fk-prog-tab { padding: .85rem 1.05rem; font-size: 1rem; min-height: 44px; }
  #root .fk-prog-tabs { gap: .15rem; margin: 1.8rem 0 1.6rem; }
}

/* Same tap-delay fix for the other injected controls (cross-browser). */
#root .fk-amt-chip,
#root .fk-dbox-btn,
#root .fk-btn-solid,
#root .fk-btn-ghost,
#root .fk-hero-dot,
#root .fk-prog-tab { touch-action: manipulation; }

/* Volunteer "Sign up to volunteer" card: rounded corners (was sharp). */
#root [data-testid="volunteer-section"] div.bg-cream[class*="rounded-sm"] {
  border-radius: 22px !important;
  overflow: hidden;
}
@media (max-width: 640px) {
  #root [data-testid="volunteer-section"] div.bg-cream[class*="rounded-sm"] { border-radius: 18px !important; }
}

/* Donorbox popup iframe fades in smoothly once loaded (perceived speed). */
#root .fk-db-iframe, .fk-db-iframe { transition: opacity .3s ease; }

/* Gallery thumbnails are clickable to open the full image in the lightbox. */
#root .fk-prog-gallery.fk-lightbox img,
#root .fk-lgal.fk-lightbox img,
#root .fk-vol-gallery.fk-lightbox img { cursor: zoom-in; }

/* =====================================================================
   v2.7.9 — popup scroll-lock, prominent monthly giving, green Sponsor
   card, corporate Donorbox CTA, PSFCU partner logo, bigger DEON logo.
   ===================================================================== */

/* 1) Popup scroll containment: the modal scrolls internally and the gesture
   never chains to the page behind it (works with the JS body scroll-lock). */
.fk-ov { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.fk-ov-box { overscroll-behavior: contain; }
[data-testid="gallery-lightbox"] { overscroll-behavior: contain; }

/* 3) "Give Monthly" section — visually stronger than One-Time Giving. */
.fk-dgroup-monthly {
  background: linear-gradient(180deg, rgba(90,144,113,.10), rgba(90,144,113,0));
  border: 1px solid rgba(90,144,113,.28);
  border-radius: 16px;
  padding: 1.6rem 1.5rem .6rem;
}
.fk-dgroup-monthly .fk-dgroup-title { display: flex; align-items: center; gap: .75rem; border-bottom-color: rgba(90,144,113,.35); }
.fk-dgroup-badge {
  font-family: 'Manrope', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: #fff; background: #c76541; padding: 4px 11px; border-radius: 999px;
}
.fk-dgroup-monthly .fk-dgrid > .fk-dbox {
  border: 2px solid rgba(90,144,113,.55);
  box-shadow: 0 16px 40px rgba(43,96,71,.14);
}
.fk-dgroup-onetime .fk-dgroup-title { color: rgba(26,59,42,.72); }

/* 4) Green "Sponsor a Child's Education" variant (brand green). */
.fk-dbox-green { background: #eef5f0; }
.fk-dgroup .fk-dbox.fk-dbox-green {
  border: 2px solid #2b6047;
  box-shadow: 0 18px 44px rgba(43,96,71,.22);
}
.fk-dbox-green .fk-dbox-title { color: #2b6047; }
.fk-dbox-green .fk-dbox-badge { background: #2b6047; }
.fk-dbox-green .fk-dbox-btn { background: #2b6047; }
.fk-dbox-green .fk-dbox-btn:hover { background: #22503a; }

/* 6) Corporate partnership Donorbox CTA — sits under the inline form. */
.fk-corp-donate { margin-top: .4rem !important; }

/* 10) PSFCU partner logo on the Donate page. */
.fk-donate-partners .fk-sponsor { width: 220px; height: 120px; }
.fk-donate-partners .fk-sponsor img { max-width: 180px; }

/* 11) Footer "Supported by" (Radio Deon) logo ~3x larger + more presence. */
.fk-foot-sponsor-item { height: 210px !important; min-width: 300px; padding: 1.4rem 1.8rem; }
.fk-foot-sponsor-item img { max-width: 320px !important; }
@media (max-width: 640px) {
  .fk-foot-sponsor-item { height: 150px !important; min-width: 72%; }
  .fk-foot-sponsor-item img { max-width: 82% !important; }
}

/* =====================================================================
   v2.8.0 — global popup scroll-lock, footer Radio DEON box (white, -50%),
   "With the support of" moved beside the Ways-to-give heading, clean
   6-photo Volunteer gallery, grouped Media & Press.
   ===================================================================== */

/* 1) GLOBAL scroll-lock: lock BOTH <html> and <body> so the page behind any
   popup can't scroll (fixes "scroll moves the background instead of the
   popup"). Works for every plugin popup + any React dialog (JS adds the
   class via __FKScroll and a MutationObserver safety net). */
html.fk-modal-open, body.fk-modal-open { overflow: hidden !important; overscroll-behavior: none; }
/* Popup content scrolls internally and never chains to the page behind it. */
.fk-ov { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.fk-ov-box { overscroll-behavior: contain; }
[data-testid="gallery-lightbox"] { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }

/* 2) Footer "Supported by" Radio DEON box — white background (so the logo's
   own white areas don't blend into the cream) and ~50% smaller than v2.7.9. */
.fk-foot-sponsor-item { background: #ffffff !important; height: 105px !important; min-width: 150px; padding: .7rem .9rem; }
.fk-foot-sponsor-item img { max-width: 160px !important; }
@media (max-width: 640px) {
  .fk-foot-sponsor-item { height: 78px !important; min-width: 60%; padding: .6rem .8rem; }
  .fk-foot-sponsor-item img { max-width: 64% !important; }
}

/* 3) Ways to give — "With the support of" beside the heading (desktop);
   stacks and centres under the copy on mobile. */
.fk-donate-head { display: flex; gap: 2.5rem; align-items: flex-start; flex-wrap: wrap; margin-bottom: 1rem; }
.fk-donate-head-text { flex: 1 1 420px; min-width: 280px; }
.fk-donate-head-text .fk-eyebrow,
.fk-donate-head-text .fk-page-title,
.fk-donate-head-text .fk-page-lead { margin-top: 0; }
.fk-donate-head .fk-donate-partners { margin-top: .2rem; flex: 0 0 auto; max-width: 340px; }
.fk-donate-head .fk-donate-partners .fk-dgroup-title { margin-top: 0; }
.fk-donate-head .fk-donate-partners .fk-sponsors { justify-content: flex-start; gap: 1rem; }
.fk-donate-head .fk-donate-partners .fk-sponsor { width: 150px; height: 96px; background: #ffffff; }
.fk-donate-head .fk-donate-partners .fk-sponsor img { max-width: 120px; }
@media (max-width: 900px) {
  .fk-donate-head { flex-direction: column; gap: 1.4rem; }
  .fk-donate-head .fk-donate-partners { max-width: 100%; width: 100%; }
  .fk-donate-head .fk-donate-partners .fk-sponsors { justify-content: center; }
}

/* 4) Volunteer gallery — exactly 6 unique photos: one big vertical feature +
   a balanced grid (no duplicates, no padded 7th). */
.fk-vol-gallery.fk-vol-gallery-6 { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 200px; gap: 1rem; }
.fk-vol-gallery.fk-vol-gallery-6 img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; cursor: zoom-in; box-shadow: 0 10px 26px rgba(0,0,0,.22); transition: transform .3s ease, box-shadow .3s ease; }
.fk-vol-gallery.fk-vol-gallery-6 img:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 18px 42px rgba(0,0,0,.34); }
.fk-vol-gallery.fk-vol-gallery-6 img:nth-child(1) { grid-row: 1 / span 2; }   /* big vertical */
.fk-vol-gallery.fk-vol-gallery-6 img:nth-child(6) { grid-column: 1 / -1; }     /* wide bottom */
@media (max-width: 900px) {
  .fk-vol-gallery.fk-vol-gallery-6 { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 180px; }
  .fk-vol-gallery.fk-vol-gallery-6 img:nth-child(1) { grid-column: 1 / -1; grid-row: auto; height: 320px; }
  .fk-vol-gallery.fk-vol-gallery-6 img:nth-child(6) { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .fk-vol-gallery.fk-vol-gallery-6 { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .fk-vol-gallery.fk-vol-gallery-6 img { height: 260px; }
  .fk-vol-gallery.fk-vol-gallery-6 img:nth-child(1) { height: 360px; }
}

/* 5) Media & Press — grouped sub-sections + newest-first link cards. */
.fk-mgroup { margin-top: 2.6rem; }
.fk-mgrid-single { grid-template-columns: 1fr; max-width: 720px; }
.fk-mcard-item { text-decoration: none; color: inherit; }
.fk-mcard-item .fk-mcard-body { padding: 1.25rem 1.35rem 1.4rem; gap: .5rem; }
.fk-mcard-meta { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.fk-mcard-date { font-family: 'Manrope', sans-serif; font-size: .72rem; font-weight: 700; letter-spacing: .06em; color: #2b6047; background: rgba(90,144,113,.14); padding: .16rem .55rem; border-radius: 999px; white-space: nowrap; }
.fk-mcard-item .fk-mlink { color: #2b6047; }
.fk-mcard-item:hover .fk-mcard-title { color: #2b6047; }

/* =====================================================================
   v2.8.2 — mobile/tablet menu robustness + before/after touch + UX polish
   ===================================================================== */
/* Mobile menu: always solid, on top, and internally scrollable (so tall menus
   on phones/tablets in landscape don't get cut off or "fall apart" on re-open).
   The page behind it is locked by JS (fourkids-enhance.js menu manager). */
[data-testid="mobile-menu"] {
  z-index: 1000 !important;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  min-height: 100vh;
}
@supports (min-height: 100dvh) { [data-testid="mobile-menu"] { min-height: 100dvh; } }

/* Before/After sliders: allow vertical page scrolling with a finger; only a
   horizontal drag moves the compare handle (handled in JS). */
.fk-ba { touch-action: pan-y; }

/* UX polish: clear keyboard-focus rings + smooth in-page scrolling. */
html { scroll-behavior: smooth; }
a:focus-visible, button:focus-visible, [role="button"]:focus-visible,
input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid #5a9071;
  outline-offset: 2px;
  border-radius: 4px;
}

/* =====================================================================
   4Kids Africa v2.9.0 — Media & Press video tiles + YouTube lightbox
   (thumbnails + click-to-play; YouTube inline in a modal, Facebook opens
   in a new tab). Content is editable from the WP admin "4Kids Africa".
   ===================================================================== */
.fk-mvideo {
  text-align: left; padding: 0; cursor: pointer; text-decoration: none; color: inherit;
  font: inherit; appearance: none; -webkit-appearance: none; width: 100%;
}
.fk-mvideo .fk-mcard-body { padding: 1.1rem 1.25rem 1.3rem; gap: .5rem; }
.fk-mvideo-thumb {
  position: relative; width: 100%; padding-bottom: 56.25%; overflow: hidden;
  background: #0d2a34;
}
.fk-mvideo-thumb img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform .45s ease;
}
.fk-mvideo:hover .fk-mvideo-thumb img { transform: scale(1.05); }
.fk-mvideo-ph {
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #1a3b2a 0%, #0d2a34 100%);
}
.fk-mvideo-ph-label {
  position: absolute; bottom: 12px; left: 0; right: 0; text-align: center;
  font-family: 'Cormorant Garamond', serif; color: rgba(250,248,245,.92);
  font-size: 1.05rem; letter-spacing: .02em;
}
.fk-play-badge {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 74px; height: 52px; pointer-events: none;
  transition: transform .3s ease;
}
.fk-play-badge svg { width: 100%; height: 100%; display: block; }
.fk-play-badge .fk-play-bg { fill: #113a48; opacity: .82; transition: opacity .3s ease, fill .3s ease; }
.fk-play-badge .fk-play-ar { fill: #faf8f5; }
.fk-mvideo:hover .fk-play-badge { transform: translate(-50%, -50%) scale(1.08); }
.fk-mvideo:hover .fk-play-badge .fk-play-bg { opacity: 1; fill: #c0392b; }
.fk-mvideo:focus-visible { outline: 3px solid #5a9071; outline-offset: 3px; }

/* YouTube lightbox */
.fk-ov-video .fk-ov-box { max-width: 960px; background: #0d1f16; padding: 1.4rem 1.4rem 1.2rem; }
.fk-ov-video .fk-ov-close { color: #faf8f5; }
.fk-ov-video .fk-ov-title { color: #faf8f5; font-size: 1.5rem; margin-bottom: .8rem; }
.fk-video-wrap { width: 100%; }
.fk-ov-video .fk-video { position: relative; width: 100%; padding-bottom: 56.25%; height: 0; background: #000; border-radius: 6px; overflow: hidden; }
.fk-ov-video .fk-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (max-width: 640px) {
  .fk-ov-video .fk-ov-box { padding: 1rem .8rem; }
}

/* =====================================================================
   4Kids Africa v2.9.1 — laptop sizing + header shrink on scroll
   ===================================================================== */
/* Smaller, denser media tiles so the section doesn't dominate on laptops. */
.fk-mgrid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1.25rem; }
.fk-mgroup .fk-mvideo .fk-mcard-body { padding: .85rem 1rem 1rem; }
.fk-mgroup .fk-mcard-title { font-size: 1.15rem; }
@media (min-width: 1024px) {
  .fk-mgrid { grid-template-columns: repeat(auto-fill, minmax(220px, 260px)); justify-content: flex-start; }
}
@media (max-width: 600px) {
  .fk-mgrid { grid-template-columns: 1fr; }
}

/* Header: shrink the logo AND the bar height once the page is scrolled.
   IMPORTANT: use the logo's real `height` (not transform:scale). transform:scale
   only shrinks the pixels but leaves the original layout box in place, so the
   bar never got shorter. Reducing the actual height collapses the logo's box and
   the whole header row slims down proportionally with the logo, at every width. */
[data-testid="site-header"] { transition: padding .3s ease, box-shadow .3s ease; }
#root [data-testid="site-header"] [data-testid="logo-link"] :is(img,svg) {
  transition: height .3s ease;
  transform-origin: left center;
}
[data-testid="site-header"].fk-shrink { padding-top: .2rem !important; padding-bottom: .2rem !important; box-shadow: 0 2px 14px rgba(0,0,0,.10); }
[data-testid="site-header"].fk-shrink > div { padding-top: .35rem !important; padding-bottom: .35rem !important; }

/* Proportional logo height per breakpoint (~70% of its resting size) so the
   header bar shortens together with the logo when scrolled. */
#root [data-testid="site-header"].fk-shrink [data-testid="logo-link"] :is(img,svg) { height: 1.85rem !important; }
@media (min-width:481px) and (max-width:1023px){
  #root [data-testid="site-header"].fk-shrink [data-testid="logo-link"] :is(img,svg) { height: 2.3rem !important; }
}
@media (min-width:1024px){
  #root [data-testid="site-header"].fk-shrink [data-testid="logo-link"] :is(img,svg) { height: 4rem !important; }
}

/* ---------------- Other ways to donate (mailed check + PSFCU) ---------------- */
.fk-oways-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.25rem;
}
.fk-oway {
  display: flex; align-items: flex-start; gap: 1rem;
  background: #fff; border: 1px solid rgba(26,59,42,.1); border-radius: 8px;
  padding: 1.35rem 1.4rem; box-shadow: 0 10px 30px rgba(26,59,42,.06);
  transition: box-shadow .3s ease, transform .3s ease;
}
.fk-oway:hover { box-shadow: 0 18px 44px rgba(26,59,42,.12); transform: translateY(-3px); }
.fk-oway-icon {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 999px;
  background: #eef5f0; color: #2b6047; margin-top: 2px;
}
.fk-oway-body { min-width: 0; }
.fk-oway-label {
  font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 11px;
  text-transform: uppercase; letter-spacing: .12em; color: rgba(26,59,42,.55);
  margin-bottom: .4rem;
}
.fk-oway-value {
  font-family: 'Manrope', sans-serif; font-weight: 600; color: #113a48;
  font-size: 1.1rem; line-height: 1.5; word-break: break-word;
}
.fk-oway-addr { font-style: normal; font-weight: 500; font-size: 1rem; color: rgba(26,59,42,.85); }
.fk-oway-acc-label { font-weight: 500; color: rgba(26,59,42,.6); }

/* ---- Donate: "With the support of" jump-to-other-ways button ---- */
.fk-partners-jump {
  display: inline-flex; align-items: center; gap: .5rem; margin-top: 1rem;
  font-family: 'Manrope', sans-serif; font-weight: 600; font-size: .9rem;
  color: #2b6047; background: #eef5f0; border: 1px solid rgba(43,96,71,.25);
  border-radius: 999px; padding: .55rem 1.05rem; cursor: pointer;
  transition: background .25s ease, transform .25s ease, box-shadow .25s ease;
}
.fk-partners-jump:hover { background: #e2efe8; transform: translateY(-1px); box-shadow: 0 8px 20px rgba(43,96,71,.14); }
.fk-partners-jump svg { animation: fk-bob 1.8s ease-in-out infinite; }
@keyframes fk-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(3px); } }
.fk-sponsor-fallback { font-family: 'Manrope', sans-serif; font-weight: 600; font-size: .85rem; color: #113a48; padding: .4rem .6rem; text-align: center; }
.fk-foot-sponsor-fallback { font-family: 'Manrope', sans-serif; font-weight: 700; font-size: .85rem; color: #1a3b2a; }

/* ---- Other ways to donate: quick-copy ---- */
.fk-oway-valwrap { display: flex; align-items: flex-start; gap: .6rem; }
.fk-oway-valwrap .fk-oway-value { flex: 1 1 auto; min-width: 0; }
.fk-copy-btn {
  flex: 0 0 auto; position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; margin-top: -2px; border-radius: 8px; cursor: pointer;
  color: #2b6047; background: #eef5f0; border: 1px solid rgba(43,96,71,.22);
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.fk-copy-btn:hover { background: #2b6047; color: #fff; transform: translateY(-1px); }
.fk-copy-btn.fk-copied { background: #2b6047; color: #fff; }
.fk-copy-tip {
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  background: #1a3b2a; color: #fff; font-family: 'Manrope', sans-serif; font-size: 11px; font-weight: 600;
  letter-spacing: .02em; padding: 4px 8px; border-radius: 6px; white-space: nowrap; pointer-events: none;
}
.fk-copy-tip::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: #1a3b2a; }

/* =====================================================================
   4Kids Africa v2.9.9 — richer Media & Press
   Real Open Graph preview images + teaser blurbs on every media card, plus
   inline (click-to-play) Facebook videos alongside the YouTube lightbox.
   ===================================================================== */
/* Article cards now carry a 16:9 preview image; give them the same subtle
   zoom-on-hover the video tiles use. */
.fk-mcard-item .fk-mvideo-thumb { background: linear-gradient(135deg, #1a3b2a 0%, #0d2a34 100%); display: block; }
.fk-mcard-item:hover .fk-mvideo-thumb img { transform: scale(1.05); }
/* Teaser blurb pulled from og:description. Hide the node until it has text so
   empty cards don't leave a gap. */
.fk-mcard-sub:empty { display: none; }
/* "Open on Facebook" fallback link inside the video lightbox. */
.fk-ov-fallback { display: inline-block; margin-top: .9rem; font-family: 'Manrope', sans-serif; font-weight: 600; font-size: .85rem; color: #e9b7a2; text-decoration: none; }
.fk-ov-fallback:hover { text-decoration: underline; }

/* Partner "cover" logos (Radio DEON, Super Express) shown when a link has no
   own og:image — contained with padding on the brand colour, not cropped. */
.fk-mvideo-thumb.fk-cover .fk-cover-logo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; padding: 12% 16%; box-sizing: border-box;
}
.fk-mvideo-thumb.fk-cover .fk-mvideo-ph-label { display: none; }
.fk-mvideo:hover .fk-mvideo-thumb.fk-cover .fk-cover-logo { transform: none; }
.fk-mcard-item:hover .fk-mvideo-thumb.fk-cover .fk-cover-logo { transform: none; }

/* Vertical (reel / portrait) Facebook videos in the lightbox — no more
   horizontal cropping; the player takes a 9:16 frame centred in the modal. */
.fk-ov-video .fk-ov-box:has(.fk-video-vert) { max-width: 520px; }
.fk-ov-video .fk-video-vert {
  padding-bottom: 0 !important; height: 74vh; width: calc(74vh * 0.5625);
  max-width: 92vw; margin: 0 auto;
}
@media (max-width: 640px) {
  .fk-ov-video .fk-video-vert { height: auto; width: 100%; aspect-ratio: 9 / 16; }
}

/* =====================================================================
   4Kids Africa v2.11.0 — boot splash (no old-layout flash), mobile menu
   link visibility fix, Impact prose redesign, Volunteer gallery 3x2.
   ===================================================================== */

/* ---- Boot splash: the app stays hidden until the subpage router has
   applied the correct page, so visitors never see the old/home layout
   flash first. JS adds .fk-ready to #root and .done to the splash; a
   timed fallback (inline script) guarantees the site always reveals. ---- */
#root { opacity: 0; }
#root.fk-ready { opacity: 1; transition: opacity .45s ease; }
#fk-boot { position: fixed; inset: 0; z-index: 200000; display: flex; align-items: center; justify-content: center; background: #faf8f5; transition: opacity .5s ease; }
#fk-boot.done { opacity: 0; pointer-events: none; }
#fk-boot img { width: 118px; height: auto; animation: fkBootPulse 1.6s ease-in-out infinite; }
@keyframes fkBootPulse { 0%,100% { opacity: .5; } 50% { opacity: 1; } }

/* ---- Mobile menu RWD fix: on subpages the .fk-sub header rule forced a
   DARK green link colour, and the slide-in menu lives INSIDE the header —
   so every menu link was dark-on-dark = invisible. Force cream links inside
   the menu on every page, and give the injected "Our Renovations" item the
   same entrance as its siblings (it is now injected the moment the menu
   mounts, not up to 400ms later). ---- */
#root [data-testid="site-header"].fk-sub [data-testid="mobile-menu"] nav a,
#root [data-testid="site-header"].fk-sub [data-testid="mobile-menu"] a,
#root [data-testid="mobile-menu"] nav a {
  color: #faf8f5 !important;
}
#root [data-testid="mobile-menu"] nav a:hover { color: #e9b7a2 !important; opacity: 1 !important; }
#root [data-testid="mobile-menu"] nav a[data-fk-renov="1"] { animation: fkMenuLinkIn .45s ease both; }
@keyframes fkMenuLinkIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---- Impact program tabs: pill bar (clearer than the underline row) ---- */
#root .fk-prog-tabs { gap: .5rem; border-bottom: 0; margin: 2.6rem 0 2.2rem; }
#root .fk-prog-tab {
  border: 1px solid rgba(26,59,42,.16); border-radius: 999px;
  padding: .6rem 1.15rem; color: rgba(26,59,42,.62); background: #fff;
}
#root .fk-prog-tab:hover { color: #1a3b2a; border-color: rgba(26,59,42,.4); }
#root .fk-prog-tab.active { color: #fff !important; background: #c76541; border-color: #c76541; }
@media (max-width: 640px) {
  #root .fk-prog-tabs { gap: .4rem; margin: 1.9rem 0 1.7rem; }
  #root .fk-prog-tab { padding: .55rem .95rem; font-size: .92rem; min-height: 44px; }
}

/* ---- Impact prose: editorial sections instead of a wall of text.
   Each heading starts a new section with a divider; long lists go
   two-column on desktop; the intro paragraph reads as a lead. ---- */
.fk-prose { max-width: 880px; }
.fk-prose-sec { margin-bottom: 2.3rem; }
.fk-prose-sec + .fk-prose-sec { border-top: 1px solid rgba(26,59,42,.12); padding-top: 2.1rem; }
.fk-prose-h {
  display: flex; align-items: center; gap: .8rem;
  font-size: clamp(1.45rem, 2.6vw, 1.85rem); line-height: 1.15;
  margin: 0 0 1.05rem;
}
.fk-prose-h::before { content: ""; flex: 0 0 auto; width: 30px; height: 4px; border-radius: 2px; background: #c76541; }
.fk-prose-h.fk-h-before { color: #8c4a32; }
.fk-prose-h.fk-h-before::before { background: #8c4a32; }
.fk-prose-h.fk-h-after { color: #2b6047; }
.fk-prose-h.fk-h-after::before { background: #2b6047; }
.fk-prose-p.fk-lead { font-size: 1.14rem; line-height: 1.8; color: #1f4a37; font-weight: 500; }
.fk-prose-p { margin-bottom: 1.05rem; }
.fk-prose-ul { margin: 0 0 1.4rem; }
.fk-prose-ul li { margin-bottom: .65rem; }
@media (min-width: 860px) {
  .fk-prose-ul.fk-wide { columns: 2; column-gap: 3rem; }
  .fk-prose-ul.fk-wide li { break-inside: avoid; -webkit-column-break-inside: avoid; }
}

/* ---- Volunteer gallery: 6 photos as a clean 3 columns x 2 rows grid ---- */
.fk-vol-gallery.fk-vol-gallery-6 { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 250px; gap: 1.1rem; }
.fk-vol-gallery.fk-vol-gallery-6 img:nth-child(1) { grid-row: auto; grid-column: auto; height: 100%; }
.fk-vol-gallery.fk-vol-gallery-6 img:nth-child(6) { grid-column: auto; }
@media (max-width: 1023px) {
  .fk-vol-gallery.fk-vol-gallery-6 { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 220px; }
  .fk-vol-gallery.fk-vol-gallery-6 img:nth-child(1) { grid-row: auto; grid-column: auto; height: 100%; }
  .fk-vol-gallery.fk-vol-gallery-6 img:nth-child(6) { grid-column: auto; }
}
@media (max-width: 640px) {
  .fk-vol-gallery.fk-vol-gallery-6 { grid-template-columns: 1fr; grid-auto-rows: 240px; }
  .fk-vol-gallery.fk-vol-gallery-6 img { height: 100%; }
  .fk-vol-gallery.fk-vol-gallery-6 img:nth-child(1) { grid-row: auto; grid-column: auto; height: 100%; }
  .fk-vol-gallery.fk-vol-gallery-6 img:nth-child(6) { grid-column: auto; }
}

/* =====================================================================
   4Kids Africa v2.11.1 — Impact prose: much airier editorial rhythm
   (applies to BOTH generated blocks AND raw admin bodyHtml — the JS
   enhanceProse() pass classes + sections both), with fallbacks for any
   unclassed markup.
   ===================================================================== */
.fk-prose { max-width: 860px; }
.fk-prose-sec { margin-bottom: 2.9rem; }
.fk-prose-sec + .fk-prose-sec { border-top: 1px solid rgba(26,59,42,.14); padding-top: 2.5rem; }
.fk-prose-h,
.fk-prose h4:not(.fk-prose-h) {
  display: flex; align-items: center; gap: .85rem;
  font-family: 'Cormorant Garamond', serif; font-weight: 600;
  font-size: clamp(1.6rem, 2.9vw, 2.05rem); line-height: 1.12;
  color: #113a48; margin: 0 0 1.2rem;
}
.fk-prose-h::before,
.fk-prose h4:not(.fk-prose-h)::before {
  content: ""; flex: 0 0 auto; width: 34px; height: 4px; border-radius: 2px; background: #c76541;
}
.fk-prose-h.fk-h-before { color: #8c4a32; }
.fk-prose-h.fk-h-before::before { background: #8c4a32; }
.fk-prose-h.fk-h-after { color: #2b6047; }
.fk-prose-h.fk-h-after::before { background: #2b6047; }
.fk-prose-p,
.fk-prose p:not(.fk-prose-p) {
  font-family: 'Manrope', sans-serif; color: rgba(26,59,42,.84);
  font-size: 1.04rem; line-height: 1.85; margin: 0 0 1.15rem;
}
.fk-prose-p.fk-lead {
  font-size: 1.18rem; line-height: 1.8; color: #1f4a37; font-weight: 500;
  margin-bottom: 1.5rem;
}
.fk-prose-ul,
.fk-prose ul:not(.fk-prose-ul) {
  list-style: none; padding: .4rem 0 0; margin: 0 0 1.6rem;
}
.fk-prose-ul li,
.fk-prose ul:not(.fk-prose-ul) li {
  position: relative; font-family: 'Manrope', sans-serif; color: rgba(26,59,42,.84);
  font-size: 1.02rem; line-height: 1.7; padding-left: 1.7rem; margin-bottom: .8rem;
}
.fk-prose-ul li::before,
.fk-prose ul:not(.fk-prose-ul) li::before {
  content: ""; position: absolute; left: 0; top: .5em;
  width: 9px; height: 9px; border-radius: 50%; background: #c76541;
}
@media (min-width: 860px) {
  .fk-prose-ul.fk-wide { columns: 2; column-gap: 3.2rem; }
  .fk-prose-ul.fk-wide li { break-inside: avoid; -webkit-column-break-inside: avoid; }
}
@media (max-width: 640px) {
  .fk-prose-sec { margin-bottom: 2.2rem; }
  .fk-prose-sec + .fk-prose-sec { padding-top: 1.9rem; }
}

/* =====================================================================
   4Kids Africa v2.11.4 — Pillars: the 01-05 numbers sit on busy photos
   and were hard to read. Give each number a solid forest-green badge
   (circle) with a soft green glow so it pops on any image.
   ===================================================================== */
#root [data-testid="pillars-section"] .group > div:first-child > span.absolute,
#root #pillars .group > div:first-child > span.absolute {
  display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 999px;
  background: rgba(26,59,42,.94);
  color: #faf8f5 !important;
  font-size: 1.05rem; font-weight: 600; line-height: 1;
  text-shadow: none;
  box-shadow: 0 0 0 2px rgba(250,248,245,.28), 0 4px 14px rgba(26,59,42,.5), 0 0 22px rgba(43,96,71,.55);
  transition: transform .35s ease, box-shadow .35s ease, background-color .35s ease;
}
#root [data-testid="pillars-section"] .group:hover > div:first-child > span.absolute,
#root #pillars .group:hover > div:first-child > span.absolute {
  transform: scale(1.08);
  background: #2b6047;
  box-shadow: 0 0 0 2px rgba(250,248,245,.4), 0 6px 18px rgba(26,59,42,.55), 0 0 30px rgba(43,96,71,.7);
}

/* =====================================================================
   4Kids Africa v2.11.5 — React-proof header (state on <html>, dual logo),
   mobile menu: hidden Sign up entry + staggered entrance for ALL items,
   Donate mobile gap fix.
   ===================================================================== */

/* ---- Header solid/dark state keyed on <html> — React re-renders the
   header on scroll and would wipe any classes set on the header itself;
   <html> is outside React's reach. ---- */
html.fk-hd-sub #root [data-testid="site-header"] {
  background: #faf8f5 !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  box-shadow: 0 4px 24px rgba(26,59,42,.10) !important;
}
html.fk-hd-sub #root [data-testid="site-header"] nav a,
html.fk-hd-sub #root [data-testid="site-header"] [data-testid="header-login-btn"] { color: #1a3b2a !important; }
html.fk-hd-sub #root [data-testid="site-header"] nav a:hover,
html.fk-hd-sub #root [data-testid="site-header"] [data-testid="header-login-btn"]:hover { opacity: .62; }
html.fk-hd-sub #root [data-testid="site-header"] [data-testid="lang-switcher"] { border-color: rgba(26,59,42,.32) !important; }
html.fk-hd-sub #root [data-testid="site-header"] [data-testid="lang-pl"],
html.fk-hd-sub #root [data-testid="site-header"] [data-testid="lang-en"] { color: #1a3b2a !important; }
html.fk-hd-sub #root [data-testid="site-header"] [data-testid="lang-en"].bg-terracotta,
html.fk-hd-sub #root [data-testid="site-header"] [data-testid="lang-pl"].bg-terracotta { color: #fff !important; }
html.fk-hd-sub #root [data-testid="site-header"] .lucide-menu,
html.fk-hd-sub #root [data-testid="site-header"] [data-testid="mobile-menu-btn"] { color: #1a3b2a !important; }
html.fk-hd-sub #root [data-testid="site-header"] .fk-social a { color: #1a3b2a !important; }
/* ... but links inside the open dark mobile menu stay cream */
html.fk-hd-sub #root [data-testid="site-header"] [data-testid="mobile-menu"] nav a,
html.fk-hd-sub #root [data-testid="site-header"] [data-testid="mobile-menu"] nav a:hover { color: #faf8f5 !important; opacity: 1 !important; }

/* ---- Dual logo: dark variant is a CSS-toggled clone, so React's src
   swaps can never make the logo invisible again ---- */
#root [data-testid="logo-link"] img.fk-logo-b { display: none !important; }
html.fk-hd-sub #root [data-testid="logo-link"] img:not(.fk-logo-b) { display: none !important; }
html.fk-hd-sub #root [data-testid="logo-link"] img.fk-logo-b { display: block !important; }

/* ---- Shrink state on <html> as well ---- */
html.fk-hd-shrink #root [data-testid="site-header"] { padding-top: .2rem !important; padding-bottom: .2rem !important; box-shadow: 0 2px 14px rgba(0,0,0,.10); }
html.fk-hd-shrink #root [data-testid="site-header"] > div { padding-top: .35rem !important; padding-bottom: .35rem !important; }
html.fk-hd-shrink #root [data-testid="site-header"] [data-testid="logo-link"] :is(img,svg) { height: 1.85rem !important; }
@media (min-width:481px) and (max-width:1023px) {
  html.fk-hd-shrink #root [data-testid="site-header"] [data-testid="logo-link"] :is(img,svg) { height: 2.3rem !important; }
}
@media (min-width:1024px) {
  html.fk-hd-shrink #root [data-testid="site-header"] [data-testid="logo-link"] :is(img,svg) { height: 4rem !important; }
}

/* ---- Mobile menu: hide the "Sign up / Log in" entry (for now) ---- */
#root [data-testid="mobile-menu"] nav[aria-label="Mobile"] > button.font-heading { display: none !important; }

/* ---- Mobile menu: EVERY item gets the same staggered slide-in ---- */
#root [data-testid="mobile-menu"] nav[aria-label="Mobile"] > * {
  animation: fkMenuLinkIn .55s cubic-bezier(.22,1,.36,1) both;
}
#root [data-testid="mobile-menu"] nav[aria-label="Mobile"] > :nth-child(1) { animation-delay: .04s; }
#root [data-testid="mobile-menu"] nav[aria-label="Mobile"] > :nth-child(2) { animation-delay: .10s; }
#root [data-testid="mobile-menu"] nav[aria-label="Mobile"] > :nth-child(3) { animation-delay: .16s; }
#root [data-testid="mobile-menu"] nav[aria-label="Mobile"] > :nth-child(4) { animation-delay: .22s; }
#root [data-testid="mobile-menu"] nav[aria-label="Mobile"] > :nth-child(5) { animation-delay: .28s; }
#root [data-testid="mobile-menu"] nav[aria-label="Mobile"] > :nth-child(6) { animation-delay: .34s; }
#root [data-testid="mobile-menu"] nav[aria-label="Mobile"] > :nth-child(7) { animation-delay: .40s; }
#root [data-testid="mobile-menu"] nav[aria-label="Mobile"] > :nth-child(8) { animation-delay: .46s; }
#root [data-testid="mobile-menu"] nav[aria-label="Mobile"] > :nth-child(9) { animation-delay: .52s; }

/* ---- Donate mobile: kill the phantom gap under the "Support 4Kids
   Africa" heading — .fk-donate-head-text has flex-basis 420px which, in
   the stacked (column) mobile layout, becomes a 420px min-HEIGHT ---- */
@media (max-width: 900px) {
  .fk-donate-head-text { flex: 0 0 auto !important; }
  .fk-donate-head .fk-page-lead { margin-bottom: 1.2rem; }
}

/* =====================================================================
   4Kids Africa v2.11.10 — Media page: the group titles INSIDE the media
   boxes were set in the serif display face and hard to read. Switch them
   (and only them — headings outside the boxes are untouched) to Manrope.
   ===================================================================== */
.fk-mgroup .fk-dgroup-title {
  font-family: 'Manrope', sans-serif;
  font-weight: 800;
  font-size: 1.12rem;
  line-height: 1.3;
  letter-spacing: .01em;
  color: #1a3b2a;
  display: flex; align-items: center; gap: .6rem;
  padding-bottom: .6rem; margin-bottom: 1.3rem;
}
.fk-mgroup .fk-dgroup-title::before {
  content: ""; flex: 0 0 auto; width: 22px; height: 3px; border-radius: 2px; background: #c76541;
}

/* ---- Media card titles (the article/video headings inside the cards):
   same readability fix — plain Manrope instead of the decorative serif ---- */
.fk-mcard .fk-mcard-title,
.fk-mgroup .fk-mcard-title,
.fk-mcard-title {
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 1.02rem;
  line-height: 1.45;
  letter-spacing: 0;
  color: #1a3b2a;
}


/* =====================================================================
   4Kids Africa — SMOOTH HEADER COLOUR TRANSITION
   The header switches from its transparent/green-over-hero state to the
   solid cream ("scrolled") state via the <html>.fk-hd-sub class (set by
   fourkids-enhance.js on scroll). Previously that switch was instant.
   Here we only add an elegant ~0.35s ease-out transition for the
   background, link/icon colours and the logo swap — colours, layout and
   the scroll threshold are unchanged.
   ===================================================================== */

/* Bar background + shadow fade smoothly (keeps padding/box-shadow anims). */
#root [data-testid="site-header"] {
  transition: background-color .35s ease-out,
              box-shadow .35s ease-out,
              padding .35s ease-out !important;
}

/* Link / button / icon colours ease from cream to green (and back). */
#root [data-testid="site-header"] nav a,
#root [data-testid="site-header"] [data-testid="header-login-btn"],
#root [data-testid="site-header"] [data-testid="header-donate-btn"],
#root [data-testid="site-header"] [data-testid="lang-switcher"],
#root [data-testid="site-header"] [data-testid="lang-pl"],
#root [data-testid="site-header"] [data-testid="lang-en"],
#root [data-testid="site-header"] [data-testid="mobile-menu-btn"],
#root [data-testid="site-header"] .lucide-menu,
#root [data-testid="site-header"] .fk-social a {
  transition: color .35s ease-out,
              border-color .35s ease-out,
              background-color .35s ease-out,
              opacity .35s ease-out !important;
}

/* NOTE: the logo is intentionally left with its original show/hide swap
   (defined earlier: img.fk-logo-a / img.fk-logo-b via display none/block).
   An earlier attempt to cross-fade it with absolute positioning shifted the
   logo out of place ("logo uciekło"), so we keep the logo layout untouched
   and only animate the bar background, link/button and icon colours above. */

/* Respect users who prefer reduced motion — no fade for them. */
@media (prefers-reduced-motion: reduce) {
  #root [data-testid="site-header"],
  #root [data-testid="site-header"] nav a,
  #root [data-testid="site-header"] [data-testid="header-login-btn"],
  #root [data-testid="site-header"] [data-testid="header-donate-btn"],
  #root [data-testid="site-header"] [data-testid="lang-switcher"],
  #root [data-testid="site-header"] [data-testid="lang-pl"],
  #root [data-testid="site-header"] [data-testid="lang-en"],
  #root [data-testid="site-header"] [data-testid="mobile-menu-btn"],
  #root [data-testid="site-header"] .lucide-menu,
  #root [data-testid="site-header"] .fk-social a {
    transition: none !important;
  }
}


/* =====================================================================
   4Kids Africa — HIDE STRAY BLINKING TEXT CARET
   Clicking an empty / non-editable area (or a focusable container left over
   from the build) sometimes shows a blinking text caret, as if you could
   type there. We hide the caret globally and re-enable it ONLY on real
   text-entry fields, so forms (donation, volunteer, search) keep a normal,
   visible, fully-working cursor. Text remains selectable (user-select
   untouched). ===================================================================== */
html { caret-color: transparent; }
input,
textarea,
select,
[contenteditable="true"],
[contenteditable=""] { caret-color: auto; }

/* v2.11.15 — Donorbox hosted-page fallback (ITP / ad-block / Brave resilience).
   Scoped to new classes only; does not touch the existing embed layout. */
.fk-db-fallback{margin:12px 0 2px;text-align:center}
.fk-db-fallback-link{display:inline-block;font-size:.86rem;line-height:1.3;color:#1A3B2A;
  text-decoration:underline;text-underline-offset:3px;opacity:.75;transition:opacity .2s ease}
.fk-db-fallback-link:hover{opacity:1}
.fk-db-fallback-strong .fk-db-fallback-link{font-size:1rem;font-weight:600;opacity:1;
  text-decoration:none;background:#1A3B2A;color:#fff;padding:12px 20px;border-radius:999px}
.fk-db-blocked{max-width:34rem;margin:0 auto;padding:14px 16px;border-radius:12px;
  background:#fff4e5;color:#7a4b00;border:1px solid #f0c98a;font-size:.92rem;line-height:1.45;text-align:center}

/* v2.11.15 — iOS landscape scroll hardening.
   On iOS Safari, 100vh is the LARGE viewport (content runs under the toolbar),
   which in landscape can make the page feel "stuck"/uncuttable. Switch the
   page wrapper and full-screen overlays to the dynamic viewport unit where
   supported (same @supports pattern the mobile menu already uses). vh==dvh on
   desktop, so this is a no-op there. */
@supports (min-height: 100dvh) {
  .App, .min-h-screen { min-height: 100dvh; }
  .max-h-screen { max-height: 100dvh; }
}
@supports (height: 100dvh) {
  .h-screen { height: 100dvh; }
}
@media (max-width: 640px) {
  @supports (min-height: 100dvh) {
    .fk-ov-box { min-height: 100dvh; }
  }
}