/* ==========================================================================
   Plastic Helden — blokken uit de editor in de huisstijl
   Knoppen, kaders, kolommen, media & tekst, citaat, video, uitklapvraag…
   zoals de redactie ze op subpagina's zet (boekpagina, klassenchallenge,
   oefenpagina 'Voorbeeldblokken'). Laadt op de site én in de blokeditor
   (inc/blokken.php), zodat een kader in de editor er al uitziet als op de
   site. Vandaar de selector :is(.rijketekst, .editor-styles-wrapper).
   ========================================================================== */

/* main.css (met de tokens) laadt niet in de editor: daar dezelfde waarden. */
.editor-styles-wrapper {
  --blauw: #0090d3;
  --blauw-diep: #00699a;
  --blauw-donker: #0678ac;
  --navy: #314b69;
  --navy-deep: #22354b;
  --inkt: #24384f;
  --grijsblauw: #bdccd4;
  --grijsblauw-d: #52677d;
  --mist: #f4f8fa;
  --rood: #ea5157;
  --rood-diep: #d63b41;
  --lijn: #dde6eb;
  --radius: 16px;
  --focus: 0 0 0 3px #fff, 0 0 0 6px var(--rood-diep);
}

/* ===== Knoppen: gevuld = rode pil (prio 1), Omlijnd = navy rand ===== */
:is(.rijketekst, .editor-styles-wrapper) .wp-block-buttons {
  gap: 0.75rem;
  margin-block: 1.5rem;
}
/* .wp-block-button erbij: GP's editor-CSS (.wp-block-button__link:not(.has-background),
   radius 0) laadt later en zou anders winnen */
:is(.rijketekst, .editor-styles-wrapper) .wp-block-button .wp-block-button__link {
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.2;
  padding: 0.85rem 1.6rem;
  border-radius: 999px;
  text-decoration: none;
  transition:
    background-color 0.15s ease-out,
    color 0.15s ease-out,
    transform 0.18s cubic-bezier(0.2, 0.8, 0.3, 1),
    box-shadow 0.18s ease-out;
}
:is(.rijketekst, .editor-styles-wrapper) .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(.has-background) {
  padding: 0.85rem 1.6rem; /* GP's editor-CSS zet hier 10px 15px */
  background: var(--rood-diep);
  box-shadow: 0 8px 20px -10px rgba(10, 30, 50, 0.5);
}
:is(.rijketekst, .editor-styles-wrapper) .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(.has-text-color) {
  color: #fff;
}
.rijketekst .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(.has-background):hover {
  background: #c22f35;
  transform: translateY(-2px);
}
:is(.rijketekst, .editor-styles-wrapper) .wp-block-button.is-style-outline .wp-block-button__link {
  border: 0;
  padding: 0.85rem 1.6rem;
  background: transparent;
  box-shadow: inset 0 0 0 2px currentColor;
}
:is(.rijketekst, .editor-styles-wrapper) .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color) {
  color: var(--navy);
}
.rijketekst .wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: var(--navy);
  color: #fff;
  box-shadow: inset 0 0 0 2px var(--navy);
  transform: translateY(-2px);
}
.rijketekst .wp-block-button__link:focus-visible {
  outline: none;
  box-shadow: var(--focus);
}

/* ===== Afbeeldingen ===== */
:is(.rijketekst, .editor-styles-wrapper) .wp-block-image {
  margin-block: 0 1.5rem;
}
/* Foto's krijgen de ronde hoek van de kaarten; vrijstaande illustraties
   (transparante png) merken daar niets van. */
:is(.rijketekst, .editor-styles-wrapper) .wp-block-image img,
:is(.rijketekst, .editor-styles-wrapper) .wp-block-media-text__media img {
  border-radius: var(--radius);
}
:is(.rijketekst, .editor-styles-wrapper) .wp-element-caption,
:is(.rijketekst, .editor-styles-wrapper) .wp-block-image figcaption {
  margin-top: 0.6rem;
  font-size: 0.9rem;
  color: var(--grijsblauw-d);
  text-align: left;
}

/* ===== Kolommen en media & tekst ===== */
:is(.rijketekst, .editor-styles-wrapper) .wp-block-columns {
  gap: clamp(1.5rem, 4vw, 3rem);
  margin-block: 0 1.5rem;
}
:is(.rijketekst, .editor-styles-wrapper) .wp-block-column > :first-child,
:is(.rijketekst, .editor-styles-wrapper) .wp-block-media-text__content > :first-child {
  margin-top: 0;
}
:is(.rijketekst, .editor-styles-wrapper) .wp-block-column > :last-child,
:is(.rijketekst, .editor-styles-wrapper) .wp-block-media-text__content > :last-child {
  margin-bottom: 0;
}
:is(.rijketekst, .editor-styles-wrapper) .wp-block-media-text {
  margin-block: 0 2rem;
}
/* Core zet 8% binnenmarge rond de tekst; bij ons staat de tekst gewoon in
   de kolom, met een vaste tussenruimte naar het beeld. */
:is(.rijketekst, .editor-styles-wrapper) .wp-block-media-text .wp-block-media-text__content {
  padding: 0 0 0 clamp(1.5rem, 4vw, 3rem);
}
:is(.rijketekst, .editor-styles-wrapper) .wp-block-media-text.has-media-on-the-right .wp-block-media-text__content {
  padding: 0 clamp(1.5rem, 4vw, 3rem) 0 0;
}
@media (max-width: 600px) {
  .rijketekst .wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__content,
  .rijketekst .wp-block-media-text.is-stacked-on-mobile.has-media-on-the-right .wp-block-media-text__content {
    padding: 1.25rem 0 0;
  }
  /* Staande beelden (boekomslag, illustratie) zouden onder elkaar een heel
     scherm vullen; liggende foto's blijven gewoon schermbreed. */
  .rijketekst .wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__media img {
    width: auto;
    max-width: 100%;
    max-height: 20rem;
    margin-inline: auto;
  }
}

/* ===== Kaders (groep-blok, stijl 'Kader licht' of 'Kader blauw') ===== */
:is(.rijketekst, .editor-styles-wrapper) .wp-block-group.is-style-ph-kader,
:is(.rijketekst, .editor-styles-wrapper) .wp-block-group.is-style-ph-kader-blauw {
  border-radius: var(--radius);
  padding: clamp(1.5rem, 4vw, 2.75rem);
  margin-block: 0 2rem;
}
/* Mist verschilt nauwelijks van wit: de rand tekent het kader af (zoals het contactformulier) */
:is(.rijketekst, .editor-styles-wrapper) .wp-block-group.is-style-ph-kader {
  background: var(--mist);
  border: 1px solid var(--grijsblauw);
}
:is(.rijketekst, .editor-styles-wrapper) .wp-block-group.is-style-ph-kader-blauw {
  background: linear-gradient(115deg, var(--blauw-diep) 0%, var(--blauw-donker) 46%, var(--blauw) 78%);
  color: #fff;
}
:is(.rijketekst, .editor-styles-wrapper) .is-style-ph-kader-blauw :is(h2, h3, h4) {
  color: #fff;
}
:is(.rijketekst, .editor-styles-wrapper) .is-style-ph-kader-blauw a:not(.wp-block-button__link) {
  color: #fff;
  text-decoration: underline;
}
/* Rode knop op blauw: witte binnenring voor de rand (zelfde ingreep als in de paginakop) */
:is(.rijketekst, .editor-styles-wrapper) .is-style-ph-kader-blauw .wp-block-button:not(.is-style-outline) .wp-block-button__link {
  box-shadow:
    inset 0 0 0 1.5px rgba(255, 255, 255, 0.85),
    0 10px 24px -10px rgba(10, 30, 50, 0.55);
}
:is(.rijketekst, .editor-styles-wrapper) .is-style-ph-kader-blauw .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color) {
  color: #fff;
}
.rijketekst .is-style-ph-kader-blauw .wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: #fff;
  color: var(--navy);
  box-shadow: inset 0 0 0 2px #fff;
}
.rijketekst .is-style-ph-kader-blauw .wp-block-button__link:focus-visible {
  box-shadow:
    0 0 0 3px var(--navy-deep),
    0 0 0 6px #fff;
}
:is(.rijketekst, .editor-styles-wrapper) :is(.is-style-ph-kader, .is-style-ph-kader-blauw) > :first-child {
  margin-top: 0;
}
:is(.rijketekst, .editor-styles-wrapper) :is(.is-style-ph-kader, .is-style-ph-kader-blauw) > :last-child {
  margin-bottom: 0;
}

/* ===== Citaat ===== */
:is(.rijketekst, .editor-styles-wrapper) .wp-block-quote {
  margin: 2rem 0;
  padding: 0.2rem 0 0.2rem 1.4rem;
  border-left: 4px solid var(--rood);
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--navy);
}
:is(.rijketekst, .editor-styles-wrapper) .wp-block-quote p {
  margin-bottom: 0.6rem;
}
:is(.rijketekst, .editor-styles-wrapper) .wp-block-quote cite {
  display: block;
  font-size: 0.9rem;
  font-style: normal;
  font-weight: 400;
  color: var(--grijsblauw-d);
}

/* ===== Scheidingslijn ===== */
:is(.rijketekst, .editor-styles-wrapper) .wp-block-separator {
  border: 0;
  border-top: 2px solid var(--lijn);
  margin: 2.5rem 0;
  opacity: 1;
}

/* ===== Video (YouTube/Vimeo-embed) ===== */
:is(.rijketekst, .editor-styles-wrapper) .wp-block-embed {
  margin-block: 0 1.75rem;
}
:is(.rijketekst, .editor-styles-wrapper) .wp-block-embed__wrapper {
  border-radius: var(--radius);
  overflow: hidden;
}

/* ===== Uitklapvraag (blok 'Details') ===== */
:is(.rijketekst, .editor-styles-wrapper) .wp-block-details {
  background: var(--mist);
  border: 1px solid var(--grijsblauw);
  border-radius: 12px;
  padding: 0 1.15rem;
  margin-block: 0 0.75rem;
}
:is(.rijketekst, .editor-styles-wrapper) .wp-block-details summary {
  font-weight: 700;
  color: var(--navy);
  padding: 0.9rem 0;
  cursor: pointer;
}
:is(.rijketekst, .editor-styles-wrapper) .wp-block-details[open] {
  padding-bottom: 1rem;
}
:is(.rijketekst, .editor-styles-wrapper) .wp-block-details > :last-child {
  margin-bottom: 0;
}
.rijketekst .wp-block-details summary:focus-visible {
  outline: none;
  border-radius: 6px;
  box-shadow: var(--focus);
}

/* ===== Bestand (downloadlink met knop) ===== */
:is(.rijketekst, .editor-styles-wrapper) .wp-block-file {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  margin-block: 0 1.5rem;
}
:is(.rijketekst, .editor-styles-wrapper) .wp-block-file .wp-block-file__button {
  margin: 0;
  padding: 0.55rem 1.15rem;
  border-radius: 999px;
  font-size: 0.92rem;
  font-weight: 700;
  background: var(--rood-diep);
  color: #fff;
  text-decoration: none;
}
.rijketekst .wp-block-file .wp-block-file__button:hover {
  background: #c22f35;
  color: #fff;
}

/* ===== Oefenpagina 'Voorbeeldblokken': uitleglabel boven elk voorbeeld ===== */
:is(.rijketekst, .editor-styles-wrapper) .ph-voorbeeld-label {
  font-size: 0.9rem;
  color: var(--grijsblauw-d);
  margin-bottom: 1.25rem;
}