/*
  Accordion — the shared .accordion block (a stack of items with border
  separators + an animated collapsible .accordion__panel). Single-open behaviour
  is handled by assets/js/accordion.js; the panel height animates with the
  grid-template-rows 0fr↔1fr technique, all keyed off aria-expanded.

  Used by the generic / FAQ block (zorgvrij_accordion / _accordion_item): a
  full-row question button (.accordion__question) with a CSS-drawn +/× toggle
  (.accordion__plus), optionally under a chapeau + heading (.accordion-block).
  ("Boekbaar aanbod" used to share this block too, but now renders as tiles —
  see .tile--offering in components/tile.css + the .offerings-grid in
  components/offerings.css.)
*/

.accordion {
  display: flex;
  flex-direction: column;
}

.accordion__item {
  display: flex;
  flex-direction: column;
  padding-block: var(--space-m);
  border-top: 1px solid var(--color-border);
}

.accordion__item:last-child {
  border-bottom: 1px solid var(--color-border);
}

/* ---- Panel (collapsible, animated height) ---- */
.accordion__panel {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.2s ease;
}

.accordion__panel.is-collapsed {
  grid-template-rows: 0fr;
  visibility: hidden;
  /* Stay visible through the collapse, then drop out of the a11y/tab tree. */
  transition: grid-template-rows 0.2s ease, visibility 0s linear 0.2s;
}

/* The clip wrapper is the grid item that actually collapses. It owns the
   overflow clipping and carries NO padding of its own, so the 0fr track shrinks
   it to a true 0 — the inner's padding lives one level down and gets clipped
   rather than leaking a sliver row below the header. Keeping padding off the
   animated layer also means it never toggles, so the content doesn't jump. */
.accordion__panel-clip {
  overflow: hidden;
  min-height: 0;
}

.accordion__panel-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-m);
  padding-block-start: var(--space-m);
}

@media (prefers-reduced-motion: reduce) {
  .accordion__panel {
    transition: none;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   GENERIC / FAQ VARIANT (zorgvrij_accordion + zorgvrij_accordion_item)
   A chapeau + heading above the .accordion, and per item a full-row question
   button with a CSS-drawn +/× toggle. Reuses .accordion__item + .accordion__panel.
   ════════════════════════════════════════════════════════════════════════════ */

.accordion-block__head {
  margin-block-end: var(--space-m);
}

/* The big heading is dark here (the global default is brand orange). */
.accordion-block__title {
  margin-block: var(--space-3xs) 0;
  color: var(--color-text);
}

/* Heading wrapper around the toggle button — strip its heading margins and let
   it take the surrounding text colour rather than the default heading colour. */
.accordion__q {
  margin: 0;
  color: inherit;
}

/* Full-row question: title on the left, the +/× circle on the right. */
.accordion__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
}

.accordion__question-text {
  margin: 0;
}

/* CSS-drawn toggle icon: a "+" (two bars) inside a circle that flips to a dark
   "×" — rotate the plus 45° and swap the colours on open. */
.accordion__plus {
  flex: none;
  display: grid;
  place-items: center;
  inline-size: 2rem;
  block-size: 2rem;
  border-radius: 50%;
  background-color: var(--color-green-pale);
  color: var(--color-green-dark);
  transition: background-color 0.15s ease, color 0.15s ease, transform 0.2s ease;
}

.accordion__plus::before,
.accordion__plus::after {
  content: "";
  grid-area: 1 / 1;
  inline-size: 0.875rem;
  block-size: 2px;
  border-radius: 1px;
  background-color: currentColor;
}

.accordion__plus::after {
  transform: rotate(90deg); /* the vertical bar → makes the "+" */
}

.accordion__question[aria-expanded="true"] .accordion__plus {
  background-color: var(--color-green-dark);
  color: var(--color-white);
  transform: rotate(45deg); /* "+" → "×" */
}

/* Trim the answer's outer margins so the panel padding stays even. */
.accordion__answer > :first-child {
  margin-block-start: 0;
}

.accordion__answer > :last-child {
  margin-block-end: 0;
}

@media (prefers-reduced-motion: reduce) {
  .accordion__plus {
    transition: none;
  }
}