/*
 * Interieurbeton Tom Hermans, aanvullingen op de oude stylesheet (app.css)
 * voor de versie in het S27 CMS. Alles wat hier staat, is nieuw of vervangt
 * iets dat de oude server per pagina meegaf; de rest van de opmaak is
 * ongewijzigd.
 */

/* Wat alleen voor het script bestaat (categorieen, sterren), toont niets. */
.ib-verborgen,
.ib-sterren,
[hidden] { display: none !important; }

/* Een referentiekaart die ib.js wegfiltert of op een andere pagina zet. */
.references-grid--item[hidden] { display: none !important; }

/* De rijke tekst uit het CMS zet een <p> in de tekst onder een schuiver; de
   oude site had daar kale tekst. Zelfde uitzicht, geen extra witruimte. */
.reference-slider--details .ck-editor > p:last-child { margin-bottom: 0; }
.reference-slider--details .ck-editor > p { display: inline; }
.reference-slider--details .ck-editor > p + p::before { content: " "; }

/* De runtime van het CMS zet de gekozen bestandsnaam naast het label; het
   uploadveld van deze site toont hem al in het veld zelf (ib.js). */
.custom-file [data-s27cms-bestandsnaam] { display: none !important; }

/* De melding onder een formulier na het versturen, in de stijl van de site. */
[data-cms-formulier] [data-s27cms-melding] { font-weight: 700; }

/* Een lege galerij op een referentie laat geen gat achter. */
#detail-images:empty { display: none; }

/* Op een telefoon mag een lange referentietitel in het raster niet uit zijn
   kaart lopen. */
.references-grid--item-title { overflow-wrap: anywhere; }

/* De paginering van de referenties: acht pagina's passen niet naast elkaar op
   een telefoon. De oude site liet ze uit beeld lopen (alleen verborgen zolang
   de cookiebanner openstond); hier slaan ze om naar een tweede rij. */
@media (max-width: 575.98px) {
  .pagination { flex-wrap: wrap; row-gap: .5rem; }
  .pagination li.page-item .page-link { padding: .6rem .95rem; }
}

/* De kaart op /referenties is een div met de link erin (bouw.py, pagina_referenties): een
   categorie in de kaart is zelf een link, en een link in een link breekt het raster. De link
   vult de hele kaart, zodat beeld en titel staan zoals in app.css en de hele kaart klikbaar is. */
.references-grid--item > .ib-kaartlink { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: block; }

/* Het uploadveld laadt in app.css /images/upload_icon.png, en dat beeld bestaat ook op de oude
   server niet (404, niets te zien). Zonder het verzoek blijft het uitzicht hetzelfde en de console leeg. */
.custom-file:after { background-image: none; }

/* Koppen zonder sprong (bouw.py, kopniveaus): de tag kreeg het juiste niveau, de klasse
   ib-h<oud> houdt het uitzicht van de oude kop, met dezelfde maten als app.css. */
h2.ib-h3 { font-size: 2.5rem; margin-bottom: 2rem; }
h2.ib-h4, h3.ib-h4 { font-size: 2rem; margin-bottom: 2rem; }
.service-grid-item h3.ib-h4 { font-size: 1.6rem; }
#page-gdpr .gdpr-block .tab-content .tab-pane h2.ib-h4 { margin-bottom: 20px; }
@media (max-width: 1200px) {
  h2.ib-h3 { font-size: calc(1.375rem + .9375vw); }
  h2.ib-h4, h3.ib-h4 { font-size: calc(1.325rem + .5625vw); }
  .service-grid-item h3.ib-h4 { font-size: calc(1.285rem + .2625vw); }
}
/* "Contact" en "Adres" in de voettekst: geen kop van de pagina, wel het uitzicht van de oude H5. */
#footer #office-block p.ib-h5 { font-family: Manrope, sans-serif; font-weight: 400; line-height: 1.2; margin: 0 0 1.4rem; padding-bottom: 3rem; font-size: 1.6rem; }
@media (max-width: 1200px) { #footer #office-block p.ib-h5 { font-size: calc(1.285rem + .2625vw); } }

/* De blog (19-10-2026). Het menupunt staat er altijd (27-10-2026, zoals Kennisbank op de .nl); zonder
   gepubliceerd bericht zegt het overzicht dat er binnenkort berichten komen. */
.ib-blog-leeg { display: none; }
.ib-blog-lijst:empty { display: none; }
.ib-blog-lijst:empty + .ib-blog-leeg { display: block; text-align: center; }
.ib-blogkaart__beeld { display: block; margin-bottom: 1rem; }
.ib-blogkaart__datum { font-size: .875rem; opacity: .7; margin-bottom: .25rem; }
.ib-blogkaart__titel a { color: inherit; text-decoration: none; }
.ib-blog-terug a { font-size: .875rem; }
.ib-blog-auteur:has([data-veld="auteur"]:empty) { display: none; }
.ib-blog-hoofdbeeld:has(img:not([src])) { display: none; }

/* De score op Google onder de reviewschuiver. */
.ib-google-score { margin-top: 1.5rem; color: #fff; font-size: .9rem; display: flex; flex-wrap: wrap; gap: .25rem 1rem; align-items: baseline; }
.ib-google-score p { margin: 0; }
.ib-google-score a { color: inherit; text-decoration: underline; }
/* De tekst van een blogbericht (27-10-2026): tussenkoppen, tabellen, beelden en citaten uit de
   rijke tekst van het CMS. Het oude thema kende die niet, want de oude site had geen blog. De site
   rekent met html op 10px, dus 1.6rem is de 16px van de lopende tekst. */
#blog-bericht .ck-editor h2 { margin: 4.8rem 0 1.6rem; }
#blog-bericht .ck-editor h3 { margin: 3.2rem 0 1.2rem; }
#blog-bericht .ck-editor ul, #blog-bericht .ck-editor ol { margin-bottom: 2.4rem; }
#blog-bericht .ck-editor figure { margin: 4rem 0; }
#blog-bericht .ck-editor figure img { display: block; width: 100%; height: auto; }
#blog-bericht .ck-editor figcaption { font-size: 1.4rem; opacity: .7; margin-top: .8rem; }
#blog-bericht .ck-editor table { width: 100%; border-collapse: collapse; margin: 2.4rem 0 3.2rem; font-size: 1.5rem; line-height: 1.5; }
#blog-bericht .ck-editor th, #blog-bericht .ck-editor td { padding: 1.2rem 1.4rem; border-bottom: 1px solid rgba(0,0,0,.12); text-align: left; vertical-align: top; }
#blog-bericht .ck-editor th { font-weight: 600; border-bottom: 2px solid #bd9849; }
#blog-bericht .ck-editor blockquote { margin: 4rem 0; padding: .4rem 0 .4rem 2.4rem; border-left: 3px solid #bd9849; }
#blog-bericht .ck-editor blockquote p { font-size: 2rem; line-height: 1.5; margin-bottom: .8rem; }
#blog-bericht .ck-editor blockquote p:last-child { font-size: 1.4rem; opacity: .7; margin-bottom: 0; }
@media (max-width: 575px) { #blog-bericht .ck-editor table { display: block; overflow-x: auto; } }