/*
 * faqSection + faqItem — het grijze vlak met "FAQ." en de vragen die open- en
 * dichtklappen.
 *
 * Maten 1-op-1 van https://www.samdesign.nl/onze-aanpak/ (R9), gemeten op 1440,
 * 1024, 767 en 390px — dicht én open.
 *
 * Het open- en dichtklappen zelf doet <details>; hier staat alleen de opmaak.
 * Het uitschuiven van het antwoord gaat met CSS en niet met JavaScript: het is
 * een overgang tussen twee standen die de browser al kent (§8).
 */

.faqSection {
  margin-block: 150px;
  padding-block: 150px;
  background: #f3f3f5;
}

/*
 * De kolom is hier 680px en dat is een eigen maat van samdesign.nl, geen variant
 * van .container. Inclusief de 20px lucht die .container zelf meeneemt.
 */
.faqSectionInner {
  max-width: calc(680px + var(--containerPadding) * 2);
}

.faqSectionTitle {
  margin-bottom: 50px;
  text-align: center;
}

/*
 * De tweede regel in de kop: kleiner, op een eigen regel, met het roze schuine
 * streepje ervoor. Het streepje is versiering, dus een achtergrond op ::before
 * en geen teken in de tekst. Zelfde maten als in `highlightBand` en
 * `processSlider`.
 */
.faqSectionSubtitle {
  display: block;
  margin-top: 15px;
  font-size: 40px;
  font-weight: 400;
  line-height: 50px;
  letter-spacing: normal;
}

.faqSectionSubtitle::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 29px;
  margin-right: 8px;
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29.085' height='28.859' viewBox='0 0 29.085 28.859'%3E%3Cpath d='m2.862-8.921.251-2.438a.95.95 0 0 1 .311-.974L21.01-29.725c.284-.237.608-.208 1.11-.18l.458.06 1.894.157a.956.956 0 0 1 .217 1.6L4.4-8.428a.956.956 0 0 1-1.538-.493' transform='matrix(0.914 -0.407 0.407 0.914 9.556 37.517)' fill='%23dc0356'/%3E%3C/svg%3E") center / cover no-repeat;
}

/*
 * Zonder grijs vlak (band = uit): de sectie staat op wit en houdt alleen zijn
 * marge over. De vraagbalken houden hun eigen grijs. Zo staat de FAQ op
 * /webshop-laten-maken/.
 */
.faqSection.faqSectionPlain {
  padding-block: 0;
  background: none;
}

.faqItems {
  display: flex;
  flex-direction: column;
  row-gap: 20px;
}

/* ------------------------------------------------------------------
   De vraag
   ------------------------------------------------------------------ */

/*
 * display: flex haalt het driehoekje van <summary> weg (de reset zet er
 * `display: list-item` op) en zet de vraag links, het pijltje rechts.
 */
.faqQuestion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 90px;
  padding: 20px 50px;
  background: rgba(26, 34, 62, 0.05);
}

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

.faqQuestionLabel {
  max-width: 441px;
  margin-right: 15px;
  font-size: 20px;
  line-height: 25px;
  letter-spacing: -0.05em;
}

/*
 * Het pijltje wijst schuin naar rechtsboven en draait een kwartslag als de vraag
 * openklapt.
 *
 * De 3px eronder: op samdesign.nl staat dit icoon in een regelbox van 20px met
 * de pijl van 17px op de basislijn, en die box wordt gecentreerd. Met alleen de
 * pijl zou hij 1,5px lager komen te staan.
 *
 * De -5px links: daar staat de pijl in een vakje van 17px tegen de rechterrand,
 * met de tekening zelf 5px naar links geschoven. Bij ons is de pijl zélf het
 * vakje, dus zou die 5px van de vraag afgaan. Met deze negatieve marge staat de
 * pijl op dezelfde plek én houdt de vraag dezelfde breedte — precies genoeg om
 * "Hoe verloopt de communicatie tijdens mijn project?" op 767px op één regel te
 * houden, net als daar.
 */
.faqQuestionIcon {
  flex: none;
  margin-left: -5px;
  width: 17px;
  height: 17px;
  margin-right: 5px;
  margin-bottom: 3px;
  color: var(--colorNavy);
  transition: transform 0.3s;
}

.faqItem[open] .faqQuestionIcon {
  transform: rotate(90deg);
}

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

/*
 * 20/25 en niet de 20/33 van de lopende tekst elders: dat is de maat die
 * samdesign.nl hier instelt.
 */
.faqAnswer {
  padding: 20px 50px 0;
  font-size: 20px;
  line-height: 25px;
}

/*
 * Onder de laatste alinea van een open antwoord staat op samdesign.nl nog een
 * witregel van 30px, en die klapt daar samen met de 20px tussen de vragen: de
 * ruimte naar de volgende vraag is er dus 30 en niet 50. Bij ons is het
 * antwoord een eigen blok — dat moet, anders valt het niet uit te schuiven — en
 * dan klappen marges niet samen. Deze 10px is precies dat verschil.
 *
 * Onder 768px staat er wél 20px padding onder het antwoord, dus klapt die
 * witregel daar ook op samdesign.nl niet weg en blijft de ruimte 20.
 */
@media (min-width: 768px) {
  .faqItems > li:has(.faqItem[open]):not(:last-child) {
    margin-bottom: 10px;
  }
}

/*
 * Uitschuiven in plaats van springen. `interpolate-size` en `::details-content`
 * zijn nog niet overal binnen; waar ze ontbreken klapt het antwoord er in één
 * keer in, en dat is precies de stand die er daarna hoort te staan.
 */
@supports (interpolate-size: allow-keywords) {
  :root {
    interpolate-size: allow-keywords;
  }

  .faqItem::details-content {
    height: 0;
    overflow: hidden;
    transition: height 0.3s, content-visibility 0.3s;
    transition-behavior: allow-discrete;
  }

  .faqItem[open]::details-content {
    height: auto;
  }
}

/* ==================================================================
   Kleiner dan 1440
   ================================================================== */

@media (max-width: 1024px) {
  .faqSection {
    margin-block: 100px;
    padding-block: 100px;
  }

  .faqSectionInner {
    max-width: calc(800px + var(--containerPadding) * 2);
  }
}

@media (max-width: 767px) {
  .faqSection {
    margin-block: 75px;
    padding-block: 75px;
  }

  .faqSectionInner {
    max-width: calc(400px + var(--containerPadding) * 2);
  }

  .faqQuestion {
    min-height: 70px;
    padding: 20px;
  }

  .faqQuestionLabel {
    font-size: 15px;
    line-height: 20px;
  }

  .faqAnswer {
    padding: 20px;
    font-size: 15px;
  }

  .faqSectionSubtitle {
    font-size: 30px;
    line-height: 30px;
  }

  .faqSectionSubtitle::before {
    width: 10px;
    height: 21px;
  }

  /*
   * Hier zit onder de laatste alinea nog een witregel, zoals op samdesign.nl:
   * daar staat er 20px padding onder, dus klapt die marge niet weg. Boven 768px
   * is die padding nul en telt hij daar dus niet mee — vandaar dat de regel
   * alleen hier staat en niet met een negatieve marge gecompenseerd wordt.
   */
  .faqAnswer > :last-child {
    margin-bottom: 1.5em;
  }
}

/* ==================================================================
   Twee kolommen (layout = columns)
   ------------------------------------------------------------------
   Zo staat de FAQ op /website-laten-maken/: twee lijsten naast elkaar
   van 630px met 20px ertussen, over de volle breedte van de container.
   Vanaf 1024px naar beneden staan ze onder elkaar en is er niets meer
   dat van de smalle vorm afwijkt — vandaar dat alles hieronder in één
   media query staat, op één regel na.
   ================================================================== */

/*
 * De ruimte tussen de twee lijsten als ze onder elkaar staan: even groot als
 * die tussen twee vragen.
 */
.faqItems + .faqItems {
  margin-top: 20px;
}

@media (min-width: 1025px) {
  .faqSectionColumns .faqSectionInner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    max-width: var(--containerOuter);
  }

  .faqSectionColumns .faqSectionTitle {
    width: 100%;
  }

  .faqSectionColumns .faqItems {
    flex: 0 1 630px;
  }

  .faqSectionColumns .faqItems + .faqItems {
    margin-top: 0;
  }
}