/* ==========================================================================
   Femke Nout - FAQ blok
   fn-faq.css  v1.0
   Alles is gescoped onder .fn-faq zodat het themabestand niets kan breken
   en het thema dit blok niet kan overschrijven.
   Huisstijl: accent #dc0091, tint #f2d0e6, tekst #404040, koppen #554e4e
   ========================================================================== */

.fn-faq {
  /* Pas hier de huisstijl aan, de rest volgt vanzelf */
  --fn-accent:        #dc0091;
  --fn-accent-tint:   #f2d0e6;
  --fn-accent-dark:   #b60078;
  --fn-text:          #404040;
  --fn-heading:       #554e4e;
  --fn-muted:         #6b6363;
  --fn-line:          #e6dfe3;
  --fn-radius:        0px;
  --fn-font:          "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --fn-maxwidth:      820px;
  --fn-gutter:        2px;

  box-sizing: border-box;
  display: block;
  max-width: var(--fn-maxwidth);
  margin: 48px auto;
  padding: 0;
  font-family: var(--fn-font);
  font-size: 16px;
  line-height: 1.65;
  color: var(--fn-text);
  -webkit-font-smoothing: antialiased;
}

.fn-faq *,
.fn-faq *::before,
.fn-faq *::after { box-sizing: border-box; }

/* --------------------------------------------------------------- kop ---- */

.fn-faq__title {
  margin: 0 0 6px;
  padding: 0;
  font-family: var(--fn-font);
  font-weight: 300;
  font-size: 32px;
  line-height: 1.2;
  color: var(--fn-heading);
  letter-spacing: 0;
  text-transform: none;
}

.fn-faq__intro {
  margin: 0 0 26px;
  font-size: 15.5px;
  color: var(--fn-muted);
}

/* -------------------------------------------------------------- items ---- */

.fn-faq__list { margin: 0; padding: 0; list-style: none; }

.fn-faq__item {
  margin: 0;
  padding: 0;
  border-bottom: 1px solid var(--fn-line);
  border-radius: var(--fn-radius);
}

.fn-faq__item:first-of-type { border-top: 1px solid var(--fn-line); }

/* De <summary> is de vraag. Standaard markers uit in alle browsers. */
.fn-faq__q {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin: 0;
  padding: 20px var(--fn-gutter);
  font-family: var(--fn-font);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--fn-heading);
  cursor: pointer;
  list-style: none;
  transition: color .15s ease;
  -webkit-tap-highlight-color: transparent;
}

.fn-faq__q::-webkit-details-marker { display: none; }
.fn-faq__q::marker { content: ""; }

.fn-faq__q:hover,
.fn-faq__item[open] > .fn-faq__q { color: var(--fn-accent); }

.fn-faq__q:focus { outline: none; }
.fn-faq__q:focus-visible {
  outline: 2px solid var(--fn-accent);
  outline-offset: 3px;
}

/* ------------------------------------------------------------- icoon ----- */

.fn-faq__icon {
  position: relative;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin-top: 4px;
}

.fn-faq__icon::before,
.fn-faq__icon::after {
  content: "";
  position: absolute;
  background: var(--fn-accent);
  transition: transform .22s ease, opacity .22s ease;
}

.fn-faq__icon::before { top: 10px; left: 0;    width: 22px; height: 2px; }
.fn-faq__icon::after  { top: 0;    left: 10px; width: 2px;  height: 22px; }

.fn-faq__item[open] > .fn-faq__q .fn-faq__icon::after {
  transform: rotate(90deg);
  opacity: 0;
}

/* ----------------------------------------------------------- antwoord ---- */

.fn-faq__a {
  padding: 0 44px 24px var(--fn-gutter);
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--fn-text);
}

.fn-faq__a > *:first-child { margin-top: 0; }
.fn-faq__a > *:last-child  { margin-bottom: 0; }
.fn-faq__a p  { margin: 0 0 12px; }
.fn-faq__a ul,
.fn-faq__a ol { margin: 0 0 12px; padding-left: 20px; }
.fn-faq__a li { margin: 0 0 4px; }
.fn-faq__a strong { font-weight: 600; color: var(--fn-heading); }

.fn-faq__a a {
  color: var(--fn-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.fn-faq__a a:hover { color: var(--fn-accent-dark); }

/* ------------------------------------------------- redactie-notities ----- */
/* Zichtbaar tijdens de bouw, wordt door fn-faq.js uit de structured data
   gefilterd. Verwijder deze spans voordat de pagina live gaat.              */

.fn-faq__todo {
  display: inline;
  background: #ffe9ee;
  color: #b00020;
  font-weight: 600;
  padding: 1px 6px;
  border-bottom: 1px dashed #b00020;
}

/* ---------------------------------------------------------------- cta ---- */

.fn-faq__cta { margin: 30px 0 0; font-size: 15.5px; }

.fn-faq__cta a {
  display: inline-block;
  padding: 12px 22px;
  background: var(--fn-accent-tint);
  color: var(--fn-accent);
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--fn-radius);
  transition: background .15s ease, color .15s ease;
}
.fn-faq__cta a:hover,
.fn-faq__cta a:focus-visible { background: var(--fn-accent); color: #fff; }

/* ------------------------------------------------- animatie via fn-faq.js -- */
/* Zonder JS werkt het blok gewoon, alleen zonder vloeiend open- en dichtklappen.
   De klasse .fn-faq--js wordt door het script gezet.                          */

.fn-faq--js .fn-faq__panel { overflow: hidden; }

.fn-faq--js .fn-faq__item.is-animating > .fn-faq__panel {
  transition: height .28s cubic-bezier(.4, 0, .2, 1);
}

/* Doellink vanuit een anker, bijvoorbeeld /contact/#faq-openingstijden */
.fn-faq__item:target > .fn-faq__q { color: var(--fn-accent); }

/* -------------------------------------------------------------- mobiel ---- */

@media (max-width: 640px) {
  .fn-faq          { margin: 32px auto; }
  .fn-faq__title   { font-size: 26px; }
  .fn-faq__intro   { font-size: 15px; margin-bottom: 20px; }
  .fn-faq__q       { font-size: 16px; padding: 16px var(--fn-gutter); gap: 14px; }
  .fn-faq__icon    { width: 18px; height: 18px; margin-top: 3px; }
  .fn-faq__icon::before { top: 8px; width: 18px; }
  .fn-faq__icon::after  { left: 8px; height: 18px; }
  .fn-faq__a       { padding: 0 8px 20px var(--fn-gutter); font-size: 15px; }
  .fn-faq__cta a   { display: block; text-align: center; }
}

/* ------------------------------------------------------- toegankelijk ---- */

@media (prefers-reduced-motion: reduce) {
  .fn-faq *,
  .fn-faq *::before,
  .fn-faq *::after { transition: none !important; animation: none !important; }
}

/* ---------------------------------------------------------------- print -- */

@media print {
  .fn-faq__panel  { height: auto !important; overflow: visible !important; }
  .fn-faq__item   { break-inside: avoid; }
  .fn-faq__icon   { display: none; }
  .fn-faq__cta    { display: none; }
}