/*
 * insluitvoorbeeld.css — de voorbeeldpagina met drie nagebootste host-sites.
 *
 * Staat los van main.css en de landing-CSS: de pagina moet er juist NIET als
 * Rechtfabriek uitzien. Elk kader bootst een vreemde site na, en dat werkt
 * alleen als die kaders hun eigen typografie en kleuren hebben.
 *
 * De kleuren binnen .site-* zijn daarom bewust losse waarden en geen
 * RF-variabelen: het zijn de huisstijlen van verzonnen derden.
 */

:root {
    --iv-ground: #f4f6f3;
    --iv-surface: #ffffff;
    --iv-ink: #1c1f2b;
    --iv-ink-soft: #4a5152;
    --iv-muted: #6e7670;
    --iv-line: #d9dfd8;
    --iv-line-soft: #e7ebe6;
    --iv-accent: #2f6f3c;
    --iv-accent-wash: #e2efe4;
}

@media (prefers-color-scheme: dark) {
    :root {
        --iv-ground: #11141a;
        --iv-surface: #181c22;
        --iv-ink: #e7eae5;
        --iv-ink-soft: #bcc3bc;
        --iv-muted: #8e968d;
        --iv-line: #2c333a;
        --iv-line-soft: #232931;
        --iv-accent: #74c182;
        --iv-accent-wash: #1b2a20;
    }
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--iv-ground);
    color: var(--iv-ink);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 880px; margin: 0 auto; padding: 0 20px 80px; }

.top {
    padding: 52px 0 28px;
    border-bottom: 1px solid var(--iv-line);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.eyebrow {
    margin: 0;
    font-size: 11.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--iv-muted);
}

h1 {
    margin: 0;
    font-size: clamp(27px, 4.4vw, 38px);
    line-height: 1.15;
    letter-spacing: -.015em;
    text-wrap: balance;
}

.standfirst {
    margin: 0;
    font-size: clamp(16.5px, 2.1vw, 19px);
    color: var(--iv-ink-soft);
    max-width: 62ch;
}

.terug { margin: 0; font-size: 15px; }
.terug a { color: var(--iv-accent); text-underline-offset: 2px; }
.terug a:focus-visible { outline: 2px solid var(--iv-accent); outline-offset: 3px; border-radius: 2px; }

section { padding-top: 44px; display: flex; flex-direction: column; gap: 12px; }

.bijschrift {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    align-items: baseline;
    font-size: 14px;
    color: var(--iv-muted);
}

.tag {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11.5px;
    border: 1px solid var(--iv-line);
    background: var(--iv-accent-wash);
    color: var(--iv-accent);
    border-radius: 2px;
    padding: 2px 7px;
    white-space: nowrap;
}

/* ---------- de nagebootste sites ---------- */

.host {
    border: 1px solid var(--iv-line);
    border-radius: 4px;
    overflow: hidden;
    background: var(--iv-surface);
}

.host-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    background: var(--iv-line-soft);
    border-bottom: 1px solid var(--iv-line);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11.5px;
    color: var(--iv-muted);
}

.dot { inline-size: 9px; block-size: 9px; border-radius: 50%; background: var(--iv-line); flex: none; }

.site { padding: 24px 22px 18px; }

.site h2 { margin: 0 0 4px; font-size: 19px; font-weight: 700; letter-spacing: -.01em; }

.site .intro { margin: 0 0 16px; font-size: 14.5px; }

.site iframe { display: block; inline-size: 100%; border: 0; }

/* Verzonnen huisstijlen — geen RF-kleuren, dat is het hele punt. */
.site-vereniging { background: #ffffff; color: #24303a; font-family: Georgia, "Times New Roman", serif; }
.site-vereniging h2 { color: #1b4c73; }

.site-blog { background: #14171f; color: #d7dbe0; }
.site-blog h2 { color: #ffffff; }

.site-software { background: #f7f9fc; color: #2b3440; }
.site-software h2 { color: #1a4f8a; }
.site-software .balk { block-size: 3px; background: #1a4f8a; margin-bottom: 16px; border-radius: 2px; }

/* Wordt de pagina met ?accent= opgevraagd, dan staat de widget in de kleur van
   de bezoeker en moet het verzonnen decor terugtreden. Anders vecht het blauw
   van het nagebootste boekhoudpakket met de huisstijl die we juist tonen. */
.site-software.decor-neutraal h2 { color: #2b3440; }
.site-software.decor-neutraal .balk { background: #ccd3dc; }

/* ---------- slot ---------- */

.slot-kop { margin: 0; font-size: clamp(21px, 3vw, 26px); line-height: 1.2; }

.slot ul {
    margin: 0;
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 66ch;
}

.slot code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .88em;
    background: var(--iv-line-soft);
    border: 1px solid var(--iv-line);
    border-radius: 2px;
    padding: 1px 5px;
}