/* ============================================================
   H2G Theme — core-blocks.css
   WordPress CORE-blokken (heading, paragraph, buttons, image)
   → H2G huisstijl. wp-block-library is ge-dequeued, dus deze
   file levert ZOWEL de structurele basis die core normaal zelf
   meelevert (flex/reset) ALS de huisstijl.
   Geladen op frontend (h2g_enqueue_assets, $components) én in de
   editor (add_editor_style).
   ============================================================ */

/* ─── core/heading ──────────────────────────────────────── */
/* main.css stuurt h1..h6 al; .wp-block-heading erft dat. We borgen
   font + kleur en laten de thema.json fontSizes hun werk doen. */
.wp-block-heading {
  font-family: var(--font-heading);
  color: var(--color-black);
  line-height: 1.2;
}

/* ─── core/paragraph ────────────────────────────────────── */
.wp-block-paragraph,
p.wp-block-paragraph {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--color-text);
  line-height: 1.7;
}

/* ─── core/image ────────────────────────────────────────── */
/* core levert normaal de figure-reset; hier zelf doen. */
.wp-block-image { margin: 0; }
.wp-block-image figure { margin: 0; }
.wp-block-image img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius);
}
.wp-block-image.is-style-rounded img { border-radius: 50%; }
.wp-block-image figcaption {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-text);
  text-align: center;
  margin-top: 10px;
}

/* ─── Goud accent-woord (inline format h2g/goud-accent + <em>) ─── */
/* Werkt in koppen én losse tekst. Reset cursief, maakt goud. */
.h2g-accent,
.wp-block-heading em,
.wp-block-heading .h2g-accent {
  font-style: normal;
  color: var(--color-accent);
}

/* ============================================================
   core/buttons + core/button
   ============================================================ */

/* KRITISCH: dit komt normaal uit wp-block-library. Spiegelt .h2g-btn-groep. */
.wp-block-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
.wp-block-buttons.is-content-justification-center { justify-content: center; }
.wp-block-buttons.is-content-justification-right  { justify-content: flex-end; }
.wp-block-buttons.is-vertical {
  flex-direction: column;
  align-items: stretch;
  flex-wrap: nowrap;
}

/* De link is het knop-element. Spiegelt .h2g-btn (buttons.css). */
.wp-block-button__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 12px 28px;
  border-radius: var(--radius);
  border: 2px solid transparent;
  text-decoration: none;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.22s ease, color 0.22s ease, border-color 0.22s ease, transform 0.18s ease;
}
.wp-block-button__link:hover { transform: translateY(-2px); }

/* Kale core/button zonder H2G-stijl = primair, zodat 'ie nooit
   ongestyled (WP-blauw/onzichtbaar) is. */
.wp-block-button:not([class*="is-style-h2g-"]) > .wp-block-button__link {
  background-color: var(--color-black);
  color: var(--color-white);
  border-color: var(--color-black);
}
.wp-block-button:not([class*="is-style-h2g-"]) > .wp-block-button__link:hover {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-black);
}

/* ─── Stijl-varianten (rechter zijbalk → Stijlen) ─────────── */
/* H2G Primair — zwart, hover goud */
.wp-block-button.is-style-h2g-primair > .wp-block-button__link {
  background-color: var(--color-black);
  color: var(--color-white);
  border-color: var(--color-black);
}
.wp-block-button.is-style-h2g-primair > .wp-block-button__link:hover {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-black);
}

/* H2G Accent — goud, hover donker goud */
.wp-block-button.is-style-h2g-accent > .wp-block-button__link {
  background-color: var(--color-accent);
  color: var(--color-black);
  border-color: var(--color-accent);
}
.wp-block-button.is-style-h2g-accent > .wp-block-button__link:hover {
  background-color: var(--color-accent-dark);
  border-color: var(--color-accent-dark);
  color: var(--color-white);
}

/* H2G Outline */
.wp-block-button.is-style-h2g-outline > .wp-block-button__link {
  background-color: transparent;
  color: var(--color-black);
  border-color: var(--color-black);
}
.wp-block-button.is-style-h2g-outline > .wp-block-button__link:hover {
  background-color: var(--color-black);
  color: var(--color-white);
}

/* H2G Outline wit (op donkere achtergrond) */
.wp-block-button.is-style-h2g-outline-wit > .wp-block-button__link {
  background-color: transparent;
  color: var(--color-white);
  border-color: var(--color-white);
}
.wp-block-button.is-style-h2g-outline-wit > .wp-block-button__link:hover {
  background-color: var(--color-white);
  color: var(--color-black);
}

/* ─── Merk-pijl via ::after (geen inline SVG nodig) ───────── */
/* Reproduceert h2g_arrow_svg() als mask; currentColor = knop-tekstkleur,
   identiek aan de inline currentColor-SVG. Alleen op primair + accent
   (de "call-to-action" knoppen), net als de huidige render. */
.wp-block-button.is-style-h2g-primair > .wp-block-button__link::after,
.wp-block-button.is-style-h2g-accent > .wp-block-button__link::after {
  content: "";
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  background-color: currentColor;
  -webkit-mask: var(--h2g-arrow) center / contain no-repeat;
          mask: var(--h2g-arrow) center / contain no-repeat;
}

/* ============================================================
   core/paragraph stijl-varianten → .h2g-label look
   Beide varianten staan op zichzelf (blok-stijlen zijn single-select,
   dus -donker mag niet afhangen van de basis-variant).
   ============================================================ */
.wp-block-paragraph.is-style-h2g-label,
.wp-block-paragraph.is-style-h2g-label-donker {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 12px;
  line-height: 1.4;
}
.wp-block-paragraph.is-style-h2g-label        { color: var(--color-accent); }
.wp-block-paragraph.is-style-h2g-label-donker { color: rgba(17, 17, 17, 0.5); }

/* ============================================================
   Sectie-context — core-blokken binnen H2G-secties
   (vervangt de oude .h2g-sectie-header / .h2g-cta-banner__actie chrome)
   ============================================================ */

/* CTA-banner: tekstkolom (h2g/cta-tekst) | knoppenkolom (core/buttons).
   Forceer de knoppen-kolom ongeacht core's layout-klassen. */
.h2g-cta-banner__inner > .wp-block-buttons {
  flex-direction: column;
  align-items: stretch;
  flex-wrap: nowrap;
  min-width: 240px;
  flex-shrink: 0;
}
.h2g-cta-banner__inner > .wp-block-buttons .wp-block-button__link {
  width: 100%;
  justify-content: center;
}

/* Gecentreerde sectie-kop + CTA (vervangt .h2g-sectie-header / .h2g-sectie-cta).
   Descendant-selectors (geen >) zodat ze óók matchen door de display:contents
   InnerBlocks-wrappers in de editor heen. .wp-block-heading/.wp-block-paragraph
   raken alleen de core-kop (kaarten gebruiken plain <h3>/<p>). */
.h2g-diensten .wp-block-heading,
.h2g-portfolio-preview .wp-block-heading,
.h2g-diensten .wp-block-paragraph,
.h2g-portfolio-preview .wp-block-paragraph {
  text-align: center;
}
.h2g-diensten .wp-block-heading,
.h2g-portfolio-preview .wp-block-heading,
.h2g-diensten .wp-block-paragraph:not([class*="is-style-h2g-label"]),
.h2g-portfolio-preview .wp-block-paragraph:not([class*="is-style-h2g-label"]) {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}
.h2g-diensten .wp-block-heading,
.h2g-portfolio-preview .wp-block-heading {
  margin-top: 8px;
  margin-bottom: 16px;
}
.h2g-diensten .wp-block-paragraph:not([class*="is-style-h2g-label"]),
.h2g-portfolio-preview .wp-block-paragraph:not([class*="is-style-h2g-label"]) {
  font-size: 17px;
}
/* Eyebrow-label gecentreerd (inline-block → block + auto-marges). */
.h2g-diensten .wp-block-paragraph[class*="is-style-h2g-label"],
.h2g-portfolio-preview .wp-block-paragraph[class*="is-style-h2g-label"] {
  display: block;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}
/* Kaart-grid links uitlijnen + ruimte onder de kop. */
.h2g-diensten-grid,
.h2g-portfolio-grid {
  text-align: left;
  margin-top: 40px;
}
/* CTA-knoppen onderaan de sectie gecentreerd. */
.h2g-diensten .wp-block-buttons,
.h2g-portfolio-preview .wp-block-buttons {
  justify-content: center;
  margin-top: 48px;
}

/* Donkere sectie-variant: core-kop wit, subtitel licht (volgt de
   achtergrond-keuze in de zijbalk → bij wit/grijs valt tekst terug op
   de standaard donkere kleuren = leesbaar). */
.h2g-sectie--donker .wp-block-heading {
  color: var(--color-white);
}
.h2g-sectie--donker .wp-block-paragraph:not([class*="is-style-h2g-label"]) {
  color: var(--color-grey-300);
}

/* Over/intro: tekstkolom links uitgelijnd; gouden streepje boven de kop
   (verving de losse .h2g-gold-line die tussen label en kop stond). */
.h2g-intro__tekst .wp-block-heading::before {
  content: '';
  display: block;
  width: 48px;
  height: 3px;
  background-color: var(--color-accent);
  border-radius: 2px;
  margin-bottom: 20px;
}
.h2g-intro__tekst .wp-block-buttons {
  margin-top: 8px;
}

/* ============================================================
   Generieke gecentreerde sectie-kop (core-blokken)
   Opt-in via .h2g-kop-centraal op de <section>. Zelfde behandeling
   als .h2g-diensten/.h2g-portfolio-preview (homepage), maar herbruikbaar
   voor álle sub-pagina header+grid secties (merken, merkwaarden,
   werkwijze, producten-overzicht, portfolio-galerij, …). Raakt alleen
   .wp-block-heading/.wp-block-paragraph (de core-kop); kaarten gebruiken
   plain <h3>/<p> en blijven dus links uitgelijnd.
   ============================================================ */
.h2g-kop-centraal .wp-block-heading,
.h2g-kop-centraal .wp-block-paragraph {
  text-align: center;
}
.h2g-kop-centraal .wp-block-heading,
.h2g-kop-centraal .wp-block-paragraph:not([class*="is-style-h2g-label"]) {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}
.h2g-kop-centraal .wp-block-heading {
  margin-top: 8px;
  margin-bottom: 16px;
}
.h2g-kop-centraal .wp-block-paragraph:not([class*="is-style-h2g-label"]) {
  font-size: 17px;
}
.h2g-kop-centraal .wp-block-paragraph[class*="is-style-h2g-label"] {
  display: block;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}
.h2g-kop-centraal .wp-block-buttons {
  justify-content: center;
  margin-top: 48px;
}

/* ─── Mobiel ──────────────────────────────────────────────── */
@media (max-width: 480px) {
  .wp-block-buttons:not(.is-vertical) { flex-direction: column; align-items: stretch; }
  .wp-block-button { width: 100%; }
  .wp-block-button__link { width: 100%; justify-content: center; }
}