/* The Missal, the liturgical calendar and the Breviary (templates/liturgy.html, static/js/liturgy.js).
   Everything takes its colours from the site's theme (templates/darklight.html), so light and dark
   mode follow the rest of dubia.cc; the red of the rubrics is the red of the prayers' V/R marks. */

.page-liturgy {
    --liturgy-red: var(--GW-vr-marker-color, #8b0000);
}

/* ─── the header: the day, its rank and colour, its commemorations ─── */

#liturgy-date:empty,
#liturgy-fields:empty,
#liturgy-commemorations:empty {
    display: none;
}
#liturgy-date {
    text-align: center;
    text-align-last: center;
}
#liturgy-commemorations {
    text-align: center;
}
#liturgy-commemorations .liturgy-commemoratio {
    margin: 0.2em 0 0;
    font-size: 0.92em;
    font-style: italic;
    text-indent: 0;
}
.liturgy-swatch {
    display: inline-block;
    width: 0.62em;
    height: 0.62em;
    border-radius: 50%;
    background: var(--swatch);
    box-shadow: 0 0 0 1px var(--GW-page-toolbar-border-color, #aaa);
    margin-right: 0.35em;
    vertical-align: 0.05em;
}

/* ─── the text of the Mass / the Hour ─── */

#liturgy-text {
    --text-indent: 0em;
    --text-alignment: left;
}
#liturgy-text .liturgy-loading,
#liturgy-text .liturgy-error {
    text-align: center;
    font-style: italic;
    opacity: 0.75;
}
.liturgy-mass p,
.liturgy-mass .spoken,
.liturgy-mass .vers {
    margin: 0.3em 0;
    text-indent: 0;
    text-align: left;
}
.liturgy-mass .proper,
.liturgy-mass .macro {
    margin: 0.2em 0 0.9em;
}
.liturgy-mass .ord-heading {
    margin: 2em 0 0.6em;
    padding: 0;
    border: none;
    text-align: center;
    font-size: 1.15em;
    font-weight: normal;
    font-variant-caps: small-caps;
    letter-spacing: 0.04em;
}
.liturgy-mass .ord-heading::before,
.liturgy-mass .ord-heading::after {
    content: none;
}
.liturgy-mass .rubric {
    color: var(--liturgy-red);
    font-style: italic;
    font-size: 0.88em;
    line-height: 1.45;
    margin: 0.45em 0;
}
.liturgy-mass .rubric.omitted {
    opacity: 0.75;
}
.liturgy-mass .rubric.heading {
    margin-top: 1.4em;
    text-align: center;
    font-style: normal;
    font-size: 1em;
    font-variant-caps: small-caps;
    letter-spacing: 0.03em;
}
.liturgy-mass .title2 {
    margin: 1.1em 0 0.3em;
    text-align: center;
    font-variant-caps: small-caps;
    letter-spacing: 0.03em;
}
.liturgy-mass .citation {
    color: var(--liturgy-red);
    font-size: 0.85em;
    font-style: italic;
    margin: 0.7em 0 0.15em;
}
.liturgy-mass .inline-rubric {
    color: var(--liturgy-red);
    font-size: 0.88em;
    font-style: italic;
}
/* A «quotation» inside a rubric is the text itself (the ninth lesson added to the eighth). */
.liturgy-mass .inline-rubric .nigra {
    color: var(--GW-body-text-color);
    font-style: normal;
}
.liturgy-mass .role,
.liturgy-mass .cross {
    color: var(--liturgy-red);
}
.liturgy-mass .role {
    margin-right: 0.15em;
}
.liturgy-mass .initial {
    color: var(--liturgy-red);
    font-size: 1.6em;
    line-height: 0.9;
    margin-right: 0.02em;
}
.liturgy-mass hr.sep {
    border: none;
    height: 0.35em;
    margin: 0;
    background: none;
    /* The site's hr draws an ornament; this is only a pause. */
    visibility: hidden;
}
.liturgy-mass hr.sep::before,
.liturgy-mass hr.sep::after {
    content: none;
}

/* ─── the calendar page: the month as a list ─── */

.liturgy-month-nav {
    display: inline-flex;
    align-items: center;
    gap: 0.6em;
    font-style: normal;
    font-size: 1.15em;
    font-variant-caps: small-caps;
    letter-spacing: 0.03em;
}
.liturgy-month-nav button,
.liturgy-cal-head button {
    font-family: var(--GW-serif-font-stack);
    font-size: 1.4em;
    line-height: 1;
    padding: 0 0.35em;
    color: var(--GW-body-link-color);
    border-radius: 3px;
}
.liturgy-month-nav button:hover,
.liturgy-cal-head button:hover {
    background: var(--GW-page-toolbar-button-selectable-icon-color, #eee);
}
ol.liturgy-month {
    list-style: none;
    margin: 0;
    padding: 0;
}
ol.liturgy-month > li {
    margin: 0;
    padding: 0;
    border-bottom: 1px dotted var(--GW-page-toolbar-border-color, #aaa);
}
ol.liturgy-month > li::before {
    content: none;
}
ol.liturgy-month > li > a {
    display: flex;
    align-items: baseline;
    gap: 0.75em;
    padding: 0.5em 0.25em;
    color: inherit;
    --link-underline-gradient-line-color: none;
    background-image: none;
    text-decoration: none;
}
ol.liturgy-month > li > a:hover {
    background: var(--GW-table-row-hover-outline-color, rgba(0, 0, 0, 0.04));
}
ol.liturgy-month > li.dominica .liturgy-month-title {
    font-variant-caps: small-caps;
    letter-spacing: 0.02em;
}
ol.liturgy-month > li.today {
    outline: 1px solid var(--liturgy-red);
    outline-offset: -1px;
}
.liturgy-month-date {
    flex: 0 0 3.2em;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.1;
}
.liturgy-month-day {
    font-size: 1.35em;
}
.liturgy-month-dow {
    font-size: 0.75em;
    opacity: 0.7;
    font-variant-caps: all-small-caps;
}
ol.liturgy-month .liturgy-swatch {
    flex: 0 0 auto;
    margin: 0;
}
.liturgy-month-feast {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.liturgy-month-rank,
.liturgy-month-comm {
    font-size: 0.82em;
    opacity: 0.75;
    font-style: italic;
}

/* ─── the toolbar (the site's #page-toolbar, PAGE_TOOLBAR.css, with the Missal's buttons) ─── */

#page-toolbar.liturgy-toolbar {
    z-index: 10000;
}
#page-toolbar.liturgy-toolbar[hidden] {
    display: none;
}
#page-toolbar.liturgy-toolbar .widget {
    background-color: var(--GW-body-background-color);
}
#page-toolbar.liturgy-toolbar .widget button {
    width: 100%;
}
/* Sung / low Mass: notes or an open book. */
#liturgy-sung .icon-sung,
#liturgy-sung.sung .icon-low {
    display: none !important;
}
#liturgy-sung.sung .icon-sung {
    display: block !important;
}
/* The rubrics are red when shown. */
#page-toolbar .widget #liturgy-rubrics.selected .icon {
    color: var(--liturgy-red);
}
#liturgy-fullscreen .icon-exit,
#liturgy-fullscreen.active .icon-enter {
    display: none !important;
}
#liturgy-fullscreen.active .icon-exit {
    display: block !important;
}
#page-toolbar.liturgy-toolbar > button.main-toggle-button {
    opacity: 0.7;
}
#page-toolbar.liturgy-toolbar > button.main-toggle-button[aria-expanded="true"] {
    opacity: 1;
    transform: rotateZ(0.125turn);
    transition: transform 0.2s ease;
}

/* Phones: a bar along the bottom edge instead of a column. */
@media (max-width: 767px) {
    #page-toolbar.liturgy-toolbar {
        --toolbar-button-size: 44px;
        flex-flow: row;
        width: auto;
        left: 50%;
        right: auto;
        bottom: calc(0.6em + env(safe-area-inset-bottom, 0px));
        transform: translateX(-50%);
        gap: 0.5em;
        align-items: center;
        padding: 6px;
        background-color: var(--GW-body-background-color);
        box-shadow:
            0 0 0 1px var(--GW-page-toolbar-border-color),
            0 4px 14px rgba(0, 0, 0, 0.14);
        border-radius: 4px;
    }
    #page-toolbar.liturgy-toolbar .widgets {
        flex-flow: row;
        margin: 0;
        gap: 0.5em;
    }
    #page-toolbar.liturgy-toolbar .widget {
        margin: 0;
        width: var(--toolbar-button-size);
    }
    #page-toolbar.liturgy-toolbar > button.main-toggle-button {
        width: var(--toolbar-button-size);
        height: var(--toolbar-button-size);
        padding: 9px;
        order: 1;
        opacity: 1;
        color: var(--GW-page-toolbar-button-selected-icon-color);
        background-color: var(--GW-body-background-color);
        outline: 1px dotted var(--GW-page-toolbar-border-color);
    }
    /* Room below the text for the bar. */
    .page-liturgy main {
        padding-bottom: 4.5em;
    }
}

/* ─── the panels: the day picker, the hours, the settings ─── */

.liturgy-panel {
    position: fixed;
    z-index: 10001;
    top: 5px;
    right: calc(4vmin + 20px);
    width: min(21rem, calc(100vw - 2em));
    max-height: calc(100vh - 2em);
    overflow: auto;
    box-sizing: border-box;
    padding: 0.8em 1em 1em;
    background-color: var(--GW-body-background-color);
    color: var(--GW-body-text-color);
    box-shadow:
        0 0 0 1px var(--GW-page-toolbar-border-color),
        0 0 0 3px var(--GW-body-background-color),
        0 0 0 4px var(--GW-page-toolbar-border-color),
        0 6px 18px rgba(0, 0, 0, 0.12);
    font-family: var(--GW-sans-serif-font-stack);
    font-size: 0.95rem;
    line-height: 1.4;
}
.liturgy-panel[hidden] {
    display: none;
}
@media (max-width: 767px) {
    .liturgy-panel {
        top: auto;
        right: auto;
        left: 50%;
        transform: translateX(-50%);
        bottom: calc(44px + 1.6em + env(safe-area-inset-bottom, 0px));
        max-height: calc(100vh - 44px - 3em);
    }
}
.liturgy-panel h3 {
    margin: 0.8em 0 0.4em;
    padding: 0;
    border: none;
    font-family: var(--GW-serif-font-stack);
    font-size: 1em;
    font-weight: normal;
    font-variant-caps: small-caps;
    letter-spacing: 0.04em;
    text-align: left;
}
.liturgy-panel h3:first-child {
    margin-top: 0;
}
.liturgy-panel button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* The sister pages (Missal, Breviary, calendar) at the top of the settings. */
.liturgy-pages {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45em;
    margin: 0 0 0.9em;
    padding-bottom: 0.9em;
    border-bottom: 1px dotted var(--GW-page-toolbar-border-color);
}
.liturgy-pages a {
    padding: 0.25em 0.7em;
    outline: 1px dotted var(--GW-page-toolbar-border-color);
    font-family: var(--GW-serif-font-stack);
    font-variant-caps: small-caps;
    letter-spacing: 0.03em;
    color: var(--GW-body-link-color);
    background-image: none;
    --link-underline-gradient-line-color: none;
}
.liturgy-pages a.current {
    outline: 1px solid var(--GW-body-link-color);
}

.liturgy-editions {
    display: flex;
    flex-direction: column;
    gap: 0.2em;
}
.liturgy-editions label {
    display: flex;
    align-items: center;
    gap: 0.5em;
    cursor: pointer;
    padding: 0.15em 0;
}
.liturgy-editions input {
    accent-color: var(--liturgy-red);
    margin: 0;
}

.liturgy-modes,
.liturgy-hours {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4em;
}
.liturgy-modes button,
.liturgy-hours button,
.liturgy-cal-foot button {
    padding: 0.3em 0.75em;
    outline: 1px dotted var(--GW-page-toolbar-border-color);
    color: var(--GW-body-link-color);
}
.liturgy-hours {
    flex-direction: column;
    align-items: stretch;
}
.liturgy-hours button {
    justify-content: flex-start;
    font-family: var(--GW-serif-font-stack);
}
.liturgy-modes button.selected,
.liturgy-hours button.selected {
    outline: 1px solid var(--GW-body-link-color);
    font-weight: 600;
}

.liturgy-cal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5em;
}
.liturgy-cal-month {
    font-family: var(--GW-serif-font-stack);
    font-variant-caps: small-caps;
    letter-spacing: 0.04em;
    font-size: 1.05em;
}
.liturgy-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 3px;
    text-align: center;
}
.liturgy-cal-dow {
    font-size: 0.75em;
    opacity: 0.6;
    padding-bottom: 0.2em;
}
.liturgy-cal-day {
    position: relative;
    aspect-ratio: 1;
    font-variant-numeric: tabular-nums;
    border-radius: 3px;
    padding-bottom: 4px !important;
}
.liturgy-cal-day::after {
    content: "";
    position: absolute;
    left: 22%;
    right: 22%;
    bottom: 4px;
    height: 3px;
    border-radius: 2px;
    background: var(--swatch);
    box-shadow: 0 0 0 0.5px var(--GW-page-toolbar-border-color, #aaa);
}
.liturgy-cal-day:hover {
    background: var(--GW-page-toolbar-button-selectable-icon-color, #eee);
}
.liturgy-cal-day.today {
    outline: 1px solid var(--liturgy-red);
}
.liturgy-cal-day.selected {
    background: var(--GW-body-text-color);
    color: var(--GW-body-background-color);
}
.liturgy-cal-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5em;
    margin-top: 0.75em;
}
.liturgy-cal-link {
    font-size: 0.92em;
}

/* ─── full screen: only the text ─── */

html.liturgy-fullscreen #sidebar,
html.liturgy-fullscreen .page-liturgy main > footer,
html.liturgy-fullscreen #watercolor {
    display: none !important;
}
html.liturgy-fullscreen .page-liturgy main {
    max-width: 44rem;
    margin: 0 auto;
}
html.liturgy-fullscreen {
    overflow-y: auto;
    background-color: var(--GW-body-background-color);
}