/* ======================================================
   READER EXPERIENCE
====================================================== */

.chapter-toolbar.hidden{
    transform:translateY(-110%);
    opacity:0;
}

/* .reader-title{
    text-align:center;
    font-size:1.15rem;
} */

/* .reader-navigation{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:15px;
} */

/* .reader-selectors{
    flex:1;
    max-width:240px;
} */

/* .reader-controls{
    display:flex;
    justify-content:center;
    gap:10px;
    margin-top:18px;
    border-top:1px solid #eee;
    padding-top:15px;
} */

/* .reader-btn{
    border:none;
    background:#f5f7fa;
    width:42px;
    height:42px;
    border-radius:50%;
    font-size:1rem;
    transition:.25s;

} */

.reader-btn:hover{
    background:#0d6efd;
    color:#fff;
}

body.dark-mode .chapter-toolbar{
    background:#2b2b2b;
}

/* ======================================================
   DARK MODE - FULL PAGE
====================================================== */

body.dark-mode{
    background:#15171a;
    color:#e4e4e4;
}

body.dark-mode #sidebarColumn,
body.dark-mode .offcanvas,
body.dark-mode .reader-panel{
    background:#1d1f23 !important;
    border-color:#2c2f33 !important;
    color:#e4e4e4;
}

body.dark-mode .list-group-item{
    background:#1d1f23;
    color:#e4e4e4;
    border-color:#2c2f33;
}

body.dark-mode .list-group-item:hover{
    background:#2a2d31;
    color:#fff;
}

body.dark-mode .activity-link:hover{
    filter:brightness(1.25);
}

body.dark-mode .card,
body.dark-mode .dashboard-card,
body.dark-mode .feature-card,
body.dark-mode .search-box,
body.dark-mode .search-result{
    background:#1d1f23;
    color:#e4e4e4;
    box-shadow:none;
}

body.dark-mode .card-header{
    background:#1d1f23;
    border-color:#2c2f33;
}

body.dark-mode .bible-text{
    color:#e4e4e4;
}

body.dark-mode footer{
    background:#1d1f23;
    border-color:#2c2f33;
    color:#e4e4e4;
}

body.dark-mode footer a{
    color:#6ea8fe;
}

body.dark-mode .text-muted,
body.dark-mode .page-subtitle,
body.dark-mode .section-reference,
body.dark-mode .continue-reading-chapter{
    color:#9aa0a6 !important;
}

body.dark-mode .chapter-book{
    color:#e4e4e4;
}

body.dark-mode .reader-btn{
    background:#444;
    color:#fff;
}

body.dark-mode .reader-btn:hover{

    background:#0d6efd;

}

.reader-fab{
    position:fixed;
    right:25px;
    bottom:25px;
    width:60px;
    height:60px;
    font-size:1.5rem;
    border-radius:50%;
    z-index:1080;
    box-shadow:0 6px 20px rgba(0,0,0,.25);
}

.reader-fab:hover{
    transform:scale(1.08);
}

/* .offcanvas-body h6{
    font-weight:700;
    margin-top:10px;
    margin-bottom:15px;
} */

/* .offcanvas .btn{
    text-align:left;
} */

#readerPanel{
    width:96px;
    top:var(--navbar-height);
    height:calc(100vh - var(--navbar-height));
}

#readerPanel .offcanvas-body{
    padding-left:10px;
    padding-right:10px;
    padding-bottom:90px;
}

#readerPanel h6{
    font-size:.68rem;
    text-align:center;
}

.reader-icon-grid{
    display:flex;
    flex-direction:column;
    gap:8px;
}

.reader-icon-btn{
    flex:0 0 auto;
    width:100%;
    aspect-ratio:1;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.05rem;
    font-weight:600;
    padding:0;
}

/* Hidden via JS while the panel is open (see bibliapp.js) so it
   can't sit on top of the panel's last icon. */
.reader-fab.reader-fab-hidden{
    display:none;
}

.reading-full{
    max-width:100% !important;
    padding-left:60px;
    padding-right:60px;
}


#readerColumn{
    transition:.30s;
}
/* 
#readerPanel{
    position:fixed;
    top:var(--navbar-height);
    right:-340px;
    width:340px;
    height:calc(100vh - var(--navbar-height));
    background:#fff;
    border-left:1px solid #ddd;
    box-shadow:-4px 0 12px rgba(0,0,0,.08);
    transition:right .30s;
    z-index:1030;
    overflow-y:auto;
} */

/* #readerPanel.open{
    right:0;
} */

.reader-panel-header{
    padding:20px;
    border-bottom:1px solid #eee;
    font-weight:700;
}

.reader-panel-body{
    padding:20px;
}

.reader-panel{
    position:fixed;
    top:var(--navbar-height);
    right:-340px;
    width:320px;
    height:calc(100vh - var(--navbar-height));
    background:#fff;
    border-left:1px solid #ddd;
    box-shadow:-4px 0 12px rgba(0,0,0,.12);
    overflow-y:auto;
    transition:right .30s ease;
    z-index:1035;
}

.reader-panel.open{
    right:0;
}

.bible-container.reader-panel-open{
    margin-right:340px;
}

/* ==========================================
   Chapter Picker
========================================== */

.chapter-title{
    cursor:pointer;
    user-select:none;
    text-align:center;
    font-size:1.8rem;
    font-weight:700;
}

.chapter-book{
    font-size:1.15rem;
    font-weight:700;
}

.chapter-number{
    font-size:.85rem;
    color:#777;
}

.chapter-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(60px,1fr));
    gap:12px;
}

.chapter-pill{
    display:flex;
    justify-content:center;
    align-items:center;
    text-decoration:none;
    border:1px solid #ddd;
    border-radius:12px;
    height:48px;
    font-weight:600;
    color:#444;
    transition:.2s;
}

.chapter-pill:hover{
    background:#0d6efd;
    color:#fff;
    border-color:#0d6efd;
}

.chapter-pill.active{
    background:#0d6efd;
    color:#fff;
    border-color:#0d6efd;
}

body.dark-mode .modal-content{
    background:#1d1d1d;
    color:#fff;

}
body.dark-mode .chapter-pill{
    border-color:#444;
    color:#ddd;
}

body.dark-mode .chapter-pill.active{
    background:#3b82f6;
    color:#fff;
}

body.dark-mode .chapter-number{
    color:#bbb;
}


/* ======================================================
   BOOKMARKS / NOTES / HIGHLIGHTS
====================================================== */

.widget-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.widget-list li {
    padding: 10px 0;
    border-bottom: 1px solid #eee;
}

.widget-list li:last-child {
    border-bottom: none;
}

/* ======================================================
   BIBLE READER
====================================================== */

.chapter-toolbar{
    display:grid;
    grid-template-columns:44px 1fr 44px;
    align-items:center;
    gap:14px;
    background:#fff;
    border-radius:14px;
    padding:10px 16px;
    margin-bottom:20px;
    box-shadow:0 4px 14px rgba(0,0,0,.08);
    position:sticky;
    top:calc(var(--navbar-height) + 10px);
    z-index:1020;
}

/* Group: chapter-title + intro link stacked in the centre cell */
.chapter-title-group{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:2px;
}

/* Introduction link below the book/chapter name */
.chapter-intro-link{
    display:inline-flex;
    align-items:center;
    gap:4px;
    font-size:.72rem;
    font-weight:600;
    color:var(--brand-gold,#E8A020);
    text-decoration:none;
    letter-spacing:.02em;
    transition:opacity .2s;
}
.chapter-intro-link:hover{
    opacity:.75;
    color:var(--brand-gold,#E8A020);
}

.chapter-toolbar .btn{
    width:32px;
    height:32px;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:0;
}

.chapter-toolbar.compact{
    padding:6px 14px;
}

.chapter-toolbar.compact .btn{
    width:28px;
    height:28px;
}

.chapter-toolbar.compact .chapter-number{
    display:none;
}

.chapter-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.section-title {
    font-size: calc(var(--bible-font-size, 1.15rem) * 1.74);
    line-height: 1.3;
    font-weight: 700;
    /* Clear space above each section heading regardless of whether
       the previous content is a \p paragraph or inline text */
    margin-top: 2rem;
    margin-bottom: 8px;
}

/* First section-title in the chapter needs no extra top gap */
.bible-text > .section-title:first-child {
    margin-top: 0;
}

/* ======================================================
   BIBLE TEXT
====================================================== */

.bible-text {
    font-size: var(--bible-font-size,1.15rem);
    line-height: 1.75;
    padding: 15px 10px;
}

.bible-paragraph {
    margin-bottom: 0.4rem;
    text-indent: 2rem;
}

.verse-number {
    font-weight: bold;
    color: var(--primary);
    margin-right: 4px;
}

.section-reference {
    color: var(--muted);
    font-size: calc(var(--bible-font-size, 1.15rem) * 0.83);
    margin-bottom: 15px;
}

/* Poetry */

.q1 {
    margin-left: 2em;
}

.q2 {
    margin-left: 4em;
}

.q3 {
    margin-left: 6em;
}

.q4 {
    margin-left: 8em;
}

/* ======================================================
   FOOTNOTES
====================================================== */

.footnotes {
    margin-top: 60px;
    padding-top: 20px;
    border-top: 2px solid #ddd;

}

.footnotes h4 {
    margin-bottom: 20px;
}

.footnote {
    font-size: .95rem;
    margin-bottom: 10px;
}

.footnote-ref {
    font-weight: bold;

}

.footnote i {
    font-style: italic;
}

/* ======================================================
   HIGHLIGHTS & NOTES
====================================================== */

.verse{
    display:inline;
    padding:2px 3px;
    transition:background .2s ease;
}

.verse-number{
    cursor:pointer;
}

/* ---- Highlight classes ----
   No box-decoration-break — removing it prevents the background
   from painting an invisible trailing line to full block width. */

/* ── Highlight colours ────────────────────────────────────
   Only applied to INLINE elements (.verse span, .verse-line span).
   box-decoration-break:clone paints the background on EVERY visual
   line of a multi-line inline span — without it only the first line
   gets colour. This is safe now that block divs never get these
   classes (data-verse-id is on inline spans only). */

.highlight-yellow{
    background:#fff9a0 !important;
    -webkit-box-decoration-break:clone;
    box-decoration-break:clone;
}
.highlight-green{
    background:#b8f0be !important;
    -webkit-box-decoration-break:clone;
    box-decoration-break:clone;
}
.highlight-blue{
    background:#b8dcff !important;
    -webkit-box-decoration-break:clone;
    box-decoration-break:clone;
}
.highlight-pink{
    background:#ffd0e8 !important;
    -webkit-box-decoration-break:clone;
    box-decoration-break:clone;
}

span.highlight-yellow,
span.highlight-green,
span.highlight-blue,
span.highlight-pink {
    padding:1px 3px;
    border-radius:3px;
}

/* Poetry continuation lines — inline so highlight covers text
   only, never the full width of the enclosing block div */
.verse-line { display:inline; }

body.dark-mode .highlight-yellow{ background:#7a6b1f !important; }
body.dark-mode .highlight-green { background:#27542e !important; }
body.dark-mode .highlight-blue  { background:#23476b !important; }
body.dark-mode .highlight-pink  { background:#6b2c46 !important; }

/* Verses with embedded-paragraph block children (see applyHighlight
   in bibliapp.js): the outer .verse span must stay transparent so
   only the wrapped inline text and the embedded-paragraph div(s)
   show colour — otherwise box-decoration-break:clone repaints the
   highlight colour on the empty line left after the block div.
   Needs 3+ classes / higher specificity than the rules above
   (which use !important) to actually win the cascade. */
.verse.highlight-yellow.verse-block-highlight,
.verse.highlight-green.verse-block-highlight,
.verse.highlight-blue.verse-block-highlight,
.verse.highlight-pink.verse-block-highlight,
body.dark-mode .verse.highlight-yellow.verse-block-highlight,
body.dark-mode .verse.highlight-green.verse-block-highlight,
body.dark-mode .verse.highlight-blue.verse-block-highlight,
body.dark-mode .verse.highlight-pink.verse-block-highlight{
    background:transparent !important;
}

/* Note indicator — pure CSS dot, no character or font needed.
   Appears as a small gold circle superscripted after the last word. */
.note-icon{
    display:inline-block;
    width:8px;
    height:8px;
    background:var(--brand-gold, #E8A020);
    border-radius:50%;
    cursor:pointer;
    vertical-align:super;
    margin-left:1px;
    flex-shrink:0;
    transition:transform .15s, opacity .15s;
}
.note-icon:hover{
    transform:scale(1.4);
    opacity:.8;
}

.back-to-top-wrap{
    margin-top:30px;
    padding-top:20px;
    border-top:1px solid #eee;
}

.back-to-top-btn{
    border-radius:30px;
    padding:8px 22px;
    font-weight:600;
}

body.dark-mode .back-to-top-wrap{
    border-color:#2c2f33;
}

/* .embedded-paragraph highlights are applied via JS (applyHighlight)
   using inline styles + width:fit-content so they never extend
   past the last word or leave a blank highlighted line. */

/* Inline text wrapper inserted by applyHighlight when a verse
   contains embedded-paragraph block children */
.verse-inline-text {
    display: inline;
    border-radius: 3px;
}

/* ======================================================
   VERSE FOCUS  (from search navigation)
====================================================== */

/* scroll-margin-top keeps the verse clear of the sticky
   navbar + chapter toolbar when the browser jumps to #vN */
.verse {
    scroll-margin-top: calc(var(--navbar-height, 64px) + 80px);
}

/* Gold pulse when arriving from a single-verse search */
@keyframes verseFocusPulse {
    0%   { background: rgba(232, 160, 32, .50); border-radius: 4px; }
    70%  { background: rgba(232, 160, 32, .15); border-radius: 4px; }
    100% { background: transparent; }
}

.verse-focused {
    animation: verseFocusPulse 2.5s ease-out forwards;
}

/* Gold pulse when arriving from a verse-RANGE search/topic-reference —
   fades the same way .verse-focused does (previously this stayed a
   permanent !important tint forever, which also visually masked any
   real saved highlight on the same verse since it cascaded after the
   .highlight-* rules above). No !important here on purpose: a real
   saved highlight (.highlight-yellow etc, which IS !important) must
   always be able to win over this transient arrival tint, in either
   direction — this rule only needs to beat the plain, non-important
   base .verse style. */
@keyframes verseRangePulse {
    0%   { background: rgba(232, 160, 32, .35); border-radius: 4px; }
    75%  { background: rgba(232, 160, 32, .18); border-radius: 4px; }
    100% { background: transparent; }
}

.verse-range-hl {
    animation: verseRangePulse 4s ease-out forwards;
    border-radius: 4px;
    padding: 1px 2px;
}

/* ======================================================
   SEARCH RESULTS — keyword mode
====================================================== */

.search-ref-link {
    font-weight: 700;
    color: var(--secondary, #1A4A8A);
    font-size: 1rem;
    text-decoration: none;
    transition: color .2s;
}
.search-ref-link:hover {
    color: var(--brand-gold, #E8A020);
}
.search-verse-text {
    color: var(--text, #1C1C1E);
    line-height: 1.7;
    margin-top: 6px;
}

/* ======================================================
   INTRODUCTION PAGE
====================================================== */

.introduction-content {
    padding: 0 10px 40px;
    line-height: 1.8;
}

.intro-section-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--brand-dark, #0F1218);
    margin: 2rem 0 .75rem;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--brand-gold, #E8A020);
}

.introduction-content .intro-section-title:first-child {
    margin-top: 0;
}

.intro-outline {
    background: var(--primary-light, #FDF3E0);
    border-left: 3px solid var(--brand-gold, #E8A020);
    border-radius: 0 8px 8px 0;
    padding: 14px 18px;
    margin: 12px 0 20px;
}

.intro-outline-heading {
    font-weight: 700;
    font-size: .8rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-muted, #6B6B6B);
    margin-bottom: 10px;
}

/* Outline as a proper list with bullets and indentation */
.intro-outline-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.intro-outline-item {
    padding: 3px 0;
    font-size: .93rem;
    color: var(--text, #1C1C1E);
    line-height: 1.5;
}

/* Level 1 — bold, gold bullet */
.intro-outline-item.level-1 {
    font-weight: 600;
    padding-left: 1.2rem;
    position: relative;
    margin-top: 4px;
}
.intro-outline-item.level-1::before {
    content: '•';
    position: absolute;
    left: 0;
    color: var(--brand-gold, #E8A020);
    font-size: 1rem;
}

/* Level 2 — indented, dash */
.intro-outline-item.level-2 {
    padding-left: 2.6rem;
    position: relative;
    color: var(--text, #1C1C1E);
    font-size: .9rem;
}
.intro-outline-item.level-2::before {
    content: '–';
    position: absolute;
    left: 1.4rem;
    color: var(--text-muted, #6B6B6B);
}

/* Level 3 — further indented, muted */
.intro-outline-item.level-3 {
    padding-left: 4rem;
    position: relative;
    color: var(--text-muted, #6B6B6B);
    font-size: .88rem;
}
.intro-outline-item.level-3::before {
    content: '›';
    position: absolute;
    left: 2.8rem;
    color: var(--text-muted, #6B6B6B);
}

.intro-body {
    color: var(--text, #1C1C1E);
    font-size: 1rem;
    line-height: 1.85;
}

/* "Intro" pill in chapter picker */
.chapter-pill-intro {
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .04em;
    background: var(--primary-light, #FDF3E0);
    border-color: var(--brand-gold, #E8A020) !important;
    color: var(--primary-dark, #C4841A) !important;
}
.chapter-pill-intro:hover,
.chapter-pill-intro.active {
    background: var(--brand-gold, #E8A020) !important;
    color: var(--brand-dark, #0F1218) !important;
    border-color: var(--brand-gold, #E8A020) !important;
}

/* Dark mode */
body.dark-mode .intro-section-title { color: #e4e4e4; }
body.dark-mode .intro-outline { background: #2a2d31; }
body.dark-mode .intro-outline-heading { color: #9aa0a6; }
body.dark-mode .intro-outline-item { color: #d0d0d0; }
body.dark-mode .intro-body { color: #d0d0d0; }
body.dark-mode .chapter-pill-intro {
    background: rgba(232,160,32,.12);
    border-color: var(--brand-gold, #E8A020) !important;
    color: var(--brand-gold, #E8A020) !important;
}

/* ======================================================
   CHAPTER PICKER MODAL — clear sticky navbar
====================================================== */
#chapterPickerModal .modal-dialog {
    margin-top: calc(var(--navbar-height, 64px) + 12px);
}

.intro-no-content {
    color: var(--text-muted, #6B6B6B);
    font-style: italic;
    margin: 8px 0 24px;
    font-size: .95rem;
}