/* ---------- Responsive ---------- */
@media (max-width: 40rem) {
    html, body {
        font-size: 1.05rem;
    }
}

/* ---------- Journey landing pages ---------- */
.landing {
    max-width: var(--w-read);
    margin-inline: auto;
}

.landing__title {
    margin: 0 0 0.5rem;
}

.landing__lede {
    font-size: 1.15rem;
    color: var(--ink-soft);
    max-width: 42rem;
}

.landing__placeholder {
    margin-top: 2rem;
    font-style: italic;
    color: var(--ink-soft);
}

/* ---------- PWA update prompt ---------- */
/* Shown by index.html when a new service worker is waiting. Fixed to the bottom so it never
   disrupts the reading column; hidden until the .is-visible class is added by the update script. */
.pwa-update {
    position: fixed;
    left: 50%;
    bottom: 1rem;
    z-index: var(--z-float);
    display: flex;
    align-items: center;
    gap: 1rem;
    width: min(28rem, 100vw - 2rem);
    max-width: calc(100vw - 2rem);
    padding: 0.75rem 1rem;
    transform: translate(-50%, 150%);
    background: var(--parchment);
    color: var(--ink);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    box-shadow: 0 0.5rem 1.5rem var(--shadow);
    font-family: var(--serif);
    font-size: var(--fs-md);
    opacity: 0;
    transition: transform var(--dur-3) var(--ease-page), opacity var(--dur-3) var(--ease-page);
}

.pwa-update.is-visible {
    transform: translate(-50%, 0);
    opacity: 1;
}

.pwa-update__text {
    flex: 1 1 auto;
    color: var(--ink-soft);
}

.pwa-update__reload {
    padding: 0.35rem 0.85rem;
    background: var(--accent);
    color: var(--accent-ink);
    border: none;
    border-radius: 0.35rem;
    font: inherit;
    cursor: pointer;
}

.pwa-update__reload:hover {
    filter: brightness(1.1);
}

@media (prefers-reduced-motion: reduce) {
    .pwa-update {
        transition: opacity var(--dur-3) var(--ease-page);
    }
}

/* ---------------------------------------------------------------------------
   Shared pillar header: one source of truth for every pillar's page header
   (Inquiry/Home, Summa, Discover browse, Miracles, and the detail pages). Each
   pillar wraps its intro in `.pillar` > `.pillar__header` with an optional
   `.pillar__eyebrow`, a `.pillar__title`, and a `.pillar__lede`, so spacing and
   type stay identical across pillars and only need to change in one place.
   --------------------------------------------------------------------------- */
.pillar {
    max-width: var(--w-wide);
    margin-inline: auto;
}

.pillar__title {
    font-family: var(--display);
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    line-height: 1.1;
    margin: 0 0 0.5rem;
    color: var(--ink);
}

/* ---------------------------------------------------------------------------
   Discover pillar: prayers, devotions, and articles for living the faith.
   --------------------------------------------------------------------------- */

/* Wide centered reading column for detail surfaces whose content is layout rather than prose —
   the Prayer detail and the Devotion intro/player, whose card grids and bead lists want the roomier
   60rem measure. Long-form prose surfaces (articles, miracles) use the tighter .content-article
   measure instead so their body text keeps an optimal line length. */
.reading-wide {
    max-width: var(--w-wide);
    margin: 0 auto;
    padding: 1rem 0 3rem;
}

/* Browse listings (articles, prayers, devotions, miracles index) reuse the shared .pillar width so
   the filter rail and results can breathe. .pillar already supplies the centered width/margin; this
   only adds the bottom gutter. The top padding is intentionally omitted so the browse header starts
   at the same height as the Inquiry hero (the .pillar__header supplies its own 1rem top padding). */
.browse {
    padding-bottom: 3rem;
}

/* Shared browse chrome: a filter rail beside a results column, a results toolbar, and a sort control.
   These are GLOBAL, generic utilities reused across the Prayers, Devotions, Articles, Miracles, and
   Discover browse pages, so they are not scoped to any single component. The search box lives in its
   own SearchBox component (SearchBox.razor.css). Other component-owned styles live in their own
   .razor.css files (PrayerDetail, DevotionPlayer). */

/* Generic empty/no-results message, shared across browse pages and the Summa search view. */
.empty-state {
    text-align: center;
    color: var(--ink-soft);
    font-style: italic;
}

/* Show the pointer (hand) cursor on the native "clear search" X across all search boxes. */
input[type="search"]::-webkit-search-cancel-button {
    cursor: pointer;
}


/* Muted result-count line, shared by the browse toolbar and the Summa search view. */
.results-count {
    margin: 0;
    color: var(--ink-soft);
    font-size: 0.9rem;
}


/* ---------- Immersive mode ----------
   While the reader is praying (a devotion, an hour, or a single prayer), the page renders an
   .immersive-root marker, detected here with :has() so the chrome follows the DOM. Each
   simply scrolls as normal and leaves room for that bar. On phones the surrounding chrome also
   steps aside so the prayer gets nearly the whole viewport; desktops keep their full chrome.
   These rules live here (not in a scoped stylesheet) because the nav and footer are separate
   components, so a global selector is needed to reach them all. */
body:has(.immersive-root) .back-link {
    display: none;
}

body:has(.immersive-root) .content__inner {
    padding-bottom: calc(6rem + env(safe-area-inset-bottom, 0px));
}


@media (max-width: 40rem) {
    body:has(.immersive-root) .masthead,
    body:has(.immersive-root) .pillarnav,
    body:has(.immersive-root) .mastnav,
    body:has(.immersive-root) .breadcrumb,
    body:has(.immersive-root) .quick-menu__toggle,
    body:has(.immersive-root) .float-circle,
    body:has(.immersive-root) .colophon,
    body:has(.immersive-root) .back-to-top {
        display: none;
    }
}

/* Reading pages (saints, miracles, articles) pin a reader bar on phones that carries the guide and the quick menu,
   so the floating orbs and the quick-menu toggle step aside there and the page leaves room for the bar. */
@media (max-width: 40rem) {
    body:has(.readerbar) .float-circle,
    body:has(.readerbar) .quick-menu__toggle,
    body:has(.readerbar) .back-to-top {
        display: none;
    }

    body:has(.readerbar) .content__inner {
        padding-bottom: calc(5rem + env(safe-area-inset-bottom, 0px));
    }
}