/* =========================================================
   harnies-template — kleine overrides voor Healfie
   Laadt ná harnies.css, vóór het thema-:root-blok.
   Alleen voor wat een thema niet kan regelen: het logo.
   ========================================================= */

/* Containerbreedtes gelijk aan de rest van healfie.nl.
   De harnies-template gebruikt 1180 / 1320 / 720; style.css gebruikt
   1280 / 1440 / 780. Zonder deze override oogt /voice smaller dan de
   andere pagina's. */
:root {
  --container: 1280px;
  --container-wide: 1440px;
  --container-narrow: 780px;
}

/* Secundaire knop exact als de Healfie .btn-secondary op de rest van de site
   (o.a. /voor-coaches, /platform): een groen tekstlabel zonder rand i.p.v. de
   omlijnde harnies-outline-knop. Geldt voor alle secundaire knoppen op deze
   pagina (hero + slot-CTA). */
.btn-outline {
  background: transparent;
  color: var(--color-primary);
  border-color: transparent;
  font-weight: 500;
  padding-left: 16px; padding-right: 16px;
}
.btn-outline:hover {
  background: transparent;
  color: var(--color-primary-dark);
  border-color: transparent;
  transform: translateY(-1px);
}

/* Het merkvlak van de template is een vierkant mark van 40×40.
   Healfie heeft een wordmark van 167×40; daarom breedte vrijgeven
   en de tekstnaam ernaast verbergen. */
.brand__mark {
  width: auto;
  height: 40px;
}
.brand__mark img {
  height: 40px;
  width: auto;
  display: block;
}
.brand__name { display: none; }

@media (max-width: 420px) {
  .brand__mark, .brand__mark img { height: 34px; }
}

/* =========================================================
   Footer exact gelijk aan de rest van de Healfie-site
   (overschrijft de standaard harnies-footer). Alleen op
   pagina's die deze override laden — harnie.nl blijft ongemoeid.
   ========================================================= */
.site-footer {
  background: #fff;
  border-top: 1px solid var(--color-border);
  padding-top: 88px; padding-bottom: 0;
  color: var(--color-body); font-size: 15px; line-height: 1.7;
}
.site-footer .brand__mark img { width: 120px; height: auto; }
@media (max-width: 420px) { .site-footer .brand__mark img { width: 120px; height: auto; } }
.site-footer h2, .site-footer h3 { font-family: inherit; color: var(--color-heading); font-size: 18px; font-weight: 600; letter-spacing: 0.02em; text-transform: none; }
@media (min-width: 1024px) {
  .site-footer__brand .brand { min-height: 46px; margin-bottom: 0; align-items: flex-start; }
  .site-footer h2, .site-footer h3 { min-height: 46px; margin-bottom: 0; }
}
@media (max-width: 1023px) { .site-footer h2, .site-footer h3 { margin-bottom: 18px; } }
.site-footer a { color: var(--color-body); transition: color .15s ease; }
.site-footer a:hover { color: var(--color-primary); }
.site-footer__columns { display: grid; gap: 40px; padding-bottom: 72px; }
@media (min-width: 768px)  { .site-footer__columns { grid-template-columns: 1fr 1fr; gap: 40px; } }
@media (min-width: 1024px) { .site-footer__columns { grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 48px; } }
.site-footer__claim {
  font-size: 16px; font-weight: 300;
  color: var(--color-heading);
  line-height: 1.7;
  max-width: 26ch;
  margin-top: 0; margin-bottom: 12px;
}
.site-footer__col a { font-size: 16px; }
.site-footer__brand p { max-width: 34ch; color: var(--color-body); margin-bottom: 18px; }
.site-footer__col ul { display: flex; flex-direction: column; gap: 10px; }
.site-footer__socials { display: flex; gap: 12px; list-style: none; margin: 0; padding: 0; }
.site-footer__socials a {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--color-heading);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  transition: border-color .15s ease, color .15s ease;
}
.site-footer__socials a:hover { color: var(--color-primary); border-color: var(--color-primary); }
.site-footer__socials svg { width: 18px; height: 18px; }
.site-footer__bottom { background: var(--color-heading); color: rgba(255,255,255,0.78); margin-top: 0; }
.site-footer__bottom .container {
  max-width: var(--container-wide);
  padding-block: 22px;
  display: flex; flex-wrap: wrap; gap: 8px 24px;
  align-items: center; justify-content: center; text-align: center;
}
.site-footer__bottom p { font-size: 13px; color: rgba(255,255,255,0.78); }
.site-footer__bottom ul { display: flex; gap: 24px; list-style: none; margin: 0; padding: 0; }
.site-footer__bottom a { color: rgba(255,255,255,0.78); font-size: 13px; }
.site-footer__bottom a:hover { color: #fff; }

/* Wit/grijze sectie-achtergronden laten afwisselen in de voice-v7-volgorde.
   Overrides t.o.v. de basisklasse: toepassingen + ervaring worden wit,
   praktijk + voor-wie worden grijs. */
#hoe-het-werkt.section-alt { background: var(--color-surface); }
#onze-kijk.section-white { background: var(--color-surface-alt); }

/* ===== Interactieve stepper (sectie "Hoe het werkt") ===== */
.voice-stepper {
  display: grid; grid-template-columns: 45fr 55fr; gap: 56px; align-items: center;
  margin-top: 4px;
}
.voice-stepper__list { list-style: none; margin: 0; padding: 0; }
.voice-stepper__item { position: relative; }
/* verticale verbindingslijn (loopt achter de markers door) */
.voice-stepper__item::before {
  content: ''; position: absolute; left: 23px; top: 14px; bottom: -14px;
  width: 2px; background: var(--color-border-strong); z-index: 0;
}
.voice-stepper__item:last-child::before { display: none; }
.voice-stepper__item.is-active::before { background: var(--color-primary); }
.voice-stepper__btn {
  display: grid; grid-template-columns: 46px 1fr; gap: 18px; align-items: start;
  width: 100%; text-align: left; background: transparent; border: 0; cursor: pointer;
  font-family: inherit; color: inherit;
  padding: 14px 14px 22px 0; border-radius: var(--radius-md);
  transition: background .2s ease;
}
.voice-stepper__btn:hover { background: rgba(var(--color-primary-rgb), 0.05); }
.voice-stepper__item.is-active .voice-stepper__btn { background: rgba(var(--color-primary-rgb), 0.05); }
.voice-stepper__btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.voice-stepper__marker {
  position: relative; z-index: 1;
  width: 46px; height: 46px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--color-primary-soft); color: var(--color-primary);
  transition: background .2s ease, color .2s ease;
}
.voice-stepper__marker svg { width: 22px; height: 22px; }
.voice-stepper__item.is-active .voice-stepper__marker { background: var(--color-primary); color: #fff; }
.voice-stepper__content { padding-top: 2px; min-width: 0; }
.voice-stepper__head { display: flex; align-items: baseline; gap: 10px; }
.voice-stepper__num { font-size: 13px; font-weight: 700; letter-spacing: .06em; color: var(--color-muted); }
.voice-stepper__title { font-family: var(--font-head); font-size: 19px; font-weight: 600; color: var(--color-heading); }
.voice-stepper__item.is-active .voice-stepper__num,
.voice-stepper__item.is-active .voice-stepper__title { color: var(--color-primary); }
.voice-stepper__lead { display: block; margin-top: 6px; font-size: 15.5px; font-weight: 600; color: var(--color-heading); }
.voice-stepper__text { display: block; margin-top: 4px; font-size: 14.5px; line-height: 1.6; color: var(--color-body); }
/* media rechts */
.voice-stepper__media { position: relative; width: 100%; max-width: 340px; margin: 0 auto; aspect-ratio: 516 / 983; }
.voice-stepper__shot {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  opacity: 0; transform: translateY(10px); transition: opacity .25s ease, transform .25s ease;
}
.voice-stepper__shot.is-active { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .voice-stepper__shot { transition: opacity .25s ease; transform: none; } }
@media (max-width: 900px) { .voice-stepper { gap: 32px; } .voice-stepper__media { max-width: 280px; } }
@media (max-width: 680px) {
  .voice-stepper { grid-template-columns: 1fr; gap: 24px; }
  .voice-stepper__list { order: 1; }
  .voice-stepper__media { order: 2; max-width: 260px; }
}

/* Herkenning-kaarten: 2 per rij (2×2) i.p.v. 3 op desktop. */
@media (min-width: 1024px) { .recognition-list { grid-template-columns: repeat(2, 1fr); } }

/* FAQ "Bekijk alle vragen"-knop (groen tekstlabel, zoals de secundaire knop). */
.faq-more {
  display: inline-flex; align-items: center; gap: 8px;
  background: none; border: 0; cursor: pointer;
  color: var(--color-primary); font-family: inherit; font-weight: 600; font-size: 16px;
  padding: 10px 6px;
}
.faq-more:hover { color: var(--color-primary-dark); }
.faq-more__icon { transition: transform .2s ease; }
.faq-more.is-open .faq-more__icon { transform: rotate(180deg); }

/* Roterend woord in de hero-titel (carrousel). Eén inline woord (groen) dat via
   JS wisselt: uitfaden → tekst wisselen → infaden. Het woord is de laatste tekst
   op zijn regel, dus een wisselende breedte verschuift niets. Correcte baseline
   omdat het gewone inline-tekst binnen de <h1> is. */
.word-rotator { color: var(--color-primary); white-space: nowrap; transition: opacity .3s ease; }
@media (prefers-reduced-motion: reduce) { .word-rotator { transition: none; } }

/* Groene accentregel in een kop op het donkere blok: gebruik dezelfde
   lichtere accent-op-donker die de template al voor dark-eyebrows hanteert,
   zodat de tweede regel goed leesbaar blijft op navy. */
.section-dark h2 .text-accent { color: var(--color-accent-on-dark); }

/* Twee-koloms grid voor de trust-sectie (10b). Hergebruikt de bestaande
   .testimonial-kaart; alleen de kolomindeling is nieuw. */
.proof-grid { display: grid; gap: 20px; }
@media (min-width: 768px) { .proof-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; } }

/* Doorklik-link op een ervaringskaart (casussen, sectie 11). */
.testimonial__link {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 4px;
  color: var(--color-primary); font-weight: 600; font-size: 14.5px;
  text-decoration: none;
}
.testimonial__link:hover { color: var(--color-primary-dark); }

/* Toepassingen (sectie 8): de handmatig gekaderde foto's zijn liggend
   (1200×584). Media op diezelfde verhouding, zodat de compositie volledig in
   beeld blijft zonder extra uitsnede. Alleen deze sectie. */
#toepassingen .photo-card__media { aspect-ratio: 1200 / 584; }
#toepassingen .photo-card__media img { object-position: 50% 50%; }

/* Gelijke kaarthoogte, met de doorklik-link onderaan uitgelijnd. */
#toepassingen .photo-card { height: 100%; }
#toepassingen .photo-card__body { display: flex; flex-direction: column; flex: 1; }
#toepassingen .photo-card__text { margin-bottom: 16px; }
#toepassingen .photo-card__link { margin-top: auto; }

/* Kaart-carrousel (sectie 11): 3 kaarten in beeld, horizontaal snappend.
   De kaarten zelf zijn de bestaande fotokaarten uit sectie 8. */
.cards-carousel { position: relative; }
.cards-carousel__track {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: calc((100% - 2 * 24px) / 3);
  gap: 24px;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  padding: 4px 2px 6px;
  scrollbar-width: none; -ms-overflow-style: none;
}
.cards-carousel__track::-webkit-scrollbar { display: none; }
.cards-carousel__track > .photo-card { scroll-snap-align: start; height: 100%; }
.cards-carousel .photo-card__media { aspect-ratio: 895 / 431; }
.cards-carousel .photo-card__media img { object-position: 50% 50%; }
.cards-carousel .photo-card__body { display: flex; flex-direction: column; flex: 1; }
.cards-carousel .photo-card__text { margin-bottom: 16px; }
.cards-carousel .photo-card__link { margin-top: auto; }
.cards-carousel__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 50%;
  background: #fff; border: 1px solid var(--color-border);
  box-shadow: 0 8px 22px -10px rgba(var(--shadow-rgb), 0.35);
  color: var(--color-heading); font-size: 24px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 3; transition: color .15s ease, border-color .15s ease;
}
.cards-carousel__nav:hover { color: var(--color-primary); border-color: var(--color-primary); }
.cards-carousel__nav:disabled { opacity: .35; cursor: default; }
.cards-carousel__nav--prev { left: -20px; }
.cards-carousel__nav--next { right: -20px; }
@media (max-width: 980px) { .cards-carousel__track { grid-auto-columns: calc((100% - 24px) / 2); } }
@media (max-width: 620px) {
  .cards-carousel__track { grid-auto-columns: 84%; }
  .cards-carousel__nav { display: none; }
}

/* Vinklijst met een label-regel boven de tekst (doelgroepen, sectie 9). */
.check-list--labeled li strong {
  display: block; margin-bottom: 3px;
  color: var(--color-heading); font-weight: 600; font-size: 16px;
}

/* Eigen icoon i.p.v. het vinkje: zelfde zachte groene cirkel, maar met een
   Tabler-icoon erin (doelgroepen, sectie 9). */
.check-list--icons li::before { display: none; }
.check-list--icons .check-list__icon {
  position: absolute; left: 0; top: 2px;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--color-primary-soft); color: var(--color-primary);
  display: inline-flex; align-items: center; justify-content: center;
}
.check-list--icons .check-list__icon svg { width: 15px; height: 15px; }

/* Doorklik-link op een fotokaart (toepassingen, sectie 8). */
.photo-card__link {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 14px;
  color: var(--color-primary); font-weight: 600; font-size: 14.5px;
  text-decoration: none;
}
.photo-card__link:hover { color: var(--color-primary-dark); }

/* Nette, dunne inline pijl (tekst-glyph) i.p.v. een zwaar icoon. */
.ui-arrow { font-size: 1.05em; line-height: 1; transition: transform .15s ease; }
.photo-card__link:hover .ui-arrow,
.testimonial__link:hover .ui-arrow { transform: translateX(3px); }