/* Public catalog — site shell / light church look */

html.af-html--site {
  color-scheme: light;
}

.af-public--site {
  --af-site-ink: #3a6c8d;
  --af-site-ink-2: #475161;
  --af-site-accent: var(--af-site-tabs-accent, #3a6c8d);
  --af-site-cta: var(--af-site-player-accent, #d32d40);
  --af-site-line: #dee5ef;
  /* Do not set font/color here — church body/header/footer CSS must own chrome. */
  background: var(--af-site-page-bg, var(--background, #fff));
}

.af-public--site,
.af-public--site html {
  color-scheme: light;
}

/* Do not restyle shell chrome (header/nav/footer) — only catalog content. */
.af-public--site .af-site-main a {
  color: var(--af-site-accent);
}

.af-public--site .af-site-main .muted {
  color: #6a8aa1;
}

/* Optional header overrides (only when CSS vars are set in settings). */
.af-public--site.af-header-custom #header {
  background: var(--af-site-header-bg, unset);
  border-bottom: var(--af-site-header-border-w, 0) solid var(--af-site-header-border, transparent);
}

/* Optional active-nav color override — replaces site underline, never stacks on <a>/<span>. */
.af-public--site.af-nav-custom .wf-drawer__l1 > .wf-drawer__link.active {
  box-shadow: inset 0 calc(var(--af-site-nav-underline, 4px) * -1) 0 var(--af-site-nav-underline-color, var(--border_high)) !important;
}

.af-public--site .af-site-main {
  background: var(--af-site-content-bg, #fff);
  padding-block: 2rem 3rem;
  min-height: 50vh;
}

.af-public--site .af-catalog-wrap {
  max-width: 1100px;
}

.af-site-intro {
  margin-bottom: 1.5rem;
}

.af-site-intro__title {
  margin: 0 0 .4rem;
  font-family: "DM Sans", sans-serif;
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 700;
  color: var(--af-site-ink);
}

.af-site-intro__lede {
  margin: 0 0 1rem;
  color: var(--af-site-ink-2);
  line-height: 1.45;
  max-width: 42rem;
}

.af-site-intro__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1.1rem;
  align-items: center;
  margin: 0 0 .5rem;
}

/* Hero overlay: true visual center over the banner image */
.af-public--site .hero.hero--max_head,
.af-public--site .hero[class*="hero--max_head"] {
  position: relative;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  margin-top: 0 !important;
  min-height: clamp(240px, 34vw, 440px);
  overflow: hidden;
}

.af-public--site .hero .controls.swiper,
.af-public--site .hero .swiper-wrapper,
.af-public--site .hero .swiper-slide {
  height: 100%;
  min-height: inherit;
}

.af-public--site .hero .swiper-slide-content {
  position: relative;
  display: block;
  height: 100%;
  min-height: clamp(240px, 34vw, 440px);
}

.af-public--site .hero .swiper-slide-content picture,
.af-public--site .hero .slide__image-desktop,
.af-public--site .hero .slide__image-mobile {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  display: block !important;
}

.af-public--site .hero .swiper-slide-content img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block;
}

.af-public--site .hero .controls__container {
  display: none !important;
}

.af-public--site .hero .component-text-overlay {
  position: absolute !important;
  inset: 0 !important;
  z-index: 10;
  display: grid !important;
  place-items: center !important;
  justify-items: center !important;
  align-content: center !important;
  text-align: center !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box;
  pointer-events: none;
}

.af-public--site .hero .component-text-overlay__spacer {
  display: contents; /* flatten so overlay grid centers the inner block */
}

.af-public--site .hero .component-text-overlay__inner {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 1rem 1.25rem !important;
  max-width: min(90vw, 40rem) !important;
  width: max-content;
  text-align: center !important;
  background: transparent !important;
}

.af-public--site .hero .component-text-overlay__headline,
.af-public--site .hero .component-text-overlay__text {
  margin-left: 0 !important;
  margin-right: 0 !important;
  text-align: center !important;
  width: 100%;
}

.af-public--site .hero .component-text-overlay__headline {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.af-public--site .hero .component-text-overlay__text {
  margin-top: .55rem !important;
  max-width: none !important;
}

.af-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .55rem 1.15rem;
  border-radius: 999px;
  background: var(--af-site-cta);
  color: #fff !important;
  text-decoration: none;
  font-weight: 600;
  border: none;
}

.af-btn:hover {
  filter: brightness(0.95);
}

.af-link {
  color: var(--af-site-accent);
  text-decoration: underline;
  text-underline-offset: .15em;
}

/* Tabs / years — light overrides when inside site shell */
.af-public--site .catalog-tabs-row {
  border-bottom: 1px solid var(--af-site-line);
  margin-bottom: .85rem;
}

.af-public--site .catalog-tab {
  color: var(--af-site-ink);
  border: none;
  border-bottom: var(--af-site-tabs-underline, 3px) solid transparent;
  background: transparent;
  border-radius: 0;
}

.af-public--site .catalog-tab:hover {
  color: var(--af-site-accent);
}

.af-public--site .catalog-tab.is-active {
  color: var(--af-site-accent);
  border-bottom-color: var(--af-site-accent);
  background: transparent;
}

/* Horizontal year pills — neutralize admin “file tab” geometry */
.af-public--site .catalog-years.af-public-years,
.af-public--site .af-public-years {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem;
  position: static;
  width: auto;
  max-width: none;
  margin: 0 0 1rem;
  padding: 0;
  border: none;
  writing-mode: horizontal-tb;
}

.af-public--site .af-public-years .catalog-year-tab {
  position: static;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 0;
  width: auto;
  padding: .35rem .8rem;
  border: 1px solid var(--af-site-line);
  border-radius: .35rem;
  background: #fff;
  color: var(--af-site-ink);
  clip-path: none;
  transform: none !important;
  writing-mode: horizontal-tb;
  text-decoration: none;
  font-size: .9rem;
  line-height: 1.2;
  opacity: 1;
}

.af-public--site .af-public-years .catalog-year-tab:hover {
  transform: none !important;
  border-color: var(--af-site-accent);
  color: var(--af-site-accent);
  opacity: 1;
}

.af-public--site .af-public-years .catalog-year-tab.is-active {
  transform: none !important;
  color: #fff;
  background: var(--af-site-accent);
  border-color: var(--af-site-accent);
  z-index: auto;
}

.af-public--site .af-public-years .catalog-year-tab__label {
  width: auto;
  writing-mode: horizontal-tb;
}

.af-public--site .filter-details summary,
.af-public--site .panel,
.af-public--site .filters {
  background: #f7f9fc;
  border-color: var(--af-site-line);
  color: var(--af-site-ink-2);
}

.af-public--site .af-site-main .panel {
  background: #f7f9fc;
}

.af-public--site .af-site-main button,
.af-public--site .af-site-main .btn {
  background: var(--af-site-cta);
  border-color: var(--af-site-cta);
  color: #fff;
  border-radius: 999px;
}

.af-public--site .af-site-main button:hover,
.af-public--site .af-site-main .btn:hover {
  filter: brightness(0.95);
  background: var(--af-site-cta);
}

.af-public--site .episode-row {
  border-color: var(--af-site-line);
  background: #fff;
}

.af-public--site .episode-body h2,
.af-public--site .episode-body h2 a {
  color: var(--af-site-ink);
  font-family: "DM Sans", sans-serif;
}

.series-detail-back {
  margin: 0 0 .85rem;
}

.series-detail-back a {
  color: var(--af-site-accent, #3a6c8d);
  text-decoration: none;
  font-weight: 600;
}

.series-detail-back a:hover {
  text-decoration: underline;
}

.series-detail-head {
  display: grid;
  grid-template-columns: 7.5rem 1fr;
  gap: 1rem 1.25rem;
  align-items: start;
  margin: 0 0 1.35rem;
  padding: 0 0 1.15rem;
  border-bottom: 1px solid var(--af-site-line, var(--line, #dee5ef));
}

.series-detail-cover {
  width: 7.5rem;
  aspect-ratio: 1;
  border-radius: .4rem;
  overflow: hidden;
  background: color-mix(in srgb, var(--af-site-line, #dee5ef) 55%, #fff);
}

.series-detail-cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.series-detail-cover__empty {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  font-size: .75rem;
  color: var(--af-site-ink-2, #6a8aa1);
  text-align: center;
  padding: .5rem;
}

.series-detail-title {
  margin: 0 0 .4rem;
  font-size: 1.35rem;
  line-height: 1.25;
  color: var(--af-site-ink, #3a6c8d);
  font-family: "DM Sans", sans-serif;
}

.series-detail-desc {
  margin: 0 0 .55rem;
  line-height: 1.45;
  color: var(--af-site-ink-2, #475161);
}

@media (max-width: 600px) {
  .series-detail-head {
    grid-template-columns: 5.5rem 1fr;
    gap: .75rem 1rem;
  }
  .series-detail-cover {
    width: 5.5rem;
  }
}

.af-public--site .play-block {
  border: var(--af-site-player-border-w, 1px) solid var(--af-site-player-border, var(--af-site-line));
  border-radius: var(--af-site-player-radius, 8px);
  overflow: hidden;
  background: #fafbfc;
}

.af-public--site .play-block--audio {
  padding: .55rem .65rem;
  background: #fff;
}

.af-public--site .play-block--audio .play-frame,
.af-public--site .play-block--audio iframe {
  border: 0;
}

.af-public--site .play-spotify-open {
  color: var(--af-site-ink, #3a6c8d);
}

.af-public--site .play-spotify-open:hover {
  color: var(--af-site-accent, #3a6c8d);
  background: color-mix(in srgb, var(--af-site-accent, #3a6c8d) 8%, transparent);
}

.af-public--site .play-label {
  color: var(--af-site-cta);
  font-weight: 600;
}

.af-public--site .meta-row {
  background: #fff;
  border-color: var(--af-site-line);
}

.af-public--site .meta-row--clickable:hover {
  background: color-mix(in srgb, var(--af-site-accent, #3a6c8d) 6%, transparent);
}

.af-public--site .meta-row--clickable:hover .meta-title {
  color: var(--af-site-accent, #3a6c8d);
}

.af-public--site .series-card,
.af-public--site .preacher-card {
  background: #fff;
  border-color: var(--af-site-line);
}

.af-public--site .preacher-card__photo {
  background: transparent !important;
}

.af-public--site .preacher-card__empty {
  background: color-mix(in srgb, var(--af-site-accent, #3a6c8d) 12%, #f3f6f9);
  border-color: color-mix(in srgb, var(--af-site-accent, #3a6c8d) 28%, var(--af-site-line));
  color: var(--af-site-ink, #3a6c8d);
}

.af-public--site .catalog-list--referenten .series-thumb--empty {
  background: #eef2f6;
  border-color: var(--af-site-line);
  color: var(--af-site-ink, #3a6c8d);
}

.af-public--site .series-detail-cover--round {
  border-radius: 50%;
}

.af-public--site .series-detail-cover--round .series-detail-cover__empty,
.af-public--site .series-detail-cover--round .series-detail-cover__initials {
  border-radius: 50%;
}

.af-public--site .series-detail-cover__initials {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  font-size: 1.55rem;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1;
  color: var(--af-site-ink, #3a6c8d);
  background: #eef2f6;
}

.af-public--site .series-card__title,
.af-public--site .preacher-card__title,
.af-public--site .meta-title {
  color: var(--af-site-ink);
}

.af-public--site .scripture-col__title,
.af-public--site .scripture-cat__title {
  color: var(--af-site-ink);
}

.af-public--site .scripture-book-list__item a {
  color: var(--af-site-ink);
  border-color: var(--af-site-line);
}

.af-public--site .scripture-book-list__item.is-active a,
.af-public--site .scripture-book-list__item a:hover {
  border-color: var(--af-site-accent);
  color: var(--af-site-accent);
}

.af-public--site .scripture-modal__dialog {
  background: #fff;
  color: var(--af-site-ink-2);
  border-color: var(--af-site-line);
}

.af-public--site .scripture-modal__titles h2 {
  color: var(--af-site-ink);
}

.af-public--site .inbox-view-btn {
  color: var(--af-site-ink);
  border-color: var(--af-site-line);
}

.af-public--site .inbox-view-btn.is-active {
  background: var(--af-site-accent);
  border-color: var(--af-site-accent);
  color: #fff;
}

.af-public--site .btn,
.af-public--site .btn-secondary {
  border-radius: 999px;
}

.af-public--site .btn-secondary {
  background: transparent;
  border: 1px solid var(--af-site-accent);
  color: var(--af-site-accent);
}

.af-public--site .episode-detail h1 {
  color: var(--af-site-ink);
  font-family: "DM Sans", sans-serif;
}

.af-public--site .brand-back {
  color: var(--af-site-accent);
}

.af-public--site .eyebrow {
  color: #6a8aa1;
}

/* Standalone public (no website URL): keep dark AF theme but still use new tabs */
.af-public--standalone .af-public-tabs-row {
  margin-top: .5rem;
}

.af-public--standalone .af-public-years {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: .4rem;
  position: static;
  width: auto;
  border: none;
  margin-bottom: 1rem;
}

.af-public--standalone .af-public-years .catalog-year-tab {
  transform: none !important;
  clip-path: none;
  width: auto;
  min-width: 0;
  justify-content: center;
  padding: .35rem .8rem;
  border-radius: .35rem;
}

.settings-subhead {
  margin: 1.1rem 0 .45rem;
  font-size: .95rem;
  font-weight: 600;
  color: var(--ink);
}

.checkbox-row {
  display: flex !important;
  align-items: center;
  gap: .55rem;
  margin-bottom: .65rem;
}

.checkbox-row input[type="checkbox"] {
  width: auto;
  margin: 0;
}