/*
Theme Name: Remabuild
Theme URI: https://remabuild.be
Description: Huisstijl-thema voor Remabuild BV, child-thema van Kadence. Bevat de volledige opmaak van het oorspronkelijke ontwerp: typografie, kleuren, sectiestijlen, knoppen met afgesneden hoek, kaarten, projectenraster en animaties.
Author: De Keyproject
Version: 3.47
Template: kadence
Text Domain: remabuild
*/

/* ============================================================
   REMABUILD — huisstijl "industrieel premium"
   Oranje #E27A04 · Zwart #111111 · Grijs #7F7F7E · Lichtgrijs #F2F2F1
   Display: Big Shoulders Display · Body: Archivo
   ============================================================ */

:root {
  --rb-oranje:       #E27A04;
  --rb-oranje-hover: #f68d15;
  --rb-oranje-diep:  #b96302;
  --rb-zwart:        #111111;
  --rb-zwart-2:      #181818;
  --rb-grijs:        #7F7F7E;
  --rb-lichtgrijs:   #F2F2F1;
  --rb-wit:          #ffffff;
  --rb-lijn:         #e4e2df;
  --rb-lijn-donker:  #2a2a2a;
  --rb-max:          1240px;
  --rb-ease:         cubic-bezier(.22,.8,.3,1);
}

body {
  font-family: 'Archivo', system-ui, sans-serif;
  color: var(--rb-zwart);
  line-height: 1.65;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Typografie ---------- */

h1, h2, h3, h4,
.entry-content h1, .entry-content h2, .entry-content h3, .entry-content h4,
.wp-block-heading {
  font-family: 'Big Shoulders Display', 'Archivo', sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  line-height: 0.98;
  letter-spacing: 0.005em;
  color: var(--rb-zwart);
}

/* Standaardgroottes met lage prioriteit: elke keuze in de editor
   (S/M/L/XL of een eigen waarde) gaat hier automatisch overheen. */
:where(h1, .entry-content h1) { font-size: clamp(46px, 7.5vw, 96px); }
:where(h2, .entry-content h2) { font-size: clamp(34px, 4.6vw, 58px); margin-bottom: 20px; }
:where(h3, .entry-content h3) { font-size: 26px; letter-spacing: 0.01em; }
:where(h4, .entry-content h4) { font-size: 19px; letter-spacing: 0.05em; }

/* ---------- Kicker: oranje blok + label in caps ---------- */

.rb-kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Archivo', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--rb-grijs);
  margin-bottom: 14px;
  line-height: 1.2;
}
.rb-kicker::before {
  content: "";
  flex: 0 0 auto;
  width: 22px;
  height: 10px;
  background: var(--rb-oranje);
}
.rb-kicker-center { justify-content: center; }
.rb-dark .rb-kicker { color: #a8a8a8; }

/* ---------- Reveal ---------- */

/* Verbergen gebeurt pas wanneer het script draait (html.rb-js).
   Zonder script — en dus ook in de editor — is alles gewoon zichtbaar. */
.rb-js .rb-reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s var(--rb-ease), transform .7s var(--rb-ease);
}
.rb-js .rb-reveal.rb-in { opacity: 1; transform: none; }
.rb-d1 { transition-delay: .08s; }
.rb-d2 { transition-delay: .16s; }
.rb-d3 { transition-delay: .24s; }

/* ---------- Secties ---------- */

/* Kadence zet marge tussen blokken; bij vlakken over de volle
   breedte wordt dat een witte streep. Hier uitgezet. */
.entry-content > .alignfull,
.content-container .alignfull {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* 3.5 — Marge onder secties.

   In 3.4 stond hier `.entry-content > .rb-...`. Dat teken `>` eist dat de
   sectie er rechtstreeks in zit; zit hij een niveau dieper, dan slaat de
   regel over. Dat gebeurde bij de werkgebiedstrip. Daarom nu op de klasse
   zelf, ongeacht waar de sectie in de opbouw staat.

   De marge liet op smallere schermen de witte paginakleur tussen twee
   donkere vlakken zien. Secties horen hun ruimte van padding te krijgen,
   niet van marge. */
.rb-hero-strip,
.rb-dark,
.rb-alt,
.rb-cta,
.rb-section {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Ook wanneer de strip binnen het hero-blok staat. */
.wp-block-cover .rb-hero-strip,
.wp-block-cover__inner-container .rb-hero-strip {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* 3.5 — Het laatste blok binnen een sectie mag geen ondermarge hebben.
   WordPress geeft een kolommenblok van zichzelf 1.75em onderaan; binnen
   een gekleurde sectie werd dat een strook lege achtergrond. */
.rb-hero-strip .wp-block-columns,
.rb-dark .wp-block-columns:last-child,
.rb-alt .wp-block-columns:last-child,
.rb-cta .wp-block-columns:last-child,
.rb-section .wp-block-columns:last-child {
  margin-bottom: 0 !important;
}

.entry-content .wp-block-group > *:last-child,
.entry-content .wp-block-cover__inner-container > *:last-child {
  margin-bottom: 0;
}

.rb-section { padding: 104px 0; }
.rb-alt  { background: var(--rb-lichtgrijs) !important; }
.rb-dark { background: var(--rb-zwart) !important; color: var(--rb-wit); }

.rb-dark h1, .rb-dark h2, .rb-dark h3, .rb-dark h4,
.rb-dark .wp-block-heading { color: var(--rb-wit); }
.rb-dark p, .rb-dark li { color: #c9c9c9; }

.rb-intro {
  max-width: 66ch;
  margin-left: 0 !important;
  margin-right: auto !important;
  color: #3c3c3c;
  margin-bottom: 44px;
  font-size: 18px;
}
.rb-dark .rb-intro { color: #c9c9c9; }

.rb-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
  margin-bottom: 46px;
}
.rb-section-head h2 { margin-bottom: 0; }

/* ---------- Hero ---------- */

/* Kleur hard (altijd wit op de hero), grootte zacht (jouw keuze wint). */
.rb-hero h1,
.rb-page-hero h1 {
  color: var(--rb-wit);
  letter-spacing: 0.01em;
}
:where(.rb-hero h1) {
  font-size: clamp(58px, 10.5vw, 148px);
}
.rb-hero .rb-lijn { display: block; }
.rb-punt { color: var(--rb-oranje); }
.rb-hero .rb-lead {
  max-width: 56ch;
  /* WordPress centreert smalle vakken in een sectie; hier links vastgezet. */
  margin-left: 0 !important;
  margin-right: auto !important;
  margin-top: 26px;
  font-size: clamp(17px, 1.6vw, 20px);
  color: #d9d9d9;
}

/* Oranje gloed rechtsboven, zoals in het origineel */
.rb-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(1100px 500px at 82% 18%, rgba(226,122,4,.14), transparent 60%);
  pointer-events: none;
  z-index: 1;
}
.rb-hero > .wp-block-cover__inner-container { position: relative; z-index: 2; }

/* Strip onder de hero */
.rb-hero-strip {
  border-top: 1px solid rgba(255,255,255,.14);
  background: #141414 !important;
}
.rb-hero-strip p {
  font-size: 13px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #b9b9b9;
}
.rb-hero-strip strong { color: var(--rb-wit); font-weight: 600; }

/* De menubalk zweeft over de hero (transparante header); de hero krijgt
   daarom altijd extra ruimte bovenin. Geldt ook in de editor, zodat wat
   je daar ziet klopt met de site. Per pagina bij te stellen via het
   Afmetingen-paneel van het Cover-blok. */
.rb-hero,
.rb-page-hero {
  padding-top: 150px;
}
@media (max-width: 767px) {
  .rb-hero,
  .rb-page-hero {
    padding-top: 110px;
  }
}

/* Paginahero van subpagina's: oranje lijn onderaan */
.rb-page-hero { border-bottom: 4px solid var(--rb-oranje); }

/* Donkere streeptextuur uit het origineel als standaardachtergrond.
   Staat er een foto op de cover, dan ligt die hier vanzelf overheen. */
.rb-page-hero {
  background:
    linear-gradient(100deg, rgba(17,17,17,.95) 34%, rgba(17,17,17,.75) 100%),
    repeating-linear-gradient(-52deg, #1d1d1d 0 30px, #171717 30px 60px);
}
.rb-page-hero > .wp-block-cover__background {
  background-color: transparent !important;
}
:where(.rb-page-hero h1) { font-size: clamp(46px, 7.5vw, 96px); }

/* ---------- Knoppen: afgesneden hoek linksboven ---------- */

.wp-block-button__link,
.wp-block-kadence-advancedbtn .kt-button {
  font-family: 'Archivo', sans-serif;
  font-weight: 700;
  font-size: 15.5px;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 15px 30px;
  border: 2px solid var(--rb-oranje);
  border-radius: 0 !important;
  clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%, 0 10px);
  background: var(--rb-oranje);
  color: var(--rb-zwart);
  transition: background .18s, color .18s, border-color .18s;
}
.wp-block-button__link:hover,
.wp-block-kadence-advancedbtn .kt-button:hover {
  background: var(--rb-oranje-hover);
  border-color: var(--rb-oranje-hover);
  color: var(--rb-zwart);
}

/* Doorzichtige knop met rand, voor op donkere vlakken */
.rb-btn-ghost .wp-block-button__link,
.rb-btn-ghost .kt-button {
  background: transparent;
  color: var(--rb-wit);
}
.rb-btn-ghost .wp-block-button__link:hover,
.rb-btn-ghost .kt-button:hover {
  background: var(--rb-oranje);
  color: var(--rb-zwart);
}

/* Donkere knop, voor op witte vlakken */
.rb-btn-dark .wp-block-button__link,
.rb-btn-dark .kt-button {
  background: transparent;
  border-color: var(--rb-zwart);
  color: var(--rb-zwart);
}
.rb-btn-dark .wp-block-button__link:hover,
.rb-btn-dark .kt-button:hover {
  background: var(--rb-zwart);
  color: var(--rb-wit);
}

/* ---------- Kaarten ---------- */

.rb-card {
  position: relative;
  background: var(--rb-wit);
  border: 1px solid var(--rb-lijn);
  padding: 34px 30px 30px;
  overflow: hidden;
  height: 100%;
  transition: transform .25s var(--rb-ease), box-shadow .25s var(--rb-ease);
}
.rb-card h3 { margin-bottom: 10px; }
.rb-card p { color: #3c3c3c; font-size: 16px; }

/* Oranje streep die links inschuift bij muis-over */
.rb-card::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--rb-oranje);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .3s var(--rb-ease);
}
.rb-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(17,17,17,.10);
}
.rb-card:hover::before { transform: scaleY(1); }

.rb-card a { text-decoration: none; }

/* Pijl-link onderin een kaart */
.rb-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--rb-oranje-diep);
  text-decoration: none;
}
.rb-more::after { content: "\2192"; transition: transform .25s var(--rb-ease); }
.rb-card:hover .rb-more::after { transform: translateX(5px); }

/* Kaarten op donkere secties */
.rb-dark .rb-card { background: var(--rb-zwart-2); border-color: var(--rb-lijn-donker); }
.rb-dark .rb-card p { color: #b9b9b9; }
.rb-dark .rb-card h3 { color: var(--rb-wit); }
.rb-dark .rb-card:hover { box-shadow: 0 18px 40px rgba(0,0,0,.5); }
.rb-dark .rb-more { color: var(--rb-oranje); }

/* Kolommen in een rij even hoog */
.rb-cards > .wp-block-column { display: flex; }
.rb-cards > .wp-block-column > .wp-block-group { width: 100%; }

/* ---------- Opsomming op dienstpagina's ---------- */

.rb-lijst { list-style: none; margin-top: 10px; padding-left: 0; }
.rb-lijst li {
  padding: 15px 0 15px 30px;
  border-bottom: 1px solid var(--rb-lijn);
  position: relative;
  font-size: 17px;
}
.rb-lijst li::before {
  content: "";
  position: absolute;
  left: 0; top: 24px;
  width: 12px; height: 12px;
  background: var(--rb-oranje);
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}
.rb-dark .rb-lijst li { border-bottom-color: var(--rb-lijn-donker); }

/* ---------- Galerij ---------- */

/* 3.8 — De breedte van galerijfoto's wordt hier volledig zelf bepaald.

   In 3.6 stelde ik alleen de tussenruimte in en liet ik de breedte aan
   WordPress over. Die rekent met een eigen variabele voor de tussenruimte;
   omdat ik die niet meezette, klopte de berekening niet meer en vielen de
   foto's terug op volle breedte onder elkaar. Nu staan beide hier vast. */

.entry-content .wp-block-gallery.has-nested-images {
  --wp--style--unstable-gallery-gap: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: flex-start;
}

/* Maximaal drie op een rij, wat er ook is ingesteld. Vanaf vier foto's
   lopen ze door naar een volgende rij en houden ze hun formaat. */
.entry-content .wp-block-gallery.has-nested-images figure.wp-block-image {
  width: calc((100% - 48px) / 3) !important;
  margin: 0 !important;
  flex-grow: 0;
}

/* Twee foto's vullen samen de breedte in plaats van twee derde. */
.entry-content .wp-block-gallery.has-nested-images.columns-2 figure.wp-block-image,
.entry-content .wp-block-gallery.has-nested-images:not([class*="columns-"]) figure.wp-block-image:only-child {
  width: calc((100% - 24px) / 2) !important;
}

.entry-content .wp-block-gallery.has-nested-images.columns-1 figure.wp-block-image {
  width: 100% !important;
}

/* Alle foto's even groot: vaste verhouding, vullend bijgesneden vanuit het
   midden. Dit is wat het vinkje "Afbeeldingen bijsnijden" doet, maar dan
   overal en zonder instellen. */
.entry-content .wp-block-gallery.has-nested-images figure.wp-block-image img {
  aspect-ratio: 4/3;
  object-fit: cover;
  width: 100%;
  height: auto;
  display: block;
}

/* Mobiel: onder elkaar, volle breedte. */
@media (max-width: 781px) {
  .entry-content .wp-block-gallery.has-nested-images {
    --wp--style--unstable-gallery-gap: 16px;
    gap: 16px;
  }
  .entry-content .wp-block-gallery.has-nested-images figure.wp-block-image,
  .entry-content .wp-block-gallery.has-nested-images.columns-2 figure.wp-block-image {
    width: 100% !important;
  }
}

/* ---------- Projecten ---------- */

/* 3.10 — Automatisch raster.

   Een kolommenblok met vier of meer kolommen breekt vanaf hier vanzelf af
   naar drie per rij. Geen klasse nodig: vijf projectkaarten worden 3 + 2,
   allemaal even breed, in plaats van vijf smalle kolommen naast elkaar.
   Blokken met een, twee of drie kolommen blijven onveranderd. */
@media (min-width: 782px) {
  .entry-content .wp-block-columns:not(.rb-grid-2):not(.rb-grid-3):not(.rb-grid-4):has(> .wp-block-column:nth-child(4)) {
    flex-wrap: wrap !important;
    gap: 24px;
    align-items: stretch;
  }
  .entry-content .wp-block-columns:not(.rb-grid-2):not(.rb-grid-3):not(.rb-grid-4):has(> .wp-block-column:nth-child(4)) > .wp-block-column {
    flex-basis: calc((100% - 48px) / 3) !important;
    max-width: calc((100% - 48px) / 3);
    flex-grow: 0 !important;
    margin-left: 0 !important;
  }
}

@media (min-width: 782px) and (max-width: 1024px) {
  .entry-content .wp-block-columns:not(.rb-grid-2):not(.rb-grid-3):not(.rb-grid-4):has(> .wp-block-column:nth-child(4)) > .wp-block-column {
    flex-basis: calc((100% - 24px) / 2) !important;
    max-width: calc((100% - 24px) / 2);
  }
}

/* 3.9 — Raster met een vast aantal per rij.

   Zet de klasse `rb-grid-3` op een kolommenblok (Geavanceerd → Extra
   CSS-klassen). De kolommen zijn dan altijd een derde breed en lopen door
   naar een volgende rij zodra er meer dan drie in staan. Vijf kaarten
   worden dus 3 + 2, allemaal even groot, in plaats van twee blokken met
   verschillende breedtes.

   `rb-grid-2` doet hetzelfde met twee per rij. */

.rb-grid-4 {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 24px;
  align-items: stretch;
}
.rb-grid-4 > .wp-block-column {
  flex: 0 0 calc((100% - 72px) / 4) !important;
  max-width: calc((100% - 72px) / 4);
  margin-left: 0 !important;
}
@media (max-width: 1024px) {
  .rb-grid-4 > .wp-block-column {
    flex: 0 0 calc((100% - 24px) / 2) !important;
    max-width: calc((100% - 24px) / 2);
  }
}
@media (max-width: 781px) {
  .rb-grid-4 { gap: 16px; }
  .rb-grid-4 > .wp-block-column {
    flex: 0 0 100% !important;
    max-width: 100%;
  }
}

.rb-grid-3,
.rb-grid-2 {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 24px;
  align-items: stretch;
}

.rb-grid-3 > .wp-block-column,
.rb-grid-2 > .wp-block-column {
  margin-left: 0 !important;
  flex-grow: 0 !important;
}

.rb-grid-3 > .wp-block-column {
  flex-basis: calc((100% - 48px) / 3) !important;
  max-width: calc((100% - 48px) / 3);
}

.rb-grid-2 > .wp-block-column {
  flex-basis: calc((100% - 24px) / 2) !important;
  max-width: calc((100% - 24px) / 2);
}

/* Alle beelden in het raster even groot, ongeacht de oorspronkelijke
   verhouding van de foto. */
.rb-grid-3 img,
.rb-grid-2 img {
  aspect-ratio: 16/10;
  object-fit: cover;
  width: 100%;
  height: auto;
  display: block;
}

@media (max-width: 1024px) {
  .rb-grid-3 > .wp-block-column {
    flex-basis: calc((100% - 24px) / 2) !important;
    max-width: calc((100% - 24px) / 2);
  }
}

@media (max-width: 781px) {
  .rb-grid-3 > .wp-block-column,
  .rb-grid-2 > .wp-block-column {
    flex-basis: 100% !important;
    max-width: 100%;
  }
}


/* 3.7 — Projectkaarten schikken zichzelf in een raster van drie per rij.
   Voeg je meer kaarten toe aan een kolommenblok, dan lopen ze door naar
   een volgende rij in plaats van steeds smaller te worden.

   Twee kaarten (zoals op de homepage) vullen samen de breedte. Vanaf vier
   kaarten wordt de breedte op een derde vastgezet, zodat een losse kaart
   onderaan niet over de volle breedte uitrekt. Onder 782px stapelt
   WordPress ze zelf al onder elkaar. */
@media (min-width: 782px) {
  .entry-content .wp-block-columns:has(.rb-project) {
    flex-wrap: wrap !important;
    gap: 24px;
  }
  .entry-content .wp-block-columns:has(.rb-project) > .wp-block-column {
    flex-basis: calc((100% - 48px) / 3) !important;
    flex-grow: 1;
    margin-left: 0 !important;
  }
  .entry-content .wp-block-columns:has(.rb-project) > .wp-block-column:nth-last-child(n+4),
  .entry-content .wp-block-columns:has(.rb-project) > .wp-block-column:nth-last-child(n+4) ~ .wp-block-column {
    max-width: calc((100% - 48px) / 3);
  }
}


.rb-project { position: relative; overflow: hidden; background: var(--rb-zwart-2); display: block; }
.rb-project img {
  aspect-ratio: 16/10;
  object-fit: cover;
  width: 100%;
  transition: transform .6s var(--rb-ease), filter .6s var(--rb-ease);
  filter: grayscale(.5) contrast(1.02);
}
.rb-project:hover img { transform: scale(1.045); filter: grayscale(0); }
.rb-project .rb-project-body {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 46px 26px 22px;
  background: linear-gradient(to top, rgba(10,10,10,.92), rgba(10,10,10,0));
  color: var(--rb-wit);
}
.rb-project h3 { font-size: 24px; margin-top: 4px; color: var(--rb-wit); }

/* 3.11 — De titel over de foto is zelf de link; geen onderstreping of
   afwijkende kleur, de hele kaart voelt als één klikvlak. */
.rb-project h3 a,
.rb-project h3 a:hover { color: var(--rb-wit); text-decoration: none; }
.rb-project .rb-project-foto { margin: 0; }

/* 3.12 — Variant: titel en plaats onder de foto in plaats van eroverheen.
   Het verloop en de absolute plaatsing vervallen; de tekst staat in een
   eigen blok onder het beeld. */
.rb-project .rb-project-onder {
  position: static;
  padding: 20px 22px 24px;
  background: var(--rb-zwart-2);
  color: var(--rb-wit);
}
.rb-project .rb-project-onder h3 { margin-top: 8px; }
.rb-project .rb-project-onder .rb-meta { margin: 0; }

/* ---------- Mobiel ---------- */

/* 3.16 — De secties dragen hun ruimte als inline stijl uit de patronen:
   96px boven en onder, 28px opzij. Op een telefoon is dat te veel lucht
   verticaal en te weinig aan de zijkant. Hier wordt dat teruggebracht.
   De !important is nodig omdat inline stijlen anders voorgaan. */
@media (max-width: 781px) {
  .rb-dark,
  .rb-alt,
  .rb-section,
  .rb-cta,
  .entry-content > .wp-block-group.alignfull,
  .entry-content > .wp-block-group.alignwide {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* De strip onder de hero is een smalle band, geen sectie. */
  .rb-hero-strip {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }

  /* Hero: lager, en de tekst niet tegen de rand. */
  .rb-hero {
    min-height: 420px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .rb-hero.rb-page-hero { min-height: 320px !important; }

  /* Losse blokken die niet in een sectie zitten, houden dezelfde marge
     ten opzichte van de schermrand. */
  .page .entry-content > *:not(.alignfull):not(.alignwide) {
    padding-left: 20px;
    padding-right: 20px;
  }

  /* Ruimte tussen de blokken binnen een sectie mag ook krapper. */
  .rb-dark .wp-block-columns,
  .rb-alt .wp-block-columns,
  .rb-section .wp-block-columns {
    gap: 32px;
  }
}

/* 3.17 — Mobiel: hero leesbaarder en minder donker. De koppen worden
   kleiner zodat de foto weer meedoet, en de donkere waas over het beeld
   gaat een stuk terug. */
@media (max-width: 781px) {
  .rb-hero .wp-block-cover__background,
  .rb-hero .wp-block-cover__gradient-background {
    opacity: 0.45 !important;
  }
  :where(.rb-hero h1) {
    font-size: clamp(40px, 12vw, 56px);
    line-height: 1.04;
  }
  .rb-hero .rb-lead { margin-top: 18px; }

  /* CTA-band: kop en knop dicht op elkaar. Afstandhouders die voor de
     brede weergave bedoeld zijn, doen op mobiel niet mee. */
  .rb-cta { min-height: 0 !important; }
  .rb-cta .wp-block-spacer,
  .rb-cta .wp-block-kadence-spacer,
  .rb-cta .kt-block-spacer,
  .rb-dark .wp-block-spacer,
  .rb-dark .wp-block-kadence-spacer { display: none !important; }
  .rb-cta .rb-section-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }
  .rb-cta .wp-block-columns { gap: 24px !important; }
  .rb-cta::after { width: 200px; right: -60px; }

  /* De streeptextuur staat op brede schermen als los vlak naast de kop.
     Op mobiel stapelen kolommen, en dan schuift dat vlak met zijn vaste
     hoogte tussen kop en knop. Kolommen zonder tekst of knop doen op
     mobiel niet mee, en vaste hoogtes vervallen. */
  .rb-cta .wp-block-column:not(:has(h1, h2, h3, h4, p, a, .wp-block-button, .wp-block-buttons)) {
    display: none !important;
  }
  .rb-cta [style*="min-height"],
  .rb-cta .wp-block-column,
  .rb-cta .wp-block-group {
    min-height: 0 !important;
  }
}

/* 3.17 — Footer strakker: minder verticale ruimte in en tussen de rijen,
   op alle formaten. */
/* 3.19 — In 3.18 kregen geneste lagen elk hun eigen ruimte en telde dat
   op tot meer in plaats van minder. Nu draagt alleen de rij zelf de
   ruimte; de lagen eromheen staan op nul. */
.site-footer .site-footer-row,
#colophon .site-footer-row {
  padding-top: 28px !important;
  padding-bottom: 28px !important;
}

/* 3.23 — De rij met alleen de social-icoontjes is decoratief; die hoeft
   geen sectieruimte te dragen. Gemeten: 110px hoog waarvan 72px padding. */
#colophon .site-middle-footer-wrap .site-footer-row {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

/* Het footerlogo bepaalt mee de hoogte van de bovenste rij; begrensd
   zodat kolom één niet langer is dan de menukolommen. */
.site-footer .widget img,
.site-footer figure img {
  max-width: 220px;
  height: auto;
}
#colophon .site-footer-row-container-inner,
#colophon .site-footer-row-container-inner > .site-container {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.site-footer .widget { margin-bottom: 0; }
.site-footer .site-bottom-footer-wrap .site-footer-row {
  padding-top: 14px !important;
  padding-bottom: 14px !important;
}
@media (max-width: 781px) {
  .site-footer .site-footer-row {
    padding-top: 28px !important;
    padding-bottom: 28px !important;
  }
}

/* ---------- Aansluiting op de footer ---------- */

/* 3.15 — Kadence reserveert ruimte onder de inhoud, op de wikkel om de
   pagina heen. Bij pagina's die eindigen met een gekleurde sectie werd dat
   een witte strook boven de footer. De secties leveren hun eigen ruimte via
   padding, dus die van de wikkel kan weg. */
.page #primary,
.page .content-area,
.page .site-main,
.page #inner-wrap,
.page .entry-content-wrap,
.page .single-content,
.page .entry-content,
.page .entry {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

/* Ook de ruimte boven, voor pagina's die met een hero beginnen. */
.page .entry-content-wrap,
.page .single-content {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* ---------- Tekstpagina ---------- */

/* 3.14 — Leeskolom voor tekstpagina's: privacyverklaring, voorwaarden en
   dergelijke. Smaller dan de volle breedte, want lange regels lezen slecht.
   Tussenkoppen krijgen lucht erboven zodat de tekst niet dichtslibt. */
.rb-tekst h2 {
  font-size: 30px;
  margin-top: 56px;
  margin-bottom: 12px;
}
.rb-tekst h2:first-child { margin-top: 0; }

.rb-tekst h3 {
  font-size: 22px;
  margin-top: 40px;
  margin-bottom: 8px;
}

.rb-tekst p,
.rb-tekst li { max-width: 68ch; }
.rb-tekst ul { margin: 12px 0 20px; padding-left: 20px; }
.rb-tekst li { margin-bottom: 6px; }

.rb-tekst a { color: var(--rb-oranje); }

/* ---------- Formulier (Contact Form 7) ---------- */

/* 3.13 — Velden in de huisstijl: strakke randen, oranje bij focus,
   verzendknop met afgesneden hoek zoals de andere knoppen. */
.rb-form { margin-top: 32px; }

.rb-form label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--rb-zwart);
  margin-bottom: 24px;
}

.rb-form-rij { display: flex; gap: 24px; }
.rb-form-rij > label { flex: 1 1 0; }

.rb-form input[type="text"],
.rb-form input[type="email"],
.rb-form input[type="tel"],
.rb-form textarea {
  width: 100%;
  margin-top: 8px;
  padding: 13px 14px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--rb-zwart);
  background: #fff;
  border: 1px solid #d5d5d3;
  border-radius: 0;
}

.rb-form textarea { min-height: 160px; resize: vertical; }

.rb-form input:focus,
.rb-form textarea:focus {
  outline: none;
  border-color: var(--rb-oranje);
  box-shadow: inset 0 -2px 0 var(--rb-oranje);
}

.rb-form input[type="submit"] {
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--rb-wit);
  background: var(--rb-oranje);
  border: 0;
  border-radius: 0;
  padding: 15px 34px;
  cursor: pointer;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
  transition: background .25s var(--rb-ease);
}
.rb-form input[type="submit"]:hover { background: #c96a02; }

/* Meldingen van de plugin */
.rb-form .wpcf7-not-valid-tip { color: #c0392b; font-size: 13px; text-transform: none; letter-spacing: 0; }
.rb-form .wpcf7-response-output {
  margin: 24px 0 0;
  padding: 14px 16px;
  border: 1px solid #d5d5d3;
  font-size: 15px;
}

@media (max-width: 781px) {
  .rb-form-rij { flex-direction: column; gap: 0; }
}
.rb-project .rb-project-foto a { display: block; }
.rb-project p { font-size: 15px; color: #d4d4d4; margin-top: 6px; }
.rb-meta {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rb-zwart);
  background: var(--rb-oranje);
  padding: 3px 10px;
}

/* ---------- Statistiekkaarten (Remabuild in het kort) ---------- */

.rb-stat {
  border: 1px solid var(--rb-lijn);
  border-top: 4px solid var(--rb-oranje);
  padding: 34px 24px 30px;
  text-align: center;
  height: 100%;
  background: var(--rb-wit);
}
.rb-stat .rb-stat-getal {
  display: block;
  font-family: 'Big Shoulders Display', 'Archivo', sans-serif;
  font-weight: 800;
  font-size: clamp(44px, 5vw, 64px);
  line-height: 1;
  color: var(--rb-oranje);
  margin-bottom: 12px;
}
.rb-stat p { font-size: 15px; color: #3c3c3c; margin: 0; }
.rb-dark .rb-stat { background: var(--rb-zwart-2); border-color: var(--rb-lijn-donker); border-top-color: var(--rb-oranje); }
.rb-dark .rb-stat p { color: #b9b9b9; }

/* ---------- Portret (zaakvoerder) ---------- */

.rb-portret img {
  aspect-ratio: 4/5;
  object-fit: cover;
  width: 100%;
  filter: grayscale(.2);
}
.rb-portret figure { border-bottom: 4px solid var(--rb-oranje); margin: 0; }

/* ---------- Contactblok ---------- */

.rb-info-box {
  background: var(--rb-zwart) !important;
  color: var(--rb-wit);
  padding: 38px 34px;
  border-top: 4px solid var(--rb-oranje);
}
.rb-info-box h3 { color: var(--rb-wit); margin-bottom: 22px; }
.rb-info-box p { color: #dedede; }
.rb-info-box a { color: var(--rb-wit); }
.rb-label {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rb-oranje) !important;
  margin-bottom: 3px;
}

/* Formuliervelden */
.entry-content input[type="text"],
.entry-content input[type="email"],
.entry-content input[type="tel"],
.entry-content textarea {
  width: 100%;
  padding: 14px 16px;
  font: inherit;
  font-size: 16px;
  border: 1px solid #c9c6c0;
  border-radius: 0;
  background: var(--rb-wit);
  transition: border-color .15s, box-shadow .15s;
}
.entry-content input:focus,
.entry-content textarea:focus {
  border-color: var(--rb-oranje);
  outline: none;
  box-shadow: 0 0 0 3px rgba(226,122,4,.16);
}
.entry-content textarea { min-height: 160px; resize: vertical; }
.entry-content label {
  display: block;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: 7px;
}

/* ---------- CTA-band ---------- */

.rb-cta {
  position: relative;
  background: var(--rb-zwart) !important;
  color: var(--rb-wit);
  overflow: hidden;
}
.rb-cta::after {
  content: "";
  position: absolute;
  right: -80px; top: -40px; bottom: -40px;
  width: 340px;
  background: repeating-linear-gradient(-52deg, var(--rb-oranje) 0 22px, transparent 22px 48px);
  opacity: .15;
  pointer-events: none;
}
.rb-cta > * { position: relative; z-index: 1; }
.rb-cta h2 { margin-bottom: 0; color: var(--rb-wit); }
:where(.rb-cta h2) { font-size: clamp(32px, 5vw, 64px); }
.rb-cta .rb-btn-ghost .wp-block-button__link { border-color: var(--rb-oranje); }

/* Kop en knop naast elkaar, verticaal gecentreerd */
.rb-cta .rb-section-head {
  align-items: center;
  margin-bottom: 0;
  gap: 30px;
}
.rb-cta .rb-section-head > h2 { flex: 1 1 320px; }

/* Knop in de headerbalk (toevoegen via Customizer -> Header -> Button) */
.site-header .header-button,
.site-header .button {
  background: var(--rb-oranje);
  color: var(--rb-zwart);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  border: none;
  border-radius: 0 !important;
  clip-path: polygon(8px 0, 100% 0, 100% 100%, 0 100%, 0 8px);
  padding: 12px 20px;
}
.site-header .header-button:hover,
.site-header .button:hover {
  background: var(--rb-oranje-hover);
  color: var(--rb-zwart);
}

/* ---------- Header ----------
   De kleur van de header stel je in via Customizer → Header → Main Row.
   Het thema voegt alleen het oranje streepje onder menu-items toe. */

.site-header .header-navigation .menu-item > a { position: relative; }
.site-header .header-navigation .menu-item > a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 12px;
  height: 2px;
  background: var(--rb-oranje);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s var(--rb-ease);
}
.site-header .header-navigation .menu-item > a:hover::after,
.site-header .header-navigation .current-menu-item > a::after { transform: scaleX(1); }

/* ---------- Footer ---------- */

.site-footer {
  background: #0d0d0d;
  color: #a8a8a8;
  font-size: 15px;
  border-top: 1px solid var(--rb-lijn-donker);
}
.site-footer h2, .site-footer h3, .site-footer h4 {
  color: var(--rb-wit);
  font-size: 19px;
  letter-spacing: .05em;
  margin-bottom: 14px;
}
.site-footer a { color: #a8a8a8; text-decoration: none; transition: color .15s; }
.site-footer a:hover { color: var(--rb-oranje); }
.site-footer li { margin-bottom: 9px; }

/* ---------- Links in lopende tekst ---------- */

.entry-content a:not(.wp-block-button__link):not(.kt-button):not(.rb-more) {
  color: var(--rb-oranje-diep);
  text-underline-offset: 3px;
}
.rb-dark .entry-content a:not(.wp-block-button__link) { color: var(--rb-oranje); }

/* ---------- Toegankelijkheid ---------- */

:focus-visible { outline: 3px solid var(--rb-oranje); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
  .rb-reveal { opacity: 1 !important; transform: none !important; }
}

/* ---------- Mobiel ---------- */

@media (max-width: 940px) {
  .rb-section { padding: 72px 0; }
}

@media (max-width: 640px) {
  .rb-card { padding: 26px 22px 24px; }
  .rb-section-head { flex-direction: column; align-items: flex-start; }
  .rb-hero-strip p { font-size: 12px; }
}

/* ==========================================================================
   3.22 — Slotblok, onderaan zodat het altijd wint. Omgekeerde aanpak:
   niet langer specifieke boosdoeners verbergen, maar vastleggen wat er
   WEL mag bestaan. Al het andere in deze secties telt niet meer mee,
   wat het ook is — leeg blok, afstandhouder, kapotte afbeelding of
   element met vaste hoogte.
   ========================================================================== */

/* Restafval dat nergens iets zinvols doet. */
.entry-content p:empty,
.site-footer p:empty,
.widget p:empty,
.site-footer .wp-block-spacer,
.site-footer .wp-block-kadence-spacer,
.site-footer .kt-block-spacer {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Vaste hoogtes uit de import doen niet meer mee, waar ze ook staan. */
.rb-cta [style*="height"],
.site-footer .widget [style*="height"] {
  height: auto !important;
  min-height: 0 !important;
}

/* Footer: ruimte tussen blokken in een widget is voortaan begrensd,
   ongeacht wat de blokken zelf meebrengen. */
.site-footer .widget > *,
.site-footer .widget .wp-block-group > * {
  margin-top: 0 !important;
  margin-bottom: 16px !important;
}
.site-footer .widget > *:last-child,
.site-footer .widget .wp-block-group > *:last-child {
  margin-bottom: 0 !important;
}
.site-footer figure { margin: 0 0 16px !important; }

@media (max-width: 781px) {
  .rb-cta {
    padding: 48px 20px !important;
    min-height: 0 !important;
  }

  /* Alleen kop, tekst en knop bestaan nog in de band; elk ander element
     — bekend of onbekend — wordt uitgeschakeld. */
  .rb-cta > *:not(.rb-section-head):not(h1):not(h2):not(h3):not(p):not(.wp-block-buttons) {
    display: none !important;
  }
  .rb-cta .rb-section-head > *:not(h1):not(h2):not(h3):not(p):not(.wp-block-buttons) {
    display: none !important;
  }

  .rb-cta .rb-section-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    min-height: 0 !important;
  }

  /* 3.23 — DE oorzaak van de hoge band op mobiel. De h2 heeft voor de
     brede weergave flex-basis 320px (daar: breedte). Zodra de richting
     op kolom staat, wordt diezelfde 320px een HOOGTE en blaast de kop
     de sectie op. Hier terug naar zijn natuurlijke maat. */
  .rb-cta .rb-section-head > h2 {
    flex: 0 1 auto !important;
    min-height: 0;
  }
  .rb-cta::after {
    width: 200px;
    right: -60px;
    top: 0;
    bottom: 0;
  }
  .rb-hero .wp-block-cover__background,
  .rb-hero .wp-block-cover__gradient-background {
    opacity: 0.45 !important;
  }
}

/* ---------- 3.24 — Tekstpagina: leeskolom links vastzetten ---------- */

/* WordPress centreert blokken die smaller zijn dan hun sectie. De alinea's
   van de leeskolom (3.14) kregen een maximale breedte, maar geen vaste
   linkerkant — daardoor schoven ze naar het midden terwijl de koppen links
   bleven staan. Hier links vastgezet, zoals dat bij .rb-intro en .rb-lead
   al gebeurde. */
.rb-tekst p,
.rb-tekst li,
.rb-tekst ul {
  margin-left: 0 !important;
  margin-right: auto !important;
}
.rb-tekst ul { padding-left: 20px; }

/* ---------- 3.28 — Topmenu: kleurwissel in plaats van streepje ---------- */

/* Het oranje hover-streepje is gemaakt voor de hoge hoofdrij (12px boven de
   onderkant van de link); in de smalle toprij valt dat midden door de tekst
   en oogt het als doorstreping. Voor het topmenu dus geen streepje maar een
   kleurwissel. */
.site-header .secondary-navigation .menu-item > a::after {
  display: none;
}
.site-header .secondary-navigation .menu-item > a:hover {
  color: var(--rb-oranje);
}

/* ---------- 3.45 — Eén tekstlijn sitebreed (gemeten op de echte pagina's) ---------- */

/* 1) Alles wat rechtstreeks in een sectie staat (kicker, titel, tekstgroep,
   kaartenrij, galerij) komt op de standaard 1240-lijn — ook wanneer de
   sectie zelf per ongeluk op een smallere blokbreedte is gezet. */
.entry-content > .wp-block-group.alignfull > :where(:not(.alignfull)),
.entry-content > .wp-block-group.alignwide > :where(:not(.alignfull)) {
  max-width: 1240px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* 2) Tekst binnen geneste groepen: leesbreedte blijft, maar begint links
   op die lijn in plaats van gecentreerd in de sectie. */
.entry-content .wp-block-group .wp-block-group > :where(p, h3, h4, ul, ol) {
  margin-left: 0 !important;
}

/* ---------- 3.47 — Header: logo in eigen linkerkolom ---------- */
/* Integraal overgenomen uit Extra CSS (door Berre live afgesteld).
   Drie stelknoppen: BREEDTE kolom, LINKS positie, LOGO maat. */
@media (min-width: 1025px) {

  .site-header { position: relative; }

  /* 1) ruimte vrijmaken links van beide rijen — BREEDTE kolom */
  .site-header .site-top-header-wrap,
  .site-header .site-main-header-wrap {
    padding-left: 0px;
  }

  /* 2) logo uit de rij tillen en in die zone zetten */
  .site-header .site-branding {
    position: absolute;
    top: 35;
    bottom: 20;
    left: 110px;          /* LINKS positie */
    display: flex;
    align-items: center;
    z-index: 20;
  }

  /* 3) logogrootte — dé maatknop, hier en nergens anders */
  .site-header .site-branding img {
    max-width: 285px;    /* LOGO maat */
    height: auto;
  }
}

/* ---------- 3.47 — Tekstbreedte sitebreed ---------- */
/* Alle lopende tekst (alinea's en lijsten) op één leesbreedte, links op
   de 1240-kolomlijn van de titels; in smalle vakken (kaarten, groepen)
   geeft de berekening vanzelf nul en verandert er niets. Zwaarder
   geschreven dan de 3.45-regel hierboven, zodat deze wint voor tekst.
   Stelwaarde: max-width (80ch = ±860px; hoger = breder). */
.entry-content p:not(.rb-kicker):not(.rb-lead),
.entry-content ul:not(.rb-kicker):not(.rb-lead),
.entry-content ol:not(.rb-kicker):not(.rb-lead) {
  max-width: 80ch !important;
  margin-left: max(0px, calc((100% - 1240px) / 2)) !important;
  margin-right: auto !important;
}