/* General body settings */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Ensure root-level font size is consistent */
body, html {
    font-size: 16px;
}

/* Ensure consistent font size inheritance */
.content {
    font-size: 1rem; /* Base size for consistency */
}

/* Container settings */
.container {
    display: flex;
    flex: 1;
    flex-direction: row;
}

/* Menu styling */
.menu {
    width: 200px;
    background-color: #f4f4f4;
    display: flex;
    flex-direction: column;
}

/* Logo styling */
.logo {
    padding: 20px;
    text-align: center;
}

.logo img {
    width: 100px;
    height: 100px;
}

/* Button container settings */
.button-container {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.menu button {
    display: block;
    width: 100%;
    padding: 10px;
    border: none;
    background-color: #fff;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.3s;
}

.menu button:hover {
    background-color: #ddd;
}

.menu button.active {
    background-color: #bbb;
}

.button-separator {
    margin: 10px 0;
    border: none;
    border-top: 1px solid #ccc;
}

.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.4);
}

.modal-content {
    background-color: #fefefe;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 300px;
    border-radius: 10px;
    text-align: center;
}

#confirm-logout, #cancel-logout {
    margin: 10px;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

#confirm-logout {
    background-color: #007bff;
    color: white;
}

#cancel-logout {
    background-color: #f0f0f0;
    color: #333;
}

/* General styles for the select elements */
select {
    padding: 10px;
    font-size: 16px;
    border-radius: 20px;
    border: 2px solid #ccc;
    background-color: #f9f9f9;
    color: #333;
    transition: border-color 0.3s, box-shadow 0.3s;
    margin-bottom: 20px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url('data:image/svg+xml;utf8,<svg fill="black" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/><path d="M0 0h24v24H0z" fill="none"/></svg>');
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 30px;
}

select:focus {
    border-color: #007BFF;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
    outline: none;
}

/* Styles for the label elements */
label {
    font-weight: bold;
    color: #007BFF; /* Blue color for labels */
    margin-right: 10px; /* Add space after the label */
}

/* Specific styles for the book select */
#book-select {
    border-color: green;
    background-color: #e6ffe6;
}

/* Specific styles for the chapter select */
#chapter-select {
    border-color: blue;
    background-color: #e6f7ff;
}

/* General button styles */
button {
    padding: 10px 20px;
    font-size: 16px;
    border-radius: 5px;
    border: 2px solid transparent;
    background-color: #f9f9f9;
    color: #333;
    cursor: pointer;
    transition: background-color 0.3s, border-color 0.3s, color 0.3s;
}

button:hover {
    background-color: #e0e0e0;
}

/* Green button styles */
.greenbutton {
    border-color: green;
    background-color: #e6ffe6; /* Light green background */
    color: green;
}

.greenbutton:hover {
    background-color: #ccffcc; /* Darker green on hover */
}

/* Blue button styles */
.bluebutton {
    border-color: blue;
    background-color: #e6f7ff; /* Light blue background */
    color: blue;
}

.bluebutton:hover {
    background-color: #cceeff; /* Darker blue on hover */
}

.yellowbutton {
    border-radius: 20px;
    padding: 10px 20px;
    font-size: 16px;
    border: 2px solid #FFD700;
    background-color: #FFFACD;
    color: #B8860B;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
}

.yellowbutton:hover {
    background-color: #FFD700;
    color: #fff;
}

/* Active button styles */
button.active {
    background-color: #d0d0d0; /* Different background for active state */
}

/* Play Button Styles */
.play-button-wrapper {
    margin-bottom: 10px;
}

.play-button {
    border-radius: 20px;
    padding: 10px 20px;
    font-size: 16px;
    border: 2px solid #FFD700;
    background-color: #FFFACD;
    color: #B8860B;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
}

.play-button:hover {
    background-color: #FFD700;
    color: #fff;
}

.play-button.playing {
    background-color: #FFD700;
    color: #fff;
    font-weight: bold;
}

.play-button.stop {
    background-color: #FFD700;
    color: #fff;
    font-weight: bold;
}

.book-title {
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
    font-size: 4em;
    font-weight: bold;
    text-align: center;
    margin: 20px 0;
    color: #333;
}

/* Content settings */
.content {
    flex: 1;
    padding: 20px;
    line-height: 1.8;
}

#scripture-content .bible-text, .summary-text {
    font-size: 1.5em; /* Or a specific pixel value */
    line-height: 1.5; /* Ensure consistent line height */
}

/* Styling for Bible verses */
.verse {
    line-height: 1.8;
    display: block;
}

/* Styling for superscript in verses */
.verse sup {
    vertical-align: super;
    font-size: 0.8em;
    line-height: 1;
}

/* Styling for the chapter description */
.chapter-description {
    font-size: 1.8em; /* Match the font size of .bible-text */
    font-weight: bold; /* Change to bold */
    font-style: normal; /* Remove italic style */
    color: green; /* Keep the green color */
}

/* Styling for bible text */
.bible-text {
    overflow: visible;
    font-size: 1.8em; /* Increased from the base size */
}

/* Styling for chapter number */
.chapter-number {
    font-size: 3em; /* Increased from the base size */
    font-weight: bold;
    float: left;
    margin-right: 10px;
    line-height: 1;
    clear: left;
}

/* Clearfix */
.clearfix {
    clear: both;
    display: table;
}

/* Version section styling */
.version {
    padding: 10px;
    text-align: center;
    background-color: #f4f4f4;
    border-top: 1px solid #ccc;
    font-size: 12px;
}

.bible-chapter {
    position: relative;
    overflow: hidden;
    text-align: justify;
    font-size: inherit; /* Ensure it inherits from body/html */
}

.chapter-image {
    float: right;
    width: 300px;
    height: 300px;
    object-fit: cover;
    margin: 0 0 10px 40px; /* Increase left margin to 40px */
    cursor: pointer;
    transition: transform 0.3s ease;
    shape-outside: url(#);
    shape-margin: 10px;
    max-width: 100%;
}

.chapter-image:hover {
    transform: scale(1.05);
}

.image-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.image-popup img {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
}

/* New styles for Today's Reading page */
.reading-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
}

.reading-btn {
    padding: 10px 20px;
    font-size: 16px;
    border-radius: 20px; /* This creates the rounded corners */
    border: 2px solid;
    background-color: white;
    cursor: pointer;
    transition: background-color 0.3s;
    margin-right: 10px; /* Add some space between buttons */
}

.scripture-btn {
    border-color: green;
    color: green;
}

.scripture-btn:hover, .scripture-btn.active {
    background-color: #e6ffe6;
}

.summary-btn {
    border-color: blue;
    color: blue;
}

.summary-btn:hover, .summary-btn.active {
    background-color: #e6f7ff;
}



.content-section {
    display: none;
}

.content-section.active {
    display: block;
}

.intro-image {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto 20px;
    width: 597px; /* This is 1/3 of the original width */
}

/* Media queries for responsiveness */
@media (max-width: 768px) {
    .container {
        flex-direction: column;
    }

    .menu {
        width: 100%;
    }

    .menu button {
        width: 100%;
    }

    .version {
        order: 1;
        border-top: none;
        border-bottom: 1px solid #ccc;
        margin-top: auto;
    }

    .chapter-image {
        float: none;
        display: block;
        margin: 10px auto;
    }

    .reading-buttons {
        flex-direction: column;
    }
}