h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

.blazor-error-boundary::after {
    content: "An error has occurred."
}

:root {
    --lc-border: #dadce0;
    --lc-muted: #5f6368;
    --lc-bg: #ffffff;
    --lc-cell-bg: #ffffff;
    --lc-cell-bg-muted: #fafafa;
    --lc-link: #1a73e8;
    --max-width: 1440px;
    --spacing-xs: 8px;
    --spacing-sm: 12px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    /* Horizontal gutter used by .container; kept in a variable so full-bleed
       bands (e.g. the breadcrumb) can cancel it out at every breakpoint.
       --crumb-bleed is two gutters deep because .container is nested: the
       layout wraps @Body in one and each page opens its own. */
    --container-pad: var(--spacing-sm);
    --crumb-bleed: calc(2 * var(--container-pad));
    /* TEC design system tokens (TEC-Design-System, Lectionary Calendar Grid) */
    --tec-black: #191919;
    --tec-link: #10529E;
    --tec-cool-2: #126DB5;
    --tec-cool-3: #56BAEA;
    --tec-cool-4: #AED9F4;
    --tec-grey-1: #EBECED;
    --tec-grey-2: #BDBEBF;
    --tec-eggshell-white: #F6F7F8;
    --tec-deintensified: #767676;
}

body {
    margin: 0;
    font-family: 'Open Sans', sans-serif;
    background: var(--lc-bg);
    font-size: 16px;
    line-height: 1.5;
    color: #212529;
}

/* ==================== SITE HEADER (Episcopal Church Style) ==================== */
.site-header {
    background: white;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
}

/* =============================================
   EYEBROW / UTILITY NAVIGATION
   Figma: Nav Main > Nav Utility (1440 x 44)
   Language block inset 26px left, utility group flush right with 16px inset.
   ============================================= */
.header-top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 44px;
    background: #FFFFFF;
}

.nav-utility {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: 44px;
    padding: 0 16px 0 0;
}

/* Nav Utility 2: Open Sans Regular 16 / 100% / +1% */
.utility-link {
    display: inline-flex;
    align-items: center;
    height: 44px;
    padding: 0 10px;
    font-family: 'Open Sans', sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.375;
    letter-spacing: 0.01em;
    color: var(--tec-black);
    text-decoration: none;
    white-space: nowrap;
}

/* Background-only hover so the row never reflows on pointer-over. */
.utility-link:hover,
.utility-link:focus-visible {
    background: var(--tec-cool-4);
}

/* =============================================
   CRUMB TRAIL
   Figma: Crumb Trail (1440 x 36) — 1px Eggshell Grey 2 rules top and bottom,
   full-bleed band, first crumb glyph 32px in from the content edge.
   Crumb buttons carry 4px gutters; each caret occupies a 10px box.
   ============================================= */
.custom-breadcrumb {
    display: flex;
    /* Hard 36px cap. box-sizing is border-box globally, so this is 34px of
       content plus the two 1px rules. nowrap keeps a long trail on one line
       rather than growing the band to a second row. */
    height: 36px;
    flex-wrap: nowrap;
    overflow: hidden;
    white-space: nowrap;
    align-items: center;
    list-style: none;
    /* Bleed out through both .container gutters (TugLayOut wraps @Body in one
       and each page opens its own) so the rules span the full .app-main content
       box, as in Figma. The padding then puts the first crumb glyph 32px in,
       which lines it up with the left-nav text. */
    margin: 0 calc(-1 * var(--crumb-bleed));
    padding: 0 var(--crumb-bleed) 0 calc(var(--crumb-bleed) + 28px);
    background: #FFFFFF;
    border-top: 1px solid var(--tec-grey-2);
    border-bottom: 1px solid var(--tec-grey-2);
    font-family: 'Open Sans', sans-serif;
}

/* Crumb Button — Nav Utility 2: Open Sans Regular 16 / +1% / Link */
.custom-breadcrumb .breadcrumb-item {
    display: flex;
    align-items: center;
    /* Never shrink. As flex children these would otherwise compress to fit,
           so the trail would squash its own text instead of overflowing — and
           breadcrumb.js, which detects overflow via scrollWidth, would never
           see a reason to collapse anything. */
    flex: 0 0 auto;
    padding: 0 4px;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.375;
    letter-spacing: 0.01em;
    color: var(--tec-link);
}

/* Crumb Caret — 10px box, Black Text, centred in the 18px gap */
.custom-breadcrumb .breadcrumb-item+.breadcrumb-item::before {
    content: "/";
    display: inline-block;
    width: 10px;
    margin-left: -4px;
    margin-right: 4px;
    text-align: center;
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: normal;
    color: var(--tec-black);
}

/* Crumb Current — Nav Utility 1: Open Sans SemiBold 17 / +2% / Black Text */
.custom-breadcrumb .breadcrumb-item.active {
    color: var(--tec-black);
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: 0.02em;
}

.custom-breadcrumb .breadcrumb-item a {
    color: var(--tec-link);
    text-decoration: none;
}

.custom-breadcrumb .breadcrumb-item a:hover,
.custom-breadcrumb .breadcrumb-item a:focus-visible {
    text-decoration: underline;
}

.custom-breadcrumb .breadcrumb-item.active a {
    color: inherit;
}

/* ---- Overflow: collapsed crumbs + ellipsis menu -------------------------
   Figma "Crumb Button" ellipsis variant (28x36 on Cool 4) and "Crumb Menu"
   (304 wide, 38px rows on Eggshell White). breadcrumb.js decides what hides.  */

.custom-breadcrumb .breadcrumb-item[hidden] {
    display: none;
}

/* A caret sits before every crumb that follows another crumb. When the ellipsis
   is hidden the first real crumb still follows it, so suppress that one caret —
   this keeps the separators right without the script having to manage them. */
.custom-breadcrumb .crumb-overflow[hidden]+.breadcrumb-item::before {
    content: none;
}

/* Only once the script is wired can the menu escape the 36px band. Until then
   the trail keeps overflow:hidden, so a long trail clips rather than spilling
   outside its rules. */
.custom-breadcrumb.crumb-trail--ready {
    overflow: visible;
}

.custom-breadcrumb .crumb-overflow {
    position: relative;
    padding: 0;
}

.crumb-ellipsis {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: 28px;
    height: 34px;
    padding: 0 4px;
    background: var(--tec-cool-4);
    border: none;
    cursor: pointer;
}

.crumb-ellipsis:hover,
.crumb-ellipsis:focus-visible {
    background: var(--tec-cool-3);
}

.crumb-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--tec-link);
}

.crumb-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 60;
    display: none;
    width: 304px;
    max-width: 80vw;
    margin: 0;
    padding: 0;
    list-style: none;
    background: var(--tec-eggshell-white);
    border: 1px solid var(--tec-grey-2);
    box-shadow: 0 1px 4px rgba(12, 12, 13, 0.10), 0 1px 4px rgba(12, 12, 13, 0.05);
}

.crumb-menu.is-open {
    display: block;
}

.crumb-menu-item[hidden] {
    display: none;
}

/* Same hover/active fills as the left nav, per design direction. */
.crumb-menu-item>a,
.crumb-menu-item>span {
    display: block;
    min-height: 38px;
    padding: 8px 16px;
    font-family: 'Open Sans', sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.375;
    letter-spacing: 0.01em;
    color: var(--tec-black);
    text-decoration: none;
    /* The trail itself is nowrap; long labels must wrap inside the menu. */
    white-space: normal;
    transition: background 0.15s ease;
}

.crumb-menu-item>a:hover,
.crumb-menu-item>a:focus-visible {
    background: var(--tec-cool-3);
}

.crumb-menu-item>a.is-active {
    background: var(--tec-cool-4);
}

/* =============================================
   SHARED MAGNIFIER GLYPH — Components/Layout/SearchIcon.razor
   Artwork ships as wwwroot/images/Search Button.svg; the component inlines it
   with fill="currentColor" so each call site tints it via `color`.
   Figma sizes: eyebrow "Mag" 15x16, submit-button "MagBig" 24x26.
   ============================================= */
.icon-search {
    display: block;
    width: 24px;
    height: auto;
    flex-shrink: 0;
}

.icon-search--sm {
    width: 15px;
}

/* Utility Search: 54 x 44, dark glyph on the white eyebrow */
.utility-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 44px;
    flex-shrink: 0;
    padding: 0;
    background: none;
    border: none;
    color: var(--tec-black);
    cursor: pointer;
}

.utility-icon-btn:hover,
.utility-icon-btn:focus-visible {
    background: var(--tec-cool-4);
}

/* The Undercroft chip: Eggshell Grey 1 fill, 10px gutters, flush to search */
.utility-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    padding: 0 10px;
    margin: 0;
    background: var(--tec-grey-1);
    font-family: 'Open Sans', sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.375;
    letter-spacing: 0.01em;
    color: var(--tec-black);
    text-decoration: none;
    white-space: nowrap;
}

.utility-btn:hover,
.utility-btn:focus-visible {
    background: var(--tec-grey-2);
}

/* =============================================
   LANGUAGE SELECTOR (eyebrow, left side)
   Figma: Nav Utility > Language — globe 44x44, 10px gap,
   then 44x24 pills separated by 1px x 24px rules.
   ============================================= */
/* Anchor for the expanded card. Holds the collapsed height so nothing below it
   moves when .lang-selector leaves the flow. The width may collapse freely:
   .header-top-row is space-between so the utility nav stays put, and in the
   mobile menu the picker sits in a full-width block. */
.lang-picker {
    position: relative;
    height: 44px;
    box-sizing: border-box;
}

.lang-selector {
    display: flex;
    flex-direction: column;
}

.lang-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 44px;
}

.lang-globe {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    transition: background 0.15s ease;
}

/* Globe.svg is authored at 44x44 and fills the box exactly. */
.lang-globe svg {
    display: block;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
}

/* Expanded: one bordered card around both the bar and the panel.
   Figma 16161:5928 variant 2 — 416x237, 1px Black Text border, Drop Shadow/300. */
.lang-picker.is-expanded .lang-selector {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 900;
    width: 416px;
    max-width: calc(100vw - 32px);
    background: #FFFFFF;
    border: 1px solid var(--tec-black);
    box-shadow: 0 4px 4px -1px rgba(12, 12, 13, 0.05), 0 4px 4px -1px rgba(12, 12, 13, 0.10);
}

.lang-picker.is-expanded .lang-globe {
    background: var(--tec-cool-4);
}

/* Hover has to beat the expanded fill, so it follows that rule. */
.lang-globe:hover,
.lang-globe:focus-visible {
    background: var(--tec-cool-3);
}

/* Codes when collapsed, native names when expanded. Both always in the DOM so
   the labels cannot desync from the state. */
.lang-name {
    display: none;
}

.lang-picker.is-expanded .lang-code {
    display: none;
}

.lang-picker.is-expanded .lang-name {
    display: inline;
}

/* Expanded pills size to their label (Figma: English 70, Español 76). */
.lang-picker.is-expanded .lang-btn {
    width: auto;
    min-width: 44px;
    padding: 0 8px;
}

/* ---- Translation information panel ---- */
.lang-info {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px;
    background: var(--tec-eggshell-white);
}

/* display:flex above would otherwise defeat the hidden attribute. */
.lang-info[hidden] {
    display: none;
}

/* Body: EB Garamond Regular 18/22 */
.lang-info-text {
    margin: 0;
    font-family: "Adobe Garamond Pro", "Adobe Garamond", 'EB Garamond', Garamond, serif;
    font-size: 1.125rem;
    line-height: 22px;
    color: var(--tec-black);
}

.lang-info-divider {
    height: 1px;
    background: var(--tec-grey-2);
}

/* Link 3 Sans: Open Sans SemiBold Italic 16 */
.lang-feedback {
    align-self: center;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: 'Open Sans', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    font-style: italic;
    color: var(--tec-link);
    text-decoration: none;
}

.lang-feedback::after {
    content: "\2192";
    font-style: normal;
}

.lang-feedback:hover,
.lang-feedback:focus-visible {
    text-decoration: underline;
}

/* Catches clicks anywhere else on the page, behind the card. */
.lang-backdrop {
    position: fixed;
    inset: 0;
    z-index: 899;
    background: transparent;
}

/* Standard clip-rect utility — the app had none. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.lang-options {
    display: flex;
    align-items: center;
    height: 44px;
}

.lang-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 24px;
    padding: 0;
    background: none;
    border: none;
    font-family: 'Open Sans', sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.375;
    letter-spacing: 0.01em;
    color: var(--tec-link);
    text-decoration: none;
    cursor: pointer;
}

.lang-btn:hover,
.lang-btn:focus-visible {
    background: var(--tec-cool-4);
}

.lang-btn.is-active {
    background: var(--tec-deintensified);
    color: #FFFFFF;
    cursor: default;
}

.lang-sep {
    display: block;
    width: 1px;
    height: 24px;
    margin: 0 10px;
    background: var(--tec-grey-2);
    flex-shrink: 0;
}

/* Logo — Figma: 560 x 84 artwork with 16px above and below (117px band) */
.site-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    gap: 6px;
}

.site-logo a {
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo-img {
    height: 84px;
    width: auto;
    max-width: 100%;
}

.wp-block-file {
    font-family: "Adobe Garamond", 'EB Garamond', Garamond, serif;
    font-weight: 600;
    font-style: Italic;
    font-size: 1.75rem;
    line-height: 100%;
    letter-spacing: normal;
    vertical-align: middle;
    border-left: 3px solid #BDBEBF;
    padding: 0 0 0.5rem 1rem;
    gap: 0.5rem;
}

.wp-block-file__button {
    color: #10529E;
    font-weight: 600;
    font-size: 1rem;
    font-style: normal;
    display: block;
}

.wp-block-file__button::after {
    content: " ↓";
    /* space + arrow */
    font-size: 0.625em;
}

/* Main Navigation */
.nav-main {
    display: flex;
    justify-content: center;
    padding: 0;
}

.nav-main-link {
    padding: 12px 28px;
    font-size: 1.25rem;
    color: #191919;
    text-decoration: none;
    white-space: nowrap;
    font-weight: 600;
}

.nav-main-link:hover {
    background: #AED9F4;
}

/* Culture Selector Bar — 26px inset per Figma */
.culture-bar {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 44px;
    padding: 0 0 0 26px;
}

/* Mobile Header */
.mobile-header {
    display: none;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: white;
}

.mobile-logo {
    display: flex;
    align-items: center;
}

.mobile-logo-img {
    height: 40px;
    width: auto;
}

.mobile-menu-toggle {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 10px;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 1001;
}

.hamburger-line {
    width: 24px;
    height: 2px;
    background: #191919;
    transition: all 0.3s ease;
    transform-origin: center;
}

.hamburger-line.open:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.hamburger-line.open:nth-child(2) {
    opacity: 0;
}

.hamburger-line.open:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

/* Mobile Navigation */
.mobile-nav {
    display: none;
    position: fixed;
    top: 64px;
    left: 0;
    right: 0;
    bottom: 0;
    background: white;
    z-index: 1000;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.3s ease;
}

.mobile-nav.open {
    transform: translateX(0);
}

.mobile-nav-content {
    padding: 20px;
}

.mobile-nav-link {
    display: block;
    padding: 1rem 0;
    font-size: 1.125rem;
    color: #191919;
    text-decoration: none;
    border-bottom: 1px solid #e0e0e0;
    font-weight: 500;
}

.mobile-nav-link:hover {
    color: #10529e;
}

.mobile-nav-link--secondary {
    font-size: 1rem;
    font-weight: 400;
    color: #5f6368;
}

.mobile-nav-divider {
    height: 1px;
    background: #e0e0e0;
    margin: 16px 0;
}

.mobile-nav-culture {
    padding: 1rem 0;
}

/* Mobile Overlay */
.mobile-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.mobile-overlay.open {
    opacity: 1;
}

/* Mobile Responsive */
@media (max-width: 992px) {
    .header-top-row {
        display: none;
    }

    .nav-utility {
        display: none;
    }

    .site-logo {
        display: none;
    }

    .nav-main {
        display: none;
    }

    .culture-bar {
        display: none;
    }

    .mobile-header {
        display: flex;
    }

    .mobile-nav {
        display: block;
    }

    .mobile-overlay {
        display: block;
        pointer-events: none;
    }

    .mobile-overlay.open {
        pointer-events: auto;
    }
}

/* Tablet adjustments */
@media (max-width: 1200px) and (min-width: 993px) {
    .nav-main-link {
        padding: 12px 18px;
        font-size: 1rem;
    }

    /* Keep the 16px Nav Utility 2 size; tighten gutters only. */
    .utility-link {
        padding: 0 8px;
    }

    .culture-bar {
        padding-left: 16px;
    }
}

/* Main Container - Responsive */
.app-main {
    flex: 1;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: var(--spacing-sm);
    width: 100%;
}

/* Container class for Bootstrap-like layout */
.container {
    max-width: 100%;
    margin: 0 auto;
    padding-left: var(--container-pad);
    padding-right: var(--container-pad);
    width: 100%;
}

.pt-2 {
    padding-top: 0.5rem;
}

.pt-3 {
    padding-top: 1rem;
}

.pb-6 {
    padding-bottom: 3rem;
}

.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

/* Calendar Toolbar - Responsive */
.calendar-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-sm);
}

.calendar-toolbar__title {
    font-size: 1.125rem;
    font-weight: 600;
    margin-right: auto;
    width: 100%;
    margin-bottom: var(--spacing-xs);
}

.calendar-toolbar__group {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    flex-wrap: wrap;
}

.calendar-toolbar select,
.calendar-toolbar button {
    padding: 6px 10px;
    border: 1px solid var(--lc-border);

    background: #fff;
    font-size: 0.85rem;
    cursor: pointer;
}

.calendar-toolbar button:hover {
    background: var(--lc-cell-bg-muted);
}

.calendar-select {
    min-width: 120px;
}

.calendar-select:focus {
    outline: 2px solid #1a73e8;
    outline-offset: 2px;
}

/* Calendar Grid - Mobile First */
.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    border: 1px solid var(--lc-border);

    overflow: hidden;
}

.calendar-dow {
    background: var(--lc-cell-bg-muted);
    padding: 8px 4px;
    font-size: 0.7rem;
    color: var(--lc-muted);
    border-bottom: 1px solid var(--lc-border);
    text-align: center;
}

.calendar-cell {
    min-height: 80px;
    padding: 6px;
    background: var(--lc-cell-bg);
    border-right: 1px solid var(--lc-border);
    border-bottom: 1px solid var(--lc-border);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.calendar-cell:nth-child(7n) {
    border-right: none;
}

.calendar-cell.is-outside-month {
    background: var(--lc-cell-bg-muted);
}

.calendar-daynum {
    font-size: 0.75rem;
    color: var(--lc-muted);
    font-weight: 600;
}

.calendar-year-badge {
    display: inline-block;
    padding: 2px 6px;
    background: #e8f0fe;
    border: 1px solid #1a73e8;

    color: #1a73e8;
    font-size: 0.65rem;
    font-weight: 600;
    text-align: center;
    margin-bottom: 4px;
}

.calendar-events {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.calendar-event {
    font-size: 0.7rem;
    line-height: 1.2;
}

.calendar-event a {
    color: var(--lc-link);
    text-decoration: none;
    word-break: break-word;
}

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

.calendar-year {
    display: inline-block;
    margin-left: 4px;
    padding: 1px 4px;
    border: 1px solid var(--lc-border);

    color: var(--lc-muted);
    font-size: 0.65rem;
    white-space: nowrap;
}

/* Post Page - Responsive */
.post {
    max-width: 900px;
    padding: 0 var(--spacing-sm);
}

.post h1 {
    margin-top: 0;
    font-size: 1.5rem;
}

.post-meta {
    color: var(--lc-muted);
    font-size: 0.85rem;
    margin-bottom: var(--spacing-sm);
}

/* Tablet Breakpoint (768px and up) */
@media (min-width: 768px) {
    .app-header__inner {
        padding: var(--spacing-md) var(--spacing-lg);
        flex-wrap: nowrap;
    }

    .app-header__brand {
        font-size: 1.125rem;
    }

    .header-logo {
        height: 50px;
    }

    .header-title {
        font-size: 1.25rem;
    }

    .app-header__culture select {
        font-size: 0.9rem;
    }

    .app-main {
        padding: var(--spacing-md);
    }

    :root {
        --container-pad: var(--spacing-md);
    }

    .calendar-toolbar__title {
        font-size: 1.25rem;
        width: auto;
        margin-bottom: 0;
    }

    .calendar-toolbar {
        gap: var(--spacing-sm);
    }

    .calendar-dow {
        padding: 10px;
        font-size: 0.85rem;
        text-align: left;
    }

    .calendar-cell {
        min-height: 100px;
        padding: 8px;
        gap: 6px;
    }

    .calendar-daynum {
        font-size: 0.85rem;
    }

    .calendar-events {
        gap: 4px;
    }

    .calendar-event {
        font-size: 0.8rem;
    }

    .calendar-year {
        margin-left: 6px;
        padding: 1px 6px;
        font-size: 0.7rem;
    }

    .post h1 {
        font-size: 2rem;
    }

    .post-meta {
        font-size: 0.9rem;
    }

    .left-sidebar {
        width: 244px;
    }

    .page-body {
        flex-wrap: nowrap;
    }

    .page-header {
        padding: 16px 16px 16px 24px;
        min-height: 94px;
    }

    .page-title {
        font-size: 2.5rem;
    }

    .content-area {
        flex-wrap: nowrap;
    }

    /* Footer tablet styles - 3 columns side by side */
    .footer-info {
        flex-direction: row;
        align-items: stretch;
        justify-content: center;
        max-width: 100%;
        gap: 0;
        padding: var(--spacing-lg) var(--spacing-md);
    }

    .f-col {
        flex: 1 1 0;
        width: 0;
        max-width: none;
        min-width: 0;
        padding: 0 var(--spacing-md);
        align-items: center;
        gap: 8px;
    }

    /* Vertical divider for tablet/desktop - hide horizontal, show vertical */
    .f-divider {
        display: block;
        width: 1px;
        height: auto;
        max-width: none;
        align-self: stretch;
        background: #000000;
        color: #000000;
        margin: 0;
        flex-shrink: 0;
    }

    .phone-number {
        font-family: "Adobe Garamond Pro", "Adobe Garamond", 'EB Garamond', Garamond, serif;
        font-weight: 400;
        font-style: normal;
        font-size: 18px;
        line-height: 18px;
        letter-spacing: normal;
        text-align: center;
        vertical-align: middle;
    }

    .f-addr {
        font-size: 16px;
        line-height: 1.6;
        font-family: "Adobe Garamond Pro", "Adobe Garamond", 'EB Garamond', Garamond, serif;
        font-weight: 400;
        font-style: normal;
        font-size: 18px;
        line-height: 18px;
        letter-spacing: normal;
        text-align: center;
        vertical-align: middle;
    }

    .f-phone {
        font-family: "Adobe Garamond Pro", "Adobe Garamond", 'EB Garamond', Garamond, serif;
        font-size: 18px;
    }

    .f-link {
        font-size: 16px;
    }

    .footer-logo-area {
        min-height: 180px;
        padding: var(--spacing-lg);
    }

    .footer-logo {
        max-width: 180px;
    }

    .donate-btn {
        font-size: 19px;
        padding: 10px 32px;
    }
}

/* Desktop Breakpoint (1024px and up) */
@media (min-width: 1024px) {
    .app-main {
        padding: var(--spacing-lg);
    }

    :root {
        --container-pad: var(--spacing-lg);
    }

    .calendar-cell {
        min-height: 110px;
        padding: 10px;
    }

    .calendar-event {
        font-size: 0.85rem;
    }

    .calendar-year {
        font-size: 0.75rem;
    }

    .page-title {
        font-size: 3rem;
    }

    /* Footer desktop styles - wider columns */
    .footer-info {
        max-width: 960px;
        padding: var(--spacing-lg);
    }

    .f-col {
        padding: 0 var(--spacing-lg);
        gap: 10px;
    }

    .f-addr {
        font-size: 17px;
        line-height: 1.7;
    }

    .f-phone {
        font-size: 17px;
    }

    .f-link {
        font-size: 17px;
    }

    .footer-logo-area {
        min-height: 200px;
    }

    .footer-logo {
        max-width: 200px;
    }

    .donate-btn {
        font-size: 21px;
        padding: 12px 40px;
    }

    .social-icon {
        width: 2.75rem;
        height: 2.75rem;
    }

    .social-icon img {
        width: 2.75rem;
        height: 2.75rem;
    }

    .footer-copy p {
        font-size: 14px;
        margin: 6px 0;
    }

    .lectionary-navigation {
        justify-content: center;
    }
}

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating>.form-control-plaintext::placeholder,
.form-floating>.form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating>.form-control-plaintext:focus::placeholder,
.form-floating>.form-control:focus::placeholder {
    text-align: start;
}

/* =============================================
   RESET & BASE
   ============================================= */
*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    color: #191919;
    background: var(--lc-bg, white);
    /* REMOVED min-width: 1440px; for responsive design */
}

/* App Wrapper for sticky footer */
.app-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.app-main {
    flex: 1;
}

a {
    text-decoration: none;
    color: inherit;
}

button {
    cursor: pointer;
    background: none;
    border: none;
    font: inherit;
}

/* =============================================
   BREADCRUMB
   ============================================= */
.breadcrumb {
    background: #FFFFFF;
    border-top: 1px solid var(--tec-grey-2);
    border-bottom: 1px solid var(--tec-grey-2);
}

.breadcrumb-inner {
    max-width: var(--max-width);
    margin: 0 auto;
    display: flex;
    align-items: center;
    min-height: 36px;
    padding: 8px 16px;
    flex-wrap: wrap;
    width: 100%;
}

.crumb {
    font-size: 16px;
    color: #10529e;
    padding: 0 4px;
    letter-spacing: 0.16px;
}

.crumb:hover {
    text-decoration: underline;
}

.crumb-sep {
    font-size: 16px;
    color: #191919;
    padding: 0 2px;
}

.crumb-current {
    font-size: 17px;
    font-weight: 600;
    color: #191919;
    padding: 0 4px;
    letter-spacing: 0.34px;
}

/* =============================================
   PAGE BODY
   ============================================= */
.page-body {
    display: flex;
    max-width: var(--max-width);
    margin: 0 auto;
    background: white;
    padding-bottom: 16px;
    width: 100%;
    flex-wrap: wrap;
}

/* =============================================
   LEFT SIDEBAR
   ============================================= */
.left-sidebar {
    width: 244px;
    min-width: 244px;
    max-width: 244px;
    flex-shrink: 0;
    padding: 16px;
    background: white;
    display: flex;
    flex-direction: column;
}

.sidebar-item {
    display: block;
    width: 100%;
    max-width: 220px;
    padding: 8px 16px;
    font-family: 'EB Garamond', serif;
    font-size: 20px;
    color: #191919;

    text-decoration: none;
    line-height: 1.35;
}

.sidebar-active {
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    font-size: 20px;
    background: #aed9f4;
    border-radius: 0;
    padding: 10px 10px;
}

/* =============================================
   LEFT NAVIGATION
   Figma: Body > Frame 204 (244 wide) — buttons 220 wide, inset 16px.
   Top Button (section parent): Nav Main, Open Sans SemiBold 20, 10px/16px pad.
   L1 Button: Left Nav 1, Open Sans Regular 18, 8px/16px pad.
   Active L1 fills the 220px button with Cool 4; its L2 child sits on
   Eggshell White with a 32px text indent.
   ============================================= */
.left-navigation {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: 220px;
    box-sizing: border-box;
    font-family: 'Open Sans', sans-serif;
    color: var(--tec-black);
}

.left-navigation>li {
    margin: 0;
    padding: 0;
}

/* Section parent — "Worship and Prayer" */
.left-navigation>li>h4 {
    margin: 0;
    padding: 10px 16px;
    font-family: 'Open Sans', sans-serif;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: normal;
    color: var(--tec-black);
}

.left-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    font-family: 'Open Sans', sans-serif;
}

/* L1 rows */
.left-navigation ul>li {
    margin: 0;
    padding: 8px 16px;
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: normal;
    color: var(--tec-black);
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* Nav buttons are block-level and bleed back over the row's own
               padding, so the hover and active fills cover the whole 220px
               button rather than just the text box.
               The padding deliberately lives on BOTH the row and the anchor:
               a row that has no anchor yet (or ever) still gets correct
               spacing, so the nav never collapses to unpadded text. */
.left-navigation>li>h4>a,
.left-navigation ul>li>a,
.left-navigation .lectionary-label {
    display: block;
    color: inherit;
    text-decoration: none;
    transition: background 0.15s ease;
}

.left-navigation>li>h4>a {
    margin: -10px -16px;
    padding: 10px 16px;
}

.left-navigation ul>li>a {
    margin: -8px -16px;
    padding: 8px 16px;
}

/* Hover — Cool 3 */
.left-navigation>li>h4>a:hover,
.left-navigation>li>h4>a:focus-visible,
.left-navigation ul>li>a:hover,
.left-navigation ul>li>a:focus-visible {
    background: var(--tec-cool-3);
}

/* Active / current row — Cool 4 */
.left-navigation .list-item-lectionary {
    margin: 0;
    padding: 0;
    background: transparent;
}

.left-navigation .list-item-lectionary>.lectionary-label,
.left-navigation ul>li>a.is-active {
    padding: 8px 16px;
    background: var(--tec-cool-4);
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 1.4;
    color: var(--tec-black);
}

/* "You are here" holds its fill on hover. Must follow the generic
               hover rule above — both selectors weigh the same. */
.left-navigation ul>li>a.is-active:hover,
.left-navigation ul>li>a.is-active:focus-visible {
    background: var(--tec-cool-4);
}

/* L2 child list */
.left-navigation .list-about-lectionary {
    margin: 0;
    padding: 0;
    background: var(--tec-eggshell-white);
}

.left-navigation .list-item-about-lectionary {
    margin: 0;
    padding: 8px 8px 8px 32px;
    background: var(--tec-eggshell-white);
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 1.4;
    color: var(--tec-black);
}

/* Same bleed-back as the L1 rows, at the L2 indent. */
.left-navigation .list-item-about-lectionary>a {
    display: block;
    margin: -8px -8px -8px -32px;
    padding: 8px 8px 8px 32px;
    color: inherit;
    text-decoration: none;
    transition: background 0.15s ease;
}

.left-navigation .list-item-about-lectionary>a:hover,
.left-navigation .list-item-about-lectionary>a:focus-visible {
    background: var(--tec-cool-3);
}

/* =============================================
   MAIN CONTENT
   ============================================= */
.main-content {
    flex: 1;
    min-width: 0;
    background: white;
}

.page-header {
    background: #126db5;
    padding: 12px 16px;
    min-height: 60px;
    display: flex;
    align-items: flex-end;
    margin-top: 8px;
}

.page-title {
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    font-size: 1.75rem;
    color: white;
    letter-spacing: -0.96px;
    line-height: 1.1;
}

/* Content area (two-col) */
.content-area {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
}

.content-primary {
    flex: 1;
    min-width: 0;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-end;
}

.content-sidebar {
    width: 204px;
    flex-shrink: 0;
    padding: 16px;
}

.related-heading {
    font-size: 17px;
    font-weight: 600;
    color: #191919;
    margin-bottom: 6px;
}

.related-link {
    font-size: 20px;
    font-weight: 600;
    color: #10529e;
}

.related-link:hover {
    text-decoration: underline;
}

/* =============================================
   SEARCH
   ============================================= */
.search-wrap {
    width: 936px;
}

.search-panel {
    background: #f6f7f8;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 24px 48px;
}

.search-input {
    flex: 1;
    height: 44px;
    border: 2px solid #bdbebf;
    background: white;
    padding: 0 10px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    font-size: 20px;
    color: #767676;
    outline: none;
}

.search-input::placeholder {
    color: #767676;
    font-weight: 600;
}

.search-btn {
    width: 54px;
    height: 44px;
    background: #10529e;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: none;
    cursor: pointer;
}

/* =============================================
   CALENDAR CONTROLS
   ============================================= */
.cal-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 936px;
}

.picker {
    display: flex;
    align-items: center;
}

.arrow-btn {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    color: #191919;
    line-height: 1;
    padding: 0 2px;
}

.picker-val {
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    font-size: 34px;
    color: #191919;
    letter-spacing: -0.68px;
    text-align: center;
}

.month-val {
    width: 208px;
}

.year-val {
    min-width: 108px;
    padding: 0 4px;
}

.view-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 44px;
}

.view-label {
    font-size: 20px;
    font-weight: 300;
    color: #191919;
    letter-spacing: -0.4px;
}

.toggle-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.toggle-btn {
    height: 24px;
    min-width: 44px;
    padding: 0 8px;
    font-size: 16px;
    color: #10529e;
    letter-spacing: 0.16px;
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.toggle-on {
    background: #767676;
    color: white;
}

.toggle-sep {
    font-size: 16px;
    color: #191919;
}

/* =============================================
   CALENDAR GRID
   ============================================= */
.cal-outer {
    background: #f6f7f8;
    padding: 8px 10px 8px 11px;
    width: 936px;
}

.cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    border-top: 2px solid #9ab0c4;
}

.day-hdr {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 20px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
    font-size: 14px;
    color: #191919;
    letter-spacing: 0.28px;
    background: #f6f7f8;
    border-right: 1px solid transparent;
}

.day {
    border: 1px solid #bdbebf;
    background: white;
    display: flex;
    flex-direction: column;
    min-height: 175px;
}

.day.empty {
    background: #ebeced;
}

.dnum {
    background: #ebeced;
    padding: 2px 8px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    font-size: 17px;
    color: #191919;
    text-align: right;
    letter-spacing: 0.34px;
    min-height: 24px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.day.advent .dnum {
    background: rgba(202, 32, 63, 0.22);
}

.dbody {
    flex: 1;
    padding: 4px;
    background: white;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Event cards */
.event {
    background: white;
    padding: 8px 4px 4px;
    font-family: 'EB Garamond', serif;
    font-size: 17px;
    color: #191919;
    line-height: 22px;
    box-shadow: 0 1px 2px rgba(12, 12, 13, 0.10), 0 1px 2px rgba(12, 12, 13, 0.05);
}

.ev-yellow {
    border-top: 8px solid #f0b41a;
}

.ev-purple {
    border-top: 8px solid #7030a0;
}

/* =============================================
   CALENDAR LEGEND
   ============================================= */
.cal-legend {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 936px;
    padding: 4px 0;
}

.legend-left {
    display: flex;
    align-items: center;
    gap: 6px;
}

.cycle-lbl {
    font-size: 17px;
    color: #191919;
    letter-spacing: 0.34px;
}

.current-cycle {
    font-weight: 600;
}

.cycle-badge {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    font-size: 17px;
    color: #191919;
    letter-spacing: 0.34px;
}

.cyc-a {
    background: rgba(18, 109, 181, 0.4);
}

.cyc-b {
    background: rgba(202, 32, 63, 0.4);
}

.cyc-c {
    background: rgba(57, 181, 74, 0.4);
}

.cycle-note {
    font-size: 16px;
    color: #191919;
    font-style: italic;
    margin-left: 4px;
}

.legend-right {
    display: flex;
    flex-direction: column;
    gap: 3px;
    align-items: flex-start;
}

.legend-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.swatch {
    display: inline-block;
    width: 40px;
    height: 8px;
    flex-shrink: 0;
}

.sw-yellow {
    background: #f0b41a;
}

.sw-purple {
    background: #7030a0;
}

.swatch-lbl {
    font-size: 16px;
    color: #191919;
}

/* =============================================
   FOOTER
   ============================================= */
.site-footer {
    background: #f6f7f8;
    margin-top: auto;
    padding: var(--spacing-md) 0;
}

.footer-inner {
    max-width: var(--max-width);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 var(--spacing-md) var(--spacing-lg);
    width: 100%;
}

/* Footer logo */
.footer-logo-area {
    min-height: 150px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: var(--spacing-md);
}

.footer-logo {
    max-width: 150px;
    height: auto;
}

.footer-wordmark {
    text-align: center;
    line-height: 1.1;
}

.f-the {
    font-family: 'Open Sans', sans-serif;
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 3px;
    color: #191919;
    text-transform: uppercase;
    margin-bottom: 2px;
}

.f-episcopal {
    font-family: 'EB Garamond', serif;
    font-style: italic;
    font-size: 40px;
    color: #191919;
    line-height: 1;
    display: block;
}

.f-church {
    font-family: 'Open Sans', sans-serif;
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 3px;
    color: #191919;
    text-transform: uppercase;
    margin-top: 2px;
}

/* Footer info columns - Mobile First (Stacked) */
.footer-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: 0;
    padding: var(--spacing-md) var(--spacing-sm);
}

.f-col {
    width: 100%;
    max-width: 100%;
    padding: var(--spacing-md) var(--spacing-sm);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
}

.f-addr {
    font-family: 'EB Garamond', serif;
    font-size: 15px;
    color: #191919;
    text-align: center;
    line-height: 1.8;
    margin: 0;
    font-style: normal;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 8px;
}

.f-addr-line {
    display: block;
    line-height: 1.8;
}

.f-phone-numbers {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin-top: 8px;
}

.f-phone {
    font-family: 'EB Garamond', serif;
    font-size: 15px;
    color: #191919;
    text-decoration: none;
    line-height: 1.8;
    display: block;
}

.f-phone:hover {
    text-decoration: underline;
}

.f-address-col {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Horizontal divider for mobile - visible on mobile only */
.f-divider {
    display: block;
    width: 60%;
    max-width: 300px;
    height: 1px;
    background: #000000;
    color: #000000;
    margin: var(--spacing-sm) auto;
}

.f-links {
    gap: 4px;
}

.f-link {
    font-family: 'Open Sans', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: #191919;
    text-align: center;
    line-height: 1.8;
    display: block;
}

.f-link:hover {
    text-decoration: underline;
}

.f-links {
    gap: 6px;
}

.f-link {
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #191919;
    text-align: center;
    line-height: 1.8;
}

.f-link:hover {
    text-decoration: underline;
}

/* Donate */
.footer-donate {
    margin: var(--spacing-md) 0;
}

.donate-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 32px;
    background: #10529e;
    color: white;
    font-family: 'Open Sans', sans-serif;
    font-size: 18px;
    font-weight: 600;
    transition: background 0.2s;
}

.donate-btn:hover {
    background: #0d4585;
}

/* Social icons */
.footer-social {
    display: flex;
    height: 2.75rem;
    gap: 1rem;
    border-radius: 0.625rem;
}

.social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    overflow: hidden;
    /*border-radius: 50%;
            
            background-color: #f0f0f0;
            transition: transform 0.2s;*/
}

.social-icon:hover {
    transform: scale(1.1);
}

.social-icon img {
    width: 2.75rem;
    height: 2.75rem;
    display: block;
}

/* Copyright */
.footer-copy {
    text-align: center;
    padding: var(--spacing-sm);
}

.footer-copy p {
    font-size: 13px;
    color: #191919;
    margin: 4px 0;
}

.footer-copy a {
    color: #10529e;
    text-decoration: underline;
}

.footer-copy a:hover {
    text-decoration: none;
}

/* =============================================
   FOOTER RESPONSIVE - MUST BE AT END OF FILE
   ============================================= */
/* Tablet and up - 3 columns side by side */
@media (min-width: 768px) {
    .footer-info {
        flex-direction: row;
        align-items: stretch;
        justify-content: center;
        max-width: 100%;
        gap: 0;
        padding: var(--spacing-lg) var(--spacing-md);
    }

    .f-col {
        flex: 1 1 0;
        width: 0;
        max-width: none;
        min-width: 0;
        padding: 0 var(--spacing-md);
        align-items: center;
        gap: 8px;
    }

    .f-divider {
        width: 1px;
        height: auto;
        max-width: none;
        align-self: stretch;
        margin: 0;
        flex-shrink: 0;
        background: #000000;
        color: #000000;
    }

    .f-addr {
        font-size: 16px;
        line-height: 1.6;
    }

    .f-link {
        font-size: 16px;
    }

    .footer-logo-area {
        min-height: 180px;
        padding: var(--spacing-lg);
    }

    .footer-logo {
        max-width: 180px;
    }

    .donate-btn {
        font-size: 19px;
        padding: 10px 32px;
    }
}

/* Desktop - wider layout */
@media (min-width: 1024px) {
    .footer-info {
        max-width: 960px;
        padding: var(--spacing-lg);
    }

    .f-col {
        padding: 0 var(--spacing-lg);
        gap: 10px;
    }

    .f-addr {
        font-size: 17px;
        line-height: 1.7;
    }

    .f-link {
        font-size: 17px;
    }

    .footer-logo-area {
        min-height: 200px;
    }

    .footer-logo {
        max-width: 200px;
    }

    .donate-btn {
        font-size: 21px;
        padding: 12px 40px;
    }

    .social-icon {
        width: 2.75rem;
        height: 2.75rem;
    }

    .social-icon img {
        width: 2.75rem;
        height: 2.75rem;
    }

    .footer-copy p {
        font-size: 14px;
        margin: 6px 0;
    }
}

@media (min-width: 1440px) {
    .container {
        /*max-width: 1440px;*/
    }
}

/* Ensure flex layout */
.layout-row {
    display: flex;
}

/* Columns */
.col-left,
.col-right {
    position: relative;
}

/* Fixed width sidebar - does not scale.
           Figma: 244px column, 220px buttons inset 16px from the left. */
.col-left {
    flex: 0 0 244px;
    width: 244px;
    min-width: 244px;
    max-width: 244px;
    padding: 16px 8px 16px 16px;
}

/* Flexible content - scales with viewport.
           No padding: the page header and body carry their own 8px inset. */
.col-right {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0;
}

.col-calender {
    flex: 1 1 auto;
    min-width: 0;
}

/* Tablet and below — Figma "Lectionary Calendar" 768 frame.
                   992px is where the desktop header is already replaced by the mobile
                   one, so the left nav goes with it and the content takes the full
                   viewport width. Hiding the column (not just .left-navigation inside
                   it) is what stops a 244px empty gutter being left behind. */
@media (max-width: 992px) {
    .col-left {
        display: none;
    }

    .col-right {
        flex: 1 1 100%;
        width: 100%;
        max-width: 100%;
    }
}

.col-related {
    /*flex: 0 0 20%;*/
    max-width: 20%;
    padding-left: 1rem;
    padding-top: .5rem;
    padding-right: .5rem;
    padding-bottom: 1rem;
    font-size: 1.5rem;
    color: #191919;
    font-weight: 300;
    font-family: 'Open Sans', sans-serif;
}

/* Optional: stack on mobile */
@media (max-width: 768px) {
    .layout-row {
        flex-direction: column;
    }

    .col-left,
    .col-right {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* Hide related sidebar on mobile */
    .content-sidebar,
    .col-related {
        display: none;
    }

    /* Make calendar full width since related is hidden */
    .col-calender {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .app-main {
        padding: 0px;
    }

    .container {
        padding: 0px;
    }
}

/* ==================== LECTIONARY PAGE ==================== */
/* =============================================
   PAGE HEADER (blue title bar)
   Figma: Page Short Header 2 (1196 x 110) — Title Box is a Cool 2 fill
   inset 8px on all sides (1172 x 94) with 16px/24px inner padding.
   Page Title = Title 1 Sans: Open Sans SemiBold 48 / -2%.
   ============================================= */
.lectionary-title {
    display: flex;
    align-items: center;
    margin: 8px auto;
    padding: 16px 24px;
    min-height: 94px;
    max-width: 1200px;
    background: var(--tec-cool-2);
    color: #FFFFFF;
}

.lectionary-title h1 {
    margin: 0;
    font-family: 'Open Sans', sans-serif;
    font-size: 3rem;
    font-weight: 600;
    font-style: normal;
    line-height: 1.3;
    letter-spacing: -0.02em;
    color: #FFFFFF;
}

@media (max-width: 768px) {
    .lectionary-title {
        margin: 8px 0;
        padding: 12px 16px;
        min-height: 0;
    }

    .lectionary-title h1 {
        font-size: 2rem;
    }
}

.lectionary-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 8px 24px 0 24px;
    font-family: 'Open Sans', sans-serif;
}

.lectionary-header {
    text-align: center;
    margin-bottom: 30px;
}

.lectionary-header h1 {
    font-size: 2rem;
    font-weight: 400;
    margin-bottom: 10px;
    color: #212529;
    letter-spacing: -0.01em;
}

.lectionary-cycle {
    font-size: 1rem;
    font-weight: 400;
    color: #000000;
    padding-top: 10px;
}

.lectionary-cycle strong {
    color: #1a73e8;
    font-size: 1.1rem;
    font-weight: 500;
}

.cycle-dates {
    font-size: 0.9rem;
    font-weight: 400;
    color: #80868b;
    margin-left: 8px;
}

.lectionary-info-links {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 30px;
    flex-wrap: wrap;
}

.info-link {
    color: #1a73e8;
    text-decoration: none;
    font-size: 0.9rem;
    padding: 5px 10px;
    border-bottom: 2px solid transparent;
    transition: border-color 0.2s;
}

.info-link:hover {
    border-bottom-color: #1a73e8;
}

.lectionary-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding: 15px;
    background: #f8f9fa;

}

.nav-button {
    background: #fff;
    border: 1px solid #dadce0;

    padding: 8px 16px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 400;
    font-family: "Open Sans", sans-serif;
    transition: background 0.2s;
}

.nav-button:hover {
    background: #f1f3f4;
}

/* Navigation selectors and buttons containers */
.nav-selectors {
    display: flex;
    gap: 8px;
    align-items: center;
}

.nav-buttons {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* Dropdown select styles */
.nav-select {
    background: #fff;
    border: 1px solid #dadce0;

    padding: 8px 12px;
    font-size: 0.9rem;
    font-weight: 400;
    font-family: "Open Sans", sans-serif;
    color: #212529;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%235f6368' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 30px;
    min-width: 120px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.nav-select:hover {
    border-color: #1a73e8;
}

.nav-select:focus {
    outline: none;
    border-color: #1a73e8;
    box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.2);
}

/* Today button style */
.nav-today {
    background: var(--tec-link);
    color: #fff;
    border-color: var(--tec-link);
}

/* Cool 3 hover. Text flips to Black Text because white on #56BAEA
               is only 2.2:1 — dark text on the same fill is 8.2:1. */
.nav-today:hover,
.nav-today:focus-visible {
    background: var(--tec-cool-3);
    border-color: var(--tec-cool-3);
    color: var(--tec-black);
}

.current-month {
    font-size: 1.5rem;
    font-weight: 400;
    font-family: "Open Sans", sans-serif;
    margin: 0;
    color: #212529;
    letter-spacing: -0.01em;
}

.lectionary-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    border: 1px solid #dadce0;

    overflow: hidden;
    margin-bottom: 0px;
}

.lectionary-legend {
    background: #EBECED;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 8px;
}

.legend-left {
    display: flex;
    gap: 16px;
    align-items: center;
}

.legend-right {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.legend-color-block {
    width: 49px;
    height: 11px;
    display: inline-block;
}

.block-lff {
    background: #F0B41A;
}

.block-rcl {
    background: #A17BB7;
}

.legend-label {
    font-family: "Open Sans", sans-serif;
    font-size: 0.75rem;
    color: #000000;
}

.legend-block {
    width: 28;
    height: 28;
    gap: 10px;
    angle: 0 deg;
    opacity: 1;
    border-left-width: 8px;
    font-family: Open Sans;
    font-weight: 600;
    font-style: SemiBold;
    leading-trim: NONE;
    line-height: 100%;
    letter-spacing: 0.02em;
    text-align: center;
    vertical-align: middle;
    padding: 2px;
    font-family: "Open Sans", sans-serif;
}

.block-a {
    background: #126DB566;
}

.block-b {
    background: #CA203F66;
}

.block-c {
    background: #39B54A66;
}

.lectionary-dow {
    background: #f8f9fa;
    padding: 12px 8px;
    font-size: 0.75rem;
    font-weight: 500;
    font-family: "Open Sans", sans-serif;
    color: #5f6368;
    border-bottom: 1px solid #dadce0;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.lectionary-cell {
    min-height: 120px;
    padding: 8px;
    background: #fff;
    border-right: 1px solid #dadce0;
    border-bottom: 1px solid #dadce0;
    display: flex;
    flex-direction: column;
    background: #F6F7F8;
}

.lectionary-cell:nth-child(7n) {
    border-right: none;
}

.lectionary-cell.is-outside-month {
    background: #fafafa;
    background: #EBECED;
}

.calendar-container {
    padding: 4px;
    background: #EBECED;
}

.lectionary-cell.is-today {
    background: #e8f0fe;
    border: 2px solid #1a73e8;
}

.cell-header {
    margin-bottom: 8px;
}

.day-number {
    font-size: 0.7rem;
    font-weight: 700;
    font-family: "Open Sans", sans-serif;
    font-style: normal;
    color: #000000;
    display: block;
    width: 100%;
    text-align: right;
    padding: 0px 1px;
    box-sizing: border-box;
    border-top: 4px solid transparent;
    margin: -8px -8px 0 -8px;
    width: calc(100% + 16px);
    padding: 4px 8px 0 8px;
}



.year-badge {
    font-size: 0.65rem;
    font-weight: 500;
    font-family: "Open Sans", sans-serif;
    font-style: normal;
    padding: 2px 6px;
    background: #e8f0fe;
    border: 1px solid #1a73e8;

    color: #1a73e8;
}

.cell-events {
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: #ffffff;
    box-shadow: var(--sds-size-depth-0) var(--sds-size-depth-025) var(--sds-size-depth-100) var(--sds-size-depth-0) var(--sds-color-black-100);
    box-shadow: var(--sds-size-depth-0) var(--sds-size-depth-025) var(--sds-size-depth-100) var(--sds-size-depth-0) var(--sds-color-black-200);
}

.event-link {
    color: #000000;
    text-decoration: none;
    font-size: 0.75rem;
    font-weight: 400;
    font-family: "Adobe Garamond Pro", "Adobe Garamond", 'EB Garamond', Garamond, serif;
    font-style: normal;
    line-height: 1.4;
    display: block;
    padding: 4px;
    transition: background 0.2s;
    border-top: .5rem solid transparent;
}

.event-link.event-lff {
    border-top-color: #F0B41A;
}

.event-link.event-rcl {
    border-top-color: #A17BB7;
}

.event-link:hover {
    background: #f1f3f4;
    text-decoration: underline;
}

.lectionary-footer {
    padding: 0px;

}

.lectionary-footer .attribution {
    font-size: 1rem;
    font-weight: 400;
    font-family: "Adobe Garamond Pro", "Adobe Garamond", 'EB Garamond', Garamond, serif;
    color: #000000;
    line-height: 1.6;
}

.attribution p {
    font-size: 1rem;
    font-weight: 400;
    font-family: "Adobe Garamond Pro", "Adobe Garamond", 'EB Garamond', Garamond, serif;
    color: #000000;
    line-height: 1.6;
    padding-left: 2.5rem;
    padding-right: 2.5rem;
}

/* View Toggle Buttons */
.view-label {
    font-family: "Open Sans", sans-serif;
    font-size: 0.85rem;
    color: #333;
    margin-right: 8px;
}

.view-toggle-btn {
    padding: 6px 16px;
    font-family: "Open Sans", sans-serif;
    font-size: 0.85rem;
    border: 1px solid #dadce0;
    background: #fff;
    color: #333;
    cursor: pointer;
    transition: all 0.2s;
}

.view-toggle-btn:first-of-type {
    /*border-radius: 4px 0 0 4px;*/
}

.view-toggle-btn:last-of-type {
    /*border-radius: 0 4px 4px 0;*/
    border-left: none;
}

.view-toggle-btn.active {
    background: #5f6368;
    color: #fff;
    border-color: #5f6368;
}

.view-toggle-btn:hover:not(.active) {
    background: #f1f3f4;
}

/* List View Styles */
.list-container {
    background: #fff;
}

.list-day-group {
    display: flex;
    border-left: 8px solid transparent;
    border-bottom: 1px solid #dadce0;
    padding: 16px 0;
}

.list-day-group.border-year-a {
    border-left-color: #126DB5;
}

.list-day-group.border-year-b {
    border-left-color: #CA203F;
}

.list-day-group.border-year-c {
    border-left-color: #39B54A;
}

.list-date-column {
    width: 100px;
    min-width: 100px;
    padding: 0 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-right: 1px solid #dadce0;
}

.list-date-column.bg-year-a {
    background-color: #126DB566;
}

.list-date-column.bg-year-b {
    background-color: #CA203F66;
}

.list-date-column.bg-year-c {
    background-color: #39B54A66;
}

.list-day-number {
    font-family: "Open Sans", sans-serif;
    font-size: 2rem;
    font-weight: 700;
    color: #333;
    line-height: 1;
}

.list-month-name {
    font-family: "Open Sans", sans-serif;
    font-size: 0.85rem;
    color: #666;
    text-transform: capitalize;
}

.list-year {
    font-family: "Open Sans", sans-serif;
    font-size: 0.85rem;
    color: #666;
}

.list-year-badge {
    font-family: "Open Sans", sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    color: #666;
    margin-top: 8px;
    padding: 2px 6px;
    background: #f1f3f4;

}

.list-events-column {
    flex: 1;
    padding: 0 16px;
}

.list-event-item {
    padding: 12px 0 12px 16px;
    border-left: 4px solid transparent;
    margin-bottom: 8px;
}

.list-event-item.list-event-lff {
    border-left-color: #F0B41A;
}

.list-event-item.list-event-rcl {
    border-left-color: #A17BB7;
}

.list-event-title {
    font-family: "Adobe Garamond Pro", "Adobe Garamond", Garamond, serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: #1a5276;
    text-decoration: none;
    display: block;
    margin-bottom: 4px;
}

.list-event-title:hover {
    text-decoration: underline;
}

.list-read-more {
    font-family: "Open Sans", sans-serif;
    font-size: 0.85rem;
    color: #1a5276;
    text-decoration: none;
    display: block;
    text-align: right;
}

.list-read-more:hover {
    text-decoration: underline;
}

/* List View Filter */
.list-view-filter {
    padding: 16px;
    text-align: center;
    font-family: "Open Sans", sans-serif;
    font-size: 0.9rem;
    color: #333;
}

.list-filter-btn {
    background: none;
    border: none;
    padding: 4px 8px;
    font-family: "Open Sans", sans-serif;
    font-size: 0.9rem;
    color: #1a5276;
    cursor: pointer;
}

.list-filter-btn.active {
    background: #5f6368;
    color: #fff;

}

.list-filter-btn:hover:not(.active) {
    text-decoration: underline;
}

.filter-separator {
    color: #999;
    margin: 0 4px;
}

.loading-message {
    text-align: center;
    padding: 40px;
    font-size: 1.1rem;
    font-weight: 400;
    font-family: "Open Sans", sans-serif;
    color: #5f6368;
}

/* Hide left-navigation on mobile */
@media (max-width: 768px) {
    .left-navigation {
        display: none;
    }
}

/* ==================== LECTIONARY POST ==================== */
.lectionary-post {
    max-width: 900px;
    margin: 0 auto;
    padding: 20px;
}

.post-navigation {
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
}

.back-link {
    color: #1a73e8;
    text-decoration: none;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 8px 12px;

    transition: background 0.2s;
}

.back-link:hover {
    background: #f1f3f4;
}

.post-content {
    background: #fff;
    border: 1px solid #dadce0;

    padding: 30px;
}

.post-header {
    margin-bottom: 30px;
    border-bottom: 2px solid #f1f3f4;
    padding-bottom: 20px;
}

.post-metadata {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 15px;
    flex-wrap: wrap;
}

.post-date {
    font-size: 0.9rem;
    color: #5f6368;
}

.liturgical-year-badge {
    font-size: 0.75rem;
    padding: 4px 10px;
    background: #e8f0fe;
    border: 1px solid #1a73e8;

    color: #1a73e8;
    font-weight: 600;
}

.liturgical-color {
    font-size: 0.75rem;
    padding: 4px 10px;

    font-weight: 600;
    border: 1px solid rgba(0, 0, 0, 0.2);
    cursor: help;
    transition: transform 0.1s ease;
}

/*
            .liturgical-color:hover {
                transform: scale(1.05);
            }
*/
.post-title {
    font-size: 2rem;
    margin: 0 0 15px 0;
    color: #212529;
    line-height: 1.3;
}

.post-description {
    font-size: 1.1rem;
    color: #5f6368;
    font-style: italic;
    margin: 10px 0;
}

.post-season {
    font-size: 0.95rem;
    color: #5f6368;
    margin: 10px 0;
}

.post-body {
    font-size: 1.25rem;
    line-height: 1.8;
    color: #212529;
    margin-bottom: 30px;
    font-family: "Adobe Garamond Pro", "Adobe Garamond", 'EB Garamond', Garamond, serif;
}

.post-body p {
    margin: 1em 0;
}

.post-body p sup {
    font-weight: bold;
}

.post-body h2 {
    font-size: 1.5rem;
    margin-top: 1.5em;
    margin-bottom: 0.5em;
    color: #212529;
}

.post-body h3 {
    font-size: 1.25rem;
    margin-top: 1.25em;
    margin-bottom: 0.5em;
    color: #212529;
}

.scripture-readings {
    margin: 30px 0;
    padding: 20px;
    background: #f8f9fa;
    border-left: 4px solid #1a73e8;
    border-radius: 4px;
}

.scripture-readings h2 {
    font-size: 1.25rem;
    margin-top: 0;
    margin-bottom: 15px;
    color: #212529;
}

.readings-content {
    font-size: 0.95rem;
    line-height: 1.7;
    color: #5f6368;
}

.post-notes {
    margin: 30px 0;
    padding: 20px;
    background: #fffbf0;
    border-left: 4px solid #ffd700;
    border-radius: 4px;
}

.post-notes h3 {
    font-size: 1.1rem;
    margin-top: 0;
    margin-bottom: 10px;
    color: #212529;
}

.post-notes p {
    font-size: 0.9rem;
    color: #5f6368;
    margin: 0;
}

.post-footer {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 2px solid #f1f3f4;
}

.lectionary-info {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.lectionary-type {
    font-size: 0.85rem;
    padding: 4px 10px;
    background: #f1f3f4;
    border-radius: 4px;
    color: #5f6368;
    font-weight: 600;
}

.year-indicator {
    font-size: 0.75rem;
    padding: 3px 8px;
    background: #e8f0fe;
    border: 1px solid #1a73e8;
    border-radius: 4px;
    color: #1a73e8;
}

.attribution {
    font-size: 0.85rem;
    color: #80868b;
    line-height: 1.6;
    font-family: "Adobe Garamond Pro", "Adobe Garamond", 'EB Garamond', Garamond, serif;
}

.attribution p {
    margin: 8px 0;
}

/* ==================== SOCIAL MEDIA SECTION ==================== */
.social-media-section {
    margin: 40px 0;
    padding: 30px 0;
    border-top: 2px solid #f1f3f4;
}

.social-media-section h2 {
    font-size: 1.5rem;
    font-weight: 400;
    margin: 0 0 20px 0;
    color: #212529;
}

.social-media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    margin-top: 24px;
}

.social-media-item {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.social-media-item h3 {
    font-size: 1rem;
    font-weight: 500;
    margin: 0;
    color: #212529;
}

.social-media-image {
    width: 100%;
    height: auto;
    border-radius: 8px;
    border: 1px solid #dadce0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s, box-shadow 0.2s;
    cursor: pointer;
}

.social-media-image:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.social-media-caption {
    font-size: 0.9rem;
    color: #5f6368;
    line-height: 1.5;
    font-style: italic;
}

/* Instagram-specific styles */
.instagram-post {
    background: #fff;
    border: 1px solid #dadce0;
    border-radius: 8px;
    padding: 16px;
}

.instagram-image {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 4px;
    margin-bottom: 12px;
}

.instagram-stories {
    aspect-ratio: 9 / 16;
    object-fit: cover;
}

/* Sample text styling */
.sample-text {
    background: #f8f9fa;
    padding: 16px;
    border-left: 4px solid #1a73e8;
    border-radius: 4px;
    margin: 20px 0;
}

.sample-text p {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #212529;
    margin: 8px 0;
}

.sample-text p:first-child {
    font-weight: 500;
    color: #5f6368;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.alert {
    padding: 15px 20px;
    border-radius: 6px;
    margin-bottom: 20px;
}

.alert-danger {
    background: #fef0f0;
    border: 1px solid #f5c6cb;
    color: #721c24;
}

.alert-warning {
    background: #fff3cd;
    border: 1px solid #ffeaa7;
    color: #856404;
}

/* ==================== WORDPRESS BLOCK STYLES ==================== */
/* These styles handle content from WordPress (Episcopal Church CMS) */
/* Figure elements (WordPress image blocks) */
figure {
    margin: 1.5em 0;
    padding: 0;
}

figure img {
    display: block;
    max-width: 100%;
    height: auto;
}

figcaption {
    font-size: 0.9rem;
    color: #5f6368;
    font-style: italic;
    margin-top: 8px;
    padding: 0 8px;
    line-height: 1.5;
}

/* WordPress block image */
.wp-block-image {
    margin: 1.5em 0;
    text-align: center;
}

.wp-block-image img {
    max-width: 100%;
    height: auto;
    display: inline-block;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Size variants */
.wp-block-image.size-thumbnail img {
    max-width: 150px;
}

.wp-block-image.size-medium img {
    max-width: 300px;
}

.wp-block-image.size-large img {
    max-width: 100%;
}

.wp-block-image.size-full img {
    width: 100%;
}

/* Alignment options */
.wp-block-image.alignleft {
    float: left;
    margin: 0.5em 1.5em 1em 0;
    text-align: left;
}

.wp-block-image.alignright {
    float: right;
    margin: 0.5em 0 1em 1.5em;
    text-align: right;
}

.wp-block-image.aligncenter {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

/* Specific image styling for posts */
.post-body .wp-block-image img {
    border: 1px solid #dadce0;
    transition: transform 0.2s, box-shadow 0.2s;
}

.post-body .wp-block-image img:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* WordPress gallery blocks */
.wp-block-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
    margin: 1.5em 0;
    padding: 0;
    list-style: none;
}

.wp-block-gallery figure {
    margin: 0;
}

.wp-block-gallery img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid #dadce0;
}

/* WordPress quote blocks */
.wp-block-quote {
    margin: 1.5em 0;
    padding: 1em 1.5em;
    border-left: 4px solid #1a73e8;
    background: #f8f9fa;
    font-style: italic;
}

.wp-block-quote cite {
    display: block;
    margin-top: 1em;
    font-size: 0.9rem;
    color: #5f6368;
    font-style: normal;
}

/* WordPress pullquote */
.wp-block-pullquote {
    margin: 2em 0;
    padding: 2em;
    border-top: 4px solid #1a73e8;
    border-bottom: 4px solid #1a73e8;
    text-align: center;
}

.wp-block-pullquote blockquote {
    margin: 0;
    font-size: 1.5rem;
    line-height: 1.6;
    font-style: italic;
}

/* WordPress video blocks */
.wp-block-video {
    margin: 1.5em 0;
}

.wp-block-video video {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

/* WordPress embed blocks */
.wp-block-embed {
    margin: 1.5em 0;
}

.wp-block-embed iframe {
    max-width: 100%;
    border-radius: 8px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .lectionary-page {
        padding: 10px;
    }

    .lectionary-header h1 {
        font-size: 1.5rem;
    }

    .current-month {
        font-size: 1.2rem;
    }

    .lectionary-cell {
        min-height: 80px;
        padding: 4px;
    }

    .event-link {
        font-size: 0.7rem;
    }

    .post-content {
        padding: 20px;
    }

    .post-title {
        font-size: 1.5rem;
    }

    .post-description {
        font-size: 1rem;
    }

    .social-media-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .social-media-section h2 {
        font-size: 1.25rem;
    }

    /* WordPress blocks - mobile adjustments */
    .wp-block-image.alignleft,
    .wp-block-image.alignright {
        float: none;
        margin: 1.5em 0;
        text-align: center;
    }

    .wp-block-pullquote blockquote {
        font-size: 1.2rem;
    }

    .wp-block-gallery {
        grid-template-columns: 1fr;
    }

    figure {
        margin: 1em 0;
    }

    /* Navigation responsive */
    .lectionary-navigation {
        flex-direction: column;
        gap: 15px;
        padding: 12px;
    }

    .nav-selectors {
        width: 100%;
        justify-content: center;
    }

    .nav-select {
        min-width: 100px;
        font-size: 0.85rem;
        padding: 6px 10px;
        padding-right: 28px;
    }

    .nav-buttons {
        width: 100%;
        justify-content: center;
    }

    .current-month {
        font-size: 1.2rem;
        order: -1;
    }

    /* Hide view toggle on mobile - always use list view */
    .view-toggle-btn,
    .view-label {
        display: none;
    }

    /* List view mobile adjustments */
    .list-day-group {
        flex-direction: column;
    }

    .list-date-column {
        width: 100%;
        flex-direction: row;
        justify-content: flex-start;
        gap: 12px;
        padding: 8px 16px;
        border-right: none;
        border-bottom: 1px solid #dadce0;
    }

    .list-day-number {
        font-size: 1.5rem;
    }

    .list-events-column {
        padding: 12px 16px;
    }

    .list-day-group {
        flex-direction: row;
    }

    @media (max-width: 768px) {
        .list-date-column {
            width: 4rem;
            flex-direction: column;
            gap: 4px;
        }
    }
}

/* Tablet adjustments */
@media (max-width: 1024px) and (min-width: 769px) {

    /* Hide view toggle on tablet - always use list view */
    .view-toggle-btn,
    .view-label {
        display: none;
    }

    /* Hide related sidebar on tablet */
    .content-sidebar,
    .col-related {
        display: none;
    }

    /* Make calendar full width since related is hidden */
    .col-calender {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .app-main {
        padding: 0px;
    }

    .container {
        padding: 0px;
    }

    .lectionary-navigation {
        justify-content: center;
    }

    .lectionary-navigation.nav-buttons {
        display: none;
    }
}

/* ==================== SEARCH PAGE ==================== */
.search-page {
    max-width: 900px;
    margin: 0 auto;
    padding: 20px;
}

.search-header h1 {
    font-family: "Adobe Garamond Pro", "Adobe Garamond", Garamond, serif;
    font-size: 2.5rem;
    color: #126DB5;
    margin-bottom: 24px;
}

.search-box-container {
    margin-bottom: 30px;
}

.search-input-wrapper {
    display: flex;
    gap: 10px;
    background: #F6F7F8;
    padding: 1.5rem 3rem 1.5rem 3rem;
}

.search-input {
    flex: 1;
    padding: 12px 16px;
    font-size: 1rem;
    font-family: "Open Sans", sans-serif;
    border: 2px solid #ddd;

    transition: border-color 0.2s;
}

.search-input:focus {
    outline: none;
    border-color: #126DB5;
}

/* Figma "Search Button": 54 x 44, Link fill, centred 24px white glyph.
   Icon-only, so no padding — 0.5rem/1rem gutters left too little room for the
   24px glyph inside the fixed 54px width. */
.search-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 44px;
    padding: 0;
    flex-shrink: 0;
    background-color: var(--tec-link);
    color: #FFFFFF;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s;
}

.search-button:hover {
    background-color: #0d5a96;
}

.search-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px;
    color: #666;
}

.spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #126DB5;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 16px;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.search-results-header {
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #e0e0e0;
}

.results-count {
    font-family: "Open Sans", sans-serif;
    font-size: 1rem;
    color: #666;
}

.results-count strong {
    color: #333;
}

.search-results-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.search-result-item {
    padding: 0.5rem 1rem 0.5rem 1rem;
    background: #F6F7F8;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    transition: box-shadow 0.2s, border-color 0.2s;
}

.search-result-item:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-color: #126DB5;
}

.result-source {
    display: inline-block;
    padding: .625rem 1rem .625rem 1rem;
    font-size: 1rem;
    font-family: "Open Sans", sans-serif;
    font-weight: 400;
    letter-spacing: 0.02em;
    line-height: 100%;
    margin-bottom: 10px;
    gap: 0.625rem;
}

.source-wordpress {
    background-color: #CA203F;
    color: #FFFFFF;
}

.source-lectionary {
    background-color: #00843D;
    color: #FFFFFF;
}

.result-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    margin-top: 0.5rem;
}

.result-title {
    margin: 0 0 10px 0;
    font-family: "Adobe Garamond Pro", "Adobe Garamond", Garamond, serif;
    font-size: 2.125rem;
    line-height: 1.4;
    color: #10529E;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.result-title a {
    color: #126DB5;
    text-decoration: none;
}

.result-title a:hover {
    text-decoration: underline;
}

.result-summary {
    font-family: "Adobe Garamond Pro", "Adobe Garamond", Garamond, serif;
    font-size: 1rem;
    line-height: 1.6;
    color: #444;
    margin: 0 0 12px 0;
}

.result-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    font-family: "Open Sans", sans-serif;
    font-size: 0.85rem;
    color: #888;
}

.result-date {
    color: #666;
}

.result-link {
    color: #39B54A;
    text-decoration: none;
    word-break: break-all;
}

.result-link:hover {
    text-decoration: underline;
}

/* Pagination */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #e0e0e0;
}

.page-btn {
    padding: 8px 16px;
    font-family: "Open Sans", sans-serif;
    font-size: 0.9rem;
    color: #126DB5;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
}

.page-btn:hover:not(:disabled) {
    background-color: #f0f7fc;
    border-color: #126DB5;
}

.page-btn.active {
    background-color: #126DB5;
    color: white;
    border-color: #126DB5;
}

.page-btn:disabled {
    color: #ccc;
    cursor: not-allowed;
}

.page-info {
    text-align: center;
    margin-top: 12px;
    font-family: "Open Sans", sans-serif;
    font-size: 0.85rem;
    color: #888;
}

/* Search page responsive */
@media (max-width: 768px) {
    .search-page {
        padding: 15px;
    }

    .search-header h1 {
        font-size: 1.8rem;
    }

    .search-input-wrapper {
        flex-direction: row;
    }

    .search-button {
        justify-content: center;
    }

    .result-title {
        font-size: 1.2rem;
    }

    .result-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .pagination {
        flex-wrap: wrap;
    }
}

/* ==================== SEARCH FILTERS ==================== */
.search-filters {
    background: #F6F7F8;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    margin: 20px 0;
}

.filter-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: #f0f0f0;
    cursor: pointer;
    font-family: "Open Sans", sans-serif;
    font-weight: 600;
    font-size: 1rem;
    color: #333;
    border-bottom: 1px solid #e0e0e0;
}

.filter-header:hover {
    background: #e8e8e8;
}

.filter-toggle {
    font-size: 0.75rem;
    color: #666;
}

.filter-content {
    padding: 12px 16px;
}

.filter-item {
    margin-bottom: 8px;
}

.filter-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-family: "Open Sans", sans-serif;
    font-size: 0.95rem;
    color: #333;
    padding: 4px 0;
}

.filter-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #126DB5;
    cursor: pointer;
}

.filter-checkbox:hover {
    color: #126DB5;
}

.filter-section {
    margin-top: 8px;
}

.filter-section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    cursor: pointer;
    font-family: "Open Sans", sans-serif;
    font-size: 0.95rem;
    color: #333;
}

.filter-section-header:hover {
    color: #126DB5;
}

.filter-section-title {
    font-weight: 600;
}

.filter-section-content {
    padding-left: 20px;
    padding-bottom: 8px;
}

/* Search Results Info & Sort */
.search-results-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    margin-bottom: 16px;
    border-bottom: 1px solid #e0e0e0;
}

.results-count-label {
    font-family: "Open Sans", sans-serif;
    font-size: 0.95rem;
    color: #666;
}

.results-count-label strong {
    color: #333;
}

.sort-buttons {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: "Open Sans", sans-serif;
    font-size: 0.9rem;
    color: #666;
}

.sort-btn {
    padding: 6px 12px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-family: "Open Sans", sans-serif;
    font-size: 0.85rem;
    color: #666;
    cursor: pointer;
    transition: all 0.2s;
}

.sort-btn:hover {
    border-color: #126DB5;
    color: #126DB5;
}

.sort-btn.active {
    background: #126DB5;
    color: #fff;
    border-color: #126DB5;
}

/* Result Meta - flexbox container for badges */
.result-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.badges-left {
    display: flex;
    align-items: center;
    gap: 6px;
}

.badges-right {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

/* Result Badges */
.result-badge {
    display: inline-block;
    padding: 4px 10px;
    font-size: 0.85rem;
    font-family: "Open Sans", sans-serif;
    font-weight: 500;

    white-space: nowrap;
}

/* Year badges using legend styling */
.badge-year-a {
    background-color: #126DB566;

    color: #000;
    padding: 2px 8px;
    font-weight: 600;
    font-family: "Open Sans", sans-serif;
    text-align: center;
}

.badge-year-b {
    background-color: #CA203F66;

    color: #000;
    padding: 2px 8px;
    font-weight: 600;
    font-family: "Open Sans", sans-serif;
    text-align: center;
}

.badge-year-c {
    background-color: #39B54A66;

    color: #000;
    padding: 2px 8px;
    font-weight: 600;
    font-family: "Open Sans", sans-serif;
    text-align: center;
}

/* Lesser Feasts and Fasts - using legend color-block styling */
.badge-lff {
    background-color: #F0B41A;
    color: #000;
    padding: 2px 12px;
    font-weight: 600;
    font-family: "Open Sans", sans-serif;
    font-size: 0.75rem;
}

/* Revised Common Lectionary - using legend color-block styling */
.badge-rcl {
    background-color: #A17BB7;
    color: #fff;
    padding: 2px 12px;
    font-weight: 600;
    font-family: "Open Sans", sans-serif;
    font-size: 0.75rem;
}

/* Lectionary post type badge */
.badge-lectionary {
    background-color: #00843D;
    color: #fff;
    padding: 2px 12px;
    font-weight: 600;
    font-family: "Open Sans", sans-serif;
    font-size: 0.75rem;
}

.badge-category {
    background-color: #CA203F;
    color: #fff;
}

.result-date {
    font-family: "Open Sans", sans-serif;
    font-size: 0.9rem;
    color: #888;
    margin: 0 0 8px 0;
}

.no-results {
    padding: 40px;
    text-align: center;
    font-family: "Open Sans", sans-serif;
    color: #666;
}

.no-results p {
    font-size: 1rem;
}

/* Filter responsive */
@media (max-width: 768px) {
    .search-results-info {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
    }

    .filter-section-content {
        padding-left: 12px;
    }
}

/* Gutenberg Columns */
.post-body .wp-block-columns,
.post-content .wp-block-columns {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin: 1.5rem 0;
}

.post-body .wp-block-column,
.post-content .wp-block-column {
    flex: 1 1 250px;
    min-width: 0;
}

.post-body .wp-block-column img,
.post-content .wp-block-column img {
    width: 100%;
    height: auto;
    display: block;
}

/* WordPress Columns Block */
.wp-block-columns {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin: 1.5rem 0;
}

.wp-block-column {
    flex: 1 1 250px;
    min-width: 0;
}

/* Mobile */
@media (max-width: 768px) {
    .wp-block-columns {
        flex-direction: column;
    }
}

.post-body .wp-block-columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}

.post-body .wp-block-columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin: 1.5rem 0;
}

.post-body .wp-block-column {
    min-width: 0;
}

.post-body .wp-block-column img {
    width: 100%;
    height: auto;
    display: block;
}

.post-body .wp-block-image {
    margin: 0;
}

/* ==========================================
   REVERSE LECTIONARY STYLES
   ========================================== */

.reverse-lectionary-description {
    margin-bottom: var(--spacing-lg);
    color: var(--tec-muted);
    font-size: 1rem;
    line-height: 1.6;
}

.reverse-lectionary-tree {
    margin-top: var(--spacing-md);
    border: 1px solid var(--lc-border);
    border-radius: 4px;
    background-color: var(--lc-bg);
}

.tree-node {
    display: flex;
    align-items: center;
    padding: var(--spacing-sm) var(--spacing-md);
    cursor: pointer;
    transition: background-color 0.15s ease;
    user-select: none;
}

.tree-node:hover {
    background-color: var(--lc-cell-bg-muted);
}

.tree-toggle {
    width: 20px;
    margin-right: var(--spacing-xs);
    color: var(--tec-cool-2);
    font-size: 0.75rem;
    flex-shrink: 0;
}

.tree-level-1 {
    padding-left: calc(var(--spacing-md) + 20px);
}

.tree-level-2 {
    padding-left: calc(var(--spacing-md) + 40px);
}

.tree-level-3 {
    padding-left: calc(var(--spacing-md) + 60px);
}

.tree-level-4,
.tree-post {
    padding: var(--spacing-sm) var(--spacing-md);
    padding-left: calc(var(--spacing-md) + 80px);
}

.scripture-type-node {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--tec-black);
}

.book-node {
    font-weight: 600;
    color: var(--tec-link);
}

.chapter-node {
    font-weight: 500;
    color: var(--tec-muted);
}

.citation-node {
    font-weight: 500;
    color: var(--tec-black);
}

.reverse-lectionary-link {
    color: var(--tec-link);
    text-decoration: none;
    transition: color 0.2s ease;
}

.reverse-lectionary-link:hover {
    color: var(--tec-cool-2);
    text-decoration: underline;
}

.tree-scripture-type {
    border-bottom: 1px solid var(--lc-border);
}

.tree-scripture-type:last-child {
    border-bottom: none;
}

.tree-book {
    border-top: 1px solid var(--lc-border);
    background-color: var(--lc-cell-bg-muted);
}

.tree-chapter {
    border-top: 1px solid var(--lc-border);
    background-color: var(--lc-bg);
}

.tree-citation-group {
    border-top: 1px solid var(--lc-border);
    background-color: var(--lc-cell-bg-muted);
}

.tree-post {
    border-top: 1px solid var(--lc-border);
    background-color: var(--lc-bg);
}