.btn-gold {
  background-color: #f2c75d;
  border: 1px solid #f2c75d;
  color: #fff;
  padding: 0.5em 1.25em;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  border-radius: 6px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Hover and focus */
.btn-gold:hover,
.btn-gold:focus {
  background-color: #e5b844; /* Slightly darker gold */
  color: #fff;
  border-color: #e5b844;
}

/* Optional active state */
.btn-gold:active {
  background-color: #d6a830;
  border-color: #d6a830;
}


.navItem-link {
  display: none !important; 
  }
  
  .youtube-video-container {
  position: relative;
  overflow: hidden;
  width: 100%;
}

.youtube-video-container::after {
  display: block;
  content: "";
  padding-top: 56.25%;
}

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

.center {
  margin: auto;
  padding: 10px;
}
.audio-player {
    background-color: rgba(255, 255, 255, 0.6);
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
    padding: 20px;
    max-width: 100%;
    width: 100%;
    backdrop-filter: blur(20px);
     margin: auto;
      min-width: 60%;
      transition: flex-direction 0.3s ease;
}
.album-art {
    width: 400px;
    height: 400px;
    border-radius: 10px;
    overflow: hidden;
    align-items: center;
    margin: auto;
}
.album-art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
      margin: auto;
}

  .audio-title {
  display: flex;
  flex-wrap: wrap;
  width: 60%;
}
.mtk-controls {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 70%;
}
.mtk-controls audio {
    width: 90%;
      min-width: 40%;
      margin: auto;
}
@media (max-width: 1000px) {
    .audio-player {
        flex-direction: column;
        align-items: center;
          width: 80%;
    }
    .album-art {
        margin-right: 0;
        margin-bottom: 20px;
        width: 400px;
        height: 400px;
    }
  .mtk-audio {
    width: 80%;
    padding-left:10px;
    padding-right:10px;
  }
   .mtk-controls {
    width: 80%;
    padding-left:10px;
    padding-right:10px;
  }
}

/* ==========================================================================
   Section tiles for Our Faith
   Same pattern as Our Priorities. Everything is scoped under .faith-tabs so
   none of it can reach the rest of the theme, and the tokens are declared
   on the container rather than :root for the same reason.
   ========================================================================== */
.faith-tabs {
  --faith-logo-red:  #ED3A43;
  --faith-logo-gold: #FECA32;
  --faith-logo-blue: #142081;
  --faith-red:       #B3272C;
  --faith-gold-deep: #8F6B12;
  --faith-ink:       #17171B;
  --faith-body:      #3F3F49;
  --faith-muted:     #62626F;
  --faith-surface:   #FFFFFF;
  --faith-surface-alt: #F5F5F7;
  --faith-line:      #E2E2E8;
  --faith-r:         14px;
  --faith-shadow-sm: 0 1px 2px rgba(23,23,27,.06), 0 2px 6px rgba(23,23,27,.05);
  --faith-shadow-md: 0 2px 6px rgba(23,23,27,.07), 0 12px 28px rgba(23,23,27,.09);
  --faith-section:   clamp(40px, 6vw, 84px);
  margin: clamp(20px, 3vw, 32px) 0 0;
}

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

/* row above the strip: the all-vs-one toggle, built by the script */
.faith-tabs__bar {
  display: none;
  align-items: center;
  justify-content: flex-end;
  margin: 0 0 .6rem;
}
.faith-tabs--on .faith-tabs__bar { display: flex; }
.faith-tabs__all {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .5em 1em;
  font-family: inherit;
  font-size: .86rem;
  font-weight: 700;
  color: var(--faith-ink);
  background: var(--faith-surface);
  border: 1px solid var(--faith-line);
  border-radius: 999px;
  cursor: pointer;
}
.faith-tabs__all:hover { background: var(--faith-surface-alt); }
.faith-tabs__all[aria-pressed="true"] { background: var(--faith-ink); border-color: var(--faith-ink); color: #fff; }

/* the strip - one row deep, scrolls sideways, not sticky */
.faith-tabs__strip {
  display: flex;
  gap: 10px;
  padding: 10px clamp(12px, 2vw, 18px) 12px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  border-top: 1px solid var(--faith-line);
  border-bottom: 1px solid var(--faith-line);
  scrollbar-width: thin;
  scrollbar-color: rgba(23,23,27,.3) transparent;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 20px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 20px), transparent 100%);
}
.faith-tabs__strip::-webkit-scrollbar { height: 5px; }
.faith-tabs__strip::-webkit-scrollbar-track { background: transparent; }
.faith-tabs__strip::-webkit-scrollbar-thumb { background: rgba(23,23,27,.25); border-radius: 999px; }

.faith-tab {
  position: relative;
  flex: 0 0 auto;
  display: block;
  width: clamp(128px, 29vw, 184px);
  aspect-ratio: 4 / 3;
  padding: 0;
  overflow: hidden;
  background: var(--faith-surface-alt);
  border: 0;
  border-radius: 12px;
  cursor: pointer;
  text-decoration: none;
  scroll-snap-align: center;
  font-family: inherit;
  box-shadow: var(--faith-shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease;
}
.faith-tab__img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(.9) brightness(.92);
  transition: transform .35s ease, filter .25s ease;
}
/* scrim: keeps the label readable over any photograph */
.faith-tab::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    rgba(0,0,0,.86) 0%, rgba(0,0,0,.55) 38%, rgba(0,0,0,.12) 72%, rgba(0,0,0,0) 100%);
}
.faith-tab__label {
  position: absolute;
  z-index: 1;
  left: 10px; right: 10px; bottom: 9px;
  font-size: clamp(.78rem, 1.5vw, .88rem);
  font-weight: 800;
  line-height: 1.25;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,.65);
}
.faith-tab:hover { transform: translateY(-2px); box-shadow: var(--faith-shadow-md); }
.faith-tab:hover .faith-tab__img { filter: none; transform: scale(1.05); }
.faith-tab:focus-visible { outline: 3px solid var(--faith-gold-deep); outline-offset: 2px; }

.faith-tab[aria-selected="true"] { box-shadow: 0 0 0 3px var(--faith-logo-red), var(--faith-shadow-md); }
.faith-tab[aria-selected="true"] .faith-tab__img { filter: none; transform: scale(1.04); }
.faith-tab[aria-selected="true"]::before {
  content: "";
  position: absolute;
  z-index: 2;
  left: 0; right: 0; bottom: 0;
  height: 4px;
  background: linear-gradient(90deg,
    var(--faith-logo-red) 0%, var(--faith-logo-red) 33.33%,
    var(--faith-logo-blue) 33.33%, var(--faith-logo-blue) 66.66%,
    var(--faith-logo-gold) 66.66%, var(--faith-logo-gold) 100%);
}

/* panels */
.faith-tabs .faith-section { margin: var(--faith-section) 0; }
.faith-tabs--on .faith-tabs__panels > section[hidden] { display: none; }
.faith-tabs--on .faith-tabs__panels > section:focus { outline: none; }
/* killing the outline above would leave keyboard users with no cue at all,
   so the visible-focus case gets its own, clearer one */
.faith-tabs--on .faith-tabs__panels > section:focus-visible {
  outline: 3px solid var(--faith-gold-deep);
  outline-offset: 6px;
  border-radius: var(--faith-r);
}
.faith-tabs--all .faith-tabs__panels > section[hidden] { display: block; }
.faith-tabs--all .faith-pager { display: none; }

/* previous / next */
.faith-pager {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
  margin: clamp(22px, 3vw, 34px) 0 0;
  padding-top: clamp(16px, 2.2vw, 22px);
  border-top: 1px solid var(--faith-line);
}
.faith-pager__btn {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  flex: 1 1 240px;
  padding: .8rem 1.1rem;
  font-family: inherit;
  text-align: left;
  color: var(--faith-ink);
  background: var(--faith-surface);
  border: 1px solid var(--faith-line);
  border-radius: var(--faith-r);
  box-shadow: var(--faith-shadow-sm);
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease;
}
.faith-pager__btn:hover { transform: translateY(-2px); box-shadow: var(--faith-shadow-md); }
.faith-pager__btn--next { justify-content: flex-end; text-align: right; }
.faith-pager__txt { display: flex; flex-direction: column; min-width: 0; }
.faith-pager__txt small {
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--faith-muted);
}
.faith-pager__txt strong { font-size: 1rem; font-weight: 800; line-height: 1.3; }
.faith-pager__btn[hidden] { display: none; }

@media (max-width: 575.98px) {
  .faith-tabs { --faith-section: 34px; }
  .faith-pager__btn { flex-basis: 100%; }
  .faith-pager__btn--next { justify-content: flex-start; text-align: left; flex-direction: row-reverse; }
}
@media (prefers-reduced-motion: reduce) {
  .faith-tab, .faith-tab__img, .faith-pager__btn { transition: none; }
  .faith-tab:hover .faith-tab__img,
  .faith-tab[aria-selected="true"] .faith-tab__img { transform: none; }
}