/* ============================================
   Accordeon — "Lees meer" in kaarten (acc--more) en FAQ-balken (acc--faq).
   Gedrag (één open per groep, hoogte-animatie) in main.js.
   ============================================ */
.acc { position: relative; display: flex; flex-direction: column; }

.acc__title {
  display: flex;
  align-items: center;
  list-style: none;
  cursor: pointer;
}

.acc__title::-webkit-details-marker { display: none; }

.acc__header { display: flex; }
.acc__text { margin: 0; font-family: var(--font-main); font-weight: 600; }

.acc__icon { position: relative; display: flex; align-items: center; width: fit-content; }
.acc__icon > span { display: flex; width: auto; height: var(--acc-icon); }
.acc__icon svg { height: var(--acc-icon); fill: currentColor; }
.acc__opened { display: none !important; }
.acc[open] > .acc__title .acc__opened { display: flex !important; }
.acc[open] > .acc__title .acc__closed { display: none !important; }

.acc__panel { overflow: hidden; }

/* "Lees meer" in de kaarten */
.acc--more {
  --acc-icon: 26px;
}

.acc--more .acc__title {
  gap: 0 10px;
  color: var(--color-text);
  transition: color .3s;
}

.acc--more .acc__text { font-size: 20px; }
.acc--more[open] > .acc__title { margin-bottom: 7px; color: #2E2E2E; }

.acc--more .acc__panel {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

@media (hover: hover) {
  .acc--more:not([open]):hover > .acc__title { color: var(--color-slate-hover); }
}

/* FAQ */
.acc--faq { --acc-icon: 22px; }
.acc--faq:not(:last-child) { margin-bottom: 10px; }

.acc--faq .acc__title {
  gap: 15px;
  padding: 10px 40px;
  border-radius: 5px 5px 0 0;
  background-color: var(--color-slate);
  color: var(--color-white);
  transition: color .3s;
}

.acc--faq .acc__icon { order: -1; }
.acc--faq .acc__text { font-size: 25px; line-height: 1.2; }

.acc--faq .acc__panel {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 10px 40px;
  border-radius: 0 0 5px 5px;
  background-color: var(--color-slate);
}

.acc--faq .acc__panel .prose { color: var(--color-white); }

@media (hover: hover) {
  .acc--faq:not([open]):hover > .acc__title { color: var(--color-grey); }
}

.acc__title:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

@media (max-width: 767px) {
  .acc--faq .acc__title { padding: 10px 0 10px 20px; }
  .acc--faq .acc__text { font-size: 20px; }
}