/* Jordan in Numbers — provisional tokens from logo_vector.svg until the official palette is confirmed. */
@font-face { font-family: "Inter"; src: url("../fonts/inter-400.woff2") format("woff2"); font-weight: 400; font-display: optional; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-600.woff2") format("woff2"); font-weight: 600; font-display: optional; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-700.woff2") format("woff2"); font-weight: 700; font-display: optional; }
@font-face { font-family: "IBM Plex Sans Arabic"; src: url("../fonts/plex-arabic-400.woff2") format("woff2"); font-weight: 400; font-display: optional; }
@font-face { font-family: "IBM Plex Sans Arabic"; src: url("../fonts/plex-arabic-600.woff2") format("woff2"); font-weight: 600; font-display: optional; }
@font-face { font-family: "IBM Plex Sans Arabic"; src: url("../fonts/plex-arabic-700.woff2") format("woff2"); font-weight: 700; font-display: optional; }

:root {
    --navy: #183672;
    --blue: #3D81D0;
    --blue-light: #4A90D9;
    --ink: #172234;
    --slate: #556275;   /* ≥4.5:1 on --cloud */
    --link: #2766B0;    /* brand blue darkened for text/buttons: ≥4.5:1 on white */
    --cloud: #F5F8FC;
    --white: #FFFFFF;
    --line: #DCE3EE;
    --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;
    --radius: 10px;
    --font: "Inter", "IBM Plex Sans Arabic", system-ui, sans-serif;
}
:root:lang(ar) { --font: "IBM Plex Sans Arabic", "Inter", system-ui, sans-serif; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    font-family: var(--font);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--ink);
    background: var(--white);
}
h1, h2, h3 { line-height: 1.2; color: var(--navy); margin: 0 0 var(--s4); }
h1 { font-size: clamp(1.9rem, 4vw, 2.8rem); font-weight: 700; }
h2 { font-size: 1.4rem; font-weight: 600; margin-top: var(--s7); }
h3 { font-size: 1.05rem; font-weight: 600; }
a { color: var(--link); }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--blue-light); outline-offset: 2px; }

.wrap { max-width: 1160px; margin-inline: auto; padding-inline: var(--s4); }
.skip { position: absolute; inset-inline-start: -999px; }
.skip:focus { inset-inline-start: var(--s4); top: var(--s2); background: var(--white); padding: var(--s2); z-index: 10; }

/* Header */
.site-header { border-bottom: 1px solid var(--line); background: var(--white); }
.header-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s5); padding-block: var(--s4); }
.wordmark { font-weight: 700; font-size: 1.15rem; color: var(--navy); text-decoration: none; }
.nav { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); list-style: none; margin: 0; padding: 0; }
.nav a { color: var(--ink); text-decoration: none; font-size: .95rem; }
.nav a:hover { color: var(--link); }
.lang-switch { margin-inline-start: auto; font-weight: 600; color: var(--link); text-decoration: none; padding: var(--s1) var(--s3); border: 1px solid var(--line); border-radius: 999px; }

/* Hero */
.hero { padding-block: var(--s7) var(--s5); }
.lead { font-size: 1.15rem; color: var(--slate); max-width: 60ch; }

/* KPI cards */
.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--s4); padding: 0; list-style: none; }
.kpi { background: var(--cloud); border-radius: var(--radius); padding: var(--s5); display: flex; flex-direction: column; gap: var(--s1); }
.kpi-title { font-size: .95rem; color: var(--slate); margin: 0; }
.kpi-value { font-size: 1.8rem; font-weight: 700; color: var(--navy); font-variant-numeric: tabular-nums; }
.kpi-unit { font-size: .85rem; color: var(--slate); }
.kpi-meta { font-size: .8rem; color: var(--slate); margin-top: auto; }

.badge { display: inline-block; font-size: .72rem; font-weight: 600; padding: 2px var(--s2); border-radius: 999px;
         border: 1px dashed var(--slate); color: var(--slate); width: fit-content; }
.untranslated { font-size: .7rem; color: var(--slate); border: 1px solid var(--line); padding: 0 var(--s1); border-radius: 4px; }

/* Topic tiles */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--s4); list-style: none; padding: 0; }
.tile { display: block; height: 100%; padding: var(--s5); border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; color: var(--ink); }
.tile:hover { border-color: var(--blue); }
.tile h3 { margin-bottom: var(--s2); }
.tile p { margin: 0; color: var(--slate); font-size: .92rem; }

/* Charts */
.chart { margin: var(--s5) 0; padding: var(--s4); border: 1px solid var(--line); border-radius: var(--radius); }
.chart figcaption { margin-bottom: var(--s3); }
.chart-title { font-weight: 600; color: var(--navy); display: block; }
.chart-meta { font-size: .82rem; color: var(--slate); }
.chart-canvas { width: 100%; height: 320px; }
.chart details { margin-top: var(--s3); font-size: .9rem; }
.chart summary { cursor: pointer; color: var(--link); }
.data-table { border-collapse: collapse; margin-top: var(--s2); font-variant-numeric: tabular-nums; }
.data-table th, .data-table td { padding: var(--s1) var(--s3); border-bottom: 1px solid var(--line); text-align: start; }
.table-scroll { max-height: 320px; overflow: auto; }

.source-note { font-size: .88rem; color: var(--slate); border-top: 1px solid var(--line); margin-top: var(--s7); padding-top: var(--s4); }

/* Footer */
.site-footer { margin-top: var(--s7); background: var(--navy); color: #E6ECF7; padding-block: var(--s6); font-size: .9rem; }
.site-footer p { margin: 0 0 var(--s2); max-width: 80ch; }
.site-footer .initiative { margin-top: var(--s4); font-weight: 600; }

.error-page { padding-block: var(--s7); }

@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Search and explorer */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.site-search input { padding: var(--s1) var(--s3); border: 1px solid var(--line); border-radius: 999px; font: inherit; width: 180px; }
.hero-search { display: flex; gap: var(--s2); max-width: 640px; margin-top: var(--s5); }
.hero-search input { flex: 1; font: inherit; font-size: 1.05rem; padding: var(--s3) var(--s4); border: 2px solid var(--link); border-radius: var(--radius); }
button, .button { font: inherit; font-weight: 600; background: var(--link); color: var(--white); border: 0; border-radius: var(--radius);
                  padding: var(--s2) var(--s4); cursor: pointer; text-decoration: none; display: inline-block; }
button:hover, .button:hover { background: var(--navy); }
.hero-compact { padding-block: var(--s6) var(--s4); }
.filters { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: flex-end; background: var(--cloud); padding: var(--s4); border-radius: var(--radius); }
.filters label { display: flex; flex-direction: column; gap: var(--s1); font-size: .85rem; color: var(--slate); }
.filters input, .filters select { font: inherit; padding: var(--s2); border: 1px solid var(--line); border-radius: 6px; background: var(--white); color: var(--ink); }
.filter-q { flex: 1 1 260px; }
.result-count { color: var(--slate); font-size: .9rem; }
.results { list-style: none; padding: 0; margin: 0; }
.result { display: grid; grid-template-columns: 1fr auto; gap: var(--s1) var(--s4); padding: var(--s4) 0; border-bottom: 1px solid var(--line); }
.result-title { font-weight: 600; text-decoration: none; }
.result-meta { grid-column: 1; font-size: .85rem; color: var(--slate); }
.result-value { grid-column: 2; grid-row: 1 / span 2; font-weight: 700; color: var(--navy); font-variant-numeric: tabular-nums; text-align: end; }
.result-value small { display: block; font-weight: 400; color: var(--slate); }
.empty { padding: var(--s6) 0; }
.empty a { margin-inline-end: var(--s3); }
.pager { display: flex; gap: var(--s4); justify-content: center; padding: var(--s5) 0; }
.crumbs { padding-top: var(--s4); font-size: .9rem; }
.meta, .note { color: var(--slate); font-size: .9rem; }
.actions { display: flex; flex-wrap: wrap; gap: var(--s3); }
.kpis-single { grid-template-columns: minmax(220px, 360px); }
@media (max-width: 720px) { .site-search { order: 3; width: 100%; } .site-search input { width: 100%; } }

/* Governorate map */
.map-controls { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: flex-end; background: var(--cloud); padding: var(--s4); border-radius: var(--radius); }
.map-controls label { display: flex; flex-direction: column; gap: var(--s1); font-size: .85rem; color: var(--slate); }
.map-controls select { font: inherit; padding: var(--s2); border: 1px solid var(--line); border-radius: 6px; background: var(--white); color: var(--ink); max-width: 100%; }
.map-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(220px, 1fr); gap: var(--s5); align-items: start; margin-top: var(--s5); }
@media (max-width: 760px) { .map-layout { grid-template-columns: 1fr; } }
.map svg { width: 100%; height: auto; max-height: 78vh; display: block; }
.map path { stroke: var(--white); stroke-width: 1.5; transition: opacity .15s; }
.map a:hover path, .map a:focus-visible path { opacity: .8; stroke: var(--ink); stroke-width: 2.5; }
.map a:focus-visible { outline: none; }
.q1 { fill: #E8F0FA; background: #E8F0FA; }
.q2 { fill: #B9D2F0; background: #B9D2F0; }
.q3 { fill: #7FAEE3; background: #7FAEE3; }
.q4 { fill: #3D81D0; background: #3D81D0; }
.q5 { fill: #183672; background: #183672; }
path.nodata { fill: url(#hatch); }
.hatch-bg { fill: #F5F8FC; }
.hatch-line { stroke: #B6C2D4; stroke-width: 2; }
.map path.sel { stroke: #172234; stroke-width: 3; }
.legend ul { list-style: none; padding: 0; margin: var(--s3) 0; }
.legend li { display: flex; align-items: center; gap: var(--s2); font-size: .9rem; font-variant-numeric: tabular-nums; padding: 2px 0; }
.swatch { width: 18px; height: 14px; border: 1px solid var(--line); border-radius: 3px; flex: none; }
.swatch.nodata { background: repeating-linear-gradient(45deg, #F5F8FC 0 3px, #B6C2D4 3px 5px); }
.legend-title { margin-top: 0; font-size: 1.1rem; }
.legend-year { color: var(--slate); font-weight: 400; }
.legend-unit, .legend-source { color: var(--slate); font-size: .88rem; }
.ranking { margin-top: var(--s6); width: 100%; max-width: 560px; }
.ranking caption { text-align: start; font-weight: 600; padding-bottom: var(--s2); }
.gov-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--s4); }
.gov-card { border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s4); }
.gov-card h2 { font-size: 1rem; margin: 0 0 var(--s2); }
.gov-card.highlight { border-color: var(--blue); box-shadow: 0 0 0 2px var(--blue-light); }
.link-list { columns: 2 240px; padding-inline-start: var(--s5); }

/* Discover */
.facts { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--s4); }
.fact { border-inline-start: 4px solid var(--blue); background: var(--cloud); padding: var(--s4) var(--s5); border-radius: 0 var(--radius) var(--radius) 0; }
.fact-text { font-size: 1.05rem; color: var(--ink); margin: 0 0 var(--s2); }
.fact-source { font-size: .82rem; color: var(--slate); margin: 0; }
.story { max-width: 820px; }
.story-text { font-size: 1.08rem; }
.story-map { margin: var(--s5) 0; padding: var(--s4); border: 1px solid var(--line); border-radius: var(--radius); }
.story-map .map svg { max-height: 60vh; }
.caveat { margin-top: var(--s6); background: #FFF8E6; border: 1px solid #F0D58C; border-radius: var(--radius); padding: var(--s4) var(--s5); }
.caveat h2 { margin: 0 0 var(--s2); font-size: 1rem; color: var(--ink); }

/* About / Sources */
.prose { max-width: 760px; }
.prose h2 { margin-top: var(--s6); }
.source-block { border-top: 1px solid var(--line); padding: var(--s4) 0; }
.source-block h2 { margin: 0 0 var(--s2); font-size: 1.15rem; }
.source-block .licence { font-size: .9rem; color: var(--slate); }
.site-footer a { color: var(--white); text-decoration: underline; }