/*
Theme Name: YFC Zimbabwe Simple
Theme URI: https://yfczimbabwe.org/
Author: Youth for Christ Zimbabwe
Description: A lightweight, privacy-first WordPress theme aligned to the YFC Zimbabwe / G21 design system.
Version: 1.4.0
Text Domain: yfc-zimbabwe-simple
*/
:root { --g21-red:#dd3e26; --g21-maroon:#801517; --action:#bf3016; --action-hover:#992511; --give:#f2b32c; --ink:#211a14; --muted:#63584c; --paper:#fffdf8; --surface:#f8f2e7; --surface-deep:#f0e7d6; --line:#e7dcc9; --night:#241a13; --on-night:#f7efe2; --on-night-muted:rgba(247,239,226,.74); --gutter:clamp(1.25rem,5vw,4rem); --standard:88rem; --display:clamp(2.85rem,6.2vw,5.5rem); --h1:clamp(2.35rem,4.6vw,3.75rem); --h2:clamp(1.8rem,3.2vw,2.65rem); --section:clamp(4rem,9vw,7.5rem); --hero-home:url('assets/images/hero-home.webp'); }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--paper); color:var(--ink); font:400 16px/1.6 Mulish,"Avenir Next","Segoe UI",Arial,sans-serif; } img { display:block; max-width:100%; } a { color:inherit; } .site-width { width:100%; max-width:calc(var(--standard) + 2 * var(--gutter)); margin-inline:auto; padding-inline:var(--gutter); }
.skip-link { position:absolute; left:-9999px; } .skip-link:focus { left:16px; top:16px; z-index:20; background:var(--paper); padding:12px; outline:3px solid var(--g21-maroon); }
.topbar { display:flex; align-items:center; min-height:40px; background:var(--night); color:var(--on-night-muted); font-size:.75rem; }.topbar .site-width { display:flex; justify-content:space-between; gap:1rem; }.topbar a { color:var(--on-night-muted); text-decoration:none; }.topbar a:hover { color:var(--give); }
.site-header { min-height:120px; display:flex; align-items:center; background:var(--paper); border-bottom:1px solid var(--line); }.header-inner { display:flex; align-items:center; justify-content:space-between; gap:2rem; }.custom-logo-link img,.wordmark img { width:auto; height:96px; max-width:320px; object-fit:contain; }.menu { display:flex; align-items:center; flex-wrap:wrap; gap:1.4rem; margin:0; padding:0; list-style:none; font-size:.9rem; font-weight:700; }.menu a { text-decoration:none; }.menu a:hover,.menu .current-menu-item a { color:var(--g21-maroon); }.button { display:inline-flex; min-height:44px; align-items:center; justify-content:center; padding:0 1.65em; border:0; border-radius:0; background:var(--action); color:#fff; font:700 .95rem/1 Mulish,"Avenir Next","Segoe UI",Arial,sans-serif; letter-spacing:.02em; text-decoration:none; transition:background .16s ease,transform .16s ease; }.button:hover { background:var(--action-hover); color:#fff; transform:translateY(-1px); }.button--light { border:1.5px solid rgba(247,239,226,.55); background:transparent; color:var(--on-night); }.button--light:hover { background:var(--on-night); border-color:var(--on-night); color:var(--ink); }
.hero { position:relative; min-height:clamp(36rem,82svh,48rem); display:flex; align-items:end; color:var(--on-night); background-color:#1a100a; background-image:var(--hero-home); background-position:62% center; background-size:cover; background-repeat:no-repeat; }.hero::before { content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background:linear-gradient(76deg,rgba(26,16,10,.68) 0%,rgba(26,16,10,.38) 46%,rgba(26,16,10,.12) 100%); }.hero .hero-content { position:relative; z-index:1; width:100%; max-width:calc(49rem + var(--gutter)); margin-inline:0; padding:6rem var(--gutter); }.eyebrow { display:block; color:var(--g21-maroon); font-size:.78rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }.hero .eyebrow { color:var(--on-night-muted); }.hero h1 { margin:.75rem 0 1.25rem; color:var(--on-night); font-size:var(--display); font-weight:800; line-height:.98; letter-spacing:-.045em; max-width:100%; overflow-wrap:break-word; text-wrap:balance; }.lead { max-width:43rem; margin:0; font-size:clamp(1.06rem,1.5vw,1.3rem); }.button-row { display:flex; flex-wrap:wrap; gap:.75rem; margin-top:2rem; }
.section { padding-block:var(--section); }.section--white { background:var(--paper); }.intro { max-width:46rem; margin-bottom:clamp(2.5rem,5vw,4rem); }.intro h2,.split h2,.cta h2,.page-header h1 { margin:.75rem 0 1rem; font-size:var(--h2); font-weight:800; line-height:1.08; letter-spacing:-.035em; }.intro p,.split p { color:var(--muted); font-size:1.08rem; }.cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(1.25rem,3vw,2rem); }.card { overflow:hidden; border:1px solid var(--line); background:var(--paper); }.card img { width:100%; aspect-ratio:4/3; object-fit:cover; }.card-body { padding:1.5rem; }.card-body h3 { margin:0 0 .75rem; font-size:1.35rem; line-height:1.2; }.card-body p { margin:0; color:var(--muted); }.cards--text { gap:0; border-block:1px solid var(--line); }.cards--text .card { border:0; border-radius:0; }.cards--text .card + .card { border-left:1px solid var(--line); }.cards--text .card-body { padding:2rem; }.split { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:clamp(2rem,5vw,4.5rem); }.split img { width:100%; aspect-ratio:4/3; object-fit:cover; }.split .button { margin-top:.5rem; }
.cta { padding-block:var(--section); background:radial-gradient(120% 160% at 85% 0%,rgba(221,62,38,.16),transparent 55%),linear-gradient(150deg,#2a1c12,#1d140d); color:var(--on-night); text-align:center; }.cta .eyebrow { color:var(--give); }.cta h2 { color:var(--on-night); }.cta p { max-width:36rem; margin:0 auto 1.5rem; color:var(--on-night-muted); }.cta-note { max-width:28rem; margin:1rem auto 0; color:var(--on-night-muted); font-size:.82rem; line-height:1.45; }.site-footer { padding:3rem 0 1.5rem; background:var(--night); color:var(--on-night); }.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr; gap:2.25rem; }.footer-grid img { width:auto; height:92px; max-width:320px; object-fit:contain; }.footer-grid h3 { margin:0 0 .75rem; color:var(--on-night); font-size:1rem; }.footer-grid p,.footer-grid a { color:var(--on-night-muted); }.footer-links { margin:0; padding:0; list-style:none; }.footer-links li { margin:.4rem 0; }.footer-bottom { margin-top:2.4rem; padding-top:1.2rem; border-top:1px solid rgba(247,239,226,.16); color:var(--on-night-muted); font-size:.8rem; }
.page-header { padding-block:5rem; background:var(--night); color:var(--on-night); }.page-header h1 { color:var(--on-night); font-size:var(--h1); }.page-content { max-width:calc(43rem + 2 * var(--gutter)); padding-block:var(--section); }.page-content h2 { margin-top:2.2rem; font-size:var(--h2); line-height:1.1; }
@media (max-width:760px) { .topbar { display:none; }.hero { min-height:calc(100svh - 88px); background-position:72% 30%; }.hero::before { background:linear-gradient(180deg,rgba(26,16,10,.28) 0%,rgba(26,16,10,.48) 42%,rgba(26,16,10,.72) 100%); }.hero .hero-content { max-width:none; padding-block:4.5rem; }.hero h1 { font-size:clamp(2.15rem,8.8vw,3.1rem); line-height:1.05; }.cards,.split,.footer-grid { grid-template-columns:1fr; }.cards--text .card + .card { border-left:0; border-top:1px solid var(--line); }.button-row .button { width:100%; }.footer-grid { gap:1.25rem; }.footer-grid img { height:76px; } }

/* Mobile navigation: a panel that opens from the centre of the bar. */
.nav-toggle { display:none; }
@media (max-width:760px) {
  .site-header { position:relative; min-height:88px; }
  .header-inner { position:relative; align-items:center; flex-direction:row; justify-content:space-between; padding-block:.65rem; }
  .wordmark img { height:64px; max-width:205px; }
  .nav-toggle { align-items:center; appearance:none; background:transparent; border:1px solid var(--line); border-radius:0; color:var(--ink); cursor:pointer; display:inline-flex; flex-direction:column; gap:.3rem; justify-content:center; min-height:50px; min-width:60px; padding:.4rem .6rem; font:800 .68rem/1 Mulish,"Avenir Next","Segoe UI",Arial,sans-serif; letter-spacing:.06em; text-transform:uppercase; }
  .nav-toggle-icon { display:grid; gap:4px; width:22px; }
  .nav-toggle-icon i { display:block; width:22px; height:2px; background:var(--g21-maroon); transition:transform .16s ease,opacity .16s ease; }
  .nav-toggle[aria-expanded="true"] .nav-toggle-icon i:first-child { transform:translateY(6px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .nav-toggle-icon i:nth-child(2) { opacity:0; }
  .nav-toggle[aria-expanded="true"] .nav-toggle-icon i:last-child { transform:translateY(-6px) rotate(-45deg); }
  .primary-navigation { display:none; position:absolute; z-index:10; top:calc(100% + .35rem); left:50%; width:min(calc(100vw - 2.5rem), 28rem); margin:0; padding:0 1.15rem 1.15rem; background:var(--paper); border:1px solid var(--line); box-shadow:0 18px 42px rgba(38,24,14,.18); translate:-50% 0; transform-origin:top center; }
  .primary-navigation.is-open { display:block; animation:mobile-menu-in .2s ease-out both; }
  .primary-navigation .menu { display:grid; width:100%; gap:0; border-top:1px solid var(--line); font-size:.95rem; }
  .primary-navigation .menu li { margin:0; }
  .primary-navigation .menu a { display:flex; align-items:center; min-height:52px; padding:0; border-bottom:1px solid var(--line); }
}
@media (max-width:760px) and (prefers-reduced-motion:reduce) {
  .primary-navigation.is-open { animation:none; }
}
@keyframes mobile-menu-in { from { opacity:0; translate:-50% -.75rem; scale:.92; } to { opacity:1; translate:-50% 0; scale:1; } }