@import url('https://fonts.googleapis.com/css2?family=Gabriela&display=swap');

/* Global Reset */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Typography for Titles */
h1,
h2,
.site-title {
    font-family: 'Gabriela', serif;
}

/* Themes */

/* 1. Creme and Gold (Light) - DEFAULT */
:root {
    /* Font Scaling Defaults */
    --font-scale: 1;
    --font-base: 16px;

    /* Theme: Creme and Gold */
    --c-bg: #fffdf5;
    --c-text: #4a422d;
    --c-primary: #d4af37;
    --c-secondary: #b8860b;
    --c-accent: #daa520;
    --c-panel: #fcf6e5;
    --c-border: #e6dac1;
    --c-shadow: rgba(74, 66, 45, 0.1);
    --c-link: #b8860b;
    --c-link-hover: #d4af37;

    /* Spacing */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 1.5rem;
    --spacing-lg: 2rem;

    /* Layout */
    --max-width: 800px;
    --radius: 16px;
}

/* 2. Ink and Paper (Light) */
html.theme-ink {
    --c-bg: #f5f5f5;
    --c-text: #1a1a1a;
    --c-primary: #333333;
    --c-secondary: #555555;
    --c-accent: #000000;
    --c-panel: #ffffff;
    --c-border: #dddddd;
    --c-shadow: rgba(0, 0, 0, 0.1);
    --c-link: #333333;
    --c-link-hover: #000000;
}

/* 3. Forest Ethereal (Light) */
html.theme-ethereal {
    --c-bg: #f0f4f0;
    --c-text: #1b3022;
    --c-primary: #2d5a27;
    --c-secondary: #467142;
    --c-accent: #3d643a;
    --c-panel: #e6ede6;
    --c-border: #cedbcd;
    --c-shadow: rgba(27, 48, 34, 0.1);
    --c-link: #2d5a27;
    --c-link-hover: #467142;
}

/* 4. Denim Wash (Light) */
html.theme-denim {
    --c-bg: #f0f4f8;
    --c-text: #243b53;
    --c-primary: #486581;
    --c-secondary: #627d98;
    --c-accent: #334e68;
    --c-panel: #e1e7ee;
    --c-border: #bcccdc;
    --c-shadow: rgba(36, 59, 83, 0.1);
    --c-link: #334e68;
    --c-link-hover: #486581;
}

/* 5. Peach Fuzz (Light) */
html.theme-peach {
    --c-bg: #fff5f2;
    --c-text: #5c4033;
    --c-primary: #ffbe98;
    --c-secondary: #e6a07a;
    --c-accent: #d68162;
    --c-panel: #fcf0eb;
    --c-border: #f0ded5;
    --c-shadow: rgba(92, 64, 51, 0.1);
    --c-link: #d68162;
    --c-link-hover: #e6a07a;
}

/* 6. Sahara Sand (Light) */
html.theme-sahara {
    --c-bg: #fdf5e6;
    --c-text: #5d4037;
    --c-primary: #c19a6b;
    --c-secondary: #a67b5b;
    --c-accent: #8d6e63;
    --c-panel: #f5eedc;
    --c-border: #e6dcc5;
    --c-shadow: rgba(93, 64, 55, 0.1);
    --c-link: #a67b5b;
    --c-link-hover: #c19a6b;
}

/* 7. Lavender Mist (Light) */
html.theme-lavendermist {
    --c-bg: #f9f5ff;
    --c-text: #4a148c;
    --c-primary: #7b1fa2;
    --c-secondary: #9c27b0;
    --c-accent: #6a1b9a;
    --c-panel: #f3ebff;
    --c-border: #e7d6ff;
    --c-shadow: rgba(74, 20, 140, 0.1);
    --c-link: #7b1fa2;
    --c-link-hover: #9c27b0;
}

/* 8. Midnight Sky Blue (Dark) */
html.theme-midnight {
    --c-bg: #0a0e14;
    --c-text: #e6f1ff;
    --c-primary: #3b82f6;
    --c-secondary: #60a5fa;
    --c-accent: #0ea5e9;
    --c-panel: #161e2b;
    --c-border: #2d3748;
    --c-shadow: rgba(0, 0, 0, 0.7);
    --c-link: #60a5fa;
    --c-link-hover: #93c5fd;
}

/* 9. Auburn Night (Dark) */
html.theme-auburn {
    --c-bg: #1a0a0a;
    --c-text: #ffefef;
    --c-primary: #dc2626;
    --c-secondary: #f87171;
    --c-accent: #991b1b;
    --c-panel: #2a1212;
    --c-border: #451a1a;
    --c-shadow: rgba(0, 0, 0, 0.8);
    --c-link: #f87171;
    --c-link-hover: #fca5a5;
}

/* 10. Art Deco (Dark) */
html.theme-artdeco {
    --c-bg: #121212;
    --c-text: #f4f4f4;
    --c-primary: #d4af37;
    --c-secondary: #c5a028;
    --c-accent: #8e6d13;
    --c-panel: #1c1c1c;
    --c-border: #333333;
    --c-shadow: rgba(0, 0, 0, 0.9);
    --c-link: #d4af37;
    --c-link-hover: #f1e5ac;
}

/* 11. Green High Energy (Dark) */
html.theme-acid {
    --c-bg: #050505;
    --c-text: #dfffdf;
    --c-primary: #39ff14;
    --c-secondary: #32cd32;
    --c-accent: #228b22;
    --c-panel: #0a0f0a;
    --c-border: #1a2a1a;
    --c-shadow: rgba(0, 0, 0, 0.9);
    --c-link: #39ff14;
    --c-link-hover: #bfff00;
}

/* 12. Vaporwave Sunset (Dark) */
html.theme-vaporwave {
    --c-bg: #1a0b2e;
    --c-text: #ff71ce;
    --c-primary: #01cdfe;
    --c-secondary: #05ffa1;
    --c-accent: #b967ff;
    --c-panel: #2d144d;
    --c-border: #4a237a;
    --c-shadow: rgba(0, 0, 0, 0.6);
    --c-link: #01cdfe;
    --c-link-hover: #05ffa1;
}

/* 13. Boreal Night (Dark) */
html.theme-boreal {
    --c-bg: #0d1b1e;
    --c-text: #e0f2f1;
    --c-primary: #26a69a;
    --c-secondary: #4db6ac;
    --c-accent: #00897b;
    --c-panel: #162d31;
    --c-border: #23474d;
    --c-shadow: rgba(0, 0, 0, 0.7);
    --c-link: #4db6ac;
    --c-link-hover: #80cbc4;
}

/* 14. Neon Void (Dark) */
html.theme-neonvoid {
    --c-bg: #000000;
    --c-text: #e0ffff;
    --c-primary: #00ffff;
    --c-secondary: #00ced1;
    --c-accent: #20b2aa;
    --c-panel: #001a1a;
    --c-border: #003333;
    --c-shadow: rgba(0, 255, 255, 0.1);
    --c-link: #00ffff;
    --c-link-hover: #afeeee;
}

/* Base HTML Font Size Calculation */
html {
    font-size: calc(var(--font-base) * var(--font-scale));
    font-family: 'Lato', sans-serif;
    color: var(--c-text);
    background-color: var(--c-bg);
    transition: background-color 0.3s ease, color 0.3s ease;
    scroll-behavior: smooth;
}

/* Progress Bar */
#progress-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: transparent;
    z-index: 9999;
}

#progress-bar {
    width: 0%;
    height: 100%;
    background-color: var(--c-accent);
    transition: width 0.2s ease-out;
}

/* Emphasize Text for Bible Verses */
em,
.bible-text {
    font-style: italic;
    opacity: 0.9;
}

/* Layout Containers */
.main-container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: var(--spacing-sm);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.header-banner {
    text-align: center;
    margin-bottom: var(--spacing-sm);
}

.header-banner img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius);
    box-shadow: 0 4px 6px var(--c-shadow);
}

/* Header */
.site-header {
    text-align: center;
    margin-bottom: var(--spacing-lg);
    background-color: var(--c-panel);
    padding: var(--spacing-md);
    border-radius: var(--radius);
    border: 1px solid var(--c-border);
    box-shadow: 0 4px 6px var(--c-shadow);
}

.site-title {
    margin: 0 0 var(--spacing-xs) 0;
    display: inline-block;
    vertical-align: middle;
}

.header-controls {
    display: inline-block;
    margin-left: var(--spacing-sm);
    vertical-align: middle;
}

.site-subtitle {
    margin: 0;
    font-size: 1rem;
    color: var(--c-secondary);
    font-weight: normal;
    font-style: italic;
    font-family: 'Lato', sans-serif;
}

/* Form Elements - Ensure they use Lato */
button,
input,
select,
textarea {
    font-family: 'Lato', sans-serif;
    background-color: var(--c-panel);
    color: var(--c-text);
    border: 1px solid var(--c-border);
    border-radius: 4px;
    padding: 0.5rem;
}

/* Buttons */
.control-btn {
    background: var(--c-primary);
    color: #ffffff;
    /* High contrast white for buttons */
    border: none;
    padding: 0 0.8rem;
    font-size: 1.2rem;
    border-radius: var(--radius);
    cursor: pointer;
    margin-left: 2px;
    margin-right: 2px;
    transition: transform 0.1s ease, background 0.2s ease;
    box-shadow: 0 2px 4px var(--c-shadow);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 2.5rem;
    min-width: 2.5rem;
    width: 2.5rem;
    padding: 0;
}

/* Base style for all Nav Items to be uniform */
.nav-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 2.6rem;
    width: 2.6rem;
    min-width: 2.6rem;
    padding: 0 !important;
    border-radius: var(--radius);
    font-size: 1.2rem;
    flex-shrink: 0;
}

.nav-arrows {
    font-size: 1.5rem !important;
}

.js-theme-btn {
    font-size: 1.6rem;
}

/* In light themes, or when secondary is dark, ensure button text is clear */
.control-btn:hover {
    filter: brightness(1.1);
    text-decoration: none;
    color: #ffffff;
}

.control-btn:active {
    transform: translateY(2px);
}

#btn-start-reading {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-flex;
    vertical-align: middle;
}

/* Navigation */
/* 
   The .site-nav class styles the main navigation container.
   It uses a subtle 3D shadow effect to lift it off the page.
   This structural CSS supports the layout generated dynamically in Navigation.php.
*/
.site-nav {
    margin: var(--spacing-md) 0;
    padding: 0.4rem;
    /* Minimal padding */
    background-color: var(--c-panel);
    border-radius: var(--radius);
    border: 1px solid var(--c-border);
    /* 3D Effect Shadow */
    box-shadow: 0 8px 16px var(--c-shadow), 0 2px 4px var(--c-shadow);
}

.nav-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    align-content: center;
}

@media (min-width: 800px) {
    .nav-container {
        gap: 5px;
    }
}

.nav-left {
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 0;
    flex-wrap: nowrap;
    /* Pins arrows and select to one line */
    justify-content: center;
}

.nav-right {
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 0;
}

.nav-select-wrapper {
    max-width: 300px;
    flex: 1;
    min-width: 180px;
    /* Restored readable width */
}

/* Groupings within nav-right */
.nav-controls,
.nav-downloads {
    display: flex;
    align-items: center;
    gap: 5px;
}

.nav-btn {
    background-color: var(--c-secondary);
    color: #ffffff;
    /* padding: 0.6rem 1.2rem; Removed for .nav-item uniformness */
    border-radius: var(--radius);
    font-weight: bold;
    text-decoration: none;
    transition: transform 0.1s;
    white-space: nowrap;
    /* Prevent breaking inside button */
}

.dl-btn {
    background-color: var(--c-accent);
    /* distinct color for download links */
}

.nav-btn:hover {
    text-decoration: none;
    filter: brightness(1.2);
    color: #ffffff !important;
    /* Force text color to remain high contrast, resisting a:hover */
    transform: translateY(-2px);
    /* Lift effect */
    box-shadow: 0 4px 8px var(--c-shadow);
    /* Enhanced shadow */
}

.nav-btn:active {
    transform: translateY(2px);
}

.nav-btn.disabled {
    opacity: 0.5;
    pointer-events: none;
    background-color: var(--c-border);
}

select#chapter-select {
    padding: 0.6rem;
    border-radius: var(--radius);
    border: 1px solid var(--c-border);
    background-color: var(--c-bg);
    color: var(--c-text);
    font-size: 1rem;
    font-family: inherit;
    cursor: pointer;
    /* THE FIX: Force it to obey the parent size */
    width: 100%;
    max-width: 100%;
}

/* Content */
.chapter-content {
    background-color: var(--c-panel);
    padding: var(--spacing-lg);
    border-radius: var(--radius);
    border: 1px solid var(--c-border);
    box-shadow: 0 4px 6px var(--c-shadow);
    margin-bottom: var(--spacing-lg);
}

.chapter-content p {
    text-align: justify;
}

/* Standard Header Styling for Themes */
h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--c-primary);
    margin-top: 1.5rem;
    margin-bottom: 1rem;
}

.chapter-content h2 {
    border-bottom: 2px solid var(--c-border);
    padding-bottom: 0.5rem;
}

/* Subsection styling */
.subsection-divider {
    border-top: 1px solid var(--c-border);
    margin: var(--spacing-lg) 0;
}

.subsection-title {
    color: var(--c-secondary);
    font-size: 1.4rem;
    font-weight: bold;
    margin-bottom: var(--spacing-sm);
}

blockquote {
    border-left: 4px solid var(--c-primary);
    background-color: var(--c-panel);
    padding: 1rem;
    margin: var(--spacing-md) 0;
    padding-left: var(--spacing-md);
    font-style: italic;
    color: var(--c-secondary);
}

/* Link Styling */
a {
    color: var(--c-link);
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover {
    color: var(--c-link-hover);
    text-decoration: underline;
}

a.bible-link {
    font-weight: bold;
    text-decoration: none;
    border-bottom: 1px dotted var(--c-primary);
}

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

/* Lightbox Modal Tweaks */
#img-modal-overlay {
    flex-direction: column;
}

#modal-controls {
    margin-top: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    background: var(--c-panel);
    padding: 0.8rem 1.5rem;
    border-radius: var(--radius);
    border: 1px solid var(--c-border);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    color: var(--c-text);
}

#modal-filename {
    font-weight: bold;
    font-family: 'Lato', sans-serif;
    min-width: 120px;
    text-align: center;
}

.modal-nav-btn {
    padding: 0.5rem 1rem;
    font-size: 1.2rem;
    background-color: var(--c-secondary);
    color: #ffffff;
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
    transition: transform 0.1s;
}

.modal-nav-btn:hover {
    filter: brightness(1.2);
    transform: translateY(-2px);
}

.modal-nav-btn:active {
    transform: translateY(2px);
}

/* Footer */
.site-footer {
    text-align: center;
    margin-top: auto;
    color: var(--c-secondary);
    font-size: 0.9rem;
}

/* Images in Chapters */
.chapter-image {
    cursor: zoom-in;
    max-width: 40%;
    height: auto;
    border-radius: var(--radius);
    box-shadow: 0 4px 6px var(--c-shadow);
    margin: 0 0 var(--spacing-md) var(--spacing-md);
    display: block;
    float: right;
    clear: right;
    /* Prevent stacking weirdness */
}

/* Remove explicit float classes as we enforce right-side */


.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

/* Responsive */
@media (max-width: 600px) {

    /* Maximize Mobile Space */
    .main-container {
        padding: 0.5rem;
    }

    .chapter-content {
        padding: 1rem 0.75rem;
    }

    .site-header {
        padding: 1rem;
        margin-bottom: 1rem;
    }

    .site-nav {
        margin-bottom: 1rem;
    }

    /* Formatting retained, padding stays minimal (0.4rem) */

    .header-controls {
        display: block;
        margin: var(--spacing-sm) 0 0 0;
    }

    .nav-container {
        flex-direction: column;
    }

    .chapter-image {
        float: none;
        max-width: 100%;
        margin: 1rem auto;
        width: 100%;
    }

    .nav-left {
        width: 100%;
        justify-content: center;
        margin-bottom: var(--spacing-sm);
        flex-wrap: nowrap;
        /* Keep the navigation cluster together */
    }

    .nav-right {
        width: 100%;
        justify-content: center;
    }

    .nav-btn.nav-arrows {
        width: auto;
        flex-shrink: 0;
    }

    .nav-select-wrapper {
        flex: 1;
        width: auto;
        max-width: 100%;
    }

    select#chapter-select {
        width: 100%;
    }
}