/* Aanvullingen die alleen WordPress nodig heeft. De opmaak zelf staat in
   bordeaux.css, dat gelijk blijft aan smaak-bordeaux/assets/bordeaux.css. */

/* Ingelogd staat de beheerbalk boven de vaste header. Alleen op grote schermen:
   daar staat de balk vast. Op mobiel scrolt de beheerbalk mee omhoog, en dan
   zou een header op 46px losraken van de bovenkant met inhoud eronderdoor. */
@media (min-width: 783px) {
  body.admin-bar .header { top: 32px; }
  body.admin-bar .mobile-menu { top: 32px; }
}

/* Foutmelding als het versturen van het formulier mislukt. */
.intake__error { margin-top: 1.25rem; }
button.btn[disabled] { opacity: .6; cursor: progress; }

/* Staande portretfoto naast tekst (schakelaar in "Foto met tekst"). Het
   gewone vlak is liggend en zou een portret bovenaan afsnijden. */
.sides__image--portrait { width: 40%; height: auto; aspect-ratio: 4 / 5; max-height: 44rem; }
.sides__image--portrait img { object-position: 50% 12%; }
.sides__image--portrait + .sides__text { width: 60%; }
@media (max-width: 991px) {
  .sides__image--portrait, .sides__image--portrait + .sides__text { width: 100%; }
  .sides__image--portrait { aspect-ratio: 4 / 5; max-height: 36rem; }
}

/* Bewegende vlakken in plaats van sfeerfoto's (assets/beweging.js). Geen kader
   en geen grote vaste hoogte: ze vullen de ruimte naast de tekst en lopen aan
   de randen zacht uit in de achtergrond. */
.motion {
  position: relative; overflow: hidden; background: none; border-radius: 0;
  -webkit-mask-image: radial-gradient(ellipse 72% 72% at 50% 50%, #000 42%, transparent 100%);
  mask-image: radial-gradient(ellipse 72% 72% at 50% 50%, #000 42%, transparent 100%);
}
.motion canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.sides__image.motion { height: clamp(12rem, 20vw, 19rem); align-self: center; }
.side-card__photo.motion { aspect-ratio: 16 / 7; }
@media (max-width: 991px) {
  .sides__image.motion { height: 11rem; aspect-ratio: auto; }
}

/* Lange paginatitels. Een rasterkolom krimpt standaard niet onder de breedte
   van het langste woord; daardoor liep "Gedragswetenschapper" over de tekst
   ernaast heen. */
.page-hero__grid > * { min-width: 0; }
.h1--page { overflow-wrap: break-word; hyphens: auto; }
.h1--page-lang { font-size: clamp(2.5rem, 1rem + 4vw, 4.4rem); }

/* Lopende tekst, zoals de privacyverklaring. */
.prose { max-width: 70ch; }
.prose > .h2 { margin-bottom: 1.5rem; }
.prose h2, .prose h3, .prose h4 { margin: 1.8em 0 .5em; font-weight: 500; line-height: 1.15; letter-spacing: -.015em; }
.prose h2 { font-size: clamp(1.6rem, 1.2rem + 1vw, 2.1rem); }
.prose h3 { font-size: 1.35rem; }
.prose p, .prose ul, .prose ol { margin: 0 0 1em; font-size: 1.02rem; line-height: 1.6; }
.prose ul { padding-left: 1.2em; list-style: disc; }
.prose ol { padding-left: 1.2em; list-style: decimal; }
.prose li + li { margin-top: .35em; }
.prose a { text-decoration: underline; text-underline-offset: 3px; }
.light .prose h2, .light .prose h3, .light .prose h4 { color: var(--bordeaux); }