/*
 * Typography.
 *
 * Sets the reading experience for every page: one family, a fixed scale, and a measure that keeps lines
 * short enough to read comfortably. Six languages share these rules, which is why nothing here depends on
 * a string being a particular length — German compounds and French elisions both have to fit.
 *
 * Headings are styled by element rather than by class. A page that uses `<h2>` because it is the second
 * level, not because it wants that size, is a page that reads correctly to a screen reader.
 */

body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: var(--leading-body);

    /* Kerning and ligatures on, but no `text-rendering: optimizeLegibility` — it delays first paint on
       long pages for a difference nobody can see. */
    font-kerning: normal;
}

h1,
h2,
h3,
h4 {
    line-height: var(--leading-tight);
    font-weight: var(--weight-bold);

    /* Stops a heading being left alone at the foot of a column. */
    text-wrap: balance;
}

h1 {
    font-size: var(--text-3xl);
}

h2 {
    font-size: var(--text-2xl);
}

h3 {
    font-size: var(--text-xl);
}

h4 {
    font-size: var(--text-lg);
}

/* Spacing between blocks is set here rather than on each component, so vertical rhythm is consistent
   across pages written by different hands. The margin goes on top only, so a component never carries a
   trailing gap its container has to correct. */
p + p,
p + ul,
p + ol,
ul + p,
ol + p,
h2 + p,
h3 + p {
    margin-top: var(--space-4);
}

h2,
h3,
h4 {
    margin-top: var(--space-6);
}

/* Body copy is held to a readable measure. Applied to paragraphs rather than to a container, so a card
   or a grid cell is free to be wider than its text. */
p {
    max-width: var(--measure);
}

small,
.text-quiet {
    font-size: var(--text-sm);
    color: var(--colour-ink-quiet);
}

strong,
b {
    font-weight: var(--weight-bold);
}

/*
 * Links.
 *
 * Underlined, always. Removing the underline leaves colour as the only signal that something is a link,
 * which fails WCAG 1.4.1 for anyone who cannot distinguish the hue. The offset and thickness are set so
 * the underline does not collide with descenders.
 */
a {
    color: var(--colour-primary);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.15em;
}

a:hover {
    color: var(--colour-primary-hover);
    text-decoration-thickness: 2px;
}

code,
kbd,
samp,
pre {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
}

pre {
    overflow-x: auto;
    padding: var(--space-3);
    background-color: var(--colour-surface-sunken);
    border: var(--border-width) solid var(--colour-border);
    border-radius: var(--radius-sm);
}

/* Lists keep their markers by default. `list-style: none` is applied by the components that genuinely
   are not lists of prose — a card grid, a nav bar — and nowhere else. */
ul,
ol {
    padding-inline-start: var(--space-5);
}

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

/* Quiet horizontal rule; the border colour rather than the browser's grey bevel. */
hr {
    border: none;
    border-top: var(--border-width) solid var(--colour-border);
    margin-block: var(--space-6);
}