/* Mahir Library — public site styles. Mirrors src/design/tokens.ts */
:root {
  --parchment:#FBF7EF;
  --surface:#FFFFFF;
  --border:#E8DEC9;
  --primary:#0E5C3F;
  --primary-strong:#0A4530;
  --primary-deep:#024018;
  --accent:#C2A14D;
  --ink:#1B2A24;
  --muted:#5C6B63;
  --header-green:#F5FAF2;
  --footer-brown:#F5EEE0;
  --accent-text:#3D2918;
  --accent-text-muted:#7A5C3F;
  --serif:Lora,Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  /* tighter, more editorial radii */
  --r-lg:8px;
  --r-md:6px;
  --r-sm:4px;
}
* { box-sizing:border-box; }
html,body { margin:0; padding:0; }
body {
  background-color:var(--parchment);
  font-family:var(--sans);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
}
a { color:var(--primary); }
::selection { background:#0E5C3F; color:#fff; }

/* ---- Top nav (full-bleed dark brown) ---- */
.nav {
  display:flex; align-items:center; gap:16px;
  max-width:none; margin:0; flex-wrap:wrap;
  padding:14px max(24px, calc((100% - 1040px) / 2));
  background:#2E1F14;
  border-bottom:1px solid rgba(194,161,77,.28);
}
.nav .brandwrap { display:flex; align-items:center; gap:10px; text-decoration:none; }
.nav .brandwrap img { width:34px; height:34px; border-radius:var(--r-sm); }
.nav .brandwrap .bn { font-family:var(--serif); font-weight:700; font-size:18px; color:#F3E9D6; letter-spacing:.2px; }
.nav .spacer { flex:1; }
.nav .links { display:flex; gap:20px; align-items:center; flex-wrap:wrap; }
.nav .links a { text-decoration:none; color:#E5D9C5; font-size:14px; font-weight:600; }
.nav .links a:hover { color:var(--accent); }

/* ---- Language switcher ---- */
.lang { display:inline-flex; border:1px solid rgba(229,217,197,.32); border-radius:var(--r-sm); overflow:hidden; }
.lang button {
  border:0; background:transparent; cursor:pointer;
  font-size:12px; font-weight:700; letter-spacing:.5px;
  padding:6px 11px; color:#D6C7AF;
}
.lang button + button { border-left:1px solid rgba(229,217,197,.22); }
.lang button.active { background:var(--accent); color:#2E1F14; }

/* ---- Reusable Morocco gradient + pattern background ---- */
.morocco-bg { position:relative; overflow:hidden; }
.morocco-bg > .bg { position:absolute; inset:0; background:linear-gradient(135deg,#F5F3EF 0%,#EBE8E3 50%,#DDDAD4 100%); }
.morocco-bg > .bg::after {
  content:""; position:absolute; inset:0;
  background-image:url('morocco-pattern.png');
  background-size:420px 252px; background-repeat:repeat;
  opacity:.5;
}
.morocco-bg > .inner, .morocco-bg > .hero { position:relative; z-index:1; }

/* ---- Layout ---- */
.wrap { max-width:1040px; margin:0 auto; padding:0 24px; }
.narrow { max-width:760px; }
.section { padding:56px 0; }
.eyebrow { font-size:12px; letter-spacing:2.5px; text-transform:uppercase; color:var(--accent); font-weight:700; margin:0 0 10px; }
h2.h { font-family:var(--serif); font-size:30px; line-height:1.2; color:var(--ink); margin:0 0 10px; }
.lead-sub { font-size:17px; color:var(--muted); max-width:600px; margin:0 0 8px; }
.divider { height:1px; background:var(--border); border:0; margin:8px 0 32px; }
.gold-rule { width:54px; height:3px; background:var(--accent); border:0; border-radius:2px; margin:0 0 22px; }

/* ---- Hero ---- */
.hero { text-align:center; padding:64px 0 44px; position:relative; }
.hero img.mark { width:84px; height:84px; border-radius:18px; margin:0 auto 20px; display:block; box-shadow:0 10px 30px rgba(2,64,24,.18); }
.hero h1 { font-family:var(--serif); font-size:44px; line-height:1.12; margin:0 auto 16px; max-width:760px; color:var(--ink); letter-spacing:-.3px; }
.hero .tag { font-size:12px; letter-spacing:2.5px; text-transform:uppercase; color:var(--accent); font-weight:700; margin:0 0 16px; }
.hero p.lead { font-size:18px; color:var(--muted); max-width:600px; margin:0 auto 30px; }
.hero h1 .em { color:var(--primary); }

/* Donation hero mark — green rounded square like the app icon */
.donate-mark {
  width:74px; height:74px; border-radius:18px;
  background:linear-gradient(150deg,#0E5C3F 0%,#024018 100%);
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 20px; box-shadow:0 10px 28px rgba(2,64,24,.22);
}
.donate-mark svg { width:36px; height:36px; fill:#fff; }

/* ---- Buttons ---- */
.btn {
  display:inline-flex; align-items:center; gap:8px;
  background:var(--primary); color:#fff !important;
  text-decoration:none; font-size:15px; font-weight:600;
  padding:13px 26px; border-radius:var(--r-md); border:0; cursor:pointer;
  transition:background .15s ease;
}
.btn:hover { background:var(--primary-strong); }
.btn.secondary { background:transparent; color:var(--primary) !important; border:1px solid var(--accent); }
.btn.secondary:hover { background:var(--header-green); }
.btn.ondark { background:#fff; color:var(--primary) !important; }
.btn.ondark:hover { background:#f0ece2; }
.btn.ghostdark { background:transparent; color:#fff !important; border:1px solid rgba(255,255,255,.5); }
.btn.ghostdark:hover { background:rgba(255,255,255,.12); }
.btnrow { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

/* ---- Mission (gradient + Morocco pattern) ---- */
.mission { position:relative; overflow:hidden; border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.mission .bg { position:absolute; inset:0; background:linear-gradient(135deg,#F5F3EF 0%,#EBE8E3 50%,#DDDAD4 100%); }
.mission .bg::after {
  content:""; position:absolute; inset:0;
  background-image:url('morocco-pattern.png');
  background-size:420px 252px; background-repeat:repeat;
  opacity:.55;
}
.mission .inner { position:relative; z-index:1; }

/* ---- Feature grid ---- */
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:16px; }
.feature {
  background:rgba(255,255,255,.82); border:1px solid var(--border); border-radius:var(--r-lg);
  padding:24px; backdrop-filter:blur(2px);
}
.feature .ic {
  width:42px; height:42px; border-radius:var(--r-md);
  background:var(--header-green); color:var(--primary);
  display:flex; align-items:center; justify-content:center; margin-bottom:14px;
}
.feature .ic svg { width:21px; height:21px; fill:currentColor; }
.feature h3 { font-family:var(--serif); font-size:18px; margin:0 0 6px; color:var(--ink); }
.feature p { font-size:14px; color:var(--muted); margin:0; }
.feature .langlist { margin-top:10px; font-size:13px; color:var(--muted); line-height:1.7; }

/* ---- Green donor band ---- */
.band-green { position:relative; overflow:hidden; background:var(--primary-deep); color:#fff; }
.band-green::after {
  content:""; position:absolute; inset:0;
  background-image:url('morocco-pattern.png');
  background-size:420px 252px; background-repeat:repeat;
  opacity:.06; pointer-events:none;
}
.band-green .inner { position:relative; z-index:1; text-align:center; }
.band-green .eyebrow { color:#C9B673; }
.band-green h2.h { color:#fff; }
.band-green .lead-sub { color:rgba(255,255,255,.82); margin:0 auto 34px; }

.roles { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px; max-width:760px; margin:0 auto; text-align:left; }
.role { background:var(--surface); border-radius:var(--r-lg); padding:28px; color:var(--ink); border:1px solid transparent; }
.role.featured { border-color:var(--accent); }
.role .rtag { font-size:11px; letter-spacing:1.5px; text-transform:uppercase; font-weight:700; color:var(--muted); margin:0 0 4px; }
.role .rname { font-family:var(--serif); font-size:22px; color:var(--primary); margin:0 0 4px; }
.role .rprice { font-size:15px; color:var(--ink); font-weight:600; margin:0 0 16px; }
.role ul { list-style:none; padding:0; margin:0 0 22px; }
.role ul li { font-size:14px; color:var(--ink); padding:7px 0 7px 26px; position:relative; }
.role ul li svg { position:absolute; left:0; top:9px; width:15px; height:15px; fill:var(--primary); }
.role .btn { width:100%; justify-content:center; }

/* ---- Donation amounts (uniform selectable grid) ---- */
.card-plain { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:30px; }
.amount-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:8px 0 24px; }
.amt-btn {
  border:1px solid var(--border); background:var(--surface); border-radius:var(--r-md);
  padding:18px 10px; font-size:17px; font-weight:700; color:var(--ink);
  cursor:pointer; text-align:center; transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.amt-btn:hover { border-color:var(--accent); }
.amt-btn.selected { background:var(--primary); border-color:var(--primary); color:#fff; }
@media (max-width:480px){ .amount-grid { grid-template-columns:repeat(2,1fr); } }

/* ---- Contact form ---- */
.contact-form { display:grid; gap:16px; text-align:left; }
.contact-form .row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field { display:flex; flex-direction:column; gap:6px; }
.field label { font-size:13px; font-weight:600; color:var(--ink); }
.field label .req { color:#B3261E; }
.field input, .field textarea {
  font-family:var(--sans); font-size:15px; color:var(--ink);
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md);
  padding:11px 13px; width:100%;
}
.field input:focus, .field textarea:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(14,92,63,.12); }
.field textarea { min-height:130px; resize:vertical; }
.field input[type=file] { padding:9px 13px; background:var(--parchment); cursor:pointer; }
.field .err { font-size:12px; color:#B3261E; display:none; }
.field.invalid .err { display:block; }
.field.invalid input, .field.invalid textarea { border-color:#B3261E; }
.form-note { font-size:12px; color:var(--muted); margin:0; }
.form-success { display:none; background:var(--header-green); border:1px solid var(--border); border-radius:var(--r-md); padding:14px 16px; color:var(--primary); font-weight:600; font-size:14px; }
.contact-form .btn { justify-self:start; }
@media (max-width:560px){ .contact-form .row { grid-template-columns:1fr; } }

/* ---- Footer contact button ---- */
.fcol .footer-btn { margin-top:2px; padding:9px 18px; font-size:14px; }

/* ---- Legal / prose ---- */
.prose h2 { font-family:var(--serif); font-size:20px; color:var(--ink); margin:28px 0 8px; }
.prose p, .prose li { font-size:15px; color:var(--ink); }
.prose ul { padding-left:20px; }
.prose .updated { font-size:13px; color:var(--muted); margin-top:4px; }

/* ---- Footer (Morocco gradient + pattern) ---- */
.footer { position:relative; overflow:hidden; background:linear-gradient(135deg,#F5F3EF 0%,#EBE8E3 50%,#DDDAD4 100%); border-top:1px solid var(--border); margin-top:0; }
.footer::before {
  content:""; position:absolute; inset:0;
  background-image:url('morocco-pattern.png');
  background-size:420px 252px; background-repeat:repeat;
  opacity:.5; pointer-events:none;
}
.footer .inner { position:relative; z-index:1; max-width:1040px; margin:0 auto; padding:40px 24px; display:flex; flex-wrap:wrap; gap:28px; justify-content:space-between; }
.footer .flogo { width:42px; height:42px; border-radius:var(--r-md); display:block; margin:0 0 12px; box-shadow:0 6px 18px rgba(2,64,24,.15); }
.footer .fbrand { font-family:var(--serif); font-size:16px; color:var(--accent-text); margin:0 0 6px; }
.footer .copy { font-size:13px; color:var(--accent-text-muted); margin:0; }
.footer .fcol h4 { font-size:12px; letter-spacing:1.5px; text-transform:uppercase; color:var(--accent-text-muted); margin:0 0 12px; }
.footer .fcol a { display:block; text-decoration:none; color:var(--accent-text); font-size:14px; margin-bottom:9px; }
.footer .fcol a:hover { color:var(--primary); }

@media (max-width:560px){
  .hero h1 { font-size:33px; }
  h2.h { font-size:25px; }
  .nav { gap:10px; padding:16px; }
  .nav .links { gap:13px; }
  .section { padding:44px 0; }
}