/* =====================================================================
   Glass — frosted, see-through panels over the church photos
   ---------------------------------------------------------------------
   Glass is used only where something real sits behind it: the sticky
   header (photos slide under it), the cards on the photo banners, the
   panels on the photo bands, the phone menu and the floating buttons.
   Cards on plain backgrounds stay solid papercut, as before.

   It stays flat: a translucent fill, a hairline light edge and a blur
   of what is behind. No shadows, no gradients.

   main.js drives the scroll effects through three custom properties:
     --scroll-glass  on the header      0 at the top, 1 after ~160px
     --glass-t       on a hero card     0 in place, 1 once scrolled away
     --frost         on a photo band    0 off screen, 1 at mid-screen

   Browsers without backdrop-filter, and visitors who asked their system
   for less transparency, keep the solid colours from the other sheets.
   ===================================================================== */

:root {
    --glass-edge:      rgba(255, 255, 255, 0.55);
    --glass-edge-dark: rgba(255, 255, 255, 0.16);
}
[data-theme="dark"] { --glass-edge: rgba(255, 255, 255, 0.12); }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]):not([data-theme="dark"]) { --glass-edge: rgba(255, 255, 255, 0.12); }
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {

    /* ---- Header ------------------------------------------------------
       The glass is painted on a layer behind the header rather than on
       the header itself: an element with backdrop-filter only lets its
       children blur what is inside it, and the phone menu, which hangs
       from the header, needs to blur the page. */
    .site-header,
    .site-header.is-stuck { background: transparent; }
    .site-header::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        background: color-mix(in srgb, var(--paper) calc(100% - var(--scroll-glass, 0) * 30%), transparent);
        -webkit-backdrop-filter: blur(calc(var(--scroll-glass, 0) * 20px)) saturate(calc(1 + var(--scroll-glass, 0) * 0.6));
        backdrop-filter: blur(calc(var(--scroll-glass, 0) * 20px)) saturate(calc(1 + var(--scroll-glass, 0) * 0.6));
        pointer-events: none;
    }
    /* At the very top the header matches the page behind it. */
    .site-header:not(.is-stuck)::before { background: var(--fog); }
    .site-header.is-stuck { border-bottom-color: var(--glass-edge); }
    /* Buttons in the header turn to glass too, so they don't sit as
       solid blocks on the frosted bar. */
    .site-header.is-stuck .icon-btn,
    .site-header.is-stuck .lang-switch { border-color: color-mix(in srgb, var(--mist) 70%, transparent); }

    /* Phone menu: frosted, so the page shows softly behind the links. */
    .site-header.is-collapsed .main-nav {
        background: color-mix(in srgb, var(--paper) 80%, transparent);
        -webkit-backdrop-filter: blur(24px) saturate(1.5);
        backdrop-filter: blur(24px) saturate(1.5);
        border-bottom-color: var(--glass-edge);
    }
    .site-header.is-collapsed .main-nav a { border-bottom-color: color-mix(in srgb, var(--mist) 70%, transparent); }

    /* ---- Cards on the photo banners ---------------------------------
       74% paper keeps the heading and lead well above 7:1 contrast over
       any photo; scrolling away thins and deepens the glass while the
       card lifts and fades (main.js). */
    .page-hero--photo .page-hero__inner,
    .hero--story.hero--full .hero__inner {
        --glass-t: 0;
        background: color-mix(in srgb, var(--paper) calc(74% - var(--glass-t) * 22%), transparent);
        -webkit-backdrop-filter: blur(calc(16px + var(--glass-t) * 18px)) saturate(1.5);
        backdrop-filter: blur(calc(16px + var(--glass-t) * 18px)) saturate(1.5);
        border: 1px solid var(--glass-edge);
    }

    /* "Scroll down" button on the banners. */
    .scroll-cue {
        background: color-mix(in srgb, var(--paper) 62%, transparent);
        -webkit-backdrop-filter: blur(12px) saturate(1.5);
        backdrop-filter: blur(12px) saturate(1.5);
        border: 1px solid var(--glass-edge);
    }
    .scroll-cue:hover { background: var(--gold); }

    /* ---- Photo bands (home invitation, serve, business) --------------
       The photo now shows more clearly (a lighter veil) and the words
       sit on a panel of dark navy glass. The panel frosts over and
       settles as the band reaches the middle of the screen, while the
       photo keeps drifting behind it (parallax). Veil + glass together
       still give white text over 5:1 on the brightest photo. */
    .section--photo .bg-photo::after { opacity: 0.42; }
    .section--photo > .container {
        --frost: 1;
        position: relative;
        z-index: 1;
        max-width: 880px;
        padding: var(--s-6) var(--s-5);
        border-radius: var(--r-feature);
        background: color-mix(in srgb, var(--band) 58%, transparent);
        -webkit-backdrop-filter: blur(calc(4px + var(--frost) * 14px)) saturate(1.4);
        backdrop-filter: blur(calc(4px + var(--frost) * 14px)) saturate(1.4);
        border: 1px solid var(--glass-edge-dark);
        transform: translate3d(0, calc((1 - var(--frost)) * 28px), 0);
    }
    .section--photo > .container .lead { color: rgba(255, 255, 255, 0.88); }
    @media (max-width: 640px) {
        .section--photo > .container {
            width: calc(100% - 2 * var(--s-2));
            padding: var(--s-5) var(--s-3);
            border-radius: var(--r-card);
        }
    }

    /* ---- Back to top ------------------------------------------------- */
    .to-top {
        background: color-mix(in srgb, var(--ink) 72%, transparent);
        -webkit-backdrop-filter: blur(12px) saturate(1.5);
        backdrop-filter: blur(12px) saturate(1.5);
        outline: 1px solid var(--glass-edge-dark);
        outline-offset: -1px;
    }
    [data-theme="dark"] .to-top { background: color-mix(in srgb, var(--navy) 78%, transparent); }
}

/* Less transparency asked for: solid surfaces, exactly as before. */
@media (prefers-reduced-transparency: reduce) {
    .site-header::before { display: none; }
    .site-header { background: var(--fog); }
    .site-header.is-stuck { background: var(--paper); border-bottom-color: var(--mist); }
    .site-header.is-collapsed .main-nav,
    .page-hero--photo .page-hero__inner,
    .hero--story.hero--full .hero__inner,
    .scroll-cue { background: var(--paper); -webkit-backdrop-filter: none; backdrop-filter: none; }
    .section--photo .bg-photo::after { opacity: 0.66; }
    .section--photo > .container { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; border: 0; transform: none; }
    .to-top { background: var(--ink); -webkit-backdrop-filter: none; backdrop-filter: none; }
}