/* DFB Læsning — minimal nav-bar styling.
 * Formål: få BOG/KAPITEL labels, dropdowns, VIS-knap og pager til
 * at klappe sammen til en kompakt nav-bar, uanset om siden er bygget
 * i Elementor (dfb.maymann.net) eller renderes via en standard
 * single-template (kjv.cm via Domainer).
 *
 * VIGTIGT: Denne fil styler KUN nav-baren. Vers-listen, kapitel-
 * overskrifter, og resten af temaets layout røres ikke.
 */

/* Nav-bar selve linjen: labels + dropdowns + VIS-knap på samme række */
.dfb-laesning-wrap .dfb-nav-selects {
    display: flex;
    align-items: flex-end;
    gap: 1.25rem;
    flex-wrap: wrap;
    margin: 0;
}

/* Label-stak: label oven på dropdown, tæt sammen */
.dfb-laesning-wrap .dfb-select-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin: 0;
}

/* Label */
.dfb-laesning-wrap .dfb-label {
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #888;
    margin: 0;
    line-height: 1;
}

/* VIS-knap aligned med dropdownsene (ikke svævende oppe) */
.dfb-laesning-wrap .dfb-btn-vis {
    align-self: flex-end;
    margin: 0;
}

/* Pager (← Forrige / Næste →) tæt under nav-baren — ikke langt nede */
.dfb-laesning-wrap .dfb-nav-pager {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 1rem 0 0 0;
}

/* Skillelinjen under nav-baren — kompakt afstand */
.dfb-laesning-wrap .dfb-nav {
    margin-bottom: 1.5rem;
}

/* Reset af legacy-regel (button {width:100px}) der ellers ville
   gøre VIS, Forrige, Næste alle 100px brede uanset indhold */
.dfb-laesning-wrap .dfb-btn-vis,
.dfb-laesning-wrap .dfb-pager-btn,
.dfb-laesning-wrap .dfb-mega-btn {
    width: auto;
}

/* ───────────────────────────────────────────────────────────────────────
 * Fremhævet vers (pæne læse-URL'er, 1.7.8)
 * Aktiveres når man slår op via /Matt1.18 — hele kapitlet vises,
 * og vers 18 får en blød baggrundsfarve. Kun selve vers-elementet
 * styles; resten af temaets layout røres ikke.
 * ─────────────────────────────────────────────────────────────────────── */
.dfb-laesning-wrap .dfb-vers-item.dfb-vers--fremhaevet,
.dfb-vers-item.dfb-vers--fremhaevet {
    background: #fff3bf;                 /* blød rav-gul */
    box-shadow: inset 3px 0 0 0 #e8a200; /* venstre-accent */
    border-radius: 4px;
    padding: 0.35rem 0.5rem;
    margin-left: -0.5rem;
    margin-right: -0.5rem;
    /* Plads så smooth-scroll ikke gemmer verset bag en sticky header */
    scroll-margin-top: 5rem;
    transition: background-color 0.4s ease;
}

/* Mørkt læsetema */
@media (prefers-color-scheme: dark) {
    .dfb-laesning-wrap .dfb-vers-item.dfb-vers--fremhaevet,
    .dfb-vers-item.dfb-vers--fremhaevet {
        background: rgba(232, 162, 0, 0.18);
        box-shadow: inset 3px 0 0 0 #e8a200;
    }
}
/* ── Vers-badges (G/H, KJV, ASV, IL) ─────────────────────────────────── */
.dfb-g-btn,
.dfb-kjv-btn,
.dfb-asv-btn,
.dfb-il-btn,
.dfb-kr-btn,
.dfb-graf-btn {
    display:         inline-flex !important;
    align-items:     center !important;
    justify-content: center !important;
    width:           28px !important;
    height:          28px !important;
    border-radius:   50% !important;
    border:          none !important;
    font-size:       0.65rem !important;
    font-weight:     700 !important;
    line-height:     1 !important;
    cursor:          pointer !important;
    padding:         0 !important;
    box-sizing:      border-box !important;
}

/* Skjul badge naar laesevaerktoejet er slaaet fra. To klasser => hoejere
   specificitet end '.dfb-kjv-btn { display:inline-flex !important }', og selv
   !important, saa den vinder. JS toggler '.dfb-skjult' i stedet for inline style. */
.dfb-g-btn.dfb-skjult,
.dfb-kjv-btn.dfb-skjult,
.dfb-asv-btn.dfb-skjult,
.dfb-il-btn.dfb-skjult,
.dfb-kr-btn.dfb-skjult,
.dfb-graf-btn.dfb-skjult,
.dfb-note-toggle.dfb-skjult,
.dfb-bm-vers-btn.dfb-skjult,
.dfb-kb-toggle.dfb-skjult,
.dfb-kb-fra .dfb-kb-toggle {
    display: none !important;
}

/* 'Mine markeringer' slaaet fra: farven fjernes, markeringen bevares og
   kommer igen naar kontakten slaas til. Indrykning/linjeskift er layout
   og bliver staaende. */
.dfb-hl-fra mark.dfb-hl,
.dfb-hl-fra mark.dfb-hl:hover {
    background: transparent !important;
    box-shadow: none !important;
    color: inherit !important;
}
.dfb-lv-badge--hl { background: #c9a227 !important; color: #fff !important; }

.dfb-kr-btn {
    background: #6b4a86 !important;
    color:      #ffffff !important;
    font-size:  0.85rem !important;
}

.dfb-graf-btn {
    background: #8b1a1a !important;
    color:      #ffffff !important;
    vertical-align: middle !important;
    margin-left: 3px;
    margin-right: 2px;
}
.dfb-graf-btn svg {
    display: block !important;
}
.dfb-graf-btn svg {
    display: block;
}

.dfb-g-btn {
    background: #8b1a1a !important;
    color:      #ffffff !important;
}
.dfb-h-btn {
    background: #c0392b !important;
    color:      #ffffff !important;
}
/* 2.8.0: statisk forrige/naeste paa server-renderede kapitler (erstattes af JS) */
.dfb-ssr-pager { margin-top: 1.5rem; font-family: system-ui, sans-serif; font-size: 0.9rem; }

/* ───────────────────────────────────────────────────────────────────────
 * 2.9.0: Blivende navigation under kapitlet (#dfb-bibelnav)
 * Forrige/naeste, kapitler i bogen og alle boeger — rigtige links.
 * Farver/skrift foelger temaets --bb-*-tokens med faste reservevaerdier,
 * saa blokken ogsaa ser rigtig ud paa sites uden Brugbibelen-temaet.
 * ─────────────────────────────────────────────────────────────────────── */
.dfb-bibelnav {
    --bn-oxblod: var(--bb-oxblod, #8b1a1a);
    --bn-kant:   var(--bb-kant, #d6c8b4);
    --bn-daempet: var(--bb-tekst-daempet, #6b5d52);
    margin: 2.5rem 0 0;
    padding: 1.25rem 0 0;
    border-top: 1px solid var(--bn-kant);
    font-family: var(--bb-sans, system-ui, -apple-system, "Segoe UI", sans-serif);
    font-size: 0.92rem;
    line-height: 1.4;
}
.dfb-bibelnav [hidden] { display: none !important; }

/* Forrige / naeste */
.dfb-bibelnav .dfb-bn-pager {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.5rem 1.5rem;
    margin: 0 0 1.25rem;
}
.dfb-bibelnav .dfb-bn-pager a {
    font-family: var(--bb-serif, Georgia, "Times New Roman", serif);
    font-size: 1rem;
    color: var(--bn-oxblod);
    text-decoration: none;
    padding: 0.35rem 0;
}
.dfb-bibelnav .dfb-bn-pager a:hover,
.dfb-bibelnav .dfb-bn-pager a:focus-visible { text-decoration: underline; }
.dfb-bibelnav .dfb-bn-next { margin-left: auto; text-align: right; }

/* Sektioner (kapitler / boeger) */
.dfb-bibelnav .dfb-bn-sektion { margin: 0 0 1rem; }
.dfb-bibelnav .dfb-bn-sektion > summary {
    cursor: pointer;
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--bn-daempet);
    padding: 0.35rem 0;
}
.dfb-bibelnav .dfb-bn-sektion > summary:hover { color: var(--bn-oxblod); }
.dfb-bibelnav .dfb-bn-sektion > summary:focus-visible,
.dfb-bibelnav a:focus-visible {
    outline: 2px solid var(--bb-guld, #b5893f);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Kapitel-felter */
.dfb-bibelnav .dfb-bn-kapliste {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin: 0.5rem 0 0;
    padding: 0;
}
.dfb-bibelnav .dfb-bn-kapliste li { margin: 0; padding: 0; }
.dfb-bibelnav .dfb-bn-kapliste a,
.dfb-bibelnav .dfb-bn-kapliste span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.4rem;
    height: 2.4rem;
    padding: 0 0.3rem;
    box-sizing: border-box;
    border: 1px solid var(--bn-kant);
    border-radius: 6px;
    background: #fff;
    color: inherit;
    text-decoration: none;
    font-variant-numeric: tabular-nums;
}
.dfb-bibelnav .dfb-bn-kapliste a:hover {
    border-color: var(--bn-oxblod);
    color: var(--bn-oxblod);
}
.dfb-bibelnav .dfb-bn-kapliste .er-aktiv {
    background: var(--bn-oxblod);
    border-color: var(--bn-oxblod);
    color: #fff;
    font-weight: 600;
}
.dfb-bibelnav .dfb-bn-ikke { opacity: 0.4; cursor: default; }
/* Ikke oversat, men kan laeses via fallback-oversaettelsen: graa tekst. */
.dfb-bibelnav .dfb-bn-kapliste a.dfb-bn-uoversat { color: #a39d93; }
.dfb-bibelnav .dfb-bn-kapliste a.dfb-bn-uoversat:hover { color: var(--bn-oxblod); }
.dfb-mega-menu .dfb-mega-kap-btn.dfb-mega-uoversat:not(.dfb-mega-active):not(:hover) { color: #a39d93; }

/* Boglisten */
.dfb-bibelnav .dfb-bn-gruppe {
    margin: 0.9rem 0 0.35rem;
    font-family: var(--bb-serif, Georgia, "Times New Roman", serif);
    font-size: 1rem;
    font-weight: 600;
}
.dfb-bibelnav .dfb-bn-bogliste {
    list-style: none;
    margin: 0;
    padding: 0;
    columns: 3 11rem;
    column-gap: 1.5rem;
}
.dfb-bibelnav .dfb-bn-bogliste li {
    margin: 0;
    padding: 0;
    break-inside: avoid;
}
.dfb-bibelnav .dfb-bn-bogliste a,
.dfb-bibelnav .dfb-bn-bogliste span {
    display: inline-block;
    padding: 0.3rem 0;
    color: inherit;
    text-decoration: none;
}
.dfb-bibelnav .dfb-bn-bogliste a:hover { color: var(--bn-oxblod); text-decoration: underline; }
.dfb-bibelnav .dfb-bn-bogliste a.er-aktiv { color: var(--bn-oxblod); font-weight: 600; }

@media print {
    .dfb-bibelnav { display: none; }
}

/* "Fjern mellemrum" (Laesevaerktoejer): ingen luft eller streg mellem vers. */
.dfb-kompakt .dfb-vers-item {
    padding-top: 0;
    padding-bottom: 0;
    border-bottom: none;
}

/* Tekststoerrelse (Laesevaerktoejer): skalerer verstekst og versnumre. */
#dfb-kapitel-wrap.dfb-ts-aktiv .dfb-vers-tekst { font-size: calc(1rem * var(--dfb-ts, 1)); }
#dfb-kapitel-wrap.dfb-ts-aktiv .dfb-vers-num  { font-size: calc(0.7rem * var(--dfb-ts, 1)); }

/* 'Ord og farver' slaaet fra (Laesevaerktoejer): alt fra brugerens saet
   skjules - farve, linjeskift og indrykning - uden at noget slettes. */
.dfb-of-fra mark.dfb-of2-mark {
    background: transparent !important;
    border-bottom: none !important;
    color: inherit !important;
}
.dfb-of-fra br.dfb-of2-br {
    display: none !important;
}
.dfb-of-fra span.dfb-of2-indent {
    margin-left: 0 !important;
    display: inline !important;
    padding-left: 0 !important;
}
