/* ==========================================================================
   Starter 1.0.0: correcties en onderdelen uit de ombouw van Training Efficiënt Werken (oktober 2026).
   Laadt na blocks.css (ook in de editor). Kleuren via de variabelen van de site, met terugvalwaarden.
   1. Opbouw: restanten van de ACSS-basis (flex-kolommen) neutraliseren
   2. Pagina's met een eigen H1 en juridische pagina's
   3. Tikdoelen op mobiel
   4. Video in een venster
   5. Cookiebanner (Complianz), licht en donker
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Opbouw. De ACSS-basis maakt divs in secties flex-kolommen. Gevolg: kolommen en knoppenrijen
   stapelen of centreren, en kaarten in een raster worden niet even hoog. Bij meten de knop zelf meten,
   niet de container. Controleer ook op Chrome en Safari op iPad.
   -------------------------------------------------------------------------- */
.wp-block-columns.is-layout-flex { flex-direction: row; align-items: normal; }
.wp-block-columns.are-vertically-aligned-center { align-items: center; }
@media (max-width: 781px) { .wp-block-columns.is-layout-flex:not(.is-not-stacked-on-mobile) { flex-direction: column; } }
.wp-block-buttons.is-layout-flex { flex-direction: row; align-items: center; }
.wp-block-buttons.is-content-justification-left { justify-content: flex-start !important; }
.wp-block-group.is-layout-flow,
.wp-block-group.is-layout-constrained { display: block; }
/* Raster van kaarten: even hoog, ook als ACSS align-items op flex-start zet. Gebruik: groep met klasse starter-raster. */
.starter-raster.is-layout-grid { grid-auto-rows: 1fr; align-items: stretch; }
.starter-raster.is-layout-grid > * { block-size: 100%; }
/* Logo's in vlakken: Safari zet een afbeelding in een flex-vlak te laag; absoluut gecentreerd is in alle browsers gelijk. */
.starter-logovlak { position: relative; aspect-ratio: 3 / 2; }
.starter-logovlak img { position: absolute; inset: 0; margin: auto; max-inline-size: 80%; max-block-size: 70%; inline-size: auto; block-size: auto; object-fit: contain; }


/* --------------------------------------------------------------------------
   2. Pagina's met een eigen H1 (singular.php laat dan de standaardtitel weg) en pagina's zonder secties
   (meestal juridische teksten, ook het cookiebeleid van Complianz): rustige koppen.
   -------------------------------------------------------------------------- */
.starter-content:not(.is-sectioned) > h1.wp-block-heading:first-child { font-size: var(--h2); }
.starter-content:not(.is-sectioned) :is(h2, h3, h4, h5, h6) {
  font-size: var(--text-l);
  font-weight: 600;
  line-height: 1.3;
  color: var(--text-color, inherit);
  margin-block: var(--space-l, 1.5rem) var(--space-xs, 0.5rem);
}
.starter-content:not(.is-sectioned) :is(h3, h4, h5, h6) { font-size: var(--text-m); margin-block-start: var(--space-m, 1rem); }


/* --------------------------------------------------------------------------
   3. Tikdoelen op mobiel: links in footer en uitschuifmenu minstens 44 px hoog.
   -------------------------------------------------------------------------- */
@media (max-width: 781px) {
  .starter-footer :is(.menu, ul) a,
  .starter-nav__drawer .starter-nav__legal a { display: inline-flex; align-items: center; min-block-size: 2.75rem; }
}


/* --------------------------------------------------------------------------
   4. Video in een venster: blok Video met klasse starter-video--overlay (script in extra.js).
   -------------------------------------------------------------------------- */
.starter-videovenster {
  inline-size: min(100% - 2 * var(--gutter, 1rem), 70rem);
  max-inline-size: none;
  max-block-size: none;
  padding: 0;
  border: 0;
  overflow: visible;
  background: transparent;
  color-scheme: light;
}
.starter-videovenster::backdrop { background: rgb(0 0 0 / 0.85); }
.starter-videovenster__beeld {
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-m, 5px);
  overflow: hidden;
  background: #000;
  box-shadow: 0 30px 60px -20px rgb(0 0 0 / 0.6);
}
.starter-videovenster__beeld > :is(iframe, video) { display: block; inline-size: 100%; block-size: 100%; border: 0; }
.starter-videovenster__sluit {
  position: absolute;
  inset-block-end: calc(100% + var(--space-s, 0.75rem));
  inset-inline-end: 0;
  inline-size: 2.75rem;
  aspect-ratio: 1;
  border: 0;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
}
.starter-videovenster__sluit span::before,
.starter-videovenster__sluit span::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  inline-size: 1.1rem;
  block-size: 2px;
  background: #111;
  translate: -50% -50%;
  rotate: 45deg;
}
.starter-videovenster__sluit span::after { rotate: -45deg; }
.starter-videovenster__sluit:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
:root.starter-videovenster-open { overflow: hidden; }
@media (prefers-reduced-motion: no-preference) {
  .starter-videovenster[open] { animation: starter-venster-in 0.35s cubic-bezier(0.16, 1, 0.3, 1); }
  .starter-videovenster[open]::backdrop { animation: starter-venster-achter 0.35s ease; }
}
@keyframes starter-venster-in { from { opacity: 0; transform: translateY(16px) scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes starter-venster-achter { from { opacity: 0; } to { opacity: 1; } }


/* --------------------------------------------------------------------------
   5. Cookiebanner (Complianz). De variabelen van Complianz (banner-1-optin.css) volgen de kleuren van de site.
   Zijn die kleuren light-dark(), dan schakelt de banner mee met de donkere modus.
   Teksten per taal: Polylang > Tekstvertalingen, groep complianz (NL en EN beide invullen).
   -------------------------------------------------------------------------- */
:root:root {
  --cmplz_banner_background_color: var(--white, #fff);
  --cmplz_banner_border_color: color-mix(in oklch, var(--text-color, #222) 12%, transparent);
  --cmplz_banner_border_radius: var(--radius-m, 12px);
  --cmplz_text_color: var(--text-color, #222);
  --cmplz_hyperlink_color: var(--primary, #0d59f4);
  --cmplz_title_font_size: var(--text-l, 1.125rem);
  --cmplz_text_font_size: var(--text-s, 0.875rem);
  --cmplz_link_font_size: var(--text-s, 0.875rem);
  --cmplz_category_body_font_size: var(--text-s, 0.875rem);
  --cmplz_category_header_title_font_size: var(--text-m, 1rem);
  --cmplz_button_font_size: var(--text-m, 1rem);
  --cmplz_button_border_radius: var(--btn-border-radius, 50px);
  --cmplz_button_accept_background_color: var(--btn-background, var(--primary, #2cc801));
  --cmplz_button_accept_border_color: var(--btn-background, var(--primary, #2cc801));
  --cmplz_button_accept_text_color: var(--btn-text-color, #fff);
  --cmplz_button_deny_background_color: transparent;
  --cmplz_button_deny_border_color: color-mix(in oklch, var(--text-color, #222) 35%, transparent);
  --cmplz_button_deny_text_color: var(--text-color, #222);
  --cmplz_button_settings_background_color: transparent;
  --cmplz_button_settings_border_color: color-mix(in oklch, var(--text-color, #222) 35%, transparent);
  --cmplz_button_settings_text_color: var(--text-color, #222);
  --cmplz_category_header_always_active_color: var(--primary, green);
  --cmplz_slider_active_color: var(--primary, #2cc801);
  --cmplz_slider_inactive_color: color-mix(in oklch, var(--text-color, #222) 30%, transparent);
  --cmplz_slider_bullet_color: #fff;
}
.cmplz-cookiebanner,
.cmplz-cookiebanner :is(.cmplz-title, .cmplz-message, .cmplz-btn, .cmplz-link, .cmplz-category-title, .cmplz-description),
#cmplz-manage-consent .cmplz-manage-consent { font-family: var(--text-font-family, inherit); }
.cmplz-cookiebanner { box-shadow: 0 0.5rem 2.5rem rgb(0 0 0 / 0.18); }
.cmplz-cookiebanner .cmplz-title { font-weight: 500; }
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn { font-weight: var(--btn-font-weight, 500); transition: background-color 0.2s, border-color 0.2s; }
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-accept:hover { background-color: var(--btn-background-hover, var(--btn-background)); border-color: var(--btn-background-hover, var(--btn-background)); }
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn:not(.cmplz-accept):hover { border-color: var(--text-color, #222); }
.cmplz-cookiebanner .cmplz-categories .cmplz-category { background-color: color-mix(in oklch, var(--text-color, #222) 6%, transparent); }
.cmplz-close svg { fill: var(--text-color, #222) !important; }
#cmplz-manage-consent .cmplz-manage-consent { box-shadow: 0 0 1.5rem rgb(0 0 0 / 0.15); font-size: var(--text-s, 0.875rem); }
/* Logo: het beeld uit Complianz weg, het sitelogo (extra.js) op een vaste maat. */
.cmplz-cookiebanner .cmplz-logo:has(.starter-cmplz-eigen) > img { display: none; }
.cmplz-cookiebanner .starter-cmplz-eigen { display: block; inline-size: 7rem; }
.cmplz-cookiebanner .starter-cmplz-eigen :is(svg, img) { display: block; inline-size: 100%; block-size: auto; }