/* Open Staten Vertaling Leesversie */

/* === Reset & Base === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --bg: #faf8f5;
    --text: #2c2c2c;
    --text-muted: #999;
    --accent: #cba449;
    --link: #2563a8;
    --god-speaks: #c0392b;
    --citaat-genest: #9a6b00;
    --note-marker: #2563a8;
    --border: #e5e1d8;
    --header-bg: #fff;
    --nav-bg: #f5f2ed;
    --selected: rgba(203, 164, 73, 0.12);
    --selected-border: rgba(203, 164, 73, 0.3);
    --overlay-bg: rgba(0,0,0,0.5);
    --font-body: 'EB Garamond', 'Georgia', serif;
    --font-ui: 'Fira Sans', system-ui, sans-serif;
    --content-width: 720px;
}

body.dark {
    --bg: #1a1a2e;
    --text: #e0e0e0;
    --text-muted: #666;
    --god-speaks: #e74c3c;
    --citaat-genest: #e3b341;
    --note-marker: #5b9bd5;
    --border: #2d2d44;
    --header-bg: #16162b;
    --nav-bg: #1e1e36;
    --selected: rgba(203, 164, 73, 0.15);
    --overlay-bg: rgba(0,0,0,0.7);
    --link: #5b9bd5;
}

html { font-size: 18px; scroll-behavior: smooth; }
body {
    font-family: var(--font-body);
    background: var(--bg);
    color: var(--text);
    line-height: 1.75;
    transition: background 0.3s, color 0.3s;
}

/* === Header === */
#reader-header {
    position: sticky; top: 0; z-index: 100;
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 20px;
    background: var(--header-bg);
    border-bottom: 1px solid var(--border);
    gap: 16px;
}
.reader-brand {
    display: flex;
    align-items: center;
    width: 190px;
}
.reader-logo {
    display: block;
    width: auto;
    height: 52px;
    max-width: 100%;
    object-fit: contain;
}
.reader-logo--light { display: none; }
body.dark .reader-logo--dark,
:root[data-theme="donker"] .reader-logo--dark { display: none; }
body.dark .reader-logo--light,
:root[data-theme="donker"] .reader-logo--light { display: block; }
.header-center { flex: 1; max-width: 400px; }
.search-bar { position: relative; }
.search-bar input {
    width: 100%; padding: 8px 14px;
    border: 1px solid var(--border); border-radius: 20px;
    font-family: var(--font-ui); font-size: 14px;
    background: var(--bg); color: var(--text);
    outline: none; transition: border-color 0.2s;
}
.search-bar input:focus { border-color: var(--accent); }
.search-dropdown {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    max-height: 400px; overflow-y: auto;
    background: var(--header-bg); border: 1px solid var(--border);
    border-radius: 8px; margin-top: 4px; box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    z-index: 200;
}
.search-dropdown.visible { display: block; }
.search-result {
    padding: 10px 14px; cursor: pointer;
    border-bottom: 1px solid var(--border);
    font-family: var(--font-ui); font-size: 13px;
}
.search-result:hover { background: var(--selected); }
.search-result-ref { font-weight: 600; color: var(--accent); margin-right: 8px; }
.search-result mark { background: rgba(203,164,73,0.3); color: inherit; border-radius: 2px; }

#dark-mode-toggle {
    background: none; border: none; cursor: pointer;
    font-size: 20px; color: var(--text-muted); padding: 6px;
}
body:not(.dark) .icon-moon { display: none; }
body.dark .icon-sun { display: none; }

/* === Navigation === */
#book-nav {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 20px;
    background: var(--nav-bg);
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
    position: sticky; top: 51px; z-index: 99;
}
.nav-selector {
    font-family: var(--font-ui); font-size: 14px; font-weight: 600;
    background: var(--header-bg); border: 1px solid var(--border);
    border-radius: 6px; padding: 6px 14px;
    cursor: pointer; white-space: nowrap;
    color: var(--text); display: flex; align-items: center; gap: 6px;
}
.nav-arrow { font-size: 10px; }
.chapter-btns { display: flex; gap: 2px; flex: 1; overflow-x: auto; }
.chapter-btns button {
    font-family: var(--font-ui); font-size: 13px;
    background: none; border: none; color: var(--text-muted);
    padding: 4px 8px; border-radius: 4px; cursor: pointer;
    min-width: 28px; white-space: nowrap;
}
.chapter-btns button:hover { background: var(--selected); color: var(--text); }
.chapter-btns button.active {
    background: var(--accent); color: #fff; font-weight: 600;
}
.ch-arrow {
    font-size: 22px; background: none; border: none;
    color: var(--text-muted); cursor: pointer; padding: 4px 8px;
}
.ch-arrow:hover { color: var(--accent); }

/* === Book selector overlay === */
.overlay {
    position: fixed; inset: 0; z-index: 500;
    background: var(--overlay-bg);
    display: flex; align-items: center; justify-content: center;
}
.overlay.hidden { display: none; }
.overlay-content {
    background: var(--header-bg); border-radius: 12px;
    max-width: 600px; width: 90%; max-height: 80vh;
    overflow-y: auto; padding: 24px;
}
.overlay-large { max-width: 800px; }
.overlay-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 16px;
}
.overlay-header h2 {
    font-family: var(--font-ui); font-size: 20px; font-weight: 600;
}
.overlay-close {
    font-size: 24px; background: none; border: none;
    color: var(--text-muted); cursor: pointer;
}
.book-group { margin-bottom: 16px; }
.book-group-label {
    font-family: var(--font-ui); font-size: 12px; font-weight: 600;
    color: var(--accent); text-transform: uppercase; letter-spacing: 0.1em;
    margin-bottom: 6px;
}
.book-group-items { display: flex; flex-wrap: wrap; gap: 4px; }
.book-group-items button {
    font-family: var(--font-ui); font-size: 13px;
    background: none; border: 1px solid var(--border);
    border-radius: 4px; padding: 4px 10px; cursor: pointer;
    color: var(--text);
}
.book-group-items button:hover { background: var(--selected); border-color: var(--accent); }
.book-group-items button.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.book-group-items button.book-unverified { color: var(--text-muted, #888); }
.book-group-items button.book-unverified.active { color: #fff; }
.book-flag-unverified {
    display: inline-block; margin-left: 4px;
    color: #d97706; /* warm-amber, leesbaar in light + dark */
    font-size: 11px; line-height: 1;
}
.book-group-items button.active .book-flag-unverified { color: #fff; }
/* Hoofdstukken van het geopende boek, direct onder dat boek */
.book-chapters {
    flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 4px;
    margin: 2px 0 8px; padding: 4px 0 4px 10px;
    border-left: 2px solid var(--accent);
}
.book-chapters[hidden] { display: none; }
.book-group-items .book-chapters button { min-width: 2.6em; padding: 4px 6px; text-align: center; }

/* === Main content === */
#reader-content {
    max-width: var(--content-width);
    margin: 0 auto; padding: 30px 20px 100px;
}
#chapter-heading {
    font-family: var(--font-body); font-size: 28px; font-weight: 500;
    margin-bottom: 16px; color: var(--text);
}
.chapter-intro {
    font-style: italic; color: var(--text-muted);
    margin-bottom: 24px; font-size: 0.9rem; line-height: 1.6;
}
.book-intro {
    background: var(--nav-bg); border-radius: 8px;
    padding: 16px 20px; margin-bottom: 24px;
    font-size: 0.85rem; line-height: 1.6; cursor: pointer;
}
.book-intro.hidden { display: none; }
.book-intro-label {
    font-family: var(--font-ui); font-size: 12px; font-weight: 600;
    color: var(--accent); text-transform: uppercase; letter-spacing: 0.05em;
    display: block; margin-bottom: 6px;
}
.book-intro.collapsed .book-intro-text {
    max-height: 3.2em; overflow: hidden;
    -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent);
    mask-image: linear-gradient(180deg, #000 60%, transparent);
}

/* === Verses === */
#verses { line-height: 1.85; }
.verse-num {
    font-size: 0.6em; font-weight: 700;
    color: var(--text-muted); vertical-align: super;
    margin-right: 2px; cursor: pointer;
    user-select: none; padding: 2px;
}
.verse-num:hover { color: var(--accent); }
.verse-span.selected {
    background: var(--selected);
    border-radius: 3px;
    outline: 1px solid var(--selected-border);
}
.god-speaks { color: var(--god-speaks); font-style: italic; }
.direct-speech { font-style: italic; }
/* Citaat binnen een citaat: geel, zodat de lagen uit elkaar te houden zijn. */
.direct-speech .direct-speech, .direct-speech .god-speaks,
.god-speaks .direct-speech,    .god-speaks .god-speaks,
.angel-speaks .direct-speech,  .angel-speaks .god-speaks,
.devil-speaks .direct-speech,  .devil-speaks .god-speaks { color: var(--citaat-genest); }
.note-marker {
    font-size: 0.6em; font-weight: 700;
    color: var(--note-marker); vertical-align: super;
    cursor: pointer; padding: 0 1px;
}
.note-marker:hover { text-decoration: underline; }

/* Alfabetlied. Klaagliederen 1–4, Psalm 25, 34, 37, 111, 112, 119 en 145 en
   Spreuken 31 beginnen elk vers of elke strofe met de volgende letter van het
   Hebreeuwse alfabet. De letter en zijn naam zijn een redactionele markering en
   geen tekst die iemand uitspreekt; ze staan daarom apart. Het Hebreeuwse font
   moet er uitdrukkelijk bij, want het is zonder unicode-range gedeclareerd. */
.acrostichon {
    font-family: 'Noto Serif Hebrew', serif;
    font-style: italic;
    color: var(--accent, #b8860b);
}

/* === Notes panel === */
#notes-panel {
    position: fixed; right: 0; top: 51px; bottom: 0;
    width: 320px; background: var(--header-bg);
    border-left: 1px solid var(--border);
    padding: 16px 20px; overflow-y: auto;
    z-index: 90; transition: transform 0.3s;
}
#notes-panel.hidden { transform: translateX(100%); }
.notes-panel-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 12px;
}
.notes-panel-header h3 { font-family: var(--font-ui); font-size: 16px; font-weight: 600; }
.notes-close { font-size: 20px; background: none; border: none; color: var(--text-muted); cursor: pointer; }
.note-item {
    margin-bottom: 12px; font-size: 0.8rem; line-height: 1.5;
}
.note-item-marker {
    font-weight: 700; color: var(--note-marker);
    margin-right: 4px; font-size: 0.85rem;
}

/* === Copy toolbar === */
.copy-toolbar {
    position: fixed; bottom: -60px; left: 50%; transform: translateX(-50%);
    background: #142e42; color: #fff;
    padding: 10px 18px; border-radius: 10px;
    display: flex; align-items: center; gap: 12px;
    z-index: 300; box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    transition: bottom 0.25s; font-family: var(--font-ui); font-size: 14px;
}
.copy-toolbar.visible { bottom: 24px; }
#copy-count { font-weight: 500; min-width: 120px; }
.copy-toolbar button {
    background: rgba(255,255,255,0.15); color: #fff; border: none;
    padding: 6px 14px; border-radius: 6px; cursor: pointer;
    font-size: 13px; font-weight: 500; font-family: var(--font-ui);
}
.copy-toolbar button:hover { background: var(--accent); color: #142e42; }

/* === Strong's popover === */
.popover {
    position: absolute; z-index: 400;
    background: var(--header-bg); border: 1px solid var(--border);
    border-radius: 8px; padding: 12px 16px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    max-width: 300px; font-family: var(--font-ui); font-size: 13px;
}
.popover.hidden { display: none; }
.popover-word { font-size: 22px; margin-bottom: 4px; }
.popover-strongs { color: var(--text-muted); font-size: 12px; margin-bottom: 4px; }
.popover-gloss { margin-bottom: 8px; }
.popover-more {
    font-size: 12px; color: var(--link); background: none;
    border: none; cursor: pointer; padding: 0;
}
.popover-more:hover { text-decoration: underline; }

/* === Lexicon modal === */
#lexicon-body {
    font-size: 14px; line-height: 1.6;
}
#lexicon-body .lex-word { font-size: 28px; margin-bottom: 8px; }
#lexicon-body .lex-strongs { color: var(--text-muted); margin-bottom: 12px; }
#lexicon-body .lex-def { line-height: 1.7; }

/* === Mobile bottom nav === */
#mobile-nav {
    display: none; position: fixed; bottom: 0; left: 0; right: 0;
    background: var(--header-bg); border-top: 1px solid var(--border);
    z-index: 100; padding: 6px 0 env(safe-area-inset-bottom, 0);
}
.mobile-tab {
    flex: 1; display: flex; flex-direction: column; align-items: center;
    background: none; border: none; color: var(--text-muted);
    padding: 6px; cursor: pointer; font-family: var(--font-ui);
}
.mobile-tab.active { color: var(--accent); }
.tab-icon { font-size: 20px; }
.tab-label { font-size: 10px; margin-top: 2px; }

/* === Responsive === */
@media (max-width: 768px) {
    html { font-size: 16px; }
    #reader-header { padding: 8px 12px; }
    .reader-brand { width: 140px; }
    .reader-logo { width: auto; height: 40px; max-width: 100%; }
    .header-center { display: none; } /* search moves to mobile tab */
    #book-nav { padding: 6px 12px; top: 43px; }
    #reader-content { padding: 20px 16px 120px; }
    #chapter-heading { display: none; }   /* dubbel met footer-label op mobiel */
    #notes-panel { width: 100%; top: 0; }
    #mobile-nav { display: flex; }
    .copy-toolbar.visible { bottom: 70px; } /* above mobile nav */
    .ch-arrow { display: none; } /* use swipe instead */
}

/* === Swipe-hint animation === */
@keyframes swipe-hint {
    0% { opacity: 0; transform: translateX(0); }
    50% { opacity: 0.5; }
    100% { opacity: 0; transform: translateX(-20px); }
}

/* === Print === */
@media print {
    #reader-header, #book-nav, #mobile-nav, .copy-toolbar,
    #notes-panel, .popover, .overlay { display: none !important; }
    #reader-content { max-width: 100%; padding: 0; }
}


/* === Reader-footer (sticky onderaan: vorig/voorlezing/volgend) === */
.reader-footer {
    position: sticky;
    bottom: 0;
    z-index: 95;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 14px 24px;
    background: var(--navy, #142e42);
    color: #fff;
    border-top: 2px solid var(--gold, #cba449);
    box-shadow: 0 -4px 16px rgba(0,0,0,0.18);
}
.reader-footer > * { flex: 0 0 auto; }
.reader-footer .rf-label {
    flex: 0 1 auto;
    min-width: 110px;
    max-width: 360px;
    text-align: center;
    font-family: 'EB Garamond', Georgia, serif;
    font-style: italic;
    font-size: 17px;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: rgba(255,255,255,0.92);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.rf-btn {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.18);
    color: #fff;
    cursor: pointer;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    flex: 0 0 auto;
}
.rf-btn:hover { background: rgba(203,164,73,0.32); border-color: var(--gold, #cba449); }
.rf-btn:disabled { opacity: 0.35; cursor: not-allowed; }
/* Stem-toggle (man/vrouw) — tekstknop, pil-vorm i.p.v. rond */
.rf-voice {
    width: auto;
    min-width: 52px;
    padding: 0 12px;
    border-radius: 22px;
    font-family: var(--font-ui, sans-serif);
    font-size: 13px;
    font-weight: 600;
}
.rf-voice.hidden { display: none; }
.rf-btn:disabled:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.18); }
.rf-play {
    background: var(--gold, #cba449);
    color: var(--navy, #142e42);
    border: none;
    width: 56px;
    height: 56px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.rf-play:hover { background: #d9b35d; border: none; }
.rf-play.hidden { display: none; }
.rf-play .rf-pause-icon { display: none; }
.rf-play.is-playing .rf-play-icon { display: none; }
.rf-play.is-playing .rf-pause-icon { display: block; }
.rf-label {
    flex: 1 1 auto;
    text-align: center;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: rgba(255,255,255,0.92);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 768px) {
    .reader-footer { padding: 10px 12px; gap: 10px; }
    .rf-btn { width: 40px; height: 40px; }
    .rf-play { width: 50px; height: 50px; }
    .rf-label { font-size: 13px; }
}

/* === AI-concept-banner === */
.ai-concept-banner {
    background: #fef3c7;
    border-left: 4px solid #f59e0b;
    border-radius: 0 6px 6px 0;
    padding: 12px 16px;
    margin: 12px 0 18px;
    font-family: var(--font-body, 'Fira Sans', sans-serif);
    font-size: 13px;
    line-height: 1.55;
    color: #78350f;
}
.ai-concept-banner strong { color: #92400e; }

.ethiopic-banner {
    background: #ede9fe;
    border-left: 4px solid #7c3aed;
    border-radius: 0 6px 6px 0;
    padding: 12px 16px;
    margin: 12px 0 18px;
    font-family: var(--font-body, 'Fira Sans', sans-serif);
    font-size: 13px;
    line-height: 1.55;
    color: #4c1d95;
}
.ethiopic-banner strong { color: #5b21b6; }

/* Op de telefoon nemen de waarschuwingen boven de tekst anders het halve
   scherm in; compacter, zodat de leestekst direct in beeld komt. */
@media (max-width: 768px) {
    .ai-concept-banner,
    .ethiopic-banner {
        padding: 6px 10px;
        margin: 6px 0 10px;
        border-left-width: 3px;
        font-size: 11.5px;
        line-height: 1.4;
    }
}

/* ===========================================================================
   Bijbel-zoek-overlay (js/search.js) — gedeeld met index.html
   =========================================================================== */
.search-overlay {
    position: fixed;
    inset: 0;
    background: rgba(20, 46, 66, 0.55);
    z-index: 1200;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 60px 16px 24px;
    overflow-y: auto;
}
.search-overlay.hidden { display: none; }
.search-overlay .search-panel {
    background: var(--header-bg, #fff);
    color: var(--text, #222);
    width: 100%;
    max-width: 760px;
    border-radius: 10px;
    box-shadow: 0 12px 48px rgba(0,0,0,0.35);
    border-top: 4px solid var(--accent, #cba449);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 84px);
}
.search-overlay .search-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border, #e5e1d8);
}
.search-overlay #search-input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 18px;
    font-family: 'Fira Sans', sans-serif;
    padding: 6px 4px;
    color: var(--text, #222);
    background: transparent;
}
.search-overlay #search-input::placeholder { color: #999; }
.search-overlay .search-close {
    background: none;
    border: none;
    font-size: 28px;
    line-height: 1;
    color: #888;
    cursor: pointer;
    padding: 4px 10px;
    border-radius: 4px;
}
.search-overlay .search-close:hover { color: var(--accent, #cba449); background: rgba(0,0,0,0.04); }

.search-overlay .search-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    align-items: center;
    padding: 10px 18px;
    border-bottom: 1px solid var(--border, #e5e1d8);
    background: var(--bg, #faf8f5);
    font-size: 12px;
    color: var(--text, #555);
}
.search-overlay .search-cat {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    padding: 2px 4px;
    user-select: none;
}
.search-overlay .search-cat input { margin: 0; cursor: pointer; }
.search-overlay .search-cat-actions {
    margin-left: auto;
    font-size: 11px;
    color: #888;
}
.search-overlay .search-cat-actions a {
    color: var(--accent, #cba449);
    text-decoration: none;
    font-weight: 500;
}
.search-overlay .search-cat-actions a:hover { text-decoration: underline; }

.search-overlay .search-results {
    flex: 1;
    overflow-y: auto;
    padding: 0;
}
.search-overlay .search-empty {
    padding: 28px 18px;
    color: #888;
    font-style: italic;
    text-align: center;
    font-size: 14px;
}
.search-overlay .search-result {
    padding: 12px 18px;
    border-bottom: 1px solid var(--border, #e5e1d8);
    cursor: pointer;
    transition: background 0.12s;
}
.search-overlay .search-result:hover,
.search-overlay .search-result:focus { background: var(--selected, rgba(203,164,73,0.08)); outline: none; }
.search-overlay .search-result-ref {
    font-size: 12px;
    font-weight: 600;
    color: var(--accent, #cba449);
    letter-spacing: 0.02em;
    margin-bottom: 3px;
}
.search-overlay .search-result-text {
    color: var(--text, #333);
    font-size: 14px;
    line-height: 1.55;
}
.search-overlay .search-result-text mark {
    background: #fef3c7;
    color: #222;
    padding: 0 2px;
    border-radius: 2px;
}
.search-overlay .search-more {
    padding: 12px 18px;
    text-align: center;
    color: #888;
    font-size: 12px;
    background: var(--bg, #faf8f5);
    border-top: 1px solid var(--border, #e5e1d8);
}

/* Mobiel: full-width overlay */
@media (max-width: 640px) {
    .search-overlay { padding: 0; }
    .search-overlay .search-panel {
        max-width: 100%;
        height: 100vh;
        max-height: 100vh;
        border-radius: 0;
        border-top: none;
    }
    .search-overlay .search-categories { font-size: 11px; }
}

/* Lees-trigger (header-input) — readonly, opent overlay bij klik */
#lees-search-trigger { cursor: pointer; }
#lees-search-trigger:focus { outline: 1px solid var(--accent, #cba449); }

/* === Vers-highlight bij navigatie via zoekfunctie === */
.verse-span.search-highlight {
    background-color: #fef3c7;
    box-shadow: 0 0 0 4px #fef3c7;
    border-radius: 3px;
    transition: background-color 1.5s ease-out, box-shadow 1.5s ease-out;
    animation: leesSearchHighlightFade 3s ease-out;
}
@keyframes leesSearchHighlightFade {
    0%   { background-color: #fef3c7; box-shadow: 0 0 0 4px #fef3c7; }
    70%  { background-color: #fef3c7; box-shadow: 0 0 0 4px #fef3c7; }
    100% { background-color: transparent; box-shadow: 0 0 0 4px transparent; }
}
/* Dark mode aanpassing */
body.dark .search-overlay .search-panel { background: #232336; color: #eee; }
body.dark .search-overlay #search-input { color: #eee; }
body.dark .search-overlay .search-categories { background: #1c1c2e; color: #ccc; }
body.dark .search-overlay .search-result { color: #ddd; }
body.dark .search-overlay .search-result:hover,
body.dark .search-overlay .search-result:focus { background: #2d2d44; }
body.dark .search-overlay .search-result-text { color: #ddd; }
body.dark .search-overlay .search-result-text mark { background: #f59e0b; color: #1a1a2e; }
body.dark .search-overlay .search-more { background: #1c1c2e; color: #999; }
body.dark .verse-span.search-highlight { background-color: #f59e0b; box-shadow: 0 0 0 4px #f59e0b; color: #1a1a2e; }


/* === Concept / niet-gecontroleerd hoofdstuk markering (lees) === */
.chapter-concept-tag {
    display: inline-block;
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #f59e0b;
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    vertical-align: middle;
    margin-left: 10px;
    font-family: 'Fira Sans', sans-serif;
}

/* Hoofdstuk-knoppen in lees.html — niet-geverifieerd subtiele warning-tint */
#chapter-buttons button.unverified {
    color: #92400e;
    background: rgba(254,243,199,0.4);
    border-color: rgba(245,158,11,0.4);
}
#chapter-buttons button.unverified:hover {
    background: rgba(254,243,199,0.7);
}
#chapter-buttons button.unverified.active {
    color: #fff;
    background: #92400e;
    border-color: #92400e;
}

/* Dark-mode variant */
body.dark .chapter-concept-tag {
    background: rgba(245,158,11,0.18);
    color: #fbbf24;
    border-color: rgba(245,158,11,0.4);
}
body.dark #chapter-buttons button.unverified {
    color: #fbbf24;
    background: rgba(245,158,11,0.10);
}

/* Verse-row klikbaar (selecteer hele tekstrij, niet alleen nummer) */
.verse-span { cursor: pointer; }
.verse-span .verse-num { cursor: pointer; }
.verse-span.selected { background: rgba(203,164,73,0.18); border-radius: 3px; }

/* Copy-toolbar — extra knoppen Delen + Op afbeelding */
.copy-toolbar #vers-share,
.copy-toolbar #vers-image {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.copy-toolbar #vers-share svg { display: inline-block; }

/* Modal overlay voor afbeelding */
#vers-image-modal {
    position: fixed; inset: 0; background: rgba(20,46,66,0.7);
    display: flex; align-items: center; justify-content: center;
    z-index: 1000; padding: 20px;
}
#vers-image-modal.hidden { display: none; }

/* Compactere knoppen op mobiel zodat de 5 knoppen passen */
@media (max-width: 600px) {
    .copy-toolbar { padding: 8px 10px; gap: 6px; flex-wrap: wrap; }
    .copy-toolbar button { padding: 7px 10px; font-size: 13px; }
    .copy-toolbar #vers-share svg { width: 14px; height: 14px; }
}

/* Inklapbare book-groep in de book-selector-overlay (Ethiopische boeken) */
.book-group-collapsible .book-group-label::before { content: '▸ '; font-size: 11px; opacity: 0.6; }
.book-group-collapsible:not(.collapsed) .book-group-label::before { content: '▾ '; }
.book-group-collapsible.collapsed .book-group-items { display: none; }

/* Boek-datering (schrijftijd + oudste handschrift) bovenin */
.book-dating {
    font-family: var(--font-ui, 'Fira Sans', sans-serif);
    font-size: 12.5px; line-height: 1.5;
    color: var(--text-muted, #777);
    background: var(--nav-bg, #f5f2ed);
    border-radius: 6px; padding: 8px 12px; margin: 4px 0 16px;
}
.book-dating .dating-label { font-weight: 600; color: var(--accent, #b8860b); }

/* Klikbare 'oudste handschrift' in de datering-box -> grondteksten.html */
.book-dating .dating-link { color: var(--accent, #b8860b); text-decoration: none; border-bottom: 1px dotted var(--accent, #b8860b); }
.book-dating .dating-link:hover { border-bottom-style: solid; }

/* === Hooglied: elke spreker zijn eigen kleur === */
/* Zie css/style.css voor de toelichting. */
:root {
    --bride-speaks: #a8386b;
    --groom-speaks: #1f6f8b;
    --chorus-speaks: #5f6b2f;
}
:root[data-theme="donker"] {
    --bride-speaks: #e9a3c0;
    --groom-speaks: #8ecae6;
    --chorus-speaks: #bcc98a;
}
.bride-speaks  { color: var(--bride-speaks);  font-style: italic; }
.groom-speaks  { color: var(--groom-speaks);  font-style: italic; }
.chorus-speaks { color: var(--chorus-speaks); font-style: italic; }