/* Easy Navigation Styles */

:root {
    --easy-nav-width: 360px;
    /* Sidebar uses a fixed scale independent of --bible-font-scale.
       The main reading area intentionally grows with user preference;
       the 360 px companion pane must stay compact at all zoom levels. */
    --en-base: 0.965rem;
    /* Typography tokens shared across all three tabs */
    --en-font-body: 'EB Garamond', Georgia, serif;
    --en-font-ui: 'Open Sans', system-ui, sans-serif;
    --en-line-height: 1.62;
    --en-line-height-compact: 1.42;
    --en-para-gap: 0.85em;
    --en-card-radius: 10px;
    --en-card-padding: 11px 14px;
}

/* Force strict center alignment for all primary reading content at all times */
#chapter-content,
.reading-layout-container,
.bible-content {
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: none !important;
    width: 100%;
}

.reading-layout-container.two-columns-wrapper {
    max-width: none !important;
}

/* The floating toggler button */
.floating-easy-nav-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #1e293b; /* Restrained Slate-800 instead of neon blue */
    color: #f1f5f9;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1); /* Softer neutral shadow */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 1000;
    transition: all 0.2s ease-in-out;
}

.floating-easy-nav-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
    background: #334155; /* Blue-Slate hover */
}

@media (min-width: 769px) {
    body:has(.sidebar.auto-hide-sidebar.bottom-docked) .floating-easy-nav-btn {
        bottom: 92px;
    }
}

@media (max-width: 768px) {
    .floating-easy-nav-btn {
        right: 14px;
        bottom: 104px;
    }
}

/* Scoped reading shell so easy navigation only affects the chapter section */
.study-reading-shell {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 0;
    flex: 1;
    min-width: 0;
    min-height: 0;
    align-items: start;
    overflow: visible;
    transition: grid-template-columns 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.study-reading-shell .content-area {
    min-width: 0;
}

body.easy-nav-active .study-reading-shell {
    grid-template-columns: minmax(0, 1fr) var(--easy-nav-width);
}

/* The dark side panel */
.easy-nav-panel {
    position: fixed;
    top: var(--easy-nav-top, 0);
    right: var(--easy-nav-right, 0);
    width: var(--easy-nav-width);
    height: var(--easy-nav-height, 100vh);
    max-height: var(--easy-nav-height, 100vh);
    background: #111827; /* Near black charcoal */
    color: #f3f4f6;
    z-index: 1001;
    transform: translateX(100%);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.2s ease;
    box-shadow: -10px 0 40px rgba(0,0,0,0.3);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

body.easy-nav-active .easy-nav-panel {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
}

/* Suppress all transitions while position CSS vars are being calculated on
   restore (page refresh). Panel stays invisible until vars are committed,
   then the init class is removed and normal transitions take over. */
.easy-nav-panel.easy-nav-positioning {
    transition: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

@media (max-width: 900px) {
    .easy-nav-panel {
        position: fixed;
        width: 100%;
        height: 100vh;
        max-height: 100vh;
        top: 0;
        bottom: auto;
        right: 0;
        transform: translateX(100%);
        opacity: 0;
    }

    .easy-nav-content {
        padding: 24px 24px calc(160px + env(safe-area-inset-bottom)) !important;
        scroll-padding-bottom: calc(160px + env(safe-area-inset-bottom));
    }
}

/* Header style for panel */
.easy-nav-header {
    padding: 20px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.easy-nav-header h3 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: #f8fafc;
    font-family: inherit;
    letter-spacing: 0.3px;
}

#close-easy-nav {
    background: transparent;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    padding: 6px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

#close-easy-nav:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.1);
}

.easy-nav-content {
    flex: 1;
    overflow-y: auto;
    padding: 20px 20px 28px;
    font-family: var(--en-font-body);
    font-size: var(--en-base); /* fixed — sidebar must not grow with main-area zoom */
    line-height: var(--en-line-height);
    font-weight: 400;
}

/* ── Body text: match main verse reading feel ─────────────────── */
.easy-nav-content p,
.easy-nav-content li,
.easy-nav-content .easy-nav-placeholder,
.easy-nav-content .reference-desc,
.easy-nav-content .commentary-text p {
    font-family: var(--en-font-body) !important;
    font-size: 1em !important;
    line-height: var(--en-line-height) !important;
    font-weight: 400 !important;
    font-style: normal !important;
    margin-bottom: var(--en-para-gap) !important;
}

.easy-nav-content li {
    margin-bottom: 0.55em !important;
}

/* ── Headings ─────────────────────────────────────────────────── */
.easy-nav-content h4,
.easy-nav-content h3 {
    font-family: var(--en-font-ui) !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    margin-top: 0 !important;
    letter-spacing: -0.01em;
}

.easy-nav-content h4 {
    font-size: 0.84em !important;
    margin-bottom: 14px !important;
    text-transform: none;
    opacity: 0.9;
}

.easy-nav-content h3 {
    font-family: var(--en-font-body) !important;
    font-size: 1em !important;
    font-weight: 700 !important;
    font-style: normal !important;
    margin-bottom: 4px !important;
    margin-top: 16px !important;
}

.easy-nav-content h3:first-child {
    margin-top: 0 !important;
}

.easy-nav-content ul {
    padding-left: 1.4em;
    margin-bottom: var(--en-para-gap);
}

/* ── UL in verse-ref tab: tighter reference lists ─────────────── */
.easy-nav-content .popup-content ul {
    padding-left: 1.2em;
    margin-bottom: 0.75em;
}

/* ── Reference groupings inside sidebar ──────────────────────── */
.easy-nav-content .reference-group {
    border-left: 2px solid var(--premium-accent, #b07d1e) !important;
    padding: 16px 0 12px 14px !important;
    margin-bottom: 0 !important;
}

.easy-nav-content .reference-cite-container {
    font-family: var(--en-font-ui) !important;
    font-size: 0.8em !important;
    font-weight: 700 !important;
    line-height: var(--en-line-height-compact) !important;
}

.easy-nav-content .reference-verse-label {
    font-family: var(--en-font-body) !important;
    font-size: 1.05em !important;
    font-style: italic !important;
}

.easy-nav-tabs {
    display: flex;
    gap: 5px;
    padding: 9px 10px 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    align-items: stretch;
    position: sticky;
    top: 0;
    z-index: 8;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.easy-nav-tab {
    appearance: none;
    flex: 1;                        /* equal-width columns */
    border: 1px solid rgba(148, 163, 184, 0.2);
    background: rgba(148, 163, 184, 0.06);
    color: inherit;
    opacity: 0.82;
    border-radius: 8px;
    padding: 7px 4px;
    font-family: var(--en-font-ui);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.2;
    text-align: center;
    white-space: normal;            /* allow wrap if needed on narrow screens */
    cursor: pointer;
    transition: all 0.22s ease;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset;
}

.easy-nav-tab:hover {
    opacity: 1;
    transform: translateY(-1px);
    border-color: rgba(148, 163, 184, 0.34);
    background: rgba(148, 163, 184, 0.12);
}

.easy-nav-tab.active {
    opacity: 1;
    transform: translateY(-1px);
    font-weight: 700;
    letter-spacing: 0.03em;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.14), 0 1px 0 rgba(255, 255, 255, 0.14) inset;
}

.easy-nav-tab:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.26);
}

.easy-nav-pane {
    display: none;
    min-height: 100%;
}

.easy-nav-pane.active {
    display: block;
}

.easy-nav-placeholder {
    font-family: var(--en-font-body);
    font-style: italic;
    color: #888;
    padding: 24px 0 12px;
    font-size: 1em;
    line-height: var(--en-line-height);
    opacity: 0.8;
}

/* ================================================================
   PREMIUM CONTENT ELEMENTS
   ================================================================ */

/* ── Search result cards ──────────────────────────────────────── */
.easy-nav-content .easy-search-results-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.easy-nav-content .easy-search-result-item {
    border-radius: var(--en-card-radius) !important;
    padding: var(--en-card-padding) !important;
    margin-bottom: 0 !important;
    border: 1px solid rgba(185, 128, 50, 0.18);
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.easy-nav-content .easy-search-result-item:hover {
    border-color: rgba(185, 128, 50, 0.32);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.07);
}

.easy-nav-content .easy-search-result-ref {
    font-family: var(--en-font-body) !important;
    font-size: 0.975em !important;
    font-weight: 700 !important;
    font-style: normal !important;
    margin-bottom: 6px !important;
    letter-spacing: 0.01em;
}

/* ── Popup verse text box (sidebar-scoped) ───────────────────── */
.easy-nav-content .popup-verse-text {
    font-family: var(--en-font-body) !important;
    font-size: 1em !important;
    line-height: var(--en-line-height) !important;
    margin-top: 8px;
    padding: 12px 14px !important;
    border-radius: var(--en-card-radius);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    font-style: normal !important;
}

/* ── Commentary block (MH tab) ───────────────────────────────── */
.easy-nav-content .commentary-text {
    font-family: var(--en-font-body) !important;
    font-size: 1em !important;
    line-height: var(--en-line-height) !important;
}

.easy-nav-content .commentary-text p {
    margin-bottom: 0.9em !important;
}

/* ── Verse-ref links inside sidebar ─────────────────────────── */
.easy-nav-content .verse-ref-link {
    font-weight: 600;
    white-space: normal;
    display: inline;
}

/* ── ref-description text after a verse link ─────────────────── */
.easy-nav-content .ref-description {
    font-family: var(--en-font-body);
    font-size: 0.92em;
    line-height: var(--en-line-height-compact);
    font-style: italic;
    opacity: 0.78;
}

/* ── Pane top breathing room ─────────────────────────────────── */
.easy-nav-pane.active > *:first-child {
    margin-top: 0;
}

/* ── Shared section heading (h4 at top of each tab content) ──── */
.easy-nav-section-heading {
    font-family: var(--en-font-ui) !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    line-height: 1.3 !important;
    margin: 0 0 18px 0 !important;
    opacity: 0.75;
}

.easy-nav-search-query {
    font-family: var(--en-font-body);
    font-size: 1.15em;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    font-style: italic;
    opacity: 1;
}

/* ================================================================
   EASY NAVIGATION - THEME OVERRIDES (Dark, Light, Parchment)
   ================================================================ */

/* 1. Dark Mode */
html.dark-mode .easy-nav-panel {
    background: #0f172a !important;
    color: #f1f5f9 !important;
}
html.dark-mode .easy-nav-header h3 { color: #f8fafc !important; }
html.dark-mode #close-easy-nav { color: #94a3b8 !important; }
html.dark-mode #close-easy-nav:hover { color: #ffffff !important; background: rgba(255,255,255,0.1) !important; }
html.dark-mode .easy-nav-content { color: #f1f5f9 !important; }
html.dark-mode .easy-nav-placeholder { color: #64748b !important; }
html.dark-mode .easy-nav-tabs { border-bottom: 1px solid rgba(255,255,255,0.08) !important; }
html.dark-mode .easy-nav-tabs { background: linear-gradient(180deg, rgba(15, 23, 42, 0.98), rgba(15, 23, 42, 0.92)) !important; }
html.dark-mode .easy-nav-tab {
    border-color: rgba(148, 163, 184, 0.24) !important;
    background: rgba(148, 163, 184, 0.08) !important;
    color: #cbd5e1 !important;
}
html.dark-mode .easy-nav-tab.active {
    background: linear-gradient(180deg, rgba(96, 165, 250, 0.3), rgba(37, 99, 235, 0.24)) !important;
    border-color: rgba(96, 165, 250, 0.42) !important;
    color: #f8fafc !important;
    box-shadow: 0 10px 20px rgba(2, 6, 23, 0.4), 0 1px 0 rgba(255, 255, 255, 0.18) inset !important;
}
/* Dark: section heading */
html.dark-mode .easy-nav-content .easy-nav-section-heading { color: #94a3b8 !important; }
html.dark-mode .easy-nav-content .easy-nav-search-query { color: #93c5fd !important; }
/* Dark: search result cards */
html.dark-mode .easy-nav-content .easy-search-result-item {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(96, 165, 250, 0.14) !important;
}
html.dark-mode .easy-nav-content .easy-search-result-item:hover {
    border-color: rgba(96, 165, 250, 0.28) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3) !important;
}
/* Dark: verse text box */
html.dark-mode .easy-nav-content .popup-verse-text {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(96, 165, 250, 0.18) !important;
    border-left: 3px solid rgba(96, 165, 250, 0.5) !important;
    color: #e2e8f0 !important;
}
html.dark-mode .easy-nav-content .verse-ref-link { color: #93c5fd !important; border-bottom-color: rgba(147, 197, 253, 0.45) !important; }
html.dark-mode .easy-nav-content .verse-ref-link:hover { color: #bfdbfe !important; }

/* 2. Light Mode (Parchment OFF) */
html.parchment-off .easy-nav-panel {
    background: #ffffff !important;
    color: #0f172a !important;
    box-shadow: -10px 0 40px rgba(0,0,0,0.08) !important;
}
html.parchment-off .easy-nav-header { border-bottom: 1px solid rgba(0,0,0,0.08) !important; }
html.parchment-off .easy-nav-header h3 { color: #1e293b !important; }
html.parchment-off #close-easy-nav { color: #64748b !important; }
html.parchment-off #close-easy-nav:hover { color: #0f172a !important; background: rgba(0,0,0,0.05) !important; }
html.parchment-off .easy-nav-content { color: #1e293b !important; }
html.parchment-off .easy-nav-placeholder { color: #94a3b8 !important; }
html.parchment-off .easy-nav-tabs { border-bottom: 1px solid rgba(0,0,0,0.08) !important; }
html.parchment-off .easy-nav-tabs { background: linear-gradient(180deg, #f8fafc, #f1f5f9) !important; }
html.parchment-off .easy-nav-tab {
    border-color: rgba(15, 23, 42, 0.12) !important;
    background: rgba(255, 255, 255, 0.9) !important;
    color: #334155 !important;
}
html.parchment-off .easy-nav-tab.active {
    background: linear-gradient(180deg, #ffffff, #f8fafc) !important;
    border-color: rgba(30, 41, 59, 0.2) !important;
    color: #0f172a !important;
    box-shadow: 0 8px 16px rgba(15, 23, 42, 0.1), 0 1px 0 rgba(255, 255, 255, 0.8) inset !important;
}
/* Light: section heading */
html.parchment-off .easy-nav-content .easy-nav-section-heading { color: #64748b !important; }
html.parchment-off .easy-nav-content .easy-nav-search-query { color: #2563eb !important; }
/* Light: search result cards */
html.parchment-off .easy-nav-content .easy-search-result-item {
    background: #f8fafc !important;
    border-color: rgba(15, 23, 42, 0.08) !important;
}
html.parchment-off .easy-nav-content .easy-search-result-item:hover {
    border-color: rgba(37, 99, 235, 0.2) !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.07) !important;
}
/* Light: verse text box */
html.parchment-off .easy-nav-content .popup-verse-text {
    background: #f1f5f9 !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    border-left: 3px solid #2563eb !important;
    color: #334155 !important;
}
html.parchment-off .easy-nav-content .verse-ref-link { color: #2563eb !important; }
html.parchment-off .easy-nav-content .verse-ref-link:hover { color: #1d4ed8 !important; }

/* 3. Parchment Mode (Default) */
html:not(.parchment-off):not(.dark-mode) .easy-nav-panel {
    background: #F6F3EB !important;
    color: #2b2a28 !important;
    box-shadow: -10px 0 40px rgba(185, 128, 50, 0.15) !important;
}
html:not(.parchment-off):not(.dark-mode) .easy-nav-header { border-bottom: 1px solid rgba(185, 128, 50, 0.15) !important; }
html:not(.parchment-off):not(.dark-mode) .easy-nav-header h3 { color: #2b2a28 !important; }
html:not(.parchment-off):not(.dark-mode) #close-easy-nav { color: #8c765e !important; }
html:not(.parchment-off):not(.dark-mode) #close-easy-nav:hover { color: #2b2a28 !important; background: rgba(185, 128, 50, 0.1) !important; }
html:not(.parchment-off):not(.dark-mode) .easy-nav-content { color: #2b2a28 !important; }
html:not(.parchment-off):not(.dark-mode) .easy-nav-content h4 { color: #243355 !important; }
html:not(.parchment-off):not(.dark-mode) .easy-nav-content h3 { color: #3d2e1a !important; }
html:not(.parchment-off):not(.dark-mode) .easy-nav-placeholder { color: #a39070 !important; }
html:not(.parchment-off):not(.dark-mode) .easy-nav-tabs { border-bottom: 1px solid rgba(185, 128, 50, 0.15) !important; }
html:not(.parchment-off):not(.dark-mode) .easy-nav-tabs {
    background: linear-gradient(180deg, rgba(250, 246, 237, 0.98), rgba(246, 243, 235, 0.95)) !important;
}
html:not(.parchment-off):not(.dark-mode) .easy-nav-tab {
    border-color: rgba(171, 126, 69, 0.24) !important;
    background: rgba(255, 255, 255, 0.58) !important;
    color: #7b6145 !important;
}
html:not(.parchment-off):not(.dark-mode) .easy-nav-tab.active {
    background: linear-gradient(180deg, #fffdf9, #f6eee0) !important;
    border-color: rgba(171, 126, 69, 0.36) !important;
    color: #5b4632 !important;
    box-shadow: 0 9px 18px rgba(171, 126, 69, 0.18), 0 1px 0 rgba(255, 255, 255, 0.86) inset !important;
}
/* Parchment: section heading */
html:not(.parchment-off):not(.dark-mode) .easy-nav-content .easy-nav-section-heading { color: #8c765e !important; }
html:not(.parchment-off):not(.dark-mode) .easy-nav-content .easy-nav-search-query { color: #5b3c10 !important; }
/* Parchment: search result cards */
html:not(.parchment-off):not(.dark-mode) .easy-nav-content .easy-search-result-item {
    background: rgba(255, 253, 245, 0.75) !important;
    border-color: rgba(185, 128, 50, 0.22) !important;
}
html:not(.parchment-off):not(.dark-mode) .easy-nav-content .easy-search-result-item:hover {
    border-color: rgba(185, 128, 50, 0.38) !important;
    box-shadow: 0 4px 14px rgba(140, 95, 30, 0.1) !important;
}
html:not(.parchment-off):not(.dark-mode) .easy-nav-content .easy-search-result-ref {
    color: #3d2e1a !important;
}
/* Parchment: verse text box */
html:not(.parchment-off):not(.dark-mode) .easy-nav-content .popup-verse-text {
    background: rgba(255, 253, 245, 0.85) !important;
    border: 1px solid rgba(185, 128, 50, 0.2) !important;
    border-left: 3px solid rgba(176, 125, 30, 0.7) !important;
    color: #3d3220 !important;
}
/* Parchment: reference groups */
html:not(.parchment-off):not(.dark-mode) .easy-nav-content .reference-group {
    border-left-color: rgba(176, 125, 30, 0.55) !important;
    border-bottom-color: rgba(185, 128, 50, 0.15) !important;
}
/* Parchment: verse ref links */
html:not(.parchment-off):not(.dark-mode) .easy-nav-content .verse-ref-link {
    color: #8c5e1a !important;
    border-bottom-color: rgba(140, 94, 26, 0.4) !important;
}
html:not(.parchment-off):not(.dark-mode) .easy-nav-content .verse-ref-link:hover {
    color: #5b3c10 !important;
    border-bottom-color: rgba(91, 60, 16, 0.6) !important;
    background-color: rgba(185, 128, 50, 0.08) !important;
}

@media (max-width: 900px) {
    .easy-nav-tabs {
        padding: 8px 10px 7px;
        gap: 5px;
    }

    .easy-nav-tab {
        padding: 7px 4px;
        font-size: 0.66rem;
        font-weight: 600;
    }

    .easy-nav-content {
        font-size: 1.08rem;
        line-height: 1.7;
        padding: 18px 18px 140px;
    }

    .easy-nav-content .easy-search-result-item {
        padding: 12px 14px !important;
    }

    .easy-nav-content .reference-group {
        padding: 0 0 18px !important;
        margin-bottom: 18px !important;
        border-left: none !important;
        border-bottom: 1px solid rgba(185, 128, 50, 0.14) !important;
    }

    .easy-nav-content .reference-group:last-child {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
        border-bottom: none !important;
    }

    .easy-nav-content .reference-verse-label {
        margin-bottom: 12px !important;
        font-style: italic !important;
    }

    .easy-nav-content .reference-rows-list {
        gap: 12px !important;
    }

    .easy-nav-content .reference-row,
    .easy-nav-content .reference-row-full {
        padding: 0 !important;
        margin: 0 !important;
        border-bottom: none !important;
    }

    .easy-nav-content .reference-desc,
    .easy-nav-content .reference-cite-container {
        font-style: normal !important;
    }
}

.easy-nav-subtopic {
    font-size: 0.78em;
    color: #8b7355;
    font-style: italic;
    font-weight: 400;
}