/* ============================================================
   Biblija.net — CSS
   Moderni, responzivni dizajn, mobile-first
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,wght@0,400;0,600;1,400&family=Fira+Sans:wght@400;500;600&display=swap');

:root {
    --color-primary: #A42A30;
    --color-primary-dark: #7C1E23;
    --color-text: #2c2c2c;
    --color-text-light: #666;
    --color-bg: #fafaf8;
    --color-bg-alt: #f0eeea;
    --color-border: #ddd;
    --color-verse-num: #A42A30;
    --font-serif: 'Source Serif 4', 'Georgia', serif;
    --font-sans: 'Fira Sans', system-ui, sans-serif;
    --max-width: 1600px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: var(--font-serif);
    font-size: 1.0625rem;
    line-height: 1.7;
    color: var(--color-text);
    background: var(--color-bg);
    background-image:
        radial-gradient(ellipse at 20% 50%, rgba(164, 42, 48, 0.015) 0%, transparent 70%),
        radial-gradient(ellipse at 80% 50%, rgba(164, 42, 48, 0.015) 0%, transparent 70%);
}

.container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 1rem;
}

/* === Header === */
.site-header {
    background: var(--color-primary);
    padding: 0;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.site-header::after {
    content: '';
    display: block;
    width: 100%;
    height: 20px;
    background: url('/images/ornament.svg') center/contain no-repeat;
    opacity: 0.7;
}

.site-header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.logo {
    font-family: var(--font-serif);
    font-size: 1.35rem;
    font-weight: 600;
    color: #fff;
    text-decoration: none;
    letter-spacing: 0.05em;
    font-variant: small-caps;
}

/* Desktop kontrole */
.header-controls {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.font-size-controls {
    display: inline-flex;
    gap: 1px;
}

.font-btn {
    font-family: var(--font-sans);
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.2rem 0.4rem;
    background: rgba(255,255,255,0.15);
    color: rgba(255,255,255,0.85);
    border: 1px solid rgba(255,255,255,0.25);
    cursor: pointer;
    line-height: 1;
}

.font-btn:first-child { border-radius: 3px 0 0 3px; }
.font-btn:last-child { border-radius: 0 3px 3px 0; border-left: none; }

.font-btn:hover {
    background: rgba(255,255,255,0.3);
    color: #fff;
}

.lang-select {
    font-family: var(--font-sans);
    font-size: 0.8rem;
    padding: 0.2rem 0.4rem;
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 3px;
    background: rgba(255,255,255,0.15);
    color: #fff;
    cursor: pointer;
}
.lang-select option { color: var(--color-text); background: var(--color-bg); }

.dark-toggle {
    background: none;
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 3px;
    padding: 0.2rem 0.35rem;
    cursor: pointer;
    color: rgba(255,255,255,0.85);
    display: flex;
    align-items: center;
}
.dark-toggle:hover { background: rgba(255,255,255,0.2); }
.dark-toggle svg { stroke: currentColor; }

.help-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 50%;
    background: rgba(255,255,255,0.15);
    color: rgba(255,255,255,0.85);
    font-family: var(--font-sans);
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
}
.help-link:hover { background: rgba(255,255,255,0.3); color: #fff; }

/* Hamburger — skrit na desktopu */
.menu-toggle {
    display: none;
    flex-direction: column;
    gap: 4px;
    background: none;
    border: none;
    padding: 0.4rem;
    cursor: pointer;
}
.menu-toggle span {
    display: block;
    width: 20px;
    height: 2px;
    background: #fff;
    border-radius: 1px;
    transition: 0.2s;
}

/* Stranski meni — skrit na desktopu */
.side-menu-overlay { display: none; }
.side-menu { display: none; }

/* === Mobilni stranski meni === */
@media (max-width: 768px) {
    .header-controls { display: none; }
    .menu-toggle { display: flex; }

    .site-header::after { height: 0; display: none; }

    .side-menu-overlay {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.4);
        z-index: 200;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.25s;
    }
    .side-menu-overlay.open {
        opacity: 1;
        pointer-events: auto;
    }

    .side-menu {
        display: block;
        position: fixed;
        top: 0;
        right: -280px;
        width: 280px;
        height: 100%;
        background: var(--color-bg);
        z-index: 201;
        overflow-y: auto;
        box-shadow: -4px 0 20px rgba(0,0,0,0.15);
        transition: right 0.3s ease;
    }
    .side-menu.open { right: 0; }

    .side-menu-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1rem 1.25rem;
        background: var(--color-primary);
        color: #fff;
    }
    .side-menu-title {
        font-family: var(--font-serif);
        font-size: 1.1rem;
        font-weight: 600;
        font-variant: small-caps;
        letter-spacing: 0.04em;
    }
    .side-menu-close {
        background: none;
        border: none;
        color: #fff;
        font-size: 1.6rem;
        cursor: pointer;
        padding: 0 0.3rem;
        line-height: 1;
        opacity: 0.8;
    }
    .side-menu-close:hover { opacity: 1; }

    .side-menu-section {
        padding: 0.75rem 1.25rem;
        border-bottom: 1px solid var(--color-border);
    }
    .side-menu-label {
        font-family: var(--font-sans);
        font-size: 0.7rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--color-text-light);
        margin-bottom: 0.5rem;
    }
    .side-menu-langs {
        display: flex;
        flex-wrap: wrap;
        gap: 0.35rem;
    }
    .side-menu-lang {
        font-family: var(--font-sans);
        font-size: 0.82rem;
        text-decoration: none;
        padding: 0.3rem 0.7rem;
        border-radius: 4px;
        color: var(--color-text);
        background: var(--color-bg-alt);
    }
    .side-menu-lang.active {
        background: var(--color-primary);
        color: #fff;
    }
    .side-menu-font {
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }
    .side-menu-font .font-btn {
        background: var(--color-bg-alt);
        color: var(--color-text);
        border-color: var(--color-border);
        padding: 0.4rem 0.8rem;
        font-size: 0.9rem;
        border-radius: 4px;
    }
    .side-menu-font .font-btn:hover {
        background: var(--color-primary);
        color: #fff;
    }
    .font-size-display {
        font-family: var(--font-sans);
        font-size: 0.8rem;
        color: var(--color-text-light);
        min-width: 2.5rem;
        text-align: center;
    }
    .side-menu-item {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        width: 100%;
        padding: 0.6rem 0;
        font-family: var(--font-sans);
        font-size: 0.9rem;
        color: var(--color-text);
        background: none;
        border: none;
        text-decoration: none;
        cursor: pointer;
        text-align: left;
    }
    .side-menu-item svg { stroke: var(--color-primary); flex-shrink: 0; }
    .side-menu-item:hover { color: var(--color-primary); }
}

/* === Search bar === */
.search-bar {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    margin: 1rem 0;
}

.search-row {
    display: flex;
    gap: 0;
    align-items: stretch;
}

.search-field {
    flex: 1;
    min-width: 150px;
}

.omnisearch-field {
    flex: 1;
}

.omnisearch-field input {
    width: 100%;
    padding: 0.6rem 1rem;
    font-family: var(--font-sans);
    font-size: 1.05rem;
    border: 2px solid var(--color-border);
    border-right: none;
    border-radius: 6px 0 0 6px;
    background: var(--color-bg);
    transition: border-color 0.15s;
}

.omnisearch-field input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(164, 42, 48, 0.1);
}

.omnisearch-field input::placeholder {
    color: #999;
    font-size: 0.95rem;
}

.search-field label {
    display: block;
    font-family: var(--font-sans);
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--color-text-light);
    margin-bottom: 0.25rem;
}

.search-field input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-family: var(--font-sans);
    font-size: 1rem;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    background: var(--color-bg);
}

.search-field input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(164, 42, 48, 0.15);
}

.btn-search {
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 500;
    padding: 0.6rem 1.2rem;
    background: var(--color-primary);
    color: #fff;
    border: 2px solid var(--color-primary);
    border-radius: 0 6px 6px 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: background 0.15s;
}

.btn-search:hover {
    background: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
}

.btn-search svg {
    display: block;
}

/* === Translation selector === */
.translation-selector {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--color-bg-alt);
    position: relative;
}

.trans-chip {
    font-family: var(--font-sans);
    font-size: 0.75rem;
    padding: 0.15rem 0.4rem;
    background: var(--color-bg-alt);
    border-radius: 3px;
    cursor: pointer;
    user-select: none;
}

.trans-lang-label {
    font-family: var(--font-sans);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--color-text-light);
    border-left: 2px solid var(--color-border);
    padding-left: 0.5rem;
    margin-left: 0.6rem;
    align-self: center;
    cursor: default;
}

.trans-lang-label:first-child { margin-left: 0; }

.trans-chip input { display: none; }

.trans-chip.selected,
.trans-chip:has(input:checked) {
    background: var(--color-primary);
    color: #fff;
}

/* === Bible text area === */
.bible-text {
    background: linear-gradient(135deg, #fdfcf9 0%, #faf8f4 50%, #f8f5ef 100%);
    padding: 1.5rem;
    border-radius: 6px;
    border: 1px solid rgba(164, 42, 48, 0.08);
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.02);
}

/* === Content layout === */

/* Desktop: book-nav in content-area v gridu */
@media (min-width: 769px) {
    .browse-layout {
        display: grid;
        grid-template-columns: 180px 1fr;
        gap: 1.5rem;
        margin: 1rem 0;
    }

    .browse-layout.wide {
        grid-template-columns: 1fr;
    }

    .browse-layout.wide .book-nav {
        display: none;
    }
}

.content-area {
    min-width: 0; /* prepreči overflow v gridu */
}

.content-area.wide .parallel-view {
    max-width: none;
}

/* === Book navigation === */
.book-nav {
    font-family: var(--font-sans);
    font-size: 0.85rem;
}

/* Expand gumbi za zložljive sezname — skriti na desktopu */
.expand-toggle {
    display: none;
}

/* Mobilni toggle gumb — skrit na desktopu */
.book-nav-toggle {
    display: none;
}

.section-header {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-primary);
    margin: 1rem 0 0.5rem;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid var(--color-border);
}

.section-header:first-child { margin-top: 0; }

.section-books {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.book-link {
    display: inline-block;
    padding: 0.15rem 0.35rem;
    text-decoration: none;
    color: var(--color-text);
    border-radius: 3px;
    font-size: 0.8rem;
}

.book-link:hover { background: var(--color-bg-alt); }

.book-link.active {
    background: var(--color-primary);
    color: #fff;
}

/* === Bible text === */
.chapter-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    margin-bottom: 1rem;
    font-family: var(--font-sans);
}

.chapter-nav.bottom { margin-top: 2rem; margin-bottom: 0; }

.chapter-title {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--color-primary);
}

.btn-nav {
    font-family: var(--font-sans);
    font-size: 0.85rem;
    text-decoration: none;
    color: var(--color-primary);
    padding: 0.3rem 0.6rem;
    border: 1px solid var(--color-border);
    border-radius: 4px;
}

.btn-nav:hover { background: var(--color-bg-alt); }
.btn-nav.disabled { visibility: hidden; }

/* Možnosti prikaza */
.display-options {
    display: flex;
    gap: 1rem;
    font-family: var(--font-sans);
    font-size: 0.8rem;
    margin-bottom: 0.5rem;
}

.opt-link {
    text-decoration: none;
    color: var(--color-text-light);
}

.opt-link:hover { color: var(--color-primary); }

/* Izbira poglavij */
.chapter-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem;
    margin-bottom: 1.25rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--color-border);
}

.ch-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    font-family: var(--font-sans);
    font-size: 0.8rem;
    text-decoration: none;
    color: var(--color-text);
    border-radius: 4px;
}

.ch-num:hover { background: var(--color-bg-alt); }

.ch-num.active {
    background: var(--color-primary);
    color: #fff;
    font-weight: 600;
}

/* Vrstice */
.verse {
    margin-bottom: 0.35rem;
}

.verse-num {
    font-family: var(--font-sans);
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--color-verse-num);
    margin-right: 0.25rem;
    vertical-align: super;
}

/* Drop cap — okrasna začetnica prvega verza */
.verse-dropcap::first-letter {
    font-family: var(--font-serif);
    font-size: 3.2em;
    float: left;
    line-height: 0.8;
    margin-right: 0.08em;
    margin-top: 0.05em;
    color: var(--color-primary);
    font-weight: 600;
}

/* SFM stili */
.nd {
    color: var(--color-primary);
    font-variant: small-caps;
    letter-spacing: 0.03em;
}

.add { color: var(--color-text-light); }

.qt { }

.qs {
    font-style: italic;
    margin-left: 2rem;
}

/* Poetični zamiki */
.q1 { display: inline-block; margin-left: 1rem; }
.q2 { display: inline-block; margin-left: 2rem; }
.q3 { display: inline-block; margin-left: 3rem; }
/* Akrostična hebrejska črka */
.acrostic-letter {
    font-family: var(--font-serif);
    font-size: 1.1rem;
    font-weight: 600;
    font-style: italic;
    color: var(--color-primary);
    margin: 1rem 0 0.2rem;
}

/* Naslov poglavja (psalmi) */
.psalm-title {
    font-family: var(--font-sans);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text-light);
    margin: 0.8rem 0 0.3rem;
    text-align: center;
}

/* Naslovi odsekov */
.ms1 {
    font-size: 1.3rem;
    margin: 1.5rem 0 0.75rem;
    color: var(--color-primary-dark);
}

.ms2 {
    font-size: 1.1rem;
    margin: 1.2rem 0 0.5rem;
}

.s1 {
    font-family: var(--font-sans);
    font-size: 0.95rem;
    font-weight: 600;
    margin: 1.2rem 0 0.5rem;
    color: var(--color-text);
}

.s2 {
    font-family: var(--font-sans);
    font-size: 0.85rem;
    font-weight: 500;
    margin: 0.8rem 0 0.3rem;
    color: var(--color-text-light);
}

.psalm-desc {
    font-size: 0.9rem;
    margin: 0.5rem 0;
}

.xref {
    font-family: var(--font-sans);
    font-size: 0.8rem;
    color: var(--color-text-light);
    margin: 0.25rem 0;
}

/* Opombe */
.fn-marker a {
    color: var(--color-primary);
    text-decoration: none;
    font-size: 0.75rem;
}

.fn-content {
    display: none;
    font-size: 0.85rem;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: 0.75rem;
    margin: 0.25rem 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.fn-content.visible {
    display: block;
}

/* === Vzporedni prikaz (tabela) === */
.parallel-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.parallel-table th.trans-header {
    font-family: var(--font-sans);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-primary);
    text-align: left;
    padding: 0.4rem 0.6rem;
    border-bottom: 2px solid var(--color-primary);
    position: sticky;
    top: 3rem;
    background: var(--color-bg);
    z-index: 10;
}

.parallel-table td.verse-cell {
    padding: 0.3rem 0.6rem;
    vertical-align: top;
    border-right: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-bg-alt);
}

.parallel-table td.verse-cell:last-child {
    border-right: none;
}

.parallel-table td.heading-cell {
    padding: 0.2rem 0.6rem;
    vertical-align: bottom;
    border-right: 1px solid var(--color-border);
}

.parallel-table td.heading-cell:last-child {
    border-right: none;
}

.heading-row td {
    padding-top: 1rem;
}

/* RTL podpora (arabščina, hebrejščina) */
.verse-cell.rtl,
.heading-cell[dir="rtl"],
div.rtl {
    direction: rtl;
    text-align: right;
}

.verse-cell.rtl .verse-num {
    float: right;
    margin-left: 0.4em;
    margin-right: 0;
}

div.rtl .verse-num {
    float: right;
    margin-left: 0.4em;
    margin-right: 0;
}

div.rtl .verse {
    direction: rtl;
    text-align: right;
}

.verse-row:nth-child(even) td {
    background: rgba(164, 42, 48, 0.018);
}

.verse-row:hover td {
    background: rgba(164, 42, 48, 0.05);
}

/* === Search results === */
/* Search options */
.search-options {
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap;
    font-family: var(--font-sans);
    font-size: 0.85rem;
    margin-bottom: 1rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--color-border);
}

.search-options label {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.search-options select {
    font-family: var(--font-sans);
    font-size: 0.85rem;
    padding: 0.2rem 0.4rem;
    border: 1px solid var(--color-border);
    border-radius: 3px;
}

/* Highlight iskalnih zadetkov */
.highlight {
    background: rgba(164, 42, 48, 0.12);
    padding: 0.05em 0.15em;
    border-radius: 2px;
    color: var(--color-primary-dark);
}

.result-trans {
    font-weight: 600;
    color: var(--color-primary);
    margin-right: 0.3rem;
}

.concordance {
    font-style: italic;
    color: var(--color-text-light);
}

.page-dots {
    padding: 0 0.3rem;
    color: var(--color-text-light);
}

.search-results h2 {
    font-family: var(--font-sans);
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
}

.search-summary {
    font-family: var(--font-sans);
    font-size: 0.9rem;
    color: var(--color-text-light);
    margin-bottom: 1rem;
}

.result-item {
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--color-bg-alt);
}

.result-ref {
    font-family: var(--font-sans);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: none;
}

.result-text {
    margin-top: 0.25rem;
    font-size: 0.95rem;
}

.pagination {
    display: flex;
    gap: 0.25rem;
    margin-top: 1.5rem;
    font-family: var(--font-sans);
}

.page-link {
    padding: 0.3rem 0.6rem;
    text-decoration: none;
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: 3px;
    font-size: 0.85rem;
}

.page-link.active {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}

/* === Error screen === */
.error-screen {
    text-align: center;
    padding: 2rem 1rem;
    max-width: 480px;
    margin: 2rem auto;
}

.error-icon {
    font-family: var(--font-serif);
    font-size: 3rem;
    color: var(--color-primary);
    opacity: 0.4;
    margin-bottom: 0.5rem;
}

.error-title {
    font-family: var(--font-sans);
    font-size: 1.2rem;
    color: var(--color-text);
    margin-bottom: 0.5rem;
}

.error-detail {
    font-style: italic;
    color: var(--color-text-light);
    margin-bottom: 1rem;
}

.error-hint {
    font-family: var(--font-sans);
    font-size: 0.85rem;
    color: var(--color-text-light);
    margin-bottom: 1rem;
}

.error-help {
    font-family: var(--font-sans);
    font-size: 0.85rem;
    color: var(--color-primary);
    text-decoration: none;
}

/* === Welcome screen === */
.welcome-screen {
    text-align: center;
    padding: 2rem 1rem;
    max-width: 480px;
    margin: 0 auto;
}

.welcome-ornament {
    display: block;
    width: 220px;
    margin: 1rem auto;
    opacity: 0.5;
}

.welcome-title {
    font-family: var(--font-serif);
    font-size: 2rem;
    font-variant: small-caps;
    letter-spacing: 0.06em;
    color: var(--color-primary);
    margin-bottom: 0.2rem;
}

.welcome-subtitle {
    font-family: var(--font-sans);
    font-size: 0.9rem;
    color: var(--color-text-light);
    margin-bottom: 1.5rem;
}

.welcome-hint {
    font-style: italic;
    color: var(--color-text-light);
    margin-bottom: 1rem;
}

.welcome-examples {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-family: var(--font-sans);
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
}

.welcome-examples span {
    color: var(--color-text-light);
}

.welcome-examples a {
    color: var(--color-primary);
    text-decoration: none;
    padding: 0.25rem 0.6rem;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    font-size: 0.85rem;
}

.welcome-examples a:hover {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}

.welcome-help {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--font-sans);
    font-size: 0.9rem;
    color: var(--color-primary);
    text-decoration: none;
    padding: 0.5rem 1.2rem;
    border: 1px solid var(--color-primary);
    border-radius: 20px;
    margin-bottom: 1rem;
}

.welcome-help:hover {
    background: var(--color-primary);
    color: #fff;
}

.welcome-help svg {
    flex-shrink: 0;
}

.no-results {
    color: var(--color-text-light);
    text-align: center;
    padding: 2rem;
}

/* === Footer === */
/* Prevodi tipa opombe — besedilo opombe kot glavna vsebina */
.note-text {
    font-size: 0.85rem;
    color: var(--color-text);
    line-height: 1.6;
}

td.note-cell, td.ref-cell {
    font-size: 0.85rem;
    background: rgba(164, 42, 48, 0.02);
}

/* === Copyright === */
.copyrights {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-border);
}

.copyright-item {
    font-family: var(--font-sans);
    font-size: 0.75rem;
    color: var(--color-text-light);
    margin-bottom: 0.3rem;
}

.copyright-item a { color: var(--color-primary); }

/* Reference linki */
a.ref-link {
    color: var(--color-primary);
    text-decoration: none;
    border-bottom: 1px dotted var(--color-primary);
}

a.ref-link:hover {
    border-bottom-style: solid;
}

.copyright-row td.copyright-cell {
    font-family: var(--font-sans);
    font-size: 0.7rem;
    color: var(--color-text-light);
    padding: 0.8rem 0.6rem 0.3rem;
    border-top: 1px solid var(--color-border);
    border-right: 1px solid var(--color-border);
    vertical-align: top;
}

.copyright-row td.copyright-cell:last-child { border-right: none; }
.copyright-row td.copyright-cell a { color: var(--color-primary); }

/* === Footer === */
.site-footer {
    border-top: 1px solid var(--color-border);
    padding: 1rem 0;
    margin-top: 2rem;
    font-family: var(--font-sans);
    font-size: 0.8rem;
    color: var(--color-text-light);
    text-align: center;
}

.site-footer a {
    color: var(--color-primary);
    text-decoration: none;
}

.site-footer a:hover {
    text-decoration: underline;
}

/* === Responsive === */

/* Telefoni — do 480px */
@media (max-width: 480px) {
    body { font-size: 0.9375rem; }

    .container { padding: 0 0.5rem; }

    .logo { font-size: 1.2rem; }

    .search-bar { padding: 0.4rem 0.5rem; margin: 0.5rem 0; }

    .omnisearch-field input { font-size: 0.95rem; padding: 0.5rem 0.75rem; }

    .btn-search { padding: 0.5rem 0.8rem; }

    .translation-selector {
        gap: 0.25rem;
        max-height: 3.2rem;
        overflow: hidden;
    }
    .translation-selector.expanded { max-height: none; }
    .trans-chip { font-size: 0.7rem; padding: 0.2rem 0.35rem; }
    .trans-lang-label { font-size: 0.6rem; margin-left: 0.3rem; padding-left: 0.3rem; }

    .chapter-picker {
        max-height: 2.4rem;
        overflow: hidden;
    }
    .chapter-picker.expanded { max-height: none; }

    .expand-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2rem;
        height: 1.5rem;
        font-family: var(--font-sans);
        font-size: 0.85rem;
        font-weight: 600;
        color: var(--color-primary);
        background: var(--color-bg-alt);
        border: 1px solid var(--color-border);
        border-radius: 3px;
        cursor: pointer;
        flex-shrink: 0;
        line-height: 1;
        letter-spacing: 0.05em;
    }
    .expand-toggle:hover {
        background: var(--color-primary);
        color: #fff;
    }

    .bible-text { padding: 0.75rem; border-radius: 0; }

    .chapter-title { font-size: 1rem; }
    .btn-nav { font-size: 0.75rem; padding: 0.25rem 0.4rem; }

    .chapter-picker { gap: 0.15rem; }
    .ch-num { width: 1.7rem; height: 1.7rem; font-size: 0.7rem; }

    .verse-dropcap::first-letter { font-size: 2.4em; }

    .parallel-table { font-size: 0.85rem; }
    .parallel-table th.trans-header { font-size: 0.75rem; padding: 0.3rem; top: 2.5rem; }
    .parallel-table td.verse-cell { padding: 0.2rem 0.3rem; }

    .welcome-title { font-size: 1.5rem; }
    .welcome-ornament { width: 160px; }

    .site-header::after { height: 14px; }

    .display-options { gap: 0.5rem; font-size: 0.72rem; }

    .pagination { flex-wrap: wrap; }
    .page-link { padding: 0.25rem 0.45rem; font-size: 0.78rem; }

    .result-item { padding: 0.5rem 0; }

    .site-footer { font-size: 0.72rem; padding: 0.75rem 0; }
}

/* Telefoni in mali tableti — do 768px */
@media (max-width: 768px) {
    .book-nav-toggle {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        padding: 0.35rem 0.75rem;
        font-family: var(--font-sans);
        font-size: 0.78rem;
        font-weight: 500;
        color: var(--color-primary);
        background: var(--color-bg-alt);
        border: 1px solid var(--color-border);
        border-radius: 20px;
        cursor: pointer;
    }

    .book-nav-toggle:hover {
        background: color-mix(in srgb, var(--color-primary) 8%, transparent);
    }

    .book-nav-arrow {
        transition: transform 0.25s ease;
    }

    .book-nav-toggle[aria-expanded="true"] .book-nav-arrow {
        transform: rotate(180deg);
    }

    .book-nav-content {
        display: none;
        padding-top: 0.75rem;
    }

    .book-nav-content.open {
        display: block;
    }

    .parallel-view {
        grid-template-columns: 1fr;
    }

    .parallel-column {
        border-right: none;
        border-bottom: 1px solid var(--color-border);
        padding-right: 0;
        padding-bottom: 1rem;
        margin-bottom: 1rem;
    }

    .search-row {
        flex-direction: row;
    }

    .omnisearch-field {
        width: 100%;
    }

    .parallel-table {
        font-size: 0.9rem;
    }

    .parallel-table th.trans-header {
        top: 2.8rem;
    }

    .search-options {
        gap: 0.5rem;
    }

    .welcome-examples {
        flex-wrap: wrap;
    }
}

/* Tableti — do 1024px */
@media (max-width: 1024px) {
    .content-area {
        grid-template-columns: 140px 1fr;
        gap: 1rem;
    }

    .book-link { font-size: 0.75rem; }
    .section-header { font-size: 0.8rem; }
}

/* Široki zasloni */
@media (min-width: 1600px) {
    .container { max-width: 1800px; }
    body { font-size: 1.125rem; }
}

/* ============================================================
   Print
   ============================================================ */
@media print {
    .site-header, .site-footer, .search-bar, .book-nav,
    .chapter-picker, .display-options, .chapter-nav,
    .copy-btn, .dark-toggle, .help-link, .lang-nav,
    .fn-content, .translation-selector { display: none !important; }

    .content-area { grid-template-columns: 1fr !important; }
    .bible-text { background: none !important; border: none !important; box-shadow: none !important; padding: 0 !important; }
    body { font-size: 11pt; line-height: 1.5; background: #fff !important; }
    .verse-num { color: #666 !important; }
    .nd { color: #333 !important; }
    .copyrights { border-top: 1px solid #ccc; margin-top: 1rem; padding-top: 0.5rem; }
    .parallel-table { font-size: 9pt; }
    .parallel-table th { background: #eee !important; }

    @page { margin: 2cm; }
}

/* ============================================================
   Kopiranje vrstic
   ============================================================ */
.verse-selected,
td.verse-cell.verse-selected {
    background: rgba(164, 42, 48, 0.08) !important;
    border-radius: 3px;
}

.copy-btn {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--font-sans);
    font-size: 0.85rem;
    padding: 0.6rem 1.2rem;
    background: var(--color-primary);
    color: #fff;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    box-shadow: 0 3px 12px rgba(0,0,0,0.2);
    z-index: 200;
    transition: transform 0.15s;
}

.copy-btn:hover { transform: scale(1.05); }
.copy-btn.hidden { display: none; }

/* ============================================================
   Avto-dopolnjevanje
   ============================================================ */
.autocomplete-list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 0 0 6px 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    z-index: 300;
    max-height: 280px;
    overflow-y: auto;
}

.autocomplete-list.hidden { display: none; }

.ac-item {
    padding: 0.5rem 0.75rem;
    font-family: var(--font-sans);
    font-size: 0.85rem;
    cursor: pointer;
    border-bottom: 1px solid var(--color-bg-alt);
}

.ac-item:hover, .ac-item.ac-active { background: var(--color-bg-alt); }
.ac-item strong { color: var(--color-primary); margin-right: 0.3rem; }
.ac-item small { color: var(--color-text-light); }

/* ============================================================
   Dark mode
   ============================================================ */
html.dark {
    --color-primary: #d4686d;
    --color-primary-dark: #e88a8e;
    --color-text: #d8d4cf;
    --color-text-light: #9a9590;
    --color-bg: #1a1918;
    --color-bg-alt: #252321;
    --color-border: #3a3633;
    --color-verse-num: #d4686d;
}

html.dark body {
    background-image: none;
}

html.dark .site-header {
    background: #5a1518;
}

html.dark .site-header::after {
    filter: brightness(0.5);
}

html.dark .search-bar {
    background: #222;
}

html.dark .search-field input,
html.dark .omnisearch-field input {
    background: #1a1918;
    color: var(--color-text);
    border-color: var(--color-border);
}

html.dark .bible-text {
    background: linear-gradient(135deg, #1e1d1b 0%, #222120 50%, #252321 100%);
    border-color: rgba(212, 104, 109, 0.1);
}

html.dark .parallel-table th.trans-header {
    background: #1e1d1b;
}

html.dark .fn-content {
    background: #2a2826;
    border-color: var(--color-border);
}

html.dark .autocomplete-list {
    background: #2a2826;
    border-color: var(--color-border);
}

html.dark .ac-item:hover, html.dark .ac-item.ac-active { background: #333; }

html.dark .copy-btn { box-shadow: 0 3px 12px rgba(0,0,0,0.5); }

html.dark .welcome-screen img { filter: brightness(0.5); }

html.dark .stat-card {
    background: linear-gradient(135deg, #222 0%, #2a2826 100%);
    border-color: rgba(212, 104, 109, 0.1);
}

html.dark .help-ornament,
html.dark .stats-page img[src*="ornament"] {
    filter: brightness(0.5);
}