/* =========================================================
   Handleidingen — opmaak van de geïmporteerde handleiding-HTML
   (wr-*-klassen), volledig opgebouwd uit de site-tokens zodat
   licht thema en het donkere Aurora-thema vanzelf meekleuren.
   Alles is gescoped onder .handleiding-inhoud (view.php).
   ========================================================= */

.handleiding-inhoud {
    /* Lokale afgeleide tokens — tinten via color-mix werken in beide thema's */
    --hl-accent:       var(--apple-blue);
    --hl-tekst:        var(--apple-black);
    --hl-tekst-zacht:  var(--apple-gray);
    --hl-vlak:         var(--apple-silver);
    --hl-rand:         var(--apple-border);
    --hl-rand-zacht:   color-mix(in srgb, var(--apple-border) 55%, transparent);
    --hl-code-bg:      color-mix(in srgb, var(--apple-gray) 14%, transparent);
    --hl-mono:         "SF Mono", ui-monospace, Menlo, Consolas, monospace;

    --hl-info:         var(--apple-blue);
    --hl-let-op:       var(--apple-orange);
    --hl-ok:           var(--apple-green);
    --hl-fout:         var(--apple-red);
}

/* Eén tint-recept per semantische kleur: zachte achtergrond, rand, leesbare tekst */
.handleiding-inhoud .wr-infoblock-blue,
.handleiding-inhoud .wr-settings-box,
.handleiding-inhoud .wr-section-badge,
.handleiding-inhoud .wr-tab-label { --hl-tint: var(--hl-info); }

.handleiding-inhoud .wr-infoblock-amber,
.handleiding-inhoud .wr-warnblock,
.handleiding-inhoud .wr-badge-yellow { --hl-tint: var(--hl-let-op); }

.handleiding-inhoud .wr-infoblock-green,
.handleiding-inhoud .wr-ns-box,
.handleiding-inhoud .wr-badge-green { --hl-tint: var(--hl-ok); }

.handleiding-inhoud .wr-infoblock-red,
.handleiding-inhoud .wr-badge-req { --hl-tint: var(--hl-fout); }

.handleiding-inhoud .wr-badge-opt { --hl-tint: var(--apple-gray); }

/* ── Basis ───────────────────────────────────────────────── */
.handleiding-inhoud .wr-manual {
    max-width: none;
    padding: 0 0 8px;
    font-family: inherit;
    font-size: 0.92rem;
    line-height: 1.6;
}

.handleiding-inhoud .wr-manual p.wr-intro {
    font-size: 0.97rem;
    color: var(--hl-tekst-zacht);
    margin: 0 0 24px;
}

.handleiding-inhoud code {
    background: var(--hl-code-bg);
    border-radius: 5px;
    padding: 1px 6px;
    font-family: var(--hl-mono);
    font-size: 0.84em;
    color: var(--hl-tekst);
    word-break: break-all;
}

/* ── Sectiekoppen ────────────────────────────────────────── */
.handleiding-inhoud .wr-section-title {
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--hl-tekst);
    margin: 36px 0 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--hl-rand);
}

.handleiding-inhoud .wr-phase {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 36px 0 14px;
}

.handleiding-inhoud .wr-phase-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 12px;
    border-radius: var(--radius-pill);
    background: var(--hl-accent);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    white-space: nowrap;
    flex-shrink: 0;
}

.handleiding-inhoud .wr-phase-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--hl-tekst);
}

/* ── Labels, badges, pills ───────────────────────────────── */
.handleiding-inhoud .wr-tab-label,
.handleiding-inhoud .wr-section-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 14px;
    padding: 3px 12px;
    border-radius: var(--radius-pill);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: color-mix(in srgb, var(--hl-tint) 12%, transparent);
    color: var(--hl-accent);
    border: none;
}

.handleiding-inhoud .wr-badge {
    display: inline-block;
    padding: 1px 8px;
    border-radius: var(--radius-pill);
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
    vertical-align: middle;
    background: color-mix(in srgb, var(--hl-tint, var(--apple-gray)) 15%, transparent);
    color: color-mix(in srgb, var(--hl-tint, var(--apple-gray)) 70%, var(--hl-tekst));
}

.handleiding-inhoud .wr-field-name .wr-badge { margin-left: 6px; }

/* ── Navigatiepad (portaal > menu > item) ────────────────── */
.handleiding-inhoud .wr-path {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin: 4px 0 16px;
    padding: 6px 14px;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--hl-tekst);
    background: var(--hl-vlak);
    border: 1px solid var(--hl-rand);
    border-radius: var(--radius-pill);
}

.handleiding-inhoud .wr-path span { font-weight: 600; color: var(--hl-accent); }
.handleiding-inhoud .wr-path .wr-path-sep { font-weight: 400; color: var(--hl-tekst-zacht); font-size: 0.8rem; }

/* ── Genummerde stappen ──────────────────────────────────── */
.handleiding-inhoud .wr-steps {
    counter-reset: stap;
    list-style: none;
    margin: 0 0 22px;
    padding: 0;
}

.handleiding-inhoud .wr-steps li {
    counter-increment: stap;
    position: relative;
    margin: 0;
    padding: 0 0 14px 52px;
    font-size: 0.92rem;
    line-height: 1.55;
}

.handleiding-inhoud .wr-steps li:not(:last-child) {
    margin-bottom: 14px;
    border-bottom: 1px solid color-mix(in srgb, var(--hl-tekst) 8%, transparent);
}

.handleiding-inhoud .wr-steps li:last-child { padding-bottom: 0; }

/* Groot lichtblauw cijfer (01, 02 …), zelfde stijl als de stappen op de pagina Domeinnamen.
   De nummers in de HTML (.wr-step-num) lopen altijd 1..n en worden vervangen door de teller. */
.handleiding-inhoud .wr-steps li::before {
    content: counter(stap, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: -4px;
    font-size: 1.7rem;
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1;
    color: color-mix(in srgb, var(--hl-accent) 30%, transparent);
}

.handleiding-inhoud .wr-step-num { display: none; }

.handleiding-inhoud .wr-step-body { flex: 1; min-width: 0; }

.handleiding-inhoud .wr-step-body strong {
    display: block;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--hl-tekst);
    margin-bottom: 2px;
}

.handleiding-inhoud .wr-step-body p {
    margin: 0;
    font-size: 0.9rem;
    color: var(--hl-tekst-zacht);
    line-height: 1.55;
}

/* ── Veld-uitleg (naam | beschrijving) ───────────────────── */
.handleiding-inhoud .wr-field-list {
    list-style: none;
    margin: 0 0 12px;
    padding: 0;
    border: 1px solid var(--hl-rand);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.handleiding-inhoud .wr-field-item {
    display: grid;
    grid-template-columns: 200px 1fr;
    font-size: 0.88rem;
}

.handleiding-inhoud .wr-field-item + .wr-field-item { border-top: 1px solid var(--hl-rand); }

.handleiding-inhoud .wr-field-name {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    padding: 10px 14px;
    font-weight: 600;
    color: var(--hl-tekst);
    background: var(--hl-vlak);
    border-right: 1px solid var(--hl-rand);
}

.handleiding-inhoud .wr-field-desc {
    padding: 10px 14px;
    color: var(--hl-tekst);
    background: var(--apple-white);
    line-height: 1.55;
}

@media (max-width: 600px) {
    .handleiding-inhoud .wr-field-item { grid-template-columns: 1fr; }
    .handleiding-inhoud .wr-field-name { border-right: none; border-bottom: 1px solid var(--hl-rand); }
}

/* ── Meldingen (info / let op / gelukt / fout) ───────────── */
.handleiding-inhoud .wr-infoblock,
.handleiding-inhoud .wr-warnblock {
    margin: 0 0 18px;
    padding: 12px 16px;
    font-size: 0.88rem;
    line-height: 1.55;
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--hl-tint, var(--hl-info)) 9%, transparent);
    border: 1px solid color-mix(in srgb, var(--hl-tint, var(--hl-info)) 28%, transparent);
    color: color-mix(in srgb, var(--hl-tint, var(--hl-info)) 45%, var(--hl-tekst));
}

.handleiding-inhoud .wr-infoblock strong,
.handleiding-inhoud .wr-warnblock strong {
    display: block;
    margin-bottom: 3px;
    font-weight: 700;
}

/* ── Kaders met instellingen / nameservers ───────────────── */
.handleiding-inhoud .wr-settings-box,
.handleiding-inhoud .wr-ns-box {
    margin: 0 0 22px;
    padding: 16px 20px;
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--hl-tint) 7%, transparent);
    border: 1px solid color-mix(in srgb, var(--hl-tint) 25%, transparent);
}

.handleiding-inhoud .wr-settings-box h2,
.handleiding-inhoud .wr-ns-box h2 {
    margin: 0 0 10px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--hl-tint) 70%, var(--hl-tekst));
}

.handleiding-inhoud .wr-twoblock {
    display: flex;
    gap: 16px;
    margin-bottom: 22px;
}

.handleiding-inhoud .wr-twoblock .wr-settings-box { flex: 1; margin-bottom: 0; }

@media (max-width: 600px) {
    .handleiding-inhoud .wr-twoblock { flex-direction: column; }
}

.handleiding-inhoud .wr-ns-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    font-size: 0.92rem;
}

.handleiding-inhoud .wr-ns-row + .wr-ns-row { border-top: 1px solid color-mix(in srgb, var(--hl-tint) 18%, transparent); }

.handleiding-inhoud .wr-ns-label {
    min-width: 110px;
    font-weight: 600;
    color: var(--hl-tekst);
}

.handleiding-inhoud .wr-ns-row code,
.handleiding-inhoud .wr-ns-inline {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 6px;
    font-family: var(--hl-mono);
    font-size: 0.86rem;
    color: var(--hl-tekst);
    background: var(--hl-code-bg);
    word-break: normal;
}

.handleiding-inhoud .wr-ns-inline { margin: 4px 0 2px; }

/* ── Tabellen ────────────────────────────────────────────── */
.handleiding-inhoud .wr-settings-table,
.handleiding-inhoud .wr-port-table,
.handleiding-inhoud .wr-dns-table,
.handleiding-inhoud .wr-cfg-table,
.handleiding-inhoud .wr-ftp-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
    line-height: 1.5;
}

.handleiding-inhoud .wr-settings-table td,
.handleiding-inhoud .wr-port-table td,
.handleiding-inhoud .wr-dns-table td {
    padding: 6px 8px;
    vertical-align: top;
    color: var(--hl-tekst);
}

.handleiding-inhoud .wr-settings-table tr + tr td,
.handleiding-inhoud .wr-port-table tr + tr td,
.handleiding-inhoud .wr-dns-table tr + tr td { border-top: 1px solid var(--hl-rand-zacht); }

.handleiding-inhoud .wr-settings-table td:first-child { font-weight: 600; white-space: nowrap; width: 45%; }
.handleiding-inhoud .wr-port-table td:first-child     { font-weight: 600; width: 30%; }
.handleiding-inhoud .wr-dns-table td:first-child      { font-weight: 600; white-space: nowrap; width: 110px; }

.handleiding-inhoud .wr-port-table th,
.handleiding-inhoud .wr-dns-table th {
    padding: 0 8px 6px;
    text-align: left;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--hl-tekst-zacht);
    border-bottom: 1px solid var(--hl-rand);
}

/* Tabellen met kopbalk (instellingen per programma, FTP-gegevens) */
.handleiding-inhoud .wr-cfg-table,
.handleiding-inhoud .wr-ftp-table {
    margin-bottom: 18px;
    border: 1px solid var(--hl-rand);
    border-radius: var(--radius-sm);
    overflow: hidden;
    border-collapse: separate;
    border-spacing: 0;
}

.handleiding-inhoud .wr-cfg-table th,
.handleiding-inhoud .wr-ftp-table th {
    padding: 9px 14px;
    text-align: left;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--hl-tekst-zacht);
    background: var(--hl-vlak);
    border-bottom: 1px solid var(--hl-rand);
}

.handleiding-inhoud .wr-cfg-table td,
.handleiding-inhoud .wr-ftp-table td {
    padding: 8px 14px;
    vertical-align: middle;
    color: var(--hl-tekst);
}

.handleiding-inhoud .wr-cfg-table tr + tr td,
.handleiding-inhoud .wr-ftp-table tr + tr td { border-top: 1px solid var(--hl-rand-zacht); }

.handleiding-inhoud .wr-cfg-table td:first-child { font-weight: 600; white-space: nowrap; width: 160px; }
.handleiding-inhoud .wr-ftp-table td:first-child { font-weight: 600; white-space: nowrap; width: 130px; vertical-align: top; }

/* ── DNS-recordkaarten ───────────────────────────────────── */
.handleiding-inhoud .wr-dns-card {
    margin-bottom: 20px;
    border: 1px solid var(--hl-rand);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.handleiding-inhoud .wr-dns-card-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--hl-vlak);
    border-bottom: 1px solid var(--hl-rand);
}

.handleiding-inhoud .wr-record-type {
    display: inline-block;
    flex-shrink: 0;
    padding: 2px 10px;
    border-radius: var(--radius-pill);
    background: var(--hl-accent);
    color: #fff;
    font-family: var(--hl-mono);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
}

.handleiding-inhoud .wr-record-name { font-weight: 700; font-size: 0.95rem; color: var(--hl-tekst); }

.handleiding-inhoud .wr-record-desc {
    margin-left: auto;
    text-align: right;
    font-size: 0.82rem;
    color: var(--hl-tekst-zacht);
}

.handleiding-inhoud .wr-dns-card-body { padding: 14px 16px; }

.handleiding-inhoud .wr-dns-note {
    margin: 4px 0 0;
    font-size: 0.84rem;
    line-height: 1.5;
    color: var(--hl-tekst-zacht);
}

.handleiding-inhoud .wr-dns-note strong { color: var(--hl-tekst); }

@media (max-width: 600px) {
    .handleiding-inhoud .wr-dns-card-head { flex-wrap: wrap; }
    .handleiding-inhoud .wr-record-desc { margin-left: 0; text-align: left; width: 100%; }
}

/* Brede tabellen scrollen binnen hun eigen kader */
.handleiding-inhoud .wr-dns-card-body,
.handleiding-inhoud .wr-settings-box { overflow-x: auto; }