/**
 * RMI template-consistentie (los override-bestand, laadt NA main.css).
 *
 * Trekt rmi.nl, rbc-terminal.com en cetem.nl gelijk met de referentie-implementatie
 * op rcc-containers.com. Bewust een apart bestand: er staat geen SCSS-build op de
 * server, dus main.css hercompileren is geen veilige optie. Kan later netjes in
 * _bootscore-custom.scss worden opgenomen zodra de rmi-rcc bronrepo weer leidend is.
 *
 * Aangemaakt 2026-08-11 naar aanleiding van de feedback van Kasper Bout (RMI/RCC):
 * "stilistisch moet alles overeenkomen, alleen de webshop-module wijkt af".
 */

/* ============================================================
   1. Blok-achtergrond "Wit"
   De regel stond uitgecommentarieerd in _bootscore-custom.scss, waardoor de
   keuze "Wit" een class zonder opmaak opleverde. Blokken slaan de waarde
   inconsistent op als 'white' of 'regular', dus beide afvangen. Gelijk aan de
   regel die op RCC al actief is.
   ============================================================ */
.block.bg-color-white,
.bg-color-white,
.block.bg-color-regular,
.bg-color-regular {
  background: #ffffff !important;
}

/* ============================================================
   2. FAQ-accordion
   Hoort bij de nieuwe faq.php / faq-contact.php. De oude opmaak zette de pijl
   absoluut op top:-5px, waardoor hij tot tientallen pixels boven het midden van
   de vraag hing zodra die over twee regels liep (en dat is bij vrijwel elke
   vraag zo). Kop en pijl staan nu naast elkaar op een flex-rij, het antwoord
   staat eronder als apart element.
   ============================================================ */
.block-faq .accordion .accordion-item .accordion-header,
.block-contact-faq .accordion .accordion-item .accordion-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  column-gap: 1em;
  /* Geen row-gap: op de vacaturepagina staat het antwoordpaneel binnen de
     header (zie de laatste sectie van dit bestand). De 1em row-gap telde
     daar op bij de 16px padding-top van .accordion-body, samen 40px lucht
     tussen vraag en antwoord. Nu 24px. 31-08 */
  row-gap: 0;
  width: 100%;
  position: static;
  cursor: pointer;
}

.block-faq .accordion .accordion-item .accordion-header h3,
.block-faq .accordion .accordion-item .accordion-header .h3,
.block-contact-faq .accordion .accordion-item .accordion-header h3,
.block-contact-faq .accordion .accordion-item .accordion-header .h3 {
  flex: 1 1 auto;
  min-width: 0;
  width: auto !important;
  margin-bottom: 0;
  /* Vraag in gewone tekstgrootte. Als kop was hij 1,5rem en dat oogde als een
     titel in plaats van als een vraag in een lijst. */
  font-size: 1rem !important;
  line-height: 1.45;
}

.block-faq .accordion .accordion-item .btn,
.block-contact-faq .accordion .accordion-item .btn {
  position: static;
  right: auto;
  top: auto;
  flex: 0 0 40px;
  padding: 0;
  border-radius: 100%;
  border: 2px solid #e30613;
  height: 40px;
  width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease-in-out;
}

.block-faq .accordion .accordion-item .btn i,
.block-contact-faq .accordion .accordion-item .btn i {
  color: #e30613;
  transition: all 0.3s ease-in-out;
}

/* De open-staat hangt aan de kop, want daar zit de schakelaar op. */
.block-faq .accordion .accordion-item .accordion-header[aria-expanded="true"] .btn,
.block-contact-faq .accordion .accordion-item .accordion-header[aria-expanded="true"] .btn {
  background: #e30613;
}

.block-faq .accordion .accordion-item .accordion-header[aria-expanded="true"] .btn i,
.block-contact-faq .accordion .accordion-item .accordion-header[aria-expanded="true"] .btn i {
  color: #ffffff;
  transform: rotate(180deg);
  transition: all 0.3s ease-in-out;
}

.block-faq .accordion .accordion-item .accordion-body,
.block-contact-faq .accordion .accordion-item .accordion-body {
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 0;
}

/* Toetsenbordbediening: de kop is nu de knop, dus die moet een zichtbare focus
   houden. Zonder dit verdwijnt de focusring omdat het geen <button> meer is. */
.block-faq .accordion .accordion-item .accordion-header:focus-visible,
.block-contact-faq .accordion .accordion-item .accordion-header:focus-visible {
  outline: 2px solid #e30613;
  outline-offset: 3px;
}

/* ============================================================
   3. Ronde foto's en cirkels weg
   Overgenomen uit rcc-consistency.css. Kasper op 24-07: "We willen geen ronde
   foto's en cirkels op de websitepagina's, maar de blokken met afrondingen."
   ============================================================ */
.block-content .image,
.block-content-cta .image {
  aspect-ratio: 3 / 2 !important;
  border-radius: 20px !important;
}

.block-content svg.shape,
.block-content-cta svg.shape {
  display: none !important;
}

/* ============================================================
   4. USP-bar
   Items verticaal centreren, zodat een USP die over twee regels loopt uitlijnt
   met de USP's van één regel. Dit is de uitlijningsfix die op RCC en RBC al is
   doorgevoerd; hoort bij de usp-bar.php met col-md auto-kolommen.
   ============================================================ */
.block-usp-bar .row {
  align-items: center;
}

/* --- Chips (categorie/datum) uitlijnen, 19-08-2026 ---------------------------
   main.css geeft de icoontjes een vaste breedte (25px in de header, 20px in de
   grids) terwijl het glyph circa 16px is. Die slack was de extra witruimte.
   En de chip was geen flexcontainer, dus icoon en tekst lijnden op de
   tekstbasislijn in plaats van op het midden. -------------------------------- */
.block-header .tags span,
.block-posts-grid .tags span,
.block-posts-carousel .tags span,
.block-related-posts-carousel .tags span {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
}

.block-header .tags i,
.block-posts-grid .tags i,
.block-posts-carousel .tags i,
.block-related-posts-carousel .tags i {
  width: auto;
  min-width: 0;
  line-height: 1;
  flex: none;
}

/* --- Single nieuws/case, nagelopen 19-08-2026 --------------------------------
   Alle regels hier zijn gescoped op .single zodat overzichtspagina's en
   overige blokken ongemoeid blijven. -------------------------------------- */

/* Leesregel. .entry-content zat in een col-12 binnen de 1320px container, dus
   ruim 120 tekens per regel. Tabellen en media mogen de volle breedte houden. */
.single .entry-content {
  max-width: 72ch;
}

.single .entry-content .wp-block-table,
.single .entry-content .wp-block-image,
.single .entry-content .wp-block-embed,
.single .entry-content .alignwide,
.single .entry-content .alignfull,
.single .entry-content .custom-share-buttons {
  max-width: none;
}

/* body heeft word-break:break-word, waardoor woorden midden afgebroken werden.
   overflow-wrap breekt alleen wat echt niet past. */
.single .entry-content,
.single .entry-content p,
.single .entry-content li,
.single .entry-content h2,
.single .entry-content h3,
.single .entry-content h4 {
  word-break: normal;
  overflow-wrap: break-word;
}

/* Tabellen. wp-block-library wordt op deze sites niet ingeladen, dus een
   Gutenberg-tabel kreeg nul opmaak en nul overflow: op mobiel werden de
   kolommen platgedrukt. De figure is de scrollcontainer, de tabel mag breder. */
.single .entry-content .wp-block-table {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 1.5rem;
}

.single .entry-content table {
  width: auto;
  min-width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.single .entry-content table th,
.single .entry-content table td {
  padding: 0.6rem 0.9rem;
  border: 1px solid #dee2e6;
  vertical-align: top;
  text-align: left;
  word-break: normal;
  overflow-wrap: break-word;
}

.single .entry-content table thead th {
  background: #f9f9f6;
  font-weight: 600;
  white-space: nowrap;
}

.single .entry-content table tbody tr:nth-child(even) td {
  background: rgba(0, 0, 0, 0.02);
}

/* Losse tabel zonder figure-wrapper (klassieke editor): dan moet de tabel
   zelf de scrollcontainer zijn. */
.single .entry-content > table {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Titel in de header. main.css zet <=991px op 2.613em (circa 42px), dat is op
   een telefoon te groot en breekt rommelig. */
@media (max-width: 575.98px) {
  .single .block-header h1 {
    font-size: 1.9rem;
    letter-spacing: 0;
  }

  .single .block-header .breadcrumb {
    font-size: 0.875rem;
  }
}

/* Deelknoppen. De titel was een float zonder clearfix, dus de knoppenrij liep
   ernaast en de volgende alinea kon eronder schuiven. Flex lost beide op. */
.single .custom-share-buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
}

.single .custom-share-buttons .share-buttons-title {
  float: none;
  margin-right: 0;
  margin-bottom: 0;
  line-height: 1.4;
}

.single .custom-share-buttons .share-buttons-title p {
  margin-bottom: 0;
}

.single .custom-share-buttons .share-buttons-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* Zichtbare bevestiging bij "link kopieren", in plaats van de oude alert. */
.single .share-button.copy-link.is-copied {
  background-color: #198754 !important;
  border-color: #198754 !important;
  color: #fff !important;
}

.single .share-button.copy-link.is-copied i::before {
  content: "\f00c";
}

/* Toetsenbordfocus zichtbaar houden op de deelknoppen. */
.single .custom-share-buttons .share-button:focus-visible {
  outline: 2px solid #e30613;
  outline-offset: 2px;
}

/* Witruimte onder de berichtinhoud. Deze marge zit op de contentkolom zelf en
   niet op het gerelateerde blok, want dat blok rendert niet als er geen
   gerelateerd nieuws is; dan plakte de tekst tegen de footer.
   50px is gelijk aan de marge boven de deelknoppen (.custom-share-buttons). */
.single #primary {
  margin-bottom: 50px;
}

/* De 100px padding van het gerelateerde blok zit binnen de gekleurde band, dus
   de band zelf plakte tegen de footer. De ruimte erboven komt van #primary.
   Geen margin-shorthand gebruiken: .width-100 zet margin-left op -50vw. */
.single .block-posts-carousel {
  margin-top: 0;
  margin-bottom: 3rem;
}

@media (max-width: 767.98px) {
  .single .block-posts-carousel {
    margin-bottom: 2rem;
    padding-top: 60px;
    padding-bottom: 60px;
  }
}

/* ---------------------------------------------------------------------------
   Sticky contactkaart naast het artikel (single.php).
   De contentkolom is col-lg-8, deze kaart col-lg-4. Onder lg stapelt de kaart
   onder het artikel. Ancestors hebben geen overflow-regel, dus position:sticky
   pakt hier gewoon. top = hoogte van de sticky header (75-81px over de sites)
   plus wat lucht. -------------------------------------------------------- */
.single .single-aside {
  margin-top: 2rem;
}

@media (min-width: 992px) {
  /* De contentkolom begint met de deelknoppen; de kaart lijnt uit met de eerste
     alinea eronder in plaats van met die knoppenrij. 7rem = knoppenrij (40px)
     plus de 50px marge erboven plus de alineamarge. */
  .single .single-aside {
    margin-top: 7rem;
  }

  .single .single-aside .contact-card {
    position: sticky;
    top: 1.5rem;
  }
}

/* Vormtaal overgenomen van het eigen paneel van het thema
   (.contact-detail-block op de contactpagina): zelfde vulling, geen rand,
   radius 20px, padding 24px. */
.single .contact-card {
  background: #f9f9f6;
  border: 0;
  border-radius: 20px;
  padding: 1.5rem;
}

.single .contact-card-title {
  font-size: 1.25rem;
  line-height: 1.3;
  margin-bottom: 0.5rem;
}

.single .contact-card-intro {
  font-size: 0.9375rem;
  margin-bottom: 1.25rem;
}

.single .contact-card-items {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
}

.single .contact-card-items li + li {
  margin-top: 0.75rem;
}

.single .contact-card-items a {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.9375rem;
  line-height: 1.5;
  text-decoration: none;
  color: inherit;
  word-break: normal;
  overflow-wrap: anywhere;
}

.single .contact-card-items a:hover,
.single .contact-card-items a:focus-visible {
  color: var(--bs-primary);
  text-decoration: underline;
}

/* Vaste icoonkolom, zodat de tekstregels netjes onder elkaar uitlijnen. */
.single .contact-card-items i {
  flex: 0 0 1.25rem;
  width: 1.25rem;
  text-align: center;
  margin-top: 0.15rem;
  color: var(--bs-primary);
}

.single .contact-card-btn {
  display: inline-flex;
  align-items: center;
}

.single .contact-card-items a:focus-visible,
.single .contact-card-btn:focus-visible {
  outline: 2px solid var(--bs-primary);
  outline-offset: 2px;
}

/* .site heeft overflow: hidden. Daardoor is .site de scrollport voor
   position: sticky en plakt de kaart nergens. overflow: clip klipt precies
   hetzelfde, maar maakt geen scrollcontainer. Alleen op .single. */
.single .site {
  overflow: clip;
}

/* Diezelfde overflow-regel zet ook de sticky-top header van het thema vast in
   niets: die scrollt overal in de site gewoon weg. Expliciet relative houden,
   zodat een nieuwsbericht zich niet anders gaat gedragen dan de rest van de
   site nu de clip-regel dat wel mogelijk zou maken. */
.single #masthead {
  position: relative;
  /* Het thema zet top:32px voor de adminbalk. Bij sticky is dat pas actief zodra
     de header plakt; bij relative duwt het de header meteen 32px omlaag: gat onder
     de topbar en 32px overlap op de hero. Alleen ingelogde beheerders zien dat. */
  top: auto;
}

/* Ingelogde beheerders hebben een vaste adminbalk van 32px bovenaan; zonder
   deze offset schuift de kaart daaronder. Bezoekers zien dit niet. */
@media (min-width: 992px) {
  body.admin-bar.single .single-aside .contact-card {
    top: calc(1.5rem + 32px);
  }
}

/* ---------------------------------------------------------------------------
   CTA-bar onder het artikel, boven het gerelateerde nieuws.
   Erft rood, witte tekst en de radius van .block-cta uit main.css. Die bar
   staat elders in een volle-breedte context; hier zit hij binnen #content
   .container, dus horizontale padding hoort erbij en een eigen .container
   erbinnen niet. ---------------------------------------------------------- */
/* Géén padding-bottom op #content. De rest van de site laat het laatste blok
   vlak tegen de footer aanlopen (homepage: padding 0, gat 0), en de ronde hoek
   doet daar het werk. Hier draagt de CTA-bar die hoek en is de footer vlak, dus
   bar en footer vormen samen één doorlopende vorm. De witruimte tussen artikel
   en bar komt van .single #primary { margin-bottom: 50px }. */

/* Twee gekleurde banden achter elkaar hebben onderling ook lucht nodig; het
   gerelateerde blok heeft van zichzelf margin-top 0. */
.single .single-cta-bar + .block-posts-carousel {
  margin-top: 50px;
}

/* Datzelfde blok heeft wel margin-bottom 48px, en die komt bovenop de 50px
   padding van #content: dan is de witruimte naar de footer 98px terwijl hij
   elders 50px is. Alleen binnen .single weghalen, het nieuwsoverzicht en de
   homepage gebruiken dit blok ook. */
.single .block-posts-carousel {
  margin-bottom: 0;
}

/* main.css maakt p, span, li en a wit binnen .block-cta, maar de koppen niet. */
.single .single-cta-bar .subtitle,
.single .single-cta-bar .title {
  color: #fff;
}

.single .single-cta-bar .title {
  margin-bottom: 0.5rem;
}

.single .single-cta-bar p {
  margin-bottom: 0;
  max-width: 60ch;
}

.single .single-cta-bar-action {
  display: flex;
  margin-top: 1.5rem;
}

@media (min-width: 992px) {
  .single .single-cta-bar-action {
    margin-top: 0;
    justify-content: flex-end;
  }
}

/* Knop in dezelfde pill-vorm als btn-primary, maar omgekeerd: op rood moet de
   rand wit zijn, want een rode rand is daar onzichtbaar. */
.single .single-cta-bar-btn {
  display: inline-flex;
  align-items: center;
  border: 2px solid #fff;
  border-radius: 1000px;
  background: transparent;
  color: #fff;
}

.single .single-cta-bar-btn:hover,
.single .single-cta-bar-btn:focus-visible {
  background: #fff;
  color: var(--bs-primary);
}

.single .single-cta-bar-btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

@media (max-width: 575.98px) {
  .single .single-cta-bar {
    border-top-right-radius: 50px;
  }
}

/* De bar staat op width-custom (98vw), net als de footer, zodat hun randen
   uitlijnen. De ronde hoek zit dan al op de bar, dus de footer eronder moet
   vlak zijn: twee ronde hoeken van 100px vlak boven elkaar is dubbelop.
   Alleen op nieuwsberichten, de rest van de site houdt de ronde footer. */
.single footer.bootscore-footer {
  border-top-right-radius: 0;
}

/* ---------------------------------------------------------------------------
   Navknoppen Offerte en Contact in het groen (#1EAF23).
   De rode #e30613 zit hardgecodeerd in main.css op .btn-cta en .btn-cta-filled,
   op 11 plekken, en main.css gebruikt daar zelf !important (onder meer op
   current_page_item en op de hover van de gevulde knop). Daarom hier ook, maar
   alleen op de kleureigenschappen.
   Gescoped op .navbar-nav: de knop op /bedankt/ (thanks.php) gebruikt dezelfde
   klasse btn-cta-filled en moet rood blijven. ---------------------------- */
.navbar-nav .menu-item.btn-cta {
  border-color: #1EAF23 !important;
}

.navbar-nav .menu-item.btn-cta a,
.navbar-nav .menu-item.current_page_item.btn-cta a {
  color: #1EAF23 !important;
}

.navbar-nav .btn:hover.btn-cta {
  background-color: #1EAF23 !important;
  border-color: #1EAF23 !important;
}

.navbar-nav .btn:hover.btn-cta a,
.navbar-nav .menu-item.current_page_item.btn-cta:hover a {
  color: #fff !important;
}

.navbar-nav .menu-item.btn-cta-filled,
.navbar-nav .btn:hover.btn-cta-filled {
  background-color: #1EAF23 !important;
  border-color: #1EAF23 !important;
}

/* De tekstkleur van de gevulde knop hing in main.css alleen aan
   #menu-item-298 a. Raakt de klant dat menu-item kwijt bij een menuwijziging,
   dan valt de tekst terug op het nav-link-grijs van Bootstrap, op groen.
   Daarom hier op de klasse. De hover zat al wel op de klasse. */
.navbar-nav .menu-item.btn-cta-filled a {
  color: #fff !important;
}

/* ============================================================
   Blok "Quote Tekst" (rmi/quote-tekst) — uitgerold 20-08-2026
   ------------------------------------------------------------
   Het blok kwam van rcc-containers.com en zijn opmaak zat daar in
   _bootscore-custom.scss. Er staat geen SCSS-build op de server, dus
   staan de gecompileerde regels hier, letterlijk overgenomen uit
   RCC's main.css zodat het blok op alle vier de sites hetzelfde doet.
   De basis .quote-col staat al in main.css met de eigen merkkleur;
   hieronder alleen de --image-variant en zijn BEM-kinderen.
   Let op: de gradient hieronder is rgba(71,3,0), RCC's donkerrode
   tint. Puur voor leesbaarheid van de tekst op de foto. Wil je die
   per site in de eigen kleur, dan is dat de enige regel die je hoeft
   aan te passen.
   ============================================================ */
.block-content .quote-col--image,.block-content-cta .quote-col--image{background:transparent;padding:0}
.block-content .quote-col--image .quote-col__img-wrap,.block-content-cta .quote-col--image .quote-col__img-wrap{position:relative;border-radius:20px;overflow:hidden}
.block-content .quote-col--image .quote-col__img-wrap img,.block-content-cta .quote-col--image .quote-col__img-wrap img{width:100%;height:360px;object-fit:cover;display:block}
.block-content .quote-col--image .quote-col__img-wrap .quote-col__overlay,.block-content-cta .quote-col--image .quote-col__img-wrap .quote-col__overlay{position:absolute;bottom:0;left:0;right:0;padding:2rem 1.5rem 1.5rem;background:linear-gradient(to top, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%)}
.block-content .quote-col--image .quote-col__img-wrap .quote-col__text,.block-content-cta .quote-col--image .quote-col__img-wrap .quote-col__text{font-family:"Montserrat", sans-serif;font-size:1rem;font-weight:600;font-style:italic;color:white;line-height:1.5;margin-bottom:0.5em;border:none;padding:0}
.block-content .quote-col--image .quote-col__img-wrap .quote-col__attribution,.block-content-cta .quote-col--image .quote-col__img-wrap .quote-col__attribution{font-family:"Montserrat", sans-serif;font-size:0.875rem;font-weight:300;font-style:italic;color:rgba(255, 255, 255, 0.85);margin-bottom:0}
.block-content.layout-quote_text .content-col,.block-content-cta.layout-quote_text .content-col{border-radius:20px}
.quote-col--image{background:none !important;padding:0 !important}
.quote-col--image .quote-col__img-wrap{position:relative;border-radius:20px;overflow:hidden;max-width:597px;width:597px}
.quote-col--image .quote-col__img-wrap img{width:100%;height:430px;object-fit:cover;display:block}
.quote-col--image .quote-col__img-wrap::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg, rgba(71, 3, 0, 0.75) 0%, rgba(71, 3, 0, 0.2) 100%);border-radius:20px}
.quote-col--image .quote-col__overlay{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2em;text-align:center}
.quote-col--image .quote-col__text{font-size:1.5rem;font-weight:600;color:#fff;line-height:1.4;border:none;margin:0 0 1.5em;padding:0}
.quote-col--image .quote-col__attribution{font-size:1rem;font-weight:300;font-style:italic;color:#fff;margin:0}

/* ============================================================
   Content kolommen (blok rmi/content-columns), 21-08-2026
   Hoort bij taak #208 punt 3: twee of drie blokken naast elkaar, elk
   verticaal gestapeld als afbeelding, subtitel, titel, tekst, knop.

   Bewust eigen BEM-classes en niet .content-col of .image: die twee staan
   in main.css als kale selector met !important (.content-col krijgt
   background:none en padding-block:0, .image img een vaste aspect-ratio),
   dus hergebruik zou hier stil de opmaak slopen.
   ============================================================ */
.block-content-columns .content-column {
  display: flex;
  flex-direction: column;
}

.block-content-columns .content-column__media {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
}

/* 3:2 gelijk aan de foto-verhouding die we in sectie 3 op de andere
   contentblokken hebben afgedwongen, zodat twee portretten dezelfde
   uitsnede krijgen. */
.block-content-columns .content-column__img {
  display: block;
  width: 100%;
  /* 16:9: op containerbreedte is een kolom circa 636px, dus de band wordt 358px
     hoog. Dat is vrijwel exact de hoogte die de foto in het oorspronkelijke
     ontwerp had, voordat de kolommen breder werden. */
  aspect-ratio: 16 / 9;
  object-fit: cover;
  /* De bron is meestal staand (4:5) en het kader liggend, dus cover gooit ruim
     de helft van de hoogte weg. Met de standaard 50% valt dat midden op het
     gezicht; 25% schuift het venster naar boven zodat het hoofd in beeld blijft
     en er toch iets meer onder de kin zichtbaar is dan bij center top. */
  object-position: center 25%;
}

.block-content-columns .content-column__media + .content-column__body {
  margin-top: 1.5rem;
}

/* flex-grow zorgt dat beide tekstvlakken even hoog worden, ook als de ene
   kolom meer tekst of een knop heeft dan de andere. */
.block-content-columns .content-column__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  border-radius: 20px;
}

.block-content-columns .content-column__body--panel {
  padding: 2rem;
}

.block-content-columns .content-column__body h2 {
  font-size: 2rem;
}

.block-content-columns .content-column__body > *:last-child {
  margin-bottom: 0;
}

/* margin-top:auto duwt de knop naar de onderkant van het vlak, zodat de CTA
   van het tweede blok uitlijnt met de onderkant van het eerste blok. */
.block-content-columns .content-column__cta {
  margin-top: auto;
  margin-bottom: 0;
  padding-top: 1.5rem;
}

.block-content-columns svg.shape {
  display: none !important;
}

@media (max-width: 991.98px) {
  .block-content-columns .content-column:last-child {
    margin-bottom: 0 !important;
  }
}

/* Optie "Afbeelding volledig tonen": voor logos en andere afbeeldingen die
   niet gesneden mogen worden. object-fit:cover zou een logo hier op 3:2
   bijsnijden, dus contain plus een neutrale ondergrond. */
.block-content-columns .content-column__media--contain {
  background: transparent;
}

/* Geen 3:2 hier: een logo is breed en laag, dus dat kader zou vooral witruimte
   zijn. Een vaste hoogte houdt de twee kolommen wel gelijk. */
.block-content-columns .content-column__media--contain .content-column__img {
  aspect-ratio: auto;
  height: 110px;
  object-fit: contain;
  object-position: left center;
}

/* ============================================================
   Header: topbar en navigatie, 21-08-2026
   ------------------------------------------------------------
   Wat er mis was, gemeten op rcc-containers.com:

   1. De navrij had 1230 px nodig (logo 150 + negen items 1064 + tussenruimte)
      maar .container springt in stappen: 1320 px boven 1400, 1140 px tussen
      1200 en 1399, 960 px tussen 992 en 1199. Alleen boven 1400 paste het.
      Daaronder viel Contact los op een tweede regel en groeide de header van
      77 naar 121 px.
   2. De topbar propte adres, mail en telefoon in col-lg-7, kwam 29 px tekort,
      en brak het telefoonnummer middenin af (linkhoogte 38 px in plaats van 17).
   3. `.top-bar-widget a { margin-left: 15px }` gold ook voor de eerste link,
      dus de topbarinhoud stond 15 px rechts van het logo.

   De aanpak: geen extra breekpunten, maar een doorlopende schaal met clamp,
   zodat er nooit een stap in zit. 12 px letter op 992, 16 px op 1400 en
   daarboven; het logo loopt van 85 naar 150 px mee. Boven 1400 is de header
   dus exact zoals hij was.

   Nagemeten op 992, 1080, 1180, 1280 en 1400 px, in het Nederlands, Duits en
   Spaans. Duits is de krapste (langere labels): daar bleef op 992 px 22 px
   over tussen de tekstnav en de knoppen.
   ============================================================ */

/* Geen linkermarge op de eerste link, zodat topbar en logo op dezelfde
   x beginnen. En nooit meer een breuk binnen een link: een heel item zakt
   als geheel naar de tweede regel, een telefoonnummer splitst niet. */
.widget.top-bar-widget .contact-info a,
.widget.top-bar-widget .actions a,
.widget.top-bar-widget .actions .wgcurrent {
  margin-left: 0 !important;
  margin-right: 20px;
  white-space: nowrap;
}

/* Onder 1400 px past de topbar niet op een regel, dus stapelen we hem
   bewust: contactlinks boven, taal en acties eronder, beide links uitgelijnd.
   Kost 3 px hoogte (56 naar 59) en het nummer blijft heel.
   Onder 768 px is de hele balk verborgen (staat in main.css), dus die
   ondergrens hoeft hier niet mee. */
@media (min-width: 768px) and (max-width: 1399.98px) {
  .custom-nav-top-bar .contact-info,
  .custom-nav-top-bar .actions {
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
    text-align: left !important;
  }

  .widget.top-bar-widget .actions {
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }

  /* topbar-gaps 22-08: de twee gestapelde regels raakten elkaar (row-gap 0)
     en regel 2 begon 8 tot 15 px verder naar rechts dan regel 1. De marge-regel
     hierboven dekt alleen <a>, en het eerste item op regel 2 is een <aside>
     (Weglot) of een <button> (cart) met een eigen linkermarge. */
  .custom-nav-top-bar .row {
    row-gap: 6px;
  }

  .widget.top-bar-widget .actions {
    column-gap: 20px;
  }

  .widget.top-bar-widget .actions > * {
    margin-left: 0 !important;
  }
}

@media (min-width: 992px) {
  /* De containerstappen eruit. Dit alleen levert al 114 px op tussen
     1200 en 1399 px. De 98vw sluit aan op wat de CTA-balk en de footer
     al gebruiken, dus de header loopt niet uit de lijn van de pagina. */
  #nav-main > .container,
  .top-bar-widget > .container {
    max-width: min(1320px, 98vw);
  }

  /* Een doorlopende schaal in plaats van vaste maten per breekpunt.
     0.9804vw + 0.1421rem geeft precies 12 px op 992 en 16 px op 1400. */
  #nav-main {
    --nav-fs: clamp(0.75rem, 0.9804vw + 0.1421rem, 1rem);
  }

  /* Logo links, tekstnavigatie er direct achter, knoppen houden de
     rechterrand. Voorheen stond de nav op justify-content: end terwijl de
     topbar links stond, dus de twee balken trokken tegengesteld. */
  #nav-main > .container {
    justify-content: flex-start !important;
    flex-wrap: nowrap;
  }

  /* De offcanvas is op lg en hoger geen paneel meer maar de nav-strook.
     height: auto is nodig omdat hij anders op 48 px blijft staan en een
     eventuele tweede regel buiten de header valt. */
  #nav-main .offcanvas {
    flex: 1 1 auto !important;
    min-width: 0;
    height: auto !important;
  }

  /* Alleen de horizontale padding weg, anders staat de tekstnav ingesprongen
     ten opzichte van het logo. De verticale padding blijft staan: die bepaalt
     samen met het hoogste kind de headerhoogte, en die verhouding is per site
     anders (het RCC-logo is 51 px hoog, dat van cetem 46). Door er niet aan te
     rekenen houdt elke site boven 1400 px exact zijn oorspronkelijke hoogte. */
  #nav-main .offcanvas-body {
    padding-inline: 0 !important;
  }

  /* Rechts uitgelijnd, tegen de knoppen aan, zoals het thema het zelf al deed
     (ul#bootscore-navbar staat op justify-content: end). Op 21-08 stond hier
     flex-start om mee te lopen met de links uitgelijnde topbar, maar dat gaf
     een gat van 154 px tussen het laatste menu-item en Offerte. Alleen de
     topbar lijnt links uit, de navigatie niet. */
  #nav-main .offcanvas .navbar-nav {
    justify-content: flex-end !important;
    flex-wrap: wrap;
    width: 100%;
    gap: 0 !important;
  }

  #nav-main .offcanvas .navbar-nav > li {
    margin-inline: 0.1em !important;
  }

  #nav-main .offcanvas .navbar-nav > li > a {
    font-size: var(--nav-fs);
    padding-inline: 0.35em !important;
  }

  .navbar-brand {
    max-width: none;
  }

  /* Op HOOGTE schalen, niet op breedte, met RCC als referentie (22-08).
     Op breedte 150 px kregen de vier logo's verschillende hoogtes, omdat de
     verhoudingen verschillen: RCC 840x286, rmi 790x288, rbc 852x282,
     cetem 1184x288. Het logo is het hoogste kind in de navrij, dus dat gaf
     vier verschillende navhoogtes: 77,1 / 80,7 / 75,6 / 63,5 px.
     51,07 px is RCC's oorspronkelijke logohoogte (150 x 286/840) en 28,94 px
     is die van RCC op 992. De vw-term is de oude breedte-clamp maal 286/840,
     dus de schaal loopt precies gelijk. Alle vier komen nu op 77,07 px.
     Gevolg: een breed wordmark wordt breder. Cetem gaat van 150 naar 210 px,
     dat is de prijs van gelijke hoogtes. */
  .navbar-brand img {
    height: clamp(28.94px, 5.4238vw - 24.86px, 51.07px);
    width: auto;
  }

  /* De twee knoppen komen uit header.php als eigen groep in .header-actions.
     De originele menu-items blijven in de <ul> staan voor het offcanvas op
     mobiel, maar zijn hier verborgen zodat ze niet dubbel verschijnen. */
  #nav-main .offcanvas .navbar-nav > li.btn-cta,
  #nav-main .offcanvas .navbar-nav > li.btn-cta-filled {
    display: none !important;
  }

  #nav-main .header-actions {
    flex: 0 0 auto;
    margin-left: 0.8em;
  }

  /* nowrap is de kern: hierdoor kunnen Offerte en Contact niet meer van
     elkaar losraken. Tussen 1000 en 1150 px gebeurde dat wel, met Offerte
     rechts op regel 1 en Contact links op regel 3. */
  #nav-main .nav-cta {
    flex-wrap: nowrap !important;
    width: auto !important;
    gap: 0.4em;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  #nav-main .nav-cta > li {
    margin: 0 !important;
  }

  /* De padding schaalt mee, maar landt op 1400 px exact op de originele
     12px 20px, zodat de header daarboven precies is zoals hij was (77 px).
     In em uitdrukken kon niet: dan werd de knop op 992 px te breed en bleef
     er in het Duits maar 5 px over tussen de tekstnav en de knoppen. */
  #nav-main .nav-cta > li.btn {
    font-size: var(--nav-fs);
    padding: clamp(9px, 0.7353vw + 1.705px, 12px) clamp(12px, 1.9608vw - 7.45px, 20px) !important;
  }

  #nav-main .nav-cta > li.btn > a {
    font-size: inherit;
    padding: 0 !important;
  }
}

/* ------------------------------------------------------------------
   hover-uniform 22-08
   Eén hover-effect voor élke knop op de site: de knop wordt donkerder
   dan zijn eigen kleur, tekst wit, geen schaduw en geen lift, 0.3s.
   Rood #e30613 -> #b80510, groen #1EAF23 -> #17831A. Dat is dezelfde
   stap die main.css al gebruikt voor .woocommerce .button.alt en die
   op RCC sinds 22-08 op alle groene knoppen staat.

   Wat dit rechttrekt, gemeten op deze site:
   - de verzendknop van élk formulier had helemaal géén hover
   - .btn-cta-filled in de nav kreeg alleen een schaduw, geen kleur
   - .btn-primary en de outline-knoppen vulden met dezelfde kleur
   - .btn-icon en de carousel-pijlen sprongen 5px omhoog

   Bewuste uitzonderingen, dit zijn geen vlakke knoppen:
   - .btn-video (ronde speelknop, houdt scale 1.1)
   - .single-cta-bar-btn (wit op een rode balk, kan niet donkerder)
   - .btn-arrow:hover:after (de pijl schuift, geen kleurwissel)
   - .card .btn-primary en .block-products-carousel .btn.w-100 zijn
     tekstlinks in een kaart: daar verdonkert alleen de tekst
   :is() houdt hover, focus en active gelijk en laat de specificiteit
   staan op die van één pseudo-klasse.
   ------------------------------------------------------------------ */

/* rood */
.btn.btn-primary:is(:hover, :focus, :active),
.btn.btn-outline-primary:is(:hover, :focus, :active),
.btn.btn-cta:is(:hover, :focus, :active),
.btn.btn-cta-filled:is(:hover, :focus, :active),
.btn-icon:is(:hover, :focus, :active),
#productCarouselNav .btn:is(:hover, :focus, :active),
#reviewCarouselNav .btn:is(:hover, :focus, :active),
#postsCarouselNav .btn:is(:hover, :focus, :active),
#teammembersCarouselNav .btn:is(:hover, :focus, :active),
body.error404 .error-404 .btn.btn-outline-primary:is(:hover, :focus, :active) {
  background: #b80510 !important;
  background-color: #b80510 !important;
  border-color: #b80510 !important;
  color: #fff !important;
  box-shadow: none !important;
  transform: none !important;
  transition: all 0.3s ease-in-out !important;
}

/* groen: de twee knoppen in de hoofdnavigatie */
.navbar-nav .btn.btn-cta:is(:hover, :focus, :active),
.navbar-nav .btn.btn-cta-filled:is(:hover, :focus, :active) {
  background: #17831A !important;
  background-color: #17831A !important;
  border-color: #17831A !important;
  color: #fff !important;
  box-shadow: none !important;
  transform: none !important;
  transition: all 0.3s ease-in-out !important;
}

/* De tekst in de navigatieknoppen zit in een <a>, die moet mee wit worden. */
.navbar-nav .btn.btn-cta:is(:hover, :focus, :active) a,
.navbar-nav .btn.btn-cta-filled:is(:hover, :focus, :active) a {
  color: #fff !important;
}

/* Tekstlinks in een kaart: alleen de tekst verdonkert. */
.card .btn.btn-primary:is(:hover, :focus, :active),
.block-products-carousel .btn.w-100:is(:hover, :focus, :active) {
  background: transparent !important;
  background-color: transparent !important;
  color: #b80510 !important;
  box-shadow: none !important;
  transform: none !important;
}

/* Tabs in de WooCommerce-producttabs sprongen ook omhoog. */
.block-woocommerce .col-12 .product.type-product .woocommerce-tabs .wc-tabs .nav-item .nav-link:is(:hover, :focus, :active) {
  transform: none !important;
  box-shadow: none !important;
}

/* .btn.btn-arrow zonder .btn-primary is een tekstlink met een pijl
   ("Lees meer", "Ontdek meer"): geen vlak, dus alleen de tekst
   verdonkert. De :not-keten sluit de echte knoppen uit én houdt de
   witte knop op de rode CTA-balk (.single-cta-bar-btn) buiten schot.
   LET OP: alleen op een <a>. De verzendknop van Gravity Forms is
   button.gform_button.custom-form-submit-btn.btn.btn-arrow, dus zonder de
   element-beperking pakt deze regel (0,7,0) die knop af van de kleurregel
   (0,2,0) en wordt hij transparant met rode tekst. */
a.btn.btn-arrow:not(.btn-primary):not(.btn-cta):not(.btn-cta-filled):not(.single-cta-bar-btn):not(.custom-form-submit-btn):not(.gform_button):is(:hover, :focus, :active) {
  background: transparent !important;
  background-color: transparent !important;
  color: #b80510 !important;
  box-shadow: none !important;
  transform: none !important;
  transition: all 0.3s ease-in-out !important;
}

/* ------------------------------------------------------------------
   verzendknop groen 22-08
   De verzendknop van elk formulier is groen, gelijk aan rcc-containers.com
   (basis #1EAF23, hover #17831A). Op deze site was hij rood; Shana wil hem
   sitebreed groen. Daarom staan deze twee selectors niet meer in de rode
   hoverlijst hierboven.
   Dit raakt zowel het contactblok als het sollicitatieformulier in
   .block-contact-faq op de vacaturepagina: main.css zet daar #e30613
   zonder !important, dus deze regel wint.
   ------------------------------------------------------------------ */
.custom-form-submit-btn,
.gform_button {
  background: #1EAF23 !important;
  background-color: #1EAF23 !important;
  border-color: #1EAF23 !important;
  color: #fff !important;
}

.custom-form-submit-btn:is(:hover, :focus, :active),
.gform_button:is(:hover, :focus, :active) {
  background: #17831A !important;
  background-color: #17831A !important;
  border-color: #17831A !important;
  color: #fff !important;
  box-shadow: none !important;
  transform: none !important;
  transition: all 0.3s ease-in-out !important;
}

/* ------------------------------------------------------------------
   tekstlinks zonder hover 22-08
   Deze knoppen zijn tekstlinks (transparant, rode tekst, pijl) en hadden
   helemaal geen hover. Ze horen bij dezelfde familie als
   .read-more-btn en .card .btn-primary: alleen de tekst verdonkert.
   ------------------------------------------------------------------ */
.btn.toggle-btn:is(:hover, :focus, :active) {
  background: transparent !important;
  background-color: transparent !important;
  color: #b80510 !important;
  box-shadow: none !important;
  transform: none !important;
  transition: all 0.3s ease-in-out !important;
}

/* tapdoelen minimaal 24px zonder de vormgeving te veranderen, 22-08 */
.weglot-container a[class*="weglot-language"] {
  position: relative;
}

.weglot-container a[class*="weglot-language"]::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  min-width: 24px;
  min-height: 24px;
  transform: translate(-50%, -50%);
  background: transparent;
  border: 0;
}

/* ==================================================================
   contactformulier: opmaak gelijk aan RCC — 31-08

   Overgenomen uit rcc-consistency.css, blok "contactsectie ontwerp 31-08",
   zodat het contactformulier op rmi.nl, rbc-terminal.com en cetem.nl
   dezelfde opmaak heeft als op rcc-containers.com.

   WAT ER WEL IN ZIT: de kaart om het formulier (.form-col), de koptekst
   erboven, en alle Gravity Forms-regels (labels, velden, uploadveld,
   textarea, focus, footer en de verzendknop met pijl).

   WAT ER BEWUST NIET IN ZIT:
   - De vormgeving van de linkerkolom zelf (`.profile-inner` en de regels op
     de persoonskaart). Die kolom heeft per layout een andere inhoud:
     `person-col` (persoonskaart), `info-col` (rood infoblok op de
     contactpagina) of `map-col` (Google Maps). Alleen de *breedte* van die
     kolom wordt gelijkgetrokken, niet hoe hij eruitziet.

   Gevolg: de veldopmaak is 1-op-1 met RCC, de breedte van de kaart volgt de
   layout die per pagina gekozen is. Zie sessielog 2026-08-31.
   ================================================================== */

.block-contact .form-col {
  display: flex;
}

.block-contact .form-col > * {
  max-width: 100%;
}

.block-contact.layout-person_form .form-col,
.block-contact.layout-map_form .form-col,
.block-contact.layout-info_form .form-col,
/* Het sollicitatieformulier op de vacaturepagina's zit in `block-contact-faq`
   met layout-compact. Dat blok kreeg van het thema een grijze kaart (#f9f9f6)
   zonder rand, terwijl het veldwerk eronder identiek is. Meegenomen zodat het
   formulier daar dezelfde witte kaart met rand heeft als op alle andere
   pagina's. 31-08 */
.block-contact-faq.layout-compact .form-col {
  flex-direction: column;
  padding-block: 40px;
  padding-inline: 40px;
  background: #fff;
  border: 2px solid #efefef;
  border-radius: 20px;
}

.block-contact .form-col > .subtitle {
  margin: 0 0 2px;
  font-family: "Montserrat", sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.4;
  /* Zelfde reden als bij de persoonskaart: het thema forceert hoofdletters. */
  text-transform: none;
  letter-spacing: normal;
  color: #e30613;
}

.block-contact .form-col > .title {
  margin: 0 0 18px;
  font-size: 40px;
  font-weight: 600;
  line-height: 1.15;
  color: #192847;
}

.block-contact .form-col > .description {
  margin: 0 0 32px;
  /* Ontwerp: 720px tekst in 890px inhoudsbreedte, dus 81% met een marge rechts.
     Een vaste 720px zou hier 94% van de smallere kaart vullen en die marge
     wegnemen. */
  max-width: 81%;
  font-size: 16px;
  font-weight: 300;
  line-height: 24px;
  color: #192847;
}

/* --- Gravity Forms binnen de kaart ------------------------------- */

/* Hetzelfde formulier staat in twee blokken: `block-contact` (contactsectie) en
   `block-contact-faq` (het sollicitatieformulier op de vacaturepagina). De
   opbouw eronder is identiek (.form-col > .gform_wrapper > form), dus de
   veldopmaak geldt voor allebei. `:is()` telt als één klasse, dus de
   specificiteit blijft gelijk. De kaart- en persoonskolomregels blijven bewust
   alleen op `block-contact`: dat blok heeft zijn eigen, compacte layout. */
:is(.block-contact, .block-contact-faq) .form-col .gform_wrapper {
  margin: 0;
}

:is(.block-contact, .block-contact-faq) .form-col .gform_heading,
:is(.block-contact, .block-contact-faq) .form-col .gform_required_legend {
  display: none;
}

:is(.block-contact, .block-contact-faq) .form-col .gform_wrapper .gform_fields {
  grid-column-gap: 30px;
  grid-row-gap: 15px;
}

:is(.block-contact, .block-contact-faq) .form-col .gform_wrapper .gfield_label {
  margin: 0 0 8px;
  /* Het ontwerp zet 20px, maar dat is groter dan de invoertekst zelf (16px) en
     leest in de smallere kaart van deze site als een kop. 16px houdt label en
     veld in dezelfde maat. */
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  color: #192847;
}

:is(.block-contact, .block-contact-faq) .form-col .gform_wrapper .gfield_required,
:is(.block-contact, .block-contact-faq) .form-col .gform_wrapper .gfield_required_asterisk {
  color: #e30613;
  font-weight: 600;
  text-decoration: none;
}

:is(.block-contact, .block-contact-faq) .form-col .gform_wrapper .gfield input[type="text"],
:is(.block-contact, .block-contact-faq) .form-col .gform_wrapper .gfield input[type="email"],
:is(.block-contact, .block-contact-faq) .form-col .gform_wrapper .gfield input[type="tel"],
:is(.block-contact, .block-contact-faq) .form-col .gform_wrapper .gfield input[type="number"],
:is(.block-contact, .block-contact-faq) .form-col .gform_wrapper .gfield input[type="url"],
:is(.block-contact, .block-contact-faq) .form-col .gform_wrapper .gfield select {
  width: 100%;
  height: 42px;
  padding: 0 20px;
  background: #fff;
  border: 1px solid #192847;
  border-radius: 120px;
  font-size: 16px;
  line-height: 40px;
  color: #192847;
}

/* Alleen het sollicitatieformulier heeft een uploadveld. Het staat naast het
   e-mailveld, dus het moet dezelfde 42px halen; de bladerknop erin krijgt
   daarom eigen opmaak in plaats van de standaard van de browser. */
:is(.block-contact, .block-contact-faq) .form-col .gform_wrapper .gfield input[type="file"] {
  width: 100%;
  height: 42px;
  /* Chrome kortte "Geen bestand gekozen" midden in het woord af ("Geen
     ...ekozen"): de bladerknop plus 16px tekst paste niet in de halve
     kolom van 328px. Bestandsnaam een maat kleiner, en de linkerpadding
     smal zodat de tekst ook op 768px (kolom van 291px) heel blijft.

     `!important` is hier nodig, niet netjes: twee regels claimen de padding
     van dit veld al met `!important` (`.gform_body
     input:not([type="checkbox"])` van Gravity Forms en een kale
     `input[type="file"]` uit het thema). 31-08 */
  padding: 0 14px 0 0 !important;
  background: #fff;
  border: 1px solid #192847;
  border-radius: 120px;
  font-size: 13px;
  line-height: 40px;
  /* De bestandsnaam is hulptekst: de knop ernaast is de actie. */
  color: #6b7280;
}

:is(.block-contact, .block-contact-faq) .form-col .gform_wrapper .gfield input[type="file"]::file-selector-button {
  /* De knop zat eerst als losse pil ín de veldpil: twee omlijningen om
     elkaar heen, en een strook lucht boven en onder de knop omdat hij
     lager was dan het veld. Nu vult hij de volle hoogte als linkersegment,
     met de ronding van het veld links en een dunne scheidingslijn rechts.
     Eén omlijning, geen lucht erboven, en het leest als één besturing.
     Crème vlak met het label in het navy van het formulier: navy gevuld en
     vet rood zijn allebei geprobeerd en te luid voor een knop in een veld.
     31-08 */
  margin-right: 12px;
  padding: 0 16px;
  height: 40px;
  background: #f9f9f6;
  border: 0;
  border-right: 1px solid #dcdfe4;
  border-radius: 120px 0 0 120px;
  color: #192847;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  /* Niet verschuiven. De browser zet deze knop op de tekstbasislijn van het
     veld; het crèmevlak staat daardoor 1px hoger dan het midden (2px lucht
     boven, 1px onder). Dat 1px optillen maakte het vlak wel symmetrisch, maar
     duwde het lábel 1px boven "Geen bestand gekozen" ernaast, en dat is wat je
     ziet: hoog contrast tekst tegen tekst, tegen 3% contrast van vlak tegen
     veld. Op de pixel gemeten (dpr 3) staan de kapitaalhoogten van beide
     teksten met deze waarde exact gelijk. 01-09 */
  position: relative;
  top: 0;
  transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out,
    color 0.2s ease-in-out;
}

/* Hover blijft in dezelfde toon: alleen het vlak wordt een tint donkerder. */
:is(.block-contact, .block-contact-faq) .form-col .gform_wrapper .gfield input[type="file"]::file-selector-button:hover {
  background: #eceef0;
  color: #192847;
}

/* Ook de -webkit-schrijfwijze, voor Safari onder 16.4: daar bestaat de
   standaardnaam niet en zou de knop terugvallen op de browserstandaard. */
:is(.block-contact, .block-contact-faq) .form-col .gform_wrapper .gfield input[type="file"]::-webkit-file-upload-button {
  margin-right: 12px;
  padding: 0 16px;
  height: 40px;
  background: #f9f9f6;
  border: 0;
  border-right: 1px solid #dcdfe4;
  border-radius: 120px 0 0 120px;
  color: #192847;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  /* Niet verschuiven. De browser zet deze knop op de tekstbasislijn van het
     veld; het crèmevlak staat daardoor 1px hoger dan het midden (2px lucht
     boven, 1px onder). Dat 1px optillen maakte het vlak wel symmetrisch, maar
     duwde het lábel 1px boven "Geen bestand gekozen" ernaast, en dat is wat je
     ziet: hoog contrast tekst tegen tekst, tegen 3% contrast van vlak tegen
     veld. Op de pixel gemeten (dpr 3) staan de kapitaalhoogten van beide
     teksten met deze waarde exact gelijk. 01-09 */
  position: relative;
  top: 0;
}

/* "Toegestane bestandstypen ... Max. bestandsgrootte" is hulptekst, geen
   veldtekst: een maat kleiner en grijs, zodat het veld zelf voorop staat. */
:is(.block-contact, .block-contact-faq) .form-col .gform_wrapper .gfield .gform_fileupload_rules {
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.45;
  color: #5c6470;
}

:is(.block-contact, .block-contact-faq) .form-col .gform_wrapper .gfield textarea {
  width: 100%;
  min-height: 178px;
  padding: 14px 20px;
  background: #fff;
  border: 1px solid #192847;
  border-radius: 20px;
  font-size: 16px;
  line-height: 24px;
  color: #192847;
  /* Sleepgreep weg op verzoek, 31-08: het hoekje viel op in de afgeronde
     kaart. Hoogte blijft 178px met interne scroll. */
  resize: none;
}

:is(.block-contact, .block-contact-faq) .form-col .gform_wrapper .gfield input:focus,
:is(.block-contact, .block-contact-faq) .form-col .gform_wrapper .gfield textarea:focus,
:is(.block-contact, .block-contact-faq) .form-col .gform_wrapper .gfield select:focus,
:is(.block-contact, .block-contact-faq) .form-col .gform_wrapper .gfield input:focus-visible,
:is(.block-contact, .block-contact-faq) .form-col .gform_wrapper .gfield textarea:focus-visible,
:is(.block-contact, .block-contact-faq) .form-col .gform_wrapper .gfield select:focus-visible {
  /* Geen losse omlijning: het actieve veld is te herkennen aan de rode rand.
     De randdikte blijft 1px, anders verspringt het veld bij het aanklikken. */
  outline: none;
  border-color: #e30613;
}

:is(.block-contact, .block-contact-faq) .form-col .gform_wrapper .gform_footer,
:is(.block-contact, .block-contact-faq) .form-col .gform_wrapper .gform-footer {
  margin: 24px 0 0;
  padding: 0;
}

/* De verzendknop blijft groen: dat is het kleurbesluit van 22-08 en het
   ontwerp doet hetzelfde. Alleen de vorm wordt een pil. */
:is(.block-contact, .block-contact-faq) .form-col .gform_wrapper .gform_footer button[type="submit"],
:is(.block-contact, .block-contact-faq) .form-col .gform_wrapper .gform-footer button[type="submit"],
:is(.block-contact, .block-contact-faq) .form-col .gform_wrapper .gform_footer input[type="submit"] {
  display: inline-flex;
  align-items: center;
  gap: 15px;
  width: auto;
  background: #1eaf23;
  border: 1px solid #1eaf23;
  /* Op WooCommerce-pagina's staat hierboven een oudere regel die padding,
     border-width en radius met !important terugzet naar 12/20 en 2px. Zonder
     deze twee is de knop op /aanbod/, de productpagina's en de
     categoriepagina's 6px smaller dan op de rest van de site. */
  padding: 13px 23px !important;
  border-width: 1px !important;
  border-radius: 38px;
  color: #fff;
  font-size: 16px;
  line-height: 1.2;
  transition: background-color 0.3s ease, border-color 0.3s ease;
  /* De sitebrede regel `.custom-form-submit-btn, .gform_button` zet gap,
     font-weight en min-height met !important. Binnen deze sectie geldt het
     ontwerp: gap 15, bold, en de hoogte volgt uit padding 13/23 (45px). */
  gap: 15px !important;
  font-weight: 700 !important;
  min-height: 0 !important;
}

/* De pijl is een ::after van `.btn-arrow` met `margin: 0 5px 0 10px`. Die marge
   komt bovenop de flex-gap, dus het gat tussen tekst en pijl werd 25px in
   plaats van de 15px uit het ontwerp, en rechts stond 5px meer ruimte dan
   links. De gap doet het werk, de marge kan weg. */
:is(.block-contact, .block-contact-faq) .form-col .gform_wrapper .gform_footer button[type="submit"]::after,
:is(.block-contact, .block-contact-faq) .form-col .gform_wrapper .gform-footer button[type="submit"]::after {
  margin: 0 !important;
}

/* Het thema laat de pijl bewegen door de marges te wisselen (10/5 naar 15/0),
   dus 5px naar rechts. Die marges staan hierboven uit, daarom doet een
   transform hetzelfde: zelfde afstand, maar zonder de layout te herberekenen. */
:is(.block-contact, .block-contact-faq) .form-col .gform_wrapper .gform_footer button[type="submit"]:hover::after,
:is(.block-contact, .block-contact-faq) .form-col .gform_wrapper .gform_footer button[type="submit"]:focus-visible::after,
:is(.block-contact, .block-contact-faq) .form-col .gform_wrapper .gform-footer button[type="submit"]:hover::after,
:is(.block-contact, .block-contact-faq) .form-col .gform_wrapper .gform-footer button[type="submit"]:focus-visible::after {
  transform: translateX(5px);
}

@media (prefers-reduced-motion: reduce) {
  :is(.block-contact, .block-contact-faq) .form-col .gform_wrapper .gform_footer button[type="submit"]::after,
  :is(.block-contact, .block-contact-faq) .form-col .gform_wrapper .gform-footer button[type="submit"]::after {
    transition: none;
  }

  :is(.block-contact, .block-contact-faq) .form-col .gform_wrapper .gform_footer button[type="submit"]:hover::after,
  :is(.block-contact, .block-contact-faq) .form-col .gform_wrapper .gform_footer button[type="submit"]:focus-visible::after,
  :is(.block-contact, .block-contact-faq) .form-col .gform_wrapper .gform-footer button[type="submit"]:hover::after,
  :is(.block-contact, .block-contact-faq) .form-col .gform_wrapper .gform-footer button[type="submit"]:focus-visible::after {
    transform: none;
  }
}

:is(.block-contact, .block-contact-faq) .form-col .gform_wrapper .gform_footer button[type="submit"]:hover,
:is(.block-contact, .block-contact-faq) .form-col .gform_wrapper .gform_footer button[type="submit"]:focus-visible,
:is(.block-contact, .block-contact-faq) .form-col .gform_wrapper .gform-footer button[type="submit"]:hover,
:is(.block-contact, .block-contact-faq) .form-col .gform_wrapper .gform-footer button[type="submit"]:focus-visible {
  background: #17831a;
  border-color: #17831a;
  color: #fff;
  transform: none;
  box-shadow: none;
}

/* --- responsive --------------------------------------------------- */

/* Onder lg stapelen de twee kaarten (Bootstrap col-lg-4 / col-lg-8). De
   linkerkaart wordt dan schermbreed, en een vierkante foto van 900px hoog
   duwt het formulier van het scherm: hoogte begrenzen. */

/* Onder 768px past een tweekolomsformulier niet meer in de kaart. Zelfde
   grens en zelfde waarden als op RCC. */
@media (max-width: 767.98px) {
  :is(.block-contact, .block-contact-faq) .form-col .gform_wrapper .gform_fields > .gfield {
    grid-column: 1 / -1 !important;
  }

  .block-contact.layout-person_form .form-col,
  .block-contact.layout-map_form .form-col,
  .block-contact.layout-info_form .form-col,
  .block-contact-faq.layout-compact .form-col {
    padding-inline: 20px;
    padding-block: 28px;
  }

  .block-contact .form-col > .title {
    font-size: 30px;
  }
}

/* Rij-geometrie gelijk aan RCC, zodat de formulierkaart exact dezelfde breedte
   krijgt (851px in een container van 1320) en de rastersporen dus ook gelijk
   zijn. Zonder deze regel is de kaart hier 880px: het thema gebruikt de
   Bootstrap-gutter (rij op -12px, kolommen 12px padding, links 33,33%) terwijl
   RCC een echte gap van 30px met 32% gebruikt.

   De linkerkolom heet per layout anders: `person-col` op RCC (persoonskaart),
   `info-col` op de contactpagina (rood infoblok) en `map-col` elders (Google
   Maps). Alle drie zijn `col-lg-4`, dus dezelfde behandeling. */
@media (min-width: 992px) {
  .block-contact .row {
    display: flex;
    flex-wrap: nowrap;
    gap: 30px;
    margin-inline: 0;
  }

  /* Padding hoort bij de rijmarge die hierboven op 0 staat, dus ook voor
     de losse `person-col` (col-12) in de zijbalk van de vacaturepagina.
     Bleef die 12px staan, dan lag die kaart 12px links en 16px rechts (het
     thema zet `padding-right: 1em`) binnen de twee kaarten erboven en
     eronder. De breedteregel hieronder blijft wel op col-lg-4. 31-08 */
  .block-contact .person-col,
  .block-contact .info-col,
  .block-contact .map-col,
  .block-contact .form-col {
    padding-inline: 0;
  }

  /* Alleen wanneer het echt een tweekolomsrij is. De zijbalk van de
     vacaturepagina bevat een `.block-contact` met uitsluitend een
     `person-col` (`col-12`, zonder `col-lg-4`) en geen formulierkolom; een
     kale `.person-col`-selector perste die kaart daar naar 32% van een
     zijbalk van 376px = 120px, waardoor het e-mailadres per letter afbrak.
     De Bootstrap-klasse `col-lg-4` onderscheidt de twee gevallen. 31-08 */
  .block-contact .col-lg-4.person-col,
  .block-contact .col-lg-4.info-col,
  .block-contact .col-lg-4.map-col {
    flex: 0 0 32%;
    max-width: 32%;
  }

  .block-contact .form-col {
    flex: 1 1 auto;
    max-width: none;
  }
}

/* Onder lg zet het thema de rij op column-reverse, dus een marge op de
   linkerkolom landt onderaan in plaats van tussen de kaarten: row-gap werkt in
   beide richtingen. Kolompadding hier ook op 0, anders lopen de kaarten tot de
   schermrand zoals op RCC vóór de fix. */
@media (max-width: 991.98px) {
  .block-contact .row {
    row-gap: 30px;
    margin-inline: 0;
  }

  /* Het faq-blok (vacaturepagina's) houdt anders de Bootstrap-marge van -12px
     op de rij. Met de witte kaart met ronde hoeken van hierboven liep die
     kaart daardoor op mobiel tot de schermrand: 390px breed in een viewport
     van 390. Marge geneutraliseerd zodat de containerpadding weer de enige
     gutter is, net als bij `.block-contact`. 31-08 */
  .block-contact-faq .row {
    margin-inline: 0;
  }

  /* Padding hoort bij de rijmarge die hierboven op 0 staat, dus ook voor
     de losse `person-col` (col-12) in de zijbalk van de vacaturepagina.
     Bleef die 12px staan, dan lag die kaart 12px links en 16px rechts (het
     thema zet `padding-right: 1em`) binnen de twee kaarten erboven en
     eronder. De breedteregel hieronder blijft wel op col-lg-4. 31-08 */
  .block-contact .person-col,
  .block-contact .info-col,
  .block-contact .map-col,
  .block-contact .form-col {
    padding-inline: 0;
  }
}

/* ==================================================================
   FAQ op de vacaturepagina: vraag werd 49px breed — 31-08

   In `single-job_listing.php` staat het antwoordpaneel `.accordion-collapse`
   BINNEN `.accordion-header`, als broer van de `h3`. Die header is
   `display: flex; flex-wrap: nowrap`, en de h3 heeft `flex: 1 1 auto` met
   `min-width: 0`. Zolang het item dicht is staat het paneel op
   `display: none` en krijgt de vraag de volle 420px. Zodra een item open
   is pakt het antwoord 355px en krimpt de vraag naar 49px: acht regels van
   één woord. Gemeten: cetem 49px, rmi.nl 40px, rbc 59px op 1440.

   Zichtbaar geworden door "eerste item standaard open" (22-08); de
   markupfout zelf is ouder.

   Overal elders in het thema staat het paneel netjes als
   `.accordion-item > .accordion-collapse` (RCC-productpagina 10x,
   werken-bij 4x, contact 8x). Deze regel is daarom strak gescoped op de
   geneste variant en raakt alleen de vacaturepagina's.

   Oplossing zonder de template aan te raken: de header mag afbreken en het
   antwoord krijgt een eigen regel onder de vraag. De pijlknop blijft naast
   de vraag staan via `order`.
   ================================================================== */
.accordion-header {
  flex-wrap: wrap;
}

.accordion-header > h3 {
  order: 1;
  /* Ruimte voor de pijlknop vrijhouden (40px + 16px kolomgap). Zonder deze
     cap pakt de vraag op smalle schermen de volle breedte, waardoor de knop
     door de wrap onder de vraag belandt in plaats van ernaast: gemeten op
     390px viewport. De vraag breekt nu af binnen zijn eigen kolom. 31-08 */
  max-width: calc(100% - 56px);
}

.accordion-header > button,
.accordion-header > .btn {
  order: 2;
}

.accordion-header > .accordion-collapse {
  order: 3;
  flex: 1 0 100%;
}


/* ==================================================================
   Zijbalk vacaturepagina: kaart "Vragen?" lag 12px naar binnen — 31-08

   In `single-job_listing.php` staan drie kaarten onder elkaar in
   `.job-info-block`: `.job-info-block-inner` ("In het kort"),
   `.block-contact` (de persoonskaart) en `.share-buttons-inner`
   ("Deel deze vacature"). Alleen de middelste zit in een blokwikkel, en die
   houdt onder lg zijn eigen 12px blokpadding. Gemeten: buitenste kaarten op
   24px, de persoonskaart op 36px bij een viewport van 390 (48 vs 60 op 768).
   Boven lg is die padding er al 0, dus deze regel raakt alleen de stapeling.

   Strak gescoped op `.job-info-block`, zodat de gewone contactblokken op de
   inhoudspagina's hun blokpadding houden.
   ================================================================== */
.job-info-block .block-contact {
  padding-inline: 0;
}

/* ==================================================================
   Lucht in het open FAQ-item — 31-08

   De antwoorden zijn uit Word geplakt (de spans dragen nog `SCXW`-klassen)
   en beginnen én eindigen met een **leeg `<p></p>`**. Die alinea's zijn 0px
   hoog, dus in de HTML zie je ze niet terug, maar elk brengt wel 16px
   `margin-bottom` mee. Gemeten op elk vacature-item van alle vier de sites
   (rmi.nl 2x2, cetem 4, rbc 1, RCC 2); de FAQ's op werken-bij en contact
   hebben ze niet.

   Daar kwam nog 16px bij aan de onderkant: de laatste alinea kan zijn marge
   niet wegvouwen omdat `.accordion-collapse` in dit sjabloon een flexitem is
   (het paneel staat binnen de header, zie de sectie hieronder), en marges van
   flexitems vouwen niet samen.

   Optisch gemeten van tekst tot tekst: boven 45 -> 29px, onder 44 -> 28px,
   tegen 35px van de kaartrand tot de vraag. Alinea-afstand blijft 16px via
   de aangrenzende selector, dus meerdere alinea's houden hun lucht.
   ================================================================== */
.accordion-body > p:empty {
  display: none;
}

.accordion-body > p {
  margin-bottom: 0;
}

.accordion-body > p:not(:empty) + p:not(:empty) {
  margin-top: 16px;
}

/* Laatste 8px lucht tussen vraag en antwoord. Boven het antwoord staat al de
   halve regelruimte van de vraag plus de ruimte die de pijlknop van 40px in de
   flexrij vrijlaat; met 16px padding erbovenop meet de afstand van tekst tot
   tekst 29px, tegen 28px onder het antwoord en 35px van de kaartrand tot de
   vraag. Op 8px komt dat op 21px en is de binnenafstand kleiner dan de
   kaartpadding, zoals het hoort. Alleen het geneste paneel van de
   vacaturepagina. 31-08 */
.accordion-header > .accordion-collapse .accordion-body {
  padding-top: 8px;
}
/* ecovadis footer 30-09
   EcoVadis Gold-medaille onder "Volg ons" in de Contact-kolom, gelinkt naar de
   scorecard. Markup staat alleen in footer.php van rmi.nl (het label is van RMI),
   dit blok is dus inert op rbc-terminal.com en cetem.nl. Hover volgt de
   icoonregel: geen pijl, dus een lichte scale. */
.footer-ecovadis {
    display: inline-block;
    margin-top: 24px;
    border-radius: 50%;
    transition: transform 0.3s;
}
.footer-ecovadis img {
    display: block;
    width: 96px;
    height: 96px;
}
.footer-ecovadis:hover,
.footer-ecovadis:focus-visible {
    transform: scale(1.05);
}
@media (prefers-reduced-motion: reduce) {
    .footer-ecovadis { transition: none; }
}

/* ecovadis hero 30-09
   Optie A (#228): medaille rechtsboven in de home-header van rmi.nl, gekozen door
   Kasper 30-09. Markup alleen in rmi.nl home-header.php, inert op rbc/cetem.
   `.block-home-header img` maakt elke img een absolute achtergrond, vandaar de
   reset hieronder. Onder lg staat hij in de flow onder de kop. */
.block-home-header .hero-ecovadis {
    display: inline-block;
    margin-top: 16px;
    border-radius: 50%;
    transition: transform 0.3s;
}
.block-home-header .hero-ecovadis img {
    position: static;
    display: block;
    width: 88px;
    height: 88px;
    z-index: auto;
    object-fit: contain;
    animation: none;
}
.block-home-header .hero-ecovadis:hover,
.block-home-header .hero-ecovadis:focus-visible {
    transform: scale(1.05);
}
@media (min-width: 992px) {
    .block-home-header .hero-ecovadis {
        position: absolute;
        top: -35px;
        right: 12px;
        margin-top: 0;
    }
    .block-home-header .hero-ecovadis img {
        width: 120px;
        height: 120px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .block-home-header .hero-ecovadis { transition: none; }
}

/* taalvlaggen TranslatePress, zelfde maat en plek als de Weglot-vlaggen, 07-10.
   In de topbar geeft het thema elke link 20px marge rechts (zoals bij Weglot),
   dus 10px gap + 10px rechts = dezelfde 57px-stap en dezelfde eindpositie. */
.rmi-flags {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 2px 0;
  list-style: none;
  vertical-align: middle;
}

.top-bar-widget .rmi-flags {
  padding-right: 10px;
}

@media (min-width: 768px) {
  .rmi-flags {
    margin-left: 15px;
  }
}

.rmi-flags__item {
  margin: 0;
  padding: 0;
}

.rmi-flags__link {
  position: relative;
  display: block;
  line-height: 0;
}

/* tapdoel minimaal 24px, net als bij de Weglot-vlaggen */
.rmi-flags__link::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  min-width: 24px;
  min-height: 24px;
  transform: translate(-50%, -50%);
}

.rmi-flags img,
.mobile-gtranslate .rmi-flags img {
  display: block;
  width: 27px;
  height: 20px;
  object-fit: cover;
}