/* ============================================================
   SACR — South Africans for Constitutional Reform
   Shared stylesheet. Edit colours/spacing via :root tokens.
   ============================================================ */

/* ---------- Design tokens ---------- */
:root {
  /* Green civic-movement palette — green (#087a3d) primary action +
     deep navy authority on a light-grey/white base. Token NAMES are kept
     (gold = primary green action; green = civic accent) so all existing
     rules inherit the scheme. Yellow/red are sparing accents only. */
  --black:       #071a33;  /* navy ink — strongest headings */
  --bg:          #f8fafc;  /* light grey — section backgrounds */
  --bg-alt:      #ffffff;  /* white — cards, forms, content */
  --text:        #1f2933;  /* charcoal body text */
  --text-soft:   #52606d;  /* grey-600 muted text */
  --text-light:  #ffffff;
  --line:        #d9e1ea;  /* grey-200 border */

  --navy:        #071a33;  /* deep navy — header text, hero overlay, footer */
  --navy-2:      #123866;  /* navy-800 — accents & selected links */
  --navy-deep:   #04101f;  /* darkest navy — footer base */

  --green:       #087a3d;  /* civic green — icons, accents */
  --green-2:     #e8f7ee;  /* green-100 tint — pills/badges */
  --green-dark:  #0f9d58;  /* green-600 — hover (brighter) */

  --gold:        #087a3d;  /* PRIMARY action — civic green (buttons, highlights) */
  --gold-2:      #e8f7ee;  /* green tint */
  --gold-dark:   #0f9d58;  /* primary hover (brighter green) */

  --accent:      #123866;  /* navy accent for gradients */
  --yellow:      #f4c430;  /* sparing highlight */
  --red:         #c62828;  /* errors / urgent campaign labels only */

  --maxw:        1200px;
  --gap:         24px;
  --section-y:   80px;

  --radius:      16px;
  --radius-sm:   10px;
  --shadow:      0 18px 45px rgba(15, 23, 42, 0.10);
  --shadow-sm:   0 8px 22px rgba(15, 23, 42, 0.06);

  --font: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
          Roboto, Helvetica, Arial, sans-serif;
  --font-serif: "Playfair Display", Georgia, "Times New Roman", serif;
}

/* ---------- Reset / base ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--green-dark); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 .5em; color: var(--navy); }
p { margin: 0 0 1em; }
ul { margin: 0; padding: 0; }

/* ---------- Layout helpers ---------- */
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.section { padding: var(--section-y) 0; }
.section-sm { padding: 40px 0; }
.bg-white { background: var(--bg-alt); }
.bg-light { background: var(--bg); }
.text-center { text-align: center; }
.lead { font-size: 1.1rem; color: var(--text-soft); }
.muted { color: var(--text-soft); }

.section-title {
  font-size: 1.7rem;
  font-weight: 800;
  text-transform: none;
  letter-spacing: -.2px;
  position: relative;
  padding-bottom: 16px;
  margin-bottom: 30px;
  border-bottom: 1px solid var(--line);
}
.section-title::after {
  content: "";
  position: absolute;
  left: 0; bottom: -1px;
  width: 48px; height: 3px;
  background: var(--gold);
  border-radius: 2px;
}
.text-center .section-title { border-bottom: 0; padding-bottom: 0; }
.text-center .section-title::after { left: 50%; transform: translateX(-50%); bottom: -10px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  padding: 13px 26px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: .3px;
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform .12s ease, background .15s ease, color .15s ease;
  text-align: center;
  text-decoration: none;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn-gold { background: var(--gold); color: #fff; }
.btn-gold:hover { background: var(--gold-dark); }
.btn-outline { background: transparent; color: #fff; border-color: rgba(255,255,255,.7); }
.btn-outline:hover { background: rgba(255,255,255,.12); }
.btn-outline-navy { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn-outline-navy:hover { background: var(--navy); color: #fff; }
.btn-green { background: var(--green); color: #fff; }
.btn-green:hover { background: var(--green-dark); }
.btn-sm { padding: 9px 18px; font-size: .85rem; }

/* ============================================================
   HEADER  (keep markup identical across all pages)
   ============================================================ */
.site-header { background: rgba(255,255,255,.96); -webkit-backdrop-filter: saturate(180%) blur(6px); backdrop-filter: saturate(180%) blur(6px); color: var(--text); position: sticky; top: 0; z-index: 50; border-bottom: 1px solid var(--line); box-shadow: 0 1px 6px rgba(3,23,41,.05); }
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; padding: 14px 24px; max-width: var(--maxw); margin: 0 auto;
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand:hover { text-decoration: none; }
.brand .logo { width: auto; height: 72px; flex: none; }
.brand-text .brand-name {
  font-size: 1.7rem; font-weight: 800; color: var(--navy); line-height: 1; letter-spacing: 1px;
}
.brand-text .brand-sub {
  font-size: .58rem; letter-spacing: .8px; color: var(--text-soft); text-transform: uppercase;
  font-weight: 600; margin-top: 2px;
}
.brand-text .brand-tag { font-size: .6rem; color: var(--gold-dark); margin-top: 3px; font-style: italic; }

/* primary nav */
.main-nav { display: flex; align-items: center; gap: 4px; }
.main-nav > ul { display: flex; align-items: center; list-style: none; gap: 4px; }
.main-nav a {
  color: var(--navy); font-weight: 600; font-size: .92rem; padding: 10px 12px;
  border-radius: 6px; display: inline-block;
}
.main-nav a:hover { color: var(--green-dark); background: var(--bg); text-decoration: none; }
.main-nav a.active { color: var(--navy); }
.main-nav a.active { border-bottom: 3px solid var(--gold); border-radius: 0; }

/* dropdown */
.has-dropdown { position: relative; }
.has-dropdown > a::after { content: " ▾"; font-size: .7em; }
.dropdown {
  position: absolute; top: 100%; left: 0; min-width: 250px;
  background: #fff; border-radius: var(--radius-sm); box-shadow: var(--shadow);
  list-style: none; padding: 8px; display: none; z-index: 60;
}
.has-dropdown.open .dropdown, .has-dropdown:hover .dropdown { display: block; }
.dropdown a { color: var(--text); font-weight: 500; padding: 9px 12px; border-radius: 5px; display: block; }
.dropdown a:hover { background: var(--bg); color: var(--navy); }

/* header actions */
.header-actions { display: flex; align-items: center; gap: 10px; }

/* mobile toggle */
.nav-toggle {
  display: none; background: none; border: 0; color: var(--navy); cursor: pointer;
  padding: 8px; font-size: 1.5rem; line-height: 1;
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative; color: #fff;
  background:
    linear-gradient(120deg, rgba(7,26,51,.94) 0%, rgba(11,36,71,.80) 55%, rgba(8,122,61,.55) 100%),
    linear-gradient(135deg, #0b2447, #071a33);
  overflow: hidden;
}
.hero-inner {
  max-width: var(--maxw); margin: 0 auto; padding: 80px 24px 96px;
  max-width: 760px; margin-left: max(24px, calc((100% - var(--maxw)) / 2));
}
.hero h1 {
  color: #fff; font-family: var(--font-serif); font-size: 3rem; line-height: 1.04;
  letter-spacing: -.5px; font-weight: 800; margin-bottom: 18px;
}
.hero h1 .accent { color: var(--green-dark); }
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 8px; background: rgba(15,157,88,.22);
  color: #cdebd8; padding: 7px 14px; border-radius: 999px; font-weight: 700;
  font-size: .8rem; letter-spacing: .3px; margin-bottom: 18px;
}
.hero p { font-size: 1.12rem; color: #e6ecf3; max-width: 600px; margin-bottom: 28px; }
.hero-buttons { display: flex; flex-wrap: wrap; gap: 14px; }
.hero-badge {
  position: absolute; right: 6%; bottom: 18%; background: #f3f4f0; color: var(--navy);
  padding: 18px 22px; font-weight: 800; line-height: 1.15; transform: rotate(-4deg);
  box-shadow: var(--shadow); font-size: 1.05rem; max-width: 220px; display: none;
}
@media (min-width: 1000px) { .hero-badge { display: block; } }

/* ---------- Stats strip ---------- */
.stats-strip {
  background: #fff; box-shadow: var(--shadow); border-radius: var(--radius);
  margin: -44px auto 0; max-width: var(--maxw); position: relative; z-index: 5;
  display: grid; grid-template-columns: repeat(5, 1fr);
}
.stat {
  display: flex; gap: 12px; align-items: flex-start; padding: 22px 20px;
  border-right: 1px solid var(--line);
}
.stat:last-child { border-right: 0; }
.stat .ico { color: var(--green); flex: none; }
.stat .ico svg { width: 30px; height: 30px; }
.stat strong { display: block; color: var(--navy); font-size: 1.02rem; }
.stat span { font-size: .82rem; color: var(--text-soft); }

/* ============================================================
   GENERIC GRIDS / CARDS
   ============================================================ */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; }

.card-grid { display: grid; gap: var(--gap); }
.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-4 { grid-template-columns: repeat(4, 1fr); }
.cols-5 { grid-template-columns: repeat(5, 1fr); }

.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px; box-shadow: var(--shadow-sm);
  transition: transform .15s ease, box-shadow .15s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.card h3 { font-size: 1.12rem; }

/* checkmark / icon lists */
.check-list { list-style: none; }
.check-list li { position: relative; padding-left: 38px; margin-bottom: 18px; color: var(--text-soft); }
.check-list li::before {
  content: ""; position: absolute; left: 0; top: 2px; width: 22px; height: 22px;
  border-radius: 50%; border: 2px solid var(--green);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232e7d32' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E")
    center / 13px no-repeat;
}

/* icon rows (get involved) */
.icon-item { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 22px; }
.icon-circle {
  flex: none; width: 46px; height: 46px; border-radius: 50%; background: var(--green);
  display: flex; align-items: center; justify-content: center; color: #fff;
}
.icon-circle svg { width: 22px; height: 22px; }
.icon-item h4 { margin: 4px 0 2px; color: var(--navy); font-size: 1rem; }
.icon-item h4 a { color: inherit; text-decoration: none; }
.icon-item h4 a:hover { color: var(--green-dark); text-decoration: underline; }
.icon-item p { margin: 0; color: var(--text-soft); font-size: .92rem; }

/* ---------- Dark band (Civic Education on home) ---------- */
.dark-band { background: var(--navy); color: #fff; }
.dark-band .section-title { color: #fff; }
.dark-band p { color: #d4dce5; }
.topic-card {
  background: #fff; border-radius: var(--radius); padding: 22px 16px; text-align: center;
  color: var(--navy);
}
.topic-card .ico { color: var(--green); margin-bottom: 10px; }
.topic-card .ico svg { width: 40px; height: 40px; margin: 0 auto; }
.topic-card h4 { font-size: .92rem; text-transform: uppercase; letter-spacing: .3px; margin-bottom: 6px; }
.topic-card p { color: var(--text-soft); font-size: .82rem; margin: 0; }

/* ============================================================
   NEWS CARDS
   ============================================================ */
.news-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; }
.news-card:hover { box-shadow: var(--shadow); }
.news-thumb {
  height: 150px; background: linear-gradient(135deg, #2b5a86, #0a2342);
  position: relative;
}
.news-thumb[data-tone="green"]  { background: linear-gradient(135deg, #3a8a3f, #1f5e23); }
.news-thumb[data-tone="gold"]   { background: linear-gradient(135deg, #e8a73c, #c9892a); }
.news-thumb[data-tone="slate"]  { background: linear-gradient(135deg, #5a6b7d, #2b3947); }
.news-thumb .placeholder-tag { display: none; }
.news-body { padding: 18px 20px 22px; display: flex; flex-direction: column; flex: 1; }
.news-date { font-size: .72rem; text-transform: uppercase; letter-spacing: .6px; color: var(--text-soft); margin-bottom: 8px; }
.news-body h3 { font-size: 1.02rem; margin-bottom: 8px; }
.news-body p { font-size: .9rem; color: var(--text-soft); flex: 1; }
.read-more { font-weight: 700; font-size: .82rem; text-transform: uppercase; letter-spacing: .5px; color: var(--green-dark); }
.read-more::after { content: " \2192"; }

/* ============================================================
   PETITIONS
   ============================================================ */
.petition-card { background: #fff; border: 1px solid var(--line); border-top: 4px solid var(--gold); border-radius: var(--radius); padding: 28px 30px; box-shadow: var(--shadow-sm); margin-bottom: 24px; }
.petition-card h2 { font-size: 1.5rem; margin: 4px 0 10px; }
.petition-progress { margin: 18px 0; }
.petition-bar { background: var(--bg); border-radius: 30px; height: 14px; overflow: hidden; border: 1px solid var(--line); }
.petition-bar-fill { height: 100%; background: linear-gradient(90deg, var(--green-dark), var(--green)); transition: width .5s ease; }
.petition-count { font-size: .9rem; color: var(--text-soft); margin: 10px 0 0; }
.petition-count strong { color: var(--navy); font-size: 1.05rem; }

/* Card lifecycle badge + closing line (state comes from the server, in SAST). */
.petition-status { display: inline-block; margin-left: 6px; padding: 2px 10px; border-radius: 30px; font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; vertical-align: middle; }
.petition-status.is-open { background: #e6f4ee; color: #0b5638; border: 1px solid #bfe3d3; }
.petition-status.is-closing_soon { background: #fdf3e0; color: #8a5a00; border: 1px solid #f0d9a8; }
.petition-status.is-closed { background: #eef1f5; color: #4d5b70; border: 1px solid #d8dfe8; }
.petition-closing { font-size: .88rem; color: var(--text-soft); margin: 10px 0 0; }
.petition-days { color: var(--navy); font-weight: 600; }

/* ---- Sticky signature panel on a petition's own page ---- */
.pet-signpanel { position: sticky; top: 92px; background: #fff; border: 1px solid var(--line); border-top: 4px solid var(--gold); border-radius: var(--radius); padding: 22px 22px 24px; box-shadow: var(--shadow-sm); margin-bottom: 24px; }
.pet-signpanel h3 { font-size: 1.05rem; margin: 0 0 4px; }
.pet-signpanel .pet-sp-lead { font-size: .88rem; color: var(--text-soft); margin: 0 0 16px; }
.pet-sp-count { font-size: 2rem; font-weight: 800; color: var(--navy); line-height: 1.1; }
.pet-sp-of { font-size: .88rem; color: var(--text-soft); margin: 2px 0 12px; }
.pet-sp-pct { font-size: .82rem; color: var(--text-soft); margin: 8px 0 0; display: flex; justify-content: space-between; gap: 10px; }
.pet-sp-pct strong { color: var(--navy); }
.pet-sp-facts { list-style: none; padding: 0; margin: 16px 0 0; border-top: 1px solid var(--line); }
.pet-sp-facts li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: .88rem; color: var(--text-soft); }
.pet-sp-facts li strong { color: var(--navy); font-weight: 700; text-align: right; }
.pet-signpanel .btn { width: 100%; text-align: center; margin-top: 18px; }
.pet-sp-closed { background: #eef1f5; color: #4d5b70; border-radius: 8px; padding: 10px 12px; font-size: .86rem; margin-top: 16px; }
.pet-sign-cta { margin: 22px 0; }
@media (max-width: 900px) { .pet-signpanel { position: static; } }

/* ============================================================
   Configuration-driven petition page (petition.html?slug=…)
   The markup comes from js/petition-render.js, so these classes
   mirror the legacy .pet-* vocabulary used by the older static
   page. Mobile-first: one column, splitting into petition-left /
   statistics-right from 960px.
   ============================================================ */
.petition-layout { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: start; padding-top: 48px; padding-bottom: 64px; }
.petition-main, .petition-aside { min-width: 0; }
@media (min-width: 960px) {
  .petition-layout { grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); gap: 48px; }
}

/* ---- Banner counter ---- */
.petition-counter { margin-top: 26px; max-width: 620px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 22px; }
.pc-numbers { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.pc-count { font-size: 2.1rem; font-weight: 800; color: var(--navy); line-height: 1.1; font-family: var(--font-head); }
.pc-label { font-size: .92rem; color: var(--text-soft); }
.pc-goal { font-size: .85rem; color: var(--text-soft); font-weight: 600; margin-top: 2px; }
.pc-bar { background: var(--bg-alt); border: 1px solid var(--line); border-radius: 999px; height: 14px; overflow: hidden; margin-top: 12px; }
.pc-bar-fill { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--green), var(--green-dark)); transition: width .6s ease; }

/* ---- Content sections (collapsible, from config) ---- */
.petition-section { margin-bottom: 30px; }
.petition-section h2 { font-size: 1.45rem; color: var(--navy); margin: 0 0 12px; }
.petition-section-body p { margin-bottom: 14px; }
.petition-section-body ul, .petition-section-body ol { margin: 0 0 14px 20px; }
.petition-section-body li { margin-bottom: 6px; }
.petition-section.is-collapsed .petition-section-body { max-height: 190px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 60%, transparent); mask-image: linear-gradient(#000 60%, transparent); }

/* ---- Sidebar cards ---- */
/* The sign panel is sticky on the older single-column page, where it is the
   only thing in its column. Here it sits above share / documents / tracker,
   and a sticky sibling would scroll over them — so it stays in flow. */
.petition-aside .pet-signpanel { position: static; }
.petition-aside .petition-card { padding: 22px 24px; }
.petition-aside .petition-card h3 { font-size: 1.05rem; margin: 0 0 14px; color: var(--navy); }
.petition-share { display: flex; flex-wrap: wrap; gap: 8px; }
.petition-share .btn { flex: 1 1 auto; text-align: center; }

/* ---- Track this proposal ---- */
.petition-tracker { list-style: none; margin: 0; padding: 0; }
.pt-stage { position: relative; padding: 0 0 18px 26px; border-left: 2px solid var(--line); }
.pt-stage:last-child { padding-bottom: 0; border-left-color: transparent; }
.pt-stage::before { content: ""; position: absolute; left: -8px; top: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--bg-alt); border: 2px solid var(--line); }
.pt-done::before { background: var(--green); border-color: var(--green); }
.pt-active::before { background: var(--yellow); border-color: var(--yellow); }
.pt-warn::before { background: var(--red); border-color: var(--red); }
.pt-warn .pt-status { color: var(--red); }
.pt-status { display: block; font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--text-soft); }
.pt-done .pt-status { color: var(--green); }
.pt-active .pt-status { color: #8a6200; }
.pt-title { display: block; font-size: .92rem; color: var(--navy); font-weight: 600; margin-top: 2px; }
.pt-update { display: block; font-size: .82rem; color: var(--text-soft); margin-top: 4px; }

/* ---- Documents ---- */
.petition-downloads { list-style: none; margin: 0; padding: 0; }
.petition-downloads li { border-bottom: 1px solid var(--line); }
.petition-downloads li:last-child { border-bottom: 0; }
.dl-link, .dl-soon { display: block; padding: 12px 0; font-size: .9rem; }
.dl-link { color: var(--navy); text-decoration: none; }
.dl-link:hover strong { color: var(--green-dark); text-decoration: underline; }
.dl-link strong, .dl-soon strong { display: block; font-weight: 700; }
.dl-soon { color: var(--text-soft); }
.dl-desc { display: block; font-size: .82rem; color: var(--text-soft); margin-top: 3px; }
.dl-soon .badge { background: var(--bg); color: var(--text-soft); margin-top: 8px; }

/* ---- Sign form extras ---- */
.petition-declaration { background: var(--bg); border: 1px solid var(--line); border-left: 4px solid var(--green); border-radius: 8px; padding: 16px 18px; margin: 8px 0 14px; font-size: .9rem; color: var(--text-soft); }
.petition-declaration p { margin: 0; }
.reason-list { display: grid; gap: 10px; }
.permissions { display: grid; gap: 10px; margin: 14px 0 18px; }
.id-field { display: flex; gap: 8px; }
.id-field input { flex: 1; }
.id-reveal { flex: none; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 0 14px; font-family: inherit; font-size: .82rem; font-weight: 700; color: var(--text-soft); cursor: pointer; }
.id-reveal:hover { color: var(--navy); }
.challenge { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.challenge input { max-width: 140px; }
.help { font-size: .82rem; color: var(--text-soft); margin: 5px 0 0; }
.form-error { color: var(--red); font-size: .86rem; margin: 0 0 12px; min-height: 1px; }
/* js/petition-render.js marks failed rows with .has-error (the older static
   page used .invalid), so both spellings must reveal the message. */
.has-error .field-error, .field-error.has-error { display: block; }
.has-error input, .has-error select, .has-error textarea { border-color: var(--red); }

/* ---- Post-signature confirmation ---- */
.petition-result { background: var(--green-2); border: 1px solid #bfe3d3; border-radius: var(--radius); padding: 26px 28px; }
.petition-result h3 { margin: 0 0 8px; color: var(--navy); }

/* ============================================================
   SOCIAL MEDIA cards
   ============================================================ */
.social-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; }
.social-card:hover { box-shadow: var(--shadow); }
.social-card .news-body { padding: 18px 20px 22px; display: flex; flex-direction: column; flex: 1; }
.social-card h3 { font-size: 1.02rem; margin: 8px 0; }
.social-card p { font-size: .9rem; color: var(--text-soft); flex: 1; }
.social-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 6px; }
.social-badge {
  align-self: flex-start; font-size: .68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .5px; padding: 3px 9px; border-radius: 30px; background: var(--bg); color: var(--text-soft);
}
.social-badge.facebook { background: #e7eefc; color: #1d4e89; }
.social-badge.instagram { background: #fdeef3; color: #b03468; }
.social-badge.linkedin { background: #e6eff5; color: #0a5a8a; }
.social-badge.youtube { background: #fdeaea; color: var(--red); }
.social-badge.tiktok { background: #eaeaea; color: #111; }
.social-badge.x { background: #e8eaed; color: #111; }
iframe.news-thumb { height: 180px; }

/* ============================================================
   OUR WORK — filters + archive
   ============================================================ */
.filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 32px; }
.filter-btn {
  border: 1px solid var(--line); background: #fff; color: var(--text-soft);
  padding: 8px 16px; border-radius: 30px; cursor: pointer; font-size: .85rem; font-weight: 600;
  transition: all .15s ease;
}
.filter-btn:hover { border-color: var(--green); color: var(--green-dark); }
.filter-btn.active { background: var(--navy); color: #fff; border-color: var(--navy); }

.archive-item {
  background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--gold);
  border-radius: var(--radius); padding: 24px 26px; margin-bottom: 18px; box-shadow: var(--shadow-sm);
}
.archive-item h3 { font-size: 1.18rem; margin-bottom: 10px; }
.meta-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.tag {
  font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
  padding: 4px 10px; border-radius: 30px; background: var(--green-2); color: var(--green);
}
.tag.cat { background: #e7f0ff; color: #1d4e89; }
.tag.status { background: #e6f4e7; color: var(--green-dark); }
.tag.status.submitted { background: #e6f4e7; color: var(--green-dark); }
.tag.status.ongoing { background: #fff3da; color: var(--gold-dark); }
.archive-docs { margin-top: 12px; font-size: .88rem; }
.archive-docs a { font-weight: 600; margin-right: 16px; }

/* ============================================================
   FORMS
   ============================================================ */
.form-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 30px; box-shadow: var(--shadow-sm); }
.form-row { margin-bottom: 18px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: 6px; color: var(--navy); }
label .req { color: var(--red); }
input[type="text"], input[type="email"], input[type="tel"], input[type="file"],
select, textarea {
  width: 100%; padding: 11px 13px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  font-family: inherit; font-size: .95rem; color: var(--text); background: #fff;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--gold); border-color: var(--gold); }
textarea { min-height: 130px; resize: vertical; }
.consent { display: flex; gap: 10px; align-items: flex-start; font-size: .88rem; color: var(--text-soft); }
.consent input { width: auto; margin-top: 4px; flex: none; }
.consent label { font-weight: 400; margin: 0; color: var(--text-soft); }
.field-error { color: var(--red); font-size: .8rem; margin-top: 5px; display: none; }
.form-row.invalid .field-error { display: block; }
.form-row.invalid input, .form-row.invalid select, .form-row.invalid textarea { border-color: var(--red); }
.form-success {
  display: none; background: #e6f4e7; border: 1px solid var(--green); color: var(--green-dark);
  padding: 14px 16px; border-radius: var(--radius-sm); margin-bottom: 18px; font-weight: 600;
}
.form-success.show { display: block; }
.form-success-detail { font-weight: 400; margin-top: 8px; }
.form-success-detail p { margin: 4px 0; }
.form-success-detail:empty { margin-top: 0; }
/* Shown when a submission actually fails — the form keeps its values so the
   visitor can retry instead of being told "thank you" for a lost enquiry. */
.form-submit-error {
  display: none; background: #fdeaea; border: 1px solid var(--red); color: var(--red);
  padding: 14px 16px; border-radius: var(--radius-sm); margin-bottom: 18px; font-weight: 600;
}
.form-submit-error.show { display: block; }

/* Site announcement + admin-managed public statistics (homepage). */
.home-announcement { background: var(--gold-2); border-bottom: 1px solid var(--gold); }
.home-announcement-inner {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: 12px 0; font-size: .95rem; color: var(--navy);
}
.home-announcement-inner strong { color: var(--navy); }
.home-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px; margin-top: 22px;
}
.home-stat { text-align: center; }
.home-stat-num { font-size: 1.6rem; font-weight: 700; color: var(--gold); }
.home-stat-label { font-weight: 600; }
.home-stat-note { color: var(--text-soft); font-size: .825rem; margin-top: 2px; }

/* Related content on the submission / campaign / learning / newsroom pages. */
.related-block .related-group { margin-bottom: 18px; }
.related-block .related-group h3 { font-size: 1rem; margin: 0 0 8px; }
.related-list { list-style: none; margin: 0; padding: 0; }
.related-list li { padding: 8px 0; border-top: 1px solid var(--line); }
.related-list li a { font-weight: 600; }
.related-summary { display: block; color: var(--text-soft); font-size: .875rem; margin-top: 3px; }

/* ============================================================
   PAGE HEADER BANNER (interior pages)
   ============================================================ */
.page-banner { background: var(--bg-alt); color: var(--text); padding: 56px 0 36px; border-bottom: 1px solid var(--line); }
.page-banner h1 { color: var(--navy); font-family: var(--font-serif); font-weight: 800; font-size: 3rem; letter-spacing: -.5px; margin-bottom: 10px; }
.page-banner p { color: var(--text-soft); max-width: 720px; margin: 0; font-size: 1.05rem; }
.breadcrumb { font-size: .82rem; color: var(--text-soft); margin-bottom: 14px; }
.breadcrumb a { color: var(--text-soft); }

/* Elegant serif for big titles (page banners + hero + centered logo wordmark) */
.logo-hero h1 { font-family: var(--font-serif); font-weight: 800; letter-spacing: -.5px; }

/* anchor offset so sticky header doesn't cover jump targets */
.anchor-offset { display: block; position: relative; top: -90px; visibility: hidden; }
html { scroll-padding-top: 90px; }

/* CTA blocks (get involved) */
.cta-block {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px; box-shadow: var(--shadow-sm); border-top: 4px solid var(--green);
  display: block; color: inherit; text-decoration: none;
}
a.cta-block:hover { text-decoration: none; transform: translateY(-3px); box-shadow: var(--shadow); transition: transform .15s ease, box-shadow .15s ease; }
.cta-block h3 { font-size: 1.15rem; }

/* Topic-grouped submissions (our-work.html): a heading per Topic with its
   submissions listed beneath — filled by submissions-loader.js. */
.topic-group { margin-top: 40px; }
.topic-group:first-child { margin-top: 0; }
.topic-group-title {
  font-size: 1.05rem; font-weight: 700; color: var(--green-dark);
  text-transform: uppercase; letter-spacing: .4px;
  margin: 0 0 16px; padding-bottom: 8px; border-bottom: 2px solid var(--line);
}

/* "What We Stand For" — colourful value labels in a centred grid */
.chips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px 20px; text-align: center; }
.chip { font-weight: 700; font-size: 1.05rem; }
/* colour cycle (Assessly's extended status palette) */
.chip:nth-child(5n+1) { color: #dc2626; }
.chip:nth-child(5n+2) { color: #16a34a; }
.chip:nth-child(5n+3) { color: #2563eb; }
.chip:nth-child(5n+4) { color: #d97706; }
.chip:nth-child(5n+5) { color: #4f46e5; }
@media (max-width: 640px) { .chips { grid-template-columns: 1fr 1fr; } }

/* founder cards */
.founder { display: flex; gap: 18px; align-items: flex-start; }
.founder .avatar {
  flex: none; width: 70px; height: 70px; border-radius: 50%;
  background: linear-gradient(135deg, var(--green), var(--navy)); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.4rem;
}

/* contact info side */
.contact-info li { list-style: none; display: flex; gap: 12px; align-items: flex-start; margin-bottom: 16px; }
.contact-info .ico { color: var(--green); flex: none; }
.contact-info .ico svg { width: 22px; height: 22px; }

/* ============================================================
   NEWSLETTER BAND + FOOTER
   ============================================================ */
.newsletter {
  background: linear-gradient(120deg, var(--navy), var(--navy-2));
  color: #fff; padding: 28px 0;
}
.newsletter-inner { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; justify-content: space-between; }
.newsletter .nl-icon { width: 46px; height: 46px; flex: none; }
.newsletter h3 { color: #fff; margin: 0 0 2px; text-transform: uppercase; font-size: 1.2rem; }
.newsletter p { margin: 0; color: #e2f0e3; font-size: .9rem; max-width: 420px; }
.nl-form { display: flex; gap: 8px; }
.nl-form input { width: 230px; border: 0; }
.nl-form .btn { white-space: nowrap; }
.newsletter .btn-gold { background: #fff; color: var(--gold-dark); }
.newsletter .btn-gold:hover { background: #eef2ff; }
.nl-success { color: #fff; font-weight: 700; display: none; }
.nl-success.show { display: block; }
.social { display: flex; gap: 10px; align-items: center; }
.social a {
  width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.15);
  display: flex; align-items: center; justify-content: center; color: #fff;
}
.social a:hover { background: rgba(255,255,255,.3); }
.social svg { width: 18px; height: 18px; }

.site-footer { background: var(--navy-deep); color: #c6d0dc; padding: 50px 0 24px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 36px; }
.footer-grid h4 { color: #fff; font-size: .82rem; text-transform: uppercase; letter-spacing: .6px; margin-bottom: 16px; }
.footer-grid ul { list-style: none; }
.footer-grid li { margin-bottom: 9px; }
.footer-grid a { color: #c6d0dc; font-size: .9rem; }
.footer-grid a:hover { color: #fff; }
.footer-brand .brand-name { font-size: 1.4rem; font-weight: 800; color: #fff; }
.footer-brand .brand-sub { font-size: .58rem; letter-spacing: .6px; color: #9fb0c4; text-transform: uppercase; }
.footer-blurb { font-size: .88rem; margin-top: 14px; max-width: 280px; }
.footer-contact li { display: flex; gap: 10px; font-size: .9rem; margin-bottom: 10px; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.1); margin-top: 36px; padding-top: 18px;
  display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: center; align-items: center;
  font-size: .82rem; color: #9fb0c4;
}
.footer-bottom a { color: #9fb0c4; }
.footer-bottom .sep { color: rgba(255,255,255,.25); }

/* accessibility helper */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ============================================================
   LANGUAGE SELECTOR (header)
   ============================================================ */
.lang-wrap { display: flex; align-items: center; }

.lang-select {
  background: #fff; color: var(--navy); border: 1px solid var(--line);
  border-radius: 6px; padding: 7px 10px; font-size: .82rem; font-weight: 600; cursor: pointer;
  font-family: inherit;
}
.lang-select:focus { outline: 2px solid var(--gold); }
.lang-select option { color: #14213d; }

/* ============================================================
   OUR WORK — search + archive card details + download states
   ============================================================ */
.archive-search { position: relative; margin-bottom: 18px; max-width: 520px; }
.archive-search input { padding-left: 40px; }
.archive-search .ico {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--text-soft);
  pointer-events: none;
}
.archive-search .ico svg { width: 18px; height: 18px; }

.archive-category {
  font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
  color: var(--green-dark); margin: 0 0 4px;
}
.archive-meta, .archive-status { font-size: .85rem; color: var(--text-soft); margin: 0 0 4px; }
.archive-status strong { color: var(--navy); }
.archive-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 16px; }
.text-link { font-weight: 600; font-size: .85rem; }
.text-link::after { content: " \2192"; }
.doc-note { font-size: .8rem; color: var(--text-soft); margin: 8px 0 0; font-style: italic; }

/* Public submission detail page (submission.html) */
.submission-hero { width: 100%; height: auto; border-radius: var(--radius); margin: 0 0 18px; display: block; }
.submission-summary { font-size: 1.05rem; font-weight: 500; color: var(--navy); margin: 14px 0; }
.submission-block { margin-top: 26px; }
.submission-block h2 { font-size: 1.15rem; color: var(--navy); margin: 0 0 10px; }
.submission-block p { margin: 0 0 12px; }
.submission-block ul, .submission-block ol { margin: 0 0 12px; padding-left: 20px; }

/* disabled / coming-soon download button */
.btn-disabled, .btn[disabled] {
  background: #e9ebef; color: #8a94a2; border-color: #e9ebef; cursor: not-allowed;
  pointer-events: none;
}

.no-results {
  display: none; text-align: center; color: var(--text-soft); padding: 30px;
  background: #fff; border: 1px dashed var(--line); border-radius: var(--radius);
}
.no-results.show { display: block; }

/* clickable homepage stats / impact items */
.stat-link { text-decoration: none; color: inherit; }
.stat-link:hover { text-decoration: none; background: var(--bg); }
.check-list a { color: inherit; text-decoration: none; }
.check-list a:hover { color: var(--green-dark); text-decoration: underline; }

/* ============================================================
   POLL WIDGET (public)
   ============================================================ */
.poll-section { display: none; } /* revealed by poll-widget.js when a poll exists */
.social-featured-section { display: none; } /* revealed by social-loader.js when featured posts exist */
.poll-card {
  background: #fff; border: 1px solid var(--line); border-top: 4px solid var(--gold);
  border-radius: var(--radius); padding: 28px 30px; box-shadow: var(--shadow-sm);
  max-width: 640px; margin: 0 auto;
}
.poll-eyebrow {
  font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .8px;
  color: var(--green-dark);
}
.poll-card h3 { font-size: 1.3rem; margin: 8px 0 18px; }
.poll-options { display: flex; flex-direction: column; gap: 10px; }
.poll-option {
  text-align: left; background: var(--bg); border: 1px solid var(--line); color: var(--navy);
  padding: 13px 16px; border-radius: var(--radius-sm); cursor: pointer; font-weight: 600;
  font-family: inherit; font-size: .95rem; transition: all .15s ease;
}
.poll-option:hover:not([disabled]) { border-color: var(--green); background: #eef6ee; }
.poll-option[disabled] { opacity: .6; cursor: default; }
.poll-result { margin-bottom: 4px; }
.poll-result-top { display: flex; justify-content: space-between; font-size: .9rem; font-weight: 600; color: var(--navy); margin-bottom: 5px; }
.poll-bar { background: var(--bg); border-radius: 30px; height: 12px; overflow: hidden; }
.poll-bar-fill { height: 100%; background: linear-gradient(90deg, var(--green-dark), var(--green)); border-radius: 30px; transition: width .5s ease; }
.poll-meta { font-size: .82rem; color: var(--text-soft); margin: 16px 0 0; }

/* ============================================================
   BROCHURE HOMEPAGE COMPONENTS
   ============================================================ */

/* Centered logo hero */
.logo-hero { background: var(--bg-alt); text-align: center; padding: 70px 24px 60px; }
.logo-hero .hero-logo { width: 110px; height: 110px; margin: 0 auto 18px; }
.logo-hero .hero-wordmark { font-size: 2.4rem; font-weight: 800; letter-spacing: 2px; color: var(--navy); line-height: 1; }
.logo-hero .hero-sub { font-size: .72rem; letter-spacing: 2px; text-transform: uppercase; color: var(--text-soft); font-weight: 600; margin-top: 6px; }
.logo-hero .hero-tag { color: var(--gold-dark); font-style: italic; margin-top: 10px; font-size: .95rem; }
.logo-hero h1 { font-size: 2.2rem; line-height: 1.12; margin: 26px auto 14px; max-width: 760px; color: var(--navy); }
.logo-hero .hero-lead { max-width: 640px; margin: 0 auto 26px; color: var(--text-soft); font-size: 1.05rem; }
.logo-hero .hero-buttons { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* Media placeholders (swap for real images later) */
.media-ph { position: relative; background: linear-gradient(135deg, #dfe7f2, #c4d2e6); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.media-ph[data-tone="green"] { background: linear-gradient(135deg, #dCe9e0, #bcd3c4); }
.media-ph[data-tone="navy"]  { background: linear-gradient(135deg, #cdd7e6, #aebfd6); }
.media-ph[data-tone="gold"]  { background: linear-gradient(135deg, #f3e9c8, #e6d49b); }
.media-ph .ph-tag { display: none; }
.media-ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ratio-16x9 { aspect-ratio: 16 / 9; }
.ratio-4x3  { aspect-ratio: 4 / 3; }
.ratio-portrait { aspect-ratio: 3 / 4; }

/* Video block */
.video-block { max-width: 860px; margin: 0 auto; }
.video-block .media-ph { border-radius: var(--radius); cursor: pointer; }
.video-block iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--radius); display: block; }
.play-btn {
  width: 84px; height: 84px; border-radius: 50%;
  background: rgba(255,255,255,.92); box-shadow: var(--shadow);
  display: flex; align-items: center; justify-content: center; transition: transform .15s ease;
}
.media-ph:hover .play-btn { transform: scale(1.06); }
.play-btn::before { content: ""; width: 0; height: 0; margin-left: 6px; border-style: solid; border-width: 15px 0 15px 26px; border-color: transparent transparent transparent var(--navy-2); }

/* Image-top cards (Our Work) */
.media-card { background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; color: inherit; text-decoration: none; transition: transform .15s ease, box-shadow .15s ease; }
a.media-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); text-decoration: none; }
.media-card .media-ph { aspect-ratio: 16 / 10; }
.media-card .media-body { padding: 18px 20px 22px; }
.media-card h3 { font-size: 1.02rem; margin: 0 0 6px; color: var(--navy); }
.media-card p { font-size: .88rem; color: var(--text-soft); margin: 0; }

/* Founder cards */
.founder-card { background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); text-align: center; }
.founder-card .media-ph { aspect-ratio: 4 / 3; }
.founder-card .founder-body { padding: 18px 20px 22px; }
.founder-card h3 { margin: 0 0 2px; font-size: 1.15rem; }
.founder-card .role { color: var(--text-soft); font-size: .85rem; margin: 0 0 12px; }
.social-icons { display: flex; gap: 10px; justify-content: center; }
.social-icons a { width: 34px; height: 34px; border-radius: 50%; background: var(--green-2); color: var(--green); display: flex; align-items: center; justify-content: center; }
.social-icons a:hover { background: var(--green); color: #fff; }
.social-icons svg { width: 16px; height: 16px; }

/* Donate card */
.donate-card { max-width: 560px; margin: 0 auto; background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 30px; text-align: center; }
.donate-card h3 { font-size: 1.3rem; margin: 0 0 4px; }
.donate-amounts { display: flex; justify-content: space-between; align-items: baseline; margin: 16px 0 8px; }
.donate-amounts .raised { font-size: 1.6rem; font-weight: 800; color: var(--navy); }
.donate-amounts .goal { color: var(--text-soft); font-size: .9rem; }
.donate-bar { background: var(--bg); border: 1px solid var(--line); border-radius: 30px; height: 12px; overflow: hidden; margin-bottom: 18px; }
.donate-bar-fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--gold-dark), var(--gold)); border-radius: 30px; }

/* Contact block (details + image) */
.contact-block { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.contact-block .media-ph { aspect-ratio: 4 / 3; border-radius: var(--radius); }
.contact-block .contact-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }

@media (max-width: 768px) {
  .contact-block { grid-template-columns: 1fr; gap: 28px; }
  .logo-hero h1 { font-size: 1.7rem; }
  .logo-hero .hero-wordmark { font-size: 2rem; }
  .logo-hero { padding: 48px 20px 44px; }
}

/* ============================================================
   ACTION-FIRST MOVEMENT COMPONENTS
   ============================================================ */
/* Impact strip (navy band under hero) */
.impact-strip { background: linear-gradient(90deg, var(--navy), var(--navy-2)); color: #fff; }
.impact-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; }
.impact-item { display: flex; gap: 14px; align-items: center; padding: 22px 22px; border-right: 1px solid rgba(255,255,255,.18); }
.impact-item:last-child { border-right: 0; }
.impact-item .ico { width: 42px; height: 42px; flex: none; border-radius: 50%; background: rgba(15,157,88,.25); color: #d7f3e2; display: flex; align-items: center; justify-content: center; }
.impact-item .ico svg { width: 22px; height: 22px; }
.impact-num { font-size: 1.3rem; font-weight: 800; line-height: 1; }
.impact-label { font-size: .85rem; color: #cdd8e6; }

/* badges */
.badge { display: inline-flex; align-items: center; border-radius: 999px; padding: 5px 11px; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; }
.badge-active { background: var(--green-2); color: var(--green); }
.badge-submitted { background: #eaf3ff; color: var(--navy-2); }
.badge-ongoing { background: #fff8df; color: #8a6200; }
.badge-urgent { background: #fdeaea; color: var(--red); }
.badge-cat { background: var(--bg); color: var(--text-soft); }

/* campaign cards */
.campaign-card { display: flex; flex-direction: column; }
.campaign-card .badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.campaign-card h3 { font-size: 1.15rem; margin: 0 0 8px; }
.campaign-card p { color: var(--text-soft); font-size: .92rem; margin: 0 0 12px; flex: 1; }
.campaign-card .target { font-size: .82rem; color: var(--text-soft); margin: 0 0 14px; }
.campaign-card .target strong { color: var(--navy); }
.campaign-actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* share button row */
.share-row { display: inline-flex; gap: 8px; align-items: center; }
.share-btn { width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg-alt); color: var(--navy-2); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.share-btn:hover { background: var(--green-2); color: var(--green); text-decoration: none; }
.share-btn svg { width: 16px; height: 16px; }

/* petition progress (homepage compact) */
.petition-prog { display: flex; flex-direction: column; }
.petition-prog .progress { width: 100%; height: 10px; background: var(--bg); border: 1px solid var(--line); border-radius: 999px; overflow: hidden; margin: 12px 0 6px; }
.petition-prog .progress > span { display: block; height: 100%; background: var(--green); border-radius: 999px; }
.petition-prog .count { font-size: .85rem; color: var(--text-soft); margin: 0 0 14px; }
.petition-prog .count strong { color: var(--navy); }

/* donation tiers */
.donation-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.donation-card { text-align: center; background: var(--bg-alt); border: 2px solid var(--line); border-radius: var(--radius); padding: 24px 16px; display: flex; flex-direction: column; }
.donation-card:hover { border-color: var(--green); }
.donation-amount { font-size: 1.7rem; font-weight: 800; color: var(--green); }
.donation-card p { font-size: .85rem; color: var(--text-soft); flex: 1; margin: 8px 0 16px; }
.donate-types { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 26px; }
@media (max-width: 900px) { .impact-grid { grid-template-columns: 1fr 1fr; } .impact-item:nth-child(2n) { border-right: 0; } .donation-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .impact-grid { grid-template-columns: 1fr; } .impact-item { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.18); } .donation-grid { grid-template-columns: 1fr; } }

/* ============================================================
   LEARN YOUR RIGHTS (civic education hub)
   ============================================================ */
/* quick-filter chips */
.quick-filters { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }

/* featured guide cards */
.guide-card { background: var(--bg-alt); border: 1px solid var(--line); border-top: 3px solid var(--gold); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; }
.guide-card .ico { color: var(--gold); margin-bottom: 10px; }
.guide-card .ico svg { width: 30px; height: 30px; }
.guide-card h3 { font-size: 1.02rem; margin: 0 0 6px; }
.guide-card p { font-size: .88rem; color: var(--text-soft); flex: 1; margin: 0 0 14px; }

/* topic cards with expandable detail */
.topic-card { background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow-sm); }
.topic-card .topic-head { display: flex; gap: 14px; align-items: flex-start; }
.topic-card .ico { flex: none; width: 44px; height: 44px; border-radius: 12px; background: var(--gold-2); color: var(--gold); display: flex; align-items: center; justify-content: center; }
.topic-card .ico svg { width: 22px; height: 22px; }
.topic-card h3 { font-size: 1.08rem; margin: 0 0 4px; }
.topic-card .topic-one { color: var(--text-soft); font-size: .9rem; margin: 0; }
.topic-readmore { background: none; border: 0; color: var(--gold-dark); font-weight: 700; font-size: .85rem; cursor: pointer; padding: 0; margin-top: 14px; font-family: inherit; }
.topic-readmore::after { content: " ↓"; }
.topic-card.open .topic-readmore::after { content: " ↑"; }
.topic-detail { display: none; margin-top: 16px; border-top: 1px solid var(--line); padding-top: 16px; }
.topic-card.open .topic-detail { display: block; }
.topic-detail h4 { font-size: .82rem; text-transform: uppercase; letter-spacing: .5px; color: var(--text-soft); margin: 16px 0 8px; }
.topic-detail ul { list-style: none; padding-left: 0; }
.topic-detail li { color: var(--text-soft); font-size: .9rem; margin-bottom: 6px; }
.topic-detail .article-links li { color: var(--navy-2); }
.topic-detail .doc-note { margin-top: 12px; }

/* practical tools */
.tools-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.tool { background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 18px; text-align: center; }
.tool .ico { color: var(--green); margin-bottom: 8px; }
.tool .ico svg { width: 26px; height: 26px; }
.tool h4 { font-size: .9rem; margin: 0 0 10px; }

/* FAQ accordion */
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q { width: 100%; text-align: left; background: none; border: 0; padding: 18px 36px 18px 0; font-weight: 700; font-size: 1rem; color: var(--navy); cursor: pointer; position: relative; font-family: inherit; }
.faq-q::after { content: "+"; position: absolute; right: 6px; top: 16px; font-size: 1.4rem; color: var(--gold-dark); font-weight: 400; }
.faq-item.open .faq-q::after { content: "–"; }
.faq-a { display: none; padding: 0 0 18px; color: var(--text-soft); }
.faq-item.open .faq-a { display: block; }

/* disclaimer note */
.disclaimer { background: var(--gold-2); border: 1px solid var(--gold); border-radius: var(--radius); padding: 22px 26px; color: var(--text); }
.disclaimer strong { color: var(--navy); }

/* CTA band */
.cta-band { background: var(--navy); color: #fff; text-align: center; }
.cta-band h2 { color: #fff; font-family: var(--font-serif); font-size: 2rem; }
.cta-band p { color: #cdd6e1; max-width: 620px; margin: 0 auto 24px; }
.cta-band .hero-buttons { justify-content: center; }

@media (max-width: 900px) { .tools-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .tools-grid { grid-template-columns: 1fr; } }

/* Top utility bar (Privacy Policy | T&Cs) */
.topbar { background: var(--navy-deep); color: #c7d2e8; font-size: .78rem; }
.topbar-inner { max-width: var(--maxw); margin: 0 auto; padding: 7px 24px; display: flex; justify-content: flex-end; gap: 18px; }
.topbar a { color: #c7d2e8; }
.topbar a:hover { color: #fff; }

/* Get Involved illustration blocks (Petitions / Campaigns) */
.illus-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.illus-block { background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--radius); padding: 32px; text-align: center; box-shadow: var(--shadow-sm); text-decoration: none; color: inherit; display: block; transition: transform .15s ease, box-shadow .15s ease; }
a.illus-block:hover { transform: translateY(-3px); box-shadow: var(--shadow); text-decoration: none; }
.illus-block h3 { font-size: 1.25rem; margin-bottom: 16px; }
.illus { width: 130px; height: 130px; margin: 0 auto; display: block; }
@media (max-width: 640px) { .illus-grid { grid-template-columns: 1fr; } }

/* ============================================================
   UTILITIES (extracted from former inline styles)
   ============================================================ */
.m-0 { margin: 0; }
.mt-8 { margin-top: 8px; }
.mt-14 { margin-top: 14px; }
.mt-18 { margin-top: 18px; }
.mt-28 { margin-top: 28px; }
.mt-32 { margin-top: 32px; }
.mt-22 { margin-top: 22px; }
.mt-36 { margin-top: 36px; }
.mx-auto { margin-left: auto; margin-right: auto; }
.justify-start { justify-content: flex-start; }
.pw-60 { width: 60%; }
.pw-35 { width: 35%; }
.mb-2 { margin-bottom: 2px; }
.mb-6 { margin-bottom: 6px; }
.mb-8 { margin-bottom: 8px; }
.mb-18 { margin-bottom: 18px; }
.consent-gap { margin: 10px 0 6px; }
.w-full { width: 100%; }
.text-navy { color: var(--navy); }
.fs-85 { font-size: .85rem; }

/* narrower content widths inside .container */
.maxw-560 { max-width: 560px; }
.maxw-760 { max-width: 760px; }
.maxw-820 { max-width: 820px; }
.maxw-960 { max-width: 960px; }

/* ============================================================
   Public Participation Dashboard (petition pages)
   ============================================================ */
.pp-dashboard { --pp-accent: var(--green); }
.pp-head { text-align: center; margin-bottom: 22px; }
.pp-sub { margin: 6px 0 0; color: var(--text-soft); font-size: .95rem; }
.pp-note { text-align: center; color: var(--text-soft); font-size: .95rem; padding: 10px 0; }

.pp-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; }
.pp-tile {
  background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--radius-sm, 12px);
  padding: 18px 16px; text-align: center; box-shadow: var(--shadow-sm);
}
.pp-tile-value { font-size: 1.9rem; font-weight: 800; line-height: 1.1; color: var(--navy); font-variant-numeric: tabular-nums; }
.pp-tile-label { margin-top: 6px; font-size: .82rem; font-weight: 600; color: var(--text); }
.pp-tile-sub { margin-top: 2px; font-size: .74rem; color: var(--text-soft); }
.pp-tile--hero { grid-column: 1 / -1; background: linear-gradient(135deg, var(--navy), var(--accent)); border-color: transparent; }
.pp-tile--hero .pp-tile-value { color: #fff; font-size: 2.6rem; }
.pp-tile--hero .pp-tile-label { color: rgba(255,255,255,.92); font-size: .95rem; }
.pp-tile--hero .pp-tile-sub { color: rgba(255,255,255,.75); }

.pp-progress { margin: 20px 0 6px; }
.pp-progress-bar { background: var(--bg); border: 1px solid var(--line); border-radius: 999px; height: 18px; overflow: hidden; }
.pp-progress-fill { height: 100%; background: linear-gradient(90deg, var(--green), var(--green-dark)); transition: width .6s ease; }
.pp-progress-text { margin: 8px 0 0; font-size: .85rem; color: var(--text-soft); text-align: center; }

.pp-charts { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 22px; }
.pp-chart { background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--radius-sm, 12px); padding: 18px; box-shadow: var(--shadow-sm); }
.pp-chart-title { margin: 0 0 12px; font-size: 1rem; color: var(--navy); }
.pp-bar-row { display: grid; grid-template-columns: 92px 1fr auto; align-items: center; gap: 10px; margin: 7px 0; }
.pp-bar-label { font-size: .8rem; color: var(--text); }
.pp-bar-track { background: var(--bg); border: 1px solid var(--line); border-radius: 999px; height: 12px; overflow: hidden; }
.pp-bar-fill { display: block; height: 100%; background: linear-gradient(90deg, var(--green), var(--green-dark)); transition: width .6s ease; }
.pp-bar-fill.is-suppressed { background: repeating-linear-gradient(45deg, var(--line) 0 6px, #eef2f7 6px 12px); }
.pp-bar-fill.is-empty { background: var(--line); }
.pp-bar-val { font-size: .78rem; color: var(--text-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }

.pp-table { margin-top: 12px; }
.pp-table > summary { cursor: pointer; font-size: .8rem; color: var(--green); }
.pp-data { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: .8rem; }
.pp-data th, .pp-data td { text-align: left; padding: 5px 8px; border-bottom: 1px solid var(--line); }
.pp-data td { font-variant-numeric: tabular-nums; }

.pp-privacy { margin: 16px 0 0; font-size: .76rem; color: var(--text-soft); text-align: center; }
.pp-updated { margin: 6px 0 0; font-size: .74rem; color: var(--text-soft); text-align: center; }

@media (max-width: 640px) {
  .pp-charts { grid-template-columns: 1fr; }
  .pp-tile--hero .pp-tile-value { font-size: 2.1rem; }
  .pp-bar-row { grid-template-columns: 76px 1fr auto; }
}

/* ---- Dashboard in the petition page's right column ----
   Same markup, denser reading. The card supplies the border and shadow, so
   the tiles and charts inside drop their own chrome (no boxes in boxes) and
   the summary figures become label/value rows rather than a tile grid. */
.pp-card { padding: 22px 24px 24px; }
.pp-card .pp-head { text-align: left; margin-bottom: 4px; }
/* Match the sibling sidebar cards ("Share this petition", "Documents", …)
   rather than the full-width section headings this markup was built for. */
.pp-card .pp-head .section-title {
  font-family: var(--font); font-size: 1.05rem; font-weight: 700; text-transform: none;
  letter-spacing: normal; margin: 0; padding: 0; border-bottom: 0; color: var(--navy);
}
.pp-card .pp-head .section-title::after { display: none; }
.pp-card .pp-sub { font-size: .8rem; margin: 6px 0 16px; }

.pp-card .pp-tiles { grid-template-columns: 1fr; gap: 0; }
.pp-card .pp-tile {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px;
  background: none; border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
  box-shadow: none; padding: 10px 0; text-align: left;
}
.pp-card .pp-tile-value { order: 2; font-size: 1.05rem; font-weight: 700; white-space: nowrap; }
.pp-card .pp-tile-label { order: 1; margin: 0; font-size: .86rem; font-weight: 500; color: var(--text-soft); }
.pp-card .pp-tile-sub { order: 3; flex-basis: 100%; margin: -4px 0 0; font-size: .72rem; }

/* The headline total keeps its emphasis, without the navy slab. */
.pp-card .pp-tile--hero { display: block; background: none; border-bottom: 1px solid var(--line); padding: 0 0 16px; }
.pp-card .pp-tile--hero .pp-tile-value { font-size: 2.4rem; font-weight: 800; color: var(--navy); }
.pp-card .pp-tile--hero .pp-tile-label { font-size: .92rem; font-weight: 600; color: var(--text); }
.pp-card .pp-tile--hero .pp-tile-sub { font-size: .78rem; color: var(--text-soft); margin-top: 2px; }

/* An empty track has to stay visible on the white card, or a petition at 0%
   reads as a missing element rather than as no progress yet. */
.pp-card .pp-progress { margin: 16px 0 0; }
.pp-card .pp-progress-bar, .pp-card .pp-bar-track { background: #eef2f7; border-color: var(--line-strong, var(--line)); }
.pp-card .pp-progress-bar { height: 12px; }
.pp-card .pp-progress-text { text-align: left; font-size: .78rem; }

.pp-card .pp-charts { grid-template-columns: 1fr; gap: 22px; margin-top: 24px; }
.pp-card .pp-chart { background: none; border: 0; border-top: 1px solid var(--line); border-radius: 0; box-shadow: none; padding: 18px 0 0; }
.pp-card .pp-chart-title { font-size: .92rem; margin-bottom: 10px; }
.pp-card .pp-bar-row { grid-template-columns: 94px 1fr auto; gap: 8px; margin: 6px 0; }
.pp-card .pp-bar-label { font-size: .75rem; line-height: 1.3; }
.pp-card .pp-bar-track { height: 10px; }
.pp-card .pp-bar-val { font-size: .72rem; }
.pp-card .pp-privacy, .pp-card .pp-updated { text-align: left; }
.pp-card .pp-privacy { margin-top: 18px; }
.maxw-880 { max-width: 880px; }

/* section-title size variants */
.title-md { font-size: 1.5rem; }
.title-sm { font-size: 1.4rem; }
.title-xs { font-size: 1.2rem; }

/* card accent borders */
.card-gold { border-top: 4px solid var(--gold); }
.card-green { border-top: 4px solid var(--green); }

/* textarea heights */
.ta-60 { min-height: 60px; }
.ta-70 { min-height: 70px; }

/* repeated structural bits */
.footer-logo { width: 44px; height: 44px; }
.footer-brand-row { display: flex; gap: 12px; align-items: center; }
.nl-left { display: flex; gap: 16px; align-items: center; }
.follow-label { font-size: .8rem; letter-spacing: .5px; text-transform: uppercase; margin-right: 4px; }
.section-head { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 12px; }
.items-start { align-items: start; }
.grid-gap-1428 { gap: 14px 28px; }
.consent-label { font-weight: 600; color: var(--navy); }
.brand-light-link { text-decoration: none; color: #fff; }
.btn-outline-light { border-color: rgba(255,255,255,.5); }

/* two-column grid overrides (desktop only, so mobile still stacks) */
@media (min-width: 981px) {
  .two-col-21 { grid-template-columns: 2fr 1fr; align-items: start; }
  .two-col-civic { grid-template-columns: 0.9fr 2fr; align-items: center; }
  .two-col-about { grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: start; }
}
.intro-narrow { max-width: 720px; margin-top: -14px; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 980px) {
  .stats-strip { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(2n) { border-right: 0; }
  .two-col { grid-template-columns: 1fr; gap: 36px; }
  .cols-4, .cols-5 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .hero h1 { font-size: 2.4rem; }
}

@media (max-width: 768px) {
  .nav-toggle { display: block; }
  .main-nav {
    position: absolute; top: 100%; left: 0; right: 0; background: #fff;
    flex-direction: column; align-items: stretch; padding: 8px 16px 16px;
    display: none; box-shadow: var(--shadow); gap: 0; border-top: 1px solid var(--line);
  }
  .main-nav.open { display: flex; }
  .main-nav > ul { flex-direction: column; align-items: stretch; gap: 0; width: 100%; }
  .main-nav a { padding: 12px 8px; border-bottom: 1px solid var(--line); }
  .main-nav a.active { border-bottom: 1px solid var(--line); }
  .dropdown { position: static; box-shadow: none; background: var(--bg); display: none; padding: 0 0 0 14px; }
  .has-dropdown.open .dropdown { display: block; }
  .dropdown a { color: var(--text); }
  .dropdown a:hover { background: var(--line); color: var(--navy); }
  .header-actions .btn { display: none; }
  .header-actions .btn.keep-mobile { display: inline-block; }
}

@media (max-width: 600px) {
  .cols-2, .cols-3, .cols-4, .cols-5,
  .form-grid, .footer-grid { grid-template-columns: 1fr; }
  .stats-strip { grid-template-columns: 1fr; }
  .stat { border-right: 0; border-bottom: 1px solid var(--line); }
  .stat:last-child { border-bottom: 0; }
  .hero h1 { font-size: 2rem; }
  .hero-inner { padding: 56px 24px 72px; }
  .section { padding: 44px 0; }
  .nl-form input { width: 100%; }
  .nl-form { flex-direction: column; width: 100%; }
}

/* ============================================================
   PREMIUM POLISH  (layered last so it refines the base styles)
   Editorial typography, softer layered depth, smoother motion.
   Tweak or remove this whole block to revert to the base look.
   ============================================================ */
:root {
  --line:        #e8edf3;                /* softer hairline borders */
  --line-strong: #d7dfe9;
  --section-y:   92px;                   /* more breathing room */
  --radius:      18px;
  --radius-lg:   24px;
  --ease:        cubic-bezier(.16, 1, .3, 1);
  /* soft, multi-layer shadows read more premium than one hard drop */
  --shadow-sm:   0 1px 2px rgba(7,26,51,.04), 0 6px 16px rgba(7,26,51,.05);
  --shadow:      0 4px 14px rgba(7,26,51,.06), 0 22px 48px rgba(7,26,51,.10);
  --shadow-lg:   0 12px 32px rgba(7,26,51,.10), 0 38px 80px rgba(7,26,51,.16);
}

/* ---- Global rendering ---- */
body {
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  letter-spacing: -.003em;
}
::selection { background: rgba(15,157,88,.20); color: var(--navy); }
:focus-visible { outline: 2px solid var(--green-dark); outline-offset: 2px; border-radius: 4px; }

/* refined scrollbar (webkit) */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-thumb { background: #c2cdda; border: 3px solid var(--bg); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: #a9b6c6; }

/* ---- Typography ---- */
h1, h2, h3 { letter-spacing: -.018em; }
.lead { font-size: 1.16rem; line-height: 1.65; }

/* Editorial serif section titles with a soft gradient accent */
.section-title {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 1.95rem;
  letter-spacing: -.01em;
  border-bottom-color: var(--line);
}
.section-title::after {
  width: 60px; height: 3px; border-radius: 999px;
  background: linear-gradient(90deg, var(--green-dark), var(--green));
}

/* ---- Buttons: subtle gradient, layered depth, smooth lift ---- */
.btn {
  border-radius: 999px;
  letter-spacing: .2px;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease),
              background .25s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
  will-change: transform;
}
.btn-gold {
  background: linear-gradient(135deg, var(--green-dark), var(--gold));
  box-shadow: 0 6px 18px rgba(8,122,61,.28);
}
.btn-gold:hover {
  background: linear-gradient(135deg, var(--green-dark), var(--green-dark));
  box-shadow: 0 12px 26px rgba(8,122,61,.34);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-outline-navy { border-width: 1.5px; }
.btn-outline-navy:hover { box-shadow: 0 10px 24px rgba(7,26,51,.18); }
.newsletter .btn-gold { background: #fff; box-shadow: 0 6px 18px rgba(0,0,0,.18); }

/* ---- Header: cleaner glass + smoother nav ---- */
.site-header {
  background: rgba(255,255,255,.82);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid rgba(7,26,51,.07);
  box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 6px 24px rgba(7,26,51,.05);
}
.main-nav a { transition: color .2s var(--ease), background .2s var(--ease); border-radius: 8px; }
.main-nav a.active { position: relative; border-bottom: 0; }
.main-nav a.active::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 2.5px;
  border-radius: 999px; background: linear-gradient(90deg, var(--green-dark), var(--green));
}
.dropdown { border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg); }
.lang-select { border-radius: 999px; transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
.lang-select:hover { border-color: var(--green); }

/* ---- Hero: richer depth + soft glow ---- */
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 85% 10%, rgba(15,157,88,.30), transparent 55%);
}
.hero-inner { position: relative; z-index: 1; padding-top: 96px; padding-bottom: 112px; }
.hero h1 { font-size: 3.35rem; letter-spacing: -.02em; }
.hero p { font-size: 1.16rem; line-height: 1.65; color: #e9eef4; }
.hero-badge { border-radius: 14px; box-shadow: var(--shadow-lg); }

/* ---- Stats strip: refined + interactive ---- */
.stats-strip { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); border: 1px solid var(--line); }
.stat { border-right-color: var(--line); transition: background .2s var(--ease); }
.stat-link:hover { background: var(--green-2); }

/* ---- Cards: unified soft border, depth, and smooth lift ---- */
.card, .news-card, .social-card, .media-card, .cta-block, .petition-card,
.archive-item, .form-card, .topic-card, .founder-card, .donate-card,
.poll-card, .guide-card, .illus-block, .donation-card, .campaign-card {
  border-color: var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.card:hover, .news-card:hover, .social-card:hover, a.media-card:hover,
a.cta-block:hover, .guide-card:hover, a.illus-block:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--line-strong);
}

/* media/news thumbnails: gentle zoom + readable overlay on hover */
.news-card, .media-card, .social-card { overflow: hidden; }
.news-thumb, .media-card .media-ph {
  transition: transform .5s var(--ease);
}
.news-card:hover .news-thumb, a.media-card:hover .media-ph { transform: scale(1.045); }
.news-thumb::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(7,26,51,.18));
}

/* ---- Forms: softer inputs with a focus glow ---- */
input[type="text"], input[type="email"], input[type="tel"], input[type="file"],
select, textarea {
  border-radius: 12px;
  border-color: var(--line-strong);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 4px rgba(15,157,88,.14);
}

/* ---- Filters / tags ---- */
.filter-btn { transition: all .2s var(--ease); }
.filter-btn.active { box-shadow: 0 6px 16px rgba(7,26,51,.18); }

/* ---- Newsletter + footer ---- */
.newsletter { background: linear-gradient(120deg, var(--navy-deep), var(--navy-2)); }
.social a { transition: transform .2s var(--ease), background .2s var(--ease); }
.social a:hover { transform: translateY(-2px) scale(1.06); }
.site-footer { background: linear-gradient(180deg, var(--navy-deep), #030c18); }

/* respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
  .news-card:hover .news-thumb, a.media-card:hover .media-ph { transform: none; }
}

/* ============================================================
   CAMPAIGN-FORWARD LOOK  (Amnesty-inspired)
   Bold activist sans headlines, punchy uppercase issue labels,
   and a vivid yellow accent against SACR's navy/green identity.
   ============================================================ */

/* Bold sans headlines instead of serif — an activist, campaigning feel */
.section-title, .hero h1, .page-banner h1, .cta-band h2, .logo-hero h1 {
  font-family: var(--font);
  font-weight: 800;
  letter-spacing: -.022em;
}
.section-title { font-weight: 800; }

/* Vivid yellow accent bar under section titles (Amnesty signature) */
.section-title::after { height: 4px; width: 64px; background: var(--yellow); }

/* Bold, uppercase eyebrow chip with the yellow accent */
.hero-eyebrow {
  background: var(--yellow); color: #1a1300; font-weight: 800;
  text-transform: uppercase; letter-spacing: .09em; font-size: .74rem;
  border-radius: 4px; padding: 7px 13px;
}

/* Punchy uppercase issue / category labels on cards */
.archive-category, .news-date, .poll-eyebrow, .impact-label {
  font-weight: 800; letter-spacing: .09em;
}
.archive-category, .poll-eyebrow { text-transform: uppercase; }

/* Strong card headlines */
.media-card h3, .news-card h3, .campaign-card h3, .social-card h3,
.guide-card h3, .topic-card h3 { font-weight: 800; letter-spacing: -.012em; }

/* Bolder buttons + a touch less rounded for a confident, blocky feel */
.btn { font-weight: 800; border-radius: 10px; }

/* Active nav link: bold yellow underline accent */
.main-nav a.active::after {
  background: var(--yellow); height: 3px; bottom: 2px;
}

/* Issues / Get Involved dropdowns: a little wider + bolder labels */
.dropdown { min-width: 264px; padding: 10px; }
.dropdown a { font-weight: 600; }
.dropdown a:hover { background: var(--green-2); color: var(--green); }

/* Image-forward campaign/issue cards: taller media, gradient wash */
.media-card .media-ph { aspect-ratio: 16 / 9; }
.media-card .media-body { padding: 20px 22px 24px; }

/* Hero: bigger, bolder, more contrast (desktop) */
@media (min-width: 981px) {
  .hero h1 { font-size: 3.7rem; line-height: 1.01; }
  .page-banner h1 { font-size: 3rem; }
  .section-title { font-size: 2rem; }
}
/* Keep headings sensible on smaller screens (overrides the larger desktop sizes) */
@media (max-width: 980px) {
  .hero h1 { font-size: 2.6rem; }
  .page-banner h1 { font-size: 2.3rem; }
  .section-title { font-size: 1.7rem; }
}
@media (max-width: 600px) {
  .hero h1 { font-size: 2.05rem; }
  .page-banner h1 { font-size: 1.9rem; }
}

/* ============================================================
   AMNESTY ALIGNMENT  (closest match to amnesty.org's system)
   Pure Amnesty yellow + ink, Trade-Gothic-style condensed
   uppercase headlines (Oswald), high contrast, sharp CTAs.
   ============================================================ */
:root {
  --yellow:    #ffff00;   /* Amnesty yellow */
  --ink:       #231f20;   /* Amnesty near-black */
  --font-head: "Oswald", "Arial Narrow", var(--font);
}

/* High-contrast ink text on white, like Amnesty */
body { color: var(--ink); }
h1, h2, h3, h4 { color: var(--ink); }
a { color: var(--green-dark); }

/* ---- Headlines: condensed, bold, UPPERCASE (Trade Gothic feel) ---- */
.section-title, .hero h1, .page-banner h1, .cta-band h2, .logo-hero h1 {
  font-family: var(--font-head);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .005em;
  line-height: 1.04;
}
.hero h1 { line-height: 1.0; }
/* card / block headlines: condensed bold, but sentence case for readability */
.media-card h3, .news-card h3, .social-card h3, .campaign-card h3,
.guide-card h3, .topic-card h3, .petition-card h2, .donate-card h3,
.poll-card h3, .cta-block h3, .illus-block h3 {
  font-family: var(--font-head);
  font-weight: 600;
  letter-spacing: .01em;
}
.donation-amount { font-family: var(--font-head); }

/* ---- Yellow as the signature accent ---- */
.section-title::after { background: var(--yellow); height: 5px; width: 70px; }
.hero-eyebrow {
  background: var(--yellow); color: var(--ink); border-radius: 0;
  font-family: var(--font-head); font-weight: 600;
  text-transform: uppercase; letter-spacing: .12em; font-size: .8rem; padding: 8px 14px;
}
.hero h1 .accent { color: var(--yellow); }
.main-nav a.active::after { background: var(--yellow); height: 4px; }

/* punchy uppercase issue / category labels */
.archive-category, .poll-eyebrow, .news-date, .social-badge, .impact-label,
.footer-grid h4 {
  font-family: var(--font-head); font-weight: 600;
  text-transform: uppercase; letter-spacing: .1em;
}

/* ---- CTAs: sharp rectangles, bold uppercase (Amnesty style) ---- */
.btn {
  font-family: var(--font-head);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 600;
  border-radius: 2px;
}
/* iconic Amnesty button: yellow block, ink text */
.btn-gold { background: var(--yellow); color: var(--ink); box-shadow: none; }
.btn-gold:hover { background: #ffe600; color: #000; box-shadow: 0 8px 20px rgba(0,0,0,.18); }
/* secondary solid ink button */
.btn-ink { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn-ink:hover { background: #000; color: var(--yellow); }
/* outline buttons squared to match */
.btn-outline, .btn-outline-navy { border-radius: 2px; }
.newsletter .btn-gold { background: var(--yellow); color: var(--ink); }

/* ---- Nav: tighter, bolder, uppercase like Amnesty's top bar ---- */
.main-nav a {
  font-family: var(--font-head);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 500;
  font-size: .95rem;
}
.dropdown a { text-transform: none; letter-spacing: 0; font-family: var(--font); }

/* ---- Hero: stronger, flatter, high-contrast band ---- */
.hero {
  background:
    linear-gradient(180deg, rgba(7,26,51,.86), rgba(7,26,51,.86)),
    linear-gradient(135deg, #0b2447, #071a33);
}
.hero h1 { color: #fff; }

/* ---- Footer/news bands toward Amnesty black ---- */
.site-footer { background: #1a1718; }
.newsletter { background: var(--ink); }
.newsletter h3 { font-family: var(--font-head); }

/* section-title stays ink even though it's a heading on light bg */
.section-title { color: var(--ink); }
.dark-band .section-title, .cta-band h2, .hero h1, .newsletter h3 { color: #fff; }

/* ---- "What We Stand For": solid black blocks (Amnesty style) ---- */
.chips { gap: 16px; }
.chips .chip {
  display: flex; align-items: center; justify-content: center;
  min-height: 92px; padding: 18px 16px;
  background: var(--ink); color: #fff;
  border-bottom: 4px solid var(--yellow);
  border-radius: 2px;
  font-family: var(--font-head); font-weight: 600;
  text-transform: uppercase; letter-spacing: .05em; font-size: .98rem; line-height: 1.2;
  transition: background .2s var(--ease), transform .25s var(--ease), color .2s var(--ease);
}
.chips .chip:hover { background: #000; color: var(--yellow); transform: translateY(-3px); }

/* ---- About page: prominent mission + headline proof stat ---- */
.mission-block {
  background: var(--ink); color: #fff; border-radius: 2px;
  border-left: 6px solid var(--yellow); padding: 40px 44px;
}
.mission-block .section-title { color: #fff; }
.mission-block p { font-size: 1.25rem; line-height: 1.5; color: #f3f3f3; margin: 0; max-width: 880px; }
.mission-cta { margin-top: 24px; }
.vision-note { margin-top: 22px; color: var(--text-soft); max-width: 880px; }
.vision-note strong { color: var(--ink); }

.impact-highlight {
  display: flex; gap: 24px; align-items: center;
  background: var(--ink); color: #fff; border-bottom: 5px solid var(--yellow);
  border-radius: 2px; padding: 24px 30px; margin: 18px 0 24px;
}
.impact-highlight-num {
  font-family: var(--font-head); font-weight: 700; font-size: 3rem; line-height: 1;
  color: var(--yellow); flex: none;
}
.impact-highlight-label { font-size: 1.02rem; color: #f3f3f3; }
@media (max-width: 560px) {
  .mission-block { padding: 28px 24px; }
  .mission-block p { font-size: 1.1rem; }
  .impact-highlight { flex-direction: column; align-items: flex-start; gap: 10px; padding: 22px 22px; }
  .impact-highlight-num { font-size: 2.4rem; }
}

/* ============================================================
   SOUTH AFRICAN FLAG PALETTE  (final identity override)
   Green = civic action · Gold = CTAs / highlights / optimism ·
   Black + White = seriousness & contrast · Blue = policy /
   governance / information · Red = urgent issues only.
   Keeps the bold campaign structure; shifts the colours.
   ============================================================ */
:root {
  --green:      #007a4d;  /* SA flag green — main civic colour */
  --green-2:    #e1f0e9;  /* soft green tint */
  --green-dark: #006b43;  /* deeper green — links & hovers */
  --gold:       #ffb612;  /* SA flag gold — CTAs & highlights */
  --gold-2:     #fff3d6;  /* gold tint */
  --gold-dark:  #e6a200;  /* gold hover */
  --red:        #de3831;  /* SA flag red — urgent only */
  --blue:       #002395;  /* SA flag blue — policy / governance */
  --yellow:     #ffb612;  /* accent alias -> SA gold */
  --ink:        #111111;  /* near-black for contrast */
}

a { color: var(--green-dark); }

/* Hero -> SA green band with gold highlight */
.hero { background: linear-gradient(135deg, #008a57 0%, #00673f 100%); }
.hero::before { background: radial-gradient(120% 90% at 85% 12%, rgba(255,182,18,.26), transparent 55%); }
.hero h1 { color: #fff; }
.hero h1 .accent { color: var(--gold); }
.hero-eyebrow { background: var(--gold); color: #000; }

/* Primary CTA = SA gold (black text); green = secondary/brand */
.btn-gold { background: var(--gold); color: #000; box-shadow: none; }
.btn-gold:hover { background: #000; color: var(--gold); box-shadow: 0 8px 20px rgba(0,0,0,.18); }
.newsletter .btn-gold { background: var(--gold); color: #000; }
.newsletter .btn-gold:hover { background: #fff; color: #000; }

/* Accents -> gold */
.section-title::after { background: var(--gold); }
.main-nav a.active::after { background: var(--gold); }

/* "What We Stand For" black blocks -> green civic edge, gold on hover */
.chips .chip { border-bottom-color: var(--green); }
.chips .chip:hover { background: #000; color: var(--gold); }

/* Headline proof stat (135,000+) in gold on black */
.impact-highlight { border-bottom-color: var(--gold); }
.impact-highlight-num { color: var(--gold); }

/* Civic Education / governance band -> SA blue (information) */
.dark-band { background: var(--blue); }

/* Final CTA + newsletter + footer -> black, gold headings */
.cta-band { background: #000; }
.cta-band h2 { color: var(--gold); }
.newsletter { background: #000; }
.site-footer { background: #0a0a0a; }

/* Card top-accent variants (SA flag meaning) */
.card-gold, .guide-card { border-top-color: var(--gold); }
.card-green { border-top-color: var(--green); }
.tag.status.ongoing { background: #fff3d6; color: var(--gold-dark); }
.tag.cat { background: #e6ebff; color: var(--blue); }

/* Slogan strip below the hero (gold campaign band) */
.slogan-strip {
  background: var(--gold); color: #000;
  font-family: var(--font-head); font-weight: 700; text-transform: uppercase;
  text-align: center; letter-spacing: .14em; font-size: 1.15rem;
  padding: 16px 20px;
}

/* Impact band -> SA green, with the 135,000+ figure most prominent in gold */
.impact-strip { background: linear-gradient(135deg, #007a4d, #00673f); }
.impact-item:first-child .impact-num { color: var(--gold); font-size: 1.8rem; }

/* centre a row of CTA buttons */
.hero-buttons.justify-center { justify-content: center; }

@media (max-width: 600px) { .slogan-strip { font-size: .95rem; letter-spacing: .1em; } }

/* ---- Hero: white banner with SA-flag-coloured headline ---- */
.hero { background: #fff; color: var(--ink); }
.hero::before { display: none; }
.hero p { color: var(--text-soft); }
.hero h1 { color: var(--ink); }
.hero h1 .fc-green { color: var(--green); }
.hero h1 .fc-gold  { color: var(--gold-dark); }
.hero h1 .fc-red   { color: var(--red); }
.hero h1 .fc-blue  { color: var(--blue); }
.hero h1 .fc-ink   { color: var(--ink); }
/* outline button must stay visible on the white hero */
.hero .btn-outline { color: var(--green); border-color: var(--green); background: transparent; }
.hero .btn-outline:hover { background: var(--green); color: #fff; }
/* eyebrow as a solid black block */
.hero .hero-eyebrow { background: #000; color: #fff; }

/* About co-founders: smaller photos */
.founder-card .media-ph { aspect-ratio: auto; height: 150px; }

/* About mission: narrower and shifted toward the right of its column (desktop) */
@media (min-width: 981px) {
  .mission-block, .vision-note { max-width: 440px; margin-left: auto; }
}

/* ---- Remove the gold/green banners ---- */
.slogan-strip { display: none; }   /* yellow slogan banner removed */

/* Stats strip: white (no green banner); dividers are SA-flag-coloured spacing lines */
.impact-strip { background: #fff; color: #000; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.impact-strip .impact-num { color: #000; }
.impact-strip .impact-label { color: #000; }
.impact-strip .impact-item .ico { background: var(--green-2); color: var(--green); }
.impact-item:first-child .impact-num { color: #000; font-size: 1.9rem; }
.impact-item { border-right: 3px solid var(--line); }
.impact-item:nth-child(1) { border-right-color: var(--green); }
.impact-item:nth-child(2) { border-right-color: var(--gold); }
.impact-item:nth-child(3) { border-right-color: var(--red); }
.impact-item:nth-child(4) { border-right-color: var(--blue); }
.impact-item:last-child { border-right: 0; }
@media (max-width: 560px) {
  .impact-item { border-right: 0; border-bottom: 3px solid var(--line); }
  .impact-item:nth-child(1) { border-bottom-color: var(--green); }
  .impact-item:nth-child(2) { border-bottom-color: var(--gold); }
  .impact-item:nth-child(3) { border-bottom-color: var(--red); }
  .impact-item:nth-child(4) { border-bottom-color: var(--blue); }
  .impact-item:last-child { border-bottom: 0; }
}

/* Founder rows — small photo left, text right (about page) */
.founders-list { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.founder-row { display: flex; flex-direction: column; gap: 14px; align-items: stretch; }
.founder-photo { width: 100%; height: 240px; border-radius: 14px; object-fit: cover; box-shadow: var(--shadow-sm); border: 1px solid var(--line); }
.founder-row h3 { margin: 0 0 2px; font-size: 1.12rem; }
.founder-row .role { color: var(--green); font-weight: 700; font-size: .8rem; text-transform: uppercase; letter-spacing: .4px; margin: 0 0 8px; }
.founder-row .muted { font-size: .9rem; margin: 0; }
img.news-thumb { object-fit: cover; height: 150px; width: 100%; }
@media (max-width: 640px) { .founders-list { grid-template-columns: 1fr; } }

/* Campaigns nav dropdown with descriptions */
.dropdown.dropdown-wide { min-width: 340px; }
.dropdown .dd-title { display: block; font-weight: 700; color: var(--navy); }
.dropdown .dd-desc { display: block; font-size: .78rem; color: var(--text-soft); margin-top: 2px; line-height: 1.35; }

/* Feature banner image */
.section-img { width: 100%; max-height: 420px; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow-sm); display: block; }

/* Official logo image sizing */
.brand .logo { width: auto; height: 96px; }
.footer-logo { width: auto; height: 46px; background: #fff; padding: 5px 8px; border-radius: 8px; }
.admin-bar .logo { width: auto; height: 40px; background: #fff; padding: 4px 6px; border-radius: 8px; }

/* Smaller volunteer image (Get Involved, after the options) */
.vol-img { display: block; max-width: 380px; width: 100%; margin: 30px auto 0; border-radius: var(--radius); box-shadow: var(--shadow-sm); }

/* ============================================================
   CONSISTENT TYPOGRAPHY (final)
   One body font (Inter) + one display font (Oswald) everywhere.
   All headings use the display font so no heading falls back to
   a different family; no element uses the old serif.
   ============================================================ */
h1, h2, h3, h4, h5, h6 { font-family: var(--font-head); }
.section-title, .page-banner h1, .hero h1, .cta-band h2, .logo-hero h1 { font-family: var(--font-head); }
body, p, li, a, label, input, select, textarea, button, .lead, .muted, .dropdown a {
  font-family: var(--font);
}
/* keep the condensed display font on nav, buttons and badges */
.main-nav a, .btn, .filter-btn, .badge, .social-badge, .archive-category,
.news-date, .impact-num, .impact-label, .donation-amount, .hero-eyebrow,
.slogan-strip { font-family: var(--font-head); }

/* ============================================================
   Petition stage-2 form (petition-form.html)

   What remains of the styles written for the retired single-page
   petition. The page that used the counter, prose, POPIA notice,
   downloads, tracker and donation blocks is in /archive, so those
   rules were removed; these are the ones petition-form.html and the
   sign panel on petition.html still use.
   ============================================================ */

/* ---- Form ---- */
.pet-help { font-size: .8rem; color: var(--text-soft); margin: 6px 0 0; }
/* ---- Masked ID field with reveal toggle ---- */
.pet-id-field { position: relative; display: flex; align-items: stretch; }
.pet-id-field input { flex: 1; padding-right: 72px; }
/* Keep the masked dots evenly spaced and readable when revealed. */
.pet-id-field input:not([type="password"]) { letter-spacing: 2px; }
.pet-id-reveal {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  background: none; border: 0; cursor: pointer; padding: 4px 8px;
  font: inherit; font-size: .8rem; font-weight: 600; color: var(--green);
  border-radius: var(--radius-sm);
}
.pet-id-reveal:hover { text-decoration: underline; }
.pet-id-reveal:focus-visible { outline: 2px solid var(--green); outline-offset: 1px; }
.pet-submit { width: 100%; margin-top: 8px; }
.pet-form-error { color: var(--red); font-weight: 600; font-size: .9rem; margin: 0 0 14px; }
.pet-form-error:empty { margin: 0; }
/* Inline validation state on a consent checkbox. */
.consent.invalid label { color: var(--red); }
.consent.invalid input { outline: 2px solid var(--red); outline-offset: 2px; }

/* ---- Result / share ---- */
.pet-result {
  background: var(--bg-alt); border: 1px solid var(--line); border-top: 4px solid var(--navy-2);
  border-radius: var(--radius); padding: 26px; margin-bottom: 24px; box-shadow: var(--shadow-sm);
}
.pet-result:focus { outline: 2px solid var(--green); outline-offset: 3px; }
.pet-result.is-success { border-top-color: var(--green); }
.pet-result h3 { color: var(--navy); margin: 0 0 10px; }
.pet-ref { font-size: .9rem; color: var(--text-soft); }

/* ---- On-page confirmation-code entry ---- */
.pet-verify { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 14px; }
.pet-verify-label { font-weight: 700; color: var(--navy); margin: 0 0 4px; }
.pet-verify-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 10px; }
.pet-verify-row input {
  width: 140px; text-align: center; letter-spacing: 6px; font-size: 1.1rem;
  font-variant-numeric: tabular-nums; padding: 10px 12px;
}
.pet-verify-msg { font-size: .85rem; margin: 8px 0 0; }
.pet-verify-msg.is-error { color: var(--red); }
.pet-verify-msg.is-success { color: var(--green); font-weight: 600; }

/* ============================================================
   LIVE CONTENT REVEAL
   New cards inserted by the public loaders (submissions, campaigns,
   learning, newsroom) fade + rise into place so freshly published
   content visibly "pops in" without a page refresh.
   ============================================================ */
@keyframes sacr-card-reveal {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.card-reveal { animation: sacr-card-reveal .5s ease both; }

/* Small type chip used on admin-managed Learning Centre cards. */
.chip-sm {
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(0,0,0,.06);
  color: inherit;
  margin-bottom: 8px;
}

/* Responsive video embed on the generic content detail page. */
.video-embed iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 8px; }

@media (prefers-reduced-motion: reduce) {
  .card-reveal { animation: none; }
}

/* ---------- Website Settings hooks (see site-settings.js) ----------
   Blocks driven by an optional setting ship hidden and are revealed by
   js/main.js only once the setting holds a value, so a page never shows a
   label with nothing after it. `[hidden]` is forced because several of these
   sit inside rules (.footer-bottom span, .check-list li) that set a display
   value, which would otherwise override the attribute's default styling. */
[data-site-optional][hidden] { display: none !important; }

.nl-archive { margin: 8px 0 0; }
.nl-archive a { color: #fff; text-decoration: underline; font-weight: 600; }

/* Featured Newsroom embed. The iframe is created by js/main.js only for a URL
   from the allow-listed host set, which is a subset of the frame-src CSP. */
.featured-embed { margin: 0 0 28px; }
.featured-embed iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 8px; }