/* ============================================
   Accordeon (components/accordion.njk)
   Standaardwaarden van de FAQ op de homepage; een pagina kan
   --acc-* overschrijven.
   ============================================ */
.accordion {
  --acc-space: 16px;        /* ruimte tussen de items */
  --acc-pad: 15px;          /* binnenruimte titelbalk */
  --acc-bg: var(--color-primary);
  --acc-color: var(--color-white);
  --acc-border: 2px;
  --acc-radius: 10px;
  --acc-icon: 16px;
  --acc-gap: 16px;
  --acc-duration: 400ms;
  --acc-ease: cubic-bezier(0.4, 0, 0.2, 1);
  width: 100%;
}

.accordion__item {
  display: flex;
  flex-direction: column;
  position: relative;
}
.accordion__item:not(:last-child) { margin-block-end: var(--acc-space); }

.accordion__title {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--acc-gap);
  padding: var(--acc-pad);
  border: var(--acc-border) solid var(--acc-bg);
  border-radius: var(--acc-radius) var(--acc-radius) 0 0;
  background-color: var(--acc-bg);
  color: var(--acc-color);
  list-style: none;
  cursor: pointer;
  transition: border-bottom-width var(--acc-duration) var(--acc-ease);
}
.accordion__title::-webkit-details-marker { display: none; }
.accordion__item[open] > .accordion__title { border-bottom-width: 0; }

.accordion__q {
  display: flex;
  align-items: center;
  font-family: var(--font-main);
  font-size: 1rem;
  font-weight: 600;
}

.accordion__icon {
  display: flex;
  flex-direction: row;
  align-items: center;
  order: -1;
  position: relative;
  width: fit-content;
}
.accordion__icon > span { display: flex; height: var(--acc-icon); }
.accordion__icon .icon { height: var(--acc-icon); width: auto; fill: var(--acc-color); }
.accordion__icon-open,
.accordion__item[open] .accordion__icon-closed { display: none !important; }
.accordion__item[open] .accordion__icon-open { display: flex !important; }

/* Openklappen: de rij groeit van 0fr naar 1fr (vloeiend, ook in Safari).
   Zonder JavaScript werkt <details> gewoon zoals de browser het doet. */
.accordion__collapse {
  display: grid;
  grid-template-rows: 0fr;
}
.accordion__item[open] > .accordion__collapse { grid-template-rows: 1fr; }
.accordion.is-enhanced .accordion__item > .accordion__collapse {
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--acc-duration) var(--acc-ease);
}
.accordion.is-enhanced .accordion__item.is-expanded > .accordion__collapse { grid-template-rows: 1fr; }
.accordion__clip { min-height: 0; overflow: hidden; }

.accordion__panel {
  padding: 10px;
  border: var(--acc-border) solid var(--acc-bg);
  border-top-width: 0;
  border-radius: 0 0 var(--acc-radius) var(--acc-radius);
  background-color: var(--acc-bg);
}
.accordion__a { color: var(--acc-color); }
.accordion__a a,
.accordion__a .on-dark,
.accordion__a .on-dark a { color: var(--color-white); }
.accordion__item.is-medium .accordion__a { font-weight: 500; }