/* ============================================================
   Interactive Calendar Grid ([parish_calendar_grid])

   COLOUR NOTE: this spec asked for #0E1E38 / #D4AF37 / #FBF9F5,
   which are close to but not identical to this theme's established
   tokens (--midnight #0E2344, --gold #C8A24D, --ivory #F8F6F1) used
   everywhere else on the site. Using the new hexes just here would
   make this one component visibly, unintentionally mismatched next
   to every other card/badge/button on the page — so this uses the
   existing tokens instead, for consistency. Flagged here rather than
   silently switched.

   No original CSS exists for this — it's a new component, not a
   ported section. Reuses .event-type-* badge classes already built
   for the compact calendar-widget, so a service's colour coding is
   identical whether it's shown here or in that smaller widget.
   ============================================================ */

.calendar-grid-app{
    background:var(--ivory);
    border-radius:16px;
    overflow:hidden;
    box-shadow:var(--shadow);
}

/* --- Header control bar ---
   Softened from the original solid --midnight fill per this round's
   brief ("remove the harsh, dark, high-contrast header styling...
   soft off-white/cream backgrounds") — cream background with navy
   text/gold accents instead of navy fill with white text. Still the
   same token discipline explained in the file header comment above:
   --ivory, --midnight, --gold are this theme's own established
   tokens, not new one-off colors. */
.cg-header{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:16px;
    padding:20px 24px;
    background:var(--ivory);
    border-bottom:3px solid var(--gold);
}

.cg-nav{
    display:flex;
    align-items:center;
    gap:10px;
}

.cg-nav-btn,
.cg-today-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:44px;
    min-height:44px;
    border-radius:10px;
    background:rgba(14,35,68,.06);
    color:var(--midnight);
    font-family:'Inter',sans-serif;
    font-size:1.1rem;
    text-decoration:none;
}

.cg-today-btn{
    min-width:auto;
    padding:0 16px;
    font-size:.85rem;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:.06em;
}

.cg-nav-btn:hover,
.cg-today-btn:hover{
    background:var(--gold);
    color:var(--midnight);
}

.cg-current-label{
    font-family:'Cinzel',serif;
    font-size:1.15rem;
    font-weight:700;
    color:var(--midnight);
    margin-left:6px;
    min-width:150px;
}

.cg-search{
    flex:1;
    min-width:180px;
}

.cg-search input{
    width:100%;
    min-height:44px;
    padding:0 16px;
    border-radius:999px;
    border:1px solid var(--border);
    background:#fff;
    color:var(--midnight);
    font-family:'Inter',sans-serif;
    font-size:.95rem;
}

.cg-search input::placeholder{
    color:var(--muted);
}

.cg-search input:focus{
    outline:2px solid var(--gold);
    outline-offset:2px;
    border-color:var(--gold);
}

.cg-view-switch{
    display:flex;
    gap:4px;
    background:rgba(14,35,68,.06);
    padding:4px;
    border-radius:999px;
}

.cg-view-btn{
    min-height:36px;
    padding:0 18px;
    border:none;
    border-radius:999px;
    background:transparent;
    color:var(--muted-dark);
    font-family:'Inter',sans-serif;
    font-size:.85rem;
    font-weight:600;
    cursor:pointer;
}

.cg-view-btn.active{
    background:var(--midnight);
    color:#fff;
}

.cg-subscribe{
    position:relative;
}

.cg-subscribe-toggle{
    min-height:44px;
    padding:0 18px;
    border:1px solid var(--gold);
    border-radius:999px;
    background:transparent;
    color:var(--gold-dark, var(--gold));
    font-family:'Inter',sans-serif;
    font-weight:600;
    font-size:.9rem;
    cursor:pointer;
}

.cg-subscribe-toggle:hover{
    background:var(--gold);
    color:var(--midnight);
}

.cg-subscribe-menu{
    position:absolute;
    top:calc(100% + 8px);
    right:0;
    background:#fff;
    border-radius:12px;
    box-shadow:0 15px 40px rgba(0,0,0,.18);
    padding:8px;
    min-width:220px;
    z-index:20;
    display:flex;
    flex-direction:column;
}

/* Same bug, same fix, as .cg-modal[hidden] above — this element also
   uses the hidden attribute with a competing display:flex override,
   and would show open on every page load without this. Found during
   verification, not something the person reported — the modal was
   just the one that happened to be visible in the screenshot. */
.cg-subscribe-menu[hidden]{
    display:none;
}

.cg-subscribe-menu a{
    padding:12px 14px;
    border-radius:8px;
    color:var(--midnight);
    font-family:'Inter',sans-serif;
    font-size:.9rem;
    text-decoration:none;
    min-height:44px;
    display:flex;
    align-items:center;
}

.cg-subscribe-menu a:hover{
    background:var(--stone-pale);
}

/* --- Live current liturgical status ---
   This is deliberately a restrained strip, not another card. It always
   describes TODAY, independently of whichever month the visitor is browsing. */
.cg-liturgical-status{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    padding:11px 24px;
    background:#fff;
    border-bottom:1px solid var(--border);
    font-family:'Inter',sans-serif;
}

.cg-liturgical-status__current{
    min-width:0;
}

.cg-liturgical-status__eyebrow{
    display:block;
    margin-bottom:3px;
    color:var(--gold-text);
    font-size:.68rem;
    font-weight:700;
    letter-spacing:.09em;
    text-transform:uppercase;
}

.cg-liturgical-status__title,
.cg-liturgical-status__next-title{
    display:block;
    color:var(--midnight);
    font-family:'Cinzel',serif;
    line-height:1.25;
}

.cg-liturgical-status__title{
    font-size:.92rem;
    font-weight:600;
}

.cg-liturgical-status__next-title{
    font-size:1rem;
}

.cg-liturgical-status__meta{
    display:flex;
    flex-wrap:wrap;
    gap:4px 7px;
    margin:3px 0 0;
    color:var(--muted-dark);
    font-size:.82rem;
    line-height:1.45;
}

.cg-liturgical-status__commemoration{
    margin:5px 0 0;
    color:var(--muted-dark);
    font-family:'EB Garamond',serif;
    font-size:.88rem;
    line-height:1.35;
}

.cg-liturgical-status__commemoration span{
    color:var(--midnight);
    font-family:'Inter',sans-serif;
    font-size:.72rem;
    font-style:normal;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.04em;
}

.cg-liturgical-status__next{
    position:relative;
    flex:0 0 auto;
    min-width:190px;
    padding-left:18px;
}

.cg-liturgical-status__next::before{
    content:"";
    position:absolute;
    top:14%;
    bottom:14%;
    left:0;
    width:1px;
    background:rgba(200,162,77,.58);
}

.cg-liturgical-status__next-date{
    display:block;
    margin-top:2px;
    color:var(--muted-dark);
    font-size:.78rem;
}

/* --- Month view --- */
.cg-view{
    padding:20px 24px 28px;
}

/* Subtle loading indicator during AJAX navigation — opacity only,
   never a dimension change, so this can't itself cause layout shift.
   Month view already can't shift regardless (fixed 42-cell grid);
   Week/Day view height can still vary with genuinely different
   content, which this doesn't attempt to mask — see calendar-grid.js
   for the honest scope note on that. */
.calendar-grid-app.cg-loading .cg-view{
    opacity:.5;
    transition:opacity .15s ease;
    pointer-events:none;
}

.cg-weekday-labels{
    display:grid;
    grid-template-columns:repeat(7,1fr);
    gap:6px;
    margin-bottom:8px;
}

.cg-weekday-labels span{
    text-align:center;
    font-family:'Inter',sans-serif;
    font-size:.75rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.08em;
    color:var(--gold-dark);
}

.cg-month-grid{
    display:grid;
    grid-template-columns:repeat(7,1fr);
    grid-auto-rows:1fr;
    gap:6px;
    /* 6 fixed rows always render (see calendar-grid.php) — this
       height reservation is what actually delivers "zero layout
       shift" between months, not a CSS guess layered on top. */
    aspect-ratio:7/5;
}

.cg-day-cell{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:3px;
    padding:8px;
    border:1px solid var(--border);
    border-radius:10px;
    background:#fff;
    text-align:left;
    cursor:pointer;
    overflow:hidden;
    min-height:44px;
    position:relative;
}

.cg-day-cell:hover{
    border-color:var(--gold);
    background:var(--gold-pale);
}

.cg-day-cell--outside{
    background:var(--stone-pale);
    opacity:.55;
}

.cg-day-cell--today{
    border:2px solid var(--gold);
}

.cg-day-cell--feast{
    background:var(--gold-pale);
}

.cg-day-cell.cg-day-cell--hidden{
    visibility:hidden;
    pointer-events:none;
}

.cg-day-number{
    font-family:'Cinzel',serif;
    font-weight:700;
    font-size:.95rem;
    color:var(--midnight);
}

.cg-fast-badge{
    display:inline-block;
    font-family:'Inter',sans-serif;
    font-size:.62rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.04em;
    padding:2px 7px;
    border-radius:999px;
    background:var(--burgundy-pale);
    color:var(--burgundy);
}

.cg-fast-badge--large{
    font-size:.8rem;
    padding:6px 14px;
}

/* Week view's badge is shown only for genuinely fasting days (see
   the template) — severity colors match the day-cell accents below
   so the same tier reads the same color everywhere in this
   component. */
.cg-fast-badge--strict{
    background:var(--burgundy-pale);
    color:var(--burgundy);
}

.cg-fast-badge--moderate{
    background:var(--gold-pale);
    color:var(--gold-dark);
}

.cg-fast-badge--light{
    background:var(--stone-pale);
    color:var(--muted-dark);
}

/* ============================================================
   Fasting severity accents — a subtle top-border + faint tint for
   the seasons/exemptions that also get a banner (strict/moderate),
   replacing the old repeated text badge that used to appear on
   every single affected day. 'light' (the standing Wednesday/Friday
   fast) gets the quietest possible signal instead — a single small
   grey dot in the corner, not a border or tint — since this applies
   to roughly 2 out of every 7 days on the calendar and regular
   parishioners already know it by heart; anything louder than a dot
   would itself become the visual noise this was meant to reduce.
   Fast-free days (the majority, and the engine's own default) get no
   accent at all.
   ============================================================ */
.cg-day-cell--fast-strict{
    border-top:3px solid var(--burgundy);
    background:var(--burgundy-pale);
}

.cg-day-cell--fast-moderate{
    border-top:3px solid var(--gold);
    background:var(--gold-pale);
}

.cg-day-cell--fast-light::after{
    content:"";
    position:absolute;
    top:6px;
    right:6px;
    width:6px;
    height:6px;
    border-radius:50%;
    background:var(--stone-dark);
}

.cg-week-column--fast-strict{
    box-shadow:inset 0 3px 0 var(--burgundy);
}

.cg-week-column--fast-moderate{
    box-shadow:inset 0 3px 0 var(--gold);
}

.cg-week-column--fast-light{
    position:relative;
}

.cg-week-column--fast-light::after{
    content:"";
    position:absolute;
    top:0;
    right:0;
    width:6px;
    height:6px;
    border-radius:50%;
    background:var(--stone-dark);
}

/* Named season/status context now lives in .cg-liturgical-status above the views. */

.cg-saint-summary{
    font-family:'EB Garamond',serif;
    font-style:italic;
    font-size:.78rem;
    color:var(--muted);
    line-height:1.2;
}

.cg-event-pill{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:1px;
    font-family:'Inter',sans-serif;
    font-size:.78rem;
    text-align:left;
    width:100%;
    text-decoration:none;
}

/* cursor:pointer and the hover/focus color-shift are scoped to when
   this is actually an <a> (the month view — each pill links to the
   event) rather than the bare class, which the week view also uses
   on a plain, non-interactive <span> with no href/click handler at
   all. Same class, two different contexts; the tag itself is what
   tells them apart correctly. */
a.cg-event-pill{
    cursor:pointer;
}

a.cg-event-pill:hover .cg-event-pill-desc,
a.cg-event-pill:focus-visible .cg-event-pill-desc {
    color:var(--gold-dark);
}

.cg-event-pill + .cg-event-pill {
    margin-top:8px;
}

.cg-event-pill-time{
    color:var(--muted);
    font-size:.68rem;
    font-weight:400;
}

.cg-event-pill-desc{
    color:var(--midnight);
    font-style:italic;
    line-height:1.35;
}

.cg-event-more{
    font-family:'Inter',sans-serif;
    font-size:.68rem;
    color:var(--muted);
}

/* --- Week view --- */
.cg-week-grid{
    display:grid;
    grid-template-columns:repeat(7,1fr);
    gap:12px;
    align-items:start;
}

.cg-week-column{
    border:1px solid var(--border);
    border-radius:12px;
    padding:12px;
    display:flex;
    flex-direction:column;
    gap:8px;
    min-height:200px;
}

.cg-week-column--today{
    border:2px solid var(--gold);
}

.cg-week-column-header{
    display:flex;
    flex-direction:column;
    align-items:center;
    background:none;
    border:none;
    cursor:pointer;
    padding:4px;
    min-height:44px;
}

.cg-week-weekday{
    font-family:'Inter',sans-serif;
    font-size:.7rem;
    text-transform:uppercase;
    letter-spacing:.06em;
    color:var(--gold-dark);
}

.cg-week-daynum{
    font-family:'Cinzel',serif;
    font-weight:700;
    font-size:1.3rem;
    color:var(--midnight);
}

.cg-week-feast{
    font-family:'EB Garamond',serif;
    font-style:italic;
    font-size:.82rem;
    text-align:center;
    margin:0;
    color:var(--midnight);
}

.cg-week-readings{
    list-style:none;
    margin:0;
    padding:0;
    font-size:.72rem;
    color:var(--muted);
}

/* --- Day view --- */
.cg-day-detail{
    max-width:700px;
    margin:0 auto;
}

.cg-day-detail-date{
    font-family:'Inter',sans-serif;
    font-size:.85rem;
    text-transform:uppercase;
    letter-spacing:.08em;
    color:var(--gold-dark);
    margin-bottom:6px;
}

.cg-day-detail-title{
    font-family:'Cinzel',serif;
    font-size:1.4rem;
    color:var(--midnight);
    margin:0 0 12px;
}

.cg-day-detail-saints{
    font-family:'EB Garamond',serif;
    font-style:italic;
    margin:10px 0;
}

.cg-day-detail-readings,
.cg-day-detail-events{
    margin-top:24px;
}

.cg-day-detail-readings h4,
.cg-day-detail-events h4{
    font-family:'Inter',sans-serif;
    font-size:.85rem;
    text-transform:uppercase;
    letter-spacing:.06em;
    color:var(--midnight);
    margin-bottom:10px;
}

.cg-day-detail-event{
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px 0;
    border-bottom:1px solid var(--border);
}

.cg-event-image{
    width:56px;
    height:56px;
    border-radius:10px;
    object-fit:cover;
    flex-shrink:0;
}

.cg-day-detail-event-text{
    display:flex;
    flex-direction:column;
    gap:2px;
}

.cg-event-venue{
    font-family:'Inter',sans-serif;
    font-size:.82rem;
    color:var(--muted);
    margin-top:2px;
}

.cg-event-full-link{
    font-family:'Inter',sans-serif;
    font-size:.82rem;
    font-weight:600;
    color:var(--gold-dark);
    margin-top:6px;
    display:inline-block;
}

.cg-event-full-link:hover{
    text-decoration:underline;
}

.cg-readings-drawer{
    margin:12px 0;
    font-family:'Inter',sans-serif;
    border:1px solid rgba(0,0,0,.08);
    border-radius:8px;
    overflow:hidden;
}

.cg-readings-trigger{
    width:100%;
    display:flex;
    align-items:center;
    gap:8px;
    padding:10px 14px;
    background:none;
    border:none;
    text-align:left;
    cursor:pointer;
    font-family:inherit;
}

.cg-readings-trigger-label{
    font-weight:600;
    color:var(--midnight);
    flex-shrink:0;
}

.cg-readings-preview{
    flex:1;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:.85rem;
    color:var(--muted,#666);
    font-style:italic;
}

.cg-readings-chevron{
    flex-shrink:0;
    font-size:.7rem;
    color:var(--gold-dark,var(--gold));
    transition:transform .25s ease;
}

.cg-readings-drawer--open .cg-readings-chevron{
    transform:rotate(180deg);
}

.cg-readings-panel{
    max-height:0;
    overflow:hidden;
    transition:max-height .3s cubic-bezier(0.25,0.8,0.25,1);
}

/* The open height is set from scrollHeight in calendar-grid.js.
   Do not use a fixed max-height here: feast days can legitimately
   contain a long lectionary and a hard ceiling clips the final readings. */
.cg-readings-drawer--open .cg-readings-panel{
    overflow:hidden;
}

.cg-readings-panel ul{
    margin:0;
    padding:0 14px 14px 30px;
    font-size:.9rem;
    color:var(--muted,#666);
}

.cg-event-add-to-calendar{
    margin-top:8px;
    font-family:'Inter',sans-serif;
    font-size:.8rem;
}

.cg-event-add-to-calendar a{
    color:var(--gold-dark);
}

.cg-event-add-to-calendar a:hover{
    text-decoration:underline;
}

.cg-day-detail-none{
    color:var(--muted);
    font-style:italic;
}

/* --- Modal --- */
.cg-modal{
    position:fixed;
    inset:0;
    z-index:9999;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
}

/* The bug this fixes: an element that's both `hidden` and given an
   author-stylesheet `display` override (needed here for the
   centering flexbox layout) does NOT stay hidden by default — the
   browser's own [hidden]{display:none} rule and this .cg-modal rule
   have EQUAL specificity (0,1,0 each), so whichever is declared
   later in the cascade wins, and an author stylesheet always loads
   after the browser's own UA stylesheet. This rule adds the missing
   ATTRIBUTE selector specifically so it outranks the plain class
   rule above (0,2,0 vs 0,1,0) — that's what actually restores
   correct hidden behaviour, not source order or !important. */
.cg-modal[hidden]{
    display:none;
}

.cg-modal-backdrop{
    position:absolute;
    inset:0;
    background:rgba(14,35,68,.6);
}

.cg-modal-panel{
    position:relative;
    background:#fff;
    border-radius:20px;
    max-width:680px;
    width:100%;
    max-height:85vh;
    overflow-y:auto;
    padding:44px;
    box-shadow:0 25px 60px rgba(0,0,0,.3);
}

.cg-modal-close{
    position:absolute;
    top:16px;
    right:16px;
    min-width:44px;
    min-height:44px;
    border:none;
    background:var(--stone-pale);
    border-radius:50%;
    font-size:1.3rem;
    color:var(--midnight);
    cursor:pointer;
}

.cg-modal-date{
    font-family:'Inter',sans-serif;
    font-size:.85rem;
    text-transform:uppercase;
    letter-spacing:.08em;
    color:var(--gold-dark);
    margin:0 0 16px;
}

.cg-modal-actions{
    margin-top:24px;
}

/* --- Responsive: below 768px, collapse to a stacked accordion --- */
@media(max-width:768px){
    .cg-header{
        flex-direction:column;
        align-items:stretch;
    }

    .cg-nav{
        flex-wrap:wrap;
        justify-content:center;
    }

    .cg-current-label{
        flex-basis:100%;
        text-align:center;
        margin:0;
        order:-1;
    }

    .cg-liturgical-status{
        align-items:flex-start;
        padding:14px 18px;
    }

    .cg-liturgical-status__next{
        min-width:160px;
    }

    .cg-weekday-labels{
        display:none;
    }

    .cg-month-grid{
        display:flex;
        flex-direction:column;
        aspect-ratio:auto;
        gap:8px;
    }

    .cg-day-cell{
        flex-direction:row;
        align-items:center;
        flex-wrap:wrap;
        min-height:56px;
    }

    .cg-day-cell--outside{
        display:none;
    }

    .cg-day-cell .cg-day-number::after{
        content:" " attr(data-cg-weekday);
        font-family:'Inter',sans-serif;
        font-size:.75rem;
        font-weight:600;
        color:var(--gold-dark);
        text-transform:uppercase;
    }

    .cg-week-grid{
        grid-template-columns:1fr;
    }

    .cg-modal-panel{
        padding:24px;
        max-height:90vh;
    }
}

@media(max-width:520px){
    .cg-liturgical-status{
        flex-direction:column;
        align-items:stretch;
        gap:10px;
        padding:10px 16px;
    }

    .cg-liturgical-status__next{
        width:100%;
        min-width:0;
        padding:9px 0 0;
        border-top:1px solid var(--border);
    }

    .cg-liturgical-status__next::before{
        display:none;
    }

    .cg-liturgical-status__title{
        font-size:.88rem;
    }

    .cg-liturgical-status__next-title{
        font-size:.94rem;
    }
}

body.theme-dark .calendar-grid-app{
    background:var(--surface);
}

/* The header switched from a hardcoded --midnight fill to the light
   --ivory token this round — that needs an explicit dark-mode
   override now where it didn't before, since --ivory doesn't
   automatically adapt the way the site's semantic --surface/--text
   tokens do. */
body.theme-dark .cg-header{
    background:var(--surface-2);
    border-bottom-color:var(--gold);
}

body.theme-dark .cg-liturgical-status{
    background:var(--surface);
    border-bottom-color:var(--line);
}

body.theme-dark .cg-liturgical-status__title,
body.theme-dark .cg-liturgical-status__next-title,
body.theme-dark .cg-liturgical-status__commemoration span{
    color:var(--text);
}

body.theme-dark .cg-liturgical-status__meta,
body.theme-dark .cg-liturgical-status__commemoration,
body.theme-dark .cg-liturgical-status__next-date{
    color:var(--muted);
}

body.theme-dark .cg-current-label{
    color:var(--text);
}

body.theme-dark .cg-nav-btn,
body.theme-dark .cg-today-btn{
    background:rgba(255,255,255,.08);
    color:var(--text);
}

body.theme-dark .cg-search input{
    background:var(--surface);
    border-color:var(--line);
    color:var(--text);
}

body.theme-dark .cg-view-switch{
    background:rgba(255,255,255,.08);
}

body.theme-dark .cg-view-btn{
    color:var(--text);
}

body.theme-dark .cg-day-cell{
    background:var(--surface-2);
    border-color:var(--line);
}

body.theme-dark .cg-day-cell--outside{
    background:var(--surface);
}

body.theme-dark .cg-week-column{
    border-color:var(--line);
}

body.theme-dark .cg-modal-panel{
    background:var(--surface-2);
}

/* ============================================================
   Event hover popover — appended to document.body by JS (not
   nested inside the calendar grid), positioned absolutely so it
   can float above any other page content, matching the reference
   design where it overlays even the announcement ribbon behind it.
   ============================================================ */
.cg-event-popover {
    position: absolute;
    z-index: 9500;
    width: 260px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 24px 48px -12px rgba(14, 35, 68, 0.28), 0 8px 24px rgba(14, 35, 68, 0.12);
    overflow: hidden;
    opacity: 0;
    transform: translateY(6px);
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.cg-event-popover--visible {
    opacity: 1;
    transform: translateY(0);
}

.cg-event-popover-image {
    display: block;
    width: 100%;
    height: 140px;
    object-fit: cover;
    background: var(--stone-pale);
}

.cg-event-popover-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px 16px 16px;
}

.cg-event-popover-datetime {
    font-family: 'Inter', sans-serif;
    font-size: 0.78rem;
    color: var(--muted);
}

.cg-event-popover-desc {
    font-family: 'Cinzel', 'Times New Roman', serif;
    font-style: italic;
    font-size: 0.92rem;
    color: var(--midnight);
    line-height: 1.4;
}