/*
    DAILY MASS READINGS OBJECT (Layer Design Studio)
    Loaded in <head> only by pages that have a "Daily Mass Readings" object
    (.pm-obj-dailyreadings) - see wds_layer_widgets() in
    CAF227A79146/webdesign/library/webdesign_studio_functions.php.
    library/ajax/usccb/daily_reading.js loads the readings into #readings; each
    reading is a .rsslayer (h2 + .rsscontent) that opens and closes on click.
    Colours follow the website palette (--color_p / --color_pd), like the
    legacy main.css.
    The feeds take seconds to arrive, so while #readings is empty it keeps the
    page height (the footer does not jump up) and shows a spinner with no text
    (multilingual sites).
*/

.pm-obj-dailyreadings > .pm-part-title {
    text-align: center;
}

.pm-obj-dailyreadings #readings .rsslayer h2 {
    width: 100%;
    margin: 0 0 20px;
    padding: 12px 15px;
    box-sizing: border-box;
    background: var(--color_p, #005b96);
    color: #ffffff;
    font-size: 1.3em;
    line-height: 1.3;
    text-align: center;
    cursor: pointer;
    transition: background-color .3s linear;
}

.pm-obj-dailyreadings #readings .rsslayer h2:hover {
    background: var(--color_pd, #002540);
}

.pm-obj-dailyreadings #readings .rsslayer h2 span {
    float: right;
    margin-right: 10px;
}

.pm-obj-dailyreadings #readings h4 {
    margin-bottom: 20px;
    font-size: 1.1em;
}

.pm-obj-dailyreadings #readings .poetry {
    margin-bottom: 20px;
    font-size: .9em;
}

.pm-obj-dailyreadings #readings .rsscontent {
    margin-bottom: 25px;
}

.pm-obj-dailyreadings #readings .rsscontent a {
    color: var(--color_pd, #002540);
    font-style: italic;
    font-weight: bold;
}

.pm-obj-dailyreadings #readings .rsscontent a:hover {
    color: var(--color_pl, #0b499f);
}

.pm-obj-dailyreadings #readings:empty:not(.is-failed),
.pm-obj-dailyreadings #readings.is-loading {
    position: relative;
    min-height: 600px;
}

.pm-obj-dailyreadings #readings:empty:not(.is-failed)::before,
.pm-obj-dailyreadings #readings.is-loading::before {
    content: "";
    position: absolute;
    top: 80px;
    left: 50%;
    width: 48px;
    height: 48px;
    margin-left: -24px;
    box-sizing: border-box;
    border: 4px solid rgba(0, 0, 0, .1);
    border-top-color: var(--color_p, #005b96);
    border-radius: 50%;
    animation: pm-readings-spin .9s linear infinite;
}

@keyframes pm-readings-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .pm-obj-dailyreadings #readings:empty:not(.is-failed)::before,
    .pm-obj-dailyreadings #readings.is-loading::before {
        animation-duration: 2.4s;
    }
}