/**
 * NextForLab — long-form legal typography.
 *
 * Single responsibility: styling the running prose of the legal pages (privacy
 * statement, terms). These documents are almost entirely headings, paragraphs
 * and lists, so they are written as plain semantic HTML and styled from here
 * rather than carrying a utility class on every element.
 *
 * Requires css/tokens.css. Loaded after css/components.css, so the element
 * selectors below sit at the end of the cascade.
 *
 * Design language follows the rest of the site: hairline rules between
 * sections, Archivo for reading text, JetBrains Mono for the section numbers
 * and micro-labels, one signal-red accent.
 */

.prose {
    /* ~72 characters at 17px — the comfortable measure for continuous reading. */
    max-width: 760px;
    font-size: 1.0625rem;
    line-height: 1.72;
    color: var(--text-muted);
}

.prose > * + * {
    margin-top: 1.1em;
}

/* ------------------------------------------------------------- headings */

/*
 * Each numbered section opens against a hairline rule, the same device the
 * card grids use to read as a printed table rather than a stack of boxes.
 */
.prose h2 {
    margin-top: 3.5rem;
    padding-top: 2rem;
    border-top: 1px solid var(--border);
    color: var(--text);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.prose h3 {
    margin-top: 2.25rem;
    color: var(--text);
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.4;
}

/* The leading digits of a heading, lifted into mono and accent. */
.prose .n {
    display: inline-block;
    margin-right: 0.6em;
    color: var(--accent-500);
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    font-weight: 500;
    font-size: 0.8em;
    letter-spacing: 0.04em;
}

.prose h2 + p,
.prose h3 + p,
.prose h2 + ul,
.prose h3 + ul {
    margin-top: 0.7em;
}

/* ---------------------------------------------------------------- lists */

.prose ul {
    margin-left: 0;
    padding-left: 1.15rem;
    list-style: none;
}

.prose li {
    position: relative;
    margin-top: 0.55em;
}

/* Square-cut marker rather than a round bullet, matching the button language. */
.prose li::before {
    content: '';
    position: absolute;
    top: 0.72em;
    left: -1.15rem;
    width: 5px;
    height: 5px;
    background-color: var(--accent-500);
}

.prose strong {
    color: var(--text);
    font-weight: 700;
}

/* ---------------------------------------------------------------- links */

/*
 * Underlined rather than coloured. The signal red clears AA on this background,
 * but underlines carry the meaning without relying on colour at all (WCAG
 * 1.4.1), and keep the accent reserved for structure.
 */
.prose a {
    color: var(--text);
    text-decoration: underline;
    text-decoration-color: var(--accent-500);
    text-underline-offset: 3px;
    transition: color 0.2s ease;
}

.prose a:hover {
    color: var(--accent-500);
}

/* --------------------------------------------------------------- blocks */

/*
 * The postal address is set as running text, not a panel. The document reads
 * as one continuous statement; boxing individual passages would break it into
 * cards and imply a hierarchy the legal text does not have.
 */
.prose address {
    font-style: normal;
    line-height: 1.85;
}

.prose .ref {
    font-size: 0.9375rem;
}

/*
 * Unresolved values that must be filled in before this document is relied on.
 * Deliberately loud: a legal page that ships with "[KVK NUMBER]" in it should
 * be impossible to miss on the page itself, not only in a checklist.
 */
.prose .todo {
    padding: 0.1em 0.45em;
    border: 1px dashed var(--accent-500);
    background-color: transparent;
    color: var(--accent-500);
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.85em;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* ---------------------------------------------------------------- phone */

@media (max-width: 767px) {
    .prose {
        font-size: 1rem;
        line-height: 1.7;
    }

    .prose h2 {
        margin-top: 2.75rem;
        padding-top: 1.5rem;
        font-size: 1.3125rem;
    }

    .prose h3 {
        margin-top: 1.85rem;
        font-size: 1rem;
    }

}