/* ═══════════════════════════════════════════════════════════════════════════
   BETHEL — the pieces only this template has.

   One rule. The house style is families/_chrome-editorial.css, the chapel's
   paint and type are families/chapel.css, and the service board, numbered
   shape and enquiry form are shared furniture.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Newsreader's italic is genuinely narrow, so the register's one turning line
   needs a touch more room than the shared chrome gives it. */
.welcome__turn { letter-spacing: -0.005em; }

/* Welcome slider: built on the theme's existing image panel dimensions. */
.welcome__slider {
  position: relative;
  overflow: hidden;
}

.welcome__slides {
  position: relative;
  block-size: 100%;
  min-block-size: inherit;
}

.welcome__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateX(5%);
  transition: opacity 600ms ease, transform 600ms ease;
}

.welcome__slide.is-active {
  opacity: 1;
  transform: translateX(0);
}

.welcome__control {
  position: absolute;
  inset-block-start: 50%;
  z-index: 1;
  display: grid;
  place-items: center;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  padding: 0;
  border: 1px solid rgb(255 255 255 / 65%);
  border-radius: 50%;
  background: rgb(16 23 21 / 65%);
  color: #fff;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  transform: translateY(-50%);
}

.welcome__control:hover,
.welcome__control:focus-visible {
  background: var(--church-green);
}

.welcome__control--previous { inset-inline-start: var(--s-3); }
.welcome__control--next { inset-inline-end: var(--s-3); }

.welcome__dots {
  position: absolute;
  inset-block-end: var(--s-4);
  inset-inline: 0;
  z-index: 1;
  display: flex;
  justify-content: center;
  gap: var(--s-2);
}

.welcome__dot {
  inline-size: 0.75rem;
  block-size: 0.75rem;
  padding: 0;
  border: 1px solid #fff;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}

.welcome__dot[aria-current="true"] { background: var(--church-red); }

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

/* Divine Covenant Church brand accents. These load after the downloaded
   theme so they refine it without changing its layout or component structure. */
:root,
:root[data-theme="light"] {
  --church-green: #24734D;
  --church-red: #A92C2A;
  --accent: var(--church-green);
  --accent-fg: #FFFFFF;
}

:root[data-theme="dark"] {
  --church-green: #69B98A;
  --church-red: #F0807A;
  --accent: var(--church-green);
  --accent-fg: #101715;
}

/* The original mark was a wordmark. Keep its space in the theme's centred
   header while sizing the supplied image independently and responsively. */
.porch__brand {
  padding-block: var(--s-2);
}

.porch__logo {
  display: block;
  inline-size: clamp(3rem, 7vw, 4.25rem);
  block-size: auto;
  margin-inline: auto;
}

.porch__church-name {
  display: block;
  margin-block-start: var(--s-2);
}

.porch {
  border-block-end: 3px solid var(--church-green);
}

.porch__ways {
  border-block-start-color: color-mix(in srgb, var(--church-green) 30%, var(--line));
}

.porch__ways a:hover {
  color: var(--church-green);
}

.porch__ways a[aria-current="page"] {
  color: var(--church-green);
  box-shadow: inset 0 -3px 0 var(--church-red);
}

.setting__head h2::after {
  content: "";
  display: block;
  inline-size: 2.5rem;
  block-size: 0.2rem;
  margin: var(--s-3) auto 0;
  background: var(--church-red);
}

.course__more {
  color: var(--church-green);
}

.valediction {
  border-block-start: 3px solid var(--church-red);
}

@media (max-width: 55rem) {
  .porch__brand {
    padding-block: var(--s-2);
  }

  .porch__logo {
    inline-size: clamp(2.75rem, 13vw, 3.5rem);
  }
}