/* =========================================================
   Iraqi Civic Compass — stylesheet
   Palette: deep teal + parchment + brass. Type: Noto family, chosen so
   Latin, Arabic and Kurdish (Sorani) share one consistent voice.
   ========================================================= */
:root{
  --ink:#1c2320;
  --ink-soft:#46524c;
  --paper:#faf7ee;
  --paper-2:#f1ecdd;
  --teal:#144d43;
  --teal-deep:#0d3830;
  --teal-tint:#e6efe9;
  --gold:#b8862f;
  --gold-ink:#86601a;          /* gold for small text: 5:1 on paper */
  --gold-soft:#e4c987;
  --line:#dcd5c0;
  --card:#ffffff;
  --radius:6px;                /* controls */
  --radius-lg:12px;            /* cards & panels */
  --shadow-sm:0 1px 2px rgba(13,56,48,.06);
  --shadow-md:0 10px 24px -12px rgba(13,56,48,.28);
  --font-head-en:'Noto Serif', serif;
  --font-body-en:'Noto Sans', sans-serif;
  --font-head-ar:'Noto Kufi Arabic', sans-serif;
  --font-body-ar:'Noto Sans Arabic', sans-serif;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;}
html{scroll-padding-top:120px;overflow-x:hidden;-webkit-text-size-adjust:100%;}
html,body{height:100%;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body-en);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
/* Arabic-script text needs more air than Latin */
body[dir="rtl"]{font-family:var(--font-body-ar);line-height:1.85;}
h1,h2,h3,h4{
  font-family:var(--font-head-en);font-weight:600;margin:0;color:var(--teal-deep);
  line-height:1.2;letter-spacing:-.005em;text-wrap:balance;
}
body[dir="rtl"] h1,body[dir="rtl"] h2,body[dir="rtl"] h3,body[dir="rtl"] h4{
  font-family:var(--font-head-ar);font-weight:600;letter-spacing:0;line-height:1.45;
}
p{text-wrap:pretty;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px;}
button{font-family:inherit;cursor:pointer;}
::selection{background:var(--gold-soft);color:var(--teal-deep);}

/* Visible keyboard focus everywhere; form fields get their own treatment below */
:focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:var(--radius);}

/* ---------- Header ---------- */
header.site{
  position:sticky;top:0;z-index:50;
  background:rgba(250,247,238,.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
  padding-top:env(safe-area-inset-top,0px);
}
/* Row 1: brand + actions. Row 2: the nav, which wraps instead of overflowing
   (English/Kurdish labels are long). Below 920px the nav becomes a drawer. */
.header-row{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  padding:12px 24px 0;max-width:1180px;margin:0 auto;gap:6px 16px;
}
.header-row > *{min-width:0;}
.brand{display:flex;align-items:center;}
.brand-text{display:block;}
.brand-text .t1{font-family:var(--font-head-en);font-size:21px;font-weight:700;color:var(--teal-deep);line-height:1.15;letter-spacing:-.01em;}
body[dir="rtl"] .brand-text .t1{font-family:var(--font-head-ar);font-size:20px;letter-spacing:0;}
.brand-text .t2{font-size:11.5px;color:var(--ink-soft);margin-top:2px;}

nav.primary{
  display:flex;flex-wrap:wrap;gap:0 6px;align-items:center;justify-content:flex-start;
  order:3;flex:1 0 100%;margin-inline-start:-12px;
}
nav.primary a{
  position:relative;padding:10px 12px 12px;font-size:14.5px;font-weight:500;
  color:var(--ink-soft);transition:color .15s ease;
}
nav.primary a::after{
  content:"";position:absolute;inset-inline:12px;bottom:0;height:3px;border-radius:3px 3px 0 0;
  background:var(--gold);transform:scaleX(0);transition:transform .2s ease;
}
nav.primary a:hover{color:var(--teal-deep);}
nav.primary a:hover::after{transform:scaleX(.35);}
nav.primary a.active{color:var(--teal-deep);font-weight:600;}
nav.primary a.active::after{transform:scaleX(1);}

.lang-switch{display:flex;border:1px solid var(--line);border-radius:22px;overflow:hidden;flex-shrink:0;background:var(--card);}
.lang-switch button{
  border:none;background:transparent;padding:0 12px;min-width:40px;height:36px;font-size:12.5px;font-weight:700;
  color:var(--ink-soft);letter-spacing:.3px;transition:background .15s ease,color .15s ease;
}
.lang-switch button:hover{background:var(--teal-tint);color:var(--teal-deep);}
.lang-switch button.on{background:var(--teal);color:#fff;}
.lang-switch button:focus-visible{outline-offset:-3px;border-radius:22px;}

.menu-toggle{
  display:none;background:var(--card);border:1px solid var(--line);border-radius:10px;
  width:44px;height:44px;flex-direction:column;gap:4px;align-items:center;justify-content:center;padding:0;
}
.menu-toggle span{width:20px;height:2px;border-radius:2px;background:var(--teal-deep);}

@media (max-width:920px){
  /* backdrop-filter would turn the header into the containing block of the fixed drawer */
  header.site{backdrop-filter:none;background:var(--paper);}
  .header-row{padding:10px 16px;flex-wrap:nowrap;}
  nav.primary{
    flex:none;order:0;margin:0;justify-content:flex-start;
    position:fixed;inset:0 0 0 auto;top:0;height:100%;width:min(82vw,340px);
    background:var(--paper);flex-direction:column;align-items:stretch;flex-wrap:nowrap;
    padding:84px 20px 24px;gap:0;box-shadow:-12px 0 32px rgba(13,56,48,.2);
    transform:translateX(105%);visibility:hidden;transition:transform .28s ease,visibility .28s;z-index:60;overflow-y:auto;
  }
  body[dir="rtl"] nav.primary{right:auto;left:0;transform:translateX(-105%);box-shadow:12px 0 32px rgba(13,56,48,.2);}
  nav.primary.open, body[dir="rtl"] nav.primary.open{transform:translateX(0);visibility:visible;}
  nav.primary a{padding:15px 4px;font-size:16.5px;border-bottom:1px solid var(--line);}
  nav.primary a::after{display:none;}
  nav.primary a.active{color:var(--teal);}
  .menu-toggle{display:flex;}
}

/* ---------- Hero / Page header ---------- */
.page-hero{
  padding:clamp(40px,6vw,68px) 0 clamp(30px,4.5vw,48px);border-bottom:1px solid var(--line);
  background:
    radial-gradient(ellipse 60% 120% at 92% 0%, var(--teal-tint) 0%, transparent 70%),
    var(--paper);
}
.eyebrow-row{display:flex;align-items:center;gap:8px;color:var(--gold-ink);font-size:14px;font-weight:600;margin-bottom:16px;}
.eyebrow-row svg{width:17px;height:17px;flex-shrink:0;}
.page-hero h1{font-size:clamp(30px,4.4vw,46px);max-width:22ch;}
.page-hero p.lede{margin-top:16px;font-size:clamp(16px,1.6vw,18px);color:var(--ink-soft);max-width:60ch;}

/* ---------- Sections ---------- */
section.block{padding:clamp(36px,5.5vw,64px) 0;}
section.block.alt{background:var(--teal-tint);}
.section-head{margin-bottom:28px;max-width:66ch;}
.section-head h2{font-size:clamp(24px,3vw,32px);}
.section-head p{color:var(--ink-soft);margin:10px 0 0;font-size:16px;}

/* ---------- Home ---------- */
#page-home{background:radial-gradient(ellipse 70% 50rem at 88% 0%, var(--teal-tint) 0%, transparent 65%);}
.home-hero{
  display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,5vw,64px);align-items:center;
  padding-block:clamp(40px,7vw,84px) clamp(36px,6vw,72px);
}
@media(max-width:880px){.home-hero{grid-template-columns:1fr;}}
.home-hero h1{font-size:clamp(34px,5.2vw,58px);line-height:1.1;letter-spacing:-.015em;}
body[dir="rtl"] .home-hero h1{line-height:1.4;}
.home-hero p.lede{font-size:clamp(17px,1.8vw,19px);color:var(--ink-soft);margin:20px 0 0;max-width:50ch;}
.home-cta-row{display:flex;gap:12px;margin-top:32px;flex-wrap:wrap;}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:11px 22px;border-radius:var(--radius);
  font-size:15px;font-weight:600;border:1px solid transparent;line-height:1.3;
  transition:background-color .15s ease,border-color .15s ease,color .15s ease,transform .15s ease,box-shadow .15s ease;
}
.btn:active{transform:scale(.98);}
.btn-primary{background:var(--teal);color:#fff;box-shadow:0 1px 0 rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.08);}
.btn-primary:hover{background:var(--teal-deep);}
.btn-ghost{border-color:var(--teal);color:var(--teal-deep);background:transparent;}
.btn-ghost:hover{background:var(--teal-tint);}
.btn-gold{background:var(--gold);color:#241800;box-shadow:0 1px 0 rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.18);}
.btn-gold:hover{background:#c8963a;}
.btn[disabled]{opacity:.6;cursor:not-allowed;}

.compass-art{width:100%;aspect-ratio:1/1;max-width:400px;justify-self:center;filter:drop-shadow(0 18px 24px rgba(13,56,48,.12));}
@media(max-width:880px){.compass-art{max-width:260px;}}

.pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
@media(max-width:920px){.pillars{grid-template-columns:1fr 1fr;}}
@media(max-width:560px){.pillars{grid-template-columns:1fr;}}
.pillar-card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:24px;display:flex;flex-direction:column;gap:10px;box-shadow:var(--shadow-sm);
  transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease;
}
.pillar-card:hover{border-color:var(--gold);box-shadow:var(--shadow-md);transform:translateY(-3px);}
.pillar-card .icon{width:48px;height:48px;padding:11px;border-radius:12px;background:var(--teal-tint);color:var(--teal);margin-bottom:4px;}
.pillar-card h3{font-size:18px;}
.pillar-card p{font-size:14.5px;color:var(--ink-soft);margin:0;flex:1;}
.pillar-card .go{font-size:14px;font-weight:600;color:var(--gold-ink);display:inline-flex;align-items:center;gap:4px;margin-top:4px;}

.stat-strip{display:flex;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;background:var(--card);box-shadow:var(--shadow-sm);}
.stat-strip > div{flex:1;padding:26px 18px;text-align:center;border-inline-end:1px solid var(--line);}
.stat-strip > div:last-child{border-inline-end:none;}
.stat-strip .num{font-family:var(--font-head-en);font-size:clamp(30px,4vw,40px);line-height:1.1;color:var(--teal);font-weight:600;}
body[dir="rtl"] .stat-strip .num{font-family:var(--font-head-ar);}
.stat-strip .lbl{font-size:13.5px;color:var(--ink-soft);margin-top:6px;}
@media(max-width:560px){
  .stat-strip{flex-direction:column;}
  .stat-strip > div{border-inline-end:none;border-bottom:1px solid var(--line);padding:18px;}
  .stat-strip > div:last-child{border-bottom:none;}
}

/* ---------- Resource list pages ---------- */
.tabs{display:flex;gap:4px;margin-bottom:24px;flex-wrap:wrap;border-bottom:1px solid var(--line);}
.tabs button{
  background:none;border:none;padding:12px 4px;margin-inline-end:22px;font-size:15px;font-weight:600;min-height:44px;
  color:var(--ink-soft);border-bottom:3px solid transparent;margin-bottom:-1px;transition:color .15s ease,border-color .15s ease;
}
.tabs button:hover{color:var(--teal-deep);}
.tabs button.on{color:var(--teal-deep);border-color:var(--gold);}
.tabs button:focus-visible{outline-offset:-2px;}

.res-toolbar{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:20px;flex-wrap:wrap;}
.res-search{
  flex:1;min-width:220px;min-height:46px;padding:10px 18px;border:1px solid var(--line);border-radius:24px;
  font-family:inherit;font-size:15px;background:var(--card);color:var(--ink);transition:border-color .15s ease,box-shadow .15s ease;
}
.res-search:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(20,77,67,.16);}

.res-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));gap:18px;}
.res-card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:20px;display:flex;flex-direction:column;gap:10px;box-shadow:var(--shadow-sm);
  transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease;
}
.res-card:hover{border-color:var(--gold-soft);box-shadow:var(--shadow-md);transform:translateY(-2px);}
.res-card .tag-row{display:flex;gap:8px;align-items:center;}
.tag{
  font-size:11.5px;font-weight:700;letter-spacing:.2px;padding:3px 10px;border-radius:12px;
  background:var(--teal-tint);color:var(--teal-deep);
}
.tag.video{background:#f7e8d8;color:#7d420a;}
.tag.link{background:#e4eef7;color:#134b7a;}
.tag.file{background:#efe6f5;color:#5a2f80;}
.res-card h3{font-size:17px;line-height:1.35;}
body[dir="rtl"] .res-card h3{line-height:1.6;}
.res-card p{font-size:14.5px;color:var(--ink-soft);margin:0;flex:1;}
.res-card .meta{font-size:12.5px;color:var(--ink-soft);}
.res-card .open-link{
  font-size:14px;font-weight:600;color:var(--teal);display:inline-flex;align-items:center;gap:6px;
  padding-top:12px;border-top:1px solid var(--line);margin-top:4px;min-height:44px;
  transition:color .15s ease;
}
.res-card .open-link:hover{color:var(--gold-ink);}
.res-card .open-link svg{width:15px;height:15px;flex-shrink:0;}
.empty-state{padding:44px 20px;text-align:center;color:var(--ink-soft);border:1px dashed var(--line);border-radius:var(--radius-lg);background:rgba(255,255,255,.5);}

/* ---------- Forms ---------- */
.submit-panel{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:clamp(20px,3.5vw,32px);max-width:660px;box-shadow:var(--shadow-sm);
}
.field{margin-bottom:18px;}
.field label{display:block;font-size:14px;font-weight:600;margin-bottom:6px;color:var(--teal-deep);}
/* :not([type=checkbox]):not([type=radio]) — those live inside .choice-row and get their
   own reset below; without this exclusion these rules override it (checkbox/radio are
   <input> elements too, so the plain ".field input" selector matches them by accident). */
.field input:not([type="checkbox"]):not([type="radio"]), .field select, .field textarea{
  width:100%;min-height:46px;padding:10px 13px;border:1px solid #cfc8b1;border-radius:var(--radius);
  font-family:inherit;font-size:15px;background:#fff;color:var(--ink);
  transition:border-color .15s ease,box-shadow .15s ease;
}
.field input::placeholder, .field textarea::placeholder{color:#7b857f;}
.field input:not([type="checkbox"]):not([type="radio"]):hover, .field select:hover, .field textarea:hover{border-color:#a9a289;}
.field input:not([type="checkbox"]):not([type="radio"]):focus, .field select:focus, .field textarea:focus{
  outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(20,77,67,.16);
}
.field textarea{resize:vertical;min-height:96px;}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:0 16px;}
@media(max-width:560px){.field-row{grid-template-columns:1fr;}}
.form-note{font-size:13px;color:var(--ink-soft);margin:4px 0 0;}
.toast{
  margin-top:16px;padding:12px 16px;border-radius:var(--radius);background:var(--teal-tint);
  border-inline-start:4px solid var(--teal);color:var(--teal-deep);font-size:14.5px;display:none;
}
.toast.show{display:block;}

/* ---------- Map page ---------- */
.map-layout{display:grid;grid-template-columns:1fr 310px;gap:22px;align-items:start;}
@media(max-width:900px){.map-layout{grid-template-columns:1fr;}}
.map-panel{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:16px;position:relative;box-shadow:var(--shadow-sm);
}
.map-panel-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;flex-wrap:wrap;gap:8px;}
.map-panel-head h3{font-size:16px;}
.map-panel-head .tag{background:var(--teal);color:#fff;}
.map-svg-wrap{background:radial-gradient(ellipse at 30% 20%, var(--teal-tint), #f7faf8 70%);border-radius:var(--radius);overflow:hidden;position:relative;}
.map-svg-wrap svg{width:100%;height:auto;display:block;touch-action:none;cursor:grab;}
.map-svg-wrap svg.grabbing{cursor:grabbing;}
.zoom-controls{
  position:absolute;top:12px;inset-inline-end:12px;display:flex;flex-direction:column;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  box-shadow:0 2px 10px rgba(13,56,48,.12);
}
.zoom-controls button{
  width:40px;height:40px;border:none;background:var(--card);color:var(--teal-deep);
  font-size:19px;font-weight:700;line-height:1;border-bottom:1px solid var(--line);transition:background .15s ease;
}
.zoom-controls button:last-child{border-bottom:none;font-size:16px;}
.zoom-controls button:hover{background:var(--teal-tint);}
.zoom-controls button:focus-visible{outline-offset:-3px;}
.gov-shape{fill:#cfe3da;stroke:#8fae9f;stroke-width:1.1;transition:fill .15s ease;cursor:pointer;}
.gov-shape:hover{fill:#b9d8c7;}
.gov-shape.has-active{fill:#a9d0bb;}
.gov-label{font-size:9.5px;fill:var(--ink-soft);font-family:var(--font-body-en);pointer-events:none;}
.gov-river{fill:none;stroke:#9fc2d6;stroke-width:2;opacity:.6;}
.city-pin{cursor:pointer;outline:none;}
.city-pin circle{fill:#7f9088;stroke:#fff;stroke-width:1.3;transition:fill .15s ease;}
.city-pin:hover circle,.city-pin:focus-visible circle{fill:var(--teal);}
.city-pin.dim{opacity:.3;}
/* Labels get a paper-coloured halo so they stay legible over the fill and each other */
.city-pin text,.pin-label{paint-order:stroke;stroke:#e6f0ea;stroke-width:2.6px;stroke-linejoin:round;}
.city-pin text{font-size:8.5px;fill:#33413b;pointer-events:none;font-weight:500;}
.pin{cursor:pointer;outline:none;}
.pin circle.halo{fill:#fff;opacity:.95;filter:drop-shadow(0 1px 2px rgba(13,56,48,.35));}
.pin .core{stroke:#fff;stroke-width:2;}
.pin:hover .core{filter:brightness(1.12);}
.pin:focus-visible circle.halo,.city-pin:focus-visible circle{stroke:var(--gold);stroke-width:3;}
.pin.dim{opacity:.28;}
.pin-label{font-size:9px;font-weight:700;pointer-events:none;fill:var(--ink);}

.map-caption{font-size:12.5px;color:var(--ink-soft);margin:12px 0 0;text-align:center;}

.filter-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);padding:20px;box-shadow:var(--shadow-sm);}
.filter-card h3{font-size:16px;margin-bottom:4px;}
.filter-card .sub{font-size:13px;color:var(--ink-soft);margin:0 0 14px;}
.filter-opt{
  display:flex;align-items:center;gap:10px;padding:0;min-height:44px;border-top:1px solid var(--line);cursor:pointer;
}
.filter-opt:first-of-type{border-top:none;}
.filter-opt input{accent-color:var(--teal);width:18px;height:18px;flex-shrink:0;}
.filter-opt .dot{width:11px;height:11px;border-radius:50%;flex-shrink:0;}
.filter-opt span{font-size:14.5px;font-weight:500;}
.clear-btn{width:100%;margin-top:14px;min-height:42px;padding:9px;border:1px solid var(--line);border-radius:var(--radius);background:transparent;font-size:14px;font-weight:600;color:var(--ink-soft);transition:background .15s ease,color .15s ease;}
.clear-btn:hover{background:var(--teal-tint);color:var(--teal-deep);}

.legend{margin-top:18px;padding-top:14px;border-top:1px solid var(--line);}
.legend h4{font-size:13px;color:var(--ink-soft);margin-bottom:8px;font-weight:700;}
.legend-row{display:flex;align-items:center;gap:9px;font-size:13.5px;padding:4px 0;}
.legend-row .dot{width:11px;height:11px;border-radius:50%;flex-shrink:0;}

.detail-card{
  margin-top:16px;background:var(--card);border:1px solid var(--gold-soft);border-radius:var(--radius-lg);
  padding:22px;display:none;box-shadow:var(--shadow-md);
}
.detail-card.show{display:block;animation:cardIn .22s ease-out;}
@keyframes cardIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
.detail-card .close{float:inline-end;background:none;border:none;color:var(--ink-soft);font-size:22px;line-height:1;width:36px;height:36px;margin:-8px -8px 0 0;border-radius:50%;}
body[dir="rtl"] .detail-card .close{margin:-8px 0 0 -8px;}
.detail-card .close:hover{background:var(--teal-tint);color:var(--teal-deep);}
.detail-card h3{font-size:19px;margin-bottom:4px;}
.detail-card .loc{font-size:13.5px;color:var(--gold-ink);font-weight:600;margin-bottom:10px;}
.detail-card p{font-size:15px;color:var(--ink-soft);margin:0;}
.detail-card .tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px;}
.detail-card .open-link{color:var(--teal);font-weight:600;font-size:14px;}
.detail-card .open-link:hover{color:var(--gold-ink);}

/* ---------- Contact ---------- */
.contact-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(24px,4vw,44px);align-items:start;}
@media(max-width:880px){.contact-grid{grid-template-columns:1fr;}}
.info-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);padding:22px;margin-bottom:14px;box-shadow:var(--shadow-sm);}
.info-card h4{font-size:15px;margin-bottom:6px;}
.info-card p{margin:0;}
.info-card p, .info-card a{font-size:15px;color:var(--ink-soft);}
.info-card a{text-decoration:underline;text-decoration-color:var(--gold-soft);text-underline-offset:3px;}
.info-card a:hover{color:var(--teal);}

/* ---------- Footer ---------- */
footer.site{background:var(--teal-deep);color:#e7ece9;padding:clamp(36px,5vw,52px) 0 26px;margin-top:24px;}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px;}
@media(max-width:760px){.footer-grid{grid-template-columns:1fr;}}
footer.site h4{color:#fff;font-size:15px;margin-bottom:12px;}
footer.site p{color:#bccbc5;font-size:14px;max-width:42ch;margin:0;}
footer.site ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;}
footer.site a{color:#d4dfda;font-size:14px;display:inline-block;padding:5px 0;transition:color .15s ease;}
footer.site a:hover{color:#fff;text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:4px;}
footer.site :focus-visible{outline-color:var(--gold-soft);}
/* the divider is drawn as a background so it lines up with the content, not the padded box */
.footer-bottom{
  margin-top:30px;padding-top:18px;font-size:13px;color:#9db1a9;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;
  background:linear-gradient(rgba(255,255,255,.14),rgba(255,255,255,.14)) center top / calc(100% - 48px) 1px no-repeat;
}
@media(max-width:480px){.footer-bottom{background-size:calc(100% - 32px) 1px;}}

.page{display:none;}
.page.active{display:block;}
.skip-link{position:absolute;inset-inline-start:10px;top:0;transform:translateY(-200%);background:#fff;padding:10px 14px;z-index:100;border-radius:0 0 var(--radius) var(--radius);font-weight:600;}
.skip-link:focus{transform:none;}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{transition:none !important;animation:none !important;}
  .pillar-card:hover,.res-card:hover{transform:none;}
}

/* ---------- "Add your NGO" call-to-action ---------- */
.header-cta{padding:8px 16px;min-height:40px;font-size:14px;white-space:nowrap;}
nav.primary a.nav-add{display:none;}
@media (max-width:920px){
  .header-cta{display:none;}
  nav.primary a.nav-add{
    display:flex;justify-content:center;margin-top:18px;border-bottom:none;border-radius:var(--radius);
    background:var(--gold);color:#241800;font-weight:600;
  }
  nav.primary a.nav-add:hover{background:#c8963a;color:#241800;}
}
.cta-band{
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  background:radial-gradient(ellipse 50% 140% at 100% 0%, rgba(184,134,47,.32), transparent 70%), var(--teal-deep);
  color:#fff;border-radius:var(--radius-lg);padding:clamp(24px,4vw,38px) clamp(22px,4vw,42px);
  box-shadow:var(--shadow-md);
}
.cta-band h2{font-size:clamp(22px,2.6vw,28px);color:#fff;}
.cta-band p{margin:8px 0 0;color:#dbe8e3;max-width:56ch;font-size:16px;}
.cta-card{
  background:var(--card);border:1px solid var(--gold);border-radius:var(--radius-lg);
  padding:20px;margin-top:16px;box-shadow:var(--shadow-sm);
}
.cta-card h3{font-size:16px;margin-bottom:4px;}
.cta-card p{font-size:13.5px;color:var(--ink-soft);margin:0 0 14px;}
.cta-card .btn{width:100%;}
.hero-actions{margin-top:24px;}
.form-error{background:#f6dede !important;color:#7a1f1f !important;border-inline-start-color:#a3231f !important;}

/* ---------- Small phones ---------- */
@media (max-width:480px){
  .header-row{padding:10px 12px;gap:6px;}
  .brand{flex:1 1 auto;min-width:0;}
  .brand-text .t1{font-size:17px;}
  body[dir="rtl"] .brand-text .t1{font-size:16.5px;}
  .brand-text .t2{font-size:10.5px;}
  .lang-switch button{padding:0 8px;min-width:36px;font-size:12px;}
  .wrap{padding:0 16px;}
  .home-cta-row .btn{flex:1 1 100%;}
}

/* Map labels are SVG units, so they shrink with the map; bump them on narrow screens */
@media (max-width:600px){
  .city-pin text{font-size:11px;}
  .pin-label{font-size:11.5px;}
}

/* ---------- About page ---------- */
.about-body{max-width:70ch;font-size:16px;color:var(--ink-soft);}
.about-body p{margin:0 0 18px;}
.about-body p:last-child{margin-bottom:0;}
.links-block.links-block{padding-top:clamp(36px,5.5vw,64px);} /* override .block+.alt background already set */
.links-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:14px;}
.link-card{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:16px 18px;font-size:15px;font-weight:600;color:var(--teal-deep);
  box-shadow:var(--shadow-sm);transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease;
}
.link-card:hover{border-color:var(--gold-soft);box-shadow:var(--shadow-md);transform:translateY(-2px);color:var(--teal-deep);}
.link-card svg{width:16px;height:16px;flex-shrink:0;color:var(--gold-ink);}

/* ---------- About: profile ---------- */
.profile-card{
  display:flex;gap:28px;align-items:center;flex-wrap:wrap;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:clamp(20px,3.5vw,32px);box-shadow:var(--shadow-sm);
}
.profile-card .photo{
  width:120px;height:120px;border-radius:50%;flex-shrink:0;object-fit:cover;
  background:var(--teal-tint);border:3px solid var(--paper);box-shadow:0 0 0 1px var(--line);
}
.profile-card .photo.placeholder{display:flex;align-items:center;justify-content:center;color:var(--teal);font-family:var(--font-head-en);font-size:40px;font-weight:600;}
.profile-card .info{flex:1;min-width:220px;}
.profile-card h2{font-size:22px;}
.profile-card .role{font-size:14.5px;font-weight:600;color:var(--gold-ink);margin-top:2px;}
.profile-card .bio{font-size:15px;color:var(--ink-soft);margin-top:12px;max-width:64ch;}
@media(max-width:560px){.profile-card{flex-direction:column;text-align:center;}}

/* ---------- About: contributors & donors ---------- */
.contributors-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr));gap:14px;}
.contributor-card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:16px 18px;box-shadow:var(--shadow-sm);transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease;
}
a.contributor-card:hover{border-color:var(--gold-soft);box-shadow:var(--shadow-md);transform:translateY(-2px);}
.contributor-card .name{font-size:15px;font-weight:700;color:var(--teal-deep);}
.contributor-card .role{font-size:13px;color:var(--ink-soft);margin-top:2px;}

/* ---------- Checkbox / radio choice lists (NGO survey form) ---------- */
.choice-list{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff;}
.choice-row{
  display:flex;align-items:center;gap:10px;padding:11px 14px;font-size:14.5px;font-weight:500;
  cursor:pointer;border-top:1px solid var(--line);
}
.choice-row:first-child{border-top:none;}
.choice-row:hover{background:var(--teal-tint);}
.choice-row input[type="checkbox"], .choice-row input[type="radio"]{
  accent-color:var(--teal);width:17px;height:17px;min-height:0;flex-shrink:0;
  padding:0;border:none;background:none;margin:0;
}
/* The consent checkbox sits alone in a .field, not inside .choice-list */
.field > .choice-row{border-top:none;padding:0;}