/* keys.migrantaction.ca
 *
 * Palette and typography are lifted from migrantaction.ca's Webflow build so the
 * two read as one organization: accent #bb0a0a, neutral-inverse #112a4b,
 * neutral-primary #f4f4ef, Fjalla One headings over Source Sans 3 body.
 *
 * Fonts are self-hosted in /fonts rather than pulled from Google. A visitor
 * fetching our keys is exactly the person whose IP should not be handed to a
 * third party, so the page makes no cross-origin requests at all. Both families
 * are SIL OFL 1.1; the licenses ship alongside them in /fonts.
 *
 * Every foreground/background pair below is verified against WCAG 2.1 AA.
 * The brand red is used as-is on light backgrounds (6.02:1) but cannot be used
 * on the navy (2.17:1), so dark mode substitutes a lightened tint of the same
 * hue at 7.19:1. Do not swap it back to #bb0a0a.
 */

@font-face {
  font-family: 'Fjalla One';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/fjalla-one-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+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fjalla One';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/fjalla-one-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;
}
/* Variable font: one file covers the whole 200-900 range, so 400 and 600 are
   drawn from it rather than being separate downloads. The format hint stays
   plain 'woff2'. The older 'woff2-variations' spelling is understood
   inconsistently, and a browser that does not recognise a format hint skips
   that src entirely and silently falls back to a system font. */
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url('/fonts/source-sans-3-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+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url('/fonts/source-sans-3-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;
}

:root {
  --brand-red: #bb0a0a;
  --brand-red-hover: #9e0808;
  --brand-navy: #112a4b;
  --brand-cream: #f4f4ef;
  --brand-sand: #e3e3d7;

  --bg: var(--brand-cream);
  --fg: var(--brand-navy);
  --muted: #3d4f68;
  --rule: #c9cabc;
  --card: #fbfbf8;
  --accent: var(--brand-red);
  --accent-hover: var(--brand-red-hover);
  --code-bg: var(--brand-sand);
  --note-bg: #f7ece2;
  --note-rule: #b8785a;
  --focus: var(--brand-red);
  /* Text drawn on top of --accent. Must be re-checked whenever --accent moves:
     the dark accent is a light tint, so white on it fails at 2.0:1. */
  --on-accent: #ffffff;

  --font-heading: 'Fjalla One', 'Helvetica Neue', Impact, sans-serif;
  --font-body: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0e2140;
    --fg: var(--brand-cream);
    --muted: #b9c4d4;
    --rule: #2f4568;
    --card: #16305a;
    --accent: #ff9d90;
    --accent-hover: #ffc0b6;
    --code-bg: #1c3a68;
    --note-bg: #2b2418;
    --note-rule: #8a6b3d;
    --focus: #ff9d90;
    --on-accent: #0e2140;
  }
}

/* Honour an explicit request for more contrast by pushing text to the pure
   brand endpoints, which sit at 13:1 and above. */
@media (prefers-contrast: more) {
  :root { --muted: var(--brand-navy); --rule: var(--brand-navy); }
}
@media (prefers-contrast: more) and (prefers-color-scheme: dark) {
  :root { --muted: #fff; --rule: #fff; }
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  padding: 0 1.25rem 5rem;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-weight: 400;
}

main { max-width: 46rem; margin: 0 auto; }

/* Text for assistive tech only. Clipped rather than display:none so screen
   readers still announce it; each download link carries its filename this way,
   because "Download .asc" repeated five times is ambiguous when a screen reader
   lists links out of their surrounding context. */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Keyboard users land here first and can jump the masthead. Visible only when
   focused, but never display:none, which would drop it from the tab order. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accent);
  color: var(--on-accent);
  padding: .6rem 1rem;
  z-index: 10;
  border-radius: 0 0 4px 0;
  font-weight: 600;
}
.skip-link:focus {
  left: 0;
}

h1, h2, h3 {
  font-family: var(--font-heading);
  font-weight: 400;
  letter-spacing: .005em;
}

h1 { font-size: 2.35rem; line-height: 1.15; margin: 2.5rem 0 .35rem; }
h2 {
  font-size: 1.6rem;
  line-height: 1.2;
  margin: 3rem 0 .85rem;
  padding-bottom: .4rem;
  border-bottom: 2px solid var(--accent);
}
h3 { font-size: 1.2rem; line-height: 1.25; margin: 2rem 0 .5rem; }

.lede {
  color: var(--muted);
  font-size: 1.1rem;
  margin: 0 0 2rem;
  max-width: 40rem;
}

p { margin: 0 0 1rem; max-width: 40rem; }

a { color: var(--accent); text-underline-offset: .15em; }
a:hover { color: var(--accent-hover); text-decoration-thickness: 2px; }

/* A 2px ring in the brand red on either background, plus an offset so it stays
   legible against dark card fills. */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 2px;
}

code, samp, kbd, pre { font-family: var(--font-mono); font-size: .875em; }

pre {
  background: var(--code-bg);
  padding: .85rem 1rem;
  border-radius: 6px;
  overflow-x: auto;
  margin: 0 0 1rem;
  line-height: 1.5;
  border: 1px solid var(--rule);
}

p code, li code, td code, dd code {
  background: var(--code-bg);
  padding: .1em .35em;
  border-radius: 3px;
}

.cert {
  background: var(--card);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--accent);
  border-radius: 6px;
  padding: 1rem 1.15rem 1.15rem;
  margin: 0 0 1rem;
}

.cert-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5rem .75rem;
  margin-bottom: .75rem;
}
.cert-head h3 { margin: 0; font-size: 1.15rem; }

.tag {
  font-family: var(--font-body);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: .15rem .55rem;
}

.dl { margin-left: auto; font-weight: 600; white-space: nowrap; }

dl { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1rem; }
dt { color: var(--muted); font-size: .88rem; font-weight: 600; }
dd { margin: 0; font-size: .93rem; min-width: 0; }

@media (max-width: 32rem) {
  dl { grid-template-columns: 1fr; gap: 0; }
  dt { margin-top: .6rem; }
  .dl { margin-left: 0; width: 100%; }
}

.fp {
  display: block;
  word-break: break-all;
  background: var(--code-bg);
  border: 1px solid var(--rule);
  padding: .35rem .5rem;
  border-radius: 4px;
  line-height: 1.5;
}

.fineprint {
  font-size: .92rem;
  color: var(--muted);
  border-top: 1px solid var(--rule);
  padding-top: .8rem;
  margin-top: 1.5rem;
}

.callout {
  background: var(--card);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--accent);
  border-radius: 6px;
  padding: 1.1rem 1.25rem;
  margin: 0 0 2rem;
}
.callout h2 {
  margin: 0 0 .6rem;
  padding: 0;
  border-bottom: 0;
  font-size: 1.35rem;
  color: var(--accent);
}
.callout > :last-child { margin-bottom: 0; }
.callout pre { margin-bottom: .75rem; }

.note {
  background: var(--note-bg);
  border: 1px solid var(--note-rule);
  border-left: 4px solid var(--note-rule);
  border-radius: 6px;
  padding: .95rem 1.15rem;
  margin: 0 0 1.5rem;
}
.note > :last-child { margin-bottom: 0; }

table { width: 100%; border-collapse: collapse; margin: 0 0 1rem; font-size: .95rem; }
th, td {
  text-align: left;
  padding: .5rem .6rem .5rem 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
th {
  color: var(--muted);
  font-weight: 600;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}

ul { margin: 0 0 1rem; padding-left: 1.25rem; max-width: 40rem; }
li { margin-bottom: .35rem; }

footer {
  margin-top: 4rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
  color: var(--muted);
  font-size: .9rem;
}

/* Windows High Contrast / forced-colors strips author colours; keep the
   structural borders visible by pinning them to system keywords. */
@media (forced-colors: active) {
  .cert, .note, pre, .fp { border: 1px solid CanvasText; }
  h2 { border-bottom-color: CanvasText; }
  :focus-visible { outline: 3px solid Highlight; }
}

@media print {
  body { padding: 0; background: #fff; color: #000; }
  .cert, pre, .fp, .note { border: 1px solid #999; background: #fff; }
  a { color: #000; }
  .skip-link { display: none; }
}