/* sermons/css/sermons.css
   BraveLife Sermons — all styles for hub + detail pages.
   Design tokens match events.css and main site. */

/* ========== RESET & BASE ========== */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 140px; }

/* ========== A11Y: SKIP LINK ========== */
.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  z-index: 1000;
}

.skip-link:focus {
  position: fixed;
  left: 16px;
  top: 16px;
  width: auto;
  height: auto;
  padding: 10px 16px;
  border-radius: 9999px;
  background: #5FFCC0;
  color: #001310;
  font-weight: 600;
  font-size: 14px;
  outline: 2px solid #5FFCC0;
  outline-offset: 2px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4);
}

/* Section pager chip focus ring — pairs with active glow but with
   thicker mint outline so keyboard users see focus distinctly. */
.section-pager__chip:focus-visible {
  outline: 2px solid #5FFCC0;
  outline-offset: 2px;
}

/* Reduced motion: kill chip transitions, scroll smoothing, and
   skeleton shimmer transform so motion-sensitive users get static UI. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .section-pager__chip { transition: none; }
  .skeleton { animation: none; }
}
body {
  font-family: 'Manrope', 'Inter', -apple-system, sans-serif;
  background: #000;
  color: #fff;
  overflow-x: hidden;
}
a { text-decoration: none; color: inherit; }
img { display: block; max-width: 100%; }

/* ========== SHARED TOKENS ========== */
.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

.gradient-text {
  background: linear-gradient(152.57deg, #FF5C00 14.71%, #FF8A3D 53.35%, #FFB347 82.59%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.section-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 500;
  color: #fff;
  margin-bottom: 12px;
}

.section-label .label-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(152.57deg, #FF5C00 14.71%, #FF8A3D 53.35%, #FFB347 82.59%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 0 10px rgba(255,92,0,0.4);
}

.section-label .label-icon svg { width: 12px; height: 12px; }

.section-title {
  font-size: 42px;
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 16px;
}

.section-subtitle {
  font-size: 16px;
  font-weight: 300;
  color: #D9D9D9;
  max-width: 700px;
  margin-bottom: 48px;
}

/* ========== GLASS CARD ========== */
.glass-card {
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  box-shadow: 0px 4px 23.4px rgba(0,0,0,0.1), inset 0 1px 0 0 rgba(255,255,255,0.28);
}

.glass-border {
  border: 1px solid transparent;
  background:
    linear-gradient(rgba(18,18,20,0.95), rgba(18,18,20,0.95)) padding-box,
    linear-gradient(160deg,
      rgba(255,255,255,0.38) 0%,
      rgba(255,255,255,0.25) 10%,
      rgba(255,255,255,0.03) 25%,
      rgba(255,255,255,0.0) 50%,
      rgba(255,255,255,0.03) 75%,
      rgba(255,255,255,0.22) 90%,
      rgba(255,255,255,0.32) 100%) border-box;
}

/* ========== VIEW TOGGLE ========== */
.view-toggle {
  display: flex;
  gap: 4px;
  justify-content: flex-end;
  margin-bottom: 24px;
}

.view-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.4);
  cursor: pointer;
  transition: all 0.2s;
}

.view-btn svg { width: 18px; height: 18px; }

.view-btn:hover {
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.7);
}

.view-btn.active {
  background: rgba(255,92,0,0.15);
  border-color: rgba(255,92,0,0.3);
  color: #FF8A3D;
}

/* ========== TABLE VIEW ========== */
.sermons-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 8px;
}

.sermons-table thead th {
  text-align: left;
  padding: 8px 16px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: rgba(255,255,255,0.4);
}

.sermons-table tbody tr {
  background: rgba(255,255,255,0.04);
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
}

.sermons-table tbody tr:hover {
  background: rgba(255,255,255,0.08);
  transform: translateY(-1px);
}

.sermons-table td {
  padding: 16px;
  vertical-align: middle;
}

.sermons-table td:first-child { border-radius: 12px 0 0 12px; }
.sermons-table td:last-child { border-radius: 0 12px 12px 0; }

.table-title {
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 2px;
}

.table-location {
  font-size: 12px;
  color: #999;
}

.table-date {
  font-size: 13px;
  font-weight: 500;
  color: #D9D9D9;
  white-space: nowrap;
}

.table-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.table-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 9999px;
  font-size: 10px;
  font-weight: 500;
  background: rgba(255,92,0,0.12);
  color: #FFB347;
}

.table-media {
  display: flex;
  gap: 8px;
  align-items: center;
}

.table-media-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: rgba(255,255,255,0.5);
}

.table-media-badge svg { width: 14px; height: 14px; }

.table-arrow {
  color: rgba(255,255,255,0.2);
  font-size: 18px;
  transition: color 0.2s;
}

tr:hover .table-arrow { color: #FF8A3D; }

/* ========== HERO BANNER ========== */
.sermons-hero {
  padding: 60px 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.sermons-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  height: 400px;
  background: radial-gradient(ellipse, rgba(255,92,0,0.15) 0%, transparent 70%);
  pointer-events: none;
}

.sermons-hero .section-title { font-size: 48px; }

/* ========== TAG FILTER PILLS ========== */
.tag-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 40px;
  justify-content: center;
}

.tag-pill {
  display: inline-flex;
  align-items: center;
  padding: 8px 18px;
  border-radius: 9999px;
  font-size: 13px;
  font-weight: 500;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.7);
  cursor: pointer;
  transition: all 0.2s;
}

.tag-pill:hover {
  background: rgba(255,255,255,0.1);
  color: #fff;
}

.tag-pill.active {
  background: linear-gradient(152.57deg, #FF5C00, #FF8A3D, #FFB347);
  border-color: transparent;
  color: #fff;
  font-weight: 600;
  box-shadow: 0 2px 12px rgba(255,92,0,0.3);
}

/* ========== SERMONS SECTION ========== */
.sermons-section {
  padding: 0 0 80px;
}

/* ========== SERMON CARDS GRID ========== */
.sermons-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.sermon-card {
  display: block;
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.25s ease-out, box-shadow 0.25s ease-out;
}

.sermon-card:hover {
  transform: scale(1.02);
  box-shadow: 0 8px 32px rgba(255,92,0,0.15);
}

.sermon-card-image {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  position: relative;
  background: linear-gradient(135deg, rgba(255,92,0,0.1) 0%, rgba(30,30,30,1) 100%);
}

.sermon-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease-out;
}

.sermon-card:hover .sermon-card-image img {
  transform: scale(1.05);
}

/* Video/audio badge on card */
.sermon-card-badge {
  position: absolute;
  bottom: 12px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 9999px;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(8px);
  font-size: 11px;
  font-weight: 500;
  color: #fff;
}

.sermon-card-badge svg { width: 12px; height: 12px; }

.sermon-card-body {
  padding: 20px;
}

.sermon-card-date {
  font-size: 12px;
  font-weight: 500;
  color: #FF8A3D;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.sermon-card-title {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: 8px;
}

.sermon-card-location {
  font-size: 13px;
  font-weight: 400;
  color: #999;
  margin-bottom: 12px;
}

.sermon-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.sermon-card-tag {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 500;
  background: rgba(255,92,0,0.12);
  color: #FFB347;
}

/* ========== EMPTY STATE ========== */
.sermons-empty {
  text-align: center;
  padding: 80px 24px;
  color: #999;
}

.sermons-empty svg {
  width: 48px;
  height: 48px;
  margin-bottom: 16px;
  opacity: 0.4;
}

.sermons-empty h3 {
  font-size: 20px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 8px;
}

.sermons-empty p {
  font-size: 14px;
  font-weight: 300;
}

/* ========== SERMON DETAIL — HERO ========== */
.detail-hero {
  position: relative;
  padding: 100px 0 0;
}

.detail-hero img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.detail-hero::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 70%;
  background: linear-gradient(to top, #000 0%, rgba(0,0,0,0.8) 40%, transparent 100%);
  z-index: 1;
}

.detail-hero-content {
  position: relative;
  z-index: 2;
  padding: 24px 0 32px;
  text-align: center;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  color: rgba(255,255,255,0.7);
  margin-bottom: 24px;
  transition: color 0.2s;
  position: relative;
  z-index: 2;
}

.back-link:hover { color: #fff; }

.detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  font-size: 14px;
  color: #D9D9D9;
}

.detail-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.detail-meta-item svg {
  width: 16px;
  height: 16px;
  opacity: 0.6;
}

.detail-title {
  font-size: 42px;
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 12px;
  text-wrap: balance;
}

.detail-description {
  font-size: 16px;
  font-weight: 400;
  color: #F0F0F0;
  max-width: 700px;
  margin: 0 auto;
  line-height: 1.6;
}

.detail-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
  justify-content: center;
}

.detail-tag {
  display: inline-block;
  padding: 5px 14px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 500;
  background: rgba(255,92,0,0.15);
  color: #FFB347;
  transition: background 0.2s;
}

.detail-tag:hover {
  background: rgba(255,92,0,0.25);
}

/* ========== SERMON NOTES SECTION ========== */
.sermon-notes-section {
  padding: 60px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.sermon-notes-content {
  max-width: 800px;
  margin: 0 auto;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.6;
  color: #E0E0E0;
  text-align: left;
}

.sermon-notes-content h1,
.sermon-notes-content h2,
.sermon-notes-content h3 {
  font-weight: 600;
  color: #fff;
  margin-top: 32px;
  margin-bottom: 12px;
  text-wrap: balance;
}

.sermon-notes-content h1 { font-size: 28px; }
.sermon-notes-content h2 { font-size: 26px; }
.sermon-notes-content h3 { font-size: 20px; }

.sermon-notes-content h2 + h3 {
  margin-top: 16px;
}

.sermon-notes-content p,
.sermon-notes-content li {
  text-wrap: pretty;
  hyphens: auto;
  -webkit-hyphens: auto;
}

.sermon-notes-content p {
  margin-bottom: 16px;
}

.sermon-notes-content ul,
.sermon-notes-content ol {
  margin-left: 24px;
  margin-bottom: 16px;
}

.sermon-notes-content li {
  margin-bottom: 8px;
}

.sermon-notes-content blockquote {
  border-left: 3px solid #FF8A3D;
  padding: 16px 20px;
  margin: 20px 0;
  background: rgba(255,92,0,0.06);
  border-radius: 0 12px 12px 0;
  font-style: italic;
  color: #D9D9D9;
}

.sermon-notes-content strong {
  font-weight: 600;
  color: #fff;
}

.sermon-notes-content a {
  color: #FF8A3D;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ========== TRANSCRIPT SECTION ========== */
.sermon-transcript-section {
  padding: 60px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.transcript-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 9999px;
  font-size: 14px;
  font-weight: 500;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.7);
  cursor: pointer;
  transition: all 0.2s;
  margin-top: 16px;
}

.transcript-toggle:hover {
  background: rgba(255,255,255,0.1);
  color: #fff;
}

.transcript-content {
  display: none;
}

.transcript-content.expanded {
  display: block;
  animation: fadeIn 0.3s ease-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ========== VIDEO SECTION ========== */
.sermon-video-section {
  padding: 60px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.video-embed {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  border-radius: 16px;
  overflow: hidden;
  background: #111;
}

.video-embed iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* ========== SCRIPTURES SECTION ========== */
.sermon-scriptures-section {
  padding: 60px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.scriptures-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.scripture-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 9999px;
  font-size: 13px;
  font-weight: 500;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  color: #D9D9D9;
  transition: all 0.2s;
}

.scripture-pill svg {
  width: 14px;
  height: 14px;
  opacity: 0.5;
}

.scripture-pill:hover {
  background: rgba(255,255,255,0.1);
  color: #fff;
}

/* ========== RELATED SERMONS ========== */
.related-sermons-section {
  padding: 60px 0 80px;
}

.related-sermons-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* ========== SKELETON LOADERS ========== */
.skeleton {
  background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.04) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
  border-radius: 16px;
}

.skeleton-card { height: 320px; }
.skeleton-text { height: 20px; border-radius: 8px; margin-bottom: 12px; }
.skeleton-text.short { width: 60%; }

@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ========== FADE-UP ANIMATION ========== */
/* Intentionally no-op: never hide content with opacity:0. */
.fade-up,
.fade-up.visible {
  opacity: 1;
  transform: none;
}

/* ========== RESPONSIVE ========== */
@media (max-width: 1024px) {
  .sermons-grid { grid-template-columns: repeat(2, 1fr); }
  .related-sermons-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  html { scroll-padding-top: 110px; }
  .sermons-hero { padding: 40px 0; }
  .sermons-hero .section-title { font-size: 32px; }
  .section-title { font-size: 28px; }
  .sermons-grid { grid-template-columns: 1fr; }
  .related-sermons-grid { grid-template-columns: 1fr; }
  .detail-title { font-size: 28px; }
  .detail-hero { min-height: 300px; padding: 24px 0 0; }
  .sermon-notes-content { line-height: 1.55; }
  .sermons-table thead { display: none; }
  .sermons-table,
  .sermons-table tbody,
  .sermons-table tr,
  .sermons-table td { display: block; width: 100%; }
  .sermons-table tbody tr { margin-bottom: 8px; padding: 16px; border-radius: 12px; }
  .sermons-table td { padding: 4px 0; border-radius: 0 !important; }
  .sermons-table td:empty { display: none; }
}

/* ============================================================
   Section Pager (scrollspy) — sticky chip nav for sermon notes
   Auto-built by sermon-detail.js from <h2> elements inside
   .sermon-notes-content. Hidden when there are < 2 sections.
   ============================================================ */

.section-pager {
  position: sticky;
  top: 80px;
  z-index: 40;
  background: rgba(8, 10, 12, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin: 0 0 24px;
}

.section-pager__inner {
  display: flex;
  gap: 8px;
  padding: 12px 24px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.section-pager__inner::-webkit-scrollbar { display: none; }

.section-pager__chip {
  flex: 0 0 auto;
  scroll-snap-align: start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.62);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  white-space: nowrap;
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
  text-decoration: none;
}

.section-pager__chip:hover {
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.9);
}

.section-pager__chip__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
}

.section-pager__chip--active {
  background: rgba(95, 252, 192, 0.10);
  border-color: rgba(95, 252, 192, 0.45);
  color: #fff;
  box-shadow: 0 0 0 1px rgba(95, 252, 192, 0.18), 0 6px 24px -10px rgba(95, 252, 192, 0.45);
}

.section-pager__chip--active .section-pager__chip__num {
  background: rgba(95, 252, 192, 0.85);
  color: #001310;
}

/* Smooth-scroll anchor offset clears nav (80) + pager (~46) + breathing room */
.sermon-notes-content h2[id],
.sermon-notes-content h3[id] {
  scroll-margin-top: 140px;
}

@media (max-width: 768px) {
  .section-pager { top: 56px; }
  .section-pager__inner { padding: 10px 16px; gap: 6px; }
  .section-pager__chip { font-size: 12px; padding: 7px 12px; }
  .sermon-notes-content h2[id],
  .sermon-notes-content h3[id] { scroll-margin-top: 110px; }
}

/* ============================================================
   Sermon detail page — center alignment for all sections.
   Section-level text-align centers inline-flex labels and any
   block headings; reading content (.sermon-notes-content) opts
   back into left-aligned text for readability.
   ============================================================ */
.sermon-notes-section,
.sermon-video-section,
.sermon-transcript-section,
.sermon-scriptures-section,
.related-sermons-section {
  text-align: center;
}

.scriptures-list { justify-content: center; }
.related-sermons-section .section-title { text-align: center; }

/* Pager chips center when they fit; "safe" falls back to start
   when chips overflow on mobile so they remain reachable via
   horizontal scroll. */
.section-pager__inner {
  justify-content: safe center;
}

/* ============================================================
   Living Margin + Progress Beacon + View Transitions
   Three layered motion cues that communicate "this is where you
   are in the message" without ever moving content. All driven by
   CSS variables that JS updates each scroll frame.
   ============================================================ */

/* Progress beacon — 2px mint bar pinned to the bottom edge of the
   sticky chip pager. Fills left→right as the reader scrolls through
   the active section, then resets to 0 when the active chip changes.
   `--progress` is a unit value 0..1 set in JS. */
.section-pager__progress {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 100%;
  background: linear-gradient(to right,
    rgba(95, 252, 192, 0.85) 0%,
    rgba(95, 252, 192, 0.85) 100%);
  transform: scaleX(var(--progress, 0));
  transform-origin: left;
  transition: transform 100ms linear;
  pointer-events: none;
  z-index: 1;
}

/* The pager already has `position: sticky`, which establishes a
   containing block for absolutely positioned descendants — so the
   progress bar anchors to the pager's bottom edge correctly. */

/* Living margin line — a 2px mint vertical line in the left margin
   of the active section's heading. Grows top-down with scroll
   progress; jumps to the new heading on section handoff. JS sets
   `--margin-progress` (0..1) on the active <h2 id> and clears it
   on every other heading. */
.sermon-notes-content h2[id] {
  position: relative;
}

.sermon-notes-content h2[id]::before {
  content: "";
  position: absolute;
  left: -16px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: rgba(95, 252, 192, 0.65);
  transform: scaleY(var(--margin-progress, 0));
  transform-origin: top;
  transition: transform 120ms linear;
  pointer-events: none;
}

@media (max-width: 768px) {
  .sermon-notes-content h2[id]::before { left: -8px; }
}

/* View Transitions — name the active chip so the mint glow morphs
   smoothly between chips on handoff. The API is opt-in: browsers
   without support fall through to the synchronous class swap. */
.section-pager__chip--active {
  view-transition-name: bln-chip-active;
}

::view-transition-old(bln-chip-active),
::view-transition-new(bln-chip-active) {
  animation-duration: 240ms;
  animation-timing-function: cubic-bezier(0.32, 0.72, 0, 1);
}

/* Honor the system reduced-motion preference: kill the linear
   transitions on the beacons (they remain accurate, just no tween). */
@media (prefers-reduced-motion: reduce) {
  .section-pager__progress { transition: none; }
  .sermon-notes-content h2[id]::before { transition: none; }
}

/* === Reading size toggle === */
/* 3-step reading scale (1x / 1.18x / 1.36x) controlled via the
   --bln-text-scale CSS variable on <html>. All reading content
   (hero description, notes body, headings, scripture pills) scales
   together, so the page stays visually coherent and centered.
   Toggle pill is bottom-right, sized to Apple HIG (44px tall) so
   iOS doesn't interpret taps as double-tap-zoom. */

html { --bln-text-scale: 1; }
html[data-bln-size="lg"] { --bln-text-scale: 1.18; }
html[data-bln-size="xl"] { --bln-text-scale: 1.36; }

/* Apply the scale across reading content. !important is scoped to
   these rules so the existing px rules (which we want as base values)
   are overridden only when the user has opted in. */
.sermon-notes-content { font-size: calc(17px * var(--bln-text-scale)) !important; }
.sermon-notes-content h2 { font-size: calc(26px * var(--bln-text-scale)) !important; }
.sermon-notes-content h3 { font-size: calc(20px * var(--bln-text-scale)) !important; }
.sermon-notes-content p,
.sermon-notes-content li,
.sermon-notes-content blockquote { font-size: inherit; }
.detail-description { font-size: calc(16px * var(--bln-text-scale)) !important; }
.detail-title { font-size: calc(42px * var(--bln-text-scale)) !important; }
.scripture-pill { font-size: calc(13px * var(--bln-text-scale)) !important; }

/* Mobile reading content is slightly tighter at base (line-height 1.55) */
@media (max-width: 768px) {
  .sermon-notes-content { font-size: calc(17px * var(--bln-text-scale)) !important; }
  .detail-title { font-size: calc(28px * var(--bln-text-scale)) !important; }
}

.bln-size-toggle {
  position: fixed;
  bottom: 16px;
  right: 16px;
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px;
  background: rgba(8, 10, 12, 0.92);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
  touch-action: manipulation;  /* Prevent iOS double-tap zoom on the pill */
}

.bln-size-toggle__btn {
  appearance: none;
  -webkit-appearance: none;
  min-width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(255, 255, 255, 0.92);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease;
  touch-action: manipulation;  /* Disable iOS double-tap zoom on the button itself */
  -webkit-tap-highlight-color: transparent;
}

.bln-size-toggle__btn:hover {
  background: rgba(255, 255, 255, 0.08);
}

.bln-size-toggle__btn:focus-visible {
  outline: 2px solid #7CE7B0;
  outline-offset: 2px;
}

/* Visible "active step" indicator on the size pill */
.bln-size-toggle__step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  padding: 0 8px;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  user-select: none;
}

@media (prefers-reduced-motion: reduce) {
  .bln-size-toggle__btn {
    transition: none;
  }
}

/* === Inline scripture drawer === */
/* Tappable scripture refs auto-wrapped inside .sermon-notes-content,
   plus an enhanced .scripture-pill click target. Tapping opens the
   bottom-sheet (mobile) / right-side panel (desktop) drawer below. */

.bln-scripture-ref {
  display: inline;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-decoration: underline dotted rgba(95, 252, 192, 0.4);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color 160ms ease, text-decoration-color 160ms ease;
}

.bln-scripture-ref:hover {
  color: #fff;
  text-decoration-color: rgba(95, 252, 192, 0.8);
}

.bln-scripture-ref:focus-visible {
  outline: 2px solid rgba(95, 252, 192, 0.85);
  outline-offset: 3px;
  border-radius: 3px;
}

/* Scripture pill is upgraded to a tappable button via JS — give a
   subtle interactive cue so users know they're clickable. */
.scripture-pill[role="button"] { cursor: pointer; }
.scripture-pill[role="button"]:focus-visible {
  outline: 2px solid rgba(95, 252, 192, 0.85);
  outline-offset: 2px;
}

/* Body scroll lock while drawer is open */
body.bln-drawer-open {
  overflow: hidden;
}

/* Drawer container (wrapper) — does not block pointer events when closed */
.bln-drawer {
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
}
.bln-drawer.is-open { pointer-events: auto; }

.bln-drawer-scrim {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  z-index: 90;
  opacity: 0;
  transition: opacity 220ms ease;
  pointer-events: none;
}
.bln-drawer-scrim.is-open {
  opacity: 1;
  pointer-events: auto;
}

.bln-drawer-panel {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 91;
  display: flex;
  flex-direction: column;
  max-height: 70vh;
  background: rgba(12, 14, 16, 0.96);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.5);
  transform: translateY(100%);
  transition: transform 240ms cubic-bezier(0.32, 0.72, 0, 1);
  color: #E8E8E8;
  pointer-events: auto;
}
.bln-drawer-panel.is-open { transform: translateY(0); }
.bln-drawer-panel:focus { outline: none; }

@media (min-width: 768px) {
  .bln-drawer-panel {
    left: auto;
    right: 0;
    top: 0;
    bottom: 0;
    width: min(480px, 100vw);
    max-height: 100vh;
    border-radius: 16px 0 0 16px;
    border-top: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    transform: translateX(100%);
    box-shadow: -8px 0 40px rgba(0, 0, 0, 0.5);
  }
  .bln-drawer-panel.is-open { transform: translateX(0); }
}

.bln-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  flex: 0 0 auto;
}

.bln-drawer-title {
  font-size: 18px;
  font-weight: 600;
  color: #fff;
  margin: 0;
  line-height: 1.3;
}

.bln-drawer-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
}
.bln-drawer-close:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}
.bln-drawer-close:focus-visible {
  outline: 2px solid rgba(95, 252, 192, 0.85);
  outline-offset: 2px;
}

.bln-drawer-body {
  padding: 0 20px 16px;
  overflow-y: auto;
  flex: 1 1 auto;
  -webkit-overflow-scrolling: touch;
}

.bln-drawer-passage { padding-top: 16px; }

.bln-drawer-verse {
  display: block;
  font-size: 17px;
  line-height: 1.6;
  color: #E8E8E8;
  font-weight: 400;
  margin: 0 0 12px;
  padding-left: 28px;
  text-indent: -28px;
}

.bln-drawer-verse-num {
  display: inline-block;
  width: 24px;
  margin-right: 4px;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  font-weight: 600;
  color: rgba(95, 252, 192, 0.85);
  vertical-align: baseline;
}

.bln-drawer-verse-text { color: #E8E8E8; }

.bln-drawer-text {
  font-size: 17px;
  line-height: 1.6;
  color: #E8E8E8;
  margin: 16px 0 0;
}

.bln-drawer-attribution {
  margin-top: 12px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.45);
  letter-spacing: 0.02em;
}

.bln-drawer-error {
  margin-top: 16px;
  font-size: 15px;
  line-height: 1.55;
  color: #E8E8E8;
}
.bln-drawer-error a {
  color: rgba(95, 252, 192, 0.95);
  text-decoration: underline;
}

/* Skeleton (reuses skeleton-shimmer keyframe) */
.bln-drawer-skeleton {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 20px;
}

.bln-drawer-skeleton-line {
  height: 16px;
  border-radius: 8px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.04) 25%, rgba(255, 255, 255, 0.08) 50%, rgba(255, 255, 255, 0.04) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s infinite;
}

.bln-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.bln-drawer-footer {
  display: flex;
  gap: 8px;
  padding: 12px 20px 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  flex: 0 0 auto;
}

.bln-drawer-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 1 1 0;
  padding: 12px 16px;
  border-radius: 12px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid transparent;
  color: rgba(255, 255, 255, 0.92);
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.04)),
    linear-gradient(160deg,
      rgba(255, 255, 255, 0.38) 0%,
      rgba(255, 255, 255, 0.18) 18%,
      rgba(255, 255, 255, 0.02) 45%,
      rgba(255, 255, 255, 0.02) 55%,
      rgba(255, 255, 255, 0.18) 82%,
      rgba(255, 255, 255, 0.32) 100%);
  background-origin: border-box;
  background-clip: padding-box, border-box;
}

.bln-drawer-btn:hover {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.07)),
    linear-gradient(160deg,
      rgba(255, 255, 255, 0.45) 0%,
      rgba(255, 255, 255, 0.22) 18%,
      rgba(255, 255, 255, 0.04) 45%,
      rgba(255, 255, 255, 0.04) 55%,
      rgba(255, 255, 255, 0.22) 82%,
      rgba(255, 255, 255, 0.42) 100%);
  color: #fff;
}

.bln-drawer-btn:focus-visible {
  outline: 2px solid rgba(95, 252, 192, 0.85);
  outline-offset: 2px;
}

.bln-drawer-btn--copy {
  background-image:
    linear-gradient(rgba(95, 252, 192, 0.10), rgba(95, 252, 192, 0.06)),
    linear-gradient(160deg,
      rgba(95, 252, 192, 0.55) 0%,
      rgba(95, 252, 192, 0.25) 25%,
      rgba(95, 252, 192, 0.04) 50%,
      rgba(95, 252, 192, 0.25) 75%,
      rgba(95, 252, 192, 0.55) 100%);
  color: #E8FFF6;
  box-shadow: 0 6px 24px -10px rgba(95, 252, 192, 0.45);
}

.bln-drawer-btn--copy:hover {
  background-image:
    linear-gradient(rgba(95, 252, 192, 0.16), rgba(95, 252, 192, 0.10)),
    linear-gradient(160deg,
      rgba(95, 252, 192, 0.7) 0%,
      rgba(95, 252, 192, 0.32) 25%,
      rgba(95, 252, 192, 0.06) 50%,
      rgba(95, 252, 192, 0.32) 75%,
      rgba(95, 252, 192, 0.7) 100%);
  color: #fff;
}

/* Toast — mint-glow confirmation, 2s lifetime via JS */
.bln-toast {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  z-index: 95;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: #001310;
  background: rgba(95, 252, 192, 0.92);
  box-shadow: 0 6px 24px -8px rgba(95, 252, 192, 0.55), 0 0 0 1px rgba(95, 252, 192, 0.4);
  opacity: 0;
  transition: opacity 220ms ease, transform 220ms ease;
  pointer-events: none;
}
.bln-toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .bln-drawer-scrim,
  .bln-drawer-panel,
  .bln-toast {
    transition: opacity 120ms linear !important;
  }
  .bln-drawer-panel {
    transform: none !important;
    opacity: 0;
  }
  .bln-drawer-panel.is-open {
    transform: none !important;
    opacity: 1;
  }
  .bln-drawer-skeleton-line {
    animation: none;
  }
}

/* === Live Mode === */
/* Pastor cues active section from a tablet; readers see a "LIVE" badge in the
   chip pager, a soft mint pulse on the active chip + heading, and an opt-in
   "Follow Live" floating pill that auto-scrolls to the active section. The
   reader-side JS toggles classes; the styles below own all visuals. */

.section-pager { position: relative; }

.bln-live-badge {
  position: absolute;
  top: 8px;
  right: 12px;
  display: none;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #fff;
  background: rgba(220, 38, 38, 0.16);
  border: 1px solid rgba(248, 113, 113, 0.45);
  border-radius: 999px;
  pointer-events: none;
  z-index: 5;
}
.bln-live-on .bln-live-badge { display: inline-flex; }
.bln-live-badge__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
  animation: bln-live-dot-pulse 1.6s ease-out infinite;
}
@keyframes bln-live-dot-pulse {
  0%   { box-shadow: 0 0 0 0   rgba(239, 68, 68, 0.55); }
  70%  { box-shadow: 0 0 0 8px rgba(239, 68, 68, 0); }
  100% { box-shadow: 0 0 0 0   rgba(239, 68, 68, 0); }
}

/* Active chip — soft mint glow + 4s pulse */
.section-pager__chip.bln-live-active {
  border-color: rgba(110, 231, 183, 0.55) !important;
  background: rgba(16, 185, 129, 0.10);
  color: #d1fae5;
  box-shadow: 0 0 0 1px rgba(110, 231, 183, 0.35), 0 0 20px rgba(16, 185, 129, 0.25);
  animation: bln-live-chip-pulse 4s ease-in-out infinite;
}
@keyframes bln-live-chip-pulse {
  0%, 100% {
    box-shadow: 0 0 0 1px rgba(110, 231, 183, 0.30), 0 0 14px rgba(16, 185, 129, 0.18);
  }
  50% {
    box-shadow: 0 0 0 1px rgba(110, 231, 183, 0.55), 0 0 26px rgba(16, 185, 129, 0.40);
  }
}

/* Active heading — single mint underline drawn-once on activation. We use a
   distinct visual (underline) to avoid colliding with any left-border
   "living margin" treatments other agents may add. */
.sermon-notes-content h2.bln-live-active {
  position: relative;
  color: #ecfdf5;
  transition: color 280ms ease;
}
.sermon-notes-content h2.bln-live-active::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  height: 2px;
  width: 0;
  background: linear-gradient(90deg, rgba(16,185,129,0) 0%, rgba(16,185,129,0.95) 50%, rgba(16,185,129,0) 100%);
  border-radius: 2px;
  animation: bln-live-underline-draw 900ms cubic-bezier(.2,.7,.2,1) forwards,
             bln-live-underline-glow 4s ease-in-out 900ms infinite;
}
@keyframes bln-live-underline-draw {
  from { width: 0; opacity: 0; }
  to   { width: min(180px, 40%); opacity: 1; }
}
@keyframes bln-live-underline-glow {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(16, 185, 129, 0.35)); }
  50%      { filter: drop-shadow(0 0 10px rgba(16, 185, 129, 0.65)); }
}

/* Floating "Follow Live" pill — bottom-left, dormant when not live */
.bln-follow-live {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px 9px 11px;
  font: 500 13px/1 'Kanit','Inter',-apple-system,sans-serif;
  color: #e5e7eb;
  background: rgba(17, 17, 17, 0.72);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  backdrop-filter: blur(10px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  cursor: pointer;
  user-select: none;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
  transition: border-color 200ms ease, color 200ms ease, background 200ms ease, transform 120ms ease;
}
.bln-follow-live:hover { transform: translateY(-1px); }
.bln-follow-live[hidden] { display: none !important; }
.bln-follow-live__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(110, 231, 183, 0.35);
  box-shadow: inset 0 0 0 1px rgba(110, 231, 183, 0.55);
  transition: background 200ms ease, box-shadow 200ms ease;
}
/* Soft mint pulse on the pill itself when live (dormant pill = no pulse) */
.bln-live-on .bln-follow-live {
  animation: bln-follow-live-breath 4s ease-in-out infinite;
}
@keyframes bln-follow-live-breath {
  0%, 100% { box-shadow: 0 6px 20px rgba(0,0,0,0.35), 0 0 0 0 rgba(16, 185, 129, 0.0); }
  50%      { box-shadow: 0 6px 20px rgba(0,0,0,0.35), 0 0 22px 0 rgba(16, 185, 129, 0.28); }
}
.bln-follow-live.is-on {
  color: #d1fae5;
  border-color: rgba(110, 231, 183, 0.65);
  background: rgba(16, 185, 129, 0.16);
}
.bln-follow-live.is-on .bln-follow-live__dot {
  background: #34d399;
  box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.25);
}

/* Reduced motion: disable all Live Mode animations */
@media (prefers-reduced-motion: reduce) {
  .bln-live-badge__dot,
  .section-pager__chip.bln-live-active,
  .bln-live-on .bln-follow-live { animation: none !important; }
  .sermon-notes-content h2.bln-live-active::after {
    animation: none !important;
    width: min(180px, 40%);
    opacity: 1;
  }
}

/* Mobile — keep the pill out of the way of any size toggle that lives
   bottom-right. We sit on the LEFT and shrink slightly. */
@media (max-width: 640px) {
  .bln-follow-live {
    left: 12px;
    bottom: 12px;
    padding: 8px 12px 8px 10px;
    font-size: 12px;
  }
  .bln-live-badge { top: 6px; right: 8px; font-size: 10px; padding: 3px 8px 3px 6px; }
}