/* ============================================================
   IMPACT Learning Hub — Design system
   ------------------------------------------------------------
   Palette pulled from the real IMPACT logo (blue) plus a
   fieldwork-toned amber accent. Warm paper background instead
   of stark white, matching the letterhead's cream. Fraunces
   for display type (character, a little ink-trap personality),
   Inter for body and UI (gets out of the way at small sizes).
   Panels are flat with a 1px border and a colored top rule per
   division — no drop-shadow card kit, no rounded-everything.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500..800&family=Inter:wght@400;500;600;700&display=swap');

:root{
  /* --- Core palette --- */
  --ink:        #0F1B3C;   /* primary text, headers */
  --ink-soft:   #4A5578;   /* secondary text */
  --paper:      #F6F4EE;   /* page background, warm not white */
  --surface:    #FFFFFF;   /* panels sitting on paper */
  --blue:       #1855D6;   /* IMPACT brand blue, from the logo */
  --blue-deep:  #103E9E;   /* hover/active state of blue */
  --amber:      #E8871E;   /* fieldwork accent — CTAs, highlights */
  --amber-deep: #C66E0F;
  --green:      #1F7A5C;   /* success, agriculture-adjacent */
  --stone:      #D6D0C0;   /* borders, dividers — warm, not cold grey */
  --stone-soft: #EAE6DA;   /* subtle fills */

  /* --- Division colors (used as accents/top-rules only) --- */
  --div-data:   #3454D1;
  --div-tech:   #1855D6;
  --div-lab:    #0E8A7D;
  --div-agri:   #4C8C1F;
  --div-lang:   #A6472E;
  --div-hub:    #E8871E;

  /* --- Type --- */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;

  /* --- Scale (Elements of Typographic Style-ish ratio) --- */
  --step--1: 0.875rem;
  --step-0:  1rem;
  --step-1:  1.25rem;
  --step-2:  1.6rem;
  --step-3:  2.1rem;
  --step-4:  2.8rem;
  --step-5:  3.6rem;

  /* --- Layout --- */
  --rail: 24px;              /* left/right page margin on mobile */
  --rail-lg: 48px;            /* on wider screens */
  --content-max: 1180px;
  --radius: 3px;              /* deliberately small — not the rounded-card default */
  --border: 1px solid var(--stone);
}

/* ============================================================
   Reset
   ============================================================ */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4{
  font-family: var(--font-display);
  color: var(--ink);
  line-height: 1.15;
  margin: 0 0 0.5em;
  font-weight: 600;
  letter-spacing: -0.01em;
}
h1{ font-size: var(--step-5); font-weight: 700; }
h2{ font-size: var(--step-3); }
h3{ font-size: var(--step-2); }
h4{ font-size: var(--step-1); font-family: var(--font-body); font-weight: 700; }
p{ margin: 0 0 1em; max-width: 62ch; }
a{ color: var(--blue); text-decoration: none; }
a:hover{ text-decoration: underline; }
img{ max-width: 100%; display: block; }
ul, ol{ margin: 0; padding: 0; list-style: none; }
button{ font-family: inherit; }

/* Visible keyboard focus, always */
:focus-visible{
  outline: 3px solid var(--blue);
  outline-offset: 2px;
}

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

/* ============================================================
   Layout helpers
   ============================================================ */
.wrap{
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--rail);
}
@media (min-width: 900px){
  .wrap{ padding: 0 var(--rail-lg); }
}
.section{ padding-block: 64px; }
.section-tight{ padding-block: 32px; }

/* ============================================================
   Buttons — active-voice labels, no arrow suffixes
   ============================================================ */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 10px 22px;
  border: 1.5px solid var(--ink);
  border-radius: var(--radius);
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--step--1);
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn:hover{
  background: var(--blue-deep);
  border-color: var(--blue-deep);
  text-decoration: none;
}
.btn.primary{
  background: var(--amber);
  border-color: var(--amber);
  color: var(--ink);
}
.btn.primary:hover{ background: var(--amber-deep); border-color: var(--amber-deep); }
.btn.ghost{
  background: transparent;
  color: var(--ink);
}
.btn.ghost:hover{ background: var(--stone-soft); }
.btn.small{ min-height: 38px; padding: 6px 16px; }
.btn.block{ width: 100%; }
.btn:disabled{ opacity: 0.55; cursor: not-allowed; }

/* ============================================================
   Panels — flat, bordered, colored top-rule per division.
   Deliberately not the rounded-shadow SaaS card default.
   ============================================================ */
.panel{
  background: var(--surface);
  border: var(--border);
  border-radius: var(--radius);
  padding: 24px;
}
.panel.rule-data{ border-top: 4px solid var(--div-data); }
.panel.rule-tech{ border-top: 4px solid var(--div-tech); }
.panel.rule-lab{ border-top: 4px solid var(--div-lab); }
.panel.rule-agri{ border-top: 4px solid var(--div-agri); }
.panel.rule-lang{ border-top: 4px solid var(--div-lang); }
.panel.rule-hub{ border-top: 4px solid var(--div-hub); }

/* ============================================================
   Forms
   ============================================================ */
.field{ display: grid; gap: 6px; margin-bottom: 16px; }
.field label{ font-weight: 600; font-size: var(--step--1); }
input, select, textarea{
  font-family: var(--font-body);
  font-size: var(--step-0);
  min-height: 46px;
  padding: 10px 14px;
  border: 1.5px solid var(--ink-soft);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  width: 100%;
}
textarea{ min-height: 100px; resize: vertical; }
input:focus, select:focus, textarea:focus{
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(24,85,214,0.15);
}

/* ============================================================
   Badges — status labels, sentence case (no tracked-out caps)
   ============================================================ */
.badge{
  display: inline-block;
  padding: 3px 12px;
  border-radius: 99px;
  font-size: var(--step--1);
  font-weight: 600;
}
.badge.ok{ background: #DCEFD5; color: #1F5A0C; }
.badge.wait{ background: #FBE7C6; color: #7A4A00; }
.badge.bad{ background: #F8DAD3; color: #7A2012; }
.badge.neutral{ background: var(--stone-soft); color: var(--ink-soft); }

/* ============================================================
   Utility
   ============================================================ */
.muted{ color: var(--ink-soft); }
.center{ text-align: center; }
.mt-0{ margin-top: 0; }
.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;
}