/* site-header.css — één identieke kopbalk op elke pagina (desktop).
   Wordt als laatste stylesheet geladen; de mobiele menu-opmaak (≤ 940 px)
   blijft in de bestaande mobile-*.css bestanden. */
@media (min-width: 941px) {
  .nav,
  .nav.is-stuck {
    padding: 16px 0 !important;
    min-height: 78px;
    box-sizing: border-box;
    background: #121923 !important;
    border-bottom: 1px solid rgba(255, 255, 255, .1) !important;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .32) !important;
    backdrop-filter: blur(18px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(140%) !important;
  }
  .nav-inner {
    width: min(1360px, 96vw) !important;
    max-width: none !important;
    margin-inline: auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    padding: 0 !important;
  }
  .nav .brand {
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
  }
  .nav .brand-logo {
    width: 158px !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
    aspect-ratio: 1972 / 503 !important;
    object-fit: contain !important;
    filter: none !important;
  }
  .nav-links {
    margin-left: auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 2px !important;
    flex-wrap: nowrap !important;
  }
  .nav-links > a:not(.nav-call) {
    padding: 8px 10px !important;
    font-size: .86rem !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    color: #B7C2D0 !important;
    white-space: nowrap !important;
    text-shadow: none !important;
    border-radius: 999px !important;
  }
  .nav-links > a:not(.nav-call):hover,
  .nav-links > a.is-current {
    color: #fff !important;
    background: rgba(255, 255, 255, .07) !important;
  }
  .nav-call {
    margin-left: 6px !important;
    padding: 10px 16px !important;
    font-size: .88rem !important;
  }
  .nav .lang { margin-left: 6px !important; }
}
/* Tot 1399 px iets compacter. */
@media (min-width: 941px) and (max-width: 1399px) {
  .nav-links > a:not(.nav-call) { padding: 8px 8px !important; font-size: .84rem !important; }
}
@media (min-width: 941px) and (max-width: 1139px) {
  .nav .brand-logo { width: 140px !important; }
  .nav-links > a:not(.nav-call) { padding: 7px 7px !important; font-size: .82rem !important; }
  .nav-call { padding: 9px 12px !important; font-size: .82rem !important; }
}

/* Telefoon en tablet: overal dezelfde compacte balk met hetzelfde logo. */
@media (max-width: 940px) {
  .nav,
  .nav.is-stuck {
    padding: 10px 0 !important;
    background: #121923 !important;
    border-bottom: 1px solid rgba(255, 255, 255, .1) !important;
  }
  .nav .brand { flex: 0 0 auto !important; }
  .nav .brand-logo {
    width: 140px !important;
    height: auto !important;
    max-width: none !important;
    aspect-ratio: 1972 / 503 !important;
    object-fit: contain !important;
    filter: none !important;
  }
}
@media (min-width: 600px) and (max-width: 940px) {
  .nav .brand-logo { width: 152px !important; }
}

/* Koop- en huurpagina: de inhoud start onder de (vaste) kopbalk van 78 px. */
@media (min-width: 941px) {
  .commerce-hero { padding-top: 104px !important; }
}
@media (min-width: 941px) and (max-width: 1019px) {
  .nav-inner { gap: 10px !important; }
  .nav .brand-logo { width: 126px !important; }
  .nav-links > a:not(.nav-call) { padding: 6px 6px !important; font-size: .78rem !important; }
  .nav-call { margin-left: 4px !important; padding: 8px 10px !important; font-size: .78rem !important; }
  .nav .lang { margin-left: 4px !important; }
  .nav .lang-btn { padding: 5px 8px !important; }
}

/* ---- Lichte, zilveren huisstijl (2026-10-09): kopbalk + homepagina-hero, alle schermen ---- */
.nav,
.nav.is-stuck {
  background: linear-gradient(180deg, #f8fafc 0%, #e8edf3 100%) !important;
  border-bottom: 1px solid #cfd7e1 !important;
  box-shadow: 0 6px 22px rgba(15, 24, 34, .10) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
@media (min-width: 941px) {
  .nav-links > a:not(.nav-call) { color: #3b4757 !important; }
  .nav-links > a:not(.nav-call):hover,
  .nav-links > a.is-current { color: #0f1822 !important; background: rgba(15, 24, 34, .07) !important; }
  .nav .lang { background: #fff !important; border: 1px solid #d5dce5 !important; }
  .nav .lang-btn { color: #5d6b7c !important; }
  .nav .lang-btn.is-on { background: rgba(49, 105, 195, .10) !important; color: #2f63c0 !important; box-shadow: inset 0 0 0 1px rgba(49, 105, 195, .25) !important; }
}
.burger {
  background: #fff !important;
  border: 1px solid #cfd7e1 !important;
  box-shadow: 0 2px 8px rgba(15, 24, 34, .08) !important;
}
.burger span { background: #2b3644 !important; }

/* Homepagina: eerst de foto, helder en zonder donkere laag, daaronder de titel
   in donkere tekst op lichte grond. */
.home .topfoto { height: min(calc(100vw / 3), 560px) !important; margin-top: 78px !important; }
.home .topfoto img { filter: none !important; object-position: 50% 50% !important; transform: none !important; }
.home .topfoto::after { background: linear-gradient(180deg, rgba(240, 243, 247, 0) 88%, rgba(240, 243, 247, .9) 100%) !important; }
.home .hero {
  margin-top: 0 !important; min-height: 0 !important; position: relative; z-index: 4;
  padding-top: clamp(8px, 2vw, 28px) !important; padding-bottom: clamp(32px, 5vw, 72px) !important;
  color: #0f1822 !important;
  background: linear-gradient(180deg, #f0f3f7 0%, #f6f8fb 100%);
}
.home .hero h1 { color: #0f1822 !important; -webkit-text-fill-color: #0f1822 !important; text-shadow: none !important; }
.home .hero .lede { color: #4a5a6e !important; text-shadow: none !important; }
.home .hero .btn:not(.btn-glow) { border: 1px solid #cfd7e1 !important; }
.home .hero .hero-rating { background: #fff !important; border-color: #d7dee7 !important; }
.home .hero .hero-rating b, .home .hero .hero-rating .cnt { color: #0f1822 !important; }
@media (min-width: 901px) {
  .home .hero { overflow: visible !important; }
  .home .hero .hero-grid { align-items: start !important; }
  .home .hero .wiz { margin-top: 24px !important; position: relative; z-index: 3; box-shadow: 0 24px 60px rgba(15, 24, 34, .12) !important; }
}
@media (max-width: 940px) {
  .home .topfoto { height: 360px !important; margin-top: 65px !important; }
  .home .topfoto img { object-position: 60% 50% !important; }
}
@media (max-width: 520px) {
  .home .topfoto { height: 205px !important; }
  .home .hero h1 { font-size: clamp(1.9rem, 8.6vw, 2.4rem) !important; margin-top: 4px !important; margin-bottom: 12px !important; }
  .home .hero .cta-row { margin-top: 18px !important; }
}

/* Andere pagina's met een fotoband (diensten): foto helder, enkel zacht naar de lichte grond overlopen. */
body:not(.home) .topfoto::after {
  background: linear-gradient(180deg, rgba(240, 243, 247, 0) 62%, rgba(240, 243, 247, .95) 100%) !important;
}
body:not(.home) .topfoto img { filter: none !important; transform: scale(1.1); transform-origin: 55% 40%; }

/* Privacymelding onder de formulieren: link duidelijk als link tonen. */
.form-privacy a, [data-i18n="ctPrivacy"] a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }