/*
Theme Name: Love Culture Assembly
Theme URI: https://loveculture.example.com/
Author: Love Culture Assembly
Author URI: https://loveculture.example.com/
Description: A modern block theme for Love Culture Assembly. Spreading the fire of his love. Includes sermons, events, projects, service times, giving, and livestream blocks out of the box.
Requires at least: 6.4
Tested up to: 6.5
Requires PHP: 7.4
Version: 0.1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: love-culture-assembly
Tags: block-theme, full-site-editing, church, non-profit, blog, custom-colors, custom-logo, custom-menu, featured-images, full-width-template, wide-blocks, block-patterns, rtl-language-support
*/

:root {
    --lca-radius-sm: 6px;
    --lca-radius-md: 12px;
    --lca-radius-lg: 20px;
    --lca-shadow-sm: 0 1px 2px rgba(17, 17, 17, 0.06), 0 1px 3px rgba(17, 17, 17, 0.08);
    --lca-shadow-md: 0 4px 12px rgba(17, 17, 17, 0.08), 0 2px 4px rgba(17, 17, 17, 0.06);
    --lca-shadow-lg: 0 20px 40px rgba(17, 17, 17, 0.12), 0 8px 16px rgba(17, 17, 17, 0.08);
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.wp-block-button__link {
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.wp-block-button__link:hover {
    transform: translateY(-1px);
    box-shadow: var(--lca-shadow-md);
}

.lca-card {
    border-radius: var(--lca-radius-md);
    overflow: hidden;
    background: var(--wp--preset--color--white);
    box-shadow: var(--lca-shadow-sm);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.lca-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--lca-shadow-lg);
}

.lca-eyebrow {
    font-family: var(--wp--preset--font-family--jost);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--wp--preset--color--brand-red);
}

.lca-gradient-text {
    background: var(--wp--preset--gradient--brand-fire);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.lca-sermon-thumb {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}
.lca-sermon-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.lca-sermon-thumb::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(17, 17, 17, 0) 40%, rgba(17, 17, 17, 0.7) 100%);
    pointer-events: none;
}

.lca-play-badge {
    position: absolute;
    left: 16px;
    bottom: 16px;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--wp--preset--gradient--brand-fire);
    color: #fff;
    font-family: var(--wp--preset--font-family--jost);
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.04em;
}

.lca-nav-cta .wp-block-button__link {
    padding-block: 0.55rem;
    padding-inline: 1.1rem;
    font-size: 0.9rem;
}

/* ---------- Navigation bar ---------- */

/* Desktop: keep nav items from hogging vertical space and ensure they line up */
.wp-block-navigation .wp-block-navigation-item__content {
    padding: 0.5rem 0;
    font-weight: 500;
    font-size: 0.95rem;
    color: var(--wp--preset--color--brand-black);
    transition: color 0.15s ease;
}
.wp-block-navigation .wp-block-navigation-item__content:hover,
.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content {
    color: var(--wp--preset--color--brand-red);
}

/* Hamburger button — visible on mobile */
.wp-block-navigation__responsive-container-open {
    color: var(--wp--preset--color--brand-black);
    padding: 0.5rem;
}
.wp-block-navigation__responsive-container-open:hover {
    color: var(--wp--preset--color--brand-red);
}
.wp-block-navigation__responsive-container-open svg {
    width: 28px;
    height: 28px;
}

/* Mobile overlay menu: full-screen, dark, branded.
   position/inset are set explicitly so the overlay escapes any ancestor that
   might otherwise contain it. Overflow-y:auto lets long nav lists scroll
   within the full viewport rather than getting clipped. */
.wp-block-navigation__responsive-container.is-menu-open {
    background: var(--wp--preset--color--brand-black) !important;
    padding: 2rem 1.5rem !important;
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-width: none !important;
    overflow-y: auto !important;
    z-index: 10000 !important;
}

/* The sticky header uses backdrop-filter, which creates a containing block for
   position:fixed descendants — that's what was trapping the mobile overlay at
   nav-bar width. While the menu is open (WP adds has-modal-open to <body>),
   drop the filter so the overlay can cover the full viewport. */
body.has-modal-open header.wp-block-template-part {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    position: static !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
    justify-content: center;
    padding-top: 3rem;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
    gap: 0.5rem;
    align-items: stretch;
    width: 100%;
    max-width: 440px;
    margin: 0 auto;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:last-child {
    border-bottom: 0;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
    font-family: var(--wp--preset--font-family--jost);
    font-size: 1.5rem;
    font-weight: 500;
    color: #fff;
    padding: 1rem 0.25rem;
    width: 100%;
    display: block;
    transition: transform 0.15s ease, color 0.15s ease;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover {
    color: var(--wp--preset--color--brand-orange);
    transform: translateX(4px);
}

/* Close button inside overlay */
.wp-block-navigation__responsive-container-close {
    color: #fff !important;
    padding: 0.5rem;
    top: 1rem !important;
    right: 3rem !important;
}
.wp-block-navigation__responsive-container-close svg {
    width: 28px;
    height: 28px;
}

/* Header: stop the nav from crashing into the logo by giving the right cluster its own min-width 0 */
.wp-block-template-part > header .wp-block-group {
    min-width: 0;
}

/* On narrower desktops (< 1100px), tighten nav even more before hamburger kicks in */
@media (min-width: 782px) and (max-width: 1099px) {
    .wp-block-navigation {
        --wp--preset--spacing--blockGap: 0.75rem;
    }
    .wp-block-navigation .wp-block-navigation-item__content {
        font-size: 0.88rem;
    }
    .lca-nav-cta .wp-block-button__link {
        padding-inline: 0.9rem;
        font-size: 0.85rem;
    }
}

/* ---------- Sticky header + liquid-glass feel ---------- */

header.wp-block-template-part {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(255, 255, 255, 0.72) !important;
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    backdrop-filter: blur(18px) saturate(180%);
    border-bottom: 1px solid rgba(17, 17, 17, 0.06);
    transition: background 0.2s ease, box-shadow 0.2s ease;
}

/* Force the inner wp:group inside the header to be transparent so the glass effect shows through */
header.wp-block-template-part > .wp-block-group,
header.wp-block-template-part header.wp-block-group,
header.wp-block-template-part .wp-block-group.has-white-background-color {
    background: transparent !important;
    border-bottom: 0 !important;
}

/* Fallback for browsers without backdrop-filter */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    header.wp-block-template-part {
        background: rgba(255, 255, 255, 0.96) !important;
    }
}

/* Remove the block-gap between the sticky header and whatever main content comes next */
header.wp-block-template-part + main,
header.wp-block-template-part + .wp-block-group,
header.wp-block-template-part + * {
    margin-top: 0 !important;
}

/* Remove the block-gap between main and the footer template-part, globally.
   Patterns already carry their own bottom padding for breathing room. */
main + .wp-block-template-part,
main + footer,
.wp-site-blocks > main + footer,
.wp-site-blocks > main + .wp-block-template-part,
.wp-block-group + footer.wp-block-template-part,
footer.wp-block-template-part,
.wp-site-blocks > footer {
    margin-top: 0 !important;
}

/* When a page ends with a full-width section that carries its own background +
   padding (most of our patterns do), the template's own bottom padding on <main>
   becomes visible white space between that section and the footer. Collapse it.
   Why :has(): the default page.html main has padding-bottom via inline style;
   this wins because it's !important. */
main.wp-block-group:has(> .wp-block-post-content > .wp-block-group.alignfull:last-child),
main.wp-block-group:has(> .wp-block-post-content > .wp-block-columns.alignfull:last-child),
main.wp-block-group:has(> .wp-block-post-content > .wp-block-cover.alignfull:last-child) {
    padding-bottom: 0 !important;
}

/* And let that trailing full-width section sit flush against the footer instead
   of carrying its own 6rem bottom padding. */
main.wp-block-group:has(> .wp-block-post-content > .wp-block-group.alignfull:last-child) > .wp-block-post-content > .wp-block-group.alignfull:last-child,
main.wp-block-group:has(> .wp-block-post-content > .wp-block-columns.alignfull:last-child) > .wp-block-post-content > .wp-block-columns.alignfull:last-child {
    padding-bottom: var(--wp--preset--spacing--50) !important;
}

/* Zero out main's own bottom margin/padding on the Page (no title) template so
   nothing hangs below the content before the footer. */
main.lca-flush-page,
main.lca-flush-page > .wp-block-post-content {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* If the last block inside post-content has a bottom margin from theme defaults,
   neutralize it so the section's own padding is the only space before the footer. */
.wp-block-post-content > :last-child {
    margin-bottom: 0 !important;
}

/* When a section/pattern is the last child before the footer, it shouldn't keep
   its full 6rem "breathing room" at the bottom — the footer's own padding carries
   the visual weight. Reduce to a light 1.5rem. */
.wp-block-post-content > :last-child.wp-block-group,
.wp-block-post-content > :last-child.wp-block-columns,
main.lca-flush-page > .wp-block-post-content > :last-child {
    padding-bottom: var(--wp--preset--spacing--30) !important;
}

/* Also handle empty paragraph blocks that WP sometimes leaves at the end of content */
.wp-block-post-content > p:empty:last-child,
.wp-block-post-content > .wp-block-paragraph:empty:last-child {
    display: none !important;
}

/* Nuclear: zero the block-gap at the site root so nothing squeezes between
   header, main and footer regardless of what WP is doing internally. */
.wp-site-blocks {
    --wp--style--block-gap: 0 !important;
}
.wp-site-blocks > * + * {
    margin-block-start: 0 !important;
    margin-top: 0 !important;
}

/* ---------- Mobile/tablet header fixes (< 768px) ---------- */
@media (max-width: 767px) {
    /* Logo shrinks so the hamburger and brand name share the bar comfortably */
    .wp-block-site-logo img,
    .wp-block-site-logo a img {
        max-width: 140px !important;
        width: auto !important;
        height: auto !important;
    }

    /* Hide the header "Watch Live" CTA on phones/tablets — it crowds the bar. */
    header .lca-nav-cta,
    header .wp-block-buttons.lca-nav-cta {
        display: none !important;
    }

    /* Tighter header padding so the hamburger doesn't get clipped */
    header.wp-block-template-part > .wp-block-group,
    header.wp-block-template-part header.wp-block-group {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    /* Hide the inline nav items below 768px so only the hamburger shows */
    .wp-block-navigation .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container {
        display: none !important;
    }

    /* Show the hamburger button ONLY when the menu is closed.
       When WP adds has-modal-open to <body>, the overlay is up — hide the hamburger. */
    .wp-block-navigation__responsive-container-open {
        display: flex !important;
        align-items: center;
        padding: 0.5rem !important;
    }
    body.has-modal-open .wp-block-navigation__responsive-container-open {
        display: none !important;
    }
}

/* ---------- Active page indicator on main nav ---------- */

/* Current page: brand-red text + underline using text-decoration (reliable in flex layouts) */
.wp-block-navigation a.lca-nav-current,
.wp-block-navigation a[aria-current],
.wp-block-navigation .current-menu-item > a,
.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content,
.wp-block-navigation .wp-block-navigation-item.current-menu-item .wp-block-navigation-item__content {
    color: var(--wp--preset--color--brand-red) !important;
    font-weight: 600 !important;
    text-decoration: underline !important;
    text-decoration-color: var(--wp--preset--color--brand-red) !important;
    text-decoration-thickness: 2px !important;
    text-underline-offset: 8px !important;
}

/* In the mobile overlay, use orange and no underline for cleaner stack */
.wp-block-navigation__responsive-container.is-menu-open a.lca-nav-current,
.wp-block-navigation__responsive-container.is-menu-open a[aria-current],
.wp-block-navigation__responsive-container.is-menu-open .current-menu-item > a,
.wp-block-navigation__responsive-container.is-menu-open .current-menu-item > .wp-block-navigation-item__content {
    color: var(--wp--preset--color--brand-orange) !important;
    text-decoration: none !important;
}

/* Flush page layout: remove block-gap above and below the main element
   so a full-width card sits directly against the header and footer. */
main.lca-flush-page {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}
main.lca-flush-page + .wp-block-template-part,
main.lca-flush-page + footer {
    margin-top: 0 !important;
}
.wp-block-template-part:has(+ main.lca-flush-page),
header.wp-block-template-part:has(+ main.lca-flush-page) {
    margin-bottom: 0 !important;
}

.lca-hero-gradient {
    position: relative;
    isolation: isolate;
}

.wp-block-cover > .wp-block-cover__image-background {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    z-index: 0 !important;
}

.lca-bank-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding-block: 0.9rem;
    border-bottom: 1px solid var(--wp--preset--color--gray-light);
    font-family: var(--wp--preset--font-family--jost);
}
.lca-bank-row:last-child { border-bottom: 0; }
.lca-bank-row strong {
    color: var(--wp--preset--color--gray);
    font-weight: 500;
}
.lca-bank-row span {
    font-weight: 600;
    color: var(--wp--preset--color--brand-black);
    font-variant-numeric: tabular-nums;
}

/* Account-number row: value sits next to a small copy pill. */
.lca-copy-field {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
}
.lca-copy-value {
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
    color: var(--wp--preset--color--brand-black);
}
/* Defence against mobile browsers that still autolink the number to tel: —
   inherit colour and strip the underline so it reads as plain text. */
.lca-copy-value a,
.lca-copy-value a[href^="tel:"] {
    color: inherit !important;
    text-decoration: none !important;
    pointer-events: none;
}
.lca-copy-btn {
    appearance: none;
    border: 1px solid var(--wp--preset--color--gray-light);
    background: #fff;
    color: var(--wp--preset--color--brand-red);
    font-family: var(--wp--preset--font-family--jost);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.lca-copy-btn:hover {
    background: var(--wp--preset--color--brand-red);
    color: #fff;
    border-color: var(--wp--preset--color--brand-red);
    transform: translateY(-1px);
}
.lca-copy-btn:focus-visible {
    outline: 2px solid var(--wp--preset--color--brand-orange);
    outline-offset: 2px;
}
.lca-copy-btn.is-copied,
.lca-copy-btn.is-copied:hover {
    background: #1f9d55;
    color: #fff;
    border-color: #1f9d55;
    transform: none;
}

/* Footer logo: cap width so it doesn't blow out the column on wide viewports
   and stays crisp on small phones. The logo art is white-on-transparent so
   it sits naturally on the brand-black footer. */
.lca-footer-logo {
    margin-left: 0;
    margin-right: 0;
}
.lca-footer-logo img {
    max-width: 240px;
    width: 100%;
    height: auto;
    display: block;
}

/* ---------- Shared LCA button utility ---------- */
/* Used by the sermon + event shortcodes where dynamic hrefs come from
   per-post meta. Matches the tone of the theme's wp-block-button so the
   two visual systems read as one. */
.lca-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1.2rem;
    border-radius: 999px;
    font-family: var(--wp--preset--font-family--jost);
    font-weight: 500;
    font-size: 0.9rem;
    letter-spacing: 0.02em;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.lca-btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--lca-shadow-md);
    text-decoration: none;
}
.lca-btn--lg {
    padding: 0.95rem 1.6rem;
    font-size: 0.95rem;
}
.lca-btn--fire {
    background: var(--wp--preset--gradient--brand-fire);
    color: #fff !important;
}
.lca-btn--fire:hover {
    color: #fff !important;
}
.lca-btn--outline {
    background: transparent;
    color: var(--wp--preset--color--brand-black) !important;
    border-color: var(--wp--preset--color--gray-light);
}
.lca-btn--outline:hover {
    border-color: var(--wp--preset--color--brand-red);
    color: var(--wp--preset--color--brand-red) !important;
}
.lca-btn--dark {
    background: var(--wp--preset--color--brand-black);
    color: #fff !important;
}
.lca-btn--dark:hover {
    background: var(--wp--preset--color--gray-dark);
    color: #fff !important;
}
/* Liquid-glass: translucent + blurred. Base style sits on a light card.
   The rule below flips the tint + text colour when the button is
   nested inside a dark hero (brand-black background or wp:cover), so
   the same variant reads well in both contexts. */
.lca-btn--glass {
    background: rgba(17, 17, 17, 0.045);
    color: var(--wp--preset--color--brand-black) !important;
    border: 1px solid rgba(17, 17, 17, 0.09);
    -webkit-backdrop-filter: blur(14px) saturate(180%);
    backdrop-filter: blur(14px) saturate(180%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.lca-btn--glass:hover {
    background: rgba(17, 17, 17, 0.08);
    border-color: rgba(196, 30, 58, 0.28);
    color: var(--wp--preset--color--brand-red) !important;
}
/* Inverted: on a dark hero (brand-black or wp:cover), invert the glass. */
.has-brand-black-background-color .lca-btn--glass,
.wp-block-cover .lca-btn--glass,
.lca-hero-gradient .lca-btn--glass {
    background: rgba(255, 255, 255, 0.08);
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.22);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.has-brand-black-background-color .lca-btn--glass:hover,
.wp-block-cover .lca-btn--glass:hover,
.lca-hero-gradient .lca-btn--glass:hover {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.4);
    color: #fff !important;
}
/* Fallback where backdrop-filter isn't supported — make the base
   solid enough to stay readable. */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .lca-btn--glass {
        background: rgba(17, 17, 17, 0.08);
    }
    .has-brand-black-background-color .lca-btn--glass,
    .wp-block-cover .lca-btn--glass,
    .lca-hero-gradient .lca-btn--glass {
        background: rgba(255, 255, 255, 0.18);
    }
}
.lca-btn--disabled {
    background: var(--wp--preset--color--gray-light);
    color: var(--wp--preset--color--gray) !important;
    cursor: not-allowed;
    pointer-events: none;
}
/* Pulsing dot for "Join live" — small but signals live-ness. */
.lca-btn__dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.6);
    animation: lca-pulse 1.8s ease-out infinite;
}
@keyframes lca-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(255,255,255,0.7); }
    70%  { box-shadow: 0 0 0 10px rgba(255,255,255,0); }
    100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}

/* ---------- Empty state ---------- */
.lca-empty {
    text-align: center;
    color: var(--wp--preset--color--gray);
    padding: 2rem 0;
}

/* Single-sermon / single-event featured image: show at natural aspect
   ratio, centered, never cropped. */
.wp-block-post-featured-image.lca-sermon-featured,
.wp-block-post-featured-image.lca-event-featured {
    display: flex;
    justify-content: center;
}
.wp-block-post-featured-image.lca-sermon-featured img,
.wp-block-post-featured-image.lca-event-featured img {
    width: auto;
    height: auto;
    max-width: 100%;
    object-fit: contain;
    border-radius: 16px;
}

/* ---------- Disclosure menus (calendar + maps) ---------- */
/* Native <details>/<summary> — no JS. Summary is styled as a button via
   the .lca-btn classes; the open state reveals a popover above the
   button listing the providers. Used by both [lca_render_calendar_menu]
   and [lca_render_maps_menu]. */
.lca-cal-menu,
.lca-maps-menu {
    position: relative;
    display: inline-block;
}
/* Bullet-proof marker suppression. Some browsers ignore list-style:none on
   summary because its default display is list-item; switching the summary
   to inline-flex (via .lca-btn) handles most browsers, and the explicit
   ::marker / ::-webkit-details-marker reset handles the rest. */
.lca-cal-menu > summary,
.lca-maps-menu > summary {
    list-style: none;
    cursor: pointer;
}
.lca-cal-menu > summary::-webkit-details-marker,
.lca-maps-menu > summary::-webkit-details-marker { display: none !important; }
.lca-cal-menu > summary::marker,
.lca-maps-menu > summary::marker { content: '' !important; }
.lca-cal-menu > summary:focus-visible,
.lca-maps-menu > summary:focus-visible {
    outline: 2px solid var(--wp--preset--color--brand-red);
    outline-offset: 2px;
}
.lca-cal-menu[open] > summary.lca-btn--outline {
    border-color: var(--wp--preset--color--brand-red);
    color: var(--wp--preset--color--brand-red) !important;
}
.lca-maps-menu[open] > summary.lca-btn--dark {
    background: var(--wp--preset--color--gray-dark);
}
.lca-cal-menu__list,
.lca-maps-menu__list {
    position: absolute;
    bottom: calc(100% + 0.5rem);
    left: 0;
    z-index: 20;
    background: #fff;
    border-radius: var(--lca-radius-md);
    box-shadow: var(--lca-shadow-lg);
    border: 1px solid var(--wp--preset--color--gray-light);
    padding: 0.4rem;
    min-width: 220px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.lca-cal-menu__list a,
.lca-maps-menu__list a {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 !important;
    padding: 0.6rem 0.85rem;
    border-radius: var(--lca-radius-sm);
    text-decoration: none;
    color: var(--wp--preset--color--brand-black);
    font-family: var(--wp--preset--font-family--jost);
    font-size: 0.9rem;
    font-weight: 500;
    transition: background 0.15s ease, color 0.15s ease;
}
.lca-cal-menu__list a:hover,
.lca-maps-menu__list a:hover {
    background: var(--wp--preset--color--cream);
    color: var(--wp--preset--color--brand-red);
}

/* ---------- Event actions: detail view layout ---------- */
/* Calendar gets its own row, full width. Join live + Attend in person
   share the row below, equal width. On mobile (<= 600px) everything
   stacks. */
.lca-event-actions {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    margin-top: var(--wp--preset--spacing--40);
}
.lca-event-actions__primary {
    display: block;
}
.lca-event-actions__primary > .lca-cal-menu {
    display: block !important;
    width: 100%;
}
.lca-event-actions__primary > .lca-cal-menu > summary {
    display: flex !important;
    width: 100% !important;
    box-sizing: border-box;
    justify-content: center;
    align-items: center;
    list-style: none !important;
}
/* Force side-by-side at every viewport. !important + bumped specificity
   defeats any leftover rules (and any browser cache / theme overrides
   we don't control). The buttons will visually compress on tiny phones
   rather than stack — the user wants them literally next to each other. */
.lca-event-actions .lca-event-actions__secondary {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 1rem;
    align-items: center;
    justify-content: space-between !important;
}
/* Buttons hug their own content width and sit at opposite ends of the row,
   matching the partnership/bank-row pattern that reads well on mobile. */
.lca-event-actions .lca-event-actions__secondary > * {
    flex: 0 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
}
/* The maps menu sits inside a flex slot wrapper (.lca-event-actions__map-slot)
   that hugs the summary's natural content width. */
.lca-event-actions__map-slot {
    position: relative;
    display: inline-block;
}
.lca-event-actions__map-slot > .lca-maps-menu {
    display: inline-block !important;
}
.lca-event-actions .lca-event-actions__secondary > .lca-btn,
.lca-event-actions__map-slot > .lca-maps-menu > summary {
    display: inline-flex !important;
    box-sizing: border-box;
    justify-content: center;
    align-items: center;
    list-style: none !important;
    /* Comfortable inner spacing between the label and the pill walls. */
    padding-left: 1.4rem;
    padding-right: 1.4rem;
    gap: 0.55rem;
}
/* Keep label text inside the pill: icon stays fixed-size, label shrinks
   and ellipses if the slot is narrower than the natural content width. */
.lca-event-actions .lca-event-actions__secondary .lca-btn__icon {
    flex: 0 0 auto;
}
.lca-event-actions .lca-event-actions__secondary .lca-btn__label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
.lca-event-actions__map-slot > .lca-maps-menu > summary::-webkit-details-marker,
.lca-event-actions__primary > .lca-cal-menu > summary::-webkit-details-marker {
    display: none !important;
}
/* Anchor the maps popover to the slot's right edge so it doesn't overflow. */
.lca-event-actions__map-slot > .lca-maps-menu > .lca-maps-menu__list {
    left: auto;
    right: 0;
}
/* The maps popover on the right-hand side anchors flush-right so it
   doesn't overflow off-page. */
.lca-event-actions .lca-event-actions__secondary .lca-maps-menu__list {
    left: auto;
    right: 0;
}

/* List view: ensure the lone calendar dropdown stretches full width
   inside its card so it reads as a real CTA, not a chip. */
.lca-event-card__actions .lca-cal-menu,
.lca-event-card__actions .lca-cal-menu summary {
    width: 100%;
}
.lca-event-card__actions .lca-cal-menu summary {
    box-sizing: border-box;
    justify-content: center;
}

/* ---------- Sermon cards (archive) ---------- */
.lca-sermons-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
}
.lca-sermon-card {
    background: var(--wp--preset--color--white);
    border-radius: var(--lca-radius-lg);
    overflow: hidden;
    box-shadow: var(--lca-shadow-sm);
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.lca-sermon-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--lca-shadow-lg);
}
.lca-sermon-card__thumb {
    position: relative;
    display: block;
    background: var(--wp--preset--color--gray-light);
    line-height: 0; /* kill the text-baseline gap under the <img> */
}
.lca-sermon-card__thumb img,
.lca-sermon-card__img {
    width: 100%;
    height: auto;
    display: block;
}
.lca-sermon-card__placeholder {
    width: 100%;
    aspect-ratio: 1 / 1;
    background: var(--wp--preset--gradient--brand-fire);
    opacity: 0.85;
}
.lca-sermon-card__body {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    flex: 1;
}
.lca-sermon-card__eyebrow {
    margin: 0;
    font-size: 0.78rem;
}
.lca-sermon-card__eyebrow a {
    color: var(--wp--preset--color--brand-red);
    text-decoration: none;
}
.lca-sermon-card__title {
    font-family: var(--wp--preset--font-family--jost);
    font-size: var(--wp--preset--font-size--large);
    font-weight: 500;
    line-height: 1.25;
    margin: 0;
}
.lca-sermon-card__title a {
    color: var(--wp--preset--color--brand-black);
    text-decoration: none;
}
.lca-sermon-card__title a:hover {
    color: var(--wp--preset--color--brand-red);
}
.lca-sermon-card__meta {
    margin: 0;
    color: var(--wp--preset--color--gray);
    font-size: 0.9rem;
}
.lca-sermon-card__meta a {
    color: var(--wp--preset--color--gray-dark);
    text-decoration: none;
}
.lca-sermon-card__actions {
    margin-top: auto;
    padding-top: 0.5rem;
}

/* ---------- Event cards (archive) ---------- */
.lca-events-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 2rem;
}
.lca-event-card {
    background: var(--wp--preset--color--white);
    border-radius: var(--lca-radius-lg);
    overflow: hidden;
    box-shadow: var(--lca-shadow-sm);
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.lca-event-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--lca-shadow-lg);
}
.lca-event-card__thumb {
    position: relative;
    display: block;
    background: var(--wp--preset--color--gray-light);
    line-height: 0;
}
.lca-event-card__thumb img,
.lca-event-card__img {
    width: 100%;
    height: auto;
    display: block;
}
.lca-event-card__placeholder {
    width: 100%;
    aspect-ratio: 1 / 1;
    background: var(--wp--preset--gradient--brand-fire);
}
/* Allow the calendar popover to escape the card edges. */
.lca-event-card:has(details[open]) {
    overflow: visible;
}
.lca-event-card__datebadge {
    position: absolute;
    top: 1rem;
    left: 1rem;
    background: #fff;
    border-radius: var(--lca-radius-md);
    padding: 0.55rem 0.85rem;
    text-align: center;
    line-height: 1;
    box-shadow: var(--lca-shadow-md);
    min-width: 58px;
}
.lca-event-card__datebadge strong {
    display: block;
    font-family: var(--wp--preset--font-family--jost);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--wp--preset--color--brand-red);
}
.lca-event-card__datebadge span {
    display: block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-top: 3px;
    color: var(--wp--preset--color--gray);
}
.lca-event-card__body {
    padding: 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    flex: 1;
}
.lca-event-card__date {
    margin: 0;
    font-size: 0.78rem;
}
.lca-event-card__title {
    font-family: var(--wp--preset--font-family--jost);
    font-size: var(--wp--preset--font-size--x-large);
    font-weight: 500;
    line-height: 1.2;
    margin: 0;
}
.lca-event-card__title a {
    color: var(--wp--preset--color--brand-black);
    text-decoration: none;
}
.lca-event-card__title a:hover {
    color: var(--wp--preset--color--brand-red);
}
.lca-event-card__loc {
    margin: 0;
    color: var(--wp--preset--color--gray-dark);
    font-size: 0.95rem;
}
.lca-event-card__excerpt {
    margin: 0;
    color: var(--wp--preset--color--gray);
    font-size: 0.95rem;
    line-height: 1.55;
}
.lca-event-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: auto;
    padding-top: 0.5rem;
}

/* ---------- Single-event When/Where block ---------- */
.lca-event-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem 2.5rem;
    padding: 1.75rem;
    margin-bottom: 2rem;
    background: var(--wp--preset--color--cream);
    border-radius: var(--lca-radius-lg);
}
.lca-event-meta__item h6 {
    margin: 0 0 0.35rem 0;
    color: var(--wp--preset--color--brand-red);
    font-size: 0.75rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 500;
}
.lca-event-meta__item p {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--wp--preset--color--brand-black);
}
.lca-event-meta__sub {
    margin-top: 0.2rem !important;
    color: var(--wp--preset--color--gray) !important;
    font-weight: 500 !important;
    font-size: 0.95rem !important;
}

/* ---------- Responsive polish ---------- */
@media (max-width: 600px) {
    .lca-event-card__actions .lca-btn {
        flex: 1 1 100%;
        justify-content: center;
    }
    .lca-event-card__title { font-size: 1.5rem; }
    .lca-sermon-card__body,
    .lca-event-card__body { padding: 1.25rem; }
}