/* Hairtec FAQ — alle selectors starten met .htfaq (geen .ht-) */
.htfaq{--htfaq-navy:#223558;--htfaq-ink:#333;--htfaq-muted:#5c5c5c;--htfaq-bg:#f5f6f8;
  --htfaq-shadow:0 1px 2px rgba(34,53,88,.04),0 10px 30px -8px rgba(34,53,88,.10);
  --htfaq-shadow-hover:0 1px 2px rgba(34,53,88,.05),0 14px 36px -8px rgba(34,53,88,.18);
  font-family:inherit;color:var(--htfaq-ink);padding:72px 0;box-sizing:border-box;position:relative;isolation:isolate}
.htfaq *,.htfaq *::before,.htfaq *::after{box-sizing:border-box}
/* Widget altijd over de volle containerbreedte, ook in een flex-container met
   align-items:center (anders krimpt de widget tot de inhoud). */
.elementor-widget-hairtec_faq{align-self:stretch;width:100%}
.htfaq{width:100%}
/* Lichte achtergrond met zachte witte overgang boven en onder */
.htfaq.htfaq--bg{--htfaq-fade:120px;--htfaq-bg-fill:linear-gradient(180deg,#fff 0,var(--htfaq-bg) var(--htfaq-fade),var(--htfaq-bg) calc(100% - var(--htfaq-fade)),#fff 100%);background:var(--htfaq-bg-fill)}
.htfaq.htfaq--bg::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:radial-gradient(420px 340px at 22% 30%,rgba(16,50,207,.07),transparent 65%),radial-gradient(480px 400px at 76% 72%,rgba(34,53,88,.07),transparent 62%);--htfaq-mask:linear-gradient(180deg,transparent 0,#000 var(--htfaq-fade),#000 calc(100% - var(--htfaq-fade)),transparent 100%);-webkit-mask-image:var(--htfaq-mask);mask-image:var(--htfaq-mask)}
/* Tot de schermrand, ook in een boxed container. border-image-outset telt niet mee
   voor de scrollbreedte, dus geen horizontale scroll (anders dan 100vw). */
.htfaq.htfaq--bg.htfaq--bleed{background:none;border-image:var(--htfaq-bg-fill) fill 0/0/0 100vmax}

/* Volgt de breedte van de Elementor-container waar de widget in staat (zoals elke
   andere widget). Alleen met de optie "Inhoudsbreedte" wordt een maximum gezet. */
.htfaq__inner{width:100%;max-width:var(--htfaq-maxw,none);margin:0 auto;display:grid;grid-template-columns:minmax(0,440px) minmax(0,1fr);column-gap:64px;align-items:start}

/* Linkerkolom */
.htfaq .htfaq__title{margin:0 0 16px;padding:0;font-size:32px;line-height:1.15;font-weight:700;color:var(--htfaq-navy)}
.htfaq .htfaq__intro{margin:0;font-size:16px;line-height:24px;color:var(--htfaq-muted)}
.htfaq .htfaq__link{display:inline-flex;align-items:center;gap:8px;min-height:24px;margin-top:16px;font-size:14px;line-height:20px;font-weight:700;color:var(--htfaq-navy);text-decoration:none}
.htfaq__link svg{flex:none}

.htfaq .htfaq__team{display:flex;align-items:center;gap:16px;margin:32px 0 0;padding:14px 24px 14px 14px;background:#fff;border-radius:100px;box-shadow:var(--htfaq-shadow);width:max-content;max-width:100%;color:inherit;text-decoration:none;transition:box-shadow .25s,transform .25s}
.htfaq__faces{display:flex;flex:none}
.htfaq__faces img{display:block;width:44px;height:44px;margin:0 0 0 -11px;border-radius:50%;object-fit:cover;border:3px solid #fff;background:#dfe2e8;box-shadow:0 2px 8px rgba(34,53,88,.12)}
.htfaq__faces img:first-child{margin-left:0}
.htfaq .htfaq__team-text{margin:0;font-size:15px;line-height:21px;color:var(--htfaq-muted);white-space:nowrap}
.htfaq__team-text strong{display:block;font-size:16px;color:var(--htfaq-navy)}

/* Vragen */
.htfaq__list{display:flex;flex-direction:column;gap:12px}
.htfaq__item{background:#fff;border-radius:20px;box-shadow:var(--htfaq-shadow);scroll-margin-top:120px;transition:box-shadow .25s}
.htfaq__item > summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:22px 24px;border-radius:20px;outline:none}
.htfaq__item > summary::-webkit-details-marker{display:none}
.htfaq__item > summary:focus-visible{outline:2px solid var(--htfaq-navy);outline-offset:2px}
.htfaq .htfaq__q{margin:0;padding:0;font-size:17px;line-height:24px;font-weight:400;color:var(--htfaq-navy)}
.htfaq__icon{flex:none;width:20px;height:20px;display:grid;place-items:center}
.htfaq__icon::before{content:"";width:8px;height:8px;margin-top:-4px;border-right:1.75px solid var(--htfaq-navy);border-bottom:1.75px solid var(--htfaq-navy);transform:rotate(45deg);transition:transform .3s,margin .3s}
.htfaq__item[open] .htfaq__icon::before{margin-top:4px;transform:rotate(-135deg)}
.htfaq__a{padding:0 64px 24px 24px;font-size:16px;line-height:24px;color:var(--htfaq-muted)}
.htfaq .htfaq__a p{margin:0 0 12px}
.htfaq .htfaq__a p:last-child{margin-bottom:0}
/* Links in de antwoordtekst (niet de "meer"-link eronder) */
.htfaq .htfaq__a a:not(.htfaq__more){font-weight:700;color:var(--htfaq-navy);text-decoration:underline;text-underline-offset:2px}
.htfaq .htfaq__more{display:inline-flex;align-items:center;min-height:24px;margin-top:12px;font-size:14px;line-height:20px;font-weight:700;color:var(--htfaq-navy);text-decoration:none}
@supports (interpolate-size:allow-keywords){
  .htfaq{interpolate-size:allow-keywords}
  .htfaq__item::details-content{block-size:0;overflow:hidden;transition:block-size .35s ease,content-visibility .35s allow-discrete}
  .htfaq__item[open]::details-content{block-size:auto}
}

/* "Toon meer vragen": de ingeklapte staat staat al in de server-HTML (RUCSS-veilig);
   JS haalt .is-collapsed weg en verwijdert de knop. */
.htfaq.is-collapsed .htfaq__item--extra{display:none}
.htfaq .htfaq__toggle{display:inline-flex;align-items:center;gap:10px;min-height:44px;margin:16px 0 0;padding:12px 18px 12px 22px;border:0;border-radius:100px;background:#fff;box-shadow:var(--htfaq-shadow);font:inherit;font-size:14px;line-height:20px;font-weight:700;color:var(--htfaq-navy);text-transform:none;letter-spacing:normal;cursor:pointer;transition:box-shadow .25s,transform .25s}
.htfaq__toggle:focus-visible{outline:2px solid var(--htfaq-navy);outline-offset:2px}
.htfaq__toggle .htfaq__icon{width:16px;height:16px}
.htfaq__toggle .htfaq__icon::before{width:7px;height:7px}

.htfaq .htfaq__disclaimer{margin:24px 0 0;font-size:13px;line-height:20px;color:var(--htfaq-muted)}

@media (hover:hover){
  .htfaq .htfaq__link:hover,.htfaq .htfaq__more:hover{text-decoration:underline}
  .htfaq .htfaq__team:hover,.htfaq .htfaq__toggle:hover{box-shadow:var(--htfaq-shadow-hover);transform:translateY(-1px)}
  .htfaq__item:hover{box-shadow:var(--htfaq-shadow-hover)}
  .htfaq .htfaq__toggle:hover{background:#fff;color:var(--htfaq-navy)}
}

@media (max-width:1024px){
  .htfaq.htfaq--bg::before{content:none}
  .htfaq__inner{padding-inline:20px}
  .htfaq__inner{grid-template-columns:1fr;row-gap:40px}
  .htfaq__head{max-width:640px}
}
@media (max-width:767px){
  .htfaq{padding:48px 0}
  .htfaq.htfaq--bg{--htfaq-fade:64px}
  .htfaq .htfaq__title{font-size:24px}
  .htfaq__item > summary{padding:18px}
  .htfaq .htfaq__q{font-size:16px}
  .htfaq__a{padding:0 18px 20px}
  .htfaq .htfaq__team{gap:12px;padding:12px 20px 12px 12px}
  .htfaq__faces img{width:40px;height:40px;margin-left:-10px}
  .htfaq .htfaq__team-text{font-size:14px;line-height:20px}
  .htfaq__team-text strong{font-size:15px}
}
@media (max-width:479px){
  .htfaq .htfaq__team{border-radius:20px;padding:12px 16px 12px 12px}
  .htfaq__faces img:nth-child(n+4){display:none}
  .htfaq .htfaq__team-text{white-space:normal}
}
@media (prefers-reduced-motion:reduce){
  .htfaq *,.htfaq *::before,.htfaq *::after,.htfaq__item::details-content{transition:none!important}
}