/* =============================================================
   Mizani AI Policy — MAP  |  css/custom.css  (loaded after Bootstrap 5.3.8)

   PALETTE
   - Navy  #0A2540  primary: backgrounds, headings, logo text
   - Gold  #C9A227  ACCENT ONLY: thin lines and small highlights
   - White          base, and text on navy
   - Grey  #F3F5F8  tints: section bands, callouts
   Gold is never used for text on white (fails WCAG AA contrast).
   ============================================================= */

/* =============================================================
   MANUAL EDIT GUIDE  |  css/custom.css
   Tags used in the comments of this file (search for them in your editor):
     [COLOUR]    a colour value you can change
     [SIZE]      a size, width or font-size you can change
     [SPACING]   padding, margin or gap you can change
     [FONT]      typeface choice
     [STRUCTURE] layout/behaviour rules: change only if you know what they do
     [USED-BY]   which pages or components rely on the rule below
   The sections are numbered 1 to 16. Page HTML files point here with "css/custom.css, section N".
   ============================================================= */

/* ---------- 1. Tokens + Bootstrap overrides ---------- */
/* [COLOUR] SECTION 1 holds the brand colours. Change a colour HERE once and it updates the whole site.
   Keep the --map-* tokens and the --bs-* Bootstrap overrides in step: --bs-primary and --map-navy are both the navy #0A2540.
   Brand rule: navy = backgrounds, headings, logo text. Gold = thin lines and small highlights ONLY (never gold text on white: it fails the accessibility contrast test). Grey = tints and callouts. */
:root {
  /* [COLOUR] Main navy (brand primary). Used for the hero, page headers, headings, buttons, footer base. */
  --map-navy: #0A2540;
  --map-navy-2: #12365C;
  --map-navy-deep: #071C33;
  /* [COLOUR] Gold accent: thin rules, button underline, active menu underline, card top line. Do not use it for text on white. */
  --map-gold: #C9A227;
  /* [COLOUR] Light grey: alternate section bands, callout boxes, tinted areas. */
  --map-grey: #F3F5F8;
  --map-line: #D8DEE7;
  --map-text: #1F2D3D;
  /* [COLOUR] Secondary text colour (grey-blue). Keep dark enough to stay readable on white. */
  --map-muted: #4A5A6B;
  /* [COLOUR] Soft light text used ON navy backgrounds (lead paragraphs, footer links). */
  --map-on-navy: #D2DCE8;
  /* [SIZE] Soft shadow under raised cards (quick tiles, map card, dropdown). */
  --map-shadow: 0 10px 30px rgba(10, 37, 64, .10);

  /* [STRUCTURE] BOOTSTRAP OVERRIDES below: they re-colour Bootstrap's own components to the brand. If you change the navy above, change --bs-primary and --bs-primary-rgb (the R, G, B numbers) too. */
  --bs-primary: #0A2540; --bs-primary-rgb: 10, 37, 64;
  --bs-secondary: #4A5A6B; --bs-secondary-rgb: 74, 90, 107;
  --bs-warning: #C9A227; --bs-warning-rgb: 201, 162, 39;
  --bs-light: #F3F5F8; --bs-light-rgb: 243, 245, 248;
  --bs-body-color: #1F2D3D; --bs-body-color-rgb: 31, 45, 61; --bs-body-bg: #fff;
  /* [FONT] Body font. Inter is loaded in the <head> of every page (Google Fonts link). To change it, change both. */
  --bs-body-font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --bs-body-line-height: 1.7;
  --bs-heading-color: #0A2540;
  --bs-link-color: #0A2540; --bs-link-color-rgb: 10, 37, 64;
  --bs-link-hover-color: #12365C; --bs-link-hover-color-rgb: 18, 54, 92;
  --bs-border-color: #D8DEE7;
  /* [SIZE] Corner roundness: 10px small elements, 16px large (--bs-border-radius-lg). Cards use 16px directly in section 9. */
  --bs-border-radius: 10px; --bs-border-radius-lg: 16px;
}

/* ---------- 2. Base ---------- */
/* [FONT] [SIZE] SECTION 2: page-wide text. Headings use Montserrat; heading sizes scale with the screen using clamp(smallest, fluid, largest). */
body { -webkit-font-smoothing: antialiased; }
/* [FONT] Heading typeface (Montserrat) and weight. Changing the font name here also needs the Google Fonts link in every page head. */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: "Montserrat", "Inter", system-ui, sans-serif; font-weight: 700; letter-spacing: -.015em; line-height: 1.16;
}
/* [SIZE] Heading sizes: h1 (page titles), h2 (section titles), h3 (card titles). Format: clamp(minimum on phones, fluid size, maximum on large screens). */
h1, .h1 { font-size: clamp(2.1rem, 1.3rem + 3.2vw, 3.6rem); font-weight: 800; }
h2, .h2 { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem); }
h3, .h3 { font-size: 1.2rem; }
/* [SIZE] Keeps paragraph lines to a comfortable reading width (about 68 characters). Some components override this with max-width: none. */
p, li { max-width: 68ch; }
.lead { font-size: 1.15rem; line-height: 1.65; }
.text-muted-map { color: var(--map-muted); }
.placeholder-text { color: var(--map-muted); font-style: italic; }

/* [STRUCTURE] ACCESSIBILITY: the visible outline shown when a keyboard user tabs to a link or button. Do not remove. Navy on light areas, gold on navy areas. */
:focus-visible { outline: 3px solid var(--map-navy); outline-offset: 3px; border-radius: 4px; }
.bg-navy :focus-visible, .site-footer :focus-visible { outline-color: var(--map-gold); }
.btn:focus-visible, .accordion-button:focus { box-shadow: none; }
.skip-link { position: absolute; top: .5rem; left: .5rem; z-index: 2000; background: #fff; color: var(--map-navy); font-weight: 600; padding: .6rem 1rem; border-radius: 8px; border: 2px solid var(--map-navy); text-decoration: none; }

/* ---------- 3. Layout helpers ---------- */
/* [USED-BY] SECTION 3: classes used in every page: bg-navy (blue band), bg-grey (grey band), section (vertical spacing), rule-gold (short gold line under headings), eyebrow (small label above a heading), callout (grey box). */
.bg-navy { background-color: var(--map-navy); color: #fff; }
.bg-navy h1, .bg-navy h2, .bg-navy h3, .bg-navy h4, .bg-navy .h1, .bg-navy .h2 { color: #fff; }
.bg-navy .lead, .bg-navy .on-navy { color: var(--map-on-navy); }
.bg-navy a:not(.btn) { color: #fff; }
.bg-grey { background-color: var(--map-grey); }
/* [SPACING] Vertical space of every content band: 3.5rem on phones, 5.5rem from 768px up (next line). Increase for more white space. */
.section { padding-block: 3.5rem; }
@media (min-width: 768px) { .section { padding-block: 5.5rem; } }
/* [SIZE] [COLOUR] The short gold line under headings (56px wide, 3px thick). It echoes the thin line in the logo. */
.rule-gold { width: 56px; height: 3px; background: var(--map-gold); border: 0; margin: 1.1rem 0 1.6rem; opacity: 1; }
/* [SIZE] Small spaced label above a heading, with a short gold dash before it. */
.eyebrow { display: inline-flex; align-items: center; gap: .6rem; font-size: .8rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--map-muted); margin-bottom: .9rem; }
.eyebrow::before { content: ""; width: 24px; height: 2px; background: var(--map-gold); }
.bg-navy .eyebrow { color: var(--map-on-navy); }
.section-head { margin-bottom: 2.25rem; }
.section-head p { color: var(--map-muted); }
/* [COLOUR] Grey box with a navy left edge. Used for notes, definitions and draft notices. */
.callout { background: var(--map-grey); border-left: 4px solid var(--map-navy); padding: 1.5rem 1.75rem; border-radius: 0 12px 12px 0; }
.callout > :last-child { margin-bottom: 0; }
.callout.on-white { background: #fff; }

/* ---------- 4. Buttons (pill) ---------- */
/* [USED-BY] SECTION 4: all buttons. Classes in the HTML: btn-gold (main call to action), btn-primary (solid navy), btn-outline-primary (navy outline), btn-light and btn-outline-light (on navy backgrounds), btn-form (a button that opens a Google Form: see js/config.js). */
/* [SIZE] [SPACING] Button shape: --bs-btn-border-radius 999px makes them pill-shaped; padding-x/y set their size. btn-sm (next line) is the small version used in the menu. */
.btn { --bs-btn-font-weight: 600; --bs-btn-padding-x: 1.6rem; --bs-btn-padding-y: .7rem; --bs-btn-border-radius: 999px; }
.btn-sm { --bs-btn-padding-x: 1.2rem; --bs-btn-padding-y: .45rem; }
.btn-primary { --bs-btn-bg: #0A2540; --bs-btn-border-color: #0A2540; --bs-btn-color: #fff; --bs-btn-hover-bg: #12365C; --bs-btn-hover-border-color: #12365C; --bs-btn-hover-color: #fff; --bs-btn-active-bg: #12365C; --bs-btn-active-border-color: #12365C; --bs-btn-active-color: #fff; }
.btn-outline-primary { --bs-btn-color: #0A2540; --bs-btn-border-color: #0A2540; --bs-btn-hover-bg: #0A2540; --bs-btn-hover-border-color: #0A2540; --bs-btn-hover-color: #fff; --bs-btn-active-bg: #0A2540; --bs-btn-active-border-color: #0A2540; --bs-btn-active-color: #fff; }
.btn-outline-light { --bs-btn-hover-color: #0A2540; --bs-btn-active-color: #0A2540; }
/* [COLOUR] NOTE: the class is named btn-gold because the brief asked for it, but it is NAVY on white pages and WHITE on blue bands, finished with a thin gold underline (the inset shadow). This keeps gold as a small accent only. */
/* "btn-gold" = main call to action: navy on white pages, white on navy, with a thin gold underline */
.btn-gold { --bs-btn-bg: #0A2540; --bs-btn-color: #fff; --bs-btn-border-color: #0A2540; --bs-btn-hover-bg: #12365C; --bs-btn-hover-color: #fff; --bs-btn-hover-border-color: #12365C; --bs-btn-active-bg: #12365C; --bs-btn-active-color: #fff; --bs-btn-active-border-color: #12365C; box-shadow: inset 0 -3px 0 var(--map-gold); }
.bg-navy .btn-gold, .site-footer .btn-gold { --bs-btn-bg: #fff; --bs-btn-color: #0A2540; --bs-btn-border-color: #fff; --bs-btn-hover-bg: #F3F5F8; --bs-btn-hover-color: #0A2540; --bs-btn-hover-border-color: #F3F5F8; --bs-btn-active-bg: #F3F5F8; --bs-btn-active-color: #0A2540; --bs-btn-active-border-color: #F3F5F8; }
/* [STRUCTURE] Look of a button whose Google Form or link is still a placeholder: faded, with a not-allowed cursor. js/main.js adds this class automatically. Becomes normal once the real link is in js/config.js. */
.is-pending { opacity: .6; cursor: not-allowed; }

/* ---------- 5. Logo (matches the brand logo: navy on white) ---------- */
/* [USED-BY] SECTION 5: the MAP logo is built in HTML + CSS (not an image): MAP in bold, a thin gold line, then MIZANI AI POLICY in spaced capitals. The same 3 spans appear in the navbar and footer of every page. To use an image logo instead, replace the span block in each page. */
.logo { display: inline-flex; flex-direction: column; align-items: stretch; line-height: 1; color: var(--map-navy); text-align: center; }
/* [SIZE] [FONT] Size of the word MAP (2rem). The footer uses the same size. */
.logo-map { font-family: "Montserrat", sans-serif; font-weight: 800; font-size: 2rem; letter-spacing: .01em; }
/* [COLOUR] [SIZE] The thin gold line under MAP (2px). */
.logo-rule { height: 2px; background: var(--map-gold); margin: .22rem 0 .32rem; }
.logo-sub { font-family: "Inter", sans-serif; font-weight: 500; font-size: .5rem; letter-spacing: .26em; padding-left: .26em; }
.site-footer .logo { color: #fff; }

/* ---------- 6. Navbar (white, sticky) ---------- */
/* [USED-BY] SECTION 6: the top menu on every page. White background so the navy logo matches your logo file. Dropdown menus are "Our Work" and "Get Involved". */
/* [COLOUR] [SPACING] Menu bar background (white), bottom line and height (--bs-navbar-padding-y). */
.site-nav { background: #fff; border-bottom: 1px solid var(--map-line); --bs-navbar-padding-y: .55rem; }
.site-nav .navbar-brand { color: var(--map-navy); }
.site-nav .navbar-nav { --bs-nav-link-color: #0A2540; --bs-nav-link-hover-color: #0A2540; --bs-navbar-active-color: #0A2540; }
/* [SIZE] Menu link size (.93rem) and spacing. The gold underline on the current page / hover is drawn by the ::after rule in the next lines. */
.site-nav .nav-link { font-weight: 500; font-size: .93rem; padding: .6rem .75rem; position: relative; }
.site-nav .nav-link.active::after, .site-nav .nav-link:hover::after { content: ""; position: absolute; left: .75rem; right: .75rem; bottom: .25rem; height: 2px; background: var(--map-gold); }
.site-nav .dropdown-toggle::after { border-top-color: currentColor; vertical-align: .15em; }
.site-nav .dropdown-toggle.active::after, .site-nav .dropdown-toggle:hover::after { position: static; height: 0; background: none; }
.site-nav .dropdown-menu { border: 1px solid var(--map-line); border-radius: 14px; box-shadow: var(--map-shadow); padding: .5rem; min-width: 14rem; }
.site-nav .dropdown-item { border-radius: 8px; padding: .55rem .9rem; font-size: .93rem; color: var(--map-navy); }
.site-nav .dropdown-item:hover, .site-nav .dropdown-item:focus { background: var(--map-grey); }
.site-nav .dropdown-item.active, .site-nav .dropdown-item:active { background: var(--map-navy); color: #fff; }
.site-nav .navbar-toggler { border-color: var(--map-navy); }
@media (max-width: 991.98px) { .site-nav .navbar-collapse { padding-bottom: 1rem; } .site-nav .nav-link.active::after, .site-nav .nav-link:hover::after { display: none; } .site-nav .nav-link.active { font-weight: 700; } }

/* ---------- 7. Hero (carousel + map) ---------- */
/* [USED-BY] SECTION 7: the big blue opening area of index.html only (slides on the left, map on the right). */
/* [SPACING] Hero height: padding-block is top and bottom space (3.5rem / 7rem on phones; the next line sets large screens). The big bottom value leaves room for the quick-link tiles that overlap it (section 8). [COLOUR] The faint vertical lines come from the repeating-linear-gradient. */
.hero { position: relative; padding-block: 3.5rem 7rem; overflow: hidden; background: repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 96px), var(--map-navy); }
@media (min-width: 992px) { .hero { padding-block: 5rem 8rem; } }
/* [SIZE] Minimum height of the slide area so the page does not jump when slides change (22rem phones, 26rem large screens). Raise it if you add longer slide text. */
.hero .carousel-item { min-height: 22rem; }
@media (min-width: 992px) { .hero .carousel-item { min-height: 26rem; } }
.hero h1, .hero .h1 { max-width: 16ch; }
.hero .lead { max-width: 48ch; }
.hero-controls { display: flex; align-items: center; gap: .9rem; margin-top: 1.5rem; }
.hero-indicators { display: flex; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.hero-indicators button { width: 34px; height: 4px; border: 0; padding: 0; border-radius: 4px; background: rgba(255,255,255,.4); }
.hero-indicators button.active { background: var(--map-gold); }
.round-btn { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.7); background: transparent; color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.round-btn:hover { background: #fff; color: var(--map-navy); }
/* [STRUCTURE] OBSERVATION: the selector ".light .round-btn" is not used by any page (no element has class "light"); the dark arrows work through ".round-btn.dark". It is harmless and was left untouched. */
.light .round-btn, .round-btn.dark { border-color: var(--map-navy); color: var(--map-navy); }
.round-btn.dark:hover { background: var(--map-navy); color: #fff; }
/* [SIZE] Largest width of the map in the hero (440px). */
.hero-map { max-width: 440px; margin-inline: auto; }
/* [STRUCTURE] TECH/AI BACKGROUND (js/hero-ai.js): a canvas filling the hero, behind all content. pointer-events none keeps buttons and the map clickable. The soft glow below adds depth. Delete the canvas line in index.html to remove the animation. */
.hero-ai { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; display: block; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(60% 70% at 85% 40%, rgba(34,197,94,.10), transparent 70%), radial-gradient(55% 60% at 10% 90%, rgba(18,54,92,.9), transparent 70%); }
.hero > .container { position: relative; z-index: 1; }
/* [SPACING] Phones: tighter hero, smaller buttons row, slimmer slide area so nothing overflows a 360px screen. */
@media (max-width: 575.98px) {
  .hero { padding-block: 2.5rem 6rem; }
  .hero .carousel-item { min-height: 0; }
  .hero .carousel-item .btn-lg { --bs-btn-padding-x: 1.25rem; --bs-btn-padding-y: .6rem; font-size: 1rem; }
  .hero h1, .hero .h1 { max-width: none; }
  .hero-map { max-width: 340px; }
}
.hero-map-caption { text-align: center; color: var(--map-on-navy); font-size: .88rem; margin: .5rem 0 0; max-width: none; }

/* ---------- 8. Quick links (overlap the hero) ---------- */
/* [USED-BY] SECTION 8: the four white tiles under the hero on index.html (MAP Tracker, Events, Take Action, Meet the Team). */
/* [SPACING] The negative margin-top (-4rem) pulls the tiles UP over the hero. If you change the hero's bottom padding (section 7), adjust this too. */
.quick-links { margin-top: -4rem; position: relative; z-index: 3; }
.quick-tile { display: flex; flex-direction: column; gap: .35rem; height: 100%; padding: 1.5rem; background: #fff; border: 1px solid var(--map-line); border-radius: 16px; text-decoration: none; color: var(--map-text); box-shadow: var(--map-shadow); transition: transform .15s ease, border-color .15s ease; }
.quick-tile:hover { transform: translateY(-3px); border-color: var(--map-navy); }
.quick-tile .icon-badge { margin-bottom: .6rem; }
.quick-tile strong { font-family: "Montserrat", sans-serif; color: var(--map-navy); font-size: 1.05rem; }
.quick-tile span.small { color: var(--map-muted); }
.quick-tile .go { margin-top: auto; padding-top: .6rem; color: var(--map-navy); font-weight: 600; font-size: .9rem; }

/* ---------- 9. Cards, icons, slider ---------- */
/* [USED-BY] SECTION 9: card-map (white cards with a thin border), accent-top (short gold line on top of a card), icon-badge (square navy icon), slider (the sliding rows of cards on index.html and about.html). */
/* [SIZE] [COLOUR] Card look: border colour and corner roundness (16px). */
.card-map { border: 1px solid var(--map-line); border-radius: 16px; height: 100%; background: #fff; position: relative; overflow: hidden; }
.card-map .card-body { padding: 1.75rem; }
.card-map.accent-top::before { content: ""; position: absolute; left: 0; top: 0; width: 56px; height: 3px; background: var(--map-gold); }
.card-map.on-grey { border-color: transparent; }
.card-map h3 { margin-bottom: .6rem; }
/* [SIZE] [COLOUR] Navy square with a white icon (52px). Icons are Bootstrap Icons class names such as bi-map in the HTML. */
.icon-badge { width: 52px; height: 52px; display: inline-flex; align-items: center; justify-content: center; background: var(--map-navy); color: #fff; border-radius: 14px; font-size: 1.45rem; margin-bottom: 1.2rem; flex-shrink: 0; }
.slider { position: relative; }
.slider-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.slider-nav { display: flex; gap: .6rem; }
.slider-track { display: flex; gap: 1.5rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: .35rem .25rem 1rem; margin-inline: -.25rem; }
.slider-track::-webkit-scrollbar { display: none; }
/* [SIZE] Card width in the sliders: about 86% of the row on phones (max 330px); the next line sets 3 cards per row on large screens (33.333%). Change 33.333% to 25% for 4 per row. */
.slider-track > * { flex: 0 0 min(86%, 330px); scroll-snap-align: start; }
@media (min-width: 992px) { .slider-track > * { flex-basis: calc(33.333% - 1rem); } }
.slider-track:focus-visible { outline-offset: 0; }

/* ---------- 10. Map ---------- */
/* [USED-BY] SECTION 10: the Africa map on index.html (twice), map-tracker.html and country.html. The map itself is drawn by js/africa-map.js; THIS section only colours it. */
/* Map colours: blue background, soft blue-white land, GREEN dotted pilot countries that blink.
   (Green #22C55E is used here by request, outside the core brand palette.) */
/* [COLOUR] MAP COLOURS are the variables on the next line: --af-land (other countries), --af-stroke (borders between countries), --dot-bg and --dot-fg (background and dots of the pilot pattern), --af-pilot-stroke (pilot outline), --af-label (country names). To change the green everywhere, replace every #22C55E in this section, including the glow in .af-pilot, the focus fill, and the legend swatch. */
.africa-map, .africa-map.af-dark, .africa-map.af-light { --af-land: rgba(255,255,255,.16); --af-stroke: #0A2540; --dot-bg: #12365C; --dot-fg: #22C55E; --af-pilot-stroke: #22C55E; --af-label: #fff; --af-green: #22C55E; }
.af-svg { width: 100%; height: auto; display: block; }
.af-land { fill: var(--af-land); stroke: var(--af-stroke); stroke-width: 1; }
/* [STRUCTURE] PILOT COUNTRIES: stroke width, green glow (drop-shadow) and the BLINK (animation: af-blink 1.6s). To blink faster or slower change 1.6s; to stop blinking delete the animation part. The keyframes just below set the fade (opacity .3 at the dimmest). Dot size/spacing is NOT here: it is the pattern in js/africa-map.js. */
.af-pilot { stroke: var(--af-pilot-stroke); stroke-width: 1.8; stroke-linejoin: round; cursor: pointer; transition: stroke-width .15s; filter: drop-shadow(0 0 6px rgba(34,197,94,.75)); animation: af-blink 1.6s ease-in-out infinite; }
@keyframes af-blink { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
/* [STRUCTURE] Staggers the blink so the five countries do not all pulse together (0.25s apart). Set all to 0s to blink in unison. The order follows the order of the pilot countries on the map. */
.af-link:nth-child(2) .af-pilot { animation-delay: .25s; } .af-link:nth-child(3) .af-pilot { animation-delay: .5s; } .af-link:nth-child(4) .af-pilot { animation-delay: .75s; } .af-link:nth-child(5) .af-pilot { animation-delay: 1s; }
.af-dot-bg { fill: var(--dot-bg); } .af-dot-fg { fill: var(--dot-fg); }
.af-link:hover .af-pilot, .af-link:focus-visible .af-pilot { animation: none; opacity: 1; }
.af-link:hover .af-pilot { stroke: #fff; stroke-width: 3.5; }
.af-link:focus { outline: none; }
.af-link:focus-visible .af-pilot { fill: var(--af-green); stroke: #fff; stroke-width: 4; }
.af-leader { stroke: var(--af-label); stroke-width: 1.4; fill: none; }
/* [SIZE] [FONT] Country name labels on the map. Size is in map units (21), not pixels: it scales with the map. Label positions are set in js/africa-map.js (LABELS). */
.af-label { font-family: "Montserrat", sans-serif; font-weight: 700; font-size: 21px; fill: var(--af-label); cursor: pointer; }
.af-link:hover .af-label { text-decoration: underline; }
/* [STRUCTURE] The small key under the map ("Pilot country" / "Not yet covered"). Hidden on the home hero map. */
.af-legend { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; justify-content: center; font-size: .9rem; color: var(--map-on-navy); margin-top: .75rem; }
.af-legend > span { display: inline-flex; align-items: center; gap: .5rem; }
.af-swatch { width: 20px; height: 20px; border-radius: 4px; border: 1.5px solid #22C55E; display: inline-block; }
.af-swatch-pilot { background: radial-gradient(circle, #22C55E 1.5px, transparent 1.7px) 0 0 / 6px 6px, #12365C; }
.af-swatch-land { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.16); }
/* [USED-BY] The row of white-outline country buttons under the maps (also a keyboard and phone friendly way to open a country profile). Built by js/africa-map.js. */
.chip-list { list-style: none; padding: 0; margin: 1rem 0 0; display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }
.chip-list li { max-width: none; }
.chip-list a { display: inline-block; border: 1.5px solid #fff; color: #fff; background: transparent; padding: .35rem 1rem; border-radius: 999px; font-weight: 600; font-size: .92rem; text-decoration: none; }
.chip-list a:hover { background: #fff; color: var(--map-navy); }
.map-card :focus-visible { outline-color: var(--map-gold); }
/* [COLOUR] The BLUE panel the map sits on in page bodies (navy). Change background here to recolour the panel. */
.map-card { background: var(--map-navy); border: 1px solid var(--map-navy-2); border-radius: 20px; padding: 1.5rem; box-shadow: var(--map-shadow); }

/* ---------- 11. Page header (inner pages) ---------- */
/* [USED-BY] SECTION 11: the blue banner with breadcrumb, title and one-line summary at the top of every page except the home page. */
/* [SPACING] [COLOUR] Banner height (top 2.5rem, bottom 3.75rem) and its navy background with faint vertical lines. */
.page-header { padding-block: 2.5rem 3.75rem; background: repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 96px), var(--map-navy); }
.page-header .breadcrumb { --bs-breadcrumb-divider-color: rgba(255,255,255,.6); --bs-breadcrumb-item-active-color: var(--map-on-navy); font-size: .88rem; margin-bottom: 1.5rem; }
.page-header .breadcrumb a { text-decoration: none; } .page-header .breadcrumb a:hover { text-decoration: underline; }
.page-header .lead { max-width: 56ch; margin-bottom: 0; }

/* ---------- 12. Team, events, actions ---------- */
/* [USED-BY] SECTION 12: team.html (team-card, avatar), events.html (event-card, event-date, event-meta), actions.html (action-card), pill (small status tag on research.html), check-list (ticked lists on get-involved.html and map-tracker.html). */
.team-card { text-align: center; }
.team-card .card-body { padding: 2rem 1.5rem; }
/* [SIZE] TEAM PHOTO CIRCLE: 112px by default. It holds a placeholder person icon. When you add a real photo, use an img tag with class rounded-circle and the same width/height (see the comments in team.html). The founder's larger photo sets its size inline in team.html. */
.avatar { width: 112px; height: 112px; border-radius: 50%; background: var(--map-grey); border: 3px solid #fff; box-shadow: 0 0 0 2px var(--map-line); display: flex; align-items: center; justify-content: center; margin: 0 auto 1.25rem; font-size: 3rem; color: var(--map-muted); }
/* [SIZE] TEAM PHOTOS: the real photos on team.html (class team-photo). 140px circle, cropped to fill (object-fit: cover). The part of the photo that stays visible is set per photo with object-position in the HTML (see the comment in team.html). Change 140px here (and the width/height attributes in the HTML) for bigger or smaller photos. */
.team-photo { display: block; width: 140px; height: 140px; border-radius: 50%; object-fit: cover; margin: 0 auto 1.25rem; border: 3px solid #fff; box-shadow: 0 0 0 2px var(--map-line); background: var(--map-grey); }
.team-card .role { color: var(--map-muted); font-size: .92rem; margin-bottom: .75rem; }
.event-card .card-body { display: flex; gap: 1.25rem; }
/* [SIZE] [COLOUR] The navy date box on an event card (76 x 84px) with a gold bottom line. Keep the date text short (for example 12 Nov). */
.event-date { flex: 0 0 76px; height: 84px; border-radius: 14px; background: var(--map-navy); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: "Montserrat", sans-serif; font-weight: 700; line-height: 1.1; text-align: center; font-size: .8rem; padding: .25rem; border-bottom: 3px solid var(--map-gold); }
.event-meta { list-style: none; padding: 0; margin: .5rem 0 1rem; color: var(--map-muted); font-size: .92rem; }
.event-meta li { max-width: none; display: flex; gap: .5rem; align-items: center; }
.action-card .card-body { display: flex; flex-direction: column; }
.action-card .btn { margin-top: auto; align-self: flex-start; }
.pill { display: inline-block; border: 1px solid var(--map-navy); color: var(--map-navy); background: #fff; border-radius: 999px; font-size: .78rem; font-weight: 600; padding: .1rem .7rem; }
.check-list { list-style: none; padding: 0; margin: 0; }
.check-list li { display: flex; gap: .85rem; margin-bottom: .85rem; max-width: none; }
.check-list i { font-size: 1.15rem; line-height: 1.5; color: var(--map-navy); }
.bg-navy .check-list i { color: #fff; }

/* ---------- 13. Accordion ---------- */
/* [USED-BY] SECTION 13: the open/close question panels on map-tracker.html (Methodology and FAQ). */
.accordion { --bs-accordion-btn-color: #0A2540; --bs-accordion-active-color: #0A2540; --bs-accordion-active-bg: #F3F5F8; --bs-accordion-border-color: #D8DEE7; --bs-accordion-btn-focus-box-shadow: none; --bs-accordion-border-radius: 14px; --bs-accordion-inner-border-radius: 13px; }
.accordion-button { font-family: "Montserrat", sans-serif; font-weight: 600; }
.accordion-button:focus-visible { outline: 3px solid var(--map-navy); outline-offset: -3px; }

/* ---------- 14. Contact, newsletter, prose ---------- */
/* [USED-BY] SECTION 14: contact-list (contact.html and index.html), newsletter (the grey Stay informed strip), prose (text of the three policy pages). */
.contact-list { list-style: none; padding: 0; margin: 0; }
.contact-list li { display: flex; gap: 1rem; align-items: flex-start; padding: .9rem 0; border-top: 1px solid var(--map-line); max-width: none; }
.contact-list li:last-child { border-bottom: 1px solid var(--map-line); }
.contact-list i { font-size: 1.25rem; color: var(--map-navy); margin-top: .1rem; }
/* [COLOUR] [SPACING] The grey "Stay informed" strip above the footer. */
.newsletter { background: var(--map-grey); border-block: 1px solid var(--map-line); padding-block: 2.75rem; }
.newsletter .gold-bar { border-left: 3px solid var(--map-gold); padding-left: 1.25rem; }
.prose h2 { font-size: 1.35rem; margin-top: 2.5rem; } .prose h2:first-of-type { margin-top: 0; }

/* ---------- 15. Footer ---------- */
/* [USED-BY] SECTION 15: the footer on every page. */
/* [COLOUR] Footer background: the deepest navy (--map-navy-deep, #071C33), a little darker than the main navy. Change the token in section 1 to recolour it. */
.site-footer { background: var(--map-navy-deep); color: #fff; }
.site-footer h2 { font-size: .95rem; margin-bottom: 1rem; color: #fff; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: .55rem; }
.site-footer a:not(.btn) { text-decoration: none; color: var(--map-on-navy); }
.site-footer a:not(.btn):hover { color: #fff; text-decoration: underline; }
.site-footer .muted { color: var(--map-on-navy); }
.site-footer .footer-bottom { border-top: 1px solid rgba(255,255,255,.16); color: var(--map-on-navy); font-size: .9rem; }
.social-link { display: inline-flex; align-items: center; gap: .5rem; }

/* ---------- 16. Back to top, cookie notice, motion ---------- */
/* [USED-BY] SECTION 16: the round back-to-top button and the cookie notice bar (same on every page; behaviour is in js/main.js). The last rule switches OFF all animation (including the map blink) for visitors who ask their device for reduced motion: this is an accessibility feature, keep it. */
.back-to-top { position: fixed; right: 1rem; bottom: 1rem; z-index: 1040; width: 46px; height: 46px; display: none; align-items: center; justify-content: center; background: var(--map-navy); color: #fff; border: 0; border-bottom: 3px solid var(--map-gold); border-radius: 12px; font-size: 1.2rem; box-shadow: 0 4px 14px rgba(10,37,64,.3); }
.back-to-top.show { display: inline-flex; }
.cookie-notice { position: fixed; inset: auto 0 0 0; z-index: 1080; background: var(--map-navy); color: #fff; padding: 1rem; border-top: 3px solid var(--map-gold); }
.cookie-notice[hidden] { display: none; }
.cookie-notice a { color: #fff; }
/* ---------- 17. Partner logos (scrolling row on the home page) ---------- */
/* [USED-BY] SECTION 17: the "Our partners" row on index.html. The list slides left forever; hovering or touching pauses it. [SIZE] Logo height: 64px (52px on phones). [SPEED] Speed: set in js/main.js (initPartnerMarquee), the number 45 = pixels per second; a smaller number scrolls slower. The script adds hidden copies of the logos and moves the row exactly one list-width, which makes the loop seamless. */
.partners { border-top: 1px solid var(--map-line); padding-block: 3rem; }
.partner-marquee { overflow: hidden; position: relative; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.partner-track { display: flex; align-items: center; width: max-content; list-style: none; margin: 0; padding: 0; }
.partner-track.is-running { animation: partner-scroll 40s linear infinite; }
.partner-track li { max-width: none; flex: 0 0 auto; padding-inline: 1.75rem; display: flex; align-items: center; }
.partner-track img { height: 64px; width: auto; display: block; object-fit: contain; }
.partner-marquee:hover .partner-track, .partner-marquee:focus-within .partner-track { animation-play-state: paused; }
@keyframes partner-scroll { from { transform: translateX(0); } to { transform: translateX(var(--partner-shift, -50%)); } }
@media (max-width: 575.98px) { .partner-track li { padding-inline: 1.1rem; } .partner-track img { height: 52px; } }
/* [STRUCTURE] Reduced motion: no scrolling. The logos wrap in a centred row and the copy set is hidden. */
@media (prefers-reduced-motion: reduce) { .partner-marquee { -webkit-mask-image: none; mask-image: none; } .partner-track { width: auto; flex-wrap: wrap; justify-content: center; row-gap: 1rem; } .partner-track li[aria-hidden="true"] { display: none; } }

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