/*
 * Scripture Styles
 * Scripture text, verse numbers, reading articles
 */

/* ==========================================================================
   Scripture Text - Enhanced for Reading
   ========================================================================== */

.scripture-text {
    /* Slightly larger for comfortable reading */
    font-size: 1.05rem;
    letter-spacing: 0.01em;
}

.scripture-text p {
    margin-bottom: 0.75rem;
    padding: 0.25rem 0.5rem;
    margin-left: -0.5rem;
    margin-right: -0.5rem;
    border-radius: var(--pico-border-radius);
    transition: background 0.15s ease;
}

.scripture-text p:hover {
    background: var(--pico-mark-background-color);
    cursor: default;
}

.scripture-text p:target {
    background: var(--pico-mark-background-color);
}

/* Verse numbers - more legible while staying unobtrusive */
.scripture-text sup {
    color: var(--verse-number-color);
    font-size: 0.65em;
    font-weight: 600;
    margin-right: 0.2rem;
    vertical-align: super;
    line-height: 0;
    opacity: 0.7;

    /* Prevent verse numbers from affecting line height */
    position: relative;
    top: -0.1em;
}

/* ==========================================================================
   Reading Articles
   ========================================================================== */

article.reading {
    margin-bottom: 2rem;
    border: var(--pico-border-width) solid var(--pico-muted-border-color);
    border-radius: var(--pico-border-radius);
    overflow: hidden;
    background: var(--pico-card-background-color);
}

article.reading header {
    background: var(
        --pico-card-sectioning-background-color,
        rgba(0, 0, 0, 0.025)
    );
    padding: 1.25rem 1.5rem;
    margin-bottom: 0;
    border-bottom: var(--pico-border-width) solid var(--pico-muted-border-color);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}

article.reading header h3 {
    margin-bottom: 0.25rem;
    letter-spacing: -0.01em;
}

article.reading header p {
    margin-bottom: 0;
}

article.reading .scripture-text {
    padding: 1.5rem 2.5rem;
    max-width: var(--reading-max-width);
    margin: 0 auto;
}

/* ==========================================================================
   Reading Header Content
   ========================================================================== */

.reading-header-content {
    flex: 1;
    min-width: 0;
}

.reading-header-content h3 {
    margin-bottom: 0.25rem;
}

/* ==========================================================================
   Canticle Header
   ========================================================================== */

.canticle-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1rem;
}

.canticle-header-content {
    flex: 1;
    min-width: 0;
}

.canticle-header-content h3 {
    margin-bottom: 0.25rem;
}

.canticle-header-content .section-subtitle {
    margin-top: 0;
}