/* KGM Uganda Missions Trip 2027 — site styles */
:root{
  --navy:#143845; --navy-d:#0e2932; --teal:#2E7D7B; --teal-d:#236462; --teal-l:#3a9b98;
  --gold:#d49a3a; --gold-d:#b67f22; --red:#c0392b;
  --ink:#1f2a2e; --muted:#5c6c6c; --bg:#f4faf9; --card:#ffffff; --line:#e1ecea;
  --shadow:0 6px 22px rgba(20,56,69,.08); --shadow-lg:0 18px 50px rgba(20,56,69,.16);
  --radius:16px; --maxw:1140px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:78px}
body{margin:0; font-family:'Source Sans 3',-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink); background:var(--bg); line-height:1.6; -webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:'Poppins',Georgia,serif; line-height:1.18; color:var(--navy); margin:.2em 0 .4em}
h1{font-size:clamp(2rem,5vw,3.4rem); font-weight:700; letter-spacing:-.5px}
h2{font-size:clamp(1.5rem,3.4vw,2.3rem); font-weight:700}
h3{font-size:1.2rem; font-weight:600}
p{margin:.4em 0 1em}
a{color:var(--teal-d); text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%}
.container{max-width:var(--maxw); margin:0 auto; padding:0 22px}
.section{padding:72px 0}
.section.alt{background:#fff}
.section .container > p.lead{font-size:1.12rem; color:var(--muted); max-width:760px}
.eyebrow{display:inline-block; text-transform:uppercase; letter-spacing:2px; font-size:.78rem;
  font-weight:700; color:var(--teal); background:#e7f3f2; padding:5px 12px; border-radius:30px; margin-bottom:10px}
.center{text-align:center}
.center .lead{margin-left:auto;margin-right:auto}

/* buttons */
.btn{display:inline-flex; align-items:center; gap:.5em; font-weight:600; font-family:'Poppins',sans-serif;
  padding:13px 24px; border-radius:40px; border:2px solid transparent; cursor:pointer; transition:.18s; font-size:1rem}
.btn:hover{text-decoration:none; transform:translateY(-2px)}
.btn-gold{background:var(--gold); color:#3b2a06; box-shadow:0 6px 18px rgba(212,154,58,.35)}
.btn-gold:hover{background:var(--gold-d); color:#fff}
.btn-teal{background:var(--teal); color:#fff}
.btn-teal:hover{background:var(--teal-d); color:#fff}
.btn-ghost{background:transparent; color:#fff; border-color:rgba(255,255,255,.6)}
.btn-ghost:hover{background:#fff; color:var(--navy)}
.btn-outline{background:#fff; color:var(--teal-d); border-color:var(--teal)}
.btn-outline:hover{background:var(--teal); color:#fff}
.btn-sm{padding:9px 16px; font-size:.9rem}

/* header / nav */
header.site{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.96); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line)}
.nav{display:flex; align-items:center; justify-content:space-between; height:64px}
.brand{display:flex; align-items:center; gap:10px; font-family:'Poppins',sans-serif; font-weight:700; color:var(--navy); font-size:1.05rem}
.brand:hover{text-decoration:none}
.brand .mark{width:38px;height:38px;border-radius:10px;background:linear-gradient(135deg,var(--teal),var(--navy));
  display:grid;place-items:center;color:#fff;font-weight:700;font-size:.9rem;letter-spacing:.5px}
.brand small{display:block; font-family:'Source Sans 3',sans-serif; font-weight:600; color:var(--teal-d); font-size:.7rem; letter-spacing:1px}
.navlinks{display:flex; align-items:center; gap:6px}
.navlinks a{color:var(--ink); font-weight:600; padding:8px 12px; border-radius:8px; font-size:.95rem}
.navlinks a:hover{background:#eef6f5; text-decoration:none; color:var(--navy)}
.navlinks a.cta{background:var(--gold); color:#3b2a06; margin-left:6px}
.navlinks a.cta:hover{background:var(--gold-d); color:#fff}
.hamburger{display:none; background:none; border:0; cursor:pointer; padding:8px}
.hamburger span{display:block; width:24px; height:2px; background:var(--navy); margin:5px 0; transition:.2s}

/* hero */
.hero{position:relative; color:#fff; background:linear-gradient(135deg,var(--navy-d) 0%, var(--navy) 45%, var(--teal-d) 100%); overflow:hidden}
.hero::after{content:""; position:absolute; inset:0; opacity:.10;
  background-image:radial-gradient(circle at 20% 30%, #fff 1.5px, transparent 1.6px); background-size:34px 34px}
.hero .container{position:relative; z-index:2; padding-top:78px; padding-bottom:84px}
.hero .eyebrow{background:rgba(255,255,255,.14); color:#cfeeec}
.hero h1{color:#fff; max-width:14ch}
.hero .sub{font-size:1.18rem; color:#d7eceb; max-width:60ch; margin-bottom:6px}
.hero .verse{font-style:italic; color:#ffe9c2; border-left:3px solid var(--gold); padding-left:14px; margin:22px 0 26px; max-width:55ch}
.hero-cta{display:flex; gap:14px; flex-wrap:wrap; margin-top:10px}
.hero-meta{display:flex; gap:26px; flex-wrap:wrap; margin-top:34px; padding-top:22px; border-top:1px solid rgba(255,255,255,.18)}
.hero-meta .item{min-width:90px}
.hero-meta .num{font-family:'Poppins',sans-serif; font-size:1.7rem; font-weight:700; color:#fff}
.hero-meta .lbl{font-size:.82rem; color:#bfe0de; text-transform:uppercase; letter-spacing:1px}

/* pillars / cards */
.grid{display:grid; gap:22px}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:26px; box-shadow:var(--shadow); transition:.2s}
.card:hover{box-shadow:var(--shadow-lg); transform:translateY(-3px)}
.pillar .ic{width:54px;height:54px;border-radius:14px;display:grid;place-items:center;font-size:1.6rem;margin-bottom:12px;
  background:#e7f3f2}
.pillar h3{color:var(--navy)}
.pillar .tag{font-size:.78rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--teal)}

/* facts */
.facts{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:10px}
.fact{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px;text-align:center}
.fact .v{font-family:'Poppins',sans-serif;font-weight:700;color:var(--teal-d);font-size:1.25rem}
.fact .k{font-size:.85rem;color:var(--muted)}

/* map */
.mapwrap{border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow); margin-top:18px}
.mapwrap iframe{display:block; width:100%; height:420px; border:0}

/* timeline */
.timeline{margin-top:18px; border-left:3px solid #d8e8e6; padding-left:22px}
.timeline .row{position:relative; padding:10px 0 16px}
.timeline .row::before{content:""; position:absolute; left:-31px; top:14px; width:14px;height:14px;border-radius:50%;
  background:var(--teal); border:3px solid #fff; box-shadow:0 0 0 2px var(--teal)}
.timeline .day{font-family:'Poppins',sans-serif; font-weight:700; color:var(--navy)}
.timeline .ev{color:var(--muted)}

/* fees table */
.table{width:100%; border-collapse:collapse; background:#fff; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); margin-top:8px}
.table th,.table td{padding:13px 16px; text-align:left; border-bottom:1px solid var(--line)}
.table th{background:var(--navy); color:#fff; font-family:'Poppins',sans-serif; font-weight:600; font-size:.95rem}
.table td:last-child,.table th:last-child{text-align:right; white-space:nowrap}
.table tr:last-child td{border-bottom:0}
.table tr.total td{background:#eef6f5; font-weight:700; color:var(--navy)}
.note{background:#fff7e6; border:1px solid #f0d9a8; border-left:4px solid var(--gold); border-radius:12px; padding:14px 18px; margin-top:16px}
.note.warn{background:#fdecea; border-color:#f1b0a8; border-left-color:var(--red)}
.note.warn strong{color:var(--red)}

/* links list */
.linklist{display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-top:8px}
.linkrow{display:flex; align-items:flex-start; gap:12px; background:#fff; border:1px solid var(--line); border-radius:12px; padding:16px}
.linkrow .ic{font-size:1.3rem}
.linkrow b{display:block; color:var(--navy)}
.linkrow span{font-size:.9rem; color:var(--muted)}
.linkrow .official{font-size:.72rem; font-weight:700; color:#1a7a4a; background:#e3f6ec; padding:2px 8px; border-radius:20px; margin-left:6px}

/* fundraising */
.bar{background:#e3eeed; border-radius:30px; height:24px; overflow:hidden; margin:8px 0}
.bar > i{display:block; height:100%; width:0; border-radius:30px; background:linear-gradient(90deg,var(--teal),var(--teal-l)); transition:width 1s ease}
.bar.gold > i{background:linear-gradient(90deg,var(--gold),#e7b860)}
.barmeta{display:flex; justify-content:space-between; font-size:.92rem}
.barmeta b{font-family:'Poppins',sans-serif; color:var(--navy)}
.give-steps{counter-reset:s; margin-top:10px; display:grid; gap:12px}
.give-steps .st{display:flex; gap:14px; align-items:flex-start; background:#fff; border:1px solid var(--line); border-radius:12px; padding:14px 16px}
.give-steps .st::before{counter-increment:s; content:counter(s); flex:0 0 auto; width:30px;height:30px;border-radius:50%;
  background:var(--teal); color:#fff; display:grid; place-items:center; font-weight:700; font-family:'Poppins',sans-serif}
.provide{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:14px}
.provide .p{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px;text-align:center}
.provide .p .amt{font-family:'Poppins',sans-serif;font-weight:700;color:var(--gold-d);font-size:1.15rem}
.provide .p .d{font-size:.85rem;color:var(--muted)}

/* social */
.caption{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px;position:relative}
.caption p{margin:.2em 0}
.caption .copy{position:absolute; top:10px; right:10px}
.tagpill{display:inline-block;background:var(--navy);color:#fff;font-weight:700;border-radius:30px;padding:6px 16px;font-family:'Poppins',sans-serif;letter-spacing:.5px}
.share{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.share a{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:30px;color:#fff;font-weight:600;font-size:.92rem}
.share a:hover{text-decoration:none;opacity:.92}
.s-fb{background:#1877f2}.s-wa{background:#25d366}.s-x{background:#111}.s-ig{background:#c13584}

/* CTA band */
.band{background:linear-gradient(135deg,var(--teal-d),var(--navy)); color:#fff; border-radius:22px; padding:42px; text-align:center}
.band h2{color:#fff}
.band p{color:#d7eceb; max-width:620px; margin:0 auto 18px}

/* forms */
.formcard{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px;box-shadow:var(--shadow); max-width:760px}
.field{margin-bottom:16px}
.field label{display:block; font-weight:600; color:var(--navy); margin-bottom:5px; font-size:.95rem}
.field .req{color:var(--red)}
.field input,.field select,.field textarea{width:100%; padding:11px 13px; border:1px solid #cdddda; border-radius:10px; font:inherit; background:#fcfefe}
.field input:focus,.field select:focus,.field textarea:focus{outline:0; border-color:var(--teal); box-shadow:0 0 0 3px rgba(46,125,123,.15)}
.field textarea{min-height:90px; resize:vertical}
.field .hint{font-size:.82rem; color:var(--muted); margin-top:4px}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.hp{position:absolute!important; left:-9999px}
/* gate */
.gate{max-width:430px; margin:30px auto; text-align:center}
.gate .formcard{padding:30px}

/* footer */
footer.site{background:var(--navy-d); color:#cfe0de; padding:48px 0 28px; margin-top:10px}
footer.site a{color:#bfe0de}
.fgrid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:30px}
footer h4{color:#fff; font-size:1rem; margin-top:0}
footer .small{font-size:.88rem; color:#9fb8b6}
.fbar{border-top:1px solid rgba(255,255,255,.12); margin-top:30px; padding-top:18px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:.85rem; color:#9fb8b6}

/* reveal */
.reveal{opacity:0; transform:translateY(16px); transition:.6s}
.reveal.in{opacity:1; transform:none}

/* responsive */
@media(max-width:860px){
  .grid-3,.grid-4,.facts,.linklist,.provide,.fgrid{grid-template-columns:1fr 1fr}
  .row2{grid-template-columns:1fr}
  .navlinks{position:fixed; inset:64px 0 auto 0; background:#fff; flex-direction:column; align-items:stretch;
    padding:10px 16px 18px; border-bottom:1px solid var(--line); display:none; box-shadow:var(--shadow)}
  .navlinks.open{display:flex}
  .navlinks a{padding:12px 10px}
  .hamburger{display:block}
}
@media(max-width:560px){
  .grid-2,.grid-3,.grid-4,.facts,.linklist,.provide,.fgrid{grid-template-columns:1fr}
  .band{padding:28px 20px}
  .section{padding:54px 0}
}

/* ── Two-country cards (Rwanda + Uganda) ───────────────────── */
.card.country{position:relative; display:flex; flex-direction:column}
.card.country .flag{font-size:2.1rem; line-height:1; margin-bottom:10px}
.card.country h3{font-size:1.35rem; margin-top:2px}
.card.country .facts{grid-template-columns:1fr 1fr; gap:12px}
.card.country .fact{background:var(--bg); padding:14px}
.card.country .fact .v{font-size:1rem}
.card.country .fact .k{font-size:.78rem}
.card.country .mapwrap{margin-top:auto; box-shadow:none}
.card.country .mapwrap iframe{height:250px}
@media (max-width:720px){
  .card.country .mapwrap iframe{height:210px}
}

/* ── Budget input portal (budget.html) ─────────────────────── */
.pills{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 2px}
.pill{border:1.5px solid #cdddda;background:#fff;color:var(--navy);padding:9px 14px;border-radius:30px;cursor:pointer;font:inherit;font-weight:600;transition:.15s}
.pill.on{background:var(--teal);border-color:var(--teal);color:#fff}
.areatabs{display:flex;gap:10px;margin:18px 0 6px;flex-wrap:wrap}
.atab{flex:1 1 0;min-width:120px;background:#fff;border:1.5px solid var(--line);border-radius:14px;padding:12px 10px;text-align:center;cursor:pointer;font:inherit;box-shadow:var(--shadow);transition:.15s}
.atab .f{font-size:1.5rem;display:block;line-height:1.2}
.atab b{display:block;color:var(--navy);font-family:'Poppins',sans-serif;font-size:1rem;margin-top:2px}
.atab small{color:var(--muted);font-size:.8rem}
.atab.on{border-color:var(--teal);box-shadow:0 0 0 3px rgba(46,125,123,.18)}
.areahead{margin-top:22px}
.areahead h3{font-size:1.35rem;margin-bottom:.1em}
.progress{display:flex;align-items:center;gap:12px;margin:8px 0 0;font-size:.92rem;color:var(--muted)}
.progress b{font-family:'Poppins',sans-serif;color:var(--navy)}
.progress .bar{flex:1;height:10px;margin:0}
.bsec{margin-top:26px}
.bsec h3{font-size:1.05rem;margin-bottom:10px;color:var(--teal-d)}
.bitem{background:#fff;border:1px solid var(--line);border-radius:14px;margin-bottom:10px;box-shadow:var(--shadow);overflow:hidden}
.bhead{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;background:none;border:0;text-align:left;cursor:pointer;font:inherit}
.bhead b{color:var(--navy);font-family:'Poppins',sans-serif;font-size:1rem;line-height:1.3}
.bhead .st{font-size:.78rem;font-weight:700;color:var(--muted);white-space:nowrap;background:var(--bg);padding:4px 10px;border-radius:20px}
.bitem.sent .bhead .st{color:#1a7a4a;background:#e3f6ec}
.bitem.open .bhead{background:#f6fbfa}
.bbody{display:none;padding:2px 16px 16px;border-top:1px solid var(--line)}
.bitem.open .bbody{display:block}
.bitem .ask{color:var(--ink);margin:12px 0 12px}
.money{display:grid;grid-template-columns:1fr 120px;gap:12px}
.total{background:var(--bg);border-radius:10px;padding:10px 14px;margin:0 0 14px;display:flex;justify-content:space-between;align-items:center}
.total b{font-family:'Poppins',sans-serif;color:var(--navy);font-size:1.05rem}
.conf{display:flex;gap:8px;flex-wrap:wrap}
.conf label{flex:1 1 0;min-width:100px;border:1.5px solid #cdddda;border-radius:10px;padding:10px 8px;text-align:center;cursor:pointer;font-size:.9rem;font-weight:600;color:var(--navy);background:#fff;margin:0}
.conf label.on{background:var(--teal);border-color:var(--teal);color:#fff}
.conf input{position:absolute;opacity:0;width:0;height:0}
.bactions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:4px}
.bactions .btn[type=submit]{flex:1 1 auto;justify-content:center}
.bmsg{font-size:.9rem;margin-top:8px}
.bmsg.err{color:var(--red)}
.bmsg.ok{color:#1a7a4a}
@media(max-width:560px){
  .areatabs{gap:6px}
  .atab{min-width:0;padding:10px 4px}
  .atab .f{font-size:1.3rem}
  .atab b{font-size:.9rem}
  .money{grid-template-columns:1fr 104px}
}
