/* Sermon detail page: the date as a small calendar tile with the weekday and full date beside it,
   then the Bible verse custom fields as one scripture card, the reference (a text box field)
   stacked above the verse text (a text editor field). */
.sermon-date {
    display: flex;
    align-items: center;
    gap: .85rem;
    margin: 1.25rem 0 0;
}

.sermon-date-tile {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    width: 3.4rem;
    overflow: hidden;
    text-align: center;
    background: #fff;
    border: 1px solid var(--cs-line, #dfeae8);
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(46, 62, 78, .08);
}

.sermon-date-month {
    padding: .15rem .25rem;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .06em;
    line-height: 1.35;
    text-transform: uppercase;
    white-space: nowrap;
    color: #fff;
    background: var(--cs-accent, #0cbaa4);
}

.sermon-date-day {
    padding: .1rem 0 .2rem;
    font-size: 1.45rem;
    font-weight: 500;
    line-height: 1.3;
    color: var(--cs-ink, #2e3e4e);
}

.sermon-date time {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.sermon-date-weekday {
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--cs-accent, #0cbaa4);
}

.sermon-date-full {
    font-size: 1.05rem;
    color: var(--cs-ink, #2e3e4e);
}

.dark .sermon-date-tile {
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .12);
    box-shadow: none;
}

.dark .sermon-date-day,
.dark .sermon-date-full {
    color: #fff;
}

.topic-custom-fields.sermon-verse {
    position: relative;
    margin: 1rem 0 2rem;
    padding: 1.6rem 1.9rem 1.7rem;
    background: var(--cs-soft, #edf3f2);
    border-left: 5px solid var(--cs-accent, #0cbaa4);
    border-radius: 12px;
    overflow: hidden;
}

/* Large faded opening quote mark behind the top-right corner. */
.topic-custom-fields.sermon-verse::before {
    content: "\201C";
    position: absolute;
    top: -.6rem;
    right: 1.4rem;
    width: auto;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 8rem;
    line-height: 1;
    color: var(--cs-accent, #0cbaa4);
    opacity: .18;
    pointer-events: none;
}

.sermon-verse > [class*="col-"] {
    position: relative;
    padding: 0;
}

.sermon-verse > [class*="col-"] + [class*="col-"] {
    margin-top: 1.1rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--cs-line, #dfeae8);
}

.sermon-verse .custom-field-title {
    margin: 0 0 .4rem;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--cs-accent, #0cbaa4);
}

.sermon-verse .custom-field-type-0 .custom-field-title::before {
    content: "\f647"; /* book-bible */
    margin-right: .45rem;
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
}

/* !important beats the dark-mode .card background in layouts/colors.blade.php. */
.sermon-verse .custom-field-value {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0;
    border-radius: 0 !important;
    color: var(--cs-ink, #2e3e4e);
}

.sermon-verse .custom-field-type-0 .custom-field-value {
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 1.3;
}

.sermon-verse .custom-field-type-16 .custom-field-value {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.2rem;
    font-style: italic;
    line-height: 1.75;
}

.sermon-verse .custom-field-value p:last-child {
    margin-bottom: 0;
}

/* Hangul has no true italics, and Georgia has no Hangul glyphs anyway. */
.lang-kr .sermon-verse .custom-field-type-16 .custom-field-value,
.lang-ko .sermon-verse .custom-field-type-16 .custom-field-value {
    font-family: inherit;
    font-style: normal;
    word-break: keep-all;
}

@media (max-width: 575.98px) {
    .topic-custom-fields.sermon-verse {
        padding: 1.25rem 1.25rem 1.35rem;
    }

    .topic-custom-fields.sermon-verse::before {
        right: .8rem;
        font-size: 6rem;
    }

    .sermon-verse .custom-field-type-0 .custom-field-value {
        font-size: 1.3rem;
    }

    .sermon-verse .custom-field-type-16 .custom-field-value {
        font-size: 1.08rem;
        line-height: 1.7;
    }
}

.dark .topic-custom-fields.sermon-verse {
    background: rgba(255, 255, 255, .06);
}

.dark .sermon-verse > [class*="col-"] + [class*="col-"] {
    border-top-color: rgba(255, 255, 255, .12);
}

.dark .sermon-verse .custom-field-value {
    color: #fff;
}

.dark .sermon-verse .custom-field-type-16 .custom-field-value {
    color: rgba(255, 255, 255, .88);
}