/* ──────────────────────────────────────────────────────────────────
   Woodlawn Ministry Tools — Public-chrome styles (shared)

   Shared theme tokens, persistent navbar, theme toggle, footer.
   LIGHT is the default; DARK activates via [data-theme="dark"] on <html>.

   Each public-facing page links this file in <head> AFTER the FOUC-
   prevention boot script (renderPublicThemeBoot in public/_layout.php)
   and then adds its own page-specific styles in an inline <style> block.

   PORTED FROM ServiceManager. Keep the token names and class names
   identical across tools — this file is the shared contract. The
   hide-content toggle and announcement banner were omitted here: they
   only earn their keep on pages with a mosaic backdrop, which
   EventManager does not have.

   Don't put page-specific selectors here. This file is *chrome only*.
   ────────────────────────────────────────────────────────────────── */

/* ─── Theme tokens ─────────────────────────────────────────────── */

:root {
    /* LIGHT theme — default */
    --bg:            #fafafa;
    --surface-1:     #ffffff;
    --surface-2:     #f3f3f3;
    --surface-3:     #e8e8e8;
    --border-1:      rgba(0,0,0,.08);
    --border-2:      rgba(0,0,0,.14);
    --text:          #1a1a1a;
    --text-soft:     #555555;
    --muted:         #888888;
    --accent:        #2a8c7a;                /* slightly deeper teal for contrast on white */
    --accent-hover:  #1f7264;
    --accent-glow:   rgba(42,140,122,.10);
    --accent-text:   #ffffff;                /* text on accent-bg buttons — dark teal needs light text */
    --spotify:       #1db954;                /* always Spotify green on the CTA / play buttons */

    /* Backdrop overlay base colour, used in linear-gradients on the
       series/playlist/student-guide hero panes. Light mode fades the
       imagery into white; dark mode into black. Title text + shadow
       flip with the theme so they remain legible against whichever
       way the overlay is fading. */
    --backdrop-overlay-rgb: 255, 255, 255;
    --backdrop-text:        #1a1a1a;
    --backdrop-text-shadow: 0 1px 3px rgba(255,255,255,.7);
    --backdrop-text-soft:   #444444;

    /* Glass-card "bubble" behind title text that overlays the backdrop.
       Strong opacity + heavy backdrop-blur on the wrapping element keeps
       title text legible no matter how busy the mosaic / hero image is. */
    --bubble-bg:            rgba(255,255,255,.78);
    --bubble-border:        rgba(255,255,255,.6);
    --bubble-shadow:        0 6px 20px rgba(0,0,0,.10);

    /* ─── Canonical glass tokens (Bundle KK) ────────────────────────
       Single source of truth for the glass card chrome used across
       the public site (worship / lessons / series / playlists). Every
       glassed surface — head cards, content rows, empty states, tabs
       rows — reads these so theme switching is one place to change.
       Previously the rgba values were inlined per-page and every
       page got its own light-mode override via [data-theme="light"]
       — but light is the DEFAULT (no attribute set), so those
       overrides never fired and light mode rendered the dark values.
       Now: `:root` defines the light values (default), and
       `[data-theme="dark"]` overrides for dark mode. The cascade
       works as designed. */
    --glass-surface:        rgba(255, 255, 255, 0.88);
    --glass-surface-hover:  rgba(255, 255, 255, 0.94);
    --glass-border:         rgba(255, 255, 255, 0.70);
    --glass-border-hover:   rgba(0, 0, 0, 0.10);
    --glass-shadow:         0 8px 24px rgba(0, 0, 0, 0.14);
    --glass-shadow-sm:      0 6px 18px rgba(0, 0, 0, 0.10);
    --glass-blur:           blur(20px) saturate(140%);
    --glass-blur-head:      blur(24px) saturate(140%);
    --glass-radius:         18px;
    /* Alias — some pages were written against `--glass-bg`. Keep both
       names resolving to the same value so neither spelling renders
       transparent. `--glass-surface` is the canonical name; prefer it. */
    --glass-bg:             var(--glass-surface);
}

[data-theme="dark"] {
    --bg:            #0a0a0a;
    --surface-1:     #111111;
    --surface-2:     #181818;
    --surface-3:     #232323;
    --border-1:      rgba(255,255,255,.06);
    --border-2:      rgba(255,255,255,.10);
    --text:          #f0f0f0;
    --text-soft:     #c0c0c0;
    --muted:         #888888;
    --accent:        #52c1af;
    --accent-hover:  #6dd0bf;
    --accent-glow:   rgba(82,193,175,.18);
    --accent-text:   #0a0a0a;                /* light accent button → black text */

    --backdrop-overlay-rgb: 10, 10, 10;
    --backdrop-text:        #ffffff;
    --backdrop-text-shadow: 0 2px 8px rgba(0,0,0,.7);
    --backdrop-text-soft:   rgba(255,255,255,.85);

    --bubble-bg:            rgba(0,0,0,.55);
    --bubble-border:        rgba(255,255,255,.10);
    --bubble-shadow:        0 6px 20px rgba(0,0,0,.4);
    /* --spotify stays constant */

    /* Canonical glass tokens (dark) */
    --glass-surface:        rgba(15, 20, 22, 0.78);
    --glass-surface-hover:  rgba(20, 28, 30, 0.85);
    --glass-border:         rgba(255, 255, 255, 0.10);
    --glass-border-hover:   rgba(255, 255, 255, 0.18);
    --glass-shadow:         0 8px 28px rgba(0, 0, 0, 0.35);
    --glass-shadow-sm:      0 6px 18px rgba(0, 0, 0, 0.25);
    --glass-bg:             var(--glass-surface);
}

/* ─── Reset + base ─────────────────────────────────────────────── */

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--text);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }

/* ─── Content container ────────────────────────────────────────────
   The main content column. Lives HERE, in the chrome, so every page
   gets the same width and gutters for free.

   ServiceManager omits this and instead redefines `.pub-main` inside
   each page's local <style> block. That is drift: it means a page that
   forgets the rule renders edge-to-edge, and it means changing the
   content width requires touching every page. Any new tool should take
   the width from this file and never restate it. */
.pub-main {
    max-width: 1080px;
    margin: 0 auto;
    padding: 32px 20px 80px;
}
@media (max-width: 640px) {
    .pub-main { padding: 20px 16px 64px; }
}

/* ─── Persistent public nav ────────────────────────────────────── */

.pub-head {
    background: var(--surface-1);
    border-bottom: 1px solid var(--border-1);
    position: sticky;
    top: 0;
    z-index: 10;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.pub-head-inner {
    max-width: 1080px;
    margin: 0 auto;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}
.pub-brand {
    color: var(--text);
    font-weight: 800;
    font-size: 1.05rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}
.pub-brand:hover { color: var(--accent); }
.pub-brand-logo {
    height: 48px;
    width: auto;
    display: block;
    flex-shrink: 0;
}
/* Two-logo variants: if both dark + light logos are uploaded, CSS swaps
   them with theme. If only one is uploaded, the helper drops the variant
   classes and shows it in both modes. */
.pub-brand-logo-dark  { display: none; }
.pub-brand-logo-light { display: block; }
[data-theme="dark"] .pub-brand-logo-dark  { display: block; }
[data-theme="dark"] .pub-brand-logo-light { display: none; }

.pub-nav { display: flex; gap: 4px; flex-wrap: wrap; margin-left: auto; }
.pub-nav a {
    color: var(--text-soft);
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 0.88rem;
    font-weight: 500;
    transition: background 0.12s, color 0.12s;
}
.pub-nav a:hover { background: var(--surface-2); color: var(--text); }
.pub-nav a.is-active { color: var(--accent); background: var(--accent-glow); }

/* ─── Shared public page-header card (Bundle SS) ────────────────────
   One block that replaces four drifted per-page copies (.pub-glass-head
   in index/series, .ws-head in worship, .playlist-head in playlist).
   Left-aligned title, ministry name as eyebrow, text-shadow on all
   pages (needed for legibility over the mosaic backdrop on worship and
   playlist; harmless on lessons/series).

   The optional .pub-page-head-extra slot flexes right on wide viewports
   for trailing content (worship's sort dropdown, playlist's Spotify
   CTA) and drops beneath the title on narrow ones. Callers pass HTML
   into that slot via renderPublicPageHeader($title, $subtitle, $extra). */
.pub-page-head {
    position: relative;
    z-index: 1;
    margin: 0 0 36px;
    padding: 28px 32px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    background: var(--glass-surface);
    backdrop-filter: var(--glass-blur-head);
    -webkit-backdrop-filter: var(--glass-blur-head);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    box-shadow: var(--glass-shadow);
}
.pub-page-head-text { min-width: 0; flex: 1; }
.pub-page-head-eyebrow {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent);
    margin: 0 0 8px;
    text-shadow: var(--backdrop-text-shadow);
}
.pub-page-head-title {
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    margin: 0;
    line-height: 1.1;
    text-shadow: var(--backdrop-text-shadow);
}
.pub-page-head-sub {
    color: var(--text-soft);
    font-size: 0.95rem;
    margin: 8px 0 0;
    text-shadow: var(--backdrop-text-shadow);
}
.pub-page-head-extra {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    flex-wrap: wrap;
}
@media (max-width: 640px) {
    .pub-page-head { padding: 20px 18px; border-radius: 14px; margin-bottom: 24px; }
    .pub-page-head-title { font-size: 1.6rem; }
}


/* Theme toggle button — fixed-position FAB at the bottom-right corner.
   Always visible regardless of scroll. The icon shows the *current*
   theme: sun for light, moon for dark. Aria-label clarifies the action. */
.pub-theme-toggle {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 100;
    background: var(--surface-1);
    border: 1px solid var(--border-2);
    color: var(--text-soft);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: color 0.12s, border-color 0.12s, background 0.12s, transform 0.12s, box-shadow 0.12s;
    flex-shrink: 0;
    padding: 0;
    box-shadow: 0 4px 14px rgba(0,0,0,.18);
}
.pub-theme-toggle:hover {
    color: var(--accent);
    border-color: var(--accent);
    transform: scale(1.05);
    box-shadow: 0 6px 18px rgba(0,0,0,.22);
}
.pub-theme-toggle:active { transform: scale(0.96); }

/* Icon visibility: in light mode show sun (current state); in dark show
   moon. Click the button to flip. The two svgs are siblings inside the
   button; only one is `display: block` at a time. */
.theme-icon-sun  { display: block; }
.theme-icon-moon { display: none; }
[data-theme="dark"] .theme-icon-sun  { display: none; }
[data-theme="dark"] .theme-icon-moon { display: block; }

/* ─── Footer ───────────────────────────────────────────────────
   Works whether the <p class="pub-foot"> sits inside the page main
   container or stands as a sibling — the max-width centres it either
   way. Margin-top creates a visual separator. */
.pub-foot {
    max-width: 1080px;
    margin: 48px auto 0;
    padding: 24px 20px;
    text-align: center;
    color: var(--muted);
    font-size: 0.82rem;
    border-top: 1px solid var(--border-1);
}
.pub-foot-admin { color: var(--muted); }
.pub-foot-admin:hover { color: var(--accent); }

/* ─── Mobile chrome adjustments ────────────────────────────────── */

@media (max-width: 480px) {
    .pub-nav a { padding: 6px 10px; font-size: 0.82rem; }
    .pub-brand-logo { height: 38px; }
}

