/* ════════════════════════════════════════════════════════════
   Rivari Infra — donkere antraciet kop- en voetbalk
   Antraciet #474A51: neutraal, valt tussen het warme #302e2e
   (huidig) en het koele #3a3e44 (optie A), afgestemd op de
   bedrijfs-T-shirts. Logo wordt de licht-op-donker variant.
   Koppel dit bestand ná style.css. Alleen nav + footer wijzigen,
   de rest van de pagina blijft ongemoeid.
   ════════════════════════════════════════════════════════════ */
:root {
  --chrome: #474A51;
}

/* ── Bovenbalk ───────────────────────────────────────────── */
.nav {
  background: var(--chrome);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.nav-links a {
  color: #ffffff;
  opacity: 0.62;
}
.nav-links a:hover,
.nav-links a.active {
  opacity: 1;
}
.nav-links a.active {
  border-bottom-color: rgba(255, 255, 255, 0.85);
}

/* CTA: lichte knop die oplicht op het donker */
.nav-links a.nav-cta {
  background: #f0f2f5 !important;
  color: #474A51 !important;
  opacity: 1;
}
.nav-links a.nav-cta:hover {
  background: #ffffff !important;
}

/* Burger licht */
.burger span {
  background: #ffffff;
}

/* ── Mobiel menu (zelfde antraciet) ──────────────────────── */
.mobile-menu {
  background: var(--chrome);
}
.mobile-menu a {
  color: #ffffff;
  border-bottom-color: rgba(255, 255, 255, 0.1);
}
.mobile-menu .mobile-cta {
  background: #f0f2f5 !important;
  color: #474A51 !important;
}

/* ── Subpagina-hero (page-hero) — volledige kleurenfoto met donkere waas (stijl A) ── */
.page-hero {
  position: relative;
  overflow: hidden;
  background: var(--color-dark);
  border-bottom: none;
}
/* Gelijke hoogte op alle subpagina's, inhoud verticaal gecentreerd
   (geldt niet voor de homepage — die gebruikt .hp-hero) */
@media (min-width: 768px) {
  .page-hero {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 460px;
  }
}
.page-hero > * { position: relative; z-index: 2; }
/* Achtergrondfoto + donkere waas links voor leesbaarheid van de witte tekst */
.page-hero .page-hero-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
}
.page-hero .page-hero-scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(38,40,44,0.86) 0%, rgba(38,40,44,0.55) 46%, rgba(38,40,44,0.06) 85%);
}
.page-hero .h1 { color: #ffffff; }
.page-hero .eyebrow { color: rgba(255,255,255,0.82); }
.page-hero .body { color: rgba(255,255,255,0.9); }

/* ── Voetbalk ────────────────────────────────────────────── */
.footer {
  background: var(--chrome);
  border-top: none;
}
.footer-col-title {
  color: #ffffff;
}
.footer a {
  color: rgba(255, 255, 255, 0.6);
}
.footer a:hover {
  color: #ffffff;
}
.footer-tagline {
  color: #ffffff;
}
.footer-copy {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.5);
}