/* ==========================================================================
   GEN house styles — the brand tokens, the element defaults and the
   components shared across GEN apps and tools, not just this site.

   Published at /brand/v1/gen.css, and its :root again as gen-tokens.json for
   consumers that cannot read a CSS variable. That makes this file a contract
   with repos this one cannot see: README's "The house style" section says who
   reads it, which half they want, and what changing it costs.

   Nothing here may assume a page structure. This site's own chrome lives in
   site.css, which loads after this file and overrides it freely.

   Mobile first: the rules outside a media query describe the phone layout,
   and wider screens add to them with `min-width`. Never a `max-width` query.
   ========================================================================== */

/* ---------- Brand tokens ---------- */
:root {
  --gen-navy: #0D2240;
  --gen-navy-2: #132C52;
  --gen-navy-line: rgba(13, 34, 64, 0.16);

  /* Three teals, because one cannot do all three jobs accessibly.
     --gen-teal is the brand colour: decorative only (rules, marks, borders,
     SVG strokes). At 3.3:1 on white it fails WCAG AA for body text, so text
     uses --gen-teal-text (4.5:1+ on white, frost and frost-2) and solid
     fills behind white text use --gen-teal-solid (4.6:1). Don't set
     `color: var(--gen-teal)` — that's the bug this split exists to stop. */
  --gen-teal: #2A9D8F;
  --gen-teal-text: #20776C;
  --gen-teal-solid: #238377;
  --gen-teal-solid-hover: #1C6B61;
  --gen-teal-dim: rgba(42, 157, 143, 0.16);

  --gen-gold: #E9C46A;
  --gen-gold-dim: rgba(233, 196, 106, 0.35);

  --gen-frost: #F4F6F9;
  --gen-frost-2: #E7ECF1;
  --gen-white: #FFFFFF;

  --gen-text-dim: rgba(13, 34, 64, 0.66);
  --gen-text-light: #F4F6F9;
  --gen-text-light-dim: rgba(244, 246, 249, 0.72);
  --gen-text-light-faint: rgba(244, 246, 249, 0.62);

  --gen-font: Calibri, Candara, "Segoe UI", Optima, Arial, sans-serif;
}

/* ---------- Reset and base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--gen-frost);
  color: var(--gen-navy);
  font-family: var(--gen-font);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  /* Stops a long word or wide token forcing a sideways scroll on a narrow
     screen. Horizontal overflow is a layout bug, never something to hide. */
  overflow-wrap: break-word;
}

h1,
h2,
h3 {
  font-weight: 700;
  color: var(--gen-navy);
}

img,
svg {
  max-width: 100%;
}

/* Anything you press gets a thumb-sized target. A pointer can hit a 20px
   control; a thumb on a phone cannot, and the site is read mostly on phones.
   Links are not included — an inline link in a sentence is exempt (WCAG
   2.5.8), so links that are really buttons set this on their own class. */
button,
input,
select,
textarea {
  min-height: 44px;
}

:focus-visible {
  outline: 2px solid var(--gen-teal-text);
  outline-offset: 3px;
}

.gen-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* First tab stop on a page: lets a keyboard user jump the navigation. */
.gen-skip-link {
  position: absolute;
  left: 8px;
  top: -60px;
  z-index: 1000;
  padding: 12px 20px;
  background: var(--gen-navy);
  color: var(--gen-text-light);
  font-weight: 700;
  text-decoration: none;
  transition: top 0.15s ease;
}

.gen-skip-link:focus {
  top: 8px;
}

/* ---------- Buttons ---------- */
.gen-btn {
  display: inline-block;
  min-height: 44px;
  padding: 14px 24px;
  font-family: var(--gen-font);
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-align: center;
  text-decoration: none;
  border: none;
  border-radius: 2px;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease,
    border-color 0.15s ease;
}

.gen-btn-primary {
  background: var(--gen-teal-solid);
  color: var(--gen-white);
}

.gen-btn-primary:hover {
  transform: translateY(-1px);
  background: var(--gen-teal-solid-hover);
}

.gen-btn-gold {
  background: var(--gen-gold);
  color: var(--gen-navy);
}

.gen-btn-gold:hover {
  transform: translateY(-1px);
}

.gen-btn-secondary {
  background: transparent;
  border: 1.5px solid var(--gen-navy-line);
  color: var(--gen-navy);
}

.gen-btn-secondary:hover {
  border-color: var(--gen-teal-text);
  color: var(--gen-teal-text);
}

/* ---------- Card ---------- */
/* The frost panel with a hairline border and a rounded corner — the house
   card treatment. Five page-level components wrote it out by hand, and it had
   already drifted: two of them hardcoded the border navy at a different alpha
   rather than using --gen-navy-line, and one of those was in a style
   attribute rather than a stylesheet. Padding and measure stay with each
   component, because those genuinely differ; only the three declarations that
   were being copied live here. */
.gen-card {
  background: var(--gen-frost-2);
  border: 1px solid var(--gen-navy-line);
  border-radius: 3px;
}

/* A card's call to action rather than a link in a sentence, so it takes a
   thumb-sized target. Callers set only font-size. */
.gen-cta-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--gen-teal-text);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.gen-cta-link:hover {
  border-color: var(--gen-teal-text);
}

/* ---------- Aside note ---------- */
/* The aside a .gen-card holds: three pages wanted one, and scoping it to the
   first of them is why the second carried the whole recipe again as an inline
   style. Padding and measure are the house's, not any one page's. */
.gen-note {
  padding: 30px 32px;
  max-width: 74ch;
  font-size: 15px;
  line-height: 1.7;
  color: var(--gen-text-dim);
}

.gen-note strong {
  color: var(--gen-navy);
}

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}