/**
 * Pulpit Live — front-end styles (Pulpit Studio 1.21.0, the canon pass).
 *
 * One dark stage hosting three states: the countdown cover before the
 * service, the player while it's live, and the replay (or "service has
 * ended" cover) after it.
 *
 * Canon (signed off for Pulpit Studio, 2026-10-26):
 *   - The stage is the suite deep-teal band (--es-deep-a → --es-deep-b), the
 *     same ground as the Pulpit hub heroes and the theme's footer band.
 *   - Orange is a fill with ink text: the primary button, and the on-air dot
 *     while a service is actually live. Everything else is white, pale teal
 *     or neutral glass.
 *   - Nothing below 13px; eyebrows 13px / 700 / uppercase / 0.14em; buttons
 *     are sentence-case pills, weight 600, hover lifts.
 *   - Corners 14px on panels and cards, 16px on the cover and the player.
 *
 * Sites can still override the --pl-* tokens per theme.
 */


/* ═════════════════════════════════════════════════════════════════════════
   TOKENS
   ═════════════════════════════════════════════════════════════════════════ */

/* Brand slots read the Esselith Core token layer; the PHP-injected :root
   block (option-resolved values) still wins the cascade either way. */
:root {
    --pl-brand-primary:   var(--es-brand-primary, #ED8B00);
    --pl-brand-secondary: var(--es-brand-secondary, #004F71);
    --pl-brand-accent:    var(--es-brand-accent, #2E3D48);
}

.pl-stage {
    --pl-deep-a:         var(--es-deep-a, #064058);
    --pl-deep-b:         var(--es-deep-b, #04293A);
    --pl-ink:            var(--es-ink, #071120);
    --pl-text-primary:   var(--es-text-on-dark, #E8ECF5);
    --pl-text-muted:     rgba(232, 236, 245, 0.78);
    --pl-text-faint:     rgba(232, 236, 245, 0.62);
    --pl-border-soft:    rgba(232, 236, 245, 0.16);
    --pl-glass:          rgba(255, 255, 255, 0.05);
    --pl-glass-2:        rgba(255, 255, 255, 0.09);
    /* Pale teal for accents on the deep band (≈7:1 on --pl-deep-b) */
    --pl-pale:           color-mix(in srgb, var(--pl-brand-secondary) 30%, white);
    --pl-radius-lg:      var(--es-radius-card, 16px);
    --pl-radius-md:      var(--es-radius-card, 16px);
    --pl-radius-sm:      var(--es-radius-sm, 8px);

    --pl-font-display:   var(--es-font-display, 'Playfair Display', Georgia, serif);
    --pl-font-body:      var(--es-font-body, 'Montserrat', system-ui, -apple-system, sans-serif);
    --pl-fs-min:         0.8125rem;   /* 13px floor */
    --pl-tracking:       0.14em;

    /* On-air halo: the brand lightened first so a dark church brand still
       shows a ring on the deep ground. */
    --pl-pulse-base:     color-mix(in srgb, var(--pl-brand-primary) 65%, white);

    --pl-easing:         cubic-bezier(0.22, 0.61, 0.36, 1);

    position: relative;
    padding: 72px 24px 88px;
    background: linear-gradient(165deg, var(--pl-deep-a), var(--pl-deep-b));
    color: var(--pl-text-primary);
    font-family: var(--pl-font-body);
    line-height: 1.55;
    box-sizing: border-box;
    overflow: hidden;
}

.pl-stage *,
.pl-stage *::before,
.pl-stage *::after {
    box-sizing: border-box;
}

/* Soft pale-teal glows, the same atmosphere as the Pulpit hub heroes */
.pl-stage::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(ellipse 70% 55% at 12% 0%,   color-mix(in srgb, var(--pl-pale) 18%, transparent), transparent 60%),
        radial-gradient(ellipse 80% 70% at 88% 110%, color-mix(in srgb, var(--pl-pale) 22%, transparent), transparent 60%);
    pointer-events: none;
    z-index: 0;
}

.pl-stage > * {
    position: relative;
    z-index: 1;
}

/* Theme defense: no inherited underlines on the stage's own links */
.pl-stage a.pl-next-step,
.pl-stage a.pl-next-step:hover,
.pl-stage a.pl-next-step:focus,
.pl-stage a.pl-cover-cta,
.pl-stage a.pl-cover-cta:hover,
.pl-stage a.pl-cover-cta:focus,
.pl-stage a.pl-ghost-cta,
.pl-stage a.pl-ghost-cta:hover,
.pl-stage a.pl-ghost-cta:focus {
    text-decoration: none;
}

.pl-stage :is(a, button):focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}


/* ═════════════════════════════════════════════════════════════════════════
   HEADER — eyebrow, title, subtitle, meta
   ═════════════════════════════════════════════════════════════════════════ */

.pl-header {
    max-width: 1100px;
    margin: 0 auto 40px;
    text-align: center;
}

.pl-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 7px 16px;
    border-radius: 999px;
    background: var(--pl-glass-2);
    border: 1px solid var(--pl-border-soft);
    color: var(--pl-text-primary);
    font-size: var(--es-eyebrow, var(--pl-fs-min));
    font-weight: 700;
    letter-spacing: var(--pl-tracking);
    line-height: 1.4;
    text-transform: uppercase;
    margin-bottom: 20px;
}

/* The dot appears only while a service is on air. */
.pl-eyebrow-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--pl-brand-primary);
    flex-shrink: 0;
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--pl-pulse-base) 60%, transparent);
    animation: pl-pulse 2.2s ease-in-out infinite;
}

.pl-eyebrow-dot--static { display: none; }

.pl-eyebrow--live {
    border-color: color-mix(in srgb, var(--pl-brand-primary) 45%, transparent);
}

@keyframes pl-pulse {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--pl-pulse-base) 60%, transparent); }
    50%      { box-shadow: 0 0 0 9px transparent; }
}

.pl-page-title {
    font-family: var(--pl-font-display);
    font-size: var(--es-h1-hero, clamp(2.5rem, 2.11rem + 1.66vw, 3.875rem));
    font-weight: 700;
    line-height: 1.12;
    margin: 0 0 12px;
    color: var(--pl-text-primary);
    text-wrap: balance;
}

.pl-page-subtitle {
    max-width: 620px;
    margin: 0 auto;
    font-size: var(--es-lead, 1.3125rem);
    line-height: 1.5;
    font-weight: 400;
    color: var(--pl-text-muted);
}

/* Live state: service title + subtitle */
.pl-service-meta {
    margin: 16px auto 0;
    max-width: 760px;
}

.pl-service-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--pl-text-primary);
    margin: 0 0 4px;
}

.pl-service-subtitle {
    font-size: 1rem;
    color: var(--pl-text-muted);
    font-style: italic;
    margin: 0;
}

.pl-service-meta-line {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 18px;
}

.pl-meta-pill {
    display: inline-flex;
    align-items: center;
    padding: 5px 14px;
    border-radius: 999px;
    background: var(--pl-glass);
    border: 1px solid var(--pl-border-soft);
    color: var(--pl-text-muted);
    font-size: var(--pl-fs-min);
    font-weight: 500;
}


/* ═════════════════════════════════════════════════════════════════════════
   COVER — the countdown (before) and the "service has ended" card (after)
   ═════════════════════════════════════════════════════════════════════════ */

.pl-cover {
    position: relative;
    max-width: 1100px;
    margin: 0 auto;
    border-radius: var(--pl-radius-lg);
    overflow: hidden;
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
    border: 1px solid var(--pl-border-soft);
    box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.5);
    min-height: clamp(340px, 44vh, 480px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.pl-cover-vignette {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--pl-pale) 14%, transparent), transparent 60%);
    pointer-events: none;
}

.pl-cover-content {
    position: relative;
    z-index: 1;
    padding: 56px 32px;
    text-align: center;
    max-width: 760px;
}

/* Series / service subtitle above the headline */
.pl-cover-subtitle {
    color: var(--pl-text-muted);
    font-size: var(--pl-fs-min);
    font-weight: 700;
    letter-spacing: var(--pl-tracking);
    text-transform: uppercase;
    margin: 0 0 16px;
}

.pl-cover-headline {
    font-family: var(--pl-font-display);
    font-size: clamp(1.875rem, 1.5rem + 1.6vw, 2.75rem);
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 14px;
    color: var(--pl-text-primary);
    text-wrap: balance;
}

/* The {time} token: set apart in pale teal italic, not orange */
.pl-cover-headline-time {
    color: var(--pl-pale);
    font-style: italic;
}

.pl-cover-subhead {
    color: var(--pl-text-muted);
    font-size: 1.0625rem;
    margin: 0 0 24px;
    line-height: 1.55;
}

.pl-cover-meta {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 18px;
    margin-top: 28px;
    color: var(--pl-text-muted);
    font-size: 0.9375rem;
}

.pl-cover-meta-item + .pl-cover-meta-item::before {
    content: "·";
    margin-right: 18px;
    color: var(--pl-text-faint);
}

/* Buttons: orange primary (ink label) and a white-glass ghost */
.pl-cover-cta-wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 32px;
}

.pl-stage .pl-cover-cta,
.pl-stage .pl-ghost-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: var(--es-btn-height, 48px);
    padding: 13px 26px;
    border-radius: 999px;
    border: 2px solid transparent;
    font-family: var(--pl-font-body);
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0;
    text-transform: none;
    transition: transform 0.2s var(--pl-easing);
}

.pl-stage .pl-cover-cta,
.pl-stage .pl-cover-cta:hover,
.pl-stage .pl-cover-cta:focus {
    background: var(--pl-brand-primary);
    border-color: var(--pl-brand-primary);
    color: var(--pl-ink);
    box-shadow: 0 10px 28px -10px rgba(0, 0, 0, 0.5);
}

.pl-stage .pl-ghost-cta,
.pl-stage .pl-ghost-cta:hover,
.pl-stage .pl-ghost-cta:focus {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.55);
    color: #fff;
}

.pl-stage .pl-cover-cta:hover,
.pl-stage .pl-ghost-cta:hover,
.pl-stage .pl-cover-cta:focus-visible,
.pl-stage .pl-ghost-cta:focus-visible {
    transform: translateY(-2px);
}

.pl-cover-cta-arrow { transition: transform 0.18s var(--pl-easing); }
.pl-cover-cta:hover .pl-cover-cta-arrow,
.pl-ghost-cta:hover .pl-cover-cta-arrow { transform: translateX(4px); }


/* ═════════════════════════════════════════════════════════════════════════
   COUNTDOWN TICKER
   ═════════════════════════════════════════════════════════════════════════ */

.pl-cover-ticker-wrap {
    display: none;
    margin: 28px 0 0;
}

.pl-cover-ticker-wrap.is-visible { display: block; }

.pl-ticker {
    display: inline-flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
}

.pl-ticker-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 104px;
    padding: 18px 14px 14px;
    background: var(--pl-glass);
    border: 1px solid var(--pl-border-soft);
    border-radius: var(--pl-radius-md);
}

.pl-ticker-value {
    font-family: var(--pl-font-body);
    font-variant-numeric: tabular-nums;
    font-size: clamp(2.25rem, 1.8rem + 2vw, 3.25rem);
    font-weight: 700;
    color: #fff;
    line-height: 1;
    letter-spacing: -0.01em;
}

.pl-ticker-value.is-flipping { animation: pl-ticker-flip 0.32s var(--pl-easing); }

@keyframes pl-ticker-flip {
    0%   { transform: translateY(0)   scaleY(1); }
    40%  { transform: translateY(3px) scaleY(0.88); opacity: 0.65; }
    100% { transform: translateY(0)   scaleY(1); }
}

.pl-ticker-label {
    margin-top: 8px;
    font-size: var(--pl-fs-min);
    font-weight: 700;
    letter-spacing: var(--pl-tracking);
    text-transform: uppercase;
    color: var(--pl-text-muted);
}


/* ═════════════════════════════════════════════════════════════════════════
   PLAYER (live + replay)
   ═════════════════════════════════════════════════════════════════════════ */

.pl-player {
    max-width: 1100px;
    margin: 0 auto;
    aspect-ratio: 16 / 9;
    border-radius: var(--pl-radius-lg);
    overflow: hidden;
    background: #000;
    border: 1px solid var(--pl-border-soft);
    box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.6);
}

.pl-player iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.pl-player-fallback {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center;
    padding: 32px;
    color: var(--pl-text-muted);
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
    gap: 18px;
}

.pl-player-fallback p {
    margin: 0;
    max-width: 480px;
    font-size: 1.0625rem;
}

/* Links under the replay: the sermon's own page + the archive */
.pl-post-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 32px;
}


/* ═════════════════════════════════════════════════════════════════════════
   NOTES (live state)
   ═════════════════════════════════════════════════════════════════════════ */

.pl-notes {
    max-width: 760px;
    margin: 48px auto 0;
    padding: 28px 32px;
    background: var(--pl-glass);
    border: 1px solid var(--pl-border-soft);
    border-radius: var(--pl-radius-md);
}

.pl-notes-title {
    margin: 0 0 14px;
    font-family: var(--pl-font-body);
    font-size: var(--pl-fs-min);
    font-weight: 700;
    letter-spacing: var(--pl-tracking);
    text-transform: uppercase;
    color: var(--pl-text-muted);
}

.pl-notes-body {
    color: var(--pl-text-primary);
    font-size: 1.0625rem;
    line-height: 1.7;
}

.pl-notes-body p { margin: 0 0 1em; }
.pl-notes-body p:last-child { margin-bottom: 0; }
.pl-notes-body strong { color: #fff; }

.pl-stage .pl-notes-body a {
    color: #fff;
    text-decoration: underline;
    text-decoration-color: var(--pl-pale);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.pl-notes-body ul,
.pl-notes-body ol {
    padding-left: 1.4em;
    margin: 0 0 1em;
}

.pl-notes-body li { margin-bottom: 0.4em; }


/* ═════════════════════════════════════════════════════════════════════════
   EMPTY CARD (no service scheduled)
   ═════════════════════════════════════════════════════════════════════════ */

.pl-empty-card {
    max-width: 600px;
    margin: 0 auto;
    padding: 64px 32px;
    text-align: center;
    border-radius: var(--pl-radius-lg);
    background: var(--pl-glass);
    border: 1px dashed var(--pl-border-soft);
}

.pl-empty-card-title {
    margin: 0 0 8px;
    font-family: var(--pl-font-display);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--pl-text-primary);
}

.pl-empty-card-sub {
    margin: 0;
    color: var(--pl-text-muted);
}


/* ═════════════════════════════════════════════════════════════════════════
   NEXT STEPS (shown only when the theme doesn't already close the page
   with its own next-steps band)
   ═════════════════════════════════════════════════════════════════════════ */

.pl-next-steps {
    max-width: 1100px;
    margin: 64px auto 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
}

.pl-stage .pl-next-step {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 22px;
    background: var(--pl-glass);
    border: 1px solid var(--pl-border-soft);
    border-radius: var(--pl-radius-md);
    color: var(--pl-text-primary);
    transition: transform 0.18s var(--pl-easing), border-color 0.18s var(--pl-easing), background-color 0.18s var(--pl-easing);
}

.pl-stage .pl-next-step:hover,
.pl-stage .pl-next-step:focus {
    background: var(--pl-glass-2);
    border-color: rgba(255, 255, 255, 0.45);
    transform: translateY(-2px);
    color: var(--pl-text-primary);
}

.pl-next-step-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--pl-radius-sm);
    background: color-mix(in srgb, var(--pl-pale) 16%, transparent);
    color: var(--pl-pale);
    flex-shrink: 0;
}

.pl-next-step-icon svg { width: 20px; height: 20px; }

.pl-next-step-text {
    display: flex;
    flex-direction: column;
    line-height: 1.35;
    min-width: 0;
}

.pl-next-step-label {
    font-size: 1rem;
    font-weight: 600;
    color: var(--pl-text-primary);
}

.pl-next-step-desc {
    margin-top: 2px;
    font-size: var(--pl-fs-min);
    color: var(--pl-text-muted);
}


/* ═════════════════════════════════════════════════════════════════════════
   LIVE BAND (the pulpit/live block) — one compact strip for a homepage
   ═════════════════════════════════════════════════════════════════════════ */

.pl-stage.pl-stage--band { padding: 56px 24px; }

.pl-band {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 24px 40px;
}

.pl-band-text { min-width: 0; flex: 1 1 420px; }
.pl-band .pl-eyebrow { margin-bottom: 14px; }

.pl-band-title {
    font-family: var(--pl-font-display);
    font-size: clamp(1.625rem, 1.3rem + 1.2vw, 2.25rem);
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
    color: var(--pl-text-primary);
    text-wrap: balance;
}

.pl-band .pl-cover-ticker-wrap { margin-top: 18px; }
.pl-band .pl-ticker { justify-content: flex-start; }
.pl-band .pl-ticker-cell { min-width: 78px; padding: 12px 10px 10px; }
.pl-band .pl-ticker-value { font-size: clamp(1.75rem, 1.5rem + 1vw, 2.25rem); }

@media (max-width: 782px) {
    .pl-stage.pl-stage--band { padding: 44px 16px; }
    .pl-band { justify-content: center; text-align: center; }
    .pl-band .pl-ticker { justify-content: center; }
}


/* ═════════════════════════════════════════════════════════════════════════
   RESPONSIVE — suite breakpoints 600 / 782 / 1024; the 420 block only
   tightens the ticker on very narrow phones.
   ═════════════════════════════════════════════════════════════════════════ */

@media (max-width: 782px) {
    .pl-stage { padding: 48px 16px 64px; }
    .pl-header { margin-bottom: 28px; }
    .pl-cover-content { padding: 40px 20px; }
    .pl-ticker { gap: 8px; }
    .pl-ticker-cell { min-width: 74px; padding: 14px 8px 10px; }
    .pl-next-steps { margin-top: 40px; gap: 10px; }
    .pl-notes { margin-top: 32px; padding: 22px; }
    .pl-page-subtitle { font-size: 1.0625rem; }
}

@media (max-width: 420px) {
    .pl-ticker { gap: 6px; }
    .pl-ticker-cell { min-width: 66px; padding: 12px 6px 9px; }
    .pl-ticker-label { letter-spacing: 0.08em; }
}

@media (prefers-reduced-motion: reduce) {
    .pl-eyebrow-dot,
    .pl-ticker-value.is-flipping { animation: none !important; }
    .pl-cover-cta,
    .pl-ghost-cta,
    .pl-cover-cta-arrow,
    .pl-next-step { transition: none !important; }
}


/* ════════════════════════════════════════════════════════════════════════
   FULL-BLEED THEME COMPATIBILITY (v0.4.1)
   ════════════════════════════════════════════════════════════════════════
   .pl-stage is a cinematic dark hero meant to reach the viewport edges; boxed
   inside a theme container it shows broken side margins. These rules run under
   body.pulpit-live-fullbleed (added by Pulpit_Live::add_body_class on any page
   with [pulpit_live]) so the stage renders edge to edge with no sidebar,
   regardless of the page's Astra Content Layout — no per-page setup. All rules
   are scoped to the body class and are harmless when a selector is absent.
   Inner blocks (.pl-header/.pl-cover/.pl-player) keep their own max-width:1100px
   + margin:auto, so content stays centered while the stage bleeds full width. */

/* Hide sidebar widget areas */
body.pulpit-live-fullbleed #secondary,
body.pulpit-live-fullbleed .widget-area,
body.pulpit-live-fullbleed .ast-sidebar,
body.pulpit-live-fullbleed #left-sidebar,
body.pulpit-live-fullbleed #right-sidebar,
body.pulpit-live-fullbleed .sidebar {
    display: none !important;
}

/* Release theme container max-widths and padding */
body.pulpit-live-fullbleed .ast-container,
body.pulpit-live-fullbleed .ast-container-fluid,
body.pulpit-live-fullbleed #primary,
body.pulpit-live-fullbleed .content-area,
body.pulpit-live-fullbleed .site-content,
body.pulpit-live-fullbleed .entry-content,
body.pulpit-live-fullbleed .wp-block-post-content {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Undo Astra's boxed / content-boxed card styling around the article */
body.pulpit-live-fullbleed .ast-separate-container .ast-article-single,
body.pulpit-live-fullbleed .ast-separate-container .ast-article-post,
body.pulpit-live-fullbleed .ast-article-single {
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    padding: 0 !important;
}

/* Even without the body class, force the stage to stretch full-width inside a
   constrained container (e.g. a boxed page builder column). */
html body .entry-content .pl-stage,
html body .post-content .pl-stage,
html body article .pl-stage,
.entry-content > .pl-stage,
.post-content > .pl-stage {
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    width: 100vw !important;
    max-width: 100vw !important;
}