/* Bible Étude — reading pages. Standalone theme, independent from the WordPress theme. */
:root {
    --be-size-step: 0;
    --be-top: 3.5rem;
    --be-side: 19rem;
    --be-panel: 26rem;
    --be-font-text: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
    --be-font-ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
.be-theme-light {
    --be-word-highlight: #b7e5d7;
    --be-bg: #f3f9fb; --be-surface: #e9f4f3; --be-border: #cbdfe1; --be-text: #1f2430; --be-muted: #59627a;
    --be-accent: #1a6c7a; --be-accent-text: #ffffff; --be-jesus: #b3141b; --be-highlight: #dff5e8; --be-topbar: linear-gradient(135deg, #1a6c7a 0%, #12545f 100%); --be-topbar-text: #ffffff;
}
.be-theme-sepia {
    --be-word-highlight: #ead080;
    --be-bg: #f6efe0; --be-surface: #ece2cc; --be-border: #d6c8a8; --be-text: #3b2f22; --be-muted: #75654f;
    --be-accent: #8a4b14; --be-accent-text: #fffaf0; --be-jesus: #a3161a; --be-highlight: #f3dc9c; --be-topbar: #5b3a1b; --be-topbar-text: #fffaf0;
}
.be-theme-dark {
    --be-word-highlight: #365044;
    --be-bg: #15181d; --be-surface: #1e232a; --be-border: #343b45; --be-text: #e6e8eb; --be-muted: #9aa4b1;
    --be-accent: #6cb4ff; --be-accent-text: #0d1117; --be-jesus: #ff7b72; --be-highlight: #3d3417; --be-topbar: #0d1117; --be-topbar-text: #e6e8eb;
}

*, *::before, *::after { box-sizing: border-box; }
html.be-root { scroll-padding-top: calc(var(--be-top) + 1rem); }
.be-body {
    margin: 0; min-height: 100vh; display: flex; flex-direction: column;
    background: var(--be-bg); color: var(--be-text); font: 16px/1.5 var(--be-font-ui);
}
.be-body a { color: var(--be-accent); }
.be-body h1, .be-body h2 { line-height: 1.2; }
.be-muted { color: var(--be-muted); }
.screen-reader-text, .be-skip:not(:focus) {
    position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.be-skip:focus { position: fixed; z-index: 100; top: .5rem; left: .5rem; padding: .5rem 1rem; background: var(--be-bg); }
:focus-visible { outline: 2px solid var(--be-accent); outline-offset: 2px; }

/* Top bar */
.be-topbar {
    position: sticky; top: 0; z-index: 30; height: var(--be-top);
    display: flex; align-items: center; gap: 1rem; padding: 0 1rem;
    background: var(--be-topbar); color: var(--be-topbar-text);
}
.be-topbar a { color: inherit; text-decoration: none; }
.be-brand { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; font-size: 1.1rem; white-space: nowrap; }
.be-brand-logo { width: 32px; height: 32px; object-fit: contain; background: transparent; }
.be-topnav { display: flex; gap: .25rem; margin-right: auto; overflow-x: auto; }
.be-topnav a { padding: .35rem .7rem; border-radius: .4rem; opacity: .85; white-space: nowrap; }
.be-topnav a:hover, .be-topnav a[aria-current] { opacity: 1; background: rgba(255, 255, 255, .15); }
.be-theme { display: flex; align-items: center; gap: .4rem; font-size: .85rem; }
.be-theme select { font: inherit; padding: .2rem .4rem; border-radius: .4rem; border: 0; }
.be-icon-button {
    width: 2.2rem; height: 2.2rem; border: 0; border-radius: .4rem; cursor: pointer;
    background: rgba(255, 255, 255, .12); color: inherit; font-size: 1.2rem;
}
.be-sidebar-toggle { display: none; }
.be-mode-chapter .be-sidebar-toggle { display: inline-block; }

/* Forms */
.be-selector, .be-search { display: flex; gap: .4rem; margin-bottom: .75rem; }
.be-body input, .be-body select, .be-body button { font: inherit; color: var(--be-text); }
.be-selector select, .be-search input {
    flex: 1 1 auto; min-width: 0; padding: .45rem .6rem; border: 1px solid var(--be-border); border-radius: .4rem; background: var(--be-bg);
}
.be-selector input { width: 4.5rem; padding: .45rem; border: 1px solid var(--be-border); border-radius: .4rem; background: var(--be-bg); }
.be-selector button, .be-search button, .be-button {
    padding: .45rem .8rem; border: 0; border-radius: .4rem; cursor: pointer; white-space: nowrap;
    background: var(--be-accent); color: var(--be-accent-text) !important; text-decoration: none; display: inline-block;
}

.be-main { flex: 1 0 auto; width: 100%; }
.be-page { padding: 1.5rem clamp(1rem, 3vw, 3rem) 3rem; }
.be-page > h1 { text-align: center; font-family: var(--be-font-text); font-size: clamp(1.8rem, 3vw, 2.6rem); }
.be-message { text-align: center; }

.be-dictionary { max-width: 90rem; margin: 0 auto; }
.be-dictionary > .be-search { max-width: 35rem; margin: 0 auto 1.5rem; }
.be-dictionary-definition { padding: clamp(1rem, 3vw, 2rem); background: var(--be-surface); border: 1px solid var(--be-border); border-radius: .6rem; }
.be-dictionary-definition h2 { margin-top: 0; }
.be-dictionary-definition dl { display: grid; grid-template-columns: minmax(8rem, 1fr) 3fr; gap: .6rem 1rem; }
.be-dictionary-definition dt { font-weight: 600; }
.be-dictionary-definition dd { margin: 0; overflow-wrap: anywhere; }
.be-dictionary-source { font-size: .85rem; }
.be-dictionary-table-wrap { overflow-x: auto; }
.be-dictionary-table { width: 100%; border-collapse: collapse; }
.be-dictionary-table th, .be-dictionary-table td { padding: 1rem; border: 1px solid var(--be-border); text-align: left; vertical-align: top; }
.be-dictionary-table thead { background: var(--be-surface); }
.be-dictionary-table th[scope="row"] { width: 12rem; min-width: 9rem; }
.be-dictionary-table th small { display: block; font-weight: 400; }
.be-dictionary-table td { font: 1.15rem/1.8 var(--be-font-text); overflow-wrap: anywhere; }
.be-dictionary-hit { background: #ffe66b; color: #242000; padding: .05em .12em; border-radius: .15em; }
.be-dictionary-word { color: var(--be-muted); font: .8em var(--be-font-ui); }
.be-dictionary-unpositioned { font: .85rem/1.5 var(--be-font-ui); }
@media (max-width: 600px) {
    .be-dictionary-definition dl { grid-template-columns: 1fr; gap: .3rem; }
    .be-dictionary-definition dd { margin-bottom: .6rem; }
    .be-dictionary-table th, .be-dictionary-table td { padding: .6rem; }
}

/* Index */
.be-index-tools { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: 0 1.5rem; max-width: 60rem; margin: 0 auto 1.5rem; }
.be-index-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: 1rem; align-items: start; }
.be-card { border: 1px solid var(--be-border); border-radius: .6rem; overflow: hidden; background: var(--be-bg); }
.be-card h2 { margin: 0; padding: .6rem 1rem; font-size: 1rem; background: var(--be-surface); border-bottom: 1px solid var(--be-border); }
.be-card ul { list-style: none; margin: 0; padding: 0; }
.be-card li { display: flex; justify-content: space-between; gap: .5rem; padding: .45rem 1rem; border-top: 1px solid var(--be-border); }
.be-card li:first-child { border-top: 0; }
.be-card a { text-decoration: none; }
.be-card .be-muted { font-size: .85rem; }

/* Chapter layout: sidebar | text | optional cross-reference panel, full width */
.be-layout { display: grid; grid-template-columns: var(--be-side) minmax(0, 1fr); align-items: start; }
.be-layout.has-panel { grid-template-columns: var(--be-side) minmax(0, 1fr) var(--be-panel); }
.be-no-sidebar .be-layout { grid-template-columns: minmax(0, 1fr); }
.be-no-sidebar .be-layout.has-panel { grid-template-columns: minmax(0, 1fr) var(--be-panel); }
.be-no-sidebar .be-sidebar { display: none; }

.be-sidebar, .be-panel {
    position: sticky; top: var(--be-top); height: calc(100vh - var(--be-top)); overflow-y: auto;
    padding: 1rem; background: var(--be-surface);
}
.be-sidebar { border-right: 1px solid var(--be-border); }
.be-sidebar h2 { margin: 1.1rem 0 .4rem; font-size: .95rem; text-transform: uppercase; letter-spacing: .04em; color: var(--be-muted); }
.be-grid { display: grid; gap: .2rem; }
.be-grid-chapters { grid-template-columns: repeat(auto-fill, minmax(2.4rem, 1fr)); }
.be-grid-books { grid-template-columns: repeat(auto-fill, minmax(3.3rem, 1fr)); }
.be-grid a { padding: .3rem 0; text-align: center; border-radius: .35rem; text-decoration: none; font-size: .9rem; }
.be-grid a:hover { background: var(--be-border); }
.be-grid a.is-current { background: var(--be-accent); color: var(--be-accent-text); }

.be-reader { min-width: 0; padding: 1rem clamp(1rem, 3vw, 3.5rem) 3rem; }
.be-reader-head h1 { margin: .5rem 0; text-align: center; font-family: var(--be-font-text); font-size: clamp(1.7rem, 2.6vw, 2.4rem); }
.be-reader-head h1 small { font-size: .55em; color: var(--be-muted); font-weight: normal; }
.be-pager { display: flex; justify-content: space-between; gap: 1rem; margin: .75rem 0; }
.be-pager a { text-decoration: none; padding: .3rem .6rem; border-radius: .4rem; }
.be-pager a:hover { background: var(--be-surface); }
.be-options { display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem; margin: .5rem 0 1.25rem; font-size: .85rem; }
.be-toggle, .be-size button {
    display: inline-flex; align-items: center; gap: .3rem; padding: .25rem .6rem; cursor: pointer; user-select: none;
    border: 1px solid var(--be-border); border-radius: 1rem; background: var(--be-bg);
}
.be-toggle:has(input:checked) { border-color: var(--be-accent); background: var(--be-surface); }
.be-toggle input { accent-color: var(--be-accent); margin: 0; }
.be-size { display: inline-flex; gap: .25rem; }

/* Bible text */
.be-chapter {
    font-family: var(--be-font-text); text-align: justify; hyphens: auto;
    font-size: calc(1.15rem + var(--be-size-step) * .125rem); line-height: 1.75;
}
.be-show-columns .be-chapter { column-width: 30rem; column-gap: 3rem; column-rule: 1px solid var(--be-border); }
.be-verse { border-radius: .2rem; transition: background-color .3s; }
.be-show-lines .be-verse { display: block; margin-bottom: .35rem; break-inside: avoid; }
.be-verse.is-selected, .be-verse:target { background: var(--be-highlight); }
.be-num { font-family: var(--be-font-ui); font-size: .62em; font-weight: 700; display: none; }
.be-num a { color: var(--be-muted); text-decoration: none; }
.be-show-numbers .be-num { display: inline; }
.be-show-red .be-jesus { color: var(--be-jesus); }
.be-word { border-radius: .15em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.be-word.is-related { background-color: var(--be-word-highlight); }
.be-strongs { display: none; font-family: var(--be-font-ui); font-size: .62em; }
.be-strongs a, .be-sn a { color: var(--be-muted); text-decoration: none; }
.be-strongs a + a { margin-left: .35em; }
.be-strongs a:hover, .be-sn a:hover, .be-sn a[aria-expanded="true"], .be-strongs a[aria-expanded="true"] { color: var(--be-accent); text-decoration: underline; }
.be-show-strongs .be-strongs { display: inline; }
/* Strong number in superscript before each French word */
.be-sn { display: none; margin-right: .12em; font: 500 .5em/1 var(--be-font-ui); letter-spacing: -.01em; }
.be-sn a + a::before { content: "·"; color: var(--be-muted); }
.be-show-strongs .be-sn { display: inline; }
.be-jesus .be-sn a { color: var(--be-muted); }
.be-strong-menu {
    position: absolute; z-index: 60; min-width: 15rem; max-width: min(22rem, calc(100vw - 16px)); padding: .35rem 0;
    background: var(--be-bg); color: var(--be-text); border: 1px solid var(--be-border); border-radius: .6rem;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .18); font: .9rem/1.4 var(--be-font-ui);
}
.be-strong-menu[hidden] { display: none; }
.be-strong-menu-head { padding: .35rem .9rem .5rem; font-weight: 700; border-bottom: 1px solid var(--be-border); }
.be-strong-lemma { font-family: var(--be-font-text); font-weight: 400; font-size: 1.1em; }
.be-strong-menu-head small { display: block; color: var(--be-muted); font-weight: 400; }
.be-strong-menu-group { padding: .45rem .9rem .15rem; color: var(--be-muted); font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; }
.be-strong-menu a { display: block; padding: .35rem .9rem; color: var(--be-text); text-decoration: none; }
.be-strong-menu a[target="_blank"]::after { content: " ↗"; color: var(--be-muted); font-size: .85em; }
.be-strong-menu a:hover, .be-strong-menu a:focus-visible { background: var(--be-surface); color: var(--be-accent); outline: none; }
.be-xref {
    display: none; margin-left: .15rem; padding: 0 .35rem; border-radius: .6rem; vertical-align: super;
    font: 600 .6em/1.5 var(--be-font-ui); text-decoration: none; background: var(--be-surface); border: 1px solid var(--be-border);
}
.be-xref::before { content: "⇄ "; }
.be-show-xrefs .be-xref { display: inline-block; }
.be-reader-foot { margin-top: 2rem; border-top: 1px solid var(--be-border); }

/* Translation choice and side-by-side comparison */
.be-translations { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .5rem .9rem; margin: .25rem 0 .5rem; font-size: .85rem; }
.be-translations label { display: inline-flex; align-items: center; gap: .35rem; color: var(--be-muted); }
.be-translations select { padding: .3rem .45rem; border: 1px solid var(--be-border); border-radius: .4rem; background: var(--be-bg); color: var(--be-text); font: inherit; }
.be-translations-submit { padding: .3rem .7rem; border: 0; border-radius: .4rem; background: var(--be-accent); color: var(--be-accent-text); cursor: pointer; font: inherit; }
.be-translations.is-enhanced .be-translations-submit { display: none; }
.be-page > .be-translations { justify-content: flex-start; margin-bottom: 1rem; }
.be-compare { text-align: left; }
.be-show-columns .be-compare { columns: auto; column-rule: none; }
.be-compare-head, .be-compare-row { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.be-compare-head { position: sticky; top: var(--be-top); z-index: 2; padding: .35rem 0; background: var(--be-bg); border-bottom: 1px solid var(--be-border);
    color: var(--be-muted); font: 600 .8rem/1.4 var(--be-font-ui); text-transform: uppercase; letter-spacing: .04em; }
.be-compare-row { padding: .35rem 0; border-bottom: 1px dashed var(--be-border); }
.be-compare-row .be-verse { display: block; }
.be-compare-other { color: var(--be-text); }
.be-compare-other .be-num { color: var(--be-muted); }

/* Translator notes (Darby) */
.be-note { display: none; font: 600 .6em/1 var(--be-font-ui); margin-left: .05em; }
.be-note a { color: var(--be-accent); text-decoration: none; }
.be-note a:hover { text-decoration: underline; }
.be-show-notes .be-note { display: inline; }
.be-notes { display: none; margin-top: 1.75rem; padding-top: .75rem; border-top: 1px solid var(--be-border); font-size: .9rem; }
.be-show-notes .be-notes { display: block; }
.be-notes h2 { font-size: 1rem; margin: 0 0 .5rem; }
.be-notes ol { list-style: none; margin: 0; padding: 0; columns: 22rem; column-gap: 2rem; }
.be-notes li { margin-bottom: .3rem; break-inside: avoid; }
.be-notes li:target { background: var(--be-highlight); }
.be-notes li > a { font-weight: 700; margin-right: .3rem; text-decoration: none; }
.be-attribution { font-size: .8rem; }

/* Cross-reference panel */
.be-panel { border-left: 1px solid var(--be-border); }
.be-panel[hidden] { display: none; }
.be-panel-head { display: flex; justify-content: space-between; align-items: start; gap: .5rem; }
.be-panel-head h2 { margin: 0 0 .75rem; font-size: 1.05rem; }
.be-panel-head small { display: block; margin-top: .2rem; color: var(--be-muted); font-weight: normal; }
.be-panel-close { font-size: 1.6rem; line-height: 1; text-decoration: none; color: var(--be-muted) !important; }
.be-xref-list { margin: 0; padding-left: 1.4rem; }
.be-xref-list li { margin-bottom: .8rem; }
.be-xref-list a { font-weight: 600; text-decoration: none; }
.be-xref-list p { margin: .15rem 0 0; font-family: var(--be-font-text); line-height: 1.5; }

/* Search */
.be-mode-search .be-page { max-width: 70rem; margin: 0 auto; }
.be-lexicon { display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; list-style: none; }
.be-lexicon li { padding: .3rem .7rem; border: 1px solid var(--be-border); border-radius: 1rem; background: var(--be-surface); }
.be-results li { margin-bottom: 1rem; }
.be-results a { font-weight: 600; }
.be-results p { margin: .2rem 0 0; font-family: var(--be-font-text); font-size: 1.1rem; }
.be-results .be-jesus, .be-xref-list .be-jesus { color: var(--be-jesus); }

.be-footer { padding: 1rem clamp(1rem, 3vw, 3rem); font-size: .8rem; color: var(--be-muted); border-top: 1px solid var(--be-border); }
.be-footer p { margin: 0; }

/* Tablets: the panel overlays the text */
@media (max-width: 1100px) {
    .be-layout.has-panel { grid-template-columns: var(--be-side) minmax(0, 1fr); }
    .be-no-sidebar .be-layout.has-panel { grid-template-columns: minmax(0, 1fr); }
    .be-panel {
        position: fixed; z-index: 25; right: 0; top: var(--be-top); width: min(var(--be-panel), 100%);
        box-shadow: -8px 0 24px rgba(0, 0, 0, .25);
    }
}
/* Phones: the sidebar becomes a drawer, hidden by default */
@media (max-width: 760px) {
    .be-theme { font-size: 0; }
    .be-topbar { gap: .5rem; }
    .be-brand-logo + span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .be-layout, .be-layout.has-panel { grid-template-columns: minmax(0, 1fr); }
    .be-sidebar {
        position: fixed; z-index: 26; left: 0; top: var(--be-top); width: min(var(--be-side), 88vw);
        transform: translateX(-105%); transition: transform .2s; box-shadow: 8px 0 24px rgba(0, 0, 0, .25);
    }
    .be-sidebar-open .be-sidebar { transform: none; display: block; }
    .be-panel { top: auto; bottom: 0; height: 60vh; width: 100%; border-left: 0; border-top: 1px solid var(--be-border); }
    .be-chapter { text-align: left; }
    .be-compare-head, .be-compare-row { gap: .9rem; }
    .be-compare { font-size: calc(1rem + var(--be-size-step) * .125rem); }
    .be-reader { padding-inline: 1rem; }
}
@media print {
    .be-translations { display: none !important; }
    .be-topbar, .be-sidebar, .be-panel, .be-options, .be-pager, .be-xref, .be-footer { display: none !important; }
    .be-layout { display: block; }
}
@media (prefers-reduced-motion: reduce) {
    .be-sidebar, .be-verse { transition: none; }
}