@charset "utf-8";
/* CSS Document */
:root{
  --accent:#01A301;
  --accent-dark:#19179C;
  --muted:#6b7280;
  --bg:#ffffff;
  --radius:8px;
  --gap:1rem;
  --maxw:1100px;
  --focus:3px solid rgba(0,115,170,0.18);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;
  margin:0;color:#0b1720;background:var(--bg);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
.container{max-width:var(--maxw);margin:0 auto;padding:1rem}
a{color:var(--accent);text-decoration:none}
a:focus{outline:var(--focus)}
.skip{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip:focus{left:1rem;top:1rem;width:auto;height:auto;padding:.5rem .75rem;background:#fff;border:1px solid #ddd;border-radius:4px}

.masthead{background:linear-gradient(180deg,var(--accent) 0,var(--accent-dark) 100%);color:#fff;padding:.75rem 0}
.header-grid{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.brand{display:flex;gap:.75rem;align-items:center}
.crest{width:48px;height:48px;display:block}
.site-title{margin:0;font-size:1.125rem}
.tagline{margin:0;font-size:.9rem;opacity:.95}

.primary-nav{position:relative}
.nav-toggle{display:none;background:transparent;border:1px solid rgba(255,255,255,0.12);color:#fff;padding:.4rem .6rem;border-radius:6px}
.menu{list-style:none;padding:0;margin:0;display:flex;gap:.5rem}
.menu a{color:#fff;padding:.3rem .5rem;border-radius:6px}
.menu a:focus,.menu a:hover{background:rgba(255,255,255,0.06)}

.main-visual{padding:2rem 0}

/* layout utilities */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--gap)}
.leaders-grid .card,.grid .card{background:#fff;border:1px solid #e6eef2;padding:1rem;border-radius:var(--radius);display:flex;gap:.75rem;align-items:center}
.card img{width:64px;height:64px;object-fit:cover;border-radius:8px}
.lead{font-size:1.05rem;color:#18303a}

/* CTAs */
.cta-grid{display:flex;gap:.75rem;flex-wrap:wrap;margin:1rem 0}
.btn{display:inline-block;padding:.5rem .75rem;border-radius:8px;border:1px solid transparent;background:transparent;color:var(--accent);cursor:pointer}
.btn.primary{background:var(--accent);color:#fff}
.btn.neutral{background:#f4f7f9;border-color:#e0e6ea}
.btn:focus{outline:var(--focus)}

.timeline{display:flex;gap:.75rem;overflow:auto;padding-bottom:.25rem}
.timeline .timeline-item{min-width:220px;background:#fff;padding:.75rem;border-radius:8px;border:1px solid #e6eef2}
.timeline-vertical{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:1rem}
.timeline-vertical li{background:#fff;padding:1rem;border-radius:8px;border:1px solid #e6eef2}

/* forms */
.form{max-width:640px}
.form label{display:block;font-weight:600;margin-top:.75rem}
.form input,.form textarea{width:100%;padding:.6rem;border:1px solid #d7e2e7;border-radius:6px;margin-top:.25rem}
.form .form-actions{margin-top:1rem;display:flex;gap:.5rem;align-items:center}
.muted{color:var(--muted);font-size:.95rem}
.g-recaptcha {
  margin-top: 1rem;
}

/* footer */
.site-footer{border-top:1px solid #eef6f8;padding:1rem 0;margin-top:2rem}
.footer-grid{display:flex;justify-content:space-between;align-items:center;gap:1rem}

/* responsive nav */
@media (max-width:800px){
  .nav-toggle{display:inline-block}
  .menu{flex-direction:column;background:rgba(255,255,255,0.04);position:absolute;right:0;top:calc(100% + .5rem);padding:.5rem;border-radius:8px;box-shadow:0 6px 18px rgba(3,12,19,0.08)}
  .menu[hidden]{display:none}
}

/* accessibility preference */
@media (prefers-reduced-motion:reduce){
  *{animation:none;transition:none}
}
@media (max-width:800px){
  .nav-toggle{display:inline-block}
  .menu{
    flex-direction:column;
    background:#ffffff; /* lighter background for contrast */
    color:#0b1720;      /* default link color on light bg */
    position:absolute;
    right:0;
    top:calc(100% + .5rem);
    padding:.5rem;
    border-radius:8px;
    box-shadow:0 6px 18px rgba(3,12,19,0.08);
    min-width:200px;    /* ensure touch targets have room */
    z-index:40;
  }
  .menu[hidden]{display:none}
  .menu a{
    color:inherit;      /* inherit the dark color */
    display:block;
    padding:.55rem .75rem;
    border-radius:6px;
    margin:0;
  }
  .menu a:hover,
  .menu a:focus{
    background:#f2f6f8; /* subtle hover */
    outline:none;
  }
  .masthead{z-index:30}
}

/* Resources block */
#home-resources { margin-top: 1.5rem; }
#home-resources h3 { margin: 0 0 .5rem 0; font-size: 1.05rem; color: #18303a; }
.resources-grid { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

/* Resource card */
.card.resource { display:block; padding: .85rem; border-radius: var(--radius); background:#fff; border:1px solid #e6eef2; }
.card.resource h4 { margin: 0 0 .35rem 0; font-size: 1rem; display:flex; align-items:center; gap:.5rem; }
.card.resource h4 a { color: var(--accent); text-decoration: none; font-weight:600; }
.card.resource h4 a:focus { outline: var(--focus); }
.card.resource .muted { margin:0; color: var(--muted); font-size: .92rem; }

/* Small file metadata row (size / type) */
.card.resource .meta { margin-top:.5rem; font-size:.85rem; color:var(--muted); }

/* Visual affordance for PDF links */
.card.resource h4 a::after {
  content: "↗";
  font-size: .85rem;
  margin-left: .4rem;
  color: rgba(0,0,0,0.45);
}

/* Ensure cards align with existing leader card visuals */
.card.resource img { display:none; }

/* Responsive tweaks */
@media (max-width:520px){
  .resources-grid { grid-template-columns: 1fr; }
  .card.resource h4 { font-size: .98rem; }
}
:root {
  --swapo-red: #d71920;
  --swapo-green: #01A301;
  --swapo-blue: #19179C;
}

.about-card {
  color: #fff;
  padding: 1rem;
  border-radius: var(--radius);
}
.about-card.red {
  background: var(--swapo-red);
}
.about-card.green {
  background: var(--swapo-green);
}
.about-card.blue {
  background: var(--swapo-blue);
}