/*
 * Single-purpose classes. The last layer, so their normal declarations win
 * over every component and page rule. (Hiding is the hidden attribute,
 * which the reset makes win over everything.)
 */

@layer reset, tokens, base, layout, components, pages, utilities;

@layer utilities {
    .text-white {
        color: var(--color-white);
    }

    .bold {
        font-weight: bold;
    }

    /*
     * For a heading that must look like the text around it: its level is
     * structure (one <h1> per page), its size is the class's.
     * .text-inherit keeps a heading's bold; .font-inherit drops it too.
     */
    .text-inherit {
        font-size: inherit;
    }

    .font-inherit {
        font: inherit;
    }

    .d-flex {
        display: flex;
    }

    .flex-col {
        flex-direction: column;
    }

    .flex-row {
        flex-direction: row;
    }

    .align-center {
        align-items: center;
    }

    .text-center {
        text-align: center;
    }

    .w-100 {
        width: 100%;
    }

    .link {
        color: blue;
    }

    /*
     * Inline margins only: every .grid also carries .mx-auto, and a
     * .title-bar's bottom margin must survive it now that utilities are
     * the last layer.
     */
    .mx-auto {
        margin-inline: auto;
    }

    .flex-wrap {
        flex-wrap: wrap;
    }

    .row-gap-1 {
        row-gap: var(--space-4);
    }

    .column-gap-1 {
        column-gap: var(--space-4);
    }

    .text-error {
        color: var(--color-error);
    }

    .text-traffic-orange {
        color: var(--color-accent);
    }

    .bg-forest-green {
        background-color: var(--color-forest-green);
    }

    .space-between {
        justify-content: space-between
    }

    /* Hidden on screen, still read by assistive technology. */
    .visually-hidden,
    .skip-link:not(:focus) {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
        border: 0;
    }

    /*
     * Reduced motion: no transition or animation takes time, wherever it
     * is declared. Here because the utilities layer beats every other
     * layer's normal declarations without !important. Scripts check the same query before
     * they autoplay (the banner, the slideshow).
     */
    @media (prefers-reduced-motion: reduce) {
        *,
        *::before,
        *::after {
            transition-duration: 0s;
            transition-delay: 0s;
            animation-duration: 0s;
            animation-delay: 0s;
            animation-iteration-count: 1;
            scroll-behavior: auto;
        }
    }
}