@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,700;1,400;1,500&display=swap');

body {
    font-family: 'EB Garamond', Garamond, 'Times New Roman', Times, serif;
    background-color: #f3efea; /* A warmer, parchment-like off-white */
    color: #3a2e28; /* A very dark brown for primary text, softer than pure black */
    margin: 0;
    padding: 20px;
    line-height: 1.7; /* Base line height for readability */
}

/* Optional: Add a wrapper around all .devotional-section divs in your HTML for better control */
/* e.g., <div class="prayer-book-page"> ...all sections... </div> */
.prayer-book-page {
    max-width: 750px; /* Or your preferred width for a book-like column */
    margin: 20px auto; /* Center the page content */
    padding: 30px 40px;
    background-color: #fffdf9; /* A slightly lighter cream for the 'page' itself */
    box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 3px 8px rgba(0,0,0,0.05); /* Softer, more subtle shadow */
    border: 1px solid #dcd0c0; /* A subtle border for the page */
}

.devotional-section {
    display: block; /* This should already be set by JS or your previous CSS change */
    text-align: left; /* Left-align text for readability */
    margin-bottom: 30px; /* More space between sections */
    padding-top: 10px;
    padding-bottom: 10px;
}

.section-header {
    font-family: 'EB Garamond', Garamond, 'Times New Roman', Times, serif;
    font-size: 1.6em; /* Approx 25-26px if base is 16px */
    font-weight: 700; /* Bold */
    margin-bottom: 15px;
    color: #8B0000; /* A traditional deep red (rubric color) */
    text-align: center; /* Headers can remain centered */
    /* Optional: Add a subtle line or small caps */
    /* text-transform: uppercase; */
    /* letter-spacing: 0.5px; */
    padding-bottom: 5px;
    border-bottom: 1px solid #d3c1b4; /* A light, warm separator */
}

/* This class is added by your JS to the div containing the rotating text */
.devotional-text-content {
    font-size: 1.05em; /* Approx 17-18px, adjust as needed */
    line-height: 1.75;
    color: #3a2e28; /* Same dark brown as body */
    margin-top: 10px; /* Space between header and text */
}

.devotional-text-content p {
    margin-top: 0;
    margin-bottom: 1em;
    text-align: left; /* Keep your desired text alignment */
    padding-left: 40px;  /* Indent from the left */
    padding-right: 40px; /* Indent from the right */
    /* text-indent: 0; */ /* Ensure first-line indent is off */
}
}
}

a {
    text-decoration: none;
    color: #583c30; /* A brown that fits the theme */
}

a:hover {
    text-decoration: underline;
    color: #8B0000; /* Accent color on hover */
}

.devotional-section {
    border-radius: 0;
    box-shadow: none;
}

.group-section {
    margin-bottom: 30px; /* Same spacing as devotional-sections */
    /* You might want a border or slightly different background if it groups many items visually */
    /* For example: */
    /* border: 1px solid #e0e0e0; */
    /* padding: 20px; */
    /* background-color: #fcfaf7; */ /* Slightly different from main page if desired */
}

.group-section > .section-header { /* Style the main header for a group */
    /* It will inherit .section-header styles, but you can add specifics */
    /* For instance, if you want group headers to be slightly different: */
    /* font-size: 1.8em; */
    /* margin-bottom: 20px; */
}

/* Styling for the devotional sections when they are *inside* a group-section 
   and don't have their own visible header */
.group-section > .devotional-section {
    margin-top: 15px; /* Space them out within the group */
    padding-top: 0; /* Reduce padding if the group already has it */
}

.static-interlude-text {
    font-family: 'EB Garamond', Garamond, 'Times New Roman', Times, serif;
    font-size: 1em; /* Adjust as needed */
    color: #4a3e38; /* Slightly different from main text, or same */
    font-style: italic; /* Common for static instructional text */
    text-align: left; /* Or left, as you prefer */
    margin-top: 20px;
    margin-bottom: 20px;
    line-height: 1.6;
}