/*
 * Mass finder bridge into the LA Churches token design (DESIGN_SPEC.md).
 * Loaded after tokens.css + theme-lachurches.css on finder pages; remaps the
 * legacy mass-finder-v2 palette onto --lac-* tokens so /mass, /confession,
 * and /adoration match the homepage shell in both light and dark sepia.
 * Scoped to html.theme-lachurches; legacy tenants without the class keep v2.
 */

html.theme-lachurches {
    --color-bg: var(--lac-bg);
    --color-bg-card: var(--lac-bg-warm);
    --color-bg-card-hover: var(--lac-bg-warm);
    --color-text: var(--lac-ink);
    --color-text-muted: var(--lac-ink-2);
    --color-text-dim: var(--lac-ink-2);
    --color-accent: var(--lac-gold-deep);
    --color-success: #2e7d32;
    --color-warning: var(--lac-gold-deep);
    --color-danger: var(--lac-red);
    --color-border: var(--lac-rule);
    --color-border-subtle: var(--lac-rule);
    background: var(--lac-bg);
}

@media (prefers-color-scheme: dark) {
    html.theme-lachurches {
        --color-accent: var(--lac-gold-deep-dark);
        --color-success: #7dbb6f;
        --color-warning: var(--lac-gold-deep-dark);
        --color-danger: var(--lac-red-dark);
    }
}

html.theme-lachurches body {
    background: var(--lac-bg);
    color: var(--lac-ink);
    font-family: var(--lac-serif);
}

/* ── Search header ──────────────────────────────────────────────── */

/* Clear the fixed 61px top-nav, then breathe like the homepage finder. */
html.theme-lachurches .search-header {
    padding-top: 112px;
}

html.theme-lachurches .search-header h1 {
    font-family: var(--lac-display);
    font-weight: 700;
    font-size: clamp(30px, 7vw, 46px);
    line-height: 1.08;
    letter-spacing: 0.02em;
    color: var(--lac-ink);
}

/* Smooth, flash-free cross-fade when switching Mass/Confession/Adoration.
   Native cross-document View Transitions (Chrome/Safari); a no-op elsewhere. */
@view-transition { navigation: auto; }
/* The switcher itself is the same element on every finder page: tag it so the
   browser holds it steady (no flicker) while the finder content below fades. */
.finder-switch { view-transition-name: finder-switch; }
@media (prefers-reduced-motion: reduce) {
    ::view-transition-group(*),
    ::view-transition-old(*),
    ::view-transition-new(*) { animation: none !important; }
}

/* Finder switcher: Mass · Confession · Adoration, in place of dead H1 */
.finder-switch {
    display: flex;
    width: max-content;
    max-width: calc(100vw - 24px);
    gap: 2px;
    margin: 0 auto 22px;
    padding: 5px;
    border: 1px solid var(--lac-gold);
    border-radius: 999px;
    background: var(--lac-bg-warm);
    box-sizing: border-box;
}
html.theme-lachurches .finder-switch a,
.finder-switch a {
    flex: 0 1 auto;
    white-space: nowrap;
    text-align: center;
    font-family: var(--lac-display);
    font-weight: 700;
    /* Font ramps down on narrow phones so CONFESSION + ADORATION never collide. */
    font-size: clamp(11px, 3vw, 17px);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--lac-ink-2);
    text-decoration: none;
    padding: 11px clamp(12px, 4vw, 26px);
    border-radius: 999px;
    line-height: 1;
    transition: color 120ms ease, background 120ms ease;
    -webkit-tap-highlight-color: transparent;
}
html.theme-lachurches .finder-switch a:hover,
.finder-switch a:hover {
    color: var(--lac-ink);
    background: rgba(160, 128, 48, 0.12);
}
html.theme-lachurches .finder-switch a[aria-current="page"],
.finder-switch a[aria-current="page"] {
    color: var(--lac-bg);
    background: linear-gradient(180deg, var(--lac-gold) 0%, var(--lac-gold-deep) 100%);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}
html.theme-lachurches .finder-switch a[aria-current="page"]:hover,
.finder-switch a[aria-current="page"]:hover {
    color: var(--lac-bg);
}
/* Single-finder tenants hide the switcher.
   - Anglican / Episcopal: only a Mass/Services finder exists.
   - ubimissa (global): confession_times/adoration_times in ubimissa-db carry
     almost no coverage (131 + 92 rows worldwide vs 125K churches), so the
     Confession/Adoration tabs would find nothing for ~everyone. Mass is the
     global product. Re-enable here once those datasets are seeded. */
html.theme-anglican .finder-switch [data-finder-link="confession"],
html.theme-anglican .finder-switch [data-finder-link="adoration"],
html.theme-episcopal .finder-switch [data-finder-link="confession"],
html.theme-episcopal .finder-switch [data-finder-link="adoration"] {
    display: none;
}
html.theme-anglican .finder-switch,
html.theme-episcopal .finder-switch,
html.theme-ubimissa .finder-switch {
    display: none;
}
/* ...and restore a normal visible heading on those single-finder tenants. */
html.theme-anglican .search-header .finder-h1-sr,
html.theme-episcopal .search-header .finder-h1-sr,
html.theme-ubimissa .search-header .finder-h1-sr {
    position: static;
    width: auto; height: auto;
    margin: 0 0 24px; padding: 0;
    clip: auto; clip-path: none;
    overflow: visible;
    white-space: normal;
}

/* Keep the screen-reader-only true H1 for SEO/a11y */
.finder-h1-sr {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    overflow: hidden;
    white-space: nowrap;
}

html.theme-lachurches .btn-location {
    min-height: 52px;
    padding: 14px 28px;
    font-family: var(--lac-display);
    font-weight: 700;
    font-size: var(--lac-text-xs);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    background: var(--lac-ink);
    color: var(--lac-bg);
    border: 1px solid var(--lac-ink);
    border-radius: var(--lac-radius-sm, 6px);
    box-shadow: none;
    transition: background 120ms ease, border-color 120ms ease;
}

html.theme-lachurches .btn-location:hover {
    transform: none;
    filter: none;
    background: var(--lac-gold-deep);
    border-color: var(--lac-gold-deep);
    box-shadow: none;
}

html.theme-lachurches .btn-location:active {
    transform: none;
    filter: none;
    box-shadow: none;
}

/* Replace the emoji pin with the homepage's gold locate dot. */
html.theme-lachurches .btn-location .icon {
    display: none;
}

html.theme-lachurches .btn-location::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--lac-gold);
    box-shadow: 0 0 0 3px rgba(160, 128, 48, 0.25);
}

html.theme-lachurches .btn-location:hover::before {
    background: var(--lac-bg);
    box-shadow: none;
}

html.theme-lachurches .or-divider {
    font-family: var(--lac-serif);
    font-style: italic;
    text-transform: none;
    letter-spacing: normal;
    font-size: var(--lac-text-sm);
}

html.theme-lachurches .address-input-wrap input {
    min-height: 48px;
    font-family: var(--lac-serif);
    font-size: var(--lac-text-md);
    color: var(--lac-ink);
    background: var(--lac-bg);
    border: 1px solid var(--lac-rule);
}

html.theme-lachurches .address-input-wrap input::placeholder {
    color: var(--lac-ink-2);
    font-style: italic;
}

html.theme-lachurches .address-input-wrap input:focus {
    border-color: var(--lac-gold);
    box-shadow: none;
}

html.theme-lachurches .btn-go {
    background: var(--lac-ink);
    border: 1px solid var(--lac-ink);
    color: var(--lac-bg);
    font-family: var(--lac-display);
    font-weight: 700;
    font-size: var(--lac-text-xs);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

html.theme-lachurches .btn-go:hover {
    background: var(--lac-gold-deep);
    border-color: var(--lac-gold-deep);
    color: var(--lac-bg);
}

html.theme-lachurches .browse-fallback a {
    font-family: var(--lac-serif);
    font-style: italic;
    font-size: var(--lac-text-sm);
    color: var(--lac-ink-2);
}

html.theme-lachurches .browse-fallback a:hover {
    color: var(--lac-gold-deep);
}

/* ── Filters ────────────────────────────────────────────────────── */

html.theme-lachurches .filters-bar {
    background: var(--lac-bg-warm);
    border: 1px solid var(--lac-rule);
}

html.theme-lachurches .filter-chip-group label {
    font-family: var(--lac-display);
    color: var(--lac-ink-2);
}

html.theme-lachurches .chip {
    background: var(--lac-bg);
    border: 1px solid var(--lac-rule);
    color: var(--lac-ink-2);
}

html.theme-lachurches .chip:hover {
    border-color: var(--lac-gold);
    color: var(--lac-ink);
}

html.theme-lachurches .chip.active {
    background: var(--lac-ink);
    border-color: var(--lac-ink);
    color: var(--lac-bg);
}

html.theme-lachurches .distance-value {
    color: var(--lac-gold-deep);
}

/* ── Hero answer ────────────────────────────────────────────────── */

html.theme-lachurches .answer-box {
    background: var(--lac-bg-warm);
    border: 1px solid var(--lac-rule);
}

html.theme-lachurches .answer-title {
    font-family: var(--lac-display);
}

/* ── Results ────────────────────────────────────────────────────── */

html.theme-lachurches .church-card {
    background: var(--lac-bg-warm);
    border: 1px solid var(--lac-rule);
}

html.theme-lachurches .church-card:hover {
    background: var(--lac-bg-warm);
    border-color: var(--lac-gold);
}

html.theme-lachurches .church-card.no {
    opacity: 0.75;
}

/* ── Newsletter ─────────────────────────────────────────────────── */

html.theme-lachurches .newsletter-box {
    background: var(--lac-bg-warm);
    border: 1px solid var(--lac-rule);
}

html.theme-lachurches .newsletter-box h2 {
    font-family: var(--lac-display);
    color: var(--lac-ink);
}

html.theme-lachurches .newsletter-form input {
    background: var(--lac-bg);
    border: 1px solid var(--lac-rule);
    color: var(--lac-ink);
}

html.theme-lachurches .newsletter-form input:focus {
    border-color: var(--lac-gold);
    box-shadow: none;
}

html.theme-lachurches .newsletter-form button {
    background: var(--lac-ink);
    color: var(--lac-bg);
    font-family: var(--lac-display);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

html.theme-lachurches .newsletter-form button:hover {
    background: var(--lac-gold-deep);
    transform: none;
    box-shadow: none;
}

/* ── Mini map ───────────────────────────────────────────────────── */

html.theme-lachurches .finder-mini-map {
    border: 1px solid var(--lac-rule);
    border-radius: var(--lac-radius-sm, 6px);
}