/* ==========================================================================
   SOCEC-BA — base.css
   Design tokens, reset, typography and utilities.
   Palette taken from the SOCEC-BA logo (navy, blue, green, lime).
   ========================================================================== */

:root {
  /* Brand */
  --navy: #07216d;
  --blue: #0a59b4;
  --blue-light: #2d7fe0;
  --green: #2a7d1b;
  --lime: #7bb82a;
  --gold: #f2b632;
  --btn-a: #1f7a14;
  --btn-b: #3f9a1d;
  --grad-btn: linear-gradient(135deg, var(--btn-a), var(--btn-b));
  --grad-hero: linear-gradient(120deg, #06185a, #07216d 50%, #0a59b4);

  /* Surfaces & text (light) */
  --bg: #ffffff;
  --surface: #ffffff;
  --alt: #f4f7fb;
  --fg: #0b1a47;
  --muted: #52607f;
  --line: #dbe3ef;
  --link: #0a59b4;
  --green-text: #2a7d1b;
  --deep: #07216d;
  --dots: rgba(7, 33, 109, .09);
  --shadow: 0 10px 30px rgba(7, 33, 109, .10);
  --shadow-lg: 0 24px 60px rgba(7, 33, 109, .18);

  /* Type */
  --font-display: "Bricolage Grotesque", "Trebuchet MS", system-ui, sans-serif;
  --font-body: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Layout */
  --header-h: 76px;
  --radius: 16px;
  --radius-sm: 10px;
  --maxw: 1232px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #061031; --surface: #0c1c4a; --alt: #0a1740; --fg: #e9eefc; --muted: #a2b2d8;
    --line: #213468; --link: #6aa7ff; --green-text: #7bd05f; --deep: #040c28;
    --dots: rgba(255, 255, 255, .07);
    --shadow: 0 10px 30px rgba(0, 0, 0, .35); --shadow-lg: 0 24px 60px rgba(0, 0, 0, .5);
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 24px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font-family: var(--font-body); font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg { max-width: 100%; }
img { height: auto; display: block; }
h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.15; margin: 0; text-wrap: balance; letter-spacing: -.01em; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--blue-light); outline-offset: 3px; border-radius: 6px; }

/* Inline UI icons (stroke follows text colour) */
svg.i { width: 1.2em; height: 1.2em; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* Utilities */
.wrap {
  max-width: var(--maxw); margin-inline: auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.wrap--narrow { max-width: 860px; }
.skip-link {
  position: fixed; left: 16px; top: -60px; z-index: 200; background: var(--navy); color: #fff;
  padding: 10px 16px; border-radius: 8px; transition: top .2s;
}
.skip-link:focus { top: 12px; }
.hide-sm { display: initial; }
.nb { white-space: nowrap; }

.sec { padding-block: 88px; }
.sec--tight { padding-block: 48px; }
.sec--alt { background: var(--alt); }
.sec--dotted { background-image: radial-gradient(var(--dots) 1.6px, transparent 1.8px); background-size: 16px 16px; }

.eyebrow { font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--green-text); }
.eyebrow--light { color: #c4ee7e; }
.rule { display: block; width: 92px; height: 4px; border-radius: 4px; background: color-mix(in srgb, var(--lime) 40%, transparent); position: relative; }
.rule::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; border-radius: 50%; background: var(--blue); transform: translate(-50%, -50%); }
.rule--left::after { left: 0; transform: translate(0, -50%); }

.sec-head { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; margin-bottom: 40px; }
.sec-head h2 { font-size: clamp(28px, 3.6vw, 42px); font-weight: 500; }
.sec-head__sub { color: var(--muted); max-width: 620px; }

/* Scroll reveal (only when JS is on; content stays visible without it) */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.js .reveal.is-in { opacity: 1; transform: none; }

@media (max-width: 720px) {
  .sec { padding-block: 64px; }
  .hide-sm { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  .js .reveal { opacity: 1; transform: none; }
}