/*
 * Utilities.
 *
 * Single-purpose classes, kept deliberately short. A long utility list turns into a second styling
 * language competing with the components, and markup written in it stops being readable — which matters
 * more here than usual, because these templates are the accessibility surface of the application.
 *
 * The rule for adding one: it must be a property that genuinely varies per use and cannot belong to a
 * component. Anything else is a component.
 */

/*
 * Visually hidden, still announced.
 *
 * The single most important class in this file. For text that a screen reader needs and a sighted reader
 * gets from context — a form label above an obvious field, the word "current" on the active nav item.
 *
 * `display: none` and `visibility: hidden` both remove the element from the accessibility tree, which is
 * the opposite of the intent. Clipping to a 1px box is what actually works across engines.
 */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;

    /* Both properties: `clip` for older engines, `clip-path` for current ones. */
    clip: rect(0 0 0 0);
    clip-path: inset(50%);

    /* Without this, a long string collapses to one character per line before it is clipped, and some
       screen readers read the resulting shape rather than the sentence. */
    white-space: nowrap;

    border: 0;
}

/* The same, until focused — for a control that should appear when reached by keyboard. */
.visually-hidden-focusable:not(:focus):not(:focus-within) {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Constrain a block to the reading measure. For a container whose children are not paragraphs and so do
   not pick it up from typography.css. */
.measure {
    max-width: var(--measure);
}

/* Vertical rhythm between the direct children of a container, without a margin on the first or last. */
.stack > * + * {
    margin-top: var(--space-4);
}

.stack--tight > * + * {
    margin-top: var(--space-2);
}

.stack--loose > * + * {
    margin-top: var(--space-6);
}

/* A row that wraps. `gap` rather than margins, so wrapped rows do not gain a leading indent. */
.cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
}

/* Strips list semantics' visual furniture while keeping the element a list. */
.list-plain {
    padding: 0;
    list-style: none;
}

.list-plain li + li {
    margin-top: 0;
}

/*
 * Print.
 *
 * Not an afterthought: a privacy notice or an appeal decision is exactly the kind of page someone keeps a
 * copy of. Navigation, the language form and the footer are removed; link targets are shown, because a
 * printed link is otherwise a dead end.
 */
@media print {
    .site-header,
    .site-footer,
    .skip-link,
    .notification__dismiss {
        display: none;
    }

    body {
        background: #fff;
        color: #000;
    }

    .site-main {
        max-width: none;
        padding: 0;
    }

    a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: var(--text-xs);
    }
}