/* Audioverhalen – zelfde huisstijl als de rest van toerismezoersel.be
   (Roboto, groen #7FBB17, donker #1A1A1A, lichtgrijs #F2F2F2, rechte hoeken) */

.tza-audio {
  --tza-green: #7FBB17;
  --tza-green-dark: #6a9e12;
  --tza-dark: #1A1A1A;
  --tza-muted: #54595F;
  --tza-light: #F2F2F2;
  background: var(--tza-light);
  padding: 56px 16px 64px;
  font-family: "Roboto", sans-serif;
  color: var(--tza-dark);
}
.tza-audio .tza-card {
  max-width: 760px;
  margin: 0 auto;
  background: #fff;
  padding: 40px 48px 44px;
  border-radius: 0;
}

/* Bovenschrift – zoals "ACTIVITEITEN" / "NIEUWSBRIEF" op de homepage */
.tza-audio .tza-eyebrow {
  margin: 0 0 8px;
  font-family: "Roboto", sans-serif;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--tza-green);
}
.tza-audio .tza-eyebrow a,
.tza-audio .tza-eyebrow a:visited { color: var(--tza-green); text-decoration: none; }
.tza-audio .tza-eyebrow a:hover { text-decoration: underline; }

/* Titel – zoals "Wij dromen al van Kerstmis" (overschrijft de globale H1 met Aclonica) */
body .tza-audio h1.tza-title {
  margin: 0 0 12px;
  font-family: "Roboto", sans-serif !important;
  font-size: 44px !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  letter-spacing: normal !important;
  text-transform: none;
  color: var(--tza-dark);
}

.tza-audio .tza-place {
  display: flex; align-items: center; gap: 6px;
  margin: 0 0 20px;
  font-size: 15px;
  color: var(--tza-muted);
}
.tza-audio .tza-place::before {
  content: ""; width: 10px; height: 14px; flex: 0 0 10px;
  background: var(--tza-green);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M172 501C27 291 0 269 0 192 0 86 86 0 192 0s192 86 192 192c0 77-27 99-172 309a24 24 0 0 1-40 0zm20-229a80 80 0 1 0 0-160 80 80 0 0 0 0 160z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M172 501C27 291 0 269 0 192 0 86 86 0 192 0s192 86 192 192c0 77-27 99-172 309a24 24 0 0 1-40 0zm20-229a80 80 0 1 0 0-160 80 80 0 0 0 0 160z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.tza-audio .tza-intro { margin: 0 0 24px; font-size: 18px; line-height: 1.6; color: var(--tza-dark); }
.tza-audio .tza-intro p { margin: 0 0 8px; }

/* Speler in een groen kader, blijft bovenaan bij scrollen */
.tza-audio .tza-player {
  position: sticky; top: 8px; z-index: 5;
  margin: 0 0 28px;
  padding: 14px;
  background: var(--tza-light);
  border-left: 4px solid var(--tza-green);
}
.tza-audio .tza-player audio { display: block; width: 100%; height: 48px; accent-color: var(--tza-green); }
.tza-audio .tza-missing { padding: 14px 16px; background: var(--tza-light); border-left: 4px solid #C4C4C4; margin: 0 0 24px; }

.tza-audio .tza-photo { margin: 0 0 28px; }
.tza-audio .tza-photo img { display: block; width: 100%; height: auto; }

.tza-audio .tza-text { border-top: 1px solid #e3e3e3; padding-top: 8px; }
.tza-audio .tza-text summary {
  cursor: pointer; padding: 12px 0;
  font-size: 16px; font-weight: 500; letter-spacing: 1px; text-transform: uppercase;
  color: var(--tza-dark);
}
.tza-audio .tza-text summary::marker { color: var(--tza-green); }
.tza-audio .tza-text-body { font-size: 17px; line-height: 1.7; padding-bottom: 8px; }

/* Vorige / volgende stop – zelfde groene knoppen als op de site */
.tza-audio .tza-nav { display: flex; gap: 12px; margin-top: 32px; flex-wrap: wrap; }
.tza-audio .tza-nav a {
  flex: 1 1 calc(50% - 6px);
  display: block;
  padding: 14px 18px;
  font-size: 15px; font-weight: 500; line-height: 1.3;
  text-decoration: none;
  transition: background-color .15s;
}
.tza-audio .tza-nav .tza-prev { background: var(--tza-light); color: var(--tza-dark); }
.tza-audio .tza-nav .tza-prev:hover { background: #e6e6e6; }
.tza-audio .tza-nav .tza-next { margin-left: auto; text-align: right; background: var(--tza-green); color: #fff; }
.tza-audio .tza-nav .tza-next:hover { background: var(--tza-green-dark); }
.tza-audio .tza-nav small { display: block; font-size: 12px; font-weight: 500; letter-spacing: 1.5px; text-transform: uppercase; opacity: .75; margin-bottom: 2px; }

/* Routeoverzicht */
.tza-audio .tza-list { list-style: none; padding: 0; margin: 28px 0 0; counter-reset: stop; }
.tza-audio .tza-list li { counter-increment: stop; border-top: 1px solid #e3e3e3; }
.tza-audio .tza-list li:last-child { border-bottom: 1px solid #e3e3e3; }
.tza-audio .tza-list a {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 0;
  font-size: 18px; font-weight: 500;
  color: var(--tza-dark); text-decoration: none;
}
.tza-audio .tza-list a:hover span { color: var(--tza-green); }
.tza-audio .tza-list a::before {
  content: counter(stop);
  flex: 0 0 36px; height: 36px;
  display: grid; place-items: center;
  background: var(--tza-green); color: #fff;
  font-size: 16px; font-weight: 700;
}
.tza-audio .tza-list img { width: 64px; height: 48px; object-fit: cover; }

/* Geen witte strook tussen deze pagina's en de footer (footer heeft standaard 30px marge bovenaan) */
body.single-tz_audio .elementor-location-footer > .elementor-section:first-child,
body.single-tz_audio .elementor-location-footer > .e-con:first-child,
body.post-type-archive-tz_audio .elementor-location-footer > .elementor-section:first-child,
body.post-type-archive-tz_audio .elementor-location-footer > .e-con:first-child,
body.tax-tz_route .elementor-location-footer > .elementor-section:first-child,
body.tax-tz_route .elementor-location-footer > .e-con:first-child { margin-top: 0 !important; }

/* Mobiel */
@media (max-width: 767px) {
  .tza-audio { padding: 16px 0 24px; }
  .tza-audio .tza-card { padding: 24px 20px 28px; }
  .tza-audio .tza-eyebrow { font-size: 13px; letter-spacing: 1.5px; }
  body .tza-audio h1.tza-title { font-size: 30px !important; }
  .tza-audio .tza-intro { font-size: 17px; }
  .tza-audio .tza-player { margin-left: -20px; margin-right: -20px; padding: 12px 16px; }
  .tza-audio .tza-nav a { flex-basis: 100%; }
  .tza-audio .tza-list a { font-size: 17px; }
}