@import url(/css/nav.css);

/* ====== THEME / BASE ====== */
:root{
  --navy:#233746; --ink:#0F1F2A; --cream:#E8D9A9; --sage:#9EB088; --leaf:#7C9C6A;
  --muted:#ffffffb3; --field-bg:#ffffff14; --field-bd:#ffffff2b; --field-focus:var(--cream);
}
*{box-sizing:border-box}
html:focus-within{scroll-behavior:smooth}
body{margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Helvetica,Arial,sans-serif; color:#fff; background:var(--navy)}
a{color:inherit}
img{max-width:100%; display:block}
.container{max-width:1100px; margin:auto; padding:0 20px}



/* ====== HERO ====== */
.hero{position:relative; overflow:hidden}
.hero .grid{position:absolute; inset:0; background-image:radial-gradient(#ffffff12 1px, transparent 1px); background-size:18px 18px; pointer-events:none}
.hero .wrap{padding:96px 0 24px; text-align:center}
h1{font-size:clamp(2rem,4vw + 1rem,3.2rem); line-height:1.1; margin:0}
.lead{max-width:900px; margin:16px auto 0; color:#e7e7e7; font-size:1.125rem}
.badge{display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; border:1px solid #ffffff2b; background:#ffffff10}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 18px; border-radius:12px; background:var(--cream); color:var(--ink); font-weight:700; text-decoration:none; box-shadow:0 10px 30px rgba(0,0,0,.15); transition:transform .2s ease, opacity .2s ease}
.btn:hover{transform:translateY(-1px); opacity:.95}
.btn.ghost{background:transparent; border:1px solid #ffffff2b; color:#fff}
.muted{color:var(--muted)}

/* ====== SECTION LAYOUT ====== */
.section{padding:64px 0}
.grid{display:grid; gap:18px}
.grid-2{grid-template-columns:1fr 1fr}
.grid-3{grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){ .grid-2,.grid-3{grid-template-columns:1fr} }

/* ====== DONATE PANEL ====== */
.panel{border:1px solid #ffffff1a; background:#ffffff0d; border-radius:16px; padding:18px}
.preset{display:flex; gap:10px; flex-wrap:wrap}
.preset button{appearance:none; border:1px solid #ffffff2b; background:#ffffff12; color:#fff; padding:10px 12px; border-radius:10px; cursor:pointer; font:inherit}
.preset button[aria-pressed="true"]{background:var(--cream); color:var(--ink); border-color:transparent}
.controls{display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-top:12px}
label.switch{position:relative; display:inline-flex; align-items:center; gap:8px; cursor:pointer}
.switch input{position:absolute; opacity:0}
.switch .slider{width:52px; height:30px; background:#ffffff2b; border-radius:999px; position:relative; transition:background .2s}
.switch .slider::before{content:""; position:absolute; width:24px; height:24px; left:3px; top:3px; background:#fff; border-radius:50%; transition:transform .2s}
.switch input:checked + .slider{background:var(--cream)}
.switch input:checked + .slider::before{transform:translateX(22px)}
input.amount{width:160px; font:inherit; font-size:18px; color:#fff; padding:12px 14px; border-radius:12px; border:1px solid var(--field-bd); background:var(--field-bg)}
input.amount:focus-visible{outline:0; border-color:var(--field-focus); box-shadow:0 0 0 3px color-mix(in oklab, var(--cream), transparent 70%)}

/* ====== MODAL (Custom Checkout surface) ====== */
.modal{position:fixed; inset:0; background:#0008; display:none; align-items:center; justify-content:center; padding:20px; z-index:100}
.modal.open{display:flex}
.modal .sheet{width:min(100%, 960px); height:min(90vh, 900px); background:#0f1f2a; border-radius:16px; overflow:hidden; border:1px solid #ffffff2b; position:relative}
.modal header{display:flex; align-items:center; justify-content:space-between; padding:10px 14px; background:#ffffff12; border-bottom:1px solid #ffffff1a; position:sticky; top:0; z-index:1}
.modal h3{margin:0; font-size:1rem}
.modal .close{appearance:none; border:1px solid #ffffff3a; background:#ffffff12; color:#fff; border-radius:10px; padding:6px 10px; cursor:pointer}
.modal .frame{position:absolute; inset:48px 0 0 0}
.modal iframe{position:absolute; inset:0; width:100%; height:100%; border:0}

/* ====== OTHER BOXES ====== */
.box{border:1px solid #ffffff1a; background:#ffffff0d; border-radius:14px; padding:18px}

/* ====== FAQ ====== */
details{border:1px solid #ffffff1a; background:#ffffff0d; border-radius:12px; padding:12px 14px; margin:10px 0}
summary{cursor:pointer; font-weight:700}
details[open]{background:#ffffff18}

/* ====== FOOTER ====== */
footer{border-top:1px solid #ffffff1a; margin-top:50px}
footer .grid{display:grid; gap:24px; grid-template-columns:2fr 1fr 1fr}
@media (max-width:780px){ footer .grid{grid-template-columns:1fr} }
footer a{text-decoration:none}
.copy{color:#ffffff99; padding:16px 0; text-align:center}

/* A11y helpers + Animations */
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}
@media (prefers-reduced-motion: no-preference){
  .reveal{opacity:0; transform:translateY(14px); animation:reveal .5s ease forwards}
  .reveal:nth-child(2){animation-delay:.06s}
  .reveal:nth-child(3){animation-delay:.12s}
  @keyframes reveal{to{opacity:1; transform:none}}
}