/* CV Toppers — merk-override op de Porto construction-skin.
   Het kleurpalet (blauw #013BB1 primary / navy #04225E) wordt geïnjecteerd via
   de inline <style id="brand-vars"> die NA dit bestand geladen wordt, op basis
   van de CMS-kleuren. Hier definiëren we de merk-accenten (rood), de donkere
   vlakken en de overrides die Porto zelf niet dekt. */
:root {
  --cvt-blue: #013BB1;
  --cvt-navy: #04225E;
  --cvt-navy-2: #031A48;
  --cvt-ink: #10131A;
  --cvt-red: #E20613;
  --cvt-red-dark: #B70410;
  --cvt-line: rgba(4, 34, 94, 0.12);
  --cvt-soft: #F4F6FB;
}

/* ---------- Basis ---------- */
body, .body { background-color: #ffffff; }
.bg-light { background-color: var(--cvt-soft) !important; }

/* Merk-accenten */
.custom-outline-text-style-1 { -webkit-text-stroke-color: var(--primary); }
.logo, .logo-sticky { max-height: 56px; width: auto; }
/* We gebruiken één logo-afbeelding; forceer dat 'ie altijd zichtbaar blijft. */
#header .header-logo .logo {
  display: inline-block !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

/* ---------- Solide header netjes BOVEN de hero ---------- */
html:not(.sticky-header-active) #header .header-body { transform: none !important; }
#header .header-body { border-top: 0; }
html.sticky-header-active #header .header-body {
  background: #ffffff !important;
  box-shadow: 0 6px 22px rgba(4, 34, 94, 0.10);
}

/* ---------- Donkere vlakken -> navy (footer, CTA/werkgebied-secties) ---------- */
#footer,
.bg-color-dark { background-color: var(--cvt-navy) !important; }
#footer { border-top: 3px solid var(--cvt-red); }

/* ---------- Rode merk-accenten (spaarzaam, zoals in het logo) ---------- */
/* Telefoon-/spoed-CTA in rood — trekt de aandacht naar bellen bij storing. */
.btn-cvt-call {
  background-color: var(--cvt-red) !important;
  border-color: var(--cvt-red) !important;
  color: #fff !important;
  box-shadow: 0 8px 20px rgba(226, 6, 19, 0.28);
}
.btn-cvt-call:hover,
.btn-cvt-call:focus {
  background-color: var(--cvt-red-dark) !important;
  border-color: var(--cvt-red-dark) !important;
  color: #fff !important;
}
/* Rood accentstreepje: reusable onder sectiekoppen (.cvt-accent). */
.cvt-accent { position: relative; }
.cvt-accent::after {
  content: "";
  display: block;
  width: 54px;
  height: 4px;
  border-radius: 3px;
  background: var(--cvt-red);
  margin: .9rem 0 0;
}
.text-center .cvt-accent::after,
.cvt-accent.text-center::after { margin-left: auto; margin-right: auto; }

/* ---------- Knoppen: strak en professioneel ---------- */
.btn-primary { border-radius: 6px; }
.btn-modern { letter-spacing: .04em; }

/* ---------- Herbruikbare paginakop ---------- */
.page-header-vb { display: flex; align-items: center; min-height: 320px; }
.page-header-vb .breadcrumb { background: transparent; padding: 0; margin: 0; list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; }
.page-header-vb .breadcrumb li { display: inline-flex; align-items: center; }
.page-header-vb .breadcrumb li + li::before { content: "/"; color: rgba(255,255,255,.4); margin-right: .4rem; }

/* ---------- Cookiebanner ---------- */
.cookie-banner {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 10050;
  background: rgba(4, 20, 54, 0.97);
  border-top: 3px solid var(--cvt-red);
  padding: 1.1rem 0;
  box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.25);
}

/* ---------- Galerij "Ons werk in beeld": uniforme beeldverhouding ---------- */
.thumb-info .thumb-info-wrapper img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  display: block;
}
@media (max-width: 767px) {
  .thumb-info .thumb-info-wrapper img { height: 220px; }
}

/* ---------- Compactere verticale ritmes op telefoon ---------- */
@media (max-width: 767.98px) {
  .main .section { padding-top: 2rem !important; padding-bottom: 2rem !important; }
  .main .section-height-3 { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }
  .main .py-5 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
  .main .py-4 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
  .main .my-5, .main .my-4, .main .my-3 { margin-top: 0 !important; margin-bottom: 0 !important; }
  .main .mb-5 { margin-bottom: 1.5rem !important; }
  .main .mb-4 { margin-bottom: 1rem !important; }
  .main .pb-2 { padding-bottom: 0 !important; }

  /* Duidelijke scheiding tussen lichte secties op telefoon. */
  .main > section:not(#home),
  .main > div { border-top: 1px solid var(--cvt-line); }
  .main > .bg-primary,
  .main > .bg-color-dark { border-top: 0 !important; }
}

/* ---------- Consent-gate voor de Google Maps-kaart (contact) ---------- */
.map-embed{border:1px solid var(--cvt-line);border-radius:4px;background:var(--cvt-soft);min-height:260px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.7rem;padding:1.6rem;text-align:center}
.map-embed.is-loaded{padding:0;border:0;background:none;min-height:0;display:block}
.map-embed__note{color:#5A6473;max-width:360px;margin:0}

/* ---------- Toegankelijkheid: zichtbare focus voor toetsenbordgebruikers ---------- */
a:focus-visible, button:focus-visible, .btn:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--cvt-blue);
  outline-offset: 2px;
}
.btn-cvt-call:focus-visible { outline-color: var(--cvt-red); }

/* ---------- Handtekening-pad (online offerte ondertekenen) ---------- */
.sign-pad-wrap{position:relative;border:1px solid var(--cvt-line);border-radius:4px;background:#fff}
.sign-pad{width:100%;height:180px;display:block;touch-action:none;cursor:crosshair;border-radius:4px}
.sign-clear{position:absolute;top:8px;right:8px;font-size:.8rem;background:#fff;border:1px solid var(--cvt-line);
  border-radius:4px;padding:.2rem .6rem;cursor:pointer;color:#5A6473;line-height:1.4}
.sign-clear:hover{color:var(--cvt-red);border-color:var(--cvt-red)}