/* Transparant hoofdlogo: lichte achtergrond op donkere vlakken (nav-donker + footer) */
.nav .logo-on-dark, .footer img[src*="logo"], .footer-logo img, img.footer-logo {
  background: #fff;
  border-radius: 10px;
  padding: 4px 10px;
  box-sizing: content-box;
}
/* ============================================================
   MOBIELE CENTRERING — alleen subpagina's (:is(body.subpage,body.home)), <=900px.
   Desktop en homepage blijven volledig onaangetast.
   Doel: alles gecentreerd — koppen, teksten, knoppen, foto's —
   en cta-knoppen netjes ONDER de tekst in plaats van ernaast.
   ============================================================ */
/* Review-avatar (initiaal-vakjes) overal verbergen — alleen naam, sterren en tijd tonen */
.hpgr-avatar { display: none !important; }

@media (max-width: 900px) {

  /* ---------- 1. Alle tekst gecentreerd ---------- */
  :is(body.subpage,body.home) section h1,
  :is(body.subpage,body.home) section h2,
  :is(body.subpage,body.home) section h3,
  :is(body.subpage,body.home) section h4,
  :is(body.subpage,body.home) section h5,
  :is(body.subpage,body.home) section p,
  :is(body.subpage,body.home) section .eyebrow,
  :is(body.subpage,body.home) section li,
  :is(body.subpage,body.home) section blockquote,
  :is(body.subpage,body.home) section figcaption,
  :is(body.subpage,body.home) section label,
  :is(body.subpage,body.home) .subhero-content,
  :is(body.subpage,body.home) .subhero-sub {
    text-align: center !important;
  }
  :is(body.subpage,body.home) section .eyebrow { display: inline-block; }

  /* ---------- 2. Breadcrumb + subhero ---------- */
  :is(body.subpage,body.home) .breadcrumb {
    justify-content: center !important;
    text-align: center !important;
    display: flex; flex-wrap: wrap;
  }

  /* ---------- 3. Knoppen: gecentreerd, onder de tekst ---------- */
  :is(body.subpage,body.home) section .btn,
  :is(body.subpage,body.home) section .btn-pill-dark {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  /* containers die knoppen bevatten: centreer de inhoud */
  :is(body.subpage,body.home) section .content-text,
  :is(body.subpage,body.home) section .seo-content,
  :is(body.subpage,body.home) section .contact-info-card {
    text-align: center !important;
  }

  /* ---------- 4. CTA-band: tekst boven, knoppen eronder ---------- */
  :is(body.subpage,body.home) .cta-band-inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 22px !important;
  }
  :is(body.subpage,body.home) .cta-band-actions {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    width: 100%;
    margin: 0 !important;
  }
  :is(body.subpage,body.home) .cta-band-actions .btn {
    width: min(100%, 320px);
    justify-content: center;
    text-align: center;
  }

  /* ---------- 4b. btn-group (standaard cta-band op de meeste pagina's):
       knoppen onder elkaar, gecentreerd onder de tekst ---------- */
  :is(body.subpage,body.home) .btn-group {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    width: 100% !important;
    margin: 0 !important;
  }
  :is(body.subpage,body.home) .btn-group .btn {
    width: min(100%, 320px);
    justify-content: center;
    text-align: center;
  }

  /* ---------- 4c. Generiek: losse knoppen in secties gecentreerd
       (prijs-cta, werkwijze-knoppen, hero- en content-knoppen) ---------- */
  :is(body.subpage,body.home) section .container,
  :is(body.subpage,body.home) .prijs-cta,
  :is(body.subpage,body.home) .rich-final-cta,
  :is(body.subpage,body.home) .hp-werkwijze .container {
    text-align: center;
  }

  /* ---------- 5. Foto's en media gecentreerd ---------- */
  :is(body.subpage,body.home) section img,
  :is(body.subpage,body.home) section .content-img,
  :is(body.subpage,body.home) section video {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* ---------- 6. Lijsten (vinkjes/usp's) netjes gecentreerd ---------- */
  :is(body.subpage,body.home) section ul,
  :is(body.subpage,body.home) section ol {
    list-style-position: inside;
    padding-left: 0 !important;
  }
  :is(body.subpage,body.home) section ul li,
  :is(body.subpage,body.home) section ol li {
    text-align: center !important;
  }

  /* ---------- 7. Contact-rijen: icoon boven, tekst eronder ---------- */
  :is(body.subpage,body.home) .contact-row {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 10px !important;
  }
  :is(body.subpage,body.home) .contact-row > div { text-align: center !important; }

  /* ---------- 8. Specs / details / faq ---------- */
  :is(body.subpage,body.home) .proj-specs,
  :is(body.subpage,body.home) .proj-specs-grid > div,
  :is(body.subpage,body.home) .faq-item,
  :is(body.subpage,body.home) .faq-item summary,
  :is(body.subpage,body.home) .seo-werkgebied,
  :is(body.subpage,body.home) .seo-longtext {
    text-align: center !important;
  }
  :is(body.subpage,body.home) .proj-specs-grid strong,
  :is(body.subpage,body.home) .proj-specs-grid span { display: block; }

  /* ---------- 9. Verhaal-pagina blokken ---------- */
  :is(body.subpage,body.home) .verhaal-cta-inner,
  :is(body.subpage,body.home) .verhaal-cta-btns {
    display: flex; flex-direction: column;
    align-items: center !important;
    text-align: center !important;
    gap: 14px;
  }

  /* ---------- 10. Cursusagenda ---------- */
  :is(body.subpage,body.home) .ca-toolbar { justify-content: center !important; text-align: center; }
  :is(body.subpage,body.home) .ca-info h4,
  :is(body.subpage,body.home) .ca-meta,
  :is(body.subpage,body.home) .ca-m-info { text-align: center !important; justify-content: center !important; }
  :is(body.subpage,body.home) .ca-card { text-align: center; }
  :is(body.subpage,body.home) .ca-boek {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
  }
  :is(body.subpage,body.home) .ca-boek .prijs { text-align: center !important; margin: 0 !important; }
  :is(body.subpage,body.home) .ca-boek .btn { width: min(100%, 280px); justify-content: center; }
  :is(body.subpage,body.home) .ca-deelnemer h5 { text-align: center !important; }
  :is(body.subpage,body.home) .ca-privacy,
  :is(body.subpage,body.home) .ca-form-status { text-align: center !important; }
  :is(body.subpage,body.home) #ca-success { text-align: center !important; }

  /* ---------- 11. Formuliervelden: labels gecentreerd, velden full-width ---------- */
  :is(body.subpage,body.home) form label { text-align: center !important; display: block; }

  /* ---------- 12. Kleine correcties ---------- */
  :is(body.subpage,body.home) section table { margin-left: auto; margin-right: auto; }
  :is(body.subpage,body.home) section .stagger > * { text-align: center; }

  /* ============ HOMEPAGE-SPECIFIEK (body.home) ============ */

  /* 1. Hero: titel, subtekst en knoppen gecentreerd */
  body.home .hp-hs-static-content {
    align-items: center !important;
    text-align: center !important;
  }
  body.home .hp-hs-static-content .hp-hs-eyebrow,
  body.home .hp-hs-static-content .hp-hs-title,
  body.home .hp-hs-static-content .hp-hs-desc {
    text-align: center !important;
  }
  body.home .hp-hs-static-content .hp-hs-btn { margin-left: auto; margin-right: auto; }

  /* 2. Waarom kiezen voor ons: kaarten met icoon gecentreerd */
  body.home .hp-waarom-card {
    display: flex; flex-direction: column;
    align-items: center !important;
    text-align: center !important;
  }
  body.home .hp-waarom-card .hp-waarom-ic { margin-left: auto !important; margin-right: auto !important; }

  /* 3. Cursus-kaarten: badge, titel, tekst, features en knop gecentreerd */
  body.home .hp-svc-body { text-align: center !important; }
  body.home .hp-svc-badge { left: 50% !important; transform: translateX(-50%) !important; right: auto !important; }
  body.home .hp-svc-features { padding-left: 0 !important; }
  body.home .hp-svc-features li { text-align: center !important; list-style-position: inside; justify-content: center !important; }
  body.home .hp-svc-body .btn { margin-left: auto !important; margin-right: auto !important; }

  /* 5. Trainingen in beeld: kaart-inhoud gecentreerd */
  body.home .hp-port-meta { text-align: center !important; align-items: center !important; justify-content: center !important; }
  body.home .hp-port-tag { margin-left: auto; margin-right: auto; }

  /* 6. Tips & nieuws: kaart-inhoud en Lees meer-knop gecentreerd */
  body.home .hp-tips-card-body { text-align: center !important; }
  body.home .hp-tips-meta { justify-content: center !important; }
  body.home .hp-tips-tag { margin-left: auto; margin-right: auto; }
  body.home .hp-tips-card-body a,
  body.home .hp-tips-card-body .btn { margin-left: auto !important; margin-right: auto !important; }

  /* 7. Google Reviews: kop en reviewkaarten gecentreerd */
  body.home .hpgr-head { text-align: center !important; align-items: center !important; flex-direction: column; }
  body.home .hpgr-card,
  body.home .hpgr-card-head,
  body.home .hpgr-name-row { text-align: center !important; align-items: center !important; }
  body.home .hpgr-card-head { justify-content: center !important; }
  body.home .hpgr-name-row { display: flex; flex-direction: column; gap: 4px; }
  body.home .hpgr-meta { justify-content: center !important; }
  body.home .hpgr-tag { display: table !important; margin-left: auto !important; margin-right: auto !important; float: none !important; text-align: center !important; }
  body.home .hpgr-google { justify-content: center !important; }
  body.home .hpgr-track > * { text-align: center !important; }
  body.home .hpgr-allcta, body.home .hpgr-write { margin-left: auto; margin-right: auto; }


  /* Contact-opties (homepage/subpagina's): icoon boven, label eronder, waarde eronder */
  :is(body.subpage,body.home) .calc-contact-grid {
    text-align: center !important;
  }
  :is(body.subpage,body.home) .calc-contact-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 8px !important;
  }
  :is(body.subpage,body.home) .calc-contact-item svg { margin: 0 auto !important; }
  :is(body.subpage,body.home) .calc-contact-item > div { text-align: center !important; }
  :is(body.subpage,body.home) .calc-contact-item strong,
  :is(body.subpage,body.home) .calc-contact-item span { display: block !important; text-align: center !important; }


  /* ---------- Footer: op mobiel volledig gecentreerd ---------- */
  :is(body.subpage,body.home) .footer,
  :is(body.subpage,body.home) .footer-col,
  :is(body.subpage,body.home) .footer-bottom {
    text-align: center !important;
  }
  :is(body.subpage,body.home) .footer-col ul { padding-left: 0 !important; list-style-position: inside; }
  :is(body.subpage,body.home) .footer-col li { text-align: center !important; }
  :is(body.subpage,body.home) .footer-logo { margin-left: auto !important; margin-right: auto !important; display: inline-block; }
  :is(body.subpage,body.home) .footer-col img { margin-left: auto !important; margin-right: auto !important; }
  :is(body.subpage,body.home) .footer-grid { justify-items: center; }
  :is(body.subpage,body.home) .footer-bottom {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
  }


  /* ---------- Iconen, sterren, nummers, badges: alles in kaarten gecentreerd ---------- */
  :is(body.subpage,body.home) section .voordeel-icon,
  :is(body.subpage,body.home) section .faq-icon,
  :is(body.subpage,body.home) section .icon,
  :is(body.subpage,body.home) section .hp-hero-usp-ico,
  :is(body.subpage,body.home) section .hp-werk-num,
  :is(body.subpage,body.home) section .verhaal-section-num,
  :is(body.subpage,body.home) section .verhaal-vc-num,
  :is(body.subpage,body.home) section [class*="-icon"],
  :is(body.subpage,body.home) section [class*="-ico"] {
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }
  :is(body.subpage,body.home) section .voordeel-card,
  :is(body.subpage,body.home) section .rich-rev,
  :is(body.subpage,body.home) section [class*="-card"] {
    text-align: center !important;
  }
  /* sterren-rijen (svg-sterren) gecentreerd */
  :is(body.subpage,body.home) section .rich-rev-stars,
  :is(body.subpage,body.home) section [class*="stars"],
  :is(body.subpage,body.home) section [class*="rating"] {
    display: flex !important;
    justify-content: center !important;
    text-align: center !important;
  }
  /* review-voet: naam en functie netjes onder elkaar, gecentreerd */
  :is(body.subpage,body.home) section .rich-rev-foot {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important;
    text-align: center !important;
  }
  /* generiek vangnet: los icoon (svg) bovenaan een kaart-div */
  :is(body.subpage,body.home) section div > svg:only-child {
    display: block;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  /* sterren-svg's expliciet in de rij houden (nooit individueel centreren) */
  :is(body.subpage,body.home) section [class*="stars"] svg,
  :is(body.subpage,body.home) section .rich-rev-stars svg {
    display: inline-block !important;
    margin-left: 0 !important;
    margin-right: 2px !important;
  }

}