/* Van Roy Services — de aanvulling die WordPress nodig heeft
   ---------------------------------------------------------------------------
   Dit bestand bestaat met opzet apart van vanroy.css. Daarin staat de opmaak
   van het ontwerp, ongewijzigd overgenomen van de Next-site. Hieronder staat
   alleen wat er in WordPress bij moet, en dat zijn precies twee dingen.

   1. De panelen hadden geen dicht-stand. In React werden het uitklapmenu en
      het mobiele menu niet in de pagina getekend zolang ze dicht waren, dus
      was er niets te verbergen. Hier staan ze er altijd en doet een attribuut
      op .kop het open- en dichtklappen. De animatie klapIn speelt gewoon:
      een element dat van display:none naar zichtbaar gaat start zijn animatie
      opnieuw.

   2. Een handvol resten van WordPress zelf, zoals de beheerbalk die een
      marge bovenaan de pagina zet.

   Wat hier bij komt te staan hoort hier thuis. Wat opmaak van het ontwerp is,
   hoort in vanroy.css. Dat onderscheid is de enige manier om straks te zien
   wat wij hebben veranderd en wat uit het ontwerp komt.
   ------------------------------------------------------------------------- */

/* 1a. Het uitklapmenu op de desktop. */
.kop-dropdown > button[aria-expanded='false'] + .kop-dropdown-paneel {
  display: none;
}

/* 1b. Het mobiele paneel onder de kop. */
.kop-paneel {
  display: none;
}
.kop[data-menu='open'] .kop-paneel {
  display: flex;
}

/* 1c. De diensten in het mobiele paneel. */
.kop-paneel-sub > button[aria-expanded='false'] + .kop-paneel-sublijst {
  display: none;
}

/* 2. WordPress-resten. De beheerbalk duwt de pagina omlaag met een vaste
      marge op html; dat loopt in de weg bij een kop die aan de bovenkant
      plakt. Alleen zichtbaar voor ingelogde beheerders. */
html {
  scroll-behavior: smooth;
}
body.admin-bar-showing .kop {
  top: 32px;
}
@media screen and (max-width: 782px) {
  body.admin-bar-showing .kop {
    top: 46px;
  }
}

/* ---------------------------------------------------------------------------
   Drie plekken waar de HTML hier iets anders ligt dan in het Next-project
   ---------------------------------------------------------------------------
   Deze regels stonden eerst als style-attribuut in het sjabloon. Dat werkt,
   maar opmaak in de HTML is precies wat je een half jaar later niet meer vindt
   als er iets moet wijzigen. Hier staan ze bij elkaar, met de reden erbij.

   De staafjes op de fotokaart houden hun style-attribuut wél: hoogte en kleur
   komen daar per staafje uit het CMS, en dan hoort het in de HTML.
   ------------------------------------------------------------------------- */

/* De vragenlijst staat gecentreerd in zijn sectie. */
.vragenlijst-midden {
  display: flex;
  justify-content: center;
  width: 100%;
}

/* De tussenstappen van het kruimelpad zitten in een omhulling die voor de
   opmaak niet meetelt, zodat de scheidingstekens op één rij blijven staan. */
.kruimelstap {
  display: contents;
}

/* Het getal en de tekst op de meetkaart staan onder elkaar. */
.kaart-meet-tekstgroep {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Het pijltje bij een uitklapper in het mobiele menu. */
.kop-paneel-chevron {
  color: var(--teal);
}

/* ---------------------------------------------------------------------------
   Opsommingen in een tekstpagina (bijvoorbeeld de algemene voorwaarden)
   ---------------------------------------------------------------------------
   De opgemaakte tekst uit het wysiwyg-veld kreeg geen opsommingstekens: de
   reset haalt die overal weg. In lopende tekst horen ze er wel. */
.lopende-tekst ul,
.lopende-tekst ol {
  padding-left: 1.4em;
  margin-block: 0 1em;
}
.lopende-tekst ul { list-style: disc; }
.lopende-tekst ol { list-style: decimal; }
.lopende-tekst li + li { margin-top: 4px; }

/* ---------------------------------------------------------------------------
   Partners en klanten: de logoslider op de homepage
   ---------------------------------------------------------------------------
   Een band met logo's die rustig van rechts naar links schuift. Het spoor
   bevat de logo's twee keer achter elkaar; het schuift precies de helft op en
   begint dan opnieuw, zodat je geen naad ziet. Met de muis erop staat hij
   stil. Wie minder beweging wil (systeeminstelling) krijgt een stilstaande rij.
   Zie vanroy_sectie_partners() in inc/onderdelen.php. */
.blok-partners > .binnen {
  padding-block: 0 128px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.partners-kop {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
.partners-slider {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.partners-spoor {
  display: flex;
  width: max-content;
  animation: partners-schuif var(--duur, 40s) linear infinite;
}
.partners-slider:hover .partners-spoor,
.partners-slider:focus-within .partners-spoor {
  animation-play-state: paused;
}
.partners-set {
  display: flex;
  align-items: center;
  gap: 64px;
  padding-right: 64px;
}
.partners-logo {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 56px;
}
.partners-logo img {
  display: block;
  height: 100%;
  width: auto;
  max-width: 170px;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.65;
  transition: filter 0.2s ease, opacity 0.2s ease;
}
.partners-logo img:hover {
  filter: none;
  opacity: 1;
}
@keyframes partners-schuif {
  to { transform: translateX(-50%); }
}
@media (max-width: 767px) {
  .blok-partners > .binnen { padding-block: 0 88px; gap: 28px; }
  .partners-set { gap: 40px; padding-right: 40px; }
  .partners-logo { height: 44px; }
  .partners-logo img { max-width: 130px; }
}
@media (prefers-reduced-motion: reduce) {
  .partners-slider { -webkit-mask-image: none; mask-image: none; }
  .partners-spoor { width: auto; }
  .partners-set { flex-wrap: wrap; justify-content: center; row-gap: 32px; padding-right: 0; }
  .partners-set[aria-hidden='true'] { display: none; }
}