/* ==========================================================================
   GEN site styles — shared by every page.

   Mobile first: the rules outside a media query describe the phone layout.
   Wider screens add to them via `min-width` queries. Never add a
   `max-width` query here — that reintroduces the desktop-first pattern this
   file was rewritten to remove.

   Breakpoints, and the only four we use:
     520px  small phone  -> large phone
     700px  phone        -> tablet
     860px  tablet       -> desktop
    1000px  the site nav only — nothing else
   ========================================================================== */

/* ---------- 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-light: #5FB8AC;
  --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;

  --gen-wrap-max: 1180px;
}

/* ---------- 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 narrow
     screens. Horizontal overflow is always a layout bug — see CLAUDE.md. */
  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 every page: lets a keyboard user jump the nav. */
.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;
}

.gen-wrap {
  max-width: var(--gen-wrap-max);
  margin: 0 auto;
  padding-left: 22px;
  padding-right: 22px;
}

@media (min-width: 860px) {
  .gen-wrap {
    padding-left: 32px;
    padding-right: 32px;
  }
}

/* ---------- Site nav ---------- */
.gen-site-nav {
  position: sticky;
  top: 0;
  z-index: 999;
  /* Opaque rather than 94% + backdrop-filter: only 6% of the backdrop showed
     through, so the blur cost a composite every scroll frame to be invisible. */
  background: var(--gen-frost);
  border-bottom: 1px solid var(--gen-navy-line);
}

.gen-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 22px;
  max-width: var(--gen-wrap-max);
  margin: 0 auto;
}

/* Tracks .gen-wrap's gutter, not the 1000px nav step. Has to sit below the
   shorthand it overrides — a media query adds no specificity. */
@media (min-width: 860px) {
  .gen-nav-inner {
    padding-left: 32px;
    padding-right: 32px;
  }
}

.gen-brand {
  display: flex;
  align-items: center;
  min-height: 44px;
  gap: 10px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--gen-navy);
  text-decoration: none;
}

/* The GEN mark, cropped out of the full logo lockup. Transparent ground, so
   the same file sits on the frost nav and the navy footer. */
.gen-brand-mark {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

.gen-nav-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 44px;
  min-height: 44px;
  padding: 10px 12px;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  color: var(--gen-navy);
  background: transparent;
  border: 1px solid var(--gen-navy-line);
  border-radius: 2px;
  cursor: pointer;
}

.gen-nav-toggle-bars,
.gen-nav-toggle-bars::before,
.gen-nav-toggle-bars::after {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--gen-navy);
}

.gen-nav-toggle-bars {
  position: relative;
}

.gen-nav-toggle-bars::before,
.gen-nav-toggle-bars::after {
  content: "";
  position: absolute;
  left: 0;
}

.gen-nav-toggle-bars::before {
  top: -6px;
}

.gen-nav-toggle-bars::after {
  top: 6px;
}

/* Without JavaScript the panel stays shut, so the nav is also rendered as a
   plain list inside the footer — every page stays reachable either way. */
.gen-nav-links {
  display: none;
  font-size: 15px;
}

.gen-nav-links[data-open="true"] {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  padding: 12px 22px 20px;
  background: var(--gen-frost);
  border-bottom: 1px solid var(--gen-navy-line);
  /* The panel and the page share a background, so it needs a shadow to read
     as sitting above the content rather than merging into it. */
  box-shadow: 0 12px 20px rgba(13, 34, 64, 0.12);
}

.gen-nav-links a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 6px 2px;
  color: var(--gen-navy);
  text-decoration: none;
  transition: color 0.15s ease;
}

.gen-nav-links a:hover {
  color: var(--gen-teal-text);
}

/* :not(.gen-nav-cta) matters — the CTA is navy on gold, and recolouring its
   text to teal drops it to 3.2:1. The button already reads as current from
   its fill. */
.gen-nav-links a[aria-current="page"]:not(.gen-nav-cta) {
  color: var(--gen-teal-text);
  font-weight: 700;
}

.gen-nav-cta {
  justify-content: center;
  margin-top: 8px;
  padding: 11px 20px;
  background: var(--gen-gold);
  border: 1px solid var(--gen-gold);
  border-radius: 2px;
  color: var(--gen-navy);
  font-weight: 700;
}

.gen-nav-cta:hover {
  background: transparent;
  border-color: var(--gen-navy);
  color: var(--gen-navy);
}

/* Not 860px like everything else: the wordmark plus six links needs ~890px
   before it stops wrapping, and a fallback face sets it wider still. */
@media (min-width: 1000px) {
  .gen-nav-inner {
    padding-top: 16px;
    padding-bottom: 16px;
  }

  .gen-brand {
    font-size: 14px;
  }

  .gen-nav-toggle {
    display: none;
  }

  /* Inline row regardless of the button's state — closing the panel on a
     resize is then a layout concern, not a JavaScript one. */
  .gen-nav-links,
  .gen-nav-links[data-open="true"] {
    display: flex;
    position: static;
    flex-direction: row;
    align-items: center;
    gap: 26px;
    padding: 0;
    background: none;
    border: none;
    font-size: 14px;
  }

  .gen-nav-links a {
    min-height: 0;
  }

  .gen-nav-cta {
    margin-top: 0;
    padding: 9px 20px;
  }
}

/* ---------- 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);
}

/* ---------- Section furniture ---------- */
/* The vertical rhythm between sections, and so the clearance under any rule a
   section opens beneath — content butted straight up against the page hero's
   bottom border on six pages, and against the stat band's on the homepage.
   Lost when the export was split into per-page stylesheets. The thank-you
   pages used to restate it by hand; this rule is what they rely on now, so
   keep it if you move it. */
main > section {
  padding: 56px 0;
}

/* A section continuing straight on from the one above rather than opening a
   band of its own, so it drops the top half of that rhythm and keeps the
   bottom. One class beats the nine `style="padding-top:0"` these sections used
   to carry — and beats `main > section` on specificity, a class over two type
   selectors, so it needs no !important. Not folded into any page's own section
   class: /whatwedo uses .prose-section twice and only one of them is flush. */
.gen-flush-top {
  padding-top: 0;
}

/* Body copy for a page that is mostly prose. Cap the measure here rather than
   on the .gen-wrap: narrowing the wrap pulls the column off the hero's left
   edge — 130px out at 1440. */
.prose-section p {
  color: var(--gen-text-dim);
  font-size: 16px;
  line-height: 1.75;
  margin-bottom: 16px;
  max-width: 74ch;
}

.prose-section strong {
  color: var(--gen-navy);
  font-weight: 600;
}

/* 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);
}

.gen-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  font-size: 15px;
  font-style: italic;
  color: var(--gen-teal-text);
}

.gen-eyebrow::before {
  content: "";
  width: 20px;
  height: 1px;
  background: var(--gen-teal);
}

.gen-file-eyebrow {
  font-size: 14.5px;
  font-style: italic;
  color: var(--gen-teal-text);
}

.gen-section-head {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--gen-navy-line);
}

.gen-section-title {
  margin-top: 8px;
  font-size: clamp(1.5rem, 2.5vw, 2.05rem);
  font-weight: 700;
  color: var(--gen-navy);
  max-width: 22ch;
}

@media (min-width: 860px) {
  .gen-section-head {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 40px;
    margin-bottom: 40px;
  }
}

/* ---------- Card ---------- */
/* The frost panel with a hairline border and a rounded corner — the site's
   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;
}

/* ---------- Stat band ---------- */
.gen-stat-band {
  border-top: 1px solid var(--gen-navy-line);
  border-bottom: 1px solid var(--gen-navy-line);
  color: var(--gen-navy);
}

/* Dividers come from a 1px gap showing the grid's own background, so they
   land correctly at any column count without nth-child arithmetic. */
.gen-stat-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--gen-navy-line);
}

.gen-stat-cell {
  padding: 28px 22px;
  background: var(--gen-frost-2);
}

.gen-stat-num {
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 700;
  color: var(--gen-navy);
}

.gen-stat-label {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--gen-text-dim);
}

@media (min-width: 520px) {
  .gen-stat-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 860px) {
  .gen-stat-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .gen-stat-cell {
    padding: 34px 28px;
  }
}

/* Three-up variant (homepage). Stays single-column below 860 rather than
   inheriting the two-up above, which would orphan the third cell. */
.gen-stat-grid.is-three {
  grid-template-columns: 1fr;
}

@media (min-width: 860px) {
  .gen-stat-grid.is-three {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ---------- Info table ---------- */
/* The three audience pages (enterprise, law-enforcement, policymakers) each
   render the same category table, and each carried a byte-identical copy of
   this block — comment included. A change to the stacked-phone layout or the
   700px breakpoint had to be made three times, and a partial fix meant the
   same table behaving differently on two pages, invisible until someone
   opened both on a phone. */
/* Stacked blocks on a phone — a three-column table cannot fit. The header
   row is meaningless once cells stack, so it is hidden until the real
   table layout comes back at 700px. */
.info-table,
.info-table tbody,
.info-table tr,
.info-table th,
.info-table td{ display:block; }
.info-table{
  width:100%;
  border-collapse:collapse;
  margin-top:20px;
}
.info-table thead{ display:none; }
.info-table tr{
  padding:16px 0;
  border-bottom:1px solid var(--gen-navy-line);
}
.info-table th{
  text-align:left;
  font-size:12.5px;
  font-style:italic;
  color:var(--gen-teal-text);
  font-weight:400;
}
.info-table td{
  padding:4px 0;
  vertical-align:top;
  font-size:14.5px;
  color:var(--gen-text-dim);
  line-height:1.6;
}
.info-table td.cat{
  font-weight:700;
  color:var(--gen-navy);
}
@media (min-width:700px){
  .info-table{ display:table; }
  .info-table thead{ display:table-header-group; }
  .info-table tbody{ display:table-row-group; }
  .info-table tr{ display:table-row; padding:0; border-bottom:none; }
  .info-table th{
    display:table-cell;
    padding:10px 20px 10px 0;
    border-bottom:2px solid var(--gen-navy-line);
  }
  .info-table td{
    display:table-cell;
    padding:18px 20px 18px 0;
    border-bottom:1px solid var(--gen-navy-line);
  }
  .info-table td.cat{ width:220px; }
}

/* ---------- Page hero ---------- */
/* Every page but the homepage opens with one of these. All nine page
   stylesheets carried their own copy of this block; only the h1's size and
   measure ever genuinely differed, and the copies had already drifted on
   line-height and padding. Colour, font-family and font-weight are inherited
   from body and the heading rules above, so the copies restated them to no
   effect. Background is NOT inherited — it stays declared here so the band
   paints its own ground rather than relying on whatever sits behind it
   happening to be the same colour.

   Per-page stylesheets now override only what actually differs. */
.page-hero {
  background: var(--gen-frost);
  padding: 64px 0 56px;
  border-bottom: 1px solid var(--gen-navy-line);
}

.page-hero h1 {
  /* Only margin-top: the h1 keeps the browser's own bottom margin, which is
     what the `style="margin-top:14px"` these heroes used to carry did too. */
  margin-top: 14px;
  font-size: clamp(2.1rem, 3.8vw, 3.2rem);
  line-height: 1.08;
  max-width: 20ch;
}

.page-hero p {
  margin-top: 18px;
  max-width: 56ch;
  font-size: 16px;
  line-height: 1.7;
  color: var(--gen-text-dim);
}

/* The one word a hero headline leans on. */
.page-hero h1 em {
  font-style: italic;
  color: var(--gen-teal-text);
}

/* ---------- Thank-you card ---------- */
/* Shared rather than page-scoped: /thanks and /donate-thanks are the same card
   with different words in it, and a second copy is a second thing to keep in
   step. The frost-and-border treatment is not restated here — both pages carry
   .gen-card for that, so this is only what a thank-you card adds on top. */

.thanks-next{
  padding:32px 28px;
  max-width:60ch;
}
.thanks-next h2{
  font-size:1.25rem;
  font-weight:700;
  color:var(--gen-navy);
  margin:0 0 12px;
}
.thanks-next p{ margin:0 0 18px; }
.thanks-next ul{
  margin:0;
  padding-left:20px;
  display:grid;
  gap:8px;
}

/* The house treatment for an inline link, same as .intent-card a on the
   contact page: the gold underline is what distinguishes it, so the link is
   not signalled by colour alone. */
.thanks-next a{
  color:var(--gen-navy);
  text-decoration:none;
  border-bottom:1px solid var(--gen-gold);
}
.thanks-next a:hover,
.thanks-next a:focus{ border-bottom-color:var(--gen-navy); }

/* ---------- Split band ---------- */
/* Padding on the band, not on the .gen-wrap inside it — the same shape as
   .page-hero above and .services-band and .workflow-band in the page
   stylesheets. Seven bands used to carry it as
   `style="padding:56px 0"` on the wrap instead, where the shorthand's `0`
   also cancelled .gen-wrap's own left/right padding and left the eyebrow,
   heading and button hard against both screen edges at 375px. Out here the
   shorthand is safe, because the band owns no gutters to cancel. */
.gen-split-band {
  background: var(--gen-navy);
  color: var(--gen-text-light);
  padding: 56px 0;
}

/* The band has to state its own heading colour. `h1, h2, h3 { color: navy }`
   near the top of this file is more specific than the band's inherited
   `color`, so without this a heading in here renders navy on navy — a 1:1
   contrast ratio, i.e. invisible. That shipped on seven pages. axe did spot
   it, but filed it under `incomplete` rather than `violations`, which is why
   the rendered suite now fails on those too. */
.gen-split-band h1,
.gen-split-band h2,
.gen-split-band h3 {
  color: var(--gen-white);
}

.gen-split-band p {
  color: var(--gen-text-light-dim);
  line-height: 1.7;
  max-width: 42ch;
}

/* ---------- Footer ---------- */
.gen-footer {
  padding: 36px 0 24px;
  font-size: 13.5px;
  background: var(--gen-navy);
  color: var(--gen-text-light-dim);
}

.gen-footer-grid {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(244, 246, 249, 0.16);
}

.gen-footer a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: inherit;
  text-decoration: none;
}

.gen-footer a:hover {
  color: var(--gen-white);
}

/* .gen-brand hardcodes navy for the header, where the ground is frost. The
   footer reuses the same wordmark on the navy fill, where that renders navy
   on navy — invisible, on every page. Same root cause as the split band: a
   component that states an absolute colour cannot be dropped onto a dark
   ground. */
.gen-footer .gen-brand {
  color: var(--gen-text-light);
}

.gen-footer-nav ul,
.gen-footer-serve ul,
.gen-footer-social ul {
  gap: 14px 22px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
}

.gen-footer-social ul {
  display: flex;
  flex-wrap: wrap;
}

/* Seven links at one per row made the site list taller than the phone screen
   it was meant to fit on. Two columns halve that, and the gap above carries
   over, so the links keep both their 44px targets and the space between them.
   Deliberately not auto-fit: at 320px the column is too narrow for two tracks
   of a sensible minimum, so auto-fit collapses to the single stack this exists
   to undo. */
.gen-footer-nav ul {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.gen-footer-serve ul {
  display: flex;
  flex-direction: column;
}

.gen-footer h2 {
  margin: 0 0 8px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gen-text-light-faint);
}

.gen-footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
  padding-top: 18px;
  font-size: 12px;
  /* Was 0.45 alpha, which fell under 4.5:1 on navy. */
  color: var(--gen-text-light-faint);
}

@media (min-width: 700px) {
  .gen-footer {
    padding: 56px 0 32px;
  }

  /* Two children only. space-between across all four opened 240px holes
     mid-footer, because a wrapping row spaces each of its rows separately. */
  .gen-footer-grid {
    flex-direction: row;
    justify-content: space-between;
    gap: 24px 56px;
    padding-bottom: 32px;
  }

  .gen-footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 24px 56px;
  }

  /* The lists can wrap to make room; the wordmark can only break. */
  .gen-footer-brand {
    flex-shrink: 0;
  }
}

/* ---------- 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;
  }
}