/* ---------------------------------------------------------------------------
   Fonts. Variable, latin subset, self-hosted. swap so text is readable while
   they load rather than invisible.
   --------------------------------------------------------------------------- */

@font-face {
  font-family: "Noto Sans";
  src: url("../fonts/noto-sans-latin-var.10f8972e3579.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat-latin-var.311d352d9323.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
}

/* ---------------------------------------------------------------------------
   Reset and base
   --------------------------------------------------------------------------- */

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

html {
  /* Never a fixed px size: the browser's own text size setting has to win. */
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--face-text);
  font-size: var(--size-0);
  line-height: var(--leading-body);
  /* SC 1.4.12: authored spacing must survive a user stylesheet overriding it,
     so nothing here sets a height that could clip reflowed text. */
}

h1,
h2,
h3,
h4 {
  font-family: var(--face-display);
  line-height: var(--leading-tight);
  font-weight: 700;
  letter-spacing: -0.015em;
  text-wrap: balance;
  margin: 0 0 var(--space-4);
  /* Dutch compounds are long and can overflow a narrow screen at display size.
     break-word only acts when a word genuinely does not fit, so it is safe to
     leave on. Deliberately NOT hyphens: auto here - paired with text-wrap:
     balance it hyphenated "waarbor-gen" in the headline at 1440px, where there
     was room to simply wrap. Hyphenation stays where the container really is
     too narrow for the word, which is the card titles below. SC 1.4.10. */
  overflow-wrap: break-word;
}

h1 {
  font-size: var(--size-5);
}
h2 {
  font-size: var(--size-4);
  margin-top: var(--space-7);
}
h3 {
  font-size: var(--size-3);
  margin-top: var(--space-6);
}
h4 {
  font-size: var(--size-2);
  margin-top: var(--space-5);
}

p,
ul,
ol,
dl {
  margin: 0 0 var(--space-4);
}

li + li {
  margin-top: var(--space-2);
}

img {
  max-width: 100%;
  height: auto;
}

/* ---------------------------------------------------------------------------
   Links

   Underlined always. The audit failed SC 1.4.1 because links were told apart
   from surrounding text by colour alone, and were distinguished on hover only.
   --------------------------------------------------------------------------- */

a {
  color: var(--link);
  text-decoration: underline;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
}

a:hover {
  text-decoration-thickness: 0.18em;
}

/* SC 1.4.10 Reflow: the cookie and privacy statements use whole URLs as link
   text, and an unbroken URL pushed the page to 437px wide on a phone.
   anywhere, not break-word: only anywhere lowers the min-content width that
   a grid column sizes itself by. */
main a {
  overflow-wrap: anywhere;
}

/* SC 2.5.8: a link block stands on its own line, so the inline exception
   does not cover it. */
.block-link a {
  display: inline-flex;
  align-items: center;
  min-height: var(--target-min);
}

/* ---------------------------------------------------------------------------
   Focus

   Two-tone: a yellow ring with a deep-navy outer edge. On a light ground the
   navy edge carries the 3:1 required by SC 1.4.11; on the navy footer and on
   navy buttons the yellow does. One rule works on every ground, so no
   component has to remember to override it.
   --------------------------------------------------------------------------- */

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px var(--focus-contrast);
  border-radius: 2px;
}

/* SC 2.4.11 Focus Not Obscured: nothing is sticky, so a focused element cannot
   be hidden behind a fixed header. If a sticky header is ever added, it needs
   scroll-padding-top here to match. */

/* ---------------------------------------------------------------------------
   Skip link (SC 2.4.1 Bypass Blocks - failed on the live site site-wide)
   --------------------------------------------------------------------------- */

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: var(--space-4);
  z-index: 100;
  transform: translateY(-200%);
  background: var(--focus);
  color: var(--ink-deep);
  font-family: var(--face-ui);
  font-weight: 600;
  text-decoration: none;
  padding: var(--space-3) var(--space-5);
  border-bottom: 4px solid var(--ink-deep);
}

.skip-link:focus {
  transform: translateY(0);
}

/* ---------------------------------------------------------------------------
   Layout
   --------------------------------------------------------------------------- */

.page {
  width: 100%;
  max-width: var(--page-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Prose is capped at a readable measure even inside a wide page. */
.prose {
  max-width: var(--measure);
}

/* The editor's stream.
 *
 * Two columns: the reading measure, then the spare width. Prose sits in the
 * first column so the page stays left-aligned, and anything marked wide spans
 * both.
 * Before this, the whole stream was capped at the measure, so a four-card grid
 * and a call-to-action band both crammed into a 749px column on a 1335px
 * screen and the page looked like it was hugging the left edge. */
.stream {
  display: grid;
  grid-template-columns: min(var(--measure), 100%) 1fr;
}

.stream > * {
  grid-column: 1;
}

/* Wagtail wraps every StreamField block in its own
   <div class="w-block-<name> block-<name>">, so the grid item is that wrapper -
   a marker class inside the block template sits on a grandchild and does
   nothing. These are the blocks that get the full page width. */
.stream > .block-cartouche_grid,
.stream > .block-call_to_action,
.stream > .block-table,
.stream > .block-image {
  grid-column: 1 / -1;
}

.content-image {
  margin: 0;
}

.content-image img {
  display: block;
}

/* One rhythm rule for the whole stream, rather than a margin per block type:
   every block sits the same distance from whatever precedes it, however the
   editor orders them. */
.stream > * + *,
.prose > * + * {
  margin-top: var(--space-6);
}

/* Each block's own first element must not add its margin on top of the
   stream's rhythm - a heading was landing 5rem below the block before it
   (2rem from the wrapper, 3rem of its own). */
.stream > * > :first-child {
  margin-top: 0;
}

.stream > :first-child,
.prose > :first-child {
  margin-top: 0;
}

/* A heading still wants more air above it than a paragraph does. */
.stream > .block-heading {
  margin-top: var(--space-7);
}

/* A wide block coming out of prose needs more air than a paragraph does. */
.stream > .block-cartouche_grid,
.stream > .block-call_to_action,
.stream > .block-table {
  margin-top: var(--space-7);
}

.section {
  padding-block: var(--space-6);
}

.section--tinted {
  background: var(--surface);
}

/* ---------------------------------------------------------------------------
   Header and navigation

   The live site's layout: a white bar with the logo and the header links,
   and the menu. Unlike the live site, the menu is a visible row whenever
   there is room for it - hiding ten destinations behind a hamburger at every
   width makes a sighted visitor open it to find out what the site contains.
   Nothing is sticky, so SC 2.4.11 holds without scroll-padding.
   --------------------------------------------------------------------------- */

.masthead {
  background: var(--paper);
  box-shadow: 0 8px 16px 0 rgb(74 85 94 / 0.15);
  position: relative;
  z-index: 1;
}

.masthead__inner {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-areas:
    "logo toggle"
    "tools tools";
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-5);
  padding-block: var(--space-3);
}

.masthead__home {
  grid-area: logo;
}

.masthead__tools {
  grid-area: tools;
}

.menu-toggle {
  grid-area: toggle;
  justify-self: end;
}

@media (width >= 64rem) {
  .masthead__inner {
    grid-template-areas: "logo tools";
  }
}

.masthead__home {
  display: inline-flex;
  justify-self: start;
  align-items: center;
  min-height: var(--target-min);
}

.masthead__home img {
  display: block;
  width: clamp(12rem, 40vw, 20rem);
  height: auto;
}

.masthead__tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-5);
  font-family: var(--face-ui);
}

/* The live header sets these in the brand orange, 3.44:1 at body size. */
.masthead__login,
.lang-switch {
  display: inline-flex;
  align-items: center;
  min-height: var(--target-min);
  color: var(--link);
  font-weight: 600;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: var(--size-0);
}

.masthead__login:hover,
.lang-switch:hover {
  text-decoration: underline;
}

.lang-switch__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: var(--space-4);
}

/* The menu band. White on navy, the current page marked by an orange bar
   and a heavier weight - never by colour alone (SC 1.3.1, SC 1.4.1). */
.menu-band {
  background: var(--ink);
}

.nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--space-5);
}

.nav__list li + li {
  margin-top: 0;
}

/* The header and the menu band run the full width of the window, as on the
   live site; the page cap is for content. Capped, the logo started 187px in
   on a 1876px screen while the white bar ran to the edge. */
.masthead .page,
.menu-band .page {
  max-width: none;
}

/* The nine destinations need about 1480px for one row. Below that a ragged
   wrap - 7 + 2, or 8 + 1 with Contact alone at the far end - reads as a
   layout error, so they sit in an even grid of five: still all visible,
   still in reading order. Change the breakpoint when the menu changes. */
@media (64rem <= width < 94rem) {
  .nav__list {
    display: grid;
    grid-template-columns: repeat(5, max-content);
    justify-content: space-between;
  }
}

@media (width >= 94rem) {
  .nav__list {
    justify-content: space-between;
  }
}

.nav__link {
  display: inline-flex;
  align-items: center;
  min-height: 3.25rem;
  color: var(--paper);
  font-family: var(--face-ui);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 4px solid transparent;
  border-top: 4px solid transparent;
}

.nav__link:hover {
  border-bottom-color: var(--paper);
}

.nav__link[aria-current="page"],
.nav__link[aria-current="true"] {
  border-bottom-color: var(--signal);
  font-weight: 700;
}

/* Windows high contrast forces a transparent border to the text colour, so
   every item would carry bars. Unmarked items blend into the ground; the
   current one keeps a bar in the system's highlight colour. */
@media (forced-colors: active) {
  .nav__link {
    border-color: Canvas;
  }

  .nav__link[aria-current="page"],
  .nav__link[aria-current="true"] {
    border-bottom-color: Highlight;
  }
}

/* The disclosure button. menu.js unhides it; CSS decides whether it shows. */
.menu-toggle {
  display: none;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--target-min);
  padding: var(--space-2) var(--space-4);
  background: var(--signal);
  color: var(--ink-deep);
  border: 0;
  font: 600 var(--size-0) var(--face-ui);
  cursor: pointer;
}

.menu-toggle__bars,
.menu-toggle__bars::before,
.menu-toggle__bars::after {
  display: block;
  width: 1.25rem;
  height: 2px;
  background: currentcolor;
}

.menu-toggle__bars {
  position: relative;
}

.menu-toggle__bars::before,
.menu-toggle__bars::after {
  content: "";
  position: absolute;
  left: 0;
}

.menu-toggle__bars::before {
  top: -6px;
}

.menu-toggle__bars::after {
  top: 6px;
}

/* Narrow screens: a vertical list, collapsed behind the button when the
   script is running. Without the script (.js-menu absent) it stays open. */
@media (width < 64rem) {
  .nav__list {
    flex-direction: column;
    padding-block: var(--space-2);
  }

  .nav__link {
    border: 0;
    border-left: 4px solid transparent;
    padding-left: var(--space-3);
    width: 100%;
  }

  .nav__link[aria-current="page"],
  .nav__link[aria-current="true"] {
    border-left-color: var(--signal);
  }

  .js-menu .menu-toggle {
    display: inline-flex;
  }

  .js-menu .masthead:has(.menu-toggle[aria-expanded="false"]) .menu-band {
    display: none;
  }
}

/* ---------------------------------------------------------------------------
   Home page

   The live site's sections, in its order: the ring photo with the headline,
   the ministry band, the welcome text beside the cards, the orange band.
   --------------------------------------------------------------------------- */

.home-hero {
  position: relative;
  display: grid;
  align-items: center;
  min-height: clamp(20rem, 36vw, 34rem);
  background: var(--ink-deep);
  color: var(--paper);
  /* The overlay below is painted past the text box; this keeps it inside
     the hero instead of over the header and the band beneath. */
  overflow: clip;
}

.home-hero__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% center;
}

/* White text over a photo: the photo has no fixed colour, so the text never
   sits on it directly. The text box carries a navy overlay at
   --hero-overlay-alpha from the left edge of the screen to its own right
   edge, and only past the text does it fade out to show the ring. However
   wide the screen and however the text wraps, every glyph is on the overlay;
   tests/test_contrast.py checks white against it laid over pure white. */
.home-hero__text {
  /* Wide enough for the headline's longest word at its largest size. */
  --hero-text-width: 40rem;
  position: relative;
  z-index: 1;
  padding-block: var(--space-8);
  /* As wide as the text and no wider, so the overlay stops where the text
     does and the rest of the photo shows. */
  width: fit-content;
  max-width: calc(var(--hero-text-width) + 2 * var(--gutter));
  margin-inline: 0;
}

.home-hero__text > * {
  max-width: var(--hero-text-width);
}

.home-hero__text::before,
.home-hero__text::after {
  content: "";
  position: absolute;
  top: -100vmax;
  bottom: -100vmax;
  z-index: -1;
}

.home-hero__text::before {
  left: -100vmax;
  right: 0;
  background: rgb(0 17 63 / var(--hero-overlay-alpha));
}

.home-hero__text::after {
  left: 100%;
  width: 12rem;
  background: linear-gradient(to right, rgb(0 17 63 / var(--hero-overlay-alpha)), transparent);
}

/* The size follows the width, so the longest word always fits whole.
   "waarborgkantoor" is 8.9 times the font size wide in Noto Sans bold; at a
   fixed 72px in a 38rem box, overflow-wrap cut the "r" off onto a line of
   its own.

   The last resort for user text spacing is anywhere, not the inherited
   break-word: .home-hero__text is fit-content, and break-word leaves the
   word's full width in the min-content that the box sizes itself by. With
   0.12em letter spacing the box grew past the screen below 656px and the
   hero's overflow: clip cut the last letters off (SC 1.4.12). At the authored
   spacing the word fits, so this never breaks it. */
.home-hero__title {
  overflow-wrap: anywhere;
  color: var(--paper);
  font-size: clamp(1.75rem, (100vw - 2 * var(--gutter)) / 9.5, 4rem);
  margin-bottom: var(--space-3);
}

.home-hero__subtitle {
  font-size: var(--size-3);
  line-height: var(--leading-tight);
  margin: 0;
}

.home-hero__action {
  margin: var(--space-6) 0 0;
}

.ministry-band {
  background: var(--surface);
}

.ministry-band__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-5) var(--space-7);
  padding-block: var(--space-7);
}

.ministry-band__logo {
  display: block;
  width: min(100%, 22rem);
  height: auto;
}

.ministry-band__text {
  flex: 1 1 22rem;
  max-width: 52ch;
  margin: 0;
}

.ministry-band__action {
  margin-left: auto;
}

.home-welcome__inner {
  display: grid;
  gap: var(--space-7);
  grid-template-columns: minmax(0, 1fr);
  padding-block: var(--space-8);
}

@media (width >= 64rem) {
  .home-welcome__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
  }
}

.home-welcome__text {
  grid-template-columns: minmax(0, 1fr);
}

/* The orange band. Text on the orange is --ink-deep: the live band sets it
   in white, 3.44:1, which fails at body size (SC 1.4.3). */
.home-cta {
  background: var(--signal) url("../img/stamp.ca701f6388ed.svg") no-repeat right -6rem center / 34rem auto;
  color: var(--ink-deep);
}

.home-cta__inner {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: var(--space-3);
  padding-block: var(--space-8);
}

.home-cta__photo img {
  display: block;
  width: 10rem;
  height: 10rem;
  border-radius: 50%;
  border: 4px solid var(--paper);
  margin-bottom: var(--space-4);
}

.home-cta__heading {
  color: var(--ink-deep);
  font-size: var(--size-4);
  margin: 0;
}

.home-cta__text {
  font-size: var(--size-2);
  margin: 0;
}

.home-cta__action {
  margin: var(--space-5) 0 0;
}

/* ---------------------------------------------------------------------------
   Inner pages

   The live site's layout: a tinted title band with the heading and the
   breadcrumb, then the content in two thirds and the sidebar in one.
   --------------------------------------------------------------------------- */

.title-band {
  background: var(--surface);
}

.title-band__inner {
  padding-block: var(--space-7) var(--space-5);
}

.title-band__title {
  margin-bottom: var(--space-2);
}

.title-band .breadcrumb {
  padding-block: 0;
}

.content-layout {
  display: grid;
  gap: var(--space-8);
  grid-template-columns: minmax(0, 1fr);
  padding-block: var(--space-7) var(--space-8);
}

@media (width >= 64rem) {
  .content-layout {
    grid-template-columns: minmax(0, 2fr) minmax(16rem, 1fr);
    align-items: start;
  }
}

.page-intro {
  font-size: var(--size-2);
  max-width: var(--measure);
  margin: 0 0 var(--space-6);
}

.sidebar {
  display: grid;
  gap: var(--space-6);
}

/* The live sidebar's picture of the orange band, as text. --ink-deep on the
   orange, as everywhere; the button is navy with white text. */
.sidebar__cta {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: var(--space-2);
  padding: var(--space-6) var(--space-5);
  background: var(--signal) url("../img/stamp.ca701f6388ed.svg") no-repeat right -4rem center / 18rem auto;
  color: var(--ink-deep);
}

.sidebar__cta p {
  margin: 0;
}

.sidebar__cta .button {
  margin-top: var(--space-3);
}

.sidebar__photo {
  display: block;
  width: 8rem;
  height: 8rem;
  border-radius: 50%;
  border: 4px solid var(--paper);
  margin-bottom: var(--space-2);
}

.sidebar__cta-heading {
  color: var(--ink-deep);
  font-size: var(--size-3);
  margin: 0;
}

.sidebar__heading {
  font-size: var(--size-2);
  margin-bottom: var(--space-3);
}

.sidebar__widget {
  border-top: 4px solid var(--signal);
  padding-top: var(--space-4);
}

.sidebar__widget p {
  margin: 0;
}

/* ---------------------------------------------------------------------------
   News

   The live home page's list: a large orange day and month beside each post.
   The day is display size, where --signal passes (3.44:1 for large text);
   the month is --ink-muted, not the live grey #838f99, which fails.
   --------------------------------------------------------------------------- */

.news-list {
  display: grid;
  gap: var(--space-6);
}

.news-item__title {
  font-size: var(--size-2);
  margin: 0 0 var(--space-2);
}

.news-item__date {
  color: var(--ink-muted);
  margin: 0 0 var(--space-2);
}

.news-item__excerpt {
  margin: 0;
  max-width: var(--measure);
}

.news-item--dated {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: var(--space-5);
  align-items: start;
}

.news-item__stamp {
  display: grid;
  justify-items: center;
  padding-right: var(--space-4);
  border-right: 1px solid var(--rule);
  line-height: 1;
}

.news-item__day {
  color: var(--signal);
  font-family: var(--face-display);
  font-weight: 700;
  font-size: var(--size-5);
}

.news-item__month {
  color: var(--ink-muted);
  margin-top: var(--space-1);
}

.home-news__inner {
  padding-block: var(--space-8);
}

.home-news__title {
  margin-bottom: var(--space-6);
}

.home-news__more {
  margin: var(--space-6) 0 0;
  font-family: var(--face-ui);
  font-weight: 600;
}

.title-band__date {
  color: var(--ink-muted);
  margin: 0 0 var(--space-2);
}

.sidebar__news {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-4);
}

.sidebar__news li + li {
  margin-top: 0;
}

.sidebar__news time {
  display: block;
  color: var(--ink-muted);
}

.pagination__list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-7) 0 0;
  padding: 0;
}

.pagination__list li + li {
  margin-top: 0;
}

.pagination__list a,
.pagination__current {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--target-min);
  min-height: var(--target-min);
  padding-inline: var(--space-3);
}

/* The current page is marked by a filled ground and aria-current, not by
   colour alone. */
.pagination__current {
  background: var(--ink);
  color: var(--paper);
  font-weight: 700;
}

/* ---------------------------------------------------------------------------
   Cards

   The live site's cards: an orange icon beside the title, a line of context
   beneath, a tinted ground on hover. The whole card is one link. Its text is
   --ink-muted, not the live #838f99 (3.33:1, fails SC 1.4.3).
   --------------------------------------------------------------------------- */

.cartouche-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.cartouche-grid li + li {
  margin-top: 0;
}

.cartouche {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  height: 100%;
  padding: var(--space-5);
  text-decoration: none;
  color: var(--ink);
}

.cartouche:hover {
  background: var(--surface);
}

.cartouche__icon {
  width: 3rem;
  height: 3rem;
}

.cartouche__title {
  /* Here hyphenation earns its place: a 27-character compound in a ~300px card
     has to break somewhere, and a hyphen reads better than a hard cut. It works
     because <html lang> is correct per request. */
  overflow-wrap: break-word;
  hyphens: auto;
  font-family: var(--face-display);
  font-weight: 600;
  font-size: var(--size-2);
  line-height: var(--leading-tight);
}

.cartouche:hover .cartouche__title {
  text-decoration: underline;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
}

.cartouche__text {
  grid-column: 1 / -1;
  align-self: start;
  color: var(--ink-muted);
}

/* A card without an icon - older content - keeps its title in line. */
.cartouche__title:first-child {
  grid-column: 1 / -1;
}

/* ---------------------------------------------------------------------------
   Buttons and calls to action
   --------------------------------------------------------------------------- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--target-min);
  padding: var(--space-3) var(--space-6);
  font-family: var(--face-ui);
  font-size: var(--size-1);
  font-weight: 600;
  text-decoration: none;
  border: 2px solid transparent;
  /* The live site's pill buttons. */
  border-radius: 999px;
  cursor: pointer;
}

/* Orange with deep-navy text; the live hero button is white on orange. */
.button--signal {
  background: var(--signal);
  color: var(--ink-deep);
  box-shadow: 0 2px 6px 0 rgb(0 0 0 / 0.3);
}

.button--signal:hover {
  background: var(--paper);
}

/* The drop shadow would otherwise replace the focus ring's navy edge. */
.button--signal:focus-visible {
  box-shadow: 0 0 0 6px var(--focus-contrast);
}

.button--primary {
  background: var(--ink);
  color: var(--paper);
}

.button--primary:hover {
  background: var(--ink-deep);
}

.button--secondary {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--ink);
}

.button--secondary:hover {
  background: var(--surface);
}

/* The orange ground carries --ink-deep, never --ink: navy on this orange is
   4.19:1 and fails SC 1.4.3. See tests/test_contrast.py. */
.cta {
  background: var(--signal);
  color: var(--ink-deep);
  padding: var(--space-7) var(--space-6);
  display: grid;
  gap: var(--space-4);
  align-items: start;

  /* The band runs to the edges of the screen, the way the footer already does,
     while its text stays inside the page container. On a 1920px screen the
     content column is 1248px - two thirds - so a band that stops there reads
     as a floating box.
     
     The colour is painted past the box by a shadow spread rather than the box
     being widened with negative vw margins: vw includes the scrollbar, so that
     approach overshoots by the scrollbar's width and adds a horizontal
     scrollbar that then has to be clipped away. Here the layout box never
     moves, so there is no overflow to hide and the text stays aligned with the
     page on its own. clip-path keeps the spread horizontal. */
  box-shadow: 0 0 0 100vmax var(--signal);
  clip-path: inset(0 -100vmax);
}

@media (min-width: 52rem) {
  /* Heading and text on the left, the action on the right: a band reads as a
     band, not as a tall box with a button at the bottom. */
  .cta {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: var(--space-7);
    align-items: center;
  }

  .cta__heading {
    grid-column: 1;
  }

  .cta__body {
    grid-column: 1;
  }

  .cta__action {
    grid-column: 2;
    grid-row: 1 / span 2;
    margin: 0;
  }
}

.cta__body {
  max-width: 52ch;
  margin: 0;
}

.cta__heading {
  color: var(--ink-deep);
  margin: 0;
}

.cta a {
  color: var(--ink-deep);
}

.cta .button--primary {
  background: var(--ink-deep);
  color: var(--paper);
}

/* ---------------------------------------------------------------------------
   Tables (SC 1.3.1: caption and header row are required by the block)
   --------------------------------------------------------------------------- */

.table-wrap {
  overflow-x: auto;
  margin-bottom: var(--space-5);
}

table {
  border-collapse: collapse;
  width: 100%;
}

caption {
  text-align: left;
  font-weight: 700;
  padding-bottom: var(--space-3);
}

th,
td {
  text-align: left;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}

thead th {
  border-bottom-width: 2px;
  border-bottom-color: var(--ink);
}

/* ---------------------------------------------------------------------------
   Disclosure (FAQ)

   Native <details>: keyboard-operable and announced correctly with no
   JavaScript and no ARIA to get wrong.
   --------------------------------------------------------------------------- */

.faq {
  max-width: var(--measure);
  border-top: 1px solid var(--rule);
}

.faq__item {
  border-bottom: 1px solid var(--rule);
}

.faq__question {
  font-family: var(--face-display);
  font-weight: 600;
  font-size: var(--size-1);
  padding: var(--space-4) 0;
  min-height: var(--target-min);
  cursor: pointer;
}

.faq__question::marker,
.faq__question::-webkit-details-marker {
  color: var(--signal);
}

.faq__answer {
  padding-bottom: var(--space-4);
}

/* ---------------------------------------------------------------------------
   Documents
   --------------------------------------------------------------------------- */

.doc-link__meta {
  color: var(--ink-muted);
}

.doc-link__description {
  margin-top: var(--space-2);
  color: var(--ink-muted);
  max-width: var(--measure);
}

/* ---------------------------------------------------------------------------
   Breadcrumb
   --------------------------------------------------------------------------- */

.breadcrumb {
  padding-block: var(--space-4);
}

.breadcrumb__list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  margin: 0;
  padding: 0;
  color: var(--ink-muted);
}

.breadcrumb__list li + li {
  margin-top: 0;
}

.breadcrumb__list li + li::before {
  content: "/";
  margin-right: var(--space-3);
  color: var(--rule);
}

/* ---------------------------------------------------------------------------
   Footer
   --------------------------------------------------------------------------- */

.site-footer {
  margin-top: var(--space-8);
  border-top: 1px solid var(--surface);
  font-size: var(--size-0);
}

.site-footer__columns {
  display: grid;
  gap: var(--space-6) var(--space-7);
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  padding-block: var(--space-8) var(--space-7);
}

.site-footer h2 {
  font-size: var(--size-3);
  font-weight: 500;
  margin: 0 0 var(--space-4);
}

.site-footer p {
  margin: 0;
}

.site-footer ul {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
}

.site-footer li + li {
  margin-top: 0;
}

/* SC 2.5.8 Target Size (Minimum) is 24x24. The listed links measured 22px
   high, which survives only on the spacing exception - an argument worth not
   having. Links inside a sentence are exempt and stay inline. */
.site-footer li a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}

/* Links inside a sentence are exempt from SC 2.5.8, but a little padding,
   which does not move the line, takes them past 24px anyway. */
.site-footer p a {
  padding-block: 0.1em;
}

/* <address> is the right element for a postal address; its italic default is
   a browser habit, not a meaning. */
.site-footer address {
  font-style: normal;
}

.site-footer__bar {
  background: var(--surface);
  color: var(--ink-muted);
}

.site-footer__bar-inner {
  display: grid;
  justify-items: center;
  gap: var(--space-2);
  padding-block: var(--space-5);
  text-align: center;
}

.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 var(--space-5);
}

.site-footer .site-footer__legal {
  margin: 0;
}

/* ---------------------------------------------------------------------------
   Utilities
   --------------------------------------------------------------------------- */

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

/* ---------------------------------------------------------------------------
   Motion

   There is no decorative motion on this site. This rule is here so that any
   transition added later is covered by default rather than retrofitted.
   --------------------------------------------------------------------------- */

@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;
  }
}