@import url("fonts-lezer.css");

/* Leesweergave: Source Serif 4, ruime regels en een rustige boeknavigatie. */
@media (min-width: 1181px) and (max-width: 1600px) {
    html.ogw-lezer #topnav { gap: 12px; }
    html.ogw-lezer #topnav .topnav-links a { padding-inline: 8px; }
    html.ogw-lezer .topnav-taal-naam { display: none; }
    html.ogw-lezer #topnav .topnav-weergave { width: 38px; padding: 0; gap: 0; }
    html.ogw-lezer #topnav .topnav-weergave span { display: none; }
}
:root.ogw-lezer {
    --ka-navy: #142e42;
    --ka-navy-2: #1d3d56;
    --ka-navy-deep: #0c1f2e;
    --ka-gold: #cba449;
    --ka-paper: #fbfaf7;
    --ka-surface: #ffffff;
    --ka-surface-2: #f3f1ec;
    --ka-sunk: #eceae4;
    --ka-ink: #1b2630;
    --ka-ink-2: #47535e;
    --ka-muted: #5d6872;
    --ka-rule: #dcd8cf;
    --ka-rule-soft: #ebe8e1;
    --ka-gold-text: #7a5c12;
    --ka-gold-wash: rgba(203, 164, 73, .16);
    --ka-trace: #b38a2b;
    --ka-red: #a1262a;
    --ka-ok: #2f6b4f;
    --ka-ok-wash: #e3efe8;
    --ka-draft: #8a5a00;
    --ka-draft-wash: #fbefd6;
    --ka-del: #8c3b33;
    --ka-on-navy: #f2efe7;
    --ka-on-navy-2: #b9c4cd;
    --ka-shadow: 0 1px 2px rgba(20, 46, 66, .06), 0 8px 28px rgba(20, 46, 66, .08);
    --ka-focus: #1f6fd1;
    --ka-serif: 'Source Serif 4', 'Iowan Old Style', Georgia, serif;
    --ka-sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --ka-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
    --ka-topnav-h: 64px;

    /* Koppeling aan de bestaande tokens van style.css */
    --parchment: var(--ka-paper);
    --bg-page: var(--ka-paper);
    --bg-surface: var(--ka-surface);
    --bg-surface-alt: var(--ka-surface-2);
    --bg-elevated: var(--ka-surface);
    --text-primary: var(--ka-ink);
    --text-secondary: var(--ka-ink-2);
    --text-muted: var(--ka-muted);
    --border: var(--ka-rule);
    --border-default: var(--ka-rule);
    --border-light: var(--ka-rule-soft);
    --border-soft: var(--ka-rule-soft);
    --shadow-soft: var(--ka-shadow);
    --teal: var(--ka-gold-text);
    --teal-light: var(--ka-gold);
    --teal-bg: var(--ka-gold-wash);
    --brown: var(--ka-navy);
    --brown-light: var(--ka-muted);
    --header-bg: var(--ka-navy);
    --status-review: var(--ka-gold-text);
    --status-final: var(--ka-ok);
    --font-body: var(--ka-sans);
    --font-ui: var(--ka-sans);
    --font-serif: var(--ka-serif);
    --font-cursive: var(--ka-serif);
    --font-heading: var(--ka-serif);
    --font-mono: var(--ka-mono);
}

:root.ogw-lezer[data-theme="donker"] {
    --ka-paper: #0e1b26;
    --ka-surface: #132433;
    --ka-surface-2: #182c3d;
    --ka-sunk: #0b1620;
    --ka-ink: #ebe6da;
    --ka-ink-2: #c3c9cd;
    --ka-muted: #9aa6af;
    --ka-rule: #2a4153;
    --ka-rule-soft: #21384a;
    --ka-gold-text: #dcbd6a;
    --ka-gold-wash: rgba(203, 164, 73, .14);
    --ka-trace: #cba449;
    --ka-red: #ef8f86;
    --ka-ok: #8fcfae;
    --ka-ok-wash: #163528;
    --ka-draft: #f0c470;
    --ka-draft-wash: #3a2d10;
    --ka-del: #e59a90;
    --ka-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 30px rgba(0, 0, 0, .35);
    --ka-focus: #7fb2ff;
    --gold: #cba449;
    /* style.css zet in donker eigen (zwarte) waarden met dezelfde selector;
       daarom de koppeling hier herhalen. */
    --parchment: var(--ka-paper);
    --bg-page: var(--ka-paper);
    --bg-surface: var(--ka-surface);
    --bg-surface-alt: var(--ka-surface-2);
    --bg-elevated: var(--ka-surface-2);
    --text-primary: var(--ka-ink);
    --text-secondary: var(--ka-ink-2);
    --text-muted: var(--ka-muted);
    --border: var(--ka-rule);
    --border-default: var(--ka-rule);
    --border-light: var(--ka-rule-soft);
    --border-soft: var(--ka-rule-soft);
    --shadow-soft: var(--ka-shadow);
    --teal: var(--ka-gold-text);
    --teal-light: var(--ka-gold);
    --teal-bg: var(--ka-gold-wash);
    --header-bg: var(--ka-navy);
    --green-tint: #142a22;
    --yellow-tint: #2a2412;
    color-scheme: dark;
}
:root.ogw-lezer {
    --paper: var(--ka-paper); --paper-2: var(--ka-surface-2);
    --surface: var(--ka-surface); --surface-2: var(--ka-surface-2);
    --ink: var(--ka-ink); --ink-2: var(--ka-ink-2); --muted: var(--ka-muted);
    --rule: var(--ka-rule); --rule-soft: var(--ka-rule-soft);
    --gold-ink: var(--ka-gold-text);
}

html.ogw-lezer #content{ background: var(--ka-paper); }
html.ogw-lezer #sidebar,
:root.ogw-lezer[data-theme="donker"] #sidebar{
    background: var(--ka-surface-2) !important;
    color: var(--ka-ink) !important;
    border-right: 1px solid var(--ka-rule);
}
html.ogw-lezer #sidebar-toggle{
    background: var(--ka-surface-2);
    color: var(--ka-muted);
}
html.ogw-lezer #sidebar-toggle:hover{ color: var(--ka-ink); background: var(--ka-sunk); }
html.ogw-lezer #sidebar-open,
:root.ogw-lezer[data-theme="donker"] #sidebar-open{
    background: var(--ka-surface) !important;
    color: var(--ka-gold-text) !important;
    border-color: var(--ka-rule) !important;
}
html.ogw-lezer #sidebar-tree::-webkit-scrollbar-thumb{ background: var(--ka-rule); }
html.ogw-lezer .tree-group-label,
:root.ogw-lezer[data-theme="donker"] .tree-group-label{
    font: 500 11.5px/1.2 var(--ka-mono) !important;
    letter-spacing: .08em;
    color: var(--ka-muted) !important;
    padding-top: 12px;
}
html.ogw-lezer .tree-group-label:hover{ background: var(--ka-sunk); }
html.ogw-lezer .tree-subgroup-label{ color: var(--ka-muted); border-top-color: var(--ka-rule-soft); font-family: var(--ka-mono); }
html.ogw-lezer .tree-book-label,
:root.ogw-lezer[data-theme="donker"] .tree-book-label{
    font-family: var(--ka-sans) !important;
    font-style: normal !important;
    font-size: 14px;
    color: var(--ka-ink) !important;
    border-radius: 6px;
    margin: 0 8px;
    padding-left: 16px;
}
html.ogw-lezer .tree-book-label:hover{ background: var(--ka-sunk); color: var(--ka-ink); }
html.ogw-lezer .tree-book-label.active,
:root.ogw-lezer[data-theme="donker"] .tree-book-label.active{
    background: var(--ka-surface) !important;
    color: var(--ka-ink) !important;
    box-shadow: inset 0 0 0 1px var(--ka-rule);
    font-weight: 600;
}
html.ogw-lezer .tree-chapters{ gap: 5px; padding: 6px 14px 10px 22px; }
html.ogw-lezer .tree-ch-btn,
:root.ogw-lezer[data-theme="donker"] .tree-ch-btn{
    width: 32px;
    height: 30px;
    font: 500 12.5px/1 var(--ka-mono) !important;
    background: var(--ka-surface) !important;
    border: 1px solid var(--ka-rule-soft) !important;
    color: var(--ka-ink) !important;
    border-radius: 6px;
    position: relative;
}
html.ogw-lezer .tree-ch-btn:hover{ border-color: var(--ka-trace) !important; }
html.ogw-lezer .tree-ch-btn.approved::after{
    content: "";
    position: absolute;
    right: 3px;
    top: 3px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--ka-ok);
}
html.ogw-lezer .tree-ch-btn.active,
html.ogw-lezer .tree-ch-btn.approved.active,
:root.ogw-lezer[data-theme="donker"] .tree-ch-btn.active{
    background: var(--ka-navy) !important;
    color: #fff !important;
    border-color: var(--ka-navy) !important;
}
:root.ogw-lezer[data-theme="donker"] .tree-ch-btn.active,
:root.ogw-lezer[data-theme="donker"] .tree-ch-btn.approved.active{
    background: var(--ka-gold) !important;
    color: #142e42 !important;
    border-color: var(--ka-gold) !important;
}
html.ogw-lezer .tree-ch-btn.approved.active::after{ background: #8fcfae; }
html.ogw-lezer .tree-ch-btn.unverified{ color: var(--ka-muted) !important; }
html.ogw-lezer .tree-ch-btn.unverified::after{ content: none; }
html.ogw-lezer .tree-ch-btn.unverified.active{ color: #fff !important; }
:root.ogw-lezer[data-theme="donker"] .tree-ch-btn.unverified.active{ color: #142e42 !important; }
html.ogw-lezer #sidebar-footer{ border-top-color: var(--ka-rule); }
html.ogw-lezer .sidebar-link{ color: var(--ka-ink-2); }
html.ogw-lezer .sidebar-link:hover{ background: var(--ka-sunk); color: var(--ka-gold-text); }
html.ogw-lezer #content-topbar,
:root.ogw-lezer[data-theme="donker"] #content-topbar{
    background: var(--ka-surface) !important;
    border-bottom: 1px solid var(--ka-rule) !important;
    box-shadow: none;
    padding: 10px 28px;
    margin: 0 -20px;
}
html.ogw-lezer #content-topbar #chapter-title,
:root.ogw-lezer[data-theme="donker"] #content-topbar #chapter-title{
    font: 600 28px/1.15 var(--ka-serif) !important;
    font-style: normal !important;
    color: var(--ka-ink) !important;
    letter-spacing: -.005em;
}
html.ogw-lezer .quickfilter-btn,
:root.ogw-lezer[data-theme="donker"] .quickfilter-btn{
    border: 1px solid var(--ka-rule) !important;
    background: var(--ka-surface) !important;
    color: var(--ka-ink) !important;
    border-radius: 8px !important;
    padding: 6px 11px !important;
    font: 500 13px/1.2 var(--ka-sans) !important;
    min-height: 34px;
}
html.ogw-lezer .quickfilter-btn[aria-pressed="true"],
html.ogw-lezer .quickfilter-btn.is-on{
    border-color: var(--ka-trace) !important;
    background: var(--ka-gold-wash) !important;
}
html.ogw-lezer #content.reading-mode.hide-1637.hide-sv1888.hide-hebrew.hide-diff.hide-margin2026.hide-margin1637.hide-marginSV1888.hide-noteDiff #verses-container:not(:has(.edition-comparison)){
    max-width: 900px;
}
html.ogw-lezer #content.reading-mode .verse-row{
    font-family: var(--ka-serif);
    font-size: 19.5px;
    padding: 3px 28px;
}
html.ogw-lezer #content.reading-mode .col-2026{
    font-family: var(--ka-serif);
    font-size: 19.5px;
    line-height: 1.72;
    color: var(--ka-ink);
}
html.ogw-lezer #content.reading-mode .verse-num,
:root.ogw-lezer[data-theme="donker"] #content.reading-mode .verse-num{
    font: 500 12.5px/2.2 var(--ka-mono) !important;
    color: var(--ka-gold-text) !important;
    vertical-align: baseline;
    min-width: 26px;
    text-align: right;
    padding-right: 6px;
}
html.ogw-lezer .pericope-heading,
:root.ogw-lezer[data-theme="donker"] .pericope-heading{
    font: 600 1.02em/1.3 var(--ka-serif) !important;
    font-style: italic !important;
    color: var(--ka-gold-text) !important;
    margin: 28px 28px 6px 60px;
}
html.ogw-lezer .chapter-intro-inline,
html.ogw-lezer .book-intro-inline{
    font-family: var(--ka-serif);
    font-style: italic;
    color: var(--ka-ink-2);
}
html.ogw-lezer .verse-row.verse-focus .col-2026{ background: var(--ka-gold-wash); }
html.ogw-lezer body:not(.citaten-uit) .god-speaks,
html.ogw-lezer body:not(.citaten-uit) span.god-speaks,
html.ogw-lezer body:not(.citaten-uit) .god-speaks i,
:root.ogw-lezer[data-theme="donker"] body:not(.citaten-uit) .god-speaks,
:root.ogw-lezer[data-theme="donker"] body:not(.citaten-uit) span.god-speaks,
:root.ogw-lezer[data-theme="donker"] body:not(.citaten-uit) .god-speaks i{
    color: var(--ka-red) !important;
    font-weight: 400 !important;
}
html.ogw-lezer .book-dating,
:root.ogw-lezer[data-theme="donker"] .book-dating{
    background: var(--ka-surface) !important;
    border: 1px solid var(--ka-rule) !important;
    color: var(--ka-ink-2) !important;
    border-radius: 10px;
    font-family: var(--ka-sans);
}
html.ogw-lezer .book-dating .dating-label,
html.ogw-lezer .book-dating .dating-link,
:root.ogw-lezer[data-theme="donker"] .book-dating .dating-label,
:root.ogw-lezer[data-theme="donker"] .book-dating .dating-link{ color: var(--ka-gold-text) !important; }
html.ogw-lezer .principe-badge{
    font-family: var(--ka-mono) !important;
}
html.ogw-lezer .diff-old{ color: var(--ka-del); }
html.ogw-lezer .chapter-separator{ font-family: var(--ka-serif); font-weight: 600; color: var(--ka-gold-text); }
html.ogw-lezer .chf-btn,
:root.ogw-lezer[data-theme="donker"] .chf-btn{
    background: var(--ka-surface) !important;
    border-color: var(--ka-rule) !important;
    color: var(--ka-ink) !important;
}
html.ogw-lezer .chf-btn:hover{ border-color: var(--ka-trace) !important; }
html.ogw-lezer .chf-play,
:root.ogw-lezer[data-theme="donker"] .chf-play{ background: var(--ka-gold) !important; color: #142e42 !important; }


@media (max-width: 768px) {
html.ogw-lezer #mobile-topbar,
:root.ogw-lezer[data-theme="donker"] #mobile-topbar{
        background: var(--ka-surface) !important;
        border-bottom: 1px solid var(--ka-rule) !important;
        box-shadow: none;
    }
html.ogw-lezer .mobile-pick-btn,
:root.ogw-lezer[data-theme="donker"] .mobile-pick-btn{
        font: 600 17px/1.2 var(--ka-serif) !important;
        font-style: normal !important;
        color: var(--ka-ink) !important;
        background: var(--ka-surface) !important;
        border-color: var(--ka-rule) !important;
        border-radius: 8px !important;
    }
html.ogw-lezer #mobile-search-btn,
:root.ogw-lezer[data-theme="donker"] #mobile-search-btn{
        color: var(--ka-ink) !important;
        background: var(--ka-surface) !important;
        border-color: var(--ka-rule) !important;
        border-radius: 8px !important;
        min-width: 44px;
        min-height: 44px;
    }
html.ogw-lezer #content.reading-mode .verse-row,
html.ogw-lezer #content.reading-mode .col-2026{ font-size: 19px; }
html.ogw-lezer #content.reading-mode .verse-row{ padding: 2px 18px; }
html.ogw-lezer .pericope-heading,
:root.ogw-lezer[data-theme="donker"] .pericope-heading{ margin: 22px 18px 6px; }
}