/* Screen-reader-only utility */

/* Sermon Library - front-end styles.
   ------------------------------------------
   Design tokens come from the Seedcast core stylesheet, which is
   enqueued as a dependency of this file. Reference var(--sc-*) and
   never hardcode a color, so a church that sets a theme once gets it
   everywhere. */


/* ── Layout ──────────────────────────────── */


/* ── Breadcrumb ──────────────────────────── */




/* ── Archive Header ──────────────────────── */
.scsl-archive-header {
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 2px solid var(--sc-color-border);
}

/* A header with something beside the title: the subjects a passage's sermons
   are about sit to its right, where they are a way out of the page rather
   than something between the reader and the sermons. */
.scsl-archive-header--split {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem 2rem;
}
.scsl-archive-header__main {
  flex: 1 1 22rem;
  min-width: 0;
}
.scsl-archive-header__topics {
  flex: 0 1 auto;
  max-width: 24rem;
}

/* A labelled row of chips, wherever one sits beside a heading. The label is
   the same small capital as the sidebar headings, so a reader meets one kind
   of label on the page rather than three. */
.scsl-topic-block__label {
  font-size: .85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--sc-color-muted);
  margin: 0 0 .5rem;
}
.scsl-topic-block--end .scsl-topic-block__label {
  text-align: right;
}
.scsl-topic-block--end .scsl-topic-chips {
  justify-content: flex-end;
}

/* Stacked on a narrow screen, where a right-hand column is a column of one
   chip per line, so it reads from the left like everything else. */
@media (max-width: 640px) {
  .scsl-archive-header__topics {
    max-width: none;
  }
  .scsl-archive-header__topics .scsl-topic-block--end .scsl-topic-block__label {
    text-align: left;
  }
  .scsl-archive-header__topics .scsl-topic-block--end .scsl-topic-chips {
    justify-content: flex-start;
  }
}
.scsl-archive-title {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 700;
  margin: 0;
  color: var(--sc-color-primary);
}

/* ── Filter Bar ──────────────────────────── */

.sc-filter-btn {
  transition: background .15s, border-color .15s;
}



/* ── Series Grid ─────────────────────────── */
.scsl-series-grid {
  display: grid;
  gap: 1.5rem;
}
/*
 * Explicit column counts so the grid works inside Elementor widgets, which
 * often constrain the container in ways auto-fill cannot see. These rules had
 * gone missing, which is why every grid was rendering a single column.
 */
/*
 * Written against the column class rather than each grid, so anything asking
 * for columns gets them. Scoping these to the series grid left the speaker
 * grid saying display:grid with no columns, which is one column.
 */
.scsl-grid-cols-1 { grid-template-columns: 1fr; }
.scsl-grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.scsl-grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.scsl-grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 900px) {
  .scsl-grid-cols-3,
  .scsl-grid-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .scsl-grid-cols-2,
  .scsl-grid-cols-3,
  .scsl-grid-cols-4 { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {

}

/* ── Series Card ─────────────────────────── */
.scsl-series-card {
  position: relative;  /* needed for stretched link */
  background: var(--sc-color-bg);
  border: 1px solid var(--sc-color-border);
  border-radius: var(--sc-radius-lg);
  overflow: hidden;
  box-shadow: var(--sc-shadow-sm);
  transition: box-shadow .2s, transform .2s;
}
.scsl-series-card:hover {
  box-shadow: var(--sc-shadow-md);
  transform: translateY(-2px);
  border-color: var(--sc-color-accent);
}
/* Stretched link: invisible overlay covers the whole card, making it fully clickable */
.scsl-series-card__stretched-link {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  /* Ensure the empty anchor is clickable across all browsers */
  width: 100%;
  height: 100%;
  cursor: pointer;
}
.scsl-series-card__image img {
  width: 100%;
  height: 215px;
  object-fit: cover;
  display: block;
}
.scsl-series-card__placeholder {
  width: 100%;
  height: 215px;
  background: var(--sc-color-accent-light);
  display: flex;
  align-items: center;
  justify-content: center;
}
.scsl-series-card__placeholder span {
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--sc-color-accent);
  font-family: var(--sc-font-sans);
}
.scsl-series-card__body { padding: 1.1rem; }
.scsl-series-card__title {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 0 .5rem;
  line-height: 1.3;
}
.scsl-series-card__meta {
  display: flex;
  gap: .75rem;
  font-size: .8rem;
  color: var(--sc-color-muted);
  margin-bottom: .5rem;
}
.scsl-series-card__excerpt {
  font-size: .875rem;
  color: var(--sc-color-muted);
  margin: 0;
  line-height: 1.5;
}

/* ── Series Hero ─────────────────────────── */
.scsl-series-hero {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  align-items: flex-start;
}
.scsl-series-hero__content { flex: 1 1 380px; min-width: 0; }
.scsl-series-hero__image {
  flex: 0 1 320px;
  overflow: hidden;
  border-radius: var(--sc-radius-lg);
}
/* No forced aspect ratio. The container was square while series artwork is
   usually landscape, and object-fit had no height to cover, so the difference
   showed up as dead space under the image. */
.scsl-series-hero__image img {
  width: 100%;
  height: auto;
  border-radius: var(--sc-radius-lg);
  display: block;
}
.scsl-series-title {
  font-size: clamp(1.5rem, 3.5vw, 2.25rem);
  font-weight: 800;
  color: var(--sc-color-primary);
  margin: 0 0 .75rem;
  line-height: 1.2;
}
.scsl-series-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  font-size: .85rem;
  color: var(--sc-color-muted);
  margin-bottom: 1rem;
}
.scsl-series-description {
  line-height: 1.7;
}
/* The theme's paragraph bottom margin was carrying through and leaving a large
   gap under the hero. */
.scsl-series-description > *:last-child { margin-bottom: 0; }

/* ── Section Titles ──────────────────────── */
.sc-section-title {
  margin: 0 0 1.25rem;
}



/* ── Episode Cards ─────────────────────── */
.scsl-episodes,
.scsl-sermon-list {
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

/* 3-column: [speaker photo] [content] [actions] */
.scsl-episode-card {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: 0;
  background: var(--sc-color-bg);
  border: 1px solid var(--sc-color-border);
  border-radius: var(--sc-radius);
  overflow: hidden;
  transition: box-shadow .2s;
  align-items: stretch;
  padding: 15px;
}
/* No speaker photo: collapse to 2-column */
.scsl-episode-card--no-photo {
  grid-template-columns: 1fr auto;
}
.scsl-episode-card:hover { box-shadow: var(--sc-shadow-sm); }
.scsl-episode-card--featured { grid-template-columns: 88px 1fr auto; }
.scsl-episode-card--featured.scsl-episode-card--no-photo { grid-template-columns: 1fr auto; }
@media (max-width: 600px) {
  .scsl-episode-card,
  .scsl-episode-card--featured { grid-template-columns: 64px 1fr; }
  .scsl-episode-card--no-photo,
  .scsl-episode-card--featured.scsl-episode-card--no-photo { grid-template-columns: 1fr; }
  .scsl-episode-card__actions {
    grid-column: 1 / -1;
    flex-direction: row !important;
    border-top: 1px solid var(--sc-color-border);
    border-left: none !important;
    padding: .5rem .75rem !important;
  }
}

/* Speaker photo column */
.scsl-episode-card__speaker-photo {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.scsl-episode-card__speaker-img {
  width: 75px;
  height: 75px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

/* Content column */
.scsl-episode-card__body {
  padding: .85rem 1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .25rem;
  min-width: 0;
  align-items: flex-start; /* prevent children from stretching full width */
}

/* Actions column: far right */
.scsl-episode-card__actions {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  gap: .35rem;
  padding: .75rem 1rem;
  min-width: 90px;
  flex-shrink: 0;
}
.scsl-episode-card__actions .scsl-btn { text-align: center; white-space: nowrap; }
.scsl-episode-card__title {
  font-size: 1rem;
  font-weight: 700;
  margin: 0;
  line-height: 1.3;
  align-self: stretch; /* title should span full width */
}
.scsl-episode-card__title a { color: var(--sc-color-primary); text-decoration: none; }
.scsl-episode-card__title a:hover { color: var(--sc-color-accent); }
.scsl-episode-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  font-size: .8rem;
  color: var(--sc-color-muted);
  align-items: center;
}
.scsl-meta-sep { color: var(--sc-color-border); }
.scsl-episode-card__desc {
  font-size: .85rem;
  color: var(--sc-color-muted);
  margin: 0;
  line-height: 1.5;
  align-self: stretch;
}

/* ── Buttons ─────────────────────────────── */
.scsl-btn {
  display: inline-block;
  padding: .45rem .9rem;
  border-radius: var(--sc-radius);
  font-size: .85rem;
  font-weight: 600;
  text-decoration: none;
  transition: background .15s, color .15s, border-color .15s;
  align-self: flex-start;
}

.scsl-btn--ghost {
  border: 1.5px solid var(--sc-color-accent);
  color: var(--sc-color-accent);
  background: var(--sc-color-bg);
  min-width: 125px;
  text-align: center;
  justify-content: center;
}
.scsl-btn--ghost:hover {
  background: var(--sc-color-accent);
  color: #fff;
}

/* ── Single Sermon ───────────────────────── */
.scsl-sermon-single {}

.scsl-media-wrap {
  margin-bottom: 2rem;
}

.sc-video-wrap iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
}

.scsl-sermon-header {
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--sc-color-border);
}
.scsl-sermon-title {
  font-size: clamp(1.5rem, 4vw, 2.25rem);
  font-weight: 800;
  color: var(--sc-color-primary);
  margin: 0 0 .75rem;
}
.scsl-sermon-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  font-size: .9rem;
  color: var(--sc-color-muted);
  margin-bottom: .75rem;
}
.scsl-meta-speaker { display: flex; align-items: center; gap: .5rem; }
.scsl-speaker-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
}
.scsl-meta-speaker a { color: var(--sc-color-text); text-decoration: none; font-weight: 600; }
.scsl-meta-series a  { color: var(--sc-color-accent); text-decoration: none; font-weight: 500; }
.scsl-sermon-description {
  line-height: 1.7;
  margin: 0;
}

/* ── Content Tabs ────────────────────────── */
.scsl-content-tabs { margin-bottom: 3rem; }
.scsl-tabs-nav {
  display: flex;
  gap: .35rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}
.scsl-tab-btn {
  background: var(--sc-color-bg-subtle);
  border: 1.5px solid var(--sc-color-border);
  border-radius: var(--sc-radius);
  padding: .5rem 1rem;
  font-size: .875rem;
  font-weight: 600;
  color: var(--sc-color-muted);
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.scsl-tab-btn:hover {
  background: var(--sc-color-accent);
  border-color: var(--sc-color-accent);
  color: #fff;
}
.scsl-tab-btn.is-active {
  background: var(--sc-color-accent);
  border-color: var(--sc-color-accent);
  color: #fff;
}
.sc-tab-panel {
  /* Visually hidden but present in DOM for search engine indexing */
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.sc-tab-panel.is-active {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

.scsl-article-content,
.scsl-study-content {
  line-height: 1.8;
}
.scsl-article-content h2,
.scsl-study-content h2 { margin-top: 2rem; }
.scsl-article-content h3,
.scsl-study-content h3 { margin-top: 1.5rem; }

.scsl-transcript {
  line-height: 1.8;
  background: var(--sc-color-bg-subtle);
  padding: 1.5rem;
  border-radius: var(--sc-radius);
  border: 1px solid var(--sc-color-border);
  /* No max-width: fills the full tab panel */
}

/* ── Scripture Refs ──────────────────────── */
.scsl-scripture-refs {
  margin-bottom: 2rem;
}
.scsl-scripture-refs h3 {
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 .75rem;
}
.scsl-scripture-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.scsl-scripture-list a {
  display: inline-block;
  padding: .3rem .75rem;
  background: var(--sc-color-bg-subtle);
  border: 1px solid var(--sc-color-border);
  border-radius: 999px;
  font-size: .85rem;
  color: var(--sc-color-text);
  text-decoration: none;
}
.scsl-scripture-list a:hover {
  background: var(--sc-color-accent-light);
  border-color: var(--sc-color-accent);
  color: var(--sc-color-accent);
}

/* ── Related ─────────────────────────────── */
.scsl-related { margin-top: 3rem; border-top: 1px solid var(--sc-color-border); padding-top: 2rem; }
.scsl-related__title {
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0 0 1.25rem;
  color: var(--sc-color-primary);
}
.scsl-related__list {
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

/* ── Utility ─────────────────────────────── */
.scsl-none { color: var(--sc-color-muted); }
.scsl-no-content {
  text-align: center;
  color: var(--sc-color-muted);
  padding: 3rem 1rem;
  font-size: 1rem;
}

/* ── Sermon Layout (main + sidebar) ─────── */
.scsl-sermon-layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 2.5rem;
  align-items: start;
  margin-top: 1.5rem;
}
@media (max-width: 768px) {
  .scsl-sermon-layout { grid-template-columns: 1fr; }
  .scsl-sermon-layout__sidebar { order: -1; }
}

/* ── Scripture Panel ─────────────────────── */
/* The heading sits above the box, so the spacing belongs to the pair. */
.scsl-scripture-block {
  display: block;
  margin-top: 1.5rem;
}
.scsl-scripture-panel {
  background: var(--sc-color-bg-subtle);
  border: 1px solid var(--sc-color-border);
  border-radius: var(--sc-radius);
  padding: 1.1rem;
}
.scsl-scripture-panel__title,
.scsl-topics-panel__title,
.scsl-sermon-actions__label {
  font-size: .85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--sc-color-muted);
  margin: 0 0 .85rem;
}

/* ── Topics Panel ────────────────────────── */

/* Sits between the share row and the scripture panel, so it carries the same
   gap above it that the panel below it has. */
.scsl-topics-panel {
  margin-top: 1.5rem;
}

/* Chips, not a list. The markup is a list because that is what it is, which
   is no reason to draw a bullet beside every topic. */
.scsl-topics-panel__list {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.scsl-topics-panel__list li {
  margin: 0;
  padding: 0;
  list-style: none;
}
.scsl-scripture-panel__section { margin-bottom: 1rem; }
.scsl-scripture-panel__section:last-child { margin-bottom: 0; }
.scsl-scripture-panel__label {
  display: block;
  font-size: .75rem;
  font-weight: 600;
  color: var(--sc-color-muted);
  margin-bottom: .35rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.scsl-scripture-panel__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
.scsl-scripture-ref {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  font-size: .875rem;
  font-weight: 500;
  color: var(--sc-color-accent);
  text-decoration: none;
}
.scsl-scripture-ref:hover { text-decoration: underline; }
.scsl-scripture-ref--focus {
  font-size: 1rem;
  font-weight: 700;
  color: var(--sc-color-primary);
}
.scsl-scripture-ref__icon { font-size: .75rem; opacity: .6; }

/* ── Sermon List (shortcode) ─────────────── */
.scsl-sermon-list-wrap { position: relative; }

.scsl-list-filters {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
  margin-bottom: 1.5rem;
  padding: .85rem 1rem;
  background: var(--sc-color-bg-subtle);
  border: 1px solid var(--sc-color-border);
  border-radius: var(--sc-radius);
}
.scsl-list-filters--series {
  margin-top: 0;
}
.scsl-filter-select {
  flex: 1;
  min-width: 160px;
  padding: .45rem .75rem;
  border: 1px solid var(--sc-color-border);
  border-radius: var(--sc-radius);
  background: var(--sc-color-bg);
  font-size: .875rem;
  color: var(--sc-color-text);
  cursor: pointer;
}
@media (max-width: 640px) {
  .scsl-filter-select { min-width: 100%; }
}
.scsl-filter-select:focus { outline: 2px solid var(--sc-color-accent); outline-offset: 1px; }

/* List results: standard row layout */
.scsl-list-results { display: flex; flex-direction: column; gap: 1px; }

/* Card results: used on series page */
.scsl-list-results--cards {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* ── Sermon List Item ────────────────────── */
.sc-list-item {
  grid-template-columns: 120px 1fr auto;
  align-items: start;
}


@media (max-width: 640px) {
  .sc-list-item { grid-template-columns: 80px 1fr; }
  .sc-list-item__actions { grid-column: 1 / -1; padding: 0; }
}
@media (max-width: 400px) {

}
.sc-list-item__thumb {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--sc-radius);
  background: var(--sc-color-border);
  flex-shrink: 0;
}
.sc-list-item__thumb img {
  height: 100%;
  display: block;
  transition: transform .25s;
}

.sc-list-item:hover .sc-list-item__thumb img { transform: scale(1.03); }


.sc-list-item__series { color: var(--sc-color-accent); text-decoration: none; font-weight: 500; }



.sc-list-item__speaker { display: flex; align-items: center; gap: .4rem; font-size: .825rem; }
.sc-list-item__speaker a { color: var(--sc-color-text); text-decoration: none; font-weight: 500; }
.sc-list-item__avatar { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }

.sc-list-item__scripture { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .1rem; }
.sc-list-item__passage {
  display: inline-block;
  padding: .15rem .5rem;
  background: var(--sc-color-accent-light);
  border-radius: 999px;
  font-size: .75rem;
  color: var(--sc-color-accent);
  font-weight: 500;
}
.sc-list-item__passage--focus { background: var(--sc-color-accent); color: #fff; }
/* Actions pushed to far right column */
.sc-list-item__actions {
  gap: .35rem;
  padding-left: 1.25rem;
  align-items: stretch;
  flex-shrink: 0;
  min-width: 90px;
}



/* ── Pagination ──────────────────────────── */
.sc-pagination {
  align-items: center;
  gap: 1rem;
  padding: 1.5rem 0 .5rem;
}

.scsl-page-info { font-size: .85rem; color: var(--sc-color-muted); }

/* SEO pagination uses <a> links instead of buttons */
.sc-pagination--links .scsl-page-link {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
}

/* ── Loading ─────────────────────────────── */
.scsl-list-loading {
  text-align: center;
  padding: 2rem;
  color: var(--sc-color-muted);
  font-size: .9rem;
}
.scsl-loading-spinner {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid var(--sc-color-border);
  border-top-color: var(--sc-color-accent);
  border-radius: 50%;
  animation: sf-spin .6s linear infinite;
  margin-right: .5rem;
  vertical-align: middle;
}
@keyframes sf-spin { to { transform: rotate(360deg); } }

/* ── Small button modifier ───────────────── */
.scsl-btn--sm { padding: .3rem .65rem; font-size: .78rem; }

/* ── PDF buttons ─────────────────────────── */
.scsl-pdf-btn {
  display: inline-block;
  padding: .4rem .85rem;
  border: 1.5px solid var(--sc-color-border);
  border-radius: var(--sc-radius);
  font-size: .825rem;
  color: var(--sc-color-muted);
  text-decoration: none;
  transition: border-color .15s, color .15s;
}
.scsl-pdf-btn:hover { border-color: var(--sc-color-accent); color: var(--sc-color-accent); }
.scsl-pdf-row { margin-top: 1rem; }

/* ── Audio player ────────────────────────── */



/* ── Short link ──────────────────────────── */
.scsl-short-link { margin-top: .75rem; }

/* ── Resources ───────────────────────────── */
.scsl-resources-content {
  font-size: 1rem;
  line-height: 1.7;
}
.scsl-resources-content a { color: var(--sc-color-accent); }

/* ══════════════════════════════════════════
   THEME: Dark
   Token values come from core. What is here is only the component
   level adjustment Sermon Library needs on top of them.
   ══════════════════════════════════════════ */
.sc-theme-dark .sc-wrap {
  background: var(--sc-color-bg);
  color: var(--sc-color-text);
}
.sc-theme-dark .scsl-series-card,
.sc-theme-dark .scsl-episode-card {
  background: var(--sc-color-bg);
  border-color: var(--sc-color-border);
}
.sc-theme-dark .sc-filter-btn    { background: var(--sc-color-bg-subtle); border-color: var(--sc-color-border); color: var(--sc-color-text); }
.sc-theme-dark .scsl-filter-select { background: var(--sc-color-bg-subtle); border-color: var(--sc-color-border); color: var(--sc-color-text); }
.sc-theme-dark .scsl-scripture-panel { background: var(--sc-color-bg-subtle); border-color: var(--sc-color-border); }
.sc-theme-dark .scsl-transcript    { background: var(--sc-color-bg-subtle); border-color: var(--sc-color-border); }
.sc-theme-dark .scsl-tab-btn       { background: var(--sc-color-bg-subtle); border-color: var(--sc-color-border); color: var(--sc-color-text); }
.sc-theme-dark .scsl-tab-btn:hover,
.sc-theme-dark .scsl-tab-btn.is-active { background: var(--sc-color-accent); border-color: var(--sc-color-accent); color: #fff; }
.sc-theme-dark .scsl-series-card__placeholder { background: var(--sc-color-accent-light); }
.sc-theme-dark .sc-audio-player  { background: var(--sc-color-bg-subtle); border-color: var(--sc-color-border); }

/* ══════════════════════════════════════════
   THEME: Warm
   #d3b673 gold: buttons, tabs, active states (dark text)
   #0c0c0e near-black: hover state (white text), passages
   #ffffff white: bg, card borders (resting)
   ══════════════════════════════════════════ */

/* Cards: white border resting, gold on hover */
.sc-theme-warm .scsl-series-card,
.sc-theme-warm .scsl-episode-card,
.sc-theme-warm .sc-list-item {
  border-color: #ffffff;
}
.sc-theme-warm .scsl-series-card:hover,
.sc-theme-warm .scsl-episode-card:hover {
  border-color: #d2b674;
}
/* Ghost buttons default to white in warm theme, gold on card hover */
.sc-theme-warm .scsl-btn--ghost {
  background: #ffffff;
  border-color: #d3b673;
  color: #0c0c0e;
}
.sc-theme-warm .scsl-btn--ghost:hover,
.sc-theme-warm .scsl-series-card:hover .scsl-btn--ghost,
.sc-theme-warm .scsl-episode-card:hover .scsl-btn--ghost {
  background: #d3b673;
  border-color: #d3b673;
  color: #0c0c0e;
}
.sc-theme-warm .scsl-series-card:hover .scsl-btn--ghost:hover,
.sc-theme-warm .scsl-episode-card:hover .scsl-btn--ghost:hover {
  background: #0c0c0e;
  border-color: #0c0c0e;
  color: #ffffff;
}

/* Speaker photo column: white background */
.sc-theme-warm .scsl-episode-card__speaker-photo { background: #ffffff; }

/* Filter bar */
.sc-theme-warm .scsl-list-filters { background: #f0e9d7; }

/* Card results area */
.sc-theme-warm .scsl-list-results--cards {
  padding: 2rem;
  background: #faf7f0;
  border-radius: var(--sc-radius);
}

/* Related section spacing */
.sc-theme-warm .scsl-related { margin-top: 0; padding-top: 0; border-top: none; }

/* Transcript text color */
.sc-theme-warm .scsl-transcript { color: #2e2515; }

/* Tabs & filter buttons: gold bg with dark text */
.sc-theme-warm .scsl-tab-btn {
  background: var(--sc-color-bg-subtle);
  border-color: var(--sc-color-accent);
  color: #0c0c0e;
}
.sc-theme-warm .scsl-tab-btn:hover,
.sc-theme-warm .scsl-tab-btn.is-active {
  background: #d3b673;
  border-color: #d3b673;
  color: #0c0c0e;
}
.sc-theme-warm .sc-filter-btn {
  background: #d3b673;
  border-color: #d3b673;
  color: #0c0c0e;
}
.sc-theme-warm .sc-filter-btn:hover,
.sc-theme-warm .sc-filter-btn.is-active {
  background: #0c0c0e;
  border-color: #0c0c0e;
  color: #ffffff;
}

/* Passages: near-black on gold bg */
.sc-theme-warm .sc-list-item__passage {
  background: #d3b673;
  color: #0c0c0e;
}
.sc-theme-warm .sc-list-item__passage--focus {
  background: #0c0c0e;
  color: #ffffff;
}

/* Ghost buttons */
.sc-theme-warm .scsl-btn--ghost {
  border-color: #d3b673;
  color: #0c0c0e;
}
.sc-theme-warm .scsl-btn--ghost:hover {
  background: #0c0c0e;
  border-color: #0c0c0e;
  color: #ffffff;
}

/* Platform / action buttons */
.sc-theme-warm .scsl-btn--platform {
  background: #faf8f4;
  border-color: #d3b673;
  color: #0c0c0e;
}
.sc-theme-warm .scsl-btn--platform:hover {
  background: #0c0c0e;
  border-color: #0c0c0e;
  color: #ffffff;
}

/* Filter selects */
.sc-theme-warm .scsl-filter-select {
  background: #ffffff;
  border-color: #d3b673;
  color: #0c0c0e;
}
.sc-theme-warm .scsl-filter-select:focus {
  outline-color: #d3b673;
}

/* Scripture panel */
.sc-theme-warm .scsl-scripture-panel {
  background: #faf8f4;
  border-color: #d3b673;
}
.sc-theme-warm .scsl-scripture-ref {
  color: #0c0c0e;
  font-weight: 600;
}

/* Copy icon button */
.sc-theme-warm .scsl-title-copy-btn {
  background: #d3b673;
  color: #0c0c0e;
}

/* ══════════════════════════════════════════
   THEME: Minimal
   ══════════════════════════════════════════ */
.sc-theme-minimal .scsl-series-card  { border: none; border-bottom: 1px solid var(--sc-color-border); box-shadow: none; }
.sc-theme-minimal .scsl-episode-card { border: none; border-bottom: 1px solid var(--sc-color-border); box-shadow: none; }
.sc-theme-minimal .scsl-scripture-panel { background: none; border: none; border-left: 3px solid var(--sc-color-border); border-radius: 0; padding-left: 1rem; }
.sc-theme-minimal .sc-filter-btn.is-active { background: var(--sc-color-text); border-color: var(--sc-color-text); }
.sc-theme-minimal .scsl-tab-btn.is-active { background: var(--sc-color-accent); border-color: var(--sc-color-accent); color: #fff; }
.sc-theme-minimal .scsl-btn--ghost   { border-color: var(--sc-color-text); color: var(--sc-color-text); }
.sc-theme-minimal .scsl-btn--ghost:hover { background: var(--sc-color-text); color: #fff; }
.sc-theme-minimal .scsl-series-card__placeholder { border-radius: 0; }

/* ══════════════════════════════════════════
   ACCESSIBILITY
   ══════════════════════════════════════════ */

/* Screen reader only utility */
.scsl-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;
}

/* Skip link */
.scsl-skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  z-index: 999;
  background: var(--sc-color-accent);
  color: #fff;
  padding: .75rem 1.25rem;
  border-radius: var(--sc-radius);
  font-weight: 600;
}
.scsl-skip-link:focus {
  left: 1rem;
  top: 1rem;
  width: auto;
  height: auto;
  overflow: visible;
}

/* Global focus styles: visible ring on all interactive elements */
/* Tab buttons: remove default outline since we add custom */
.scsl-tab-btn:focus { outline: none; }
.scsl-tab-btn:focus-visible {
  outline: 3px solid var(--sc-color-accent);
  outline-offset: 2px;
}

/* Cards: keyboard focus ring */
.scsl-series-card a:focus-visible,
.scsl-episode-card a:focus-visible,
.sc-list-item a:focus-visible {
  outline: 3px solid var(--sc-color-accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Buttons */
.scsl-btn:focus-visible {
  outline: 3px solid var(--sc-color-accent);
  outline-offset: 2px;
}


/* Breadcrumb as ordered list */
.sc-breadcrumb__list {
  gap: .35rem;
  font-size: .85rem;
  color: var(--sc-color-muted);
}

.sc-breadcrumb__list li { display: flex; align-items: center; }
.sc-breadcrumb__list a { color: var(--sc-color-accent); text-decoration: none; }
.sc-breadcrumb__list a:hover { text-decoration: underline; }
.sc-breadcrumb__sep { color: var(--sc-color-muted); margin: 0 .1rem; }
.sc-breadcrumb__list [aria-current="page"] { color: var(--sc-color-text); }

/* Audio player label */


/* Dark theme focus override */
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .scsl-series-card,
  .scsl-episode-card,
  .scsl-btn,
  .sc-filter-btn,
  .scsl-loading-spinner,
  .scsl-tab-btn {
    transition: none;
    animation: none;
  }
}

/* ── Series Hero enhancements ────────────── */
.scsl-series-type-badge {
  display: inline-block;
  padding: .2rem .65rem;
  background: var(--sc-color-accent-light);
  color: var(--sc-color-accent);
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: .6rem;
}

.scsl-series-speakers {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1rem;
}
.scsl-series-speaker {
  display: flex;
  align-items: center;
  gap: .5rem;
  text-decoration: none;
  color: var(--sc-color-text);
}
.scsl-series-speaker:hover { color: var(--sc-color-accent); }
.scsl-series-speaker__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--sc-color-border);
}
.scsl-series-speaker__name {
  font-size: .875rem;
  font-weight: 600;
}

/* One row of topic chips, used on a series, a passage page, the library page
   and anywhere else a set of them is listed. */
.scsl-topic-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin: 0;
}

/* On a series the chips follow its description, which is a block of prose:
   three quarters of a rem read as part of the last line. */
.scsl-series-topics {
  margin-top: 1.5rem;
}

/* The row above the library page's series grid is a navigation bar, so it
   carries the space a bar needs below it. */
.scsl-topic-chips--bar {
  margin-bottom: 2rem;
}

/* A section heading with its topics beside it: what that set of sermons is
   about, where the set is a different one from the page's own.

   The rule belongs to the pair, not to the heading. Left on the heading it
   stopped at the end of the words and ran above the chips, so the chips read
   as the first line of the list below rather than as part of the heading. */
.scsl-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem 1.5rem;
  margin-bottom: 1.5rem;
  padding-bottom: .9rem;
  border-bottom: 2px solid var(--sc-color-border);
}
.scsl-section-head > h2 {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
}
.scsl-section-head .scsl-topic-block {
  flex: 0 1 auto;
  max-width: 26rem;
}
@media (max-width: 640px) {
  .scsl-section-head .scsl-topic-block--end .scsl-topic-block__label {
    text-align: left;
  }
  .scsl-section-head .scsl-topic-block--end .scsl-topic-chips {
    justify-content: flex-start;
  }
}

/* The one that is current, on the library page. */
.scsl-topic-tag.is-active {
  background: var(--sc-color-text);
  border-color: var(--sc-color-text);
  color: var(--sc-color-bg, #fff);
}
/* Shaped like the View Sermon button beside it: the theme's own outline, the
   ink it uses for button text, and the weight that makes a small label read as
   something to press rather than as a caption. A pill rather than a rounded
   rectangle, because a topic is a label you may follow and the button is the
   one thing on the card to do. */
.scsl-topic-tag {
  display: inline-block;
  padding: .2rem .6rem;
  background: transparent;
  border: 1px solid var(--sc-color-accent);
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 600;

  /* The text color, not the muted one: muted grey against these surfaces
     reads at about four to one. */
  color: var(--sc-color-text);

  /* A chip is a shape already. The theme underlines links on hover, which on
     a pill reads as a line drawn through the bottom of the border. */
  text-decoration: none;
  text-decoration: none;
}
/* Hovered the way a View Sermon button is hovered, because that is the other
   thing on these pages shaped like this and a reader should not have to learn
   two answers to "is this clickable". */
a.scsl-topic-tag:hover,
a.scsl-topic-tag:focus {
  background: var(--sc-color-accent);
  border-color: var(--sc-color-accent);
  color: #fff;
  text-decoration: none;
}

/* Warm's accent is a light gold, so white on it is unreadable: the theme
   answers the same hover with its own dark ink, as it does for buttons. */
.sc-theme-warm a.scsl-topic-tag:hover,
.sc-theme-warm a.scsl-topic-tag:focus {
  color: var(--sc-color-primary);
}

/* ── Episode card enhancements ───────────── */
.scsl-episode-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-top: .5rem;
}
.scsl-speaker-avatar--sm {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  vertical-align: middle;
}
.scsl-meta-speaker {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}
.scsl-meta-speaker__link {
  color: var(--sc-color-text);
  text-decoration: none;
  font-weight: 500;
}
.scsl-meta-speaker__link:hover { color: var(--sc-color-accent); }

/* ══════════════════════════════════════════
   SPEAKER PROFILE PAGE
   ══════════════════════════════════════════ */

.scsl-speaker-profile {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 2.5rem;
  align-items: start;
  margin-bottom: 3rem;
}
@media (max-width: 768px) {
  .scsl-speaker-profile { grid-template-columns: 1fr; }
}

.scsl-speaker-profile__photo {
  border-radius: var(--sc-radius-lg);
  overflow: hidden;
  border: 1px solid var(--sc-color-border);
  box-shadow: var(--sc-shadow-sm);
}
.scsl-speaker-profile__img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

.scsl-speaker-profile__name {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 800;
  color: var(--sc-color-primary);
  margin: 0 0 .25rem;
}
.scsl-speaker-profile__title {
  font-size: .95rem;
  color: var(--sc-color-muted);
  margin: 0 0 .75rem;
  font-weight: 500;
}

.scsl-speaker-profile__stats {
  display: flex;
  gap: 1.5rem;
  margin-bottom: 1rem;
}
.scsl-speaker-stat {
  font-size: .875rem;
  color: var(--sc-color-muted);
}
.scsl-speaker-stat strong {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--sc-color-accent);
  display: block;
  line-height: 1;
  margin-bottom: .1rem;
}

.scsl-speaker-profile__bio {
  font-size: .95rem;
  line-height: 1.7;
  color: var(--sc-color-text);
  margin-bottom: 1rem;
}

.scsl-speaker-profile__contact {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem .75rem;
  margin-bottom: 1rem;
}
.scsl-speaker-contact-link {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .85rem;
  color: var(--sc-color-accent);
  text-decoration: none;
  padding: .2rem .6rem;
  border: 1px solid var(--sc-color-border);
  border-radius: 999px;
  background: var(--sc-color-bg-subtle);
}
.scsl-speaker-contact-link:hover {
  border-color: var(--sc-color-accent);
  background: var(--sc-color-accent-light);
}

.scsl-speaker-profile__section-title {
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--sc-color-muted);
  margin: 0 0 .5rem;
}
.scsl-speaker-series-list {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
}
.scsl-speaker-series-tag {
  display: inline-block;
  padding: .25rem .65rem;
  background: var(--sc-color-bg-subtle);
  border: 1px solid var(--sc-color-border);
  border-radius: var(--sc-radius);
  font-size: .8rem;
  color: var(--sc-color-text);
  text-decoration: none;
  transition: border-color .15s, color .15s;
}
.scsl-speaker-series-tag:hover {
  border-color: var(--sc-color-accent);
  color: var(--sc-color-accent);
}

/* Blog articles section */
.scsl-speaker-articles { margin-top: 2.5rem; }

/* Article card grid */
.scsl-speaker-article-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1.5rem;
}
.scsl-speaker-article-card {
  background: var(--sc-color-bg-subtle);
  border: 1px solid var(--sc-color-border);
  border-radius: var(--sc-radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow .15s, transform .15s;
}
.scsl-speaker-article-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,.08);
  transform: translateY(-2px);
}
.scsl-speaker-article-card__img-wrap {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--sc-color-border);
}
.scsl-speaker-article-card__img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .3s;
}
.scsl-speaker-article-card:hover .scsl-speaker-article-card__img-wrap img {
  transform: scale(1.03);
}
.scsl-speaker-article-card__placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--sc-color-border) 0%, var(--sc-color-bg-subtle) 100%);
}
.scsl-speaker-article-card__body {
  padding: 1rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
.scsl-speaker-article-card__date {
  font-size: .75rem;
  color: var(--sc-color-muted);
  display: block;
}
.scsl-speaker-article-card__title {
  font-size: .975rem;
  font-weight: 700;
  margin: 0;
  line-height: 1.35;
}
.scsl-speaker-article-card__title a {
  color: var(--sc-color-primary);
  text-decoration: none;
}
.scsl-speaker-article-card__title a:hover { color: var(--sc-color-accent); }
.scsl-speaker-article-card__excerpt {
  font-size: .825rem;
  color: var(--sc-color-muted);
  margin: 0;
  line-height: 1.5;
}
@media (max-width: 600px) {
  .scsl-speaker-article-grid { grid-template-columns: 1fr; }
}

/* ── Topic Archive ───────────────────────── */
.scsl-archive-desc {
  font-size: 1rem;
  color: var(--sc-color-muted);
  margin: .35rem 0 0;
  line-height: 1.6;
}
.scsl-archive-count {
  font-size: .875rem;
  color: var(--sc-color-muted);
  margin: .5rem 0 0;
}

/* ══════════════════════════════════════════
   EXTERNAL PLATFORM LINKS + SOCIAL SHARE
   ══════════════════════════════════════════ */

/* ══════════════════════════════════════════
   PLATFORM BUTTONS + SOCIAL SHARE (sidebar)
   ══════════════════════════════════════════ */

/* Base platform button: used in sidebar actions */
.scsl-btn--platform {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .55rem 1rem;
  border-radius: var(--sc-radius);
  font-size: .875rem;
  font-weight: 600;
  text-decoration: none;
  border: 1.5px solid var(--sc-color-border);
  background: var(--sc-color-bg-subtle);
  color: var(--sc-color-text);
  transition: background .15s, border-color .15s, color .15s;
}
.scsl-btn--platform:hover {
  background: var(--sc-color-bg);
  border-color: var(--sc-color-accent);
  color: var(--sc-color-accent);
}
.scsl-platform-icon { font-size: 1rem; flex-shrink: 0; line-height: 1; }
.scsl-platform-icon svg { display: block; }
.scsl-platform-label { flex: 1; }

/* Brand hover colors */
.scsl-platform--spotify:hover    { border-color: #1DB954; color: #1DB954; background: #f0fdf4; }
.scsl-platform--apple:hover      { border-color: #872EC4; color: #872EC4; background: #faf5ff; }
.scsl-platform--youtube:hover    { border-color: #FF0000; color: #FF0000; background: #fff5f5; }
.scsl-platform--soundcloud:hover { border-color: #FF5500; color: #FF5500; background: #fff7f3; }

/* ══════════════════════════════════════════
   SERMON SIDEBAR ACTIONS
   ══════════════════════════════════════════ */

.scsl-sermon-actions {
  display: flex;
  flex-direction: column;
  gap: .45rem;
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--sc-color-border);
}

/* All action buttons share .scsl-btn--platform style: already defined */
/* Override to fill full width in sidebar */
.scsl-sermon-actions .scsl-btn--platform,
.scsl-sermon-actions button.scsl-btn--platform {
  width: 100%;
  justify-content: flex-start;
  cursor: pointer;
  font-family: inherit;
  font-size: .875rem;
}

/* Copy link is a <button> so needs explicit reset */
button.scsl-btn--platform {
  -webkit-appearance: none;
  appearance: none;
  background: var(--sc-color-bg-subtle);
  border: 1.5px solid var(--sc-color-border);
  color: var(--sc-color-text);
}
button.scsl-btn--platform:hover {
  background: var(--sc-color-bg);
  border-color: var(--sc-color-accent);
  color: var(--sc-color-accent);
}

/* Divider between platform links and share */
.scsl-sermon-actions__divider {
  border: none;
  border-top: 1px solid var(--sc-color-border);
  margin: .25rem 0;
}

/* "Share" label above social buttons */
/* Typography is shared with the other two sidebar headings, above. What is
   here is only the spacing around the row it labels. */
.scsl-sermon-actions__label {
  margin: 0 0 .5rem;
}

/* Social share brand hover colors */
.scsl-platform--share-facebook:hover { border-color: #1877F2; color: #1877F2; background: #f0f5ff; }
.scsl-platform--share-twitter:hover  { border-color: #000;    color: #000;    background: #f6f6f6; }
.scsl-platform--share-linkedin:hover { border-color: #0A66C2; color: #0A66C2; background: #f0f7ff; }

/* ── Featured image in article tab ───────── */
.scsl-article-featured-image {
  margin-bottom: 1.5rem;
  border-radius: var(--sc-radius-lg);
  overflow: hidden;
}
.scsl-article-featured-image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--sc-radius-lg);
}

/* ── Title copy link icon ────────────────── */
.scsl-sermon-title {
  /* No flex: inline flow so the icon sits naturally after the title text */
}
.scsl-title-copy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  line-height: 1;
  padding: .4rem;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: var(--sc-color-accent);
  color: #fff !important;
  cursor: pointer;
  border-radius: 4px;
  flex-shrink: 0;
  transition: opacity .15s;
  vertical-align: middle;
  position: relative;
  top: -2px;
  margin: 0 0 0 .4rem;
  -webkit-appearance: none;
  appearance: none;
}
.scsl-title-copy-btn:hover,
.scsl-title-copy-btn:focus,
.scsl-title-copy-btn:active { opacity: .8; outline: none !important; border: none !important; }
.scsl-title-copy-btn:focus-visible {
  box-shadow: 0 0 0 2px var(--sc-color-accent), 0 0 0 4px #fff;
}
.scsl-copy-feedback {
  display: inline;
  font-size: .75rem;
  font-weight: 700;
  color: #16a34a;
  margin-left: .35rem;
  vertical-align: middle;
  opacity: 0;
  transition: opacity .2s;
  white-space: nowrap;
}
.scsl-copy-feedback.is-visible { opacity: 1; }

/* Resources content: ensure editor formatting shows */
.scsl-resources-content p { margin-bottom: .85rem; }
.scsl-resources-content a {
  color: var(--sc-color-accent);
  text-decoration: underline;
}
.scsl-resources-content ul,
.scsl-resources-content ol {
  padding-left: 1.5rem;
  margin-bottom: .85rem;
}
.scsl-resources-content li { margin-bottom: .35rem; }

/* ── Sermon Notes tab ────────────────────── */
.scsl-notes-content { padding: .25rem 0; }
.scsl-notes-intro {
  font-size: .95rem;
  color: var(--sc-color-muted);
  margin-bottom: 1.25rem;
  line-height: 1.6;
}
.scsl-notes-files {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.scsl-notes-file { display: block; }
.scsl-notes-download {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .65rem 1rem;
  border: 1.5px solid var(--sc-color-border);
  border-radius: var(--sc-radius);
  background: var(--sc-color-bg-subtle);
  color: var(--sc-color-text);
  text-decoration: none;
  font-size: .9rem;
  font-weight: 500;
  transition: border-color .15s, background .15s;
  min-width: 200px;
}
.scsl-notes-download:hover {
  border-color: var(--sc-color-accent);
  background: var(--sc-color-accent-light);
  color: var(--sc-color-accent);
}
.scsl-notes-download__icon { font-size: 1rem; flex-shrink: 0; }
.scsl-notes-download__label { flex: 1; }
.scsl-notes-download__ext {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  background: var(--sc-color-border);
  padding: .1rem .35rem;
  border-radius: 3px;
  color: var(--sc-color-muted);
  flex-shrink: 0;
}

/* ── Episode card: non-circular fallback image ── */
.scsl-episode-card__speaker-img--thumb {
  border-radius: var(--sc-radius);
  object-fit: cover;
}

/* ── Topic List Shortcode ────────────────── */
.scsl-topic-list {
  display: grid;
  gap: .6rem;
  margin: 1rem 0;
}
.scsl-topic-list--cols-2 { grid-template-columns: repeat(2, 1fr); }
.scsl-topic-list--cols-3 { grid-template-columns: repeat(3, 1fr); }
.scsl-topic-list--cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 640px) {
  .scsl-topic-list--cols-2,
  .scsl-topic-list--cols-3,
  .scsl-topic-list--cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 400px) {
  .scsl-topic-list--cols-2,
  .scsl-topic-list--cols-3,
  .scsl-topic-list--cols-4 { grid-template-columns: 1fr; }
}
.scsl-topic-pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .65rem 1rem;
  background: var(--sc-color-bg-subtle);
  border: 1.5px solid var(--sc-color-border);
  border-radius: var(--sc-radius);
  color: var(--sc-color-text);
  text-decoration: none;
  font-size: .9rem;
  font-weight: 500;
  transition: border-color .15s, background .15s, color .15s;
}
.scsl-topic-pill:hover {
  border-color: var(--sc-color-accent);
  background: var(--sc-color-accent-light);
  color: var(--sc-color-accent);
  text-decoration: none;
}
.scsl-topic-pill__count {
  font-size: .75rem;
  font-weight: 700;
  background: var(--sc-color-border);
  color: var(--sc-color-muted);
  padding: .1rem .45rem;
  border-radius: 999px;
  flex-shrink: 0;
}
.scsl-topic-pill:hover .scsl-topic-pill__count {
  background: var(--sc-color-accent);
  color: #fff;
}



/* ══════════════════════════════════════════
   FILTER BAR: TWO-ROW LAYOUT
   ══════════════════════════════════════════ */

/* Outer wrapper: no background: rows control their own styling */
.scsl-list-filters { margin-bottom: 1.5rem; }

/* Top row: search + date: above filter box, right-aligned */
.scsl-filters-row--top {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .5rem;
  flex-wrap: wrap;
}

/* Bottom row: dropdowns */
.scsl-filters-row--dropdowns {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
}
/* Selects have a natural minimum but don't stretch to fill */
.scsl-filters-row--dropdowns .scsl-filter-select {
  flex: 0 1 auto;
  min-width: 130px;
  max-width: 200px;
}
/* Search wrap also shouldn't stretch */
.scsl-filters-row--dropdowns .scsl-filter-search-wrap {
  flex: 0 0 auto;
}

/* Search: field + button as single inline unit */
.scsl-filter-search-wrap {
  display: flex;
  align-items: center;
  border: 1px solid var(--sc-color-border);
  border-radius: var(--sc-radius);
  background: var(--sc-color-bg);
  overflow: hidden;
  padding-right: 5px;
}
.scsl-filter-search {
  border: none !important;
  outline: none;
  padding: .45rem .75rem;
  font-size: .875rem;
  color: var(--sc-color-text);
  background: transparent;
  font-family: var(--sc-font-body);
  width: 250px;
  box-shadow: none !important;
}
@media (max-width: 480px) { .scsl-filter-search { width: 150px; } }
.scsl-filter-search::placeholder { color: var(--sc-color-muted); }
  display: flex;
  align-items: center;
  justify-content: center;
  padding: .45rem .65rem;
  border: none;
  border-left: 1px solid var(--sc-color-border);
  background: var(--sc-color-bg-subtle);
  color: var(--sc-color-text);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.scsl-search-btn:hover { background: var(--sc-color-accent); color: #fff; }
.scsl-search-btn svg { display: block; }


/* ══════════════════════════════════════════
   SF_LATEST SHORTCODE
   ══════════════════════════════════════════ */

.scsl-latest {
  width: 100%;
  overflow-x: hidden;
}
.scsl-latest__meta {
  font-size: .875rem;
  margin-bottom: .5rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.scsl-latest__speaker a {
  color: var(--sc-color-muted);
  text-decoration: none;
  font-weight: 500;
}
.scsl-latest__speaker a:hover { color: var(--sc-color-accent); }
.scsl-latest__sep { margin: 0 .3rem; }

.scsl-latest__title {
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 1rem;
  letter-spacing: -.01em;
}
.scsl-latest__title a { text-decoration: none; }
.scsl-latest__title a:hover { color: var(--sc-color-accent); }
.scsl-latest__video { margin-bottom: 1rem; border-radius: var(--sc-radius-lg); overflow: hidden; }
.scsl-latest__thumbnail { margin-bottom: 1rem; border-radius: var(--sc-radius-lg); overflow: hidden; }
.scsl-latest__thumb-img { width: 100%; height: auto; display: block; }
.scsl-latest__desc {
  font-size: 1rem;
  line-height: 1.7;
  margin-bottom: 1.25rem;
}
.scsl-latest__actions { display: flex; gap: .75rem; flex-wrap: wrap; }
.scsl-latest__actions .scsl-btn--ghost { min-width: auto; }

/* Ghost button colors: near-black text, white bg, hover inverts */
.scsl-btn--ghost,
.scsl-btn--ghost:link,
.scsl-btn--ghost:visited {
  color: var(--sc-color-text);
  background: var(--sc-color-bg);
}
.scsl-btn--ghost svg { color: inherit; fill: currentColor; stroke: currentColor; }
.scsl-btn--ghost:hover,
.scsl-btn--ghost:focus {
  color: #fff;
  background: var(--sc-color-text);
  border-color: var(--sc-color-text);
}

/* Warm theme ghost */
.sc-theme-warm .scsl-btn--ghost {
  color: #0c0c0e;
  background: #fff;
  border-color: #d3b673;
}
.sc-theme-warm .scsl-btn--ghost:hover {
  color: #fff;
  background: #0c0c0e;
  border-color: #0c0c0e;
}

/* ── Single tab shown as heading ────────── */
.sc-content-section-heading {
  font-family: var(--sc-font-display);
  color: var(--sc-color-text);
}

/*
 * Sitting inside a tab panel, directly under the tab strip. The tab above
 * already names the section, so a heading the same size would read as the
 * label printed twice. Smaller and quieter: it is there to give the page a
 * real outline for anything reading structure rather than to be looked at.
 */
.sc-tab-panel > .sc-content-section-heading {
  margin: 0 0 1rem;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--sc-color-muted, #50575e);
}

/*
 * The only section on the page, so there is no tab strip above it and the
 * heading is the thing that names it.
 */
.scsl-content-tabs:not(:has(.scsl-tabs-nav)) .sc-tab-panel > .sc-content-section-heading {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--sc-color-text);
}


/* ── Series hero eyebrow & no-image variant ── */
.scsl-series-hero__eyebrow {
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--sc-color-accent);
  margin: 0 0 .4rem;
}
.scsl-series-hero--no-image {
  padding-bottom: 0;
}
.scsl-series-hero--no-image .scsl-series-hero__content {
  padding-top: 0;
}

/* ── Series Slider ──────────────────────────────────────────────────────── */
.scsl-series-slider-wrap {
  position: relative;
  /* overflow:hidden clips the scrollbar but not the scroll content */
  overflow: hidden;
}
/* Scroll container: horizontal scroll only */
.scsl-series-slider {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  scroll-behavior: smooth;
  padding-bottom: .5rem;
}
.scsl-series-slider::-webkit-scrollbar { display: none; }

.scsl-series-slider__item {
  flex: 0 0 calc(33.333% - .85rem);
  scroll-snap-align: start;
  min-width: 240px;
}
@media (max-width: 768px) {
  .scsl-series-slider__item { flex: 0 0 calc(80% - .85rem); }
}
@media (max-width: 480px) {
  .scsl-series-slider__item { flex: 0 0 calc(90% - .85rem); }
}

/* Prev / Next buttons: overlay on the inside edges of the slider */
.scsl-slider-btn {
  position: absolute;
  top: 35%;
  transform: translateY(-50%);
  background: rgba(255,255,255,.92);
  border: 1px solid var(--sc-color-border, #ddd);
  border-radius: 50%;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.1rem;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
  transition: background .15s, box-shadow .15s, color .15s;
  z-index: 3;
  /* Stay inside the wrapper so overflow:hidden on parent doesn't clip them */
  line-height: 1;
}
.scsl-slider-btn:hover {
  background: var(--sc-color-accent, #d3b673);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 3px 10px rgba(0,0,0,.2);
}
/* Position INSIDE the slider edges, not hanging outside */
.scsl-slider-btn--prev { left: 8px; }
.scsl-slider-btn--next { right: 8px; }

/* Series pagination */
.scsl-series-pagination {
  display: flex;
  align-items: center;
  gap: .35rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--sc-color-border, #e5e5e5);
  font-size: .875rem;
}
/* Shared style: numbered links + prev/next arrows */
.scsl-series-pagination a,
.scsl-series-pagination span.scsl-page-current {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 .5rem;
  border: 1px solid var(--sc-color-border, #ddd);
  border-radius: var(--sc-radius, 6px);
  text-decoration: none;
  color: var(--sc-color-text, #222);
  font-weight: 500;
  transition: background .15s, border-color .15s, color .15s;
  line-height: 1;
}
.scsl-series-pagination a:hover {
  background: var(--sc-color-bg-subtle, #f5f0e8);
  border-color: var(--sc-color-accent, #d3b673);
  color: var(--sc-color-accent, #d3b673);
}
/* Current page */
.scsl-series-pagination span.scsl-page-current {
  background: var(--sc-color-accent, #d3b673);
  border-color: var(--sc-color-accent, #d3b673);
  color: #fff;
  cursor: default;
  font-weight: 700;
}
/* Prev/next arrow buttons: slightly wider */
.scsl-series-pagination .scsl-page-prev,
.scsl-series-pagination .scsl-page-next {
  font-size: 1rem;
  padding: 0 .75rem;
  color: var(--sc-color-text-muted, #666);
  border-color: var(--sc-color-border, #ddd);
}
.scsl-series-pagination .scsl-page-prev:hover,
.scsl-series-pagination .scsl-page-next:hover {
  background: var(--sc-color-accent, #d3b673);
  border-color: var(--sc-color-accent, #d3b673);
  color: #fff;
}

/* ═══════════════════════════════════════════════════════════════════════
   MOBILE OPTIMIZATIONS
   Targets phones (≤480px) and small tablets (≤640px)
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Reduce outer padding on the shortcode wrapper ─────────────────── */
@media (max-width: 640px) {
  .sc-wrap {
    padding-left: .75rem;
    padding-right: .75rem;
  }
  .scsl-list-results--cards {
    padding: 1rem;
  }
}

/* ── Filter bar: stack vertically, full-width selects ──────────────── */
@media (max-width: 640px) {
  .scsl-list-filters {
    padding: .6rem .75rem;
    gap: .4rem;
  }
  /* Two dropdowns per row on mobile */
  .scsl-filter-select {
    flex: 1 1 calc(50% - .2rem);
    min-width: 0;
    font-size: .825rem;
  }
  /* Search takes full row */
  .scsl-filter-search-wrap {
    flex: 1 1 100%;
    min-width: 0;
  }
  .scsl-filter-search-wrap input {
    width: 100%;
  }
  .scsl-filter-clear {
    flex: 1 1 100%;
    text-align: center;
  }
}

/* ── Episode cards: simpler layout on mobile ────────────────────────── */
@media (max-width: 480px) {
  .scsl-episode-card {
    grid-template-columns: 62px 1fr;
    padding: 10px 10px;
    gap: 0 10px;
    align-items: center;
  }
  .scsl-episode-card--no-photo {
    grid-template-columns: 1fr;
  }
  .scsl-episode-card__speaker-photo {
    padding: 0;
  }
  .scsl-episode-card__speaker-img {
    width: 56px;
    height: 56px;
  }
  .scsl-episode-card__body {
    padding: 0;
    gap: .15rem;
  }
  .scsl-episode-card__actions {
    grid-column: 1 / -1;
    border-top: 1px solid var(--sc-color-border);
    padding: .5rem 0 0;
    margin-top: .4rem;
    flex-direction: row;
    gap: .5rem;
  }
}

/* ── Latest sermon: tighter spacing, smaller title ──────────────────── */
@media (max-width: 640px) {
  .scsl-latest__title {
    font-size: clamp(1.2rem, 5vw, 1.6rem);
    margin-bottom: .75rem;
  }
  .scsl-latest__desc {
    font-size: .9rem;
    margin-bottom: 1rem;
  }
  .scsl-latest__actions {
    flex-direction: column;
  }
  .scsl-latest__actions .scsl-btn {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
  /* Video embed: full width */
}

/* ── Series grid: 1 column on mobile ────────────────────────────────── */
@media (max-width: 560px) {

  .scsl-series-card__image img,
  .scsl-series-card__placeholder {
    height: auto;
    min-height: 160px;
    object-fit: contain;
    background: var(--sc-color-bg-subtle);
  }
}

/* ── Series card body: tighter on mobile ───────────────────────────── */
@media (max-width: 640px) {
  .scsl-series-card__body {
    padding: .8rem;
  }
  .scsl-series-card__title {
    font-size: 1rem;
  }
}

/* ── Pagination: smaller buttons on mobile ──────────────────────────── */
@media (max-width: 480px) {
  .scsl-list-pagination a,
  .scsl-list-pagination span,
  .scsl-series-pagination a,
  .scsl-series-pagination span {
    min-width: 30px;
    height: 30px;
    font-size: .8rem;
  }
}

/* ── Slider: better mobile experience ──────────────────────────────── */
@media (max-width: 640px) {
  .scsl-series-slider {
    /* Peek: 85% card width shows the next card peeking in */
  }
  .scsl-series-slider__item {
    flex: 0 0 85%;
    min-width: 0;
    scroll-snap-align: start;
  }
  /* Hide arrow buttons on touch devices: swipe handles it */
  .scsl-slider-btn {
    display: none;
  }
}
@media (max-width: 380px) {
  .scsl-series-slider__item { flex: 0 0 92%; }
}

/* ── Single sermon page: mobile tweaks ─────────────────────────────── */
@media (max-width: 640px) {
  .scsl-sermon-hero__title { font-size: clamp(1.3rem, 5vw, 1.8rem); }
  .scsl-tabs-nav { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .scsl-tab-btn { white-space: nowrap; flex-shrink: 0; }
  .scsl-series-hero { grid-template-columns: 1fr; }
  .scsl-series-hero__image { max-height: 220px; overflow: hidden; }
  .scsl-series-hero__image img { width: 100%; height: 100%; object-fit: cover; }
}

/* ── Scripture panel: full width on mobile ──────────────────────────── */
@media (max-width: 640px) {
  .scsl-scripture-panel { padding: 1rem; }
  .scsl-scripture-panel__text { font-size: 1rem; }
}

/* ── Mobile base font size ──────────────────────────────────────────── */
@media (max-width: 640px) {
  .sc-wrap {
    font-size: 1rem; /* ensure base is 16px not smaller */
  }
  .scsl-episode-card__title { font-size: 1rem; }
  .scsl-episode-card__meta  { font-size: .825rem; }

  .sc-list-item__meta     { font-size: .825rem; }
}

/* ── Frontend tabs: wrap gracefully on mobile ───────────────────────── */
@media (max-width: 480px) {
  .scsl-tabs-nav {
    gap: .25rem;
  }
  .scsl-tab-btn {
    padding: .4rem .75rem;
    font-size: .8rem;
  }
}

/* ── Speaker Card ────────────────────────── */
.scsl-speaker-grid {
  display: grid;
  gap: 1.5rem;
}
.scsl-speaker-card {
  position: relative;
  background: var(--sc-color-bg);
  border: 1px solid var(--sc-color-border);
  border-radius: var(--sc-radius-lg);
  overflow: hidden;
  box-shadow: var(--sc-shadow-sm);
  transition: box-shadow .2s, transform .2s;
  text-align: center;
}
.scsl-speaker-card:hover {
  box-shadow: var(--sc-shadow-md);
  transform: translateY(-2px);
  border-color: var(--sc-color-accent);
}
.scsl-speaker-card__image {
  width: 100%;
  overflow: hidden;
}
.scsl-speaker-card__image img {
  width: 100%;
  height: 215px;
  object-fit: cover;
  display: block;
}
.scsl-speaker-card__placeholder {
  width: 100%;
  height: 215px;
  background: var(--sc-color-accent-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-weight: 700;
  color: var(--sc-color-accent);
}
.scsl-speaker-card__body {
  padding: 1rem;
}
.scsl-speaker-card__name {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 0 .25rem;
  color: var(--sc-color-text);
}
.scsl-speaker-card__title {
  font-size: .8rem;
  color: var(--sc-color-muted);
  margin: 0 0 .35rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* ---------------------------------------------------- content list block */

/*
 * Almost nothing, on purpose. The cards and the slider are the ones the rest
 * of the plugin already uses, so they carry whatever theme a church has
 * chosen and look the same here as anywhere else.
 */

.scsl-content-list {
  margin: 2rem 0;
}

.scsl-content-list__heading {
  margin: 0 0 1rem;
}

/* Sermon cards in a grid or slider: the series card, plus somewhere to play. */

.scsl-sermon-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-top: .65rem;
  position: relative;
  z-index: 2;
}

.scsl-series-card__excerpt {
  margin: .5rem 0 0;
  font-size: .9rem;
  line-height: 1.5;
  color: var(--sc-color-muted, #666);
}

/*
 * Somewhere to land. Arriving from a listing scrolls the tabs to the top of
 * the window, and a theme with a fixed header would otherwise cover them.
 */
.scsl-content-tabs {
  scroll-margin-top: 6rem;
}


/* ── Living Bulletin bridge: sermon cards on a service page ─────────────
   Renders inside the .sunday-section wrapper Living Bulletin provides,
   so section title/border styles come from Living Bulletin. These rules
   only cover the cards themselves and their internal layout. */
/* Sermon section on Living Bulletin service pages. Renders inside the
   .sunday-section wrapper Living Bulletin provides, so section title and
   border styles come from Living Bulletin. These rules only cover the cards
   themselves and their internal layout.

   Visual weight matches the shared .sc-card conventions: background,
   border, rounded corners, hover lift. The View Sermon call to action
   uses the .sc-btn class from core so it inherits the site's button
   styling automatically. Colors and radius come from CSS tokens so the
   card follows whatever theme the site is running. */
.scsl-service-sermons {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
	gap: 1rem;
}
.scsl-service-sermon-card {
	background: var(--sc-color-bg-subtle, #f9fafb);
	border: 1px solid var(--sc-color-border, #e5e7eb);
	border-radius: var(--sc-radius-lg, 12px);
	transition: box-shadow .18s, transform .18s;
	display: grid;
	grid-template-columns: 290px 1fr 1fr;
	gap: 1.5rem;
	padding: 1.25rem;
}
/* When the metadata aside has nothing to show, collapse to two columns
   so the image and body still fill the card cleanly. */
.scsl-service-sermon-card:not(.has-meta) {
	grid-template-columns: 290px 1fr;
}
.scsl-service-sermon-card:hover {
	box-shadow: var(--sc-shadow-md, 0 4px 12px rgba(0,0,0,.08));
	transform: translateY(-2px);
}

/* Image column. The frame clips the image with rounded corners via
   overflow: hidden, so the image visually has the border radius rather
   than a matte sitting behind it. object-fit: cover fills the frame,
   accepting that portrait posters may crop slightly to keep the image's
   own edges rounded. */
.scsl-service-sermon-card__image {
	border-radius: var(--sc-radius, 8px);
	aspect-ratio: 16 / 10;
	overflow: hidden;
	display: block;
	text-decoration: none;
}
.scsl-service-sermon-card__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Body column: title, excerpt, View Sermon button. */
.scsl-service-sermon-card__body {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: .6rem;
}
.scsl-service-sermon-card__title {
	margin: 0;
	font-size: 1.25rem;
	line-height: 1.3;
}
.scsl-service-sermon-card__title a {
	text-decoration: none;
	color: inherit;
}
.scsl-service-sermon-card__title a:hover {
	text-decoration: underline;
}
.scsl-service-sermon-card__excerpt {
	margin: 0;
	line-height: 1.55;
	/* Cap prose line length even when the card is wide, so the excerpt
	   stays readable rather than sprawling across the whole middle. */
	max-width: 60ch;
}
.scsl-service-sermon-card__cta-wrap {
	margin: .25rem 0 0;
}

/* Metadata aside. Vertical rule on the left visually separates it from
   the body. Uses accent color so it reads with the theme rather than
   disappearing into the low-contrast border color. Rows stack tightly
   and each is small enough to fit alongside the wider body content. */
.scsl-service-sermon-card__meta {
	border-left: 1px solid var(--sc-color-accent, #d3b673);
	padding-left: 1.25rem;
	display: flex;
	flex-direction: column;
	gap: .5rem;
	min-width: 0;
}
.scsl-service-sermon-card__meta-row {
	margin: 0;
	font-size: .9rem;
	line-height: 1.4;
}
.scsl-service-sermon-card__meta-label {
	display: inline;
	font-weight: 600;
	margin-right: .25rem;
}
.scsl-service-sermon-card__meta-value {
	display: inline;
}
/*
 * The meta rows are links in running text: the theme's link color, underlined
 * on hover. A topic chip in those rows is not that. It is a button shape with
 * its own outline, ink and fill, and taking the link treatment left it brown
 * inside a gold pill with a line under the word on hover, so it is excluded
 * here rather than argued with further down.
 */
.scsl-service-sermon-card__meta a:not(.scsl-topic-tag) {
	color: var(--sc-color-link, #1e40af);
	text-decoration: none;
}
.scsl-service-sermon-card__meta a:not(.scsl-topic-tag):hover {
	color: var(--sc-color-link-hover, #1e3a8a);
	text-decoration: underline;
}
/* Action rows (Bible Study, Transcript) have no label, so the link
   itself carries the weight. Slightly bolder to read as an action rather
   than a passing data point. */
.scsl-service-sermon-card__meta-row--action a {
	font-weight: 600;
}

/* Topics on a card read as chips rather than as a sentence of links, so they
   are told apart from the passage row above them at a glance. */
.scsl-card-topics {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .3rem;
}
.scsl-card-topics .scsl-service-sermon-card__meta-label {
	margin-right: .15rem;
}

/* Stack everything on narrow viewports. The separator becomes a top
   border since the aside is now above the fold of the card. */
@media (max-width: 640px) {
	.scsl-service-sermon-card,
	.scsl-service-sermon-card.has-meta {
		grid-template-columns: 1fr;
	}
	.scsl-service-sermon-card__image {
		aspect-ratio: 16 / 9;
	}
	.scsl-service-sermon-card__meta {
		border-left: 0;
		border-top: 1px solid var(--sc-color-accent, #d3b673);
		padding-left: 0;
		padding-top: 1rem;
	}
}

/* ── Sermon context ────────────────────────────
   A sentence saying who preached, where, and when the church gathers. Quiet
   on purpose: it is there for the reader who needs orienting and for search
   engines, not as another thing competing for attention on the page. */
.scsl-sermon-blurb {
	/*
	 * The space below was never set at all, so the series that follows sat
	 * against the attribution with no separation, reading as one block rather
	 * than two. That is what this fixes.
	 *
	 * The space above is kept small on purpose rather than removed. Adjacent
	 * margins collapse, so against the tab block's own three below it this
	 * contributes nothing and the gap is unchanged. It matters only on a
	 * sermon with no tabs at all, where the tab block is not there to provide
	 * any, and without it the attribution would sit against whatever ended
	 * the page.
	 */
	margin: 1rem 0 2.5rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--sc-color-border, rgba(0, 0, 0, .1));
	font-size: .92rem;
	line-height: 1.6;
	color: var(--sc-color-muted, rgba(0, 0, 0, .6));
	max-width: 70ch;
}

/* Scripture index: passages grouped by book. Reuses the topic pill so a
   church's two term lists look like the same site. */
.scsl-scripture-index__book { margin: 0 0 1.75rem; }

.scsl-scripture-index__title {
	font-size: 1.05rem;
	margin: 0 0 .5rem;
	padding-bottom: .35rem;
	border-bottom: 1px solid rgba(0, 0, 0, .08);
}

/* The read-it link beside a passage on a sermon page. Quieter than the
   passage itself, which now goes to this site rather than off it. */
.scsl-scripture-ref__read {
	margin-left: .4rem;
	font-size: .85em;
	opacity: .7;
	text-decoration: none;
	white-space: nowrap;
}

.scsl-scripture-ref__read:hover,
.scsl-scripture-ref__read:focus { opacity: 1; }

/* Passage pages list one card per row rather than side by side. A passage
   usually has a handful of sermons, and two narrow columns of a card built
   for a wide one leaves the text cramped against the image. */
/* One card per row, on every page that lists a set of sermons this way: a
   passage, a topic, anything later. The service grid behind it is two up,
   which is right for a service and wrong for a list somebody is reading
   through. */
.scsl-scripture-sermons,
.scsl-topic-sermons,
.scsl-page-sermons {
	grid-template-columns: 1fr;
}

/* Full sermon index: every sermon, grouped by year. Plain on purpose, since
   it exists to be complete and linkable rather than browsed. */
.scsl-sermon-index__year { margin: 0 0 1.75rem; }

.scsl-sermon-index__heading {
	font-size: 1.05rem;
	margin: 0 0 .5rem;
	padding-bottom: .35rem;
	border-bottom: 1px solid rgba(0, 0, 0, .08);
}

.scsl-sermon-index__list { margin: 0; padding-left: 1.1rem; }
.scsl-sermon-index__item { margin: 0 0 .25rem; }

.scsl-sermon-index__speaker { opacity: .65; font-size: .9em; }

/* A way back to the top of the sermon, beside the tabs. Quiet on purpose:
   arriving from an article, this says where you are rather than asking to be
   pressed. */
.scsl-tabs-nav__up {
	/*
	 * Beside the tabs, not at the far edge of the row.
	 *
	 * Pushed right it read as unrelated furniture at the other end of the
	 * screen. Sitting next to the last tab, it reads as part of the same
	 * group, which is the point: it says what this page is.
	 */
	align-self: center;
	flex: 0 0 auto;
	margin-left: .75rem;

	font-size: .95rem;
	font-weight: 600;

	/* The same accent the tabs use, so it belongs to them. */
	/* The plugin's own accent, which is what the active tab uses. Reaching
	   for the theme's variable instead picked up whatever Elementor had set,
	   which on a given site is any color at all. */
	color: var(--sc-color-accent);
	text-decoration: none;
	white-space: nowrap;
}

.scsl-tabs-nav__up:hover,
.scsl-tabs-nav__up:focus {
	color: var(--sc-color-primary, #0c0c0c);
	text-decoration: underline;
}

/* The end chapter, and the control that reveals it. */
.scsl-pp-more { font-size: .9em; text-decoration: none; }

/* ── Scripture page: the summary above the sermons ────────── */

/*
 * A lead paragraph, not body copy. It is the first prose on the page and the
 * thing a search result or an assistant is most likely to quote, so it is given
 * room to sit apart from the cards. Without the gap it reads as a caption
 * belonging to the first card rather than as an introduction to all of them.
 *
 * Deliberately no max-width: the cards below run the full container, and a
 * narrower column here would read as a different kind of content.
 */
.scsl-scripture-summary {
	margin: 0 0 3rem;
}

.scsl-scripture-summary p {
	margin: 0 0 1rem;
	line-height: 1.7;
}

.scsl-scripture-summary p:last-child {
	margin-bottom: 0;
}

/* ── Scripture page: sections below the passage's own sermons ────────── */

/*
 * Air above each following section. These sit under a run of sermon cards,
 * and without a clear gap the heading reads as a caption belonging to the
 * last card rather than the start of something new.
 */
.scsl-scripture-articles,
.scsl-scripture-book {
	margin-top: 3.5rem;
}

/*
 * Sized here rather than left to the theme. These headings open a section under
 * a run of cards, and at the theme's default they came out barely larger than
 * the card titles beneath them, which reads as a caption rather than a heading.
 * Both scripture sections share the size so they look like siblings.
 */
.scsl-scripture-book__title,
.scsl-scripture-articles .scsl-content-list__heading {
	font-size: clamp(1.5rem, 2.6vw, 1.9rem);
	font-weight: 700;
	line-height: 1.2;
	margin: 0 0 1.5rem;
}

/*
 * Topics taught alongside this one, each with its own run of sermons.
 *
 * Spaced like the book section on a passage page, because it is the same move:
 * a new section opening under a run of cards. Without it the heading sat on
 * the card above and read as that card's caption rather than as the start of
 * something else.
 */
.scsl-topic-related {
	margin-top: 3.5rem;
}
.scsl-topic-related__group {
	margin-top: 3rem;
}
.scsl-topic-related__name {
	font-size: clamp(1.5rem, 2.6vw, 1.9rem);
	font-weight: 700;
	line-height: 1.2;
	margin: 0 0 1.5rem;
}

/*
 * Why this topic is here, said in the heading's own line. Quieter and lighter
 * than the topic's name: it is the reason rather than the subject, and at the
 * heading's weight the two ran together as one long title.
 */
.scsl-topic-related__shared {
	font-size: .95rem;
	font-weight: 400;
	color: var(--sc-color-muted);
}

/*
 * The book list is capped rather than paginated, so this link is the way
 * through to the rest. Shown even when nothing was cut off, because the book
 * page is a fuller view either way: it includes the sermons listed at the top
 * of this page, which this section deliberately leaves out.
 */
.scsl-scripture-book__more,
.scsl-loadmore {
	margin: 2.25rem 0 0;
}

/* ── Sermon questions ────────────────────────────────────────────────── */

/*
 * Numbered, and set as a list rather than a run of headings.
 *
 * A page of questions and answers formatted as plain prose is hard to scan and
 * looks like the transcript it came from. Numbering each one gives the eye a
 * place to land, and the count itself tells a reader how much is here before
 * they start.
 *
 * The counter is drawn rather than using the list marker, so it can sit in the
 * accent color and hold its shape next to a question that wraps to two lines.
 */
.scsl-faq {
	counter-reset: scsl-faq;
	list-style: none;
	margin: 0;
	padding: 0;
}

.scsl-faq__item {
	counter-increment: scsl-faq;
	position: relative;
	display: flex;
	gap: 1rem;
	padding: 1.25rem 1.25rem 1.25rem 1.1rem;
	margin: 0 0 .75rem;
	background: var(--sc-color-bg-subtle, #f7f7f8);
	border-radius: var(--sc-radius, 8px);

	/* A quiet edge in the accent color, so a run of these reads as one set. */
	border-left: 3px solid var(--sc-color-accent, #c9975a);
}

.scsl-faq__item::before {
	content: counter(scsl-faq);
	flex: 0 0 auto;
	width: 1.65rem;
	height: 1.65rem;
	margin-top: .1rem;
	border-radius: 50%;
	background: var(--sc-color-accent, #c9975a);
	color: #fff;
	font-size: .8rem;
	font-weight: 700;
	line-height: 1.65rem;
	text-align: center;
}

.scsl-faq__body {
	min-width: 0;
}

.scsl-faq__question {
	margin: 0 0 .4rem;
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.35;
	color: var(--sc-color-text, #1a1a1a);
}

.scsl-faq__answer {
	color: var(--sc-color-muted, #55555f);
	line-height: 1.65;
}

.scsl-faq__answer > p {
	margin: 0 0 .65rem;
}

.scsl-faq__answer > p:last-child {
	margin-bottom: 0;
}

/*
 * A scripture reference at the end of an answer is a fact worth finding again,
 * so it is set apart from the sentence around it rather than left as run of
 * body text.
 */
.scsl-faq__answer strong,
.scsl-faq__answer b {
	color: var(--sc-color-text, #1a1a1a);
	font-weight: 600;
}

@media (max-width: 480px) {
	.scsl-faq__item {
		gap: .75rem;
		padding: 1rem .9rem;
	}
}