/* =======================================
   Weep Not Child Foundation — Light Theme
   Palette: Cream base + Bold Green (B1)
   Author: You & D (polished)
======================================= */

/* ---------- Brand Tokens ---------- */
:root{
  --bg: #faf7ef;          /* warm cream */
  --bg-soft: #ffffff;     /* cards, surfaces */
  --text: #0b1220;        /* strong copy */
  --text-soft: #3d4a4a;   /* body/secondary */
  --green: #0f7137;       /* brand primary */
  --green-acc: #22c55e;   /* bright accent */
  --border: rgba(0,0,0,.08);
}

/* ---------- Base ---------- */
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Helvetica, Arial, sans-serif;
  line-height: 1.65;
  /* soft page fade */
  opacity: 0; animation: fadeIn .9s ease-out forwards;
}
@keyframes fadeIn{ from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:translateY(0)} }

.container{ max-width:1100px; margin:0 auto; padding:24px; }

/* Headings */
h1,h2,h3{ color: var(--green); font-weight:700; letter-spacing:.2px; margin:0 0 .4rem; }
.section-title{ font-size:1.25rem; font-weight:600; color:var(--text-soft); }

/* Links */
a{ color: var(--green); text-decoration:none; }
a:hover{ text-decoration:underline; }

/* ---------- Header / Nav ---------- */
.site-header{
  position: sticky; top:0; z-index:50;
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
.nav{
  display:flex; gap:16px; align-items:center; justify-content:space-between;
}
.brand{ display:flex; gap:10px; align-items:center; }
.logo-img{ height:72px; width:auto; display:block; object-fit:contain; }
@media (max-width:600px){ .logo-img{ height:58px; } }

.nav a{
  color: var(--text-soft);
  text-decoration:none;
  padding:10px 12px;
  border-radius:10px;
  font-weight:500;
  transition: color .2s ease, background .2s ease;
}
.nav a:hover,
.nav a.active{
  color: var(--green);
  background: rgba(15,113,55,.08);
  text-decoration:none;
}

/* ---------- Hero (Full-bleed photo with overlay) ---------- */
/* Usage in HTML:
<section class="hero">
  <div class="hero-card hero-photo">
    <img class="hero-bg" src="photos/whatever.jpg" alt="">
    <div class="hero-copy">...</div>
  </div>
</section>
*/

.hero{
  width:100%;
  margin:0 0 2rem;
  padding:0;
}
.hero-card.hero-photo{
  position: relative;
  width: 100vw;     /* full-bleed */
  margin-left: 50%;
  transform: translateX(-50%);
  min-height: 68vh;
  max-height: 92vh;
  border-radius: 0;
  overflow: hidden;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.hero-bg{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center;
  filter: brightness(.88) saturate(1.05);
  z-index:0;
}
.hero-card.hero-photo::before{
  /* overlay for legibility */
  content:""; position:absolute; inset:0; z-index:1;
  background: linear-gradient(180deg,
    rgba(0,0,0,.35) 0%,
    rgba(0,0,0,.45) 60%,
    rgba(0,0,0,.65) 100%
  );
}
.hero-copy{
  position:relative; z-index:2;
  color:#fff; text-align:center;
  max-width: 760px;
  margin: 0 auto;
  padding: 3rem 1rem;
  top: 14%;
  text-shadow: 0 2px 6px rgba(0,0,0,.38);
  animation: heroFade 1.1s ease-out forwards; opacity:0;
}
.hero-copy h2{ font-size:2.3rem; font-weight:800; margin:.2rem 0 .6rem; color:#fff; }
.hero-copy p{ font-size:1.125rem; opacity:.98; }
@keyframes heroFade{ from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:translateY(0)} }
@media(max-width:600px){
  .hero-card.hero-photo{ min-height:58vh; }
  .hero-copy h2{ font-size:1.8rem; }
  .hero-copy p{ font-size:1rem; }
}

/* ---------- Grid & Cards ---------- */
.grid{ display:grid; gap:16px; }
.grid-2{ grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

.card{
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 22px;
  color: var(--text);
  box-shadow: 0 6px 20px rgba(0,0,0,.06);
  transition: transform .16s ease, box-shadow .22s ease, border-color .22s ease;
}
.card:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(0,0,0,.09);
  border-color: rgba(15,113,55,.22);
}

/* ---------- Buttons ---------- */
.cta{
  display:inline-block;
  background: linear-gradient(90deg, #22c55e, #16a34a);
  color:#052e1a !important;
  padding:12px 18px;
  border-radius:12px;
  font-weight:700;
  border:0;
  box-shadow: 0 10px 24px rgba(34,197,94,.25);
  transition: transform .08s ease, box-shadow .22s ease, filter .22s ease;
  text-decoration:none;
}
.cta:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 32px rgba(34,197,94,.34);
  filter: saturate(1.04);
  text-decoration:none;
}
.cta.btn-outline{
  background: transparent;
  color: var(--green) !important;
  border: 2px solid var(--green);
  box-shadow:none;
}
.cta.btn-outline:hover{
  background: var(--green);
  color:#fff !important;
}

/* ---------- Forms ---------- */
label{ display:block; margin:.25rem 0 .35rem; color: var(--text-soft); font-weight:600; }
input, textarea, select{
  width:100%;
  padding:12px;
  border-radius:10px;
  border:1px solid var(--border);
  background:#fff;
  color: var(--text);
  margin-bottom:12px;
  font: inherit;
}
input:focus, textarea:focus, select:focus,
a:focus-visible, button:focus-visible, .pill:focus-visible, .amount:focus-visible{
  outline: 3px solid rgba(34,197,94,.45);
  outline-offset: 2px;
}

/* ---------- Donation UI (copy buttons) ---------- */
.payrow{
  display:grid;
  grid-template-columns: 140px 1fr auto;
  gap:10px; align-items:center;
  padding:8px 0;
  border-bottom:1px dashed rgba(0,0,0,.08);
}
.payrow:last-child{ border-bottom:0; }

.label{ font-weight:700; color: var(--text); }
.kbd{
  background:#fff;
  border:1px solid var(--border);
  border-radius:8px;
  padding:10px 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  word-break: break-all;
}
.copybtn{
  border:2px solid var(--green);
  background: transparent;
  color: var(--green);
  border-radius:10px;
  padding:8px 12px;
  cursor:pointer;
  font-weight:700;
  transition: .2s ease;
}
.copybtn:hover{
  background: var(--green);
  color:#fff;
}

/* ---------- Badges / Trustline ---------- */
.trustline{
  display:flex; gap:8px; flex-wrap:wrap; justify-content:center;
  margin: 12px 0 6px;
}
.badge{
  display:inline-block;
  padding:6px 10px;
  border-radius:999px;
  background: linear-gradient(90deg, #22c55e, #16a34a);
  color:#052e1a; font-weight:700; font-size:12px;
}

/* ---------- Gallery Grid ---------- */
.gallery-grid{ display:grid; gap:12px; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); }
.g-item{
  background:#fff; border:1px solid var(--border); border-radius:14px; overflow:hidden;
  transition: transform .16s ease, box-shadow .22s ease, border-color .22s ease;
}
.g-item:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(0,0,0,.08);
  border-color: rgba(15,113,55,.22);
}
.g-item img{
  width:100%; display:block; aspect-ratio:4/3; object-fit:cover;
  transition: transform .4s ease, filter .4s ease;
}
.g-item:hover img{ transform: scale(1.03); filter: saturate(1.04) contrast(1.02); }
.g-item figcaption{
  font-size:.9rem; color: var(--text-soft); padding:10px 12px;
}

/* ---------- Lightbox (Gallery) ---------- */
.lightbox{
  position:fixed; inset:0; display:none; place-items:center;
  background: rgba(0,0,0,.86); z-index:9999; padding:24px;
}
.lightbox.active{ display:grid; }
.lb-img{ max-width:92vw; max-height:76vh; display:block; border-radius:8px; }
.lb-cap{ margin-top:10px; color:#fff; text-align:center; }
.lb-close,.lb-prev,.lb-next{
  position:absolute; border:0; cursor:pointer;
  background: rgba(255,255,255,.12); color:#fff;
  border-radius:10px; padding:8px 10px;
}
.lb-close{ top:18px; right:18px; }
.lb-prev{ left:18px; top:50%; transform:translateY(-50%); }
.lb-next{ right:18px; top:50%; transform:translateY(-50%); }
.lb-close:hover,.lb-prev:hover,.lb-next:hover{ background: rgba(255,255,255,.22); }

/* Optional heart donate button inside lightbox */
.lb-donate{
  position:absolute; right:16px; bottom:16px;
  background:#16a34a; color:#fff; padding:8px 14px;
  border-radius:40px; font-size:.9rem; font-weight:700; text-decoration:none;
  transition:.2s ease;
}
.lb-donate:hover{ background:#22c55e; }

/* ---------- Testimonials (Camilla letter) ---------- */
.tl-card{
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 6px 20px rgba(0,0,0,.06);
  margin-bottom:20px;
}
.tl-meta{ color: var(--text-soft); margin:.25rem 0 .5rem; font-size:.95rem; }
.tl-actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:14px; }

/* Modals */
.tl-modal{
  position:fixed; inset:0; display:none; place-items:center;
  background: rgba(0,0,0,.86); z-index:9999; padding:24px;
}
.tl-modal.active{ display:grid; }
.tl-content{
  position:relative; background:#fff; color:var(--text);
  border:1px solid var(--border); border-radius:12px;
  padding:12px; max-width:92vw; max-height:86vh; overflow:auto;
}
.tl-close{
  position:absolute; top:8px; right:8px;
  border:0; background: rgba(0,0,0,.06);
  color: var(--text); border-radius:8px; padding:6px 10px; cursor:pointer;
}
iframe.tl-scan{ width:72vw; height:76vh; background:#fff; border:0; border-radius:8px; }
.tl-transcript{ max-width:70ch; line-height:1.6; padding:12px; color:var(--text); }

/* ---------- Footer ---------- */
.site-footer{
  background: #e7efe9;
  border-top: 1px solid var(--border);
  text-align:center;
  color: var(--text-soft);
  padding: 16px 0;
  margin-top: 40px;
}

/* ---------- Utilities ---------- */
.btn-row{ display:flex; gap:10px; flex-wrap:wrap; }
.stack{ display:grid; gap:10px; }
.tiny{ font-size:12px; color: var(--text-soft); }
.sr-only{
  position:absolute !important;
  width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
 
/* ===== Header logo block with deep-green background ===== */
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Green plate behind the logo for visibility */
.brand .logo-plate {
  background: #0f7137;            /* deep brand green */
  padding: 6px 10px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  box-shadow: 0 6px 18px rgba(15, 113, 55, .25);
}

/* Logo sizing */
.logo-img {
  height: 70px;
  width: auto;
  display: block;
  object-fit: contain;
  filter: brightness(1.05);
}
@media (max-width: 600px) {
  .logo-img { height: 56px; }
}

/* ===== Nav responsiveness (wraps instead of causing overflow) ===== */
.nav {
  flex-wrap: wrap;
  gap: 10px;
}

/* ===== Stop horizontal scroll / hero overflow ===== */
html, body { overflow-x: hidden; }

/* Replace full-bleed 100vw trick with safe width to avoid overflow */
.hero-card.hero-photo {
  width: 100%;            /* was 100vw */
  margin-left: 0;         /* was 50% */
  transform: none;        /* remove translateX(-50%) */
  border-radius: 18px;    /* keep it elegant in light theme */
}

/* Keep hero image perfectly contained */
.hero-bg { width: 100%; height: 100%; object-fit: cover; }

/* ===== Images never overflow their containers ===== */
img { max-width: 100%; height: auto; }

/* ===== Grids tighten on small screens ===== */
@media (max-width: 768px) {
  .container { padding: 18px; }
  .grid-2 { grid-template-columns: 1fr; }
}

/* ===== Map wrapper responsive ===== */
.map-card {
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: var(--bg-soft);
  box-shadow: 0 6px 20px rgba(0,0,0,.06);
}
.map-wrap {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
  overflow: hidden;
  border-radius: 12px;
}
.map-wrap iframe {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  border: 0;
}
/* About page visuals */
.facts-grid{
  display:grid; gap:12px;
  grid-template-columns: repeat(auto-fit, minmax(180px,1fr));
  margin-top: -8px;
}
.facts-grid .fact{
  background: var(--bg-soft);
  border:1px solid var(--border);
  border-radius: 14px;
  padding: 16px;
  text-align: center;
  box-shadow: 0 6px 20px rgba(0,0,0,.05);
}
.fact-num{ font-weight:800; color:var(--green); font-size:1.2rem; }
.fact-label{ color: var(--text-soft); font-size:.95rem; }

.what-we-do .do-list{ list-style:none; padding:0; margin:0; display:grid; gap:8px; }
.what-we-do .do-list li{ display:flex; gap:10px; align-items:center; }
.what-we-do .do-list span{ font-size:1.2rem; width:24px; text-align:center; }

.about-split img{ width:100%; height:auto; border-radius:12px; display:block; }

.timeline .timeline-list{
  list-style:none; padding:0; margin:8px 0 0; display:grid; gap:12px;
}
.timeline .timeline-list li{ display:flex; gap:10px; align-items:flex-start; }
.timeline .dot{
  width:10px; height:10px; border-radius:50%;
  background: var(--green-acc);
  margin-top:.45rem;
}
.cta-block{ text-align:center; }
.founder-photo img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  object-fit: cover;
  box-shadow: 0 8px 32px rgba(0,0,0,.35);
}
.founder-photo {
  position: relative;
  overflow: hidden;
}

.founder-photo img {
  display: block;
}

.founder-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 12px;
  background: radial-gradient(circle at center, transparent 60%, rgba(0,0,0,.35));
  pointer-events: none;
}