/* vouchers.africa — shared stylesheet
   Tokens first, then base, then components. See DESIGN.md for the vocabulary.
   No build step: edit this file directly. */

/* ---------- 1. Tokens ---------- */
:root {
  /* Palette */
  --navy-900: #101c31;   /* header, footer, gradient end */
  --navy-800: #1a2942;   /* body text, gradient start, dark selects */
  --blue-700: #1d4ed8;   /* primary hover */
  --blue-600: #2563eb;   /* primary, rules, accents on light */
  --blue-500: #3b82f6;   /* accents on dark, active nav, focus ring */
  --slate-600: #5b6b82;  /* muted text on light */
  --slate-400: #8fa3bf;  /* muted text on dark */
  --slate-300: #cbd7e6;  /* body text on dark */
  --slate-200: #e2e8f0;  /* borders on light */
  --slate-100: #f1f5f9;  /* light surface */
  --slate-50:  #f8fafc;  /* lighter surface */
  --surface-hover: #e8eef6;
  --white: #fff;
  --danger-text: #fca5a5;
  --danger-bg: rgba(220, 38, 38, 0.15);

  /* Translucent layers used on dark bands */
  --on-dark-surface: rgba(255, 255, 255, 0.04);
  --on-dark-surface-strong: rgba(255, 255, 255, 0.06);
  --on-dark-border: rgba(143, 163, 191, 0.16);
  --on-dark-border-strong: rgba(143, 163, 191, 0.35);
  --on-dark-divider: rgba(255, 255, 255, 0.08);
  --on-dark-pill: rgba(59, 130, 246, 0.18);

  --gradient-dark: linear-gradient(165deg, var(--navy-800) 0%, var(--navy-900) 100%);

  /* Type */
  --font-sans: "Outfit", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-md: 17px;
  --text-lg: 18px;
  --text-xl: 20px;
  --h3: 21px;
  --h2: clamp(28px, 3.5vw, 40px);
  --h1: clamp(32px, 4.5vw, 52px);
  --h1-hero: clamp(36px, 5vw, 58px);
  --leading: 1.6;
  --leading-tight: 1.55;
  --tracking-tight: -0.02em;
  --tracking-caps: 0.08em;

  /* Space and shape */
  --container: 1120px;
  --gutter: 24px;
  --section-y: 80px;
  --section-y-lg: 88px;
  --section-y-sm: 64px;
  --radius-sm: 7px;
  --radius: 10px;
  --radius-lg: 12px;
  --rule-w: 64px;
  --rule-h: 4px;
  --nav-h: 64px;
  --shadow-card: 0 12px 30px rgba(16, 28, 49, 0.18);
  --focus-ring: 0 0 0 3px var(--white), 0 0 0 6px var(--blue-500);
}

/* ---------- 2. Fonts (self-hosted, variable weight 100–900) ---------- */
@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/outfit-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/outfit-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- 3. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading);
  color: var(--navy-800);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}
h1, h2, h3, p, ul, ol { margin: 0; }
ul, ol { padding: 0; }
h1, h2, h3 { line-height: 1.15; text-wrap: balance; }
a { color: var(--blue-600); }
a:hover { color: var(--blue-700); }
img { max-width: 100%; }
input, select, textarea, button { font: inherit; }
[hidden] { display: none !important; }

/* Keyboard focus: visible everywhere, on light and dark */
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 4px; }
.band--dark :focus-visible,
.site-header :focus-visible,
.site-footer :focus-visible { box-shadow: 0 0 0 3px var(--navy-900), 0 0 0 6px var(--blue-500); }

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

/* Skip link: hidden until focused */
.skip-link {
  position: absolute; top: 8px; left: 8px; z-index: 100;
  padding: 10px 16px; border-radius: var(--radius-sm);
  background: var(--blue-600); color: var(--white); text-decoration: none; font-weight: 500;
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; color: var(--white); }

/* ---------- 4. Layout primitives ---------- */
.container { max-width: var(--container); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }

.section { padding-top: var(--section-y); padding-bottom: var(--section-y); }
.section--lg { padding-top: var(--section-y-lg); padding-bottom: var(--section-y-lg); }
.section--sm { padding-top: var(--section-y-sm); padding-bottom: var(--section-y-sm); }
.section--tail { padding-top: 24px; padding-bottom: var(--section-y-lg); }  /* CTA directly after a list */
.section--flush-top { padding-top: 0; }

/* Full-width colour bands. Put .container inside. */
.band--dark { background: var(--gradient-dark); color: var(--slate-400); border-left: 6px solid var(--blue-600); }
.band--dark h1, .band--dark h2, .band--dark h3 { color: var(--white); }
.band--light { background: var(--slate-100); }

.stack { display: flex; flex-direction: column; gap: 14px; }
.stack--sm { gap: 10px; }
.stack--md { gap: 16px; }
.stack--lg { gap: 24px; }
.stack--xl { gap: 32px; }

.grid { display: grid; gap: 20px; }
ol.grid, ul.grid { list-style: none; }
.grid--cards { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grid--cards-wide { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--cards-xwide { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid--brands { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; align-content: start; }
.grid--2 { grid-template-columns: repeat(2, 1fr); gap: 12px; }
.grid--split { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 40px; align-items: start; }
.grid--split-wide { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 48px; align-items: start; }
.gap-sm { gap: 14px; }
.gap-md { gap: 16px; }
.gap-lg { gap: 28px; }

.row { display: flex; flex-wrap: wrap; gap: 12px; }
.row--between { justify-content: space-between; align-items: center; gap: 24px; }
.row--baseline { justify-content: space-between; align-items: flex-end; gap: 16px; }

.mt-sm { margin-top: 20px; }
.mt-md { margin-top: 30px; }
.mt-lg { margin-top: 44px; }
.measure { max-width: 56ch; }
.measure-wide { max-width: 62ch; }
.measure-narrow { max-width: 50ch; }
.narrow { max-width: 640px; }

/* ---------- 5. Typography components ---------- */
.eyebrow {
  font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--tracking-caps);
  text-transform: uppercase; color: var(--blue-600);
}
.band--dark .eyebrow { color: var(--blue-500); }

.hero-title { font-size: var(--h1-hero); font-weight: 700; line-height: 1.08; letter-spacing: var(--tracking-tight); color: var(--white); }
.page-title { font-size: var(--h1); font-weight: 700; letter-spacing: var(--tracking-tight); text-transform: uppercase; color: var(--white); }
.section-title { font-size: var(--h2); font-weight: 700; letter-spacing: var(--tracking-tight); text-transform: uppercase; }
.rule { width: var(--rule-w); height: var(--rule-h); background: var(--blue-600); }
.rule--sm { width: 56px; height: 3px; }
.lead { margin-top: 6px; font-size: var(--text-lg); line-height: var(--leading); color: var(--slate-600); }
.band--dark .lead { color: var(--slate-400); }
.lead--xl { font-size: var(--text-xl); color: var(--slate-300); }
.muted { color: var(--slate-600); }
.band--dark .muted { color: var(--slate-400); }
.note { font-size: 15px; color: var(--slate-600); }
.text-link { font-weight: 500; text-decoration: none; }
.text-link:hover { text-decoration: underline; }

/* ---------- 6. Buttons ---------- */
.btn, .btn-ghost, .btn-nav {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm); text-decoration: none; font-weight: 500; cursor: pointer;
}
.btn { padding: 13px 24px; background: var(--blue-600); color: var(--white); border: none; font-size: var(--text-base); }
.btn:hover { background: var(--blue-700); color: var(--white); }
.btn:disabled { opacity: 0.7; cursor: progress; }
.btn-ghost { padding: 13px 24px; border: 1px solid var(--on-dark-border-strong); color: var(--white); font-size: var(--text-base); }
.btn-ghost:hover { border-color: var(--white); color: var(--white); }
.btn-nav { padding: 9px 18px; background: var(--blue-600); color: var(--white); }
.btn-nav:hover, .btn-nav[aria-current] { background: var(--blue-700); color: var(--white); }

/* ---------- 7. Header and navigation ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--navy-900); border-bottom: 1px solid var(--on-dark-divider); }
.nav { height: var(--nav-h); display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.wordmark { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--white); font-weight: 600; font-size: 17px; }
.wordmark:hover { color: var(--white); }
.wordmark img { width: 32px; height: 32px; border-radius: 8px; display: block; }
.wordmark__dot { color: var(--blue-500); }
.nav-links { display: flex; align-items: center; gap: 28px; font-size: 15px; }
.nav-link { color: var(--slate-300); text-decoration: none; }
.nav-link:hover, .nav-link[aria-current] { color: var(--white); }
.nav-link[aria-current] { border-bottom: 2px solid var(--blue-500); padding-bottom: 2px; }
.nav-toggle {
  display: none; align-items: center; justify-content: center; width: 40px; height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 8px; background: transparent; color: var(--white); font-size: 18px; cursor: pointer;
}
.menu { display: flex; flex-direction: column; gap: 4px; padding: 8px var(--gutter) 20px; background: var(--navy-900); font-size: var(--text-base); }
.menu a { color: var(--slate-300); text-decoration: none; padding: 12px 0; border-bottom: 1px solid var(--on-dark-divider); }
.menu a:last-child { border-bottom: none; }
.menu a[aria-current], .menu a:hover { color: var(--white); }

@media (max-width: 820px) {
  .nav-links { display: none; }
  .nav-toggle { display: inline-flex; }
}
@media (min-width: 821px) {
  .menu { display: none !important; }
}

/* ---------- 8. Hero and stats (home) ---------- */
.hero { padding-top: var(--section-y-lg); padding-bottom: 96px; display: grid; grid-template-columns: 1.2fr 1fr; gap: 56px; align-items: center; }
.hero__copy { display: flex; flex-direction: column; gap: 24px; }
.hero__copy p { font-size: var(--text-lg); line-height: var(--leading); max-width: 56ch; }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.stat { padding: 22px; border-radius: var(--radius); background: var(--on-dark-surface); border: 1px solid var(--on-dark-border); }
.stat__value { color: var(--white); font-size: 34px; font-weight: 700; letter-spacing: var(--tracking-tight); line-height: 1.1; }
.stat__label { font-size: var(--text-sm); margin-top: 4px; }
@media (max-width: 820px) { .hero { grid-template-columns: 1fr; } }

/* ---------- 9. Cards ---------- */
.card { display: flex; flex-direction: column; gap: 10px; padding: 28px; border-radius: var(--radius); background: var(--slate-100); border-left: 4px solid var(--blue-600); }
.card--lg { padding: 32px; gap: 12px; }
.card--row { padding: 26px 30px; gap: 6px; }
.card--outline { background: var(--white); border: 1px solid var(--slate-200); padding: 24px; gap: 6px; }
.card--outline.card--step { padding: 26px; gap: 10px; }
.card--dark { background: var(--on-dark-surface); border: 1px solid var(--on-dark-border); padding: 24px; gap: 6px; }
a.card { text-decoration: none; color: inherit; }
a.card:hover { background: var(--surface-hover); color: inherit; }
.card__title { font-size: var(--h3); font-weight: 600; }
.card--lg .card__title { font-size: 24px; }
.card--row .card__title { font-size: 22px; }
.card--outline .card__title, .card--dark .card__title { font-size: 19px; }
.card--step .card__title { font-size: 20px; }
.card__text { color: var(--slate-600); line-height: var(--leading); }
.card--row .card__text { font-size: var(--text-md); line-height: var(--leading-tight); }
.card--outline .card__text, .card--dark .card__text { line-height: var(--leading-tight); }
.card--dark .card__text { color: var(--slate-400); }
.card__cta { color: var(--blue-600); font-weight: 500; margin-top: auto; }
.step__num { font-size: 13px; font-weight: 600; color: var(--blue-600); letter-spacing: var(--tracking-caps); text-transform: uppercase; }

/* Boxed call to action */
.cta { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 24px; padding: 40px; border-radius: var(--radius-lg); border: 1px solid var(--slate-200); }
.cta--surface { background: var(--slate-100); border: none; border-left: 4px solid var(--blue-600); }
.cta__title { font-size: 28px; font-weight: 700; letter-spacing: var(--tracking-tight); }
.cta__text { color: var(--slate-600); font-size: var(--text-md); line-height: var(--leading); }

/* Currency tiles */
.tile { padding: 22px; border-radius: var(--radius); border: 1px solid var(--slate-200); }
.tile__value { font-size: 26px; font-weight: 700; }
.tile__label { color: var(--slate-600); margin-top: 4px; }

/* Pills */
.pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.pill { padding: 6px 12px; border-radius: 20px; background: var(--on-dark-pill); color: var(--slate-300); font-size: 13px; font-weight: 500; }

/* ---------- 10. Brand tiles ---------- */
.brand {
  background: var(--white); border: 1px solid var(--slate-200); border-radius: 8px; height: 76px; padding: 14px 18px;
  display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 15px; text-align: center;
}
.brand img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; }

/* ---------- 11. Catalogue rows (vouchers) ---------- */
.cat { display: grid; grid-template-columns: 260px 1fr; gap: 24px; padding: 28px 0; border-bottom: 1px solid var(--slate-200); }
.cat__head { border-left: 4px solid var(--blue-600); padding-left: 18px; display: flex; flex-direction: column; gap: 6px; align-self: start; }
.cat__title { font-size: 22px; font-weight: 700; text-transform: uppercase; letter-spacing: -0.01em; }
.cat__meta { font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--slate-600); }
.cat__text { margin-top: 6px; color: var(--slate-600); font-size: 15px; line-height: var(--leading-tight); }
@media (max-width: 820px) { .cat { grid-template-columns: 1fr; } }

/* ---------- 12. Product columns and card mock-ups (prepaid cards) ---------- */
.product { display: flex; flex-direction: column; gap: 20px; }
.product__art { border: 1px solid var(--slate-200); border-radius: var(--radius-lg); padding: 40px 24px; display: flex; justify-content: center; background: var(--slate-50); }
.product__title { font-size: 26px; font-weight: 700; letter-spacing: -0.01em; }
.product__text { margin-top: 6px; color: var(--slate-600); line-height: var(--leading-tight); }
.bullets { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.bullets li { display: flex; gap: 12px; align-items: flex-start; line-height: 1.5; }
.bullets li::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--blue-600); margin-top: 8px; }

.mockcard {
  width: 132px; height: 208px; border-radius: var(--radius-lg); padding: 16px;
  display: flex; flex-direction: column; justify-content: space-between; box-shadow: var(--shadow-card);
}
.mockcard--silver { background: linear-gradient(160deg, #e9edf2, #b9c2cf); }
.mockcard--blue { background: linear-gradient(160deg, #1e3a8a, #2563eb 60%, #38bdf8); }
.mockcard--violet { background: linear-gradient(160deg, #111827, #4c1d95 70%, #7e22ce); }
.mockcard__top { display: flex; justify-content: space-between; align-items: flex-start; }
.mockcard__chip { width: 26px; height: 20px; border-radius: 4px; background: linear-gradient(135deg, #e8e0c2, #b8a46b); }
.mockcard__wave { width: 14px; height: 14px; border: 2px solid rgba(255, 255, 255, 0.7); border-radius: 50%; border-left-color: transparent; border-bottom-color: transparent; }
.mockcard__num { color: rgba(255, 255, 255, 0.85); font-size: 10px; letter-spacing: 0.12em; }
.mockcard__exp { color: rgba(255, 255, 255, 0.6); font-size: 9px; letter-spacing: var(--tracking-caps); margin-top: 6px; }

/* ---------- 13. FAQ ---------- */
.faq { display: flex; flex-direction: column; }
.faq details { border-bottom: 1px solid var(--slate-200); padding: 18px 0; }
.faq summary { cursor: pointer; font-size: 19px; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--blue-600); flex: none; }
.faq details[open] summary::after { content: "−"; }
.faq details p { margin-top: 12px; color: var(--slate-600); line-height: var(--leading); }

/* ---------- 14. Forms (contact) ---------- */
.contact { padding-top: 72px; padding-bottom: 96px; min-height: calc(100vh - var(--nav-h)); }
.contact__info { display: flex; flex-direction: column; gap: 6px; margin-top: 16px; color: var(--slate-300); }
.contact__info + .contact__info { margin-top: 8px; }
.contact__label { font-size: var(--text-xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--slate-400); }
.contact__value { color: var(--white); text-decoration: none; font-size: var(--text-lg); font-weight: 500; }
.panel { padding: 28px; border: 1px solid var(--on-dark-border); border-radius: var(--radius); background: var(--on-dark-surface); }
.form { display: flex; flex-direction: column; gap: 16px; }
.form__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.form__label { display: flex; flex-direction: column; gap: 6px; color: var(--slate-300); font-size: var(--text-sm); font-weight: 500; }
.field {
  width: 100%; padding: 11px 12px; border: 1px solid rgba(143, 163, 191, 0.25); border-radius: var(--radius-sm);
  background: var(--on-dark-surface-strong); color: var(--white); font-size: 15px; outline: none;
}
.field:focus { border-color: var(--blue-500); box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18); }
.field:focus-visible { box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18); }
select.field { background: var(--navy-800); }
textarea.field { resize: vertical; }
.form__error { padding: 10px 12px; border-radius: var(--radius-sm); font-size: var(--text-sm); color: var(--danger-text); background: var(--danger-bg); }
.form__note { font-size: 13px; color: var(--slate-400); line-height: 1.5; }
.form__note a { color: var(--slate-300); }
.form__success { display: flex; flex-direction: column; gap: 8px; padding: 8px 0; }
.form__success h2 { font-size: 22px; font-weight: 600; }
.form__success p { color: var(--slate-400); }

/* ---------- 15. Footer ---------- */
.site-footer { background: var(--navy-900); color: var(--slate-400); font-size: var(--text-sm); border-top: 1px solid var(--on-dark-divider); }
.footer__inner { padding-top: 48px; padding-bottom: 48px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 32px; }
.footer__brand { display: flex; flex-direction: column; gap: 12px; max-width: 34ch; }
.footer__tagline { letter-spacing: 0.1em; text-transform: uppercase; font-size: var(--text-xs); }
.footer__email { color: var(--blue-500); text-decoration: none; }
.footer__email:hover { color: var(--white); }
.footer__cols { display: flex; gap: 48px; flex-wrap: wrap; }
.footer__col { display: flex; flex-direction: column; gap: 10px; }
.footer__col a { color: var(--slate-300); text-decoration: none; }
.footer__col a:hover { color: var(--white); }
.footer__legal { border-top: 1px solid var(--on-dark-divider); }
.footer__legal .container { padding-top: 20px; padding-bottom: 20px; font-size: 12.5px; color: var(--slate-400); }

/* ---------- 16. Error page ---------- */
.error-page { min-height: calc(100vh - var(--nav-h)); display: flex; align-items: center; }
.error-page .container { padding-top: 72px; padding-bottom: 96px; }