/* Containers and page rhythm only. Everything else lives in components.css. */

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

/* A narrower container, for a page that is mostly running text.
   Consortium feedback on About: "adjust the alignment of the content, which
   currently appears too far to the left, to make it more visually balanced".

   The cause is the gap between the two widths, not the text. .container is
   1200px and .prose caps a line at --measure, so on a wide screen the column
   sits against the left edge with 400px of nothing to the right of it. The
   measure cannot grow to close that: it is already 72ch, which measures close
   to the 80 characters WCAG 1.4.8 allows, and widening it was the subject of
   its own commit.

   So the container comes in to meet the text instead. The heading, the funding
   line and the paragraphs then share one column that is centred on the page,
   and the text stays left aligned, which is what it has to be to read. */
.container--narrow {
  max-width: var(--container-narrow);
}

.section {
  padding-block: var(--s-8);
}

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

.section--tight {
  padding-block: var(--s-7);
}

.stack > * + * {
  margin-block-start: var(--s-4);
}

.prose {
  max-width: var(--measure);
  /* A long unbreakable token, a URL used as its own link text, a DOI, a file
     path, overflows the measure and takes the page sideways with it. The press
     release had a 77 character URL; at the 320px width WCAG 2.1 tests reflow
     at, the column holds about 33 characters, so the page scrolled
     horizontally. That is a 1.4.10 failure at AA, and pa11y does not catch it
     because it runs at a desktop viewport and reflow is not a measurement it
     takes.

     On .prose rather than .prose a, because the next one will be pasted into
     the CMS by someone who should not have to think about it. break-word acts
     only on a token that would otherwise overflow, so ordinary wrapping is
     unchanged. Do not remove this as tidying. */
  overflow-wrap: break-word;
}

.prose p + p,
.prose ul,
.prose ol {
  margin-block-start: var(--s-4);
}

/* A heading belongs to what follows it, so it takes more space above than
   below. Without this a heading written in the CMS markdown field would inherit
   the stack's uniform 16px on both sides and float between two blocks, bound to
   neither. The same 48/16 .subsection uses on the headings the templates own.

   Nothing in src/content/ has a markdown heading today, so this is for the
   first editor who types "## " rather than for anything on the site now. */
.prose :is(h2, h3, h4) {
  margin-block-start: var(--s-7);
  margin-block-end: var(--s-4);
}

/* Except as the opening element, where the page furniture above already
   provides the separation. */
.prose > :is(h2, h3, h4):first-child {
  margin-block-start: 0;
}

.prose a {
  color: var(--c-link);
}

/* Grids collapse 3 -> 2 -> 1 without a single media query.

   min(…, 100%) is the WCAG 1.4.10 fix. A bare minmax(20rem, 1fr) never lets a
   track be narrower than 20rem, so at 320px, with 288px between the gutters,
   the home page's partner grid was 32px wider than the screen and the whole
   page scrolled sideways. Large text does the same to the 16rem grids. With
   min() the column is the full width when the screen is narrower than one. */
.grid {
  display: grid;
  gap: var(--s-5);
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
}

.grid--wide {
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
}

/* auto-fit collapses empty tracks, so the last card in a short row stretches to
   fill them. That is right when a grid is always full and wrong when the group
   size varies: on /partners/, France, Latvia and Denmark have one partner each
   and their card spanned the entire row. auto-fill keeps the empty tracks, so a
   group of one is one card wide. */
.grid--fill {
  grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr));
}

/* Each column carries its own .prose. Putting .prose on this grid instead was
   two bugs at once: its 68ch measure capped the pair rather than each column,
   halving both; and `.prose p + p` gave the second paragraph a top margin, so
   as a grid item it started 16px lower than the first and the two columns did
   not line up. */
.two-col {
  display: grid;
  gap: var(--s-6);
  align-items: start;
}

@media (min-width: 48em) {
  .two-col {
    grid-template-columns: 1fr 1fr;
  }
}

.skip-link {
  position: absolute;
  left: var(--s-4);
  top: var(--s-4);
  z-index: 100;
  padding: var(--s-3) var(--s-4);
  background: var(--c-ink);
  color: var(--c-bg);
  border-radius: var(--radius);
  transform: translateY(-200%);
}

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

main:focus {
  outline: none;
}