/* ============================================================
   ARNOU — Components
   Navigation · Footer · Cards · Project Filters
   ============================================================ */

/* ── Navigation ───────────────────────────────────────────── */
.site-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  height: var(--nav-height);
  display: flex;
  align-items: center;
  transition: background-color var(--transition-base),
              box-shadow var(--transition-base);
  /* Start transparent over dark hero */
  background-color: transparent;
}

.site-nav.scrolled {
  background-color: var(--color-bg);
  box-shadow: 0 1px 0 var(--color-border), var(--shadow-sm);
}

.site-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--space-4);
}

/* Logo */
.site-nav__logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.site-nav__logo img {
  height: 40px;
  width: auto;
  transition: opacity var(--transition-base);
}

/* Donker logo (voor transparante nav op hero): standaard zichtbaar */
.site-nav__logo-dark { display: block; }
.site-nav__logo-light { display: none; }

/* Licht logo (voor witte nav na scroll): toon bij scrolled */
.site-nav.scrolled .site-nav__logo-dark { display: none; }
.site-nav.scrolled .site-nav__logo-light { display: block; }

/* Pagina's die altijd scrolled zijn (geen dark logo nodig) */
.site-nav__logo-light:only-child { display: block; }

/* Links */
.site-nav__links {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.site-nav__link {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 500;
  color: rgba(255,255,255,0.9);
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-md);
  transition: color var(--transition-fast),
              background-color var(--transition-fast);
  position: relative;
}

.site-nav__link::after {
  content: '';
  position: absolute;
  bottom: 4px; left: 0.75rem; right: 0.75rem;
  height: 2px;
  background-color: var(--color-accent);
  transform: scaleX(0);
  transition: transform var(--transition-fast);
  transform-origin: left;
}

.site-nav__link:hover,
.site-nav__link.active {
  color: #fff;
}
.site-nav__link:hover::after,
.site-nav__link.active::after {
  transform: scaleX(1);
}

.site-nav.scrolled .site-nav__link {
  color: var(--color-text-secondary);
}
.site-nav.scrolled .site-nav__link:hover,
.site-nav.scrolled .site-nav__link.active {
  color: var(--color-text);
}

/* Dropdown onder "Over Arnou" (open/dicht via .is-open, gestuurd door main.js) */
.site-nav__item--has-sub {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
}

.site-nav__sub-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: rgba(255,255,255,0.9);
  transition: color var(--transition-fast);
}

.site-nav__sub-toggle:hover,
.site-nav__item--has-sub.is-open .site-nav__sub-toggle {
  color: #fff;
}

.site-nav.scrolled .site-nav__sub-toggle {
  color: var(--color-text-secondary);
}
.site-nav.scrolled .site-nav__sub-toggle:hover,
.site-nav.scrolled .site-nav__item--has-sub.is-open .site-nav__sub-toggle {
  color: var(--color-text);
}

.site-nav__sub-toggle:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.site-nav__chevron {
  display: block;
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--transition-fast);
}

.site-nav__sub-toggle[aria-expanded="true"] .site-nav__chevron {
  transform: translateY(2px) rotate(-135deg);
}

/* Altijd wit met donkere tekst, ook boven een donkere hero */
.site-nav__sub {
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  min-width: 240px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  box-shadow: 0 12px 32px rgba(0,0,0,.10);
  padding: 8px 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
  z-index: 1000;
}

/* Onzichtbare brug over de 12px tussen link en menu, zodat mouseleave niet te vroeg vuurt */
.site-nav__sub::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 12px;
}

.site-nav__item--has-sub.is-open .site-nav__sub {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear 0s;
}

.site-nav__sub-link {
  display: block;
  padding: 10px 20px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: .95rem;
  color: var(--color-text);
  text-transform: none;
  letter-spacing: 0;
  white-space: nowrap;
  transition: color var(--transition-fast), background-color var(--transition-fast);
}

.site-nav__sub-link:hover,
.site-nav__sub-link.active {
  color: var(--color-accent);
  background-color: var(--color-surface);
}

.site-nav__sub-link:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
}

@media (prefers-reduced-motion: reduce) {
  .site-nav__sub,
  .site-nav__item--has-sub.is-open .site-nav__sub,
  .site-nav__chevron {
    transition: none;
  }
}

/* CTA button in nav */
.site-nav__cta {
  margin-left: var(--space-2);
}

/* Hamburger */
.site-nav__hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 40px; height: 40px;
  gap: 5px;
  cursor: pointer;
  padding: 4px;
}

.site-nav__hamburger span {
  display: block;
  width: 22px; height: 2px;
  background-color: #fff;
  border-radius: 2px;
  transition: transform var(--transition-fast),
              opacity var(--transition-fast),
              background-color var(--transition-fast);
}

.site-nav.scrolled .site-nav__hamburger span {
  background-color: var(--color-text);
}

.site-nav__hamburger.open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.site-nav__hamburger.open span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.site-nav__hamburger.open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Mobile menu overlay */
.site-nav__mobile {
  display: none;
  position: fixed;
  top: var(--nav-height); left: 0; right: 0;
  background-color: var(--color-bg);
  border-top: 1px solid var(--color-border);
  box-shadow: var(--shadow-lg);
  padding: var(--space-3);
  z-index: 999;
  flex-direction: column;
  gap: var(--space-1);
  /* Met de sublinks van "Over Arnou" kan het menu hoger zijn dan het scherm */
  max-height: calc(100vh - var(--nav-height));
  max-height: calc(100dvh - var(--nav-height));
  overflow-y: auto;
  overscroll-behavior: contain;
}

.site-nav__mobile.open {
  display: flex;
}

.site-nav__mobile-link {
  font-size: 1rem;
  font-weight: 800;
  color: var(--color-text-secondary);
  padding: 0.75rem var(--space-2);
  border-radius: var(--radius-md);
  border-bottom: 1px solid var(--color-border-light);
  transition: color var(--transition-fast), background-color var(--transition-fast);
}

.site-nav__mobile-link:last-of-type { border-bottom: none; }

.site-nav__mobile-link:hover {
  color: var(--color-text);
  background-color: var(--color-surface);
}

/* Subpagina's van "Over Arnou": altijd zichtbaar, ingesprongen */
.site-nav__mobile-link--sub {
  padding-left: 40px;
  font-size: .95rem;
  font-weight: 500;
  color: var(--color-text-secondary);
}

.site-nav__mobile-cta {
  margin-top: var(--space-2);
  text-align: center;
}

/* Responsive nav */
@media (max-width: 1024px) {
  .site-nav__links,
  .site-nav__cta {
    display: none;
  }
  .site-nav__hamburger {
    display: flex;
  }
}

/* ── Footer ───────────────────────────────────────────────── */
.site-footer {
  background-color: var(--color-dark);
  color: rgba(255,255,255,0.75);
  padding-top: var(--space-12);
}

.site-footer__grid {
  display: grid;
  grid-template-columns: 1fr 1.6fr 0.7fr 1.4fr;
  gap: var(--space-8);
  padding-bottom: var(--space-10);
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

/* Footer brand column */
.site-footer__brand img {
  height: auto;
  width: 100%;
  max-width: 280px;
  margin-bottom: var(--space-3);
}

.site-footer__tagline {
  font-size: 1.25rem;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.55);
  margin-bottom: var(--space-3);
}

/* Footer newsletter */
.site-footer__newsletter .site-footer__title {
  color: #fff;   /* rood haalt op de donkere footer maar 3,1:1 */
  font-size: 1rem;
  letter-spacing: 0.06em;
}

.site-footer__newsletter-desc {
  font-size: 0.875rem;
  line-height: 1.6;
  color: rgba(255,255,255,0.55);
  margin-bottom: var(--space-3);
}

.site-footer__newsletter-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.site-footer__newsletter-field input {
  width: 100%;
  padding: 0.75rem 1rem;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: rgba(255,255,255,0.9);
  background-color: rgba(255,255,255,0.08);
  border: 2px solid transparent;
  border-radius: var(--radius-md);
  outline: none;
  transition: border-color var(--transition-fast);
}

.site-footer__newsletter-field input::placeholder {
  color: rgba(255,255,255,0.4);
}

.site-footer__newsletter-field input:focus {
  border-color: var(--color-accent);
}

.site-footer__newsletter-consent {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: rgba(255,255,255,0.55);
  cursor: pointer;
}

.site-footer__newsletter-consent input[type="checkbox"] {
  margin-top: 2px;
  flex-shrink: 0;
  accent-color: var(--color-accent);
}

.site-footer__newsletter-consent a {
  color: rgba(255,255,255,0.8);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.site-footer__newsletter-consent a:hover {
  color: #fff;
}

.site-footer__newsletter-btn {
  align-self: flex-start;
}

/* Footer column titles */
.site-footer__title {
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  margin-bottom: var(--space-3);
}

/* Footer nav links */
.site-footer__nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.site-footer__nav a {
  font-size: 0.9375rem;
  color: rgba(255,255,255,0.7);
  transition: color var(--transition-fast);
}
.site-footer__nav a:hover { color: #fff; }

/* Footer contact info */
.site-footer__contact-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
  font-size: 0.9rem;
  color: rgba(255,255,255,0.7);
}

.site-footer__contact-item svg {
  flex-shrink: 0;
  margin-top: 3px;
  color: var(--color-accent);
}

/* Footer hours */
.site-footer__hours {
  font-size: 0.875rem;
  line-height: 1.8;
  color: rgba(255,255,255,0.55);
}

/* Footer bottom bar */
.site-footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-block: var(--space-4);
  font-size: 0.8125rem;
  color: rgba(255,255,255,0.35);
  gap: var(--space-3);
  flex-wrap: wrap;
}

.site-footer__bottom-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.site-footer__bottom-links a {
  color: rgba(255,255,255,0.35);
  transition: color var(--transition-fast);
}
.site-footer__bottom-links a:hover { color: rgba(255,255,255,0.7); }

/* Footer responsive */
@media (max-width: 1024px) {
  .site-footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
  }
}

@media (max-width: 768px) {
  .site-footer__grid {
    grid-template-columns: 1fr;
    gap: var(--space-5);
    padding-bottom: var(--space-6);
  }
  .site-footer {
    padding-top: var(--space-8);
  }
}

/* ── Project Card ─────────────────────────────────────────── */
.project-card {
  background-color: var(--color-bg);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-base),
              box-shadow var(--transition-base);
  cursor: pointer;
}

.project-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.project-card__image {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background-color: var(--color-surface);
}

.project-card__image img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.project-card:hover .project-card__image img {
  transform: scale(1.04);
}

.project-card__badge {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}

/* Labels op de kaartfoto: groter en leesbaar op lichte renders */
.project-card__badge .badge {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 0.5rem 0.8rem;
  line-height: 1;
  gap: 0.35rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
}
.badge--laatste    { background: var(--color-accent); color: #fff; }
.badge--binnenkort { background: var(--color-dark); color: #fff; }
.badge--verkocht   { background: #fff; color: var(--color-text); }

/* Voetnoot bij het sterretje op het 6%-zegel, onder elk kaartenblok
   (projecten.html, index.html, investeren.html) */
.projects-footnote {
  margin-top: var(--space-4);
  font-size: 0.8125rem;
  color: var(--color-text-light);
}

/* Hoekje rechtsonder op de kaartfoto: "Sfeerbeeld", "Render", ...
   Herbruikbaar voor elke kaart met een niet-fotografisch beeld. */
.project-card__label {
  position: absolute;
  right: var(--space-2);
  bottom: var(--space-2);
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #FFFFFF;
  background-color: rgba(32, 32, 33, 0.72);
  padding: 0.35rem 0.6rem;
  line-height: 1;
  pointer-events: none;
}

/* Zegel 6% btw: rechtsboven op de kaartfoto, los van de statuslabels links */
.project-card__seal {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background-color: var(--color-accent);
  border: 2px solid #fff;
  color: #fff;
  font-family: var(--font-display);
  line-height: 1;
  text-align: center;
  box-shadow: 0 3px 10px rgba(0,0,0,0.22);
}
.project-card__seal-pct {
  font-size: 1.375rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.project-card__seal-label {
  margin-top: 3px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
}
@media (max-width: 640px) {
  .project-card__seal { width: 62px; height: 62px; }
  .project-card__seal-pct { font-size: 1.125rem; }
}

/* Met een 6%-zegel rechtsboven stopt het statuslabel vóór het zegel;
   een lang label loopt dan over twee regels in plaats van eronder */
.project-card__seal ~ .project-card__badge { right: calc(var(--space-2) + 72px + 8px); }
.project-card__seal ~ .project-card__badge .badge { line-height: 1.25; }
@media (max-width: 640px) {
  .project-card__seal ~ .project-card__badge { right: calc(var(--space-2) + 62px + 8px); }
}

.project-card__body {
  padding: var(--space-3) var(--space-3) var(--space-4);
}

.project-card__location {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  background-color: var(--color-accent);
  padding: 0.375rem 0.75rem;
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-2);
}

.project-card__location svg { flex-shrink: 0; color: #fff; }

.project-card__title {
  font-size: 1.1875rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--space-2);
  line-height: 1.25;
}

.project-card__meta {
  display: flex;
  gap: var(--space-3);
  font-size: 0.875rem;
  color: var(--color-text-secondary);
}

.project-card__link {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--space-3);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-accent);
  transition: gap var(--transition-fast);
}

.project-card:hover .project-card__link { gap: 10px; }

/* ── Filter tabs ──────────────────────────────────────────── */
.filter-tabs {
  display: flex;
  gap: var(--space-1);
  flex-wrap: wrap;
}

.filter-tab {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text-secondary);
  padding: 0.5rem 1.125rem;
  border-radius: 100px;
  border: 1.5px solid var(--color-border);
  cursor: pointer;
  transition: color var(--transition-fast),
              background-color var(--transition-fast),
              border-color var(--transition-fast);
}

.filter-tab:hover {
  color: var(--color-text);
  border-color: var(--color-mid-grey);
}

.filter-tab.active {
  color: #fff;
  background-color: var(--color-text);
  border-color: var(--color-text);
}

/* ── Grondverkoop CTA banner (gedeeld component) ──────────── */
.grond-cta {
  background-color: var(--color-accent);
  padding-block: var(--space-10);
  position: relative;
  overflow: hidden;
}

.grond-cta::before {
  content: '';
  position: absolute;
  top: -50%; right: -5%;
  width: 50vw; height: 200%;
  background: rgba(0,0,0,0.08);
  clip-path: polygon(20% 0%, 100% 0%, 80% 100%, 0% 100%);
  pointer-events: none;
}

.grond-cta__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  flex-wrap: wrap;
}

.grond-cta__text { color: #fff; }

.grond-cta__label {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.75;
  margin-bottom: var(--space-2);
}

.grond-cta__title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 800;
  line-height: 1.15;
  margin-bottom: var(--space-2);
}

.grond-cta__sub {
  font-size: 1rem;
  opacity: 0.85;
  max-width: 46ch;
}

.btn--white {
  background-color: #fff;
  color: var(--color-accent);
  border: 2px solid #fff;
  font-weight: 700;
  justify-content: center;
}
.btn--white:hover, .btn--white:focus-visible {
  background-color: rgba(255,255,255,0.92);
}

.btn--dark {
  background-color: rgba(255,255,255,0.12);
  color: #fff;
  border: 1.5px solid rgba(255,255,255,0.2);
  font-weight: 600;
}
.btn--dark:hover, .btn--dark:focus-visible {
  background-color: rgba(255,255,255,0.2);
  border-color: rgba(255,255,255,0.35);
}

@media (max-width: 768px) {
  .grond-cta__inner {
    flex-direction: column;
    align-items: flex-start;
  }
  .grond-cta .btn { width: 100%; justify-content: center; text-align: center; }
}

/* ── Honeypot voor formulieren ──────────────────────────── */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ── Cloudflare Turnstile slot in formulieren ──────────── */
.turnstile-slot { margin-block: 16px; min-height: 0; }

/* ============================================================
   Cookie consent banner (rechtsonder op desktop, fullwidth mobiel)
   z-index: boven nav (100), onder gate (10000)
   ============================================================ */
.cookie-banner {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 480px;
  max-width: calc(100vw - 32px);
  background: #ffffff;
  color: var(--color-dark, #202021);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);
  padding: 24px;
  font-family: 'Manrope', sans-serif;
  z-index: 9500;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .25s ease, transform .25s ease;
  pointer-events: none;
}
.cookie-banner--open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.cookie-banner__title {
  margin: 0 0 8px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--color-dark, #202021);
}
.cookie-banner__text {
  margin: 0 0 16px;
  font-size: 0.9rem;
  line-height: 1.5;
  color: #4b4b4c;
}
.cookie-banner__text a {
  color: var(--color-accent, #DB0711);
  text-decoration: underline;
}
.cookie-banner__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.cookie-banner__btn {
  width: 100%;
  justify-content: center;
  text-align: center;
  font-size: 0.9rem;
  padding: 10px 16px;
}

@media (max-width: 640px) {
  .cookie-banner {
    left: 12px;
    right: 12px;
    bottom: 12px;
    width: auto;
    max-width: none;
    padding: 20px;
    border-radius: 12px;
  }
  .cookie-banner__actions { grid-template-columns: 1fr; }
}

/* ── Map-consent placeholder (voor het accepteren van maps) ── */
.map-consent {
  position: relative;
  width: 100%;
  min-height: 300px;
  height: 100%;
  background: #f2f2f3;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  text-align: center;
  color: #4b4b4c;
  font-family: 'Manrope', sans-serif;
  font-size: 0.9rem;
  line-height: 1.5;
}
.map-consent::before {
  content: 'Kaart geblokkeerd door uw cookievoorkeuren. Aanvaard maps-cookies om de kaart te tonen.';
  max-width: 320px;
}
.map-consent--loaded {
  padding: 0;
  background: transparent;
  display: block;
}
.map-consent--loaded::before { content: none; }

/* ============================================================
   Autofill — houdt browser-ingevulde velden leesbaar
   Chrome negeert `color` bij autofill, dus we gebruiken
   -webkit-text-fill-color en een inset box-shadow-truc.
   ============================================================ */

/* Standaard (lichte) formulieren */
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-text-fill-color: var(--color-text);
  box-shadow: 0 0 0 1000px var(--color-bg) inset;
  -webkit-box-shadow: 0 0 0 1000px var(--color-bg) inset;
  transition: background-color 9999s ease-in-out 0s;
}

/* Donkere formulieren */
.invest-contact__form input:-webkit-autofill,
.invest-contact__form textarea:-webkit-autofill,
.invest-contact__form select:-webkit-autofill,
.site-footer__newsletter-form input:-webkit-autofill {
  -webkit-text-fill-color: #fff;
  box-shadow: 0 0 0 1000px var(--color-dark-surface, var(--color-dark)) inset;
  -webkit-box-shadow: 0 0 0 1000px var(--color-dark-surface, var(--color-dark)) inset;
  caret-color: #fff;
}

/* ============================================================
   Validatie-staten voor js/form.js (werken op elk formulier)
   ============================================================ */
.form-group input.error,
.form-group select.error,
.form-group textarea.error {
  border-color: var(--color-accent);
  background-color: rgba(219, 7, 17, 0.03);
}

.form-group .error-msg {
  display: none;
  font-size: 0.8rem;
  color: var(--color-accent);
  font-weight: 500;
  margin-top: 4px;
}

.form-group.has-error .error-msg {
  display: block;
}

/* Op donkere formulieren blijft rood het accent, achtergrond iets subtieler */
.invest-contact__form .form-group input.error,
.invest-contact__form .form-group select.error,
.invest-contact__form .form-group textarea.error,
.site-footer__newsletter-form input.error {
  border-color: var(--color-accent);
  background-color: rgba(219, 7, 17, 0.08);
}

/* ── Stats bar ────────────────────────────────────────────── */
.stats {
  background-color: var(--color-dark-surface);
  border-top: 1px solid rgba(255,255,255,0.06);
}

.stats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding-block: var(--space-6);
}

.stats__item {
  padding: var(--space-4);
  text-align: center;
  border-right: 1px solid rgba(255,255,255,0.08);
}

.stats__item:last-child { border-right: none; }

.stats__number {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 800;
  color: #fff;
  line-height: 1;
  margin-bottom: var(--space-1);
}

.stats__number em {
  font-style: normal;
  color: var(--color-accent);
}

.stats__label {
  font-size: 0.875rem;
  color: rgba(255,255,255,0.5);
  font-weight: 400;
  letter-spacing: 0.03em;
}

@media (max-width: 768px) {
  .stats__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
  }
  .stats__item {
    border-right: 1px solid rgba(255,255,255,0.08);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    padding: var(--space-4) var(--space-2);
  }
  .stats__item:nth-child(even) { border-right: none; }
  .stats__item:nth-child(3),
  .stats__item:nth-child(4) { border-bottom: none; }
}

/* ============================================================
   Kaart met eigen rode pin
   De pin van Google zit in een iframe van een ander domein en
   vergrijst mee met het filter op de kaart. Daarom leggen we er
   onze eigen pin over, en wordt de hele kaart een routelink.
   ============================================================ */
.map-pin-wrap {
  position: relative;
  display: block;
  /* width is nodig: op de homepage is de kaarthouder een flexcontainer,
     waarin een link zonder breedte terugvalt op de 300px van het iframe */
  width: 100%;
  height: 100%;
  min-height: inherit;
  color: inherit;
}

/* De kaart zelf vangt geen muis meer op: elke klik gaat naar de routelink */
.map-pin-wrap iframe {
  pointer-events: none;
}

.map-pin {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  display: none;
  /* maat volgt de viewBox, zodat de punt exact op de onderrand valt */
  width: 43px;
  height: 54.5px;
  /* De punt valt op het middelpunt van de kaart. De marker van Google zelf
     staat 2px lager; die offset houdt onze pin er volledig overheen. */
  --map-pin-offset: 2px;
  transform: translate(-50%, calc(-100% + var(--map-pin-offset)));
  color: var(--color-accent);
  pointer-events: none;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.35));
  transition: transform var(--transition-fast);
}

/* Pas tonen als de kaart er effectief staat, niet op de toestemmingsplaceholder */
.map-consent--loaded + .map-pin,
.map-pin-wrap:has(iframe) .map-pin {
  display: block;
}

.map-pin svg {
  display: block;
  width: 100%;
  height: 100%;
}

.map-pin-wrap:hover .map-pin,
.map-pin-wrap:focus-visible .map-pin {
  transform: translate(-50%, calc(-100% + var(--map-pin-offset) - 2px));
}

.map-pin-wrap:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
}

/* Toelichting onder de kaart; de routeknop sluit er direct op aan */
.visit-info {
  max-width: 640px;
  margin: var(--space-6) auto var(--space-3);
  text-align: center;
}

.visit-info__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--color-text);
  margin-bottom: 0.75rem;
}

.visit-info__text {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--color-text-secondary);
  margin: 0;
}

.map-route {
  margin-top: var(--space-3);
  text-align: center;
}

/* Op de homepage staat de kaart in een grid: de knop neemt een eigen rij */
.contact-preview__grid .map-route {
  grid-column: 1 / -1;
}

@media (prefers-reduced-motion: reduce) {
  .map-pin {
    transition: none;
  }
}

/* Neutrale statusbadge (bv. "Verkoopstart jan. 2027"). De rand is een
   inset-schaduw, zodat de badge even groot blijft als de andere badges. */
.badge--neutral {
  background: var(--color-surface);
  color: var(--color-text-secondary);
  box-shadow: inset 0 0 0 1px var(--color-border);
}

/* ── Page hero met foto-achtergrond ─────────────────────── */
/* <img class="page-hero__bg"> als eerste kind (alt-tekst en afmetingen blijven), donkere overlay erover */
.page-hero--image {
  position: relative;
  overflow: hidden;
  background-color: var(--color-dark);
  min-height: 420px;
  display: flex;
  align-items: center;
}

.page-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  z-index: 0;
}

.page-hero--image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(32,32,33,0.88) 0%, rgba(32,32,33,0.70) 45%, rgba(32,32,33,0.40) 100%);
  z-index: 1;
}

.page-hero--image .container {
  position: relative;
  z-index: 2;
  width: 100%;   /* flex-kind: anders krimpt de container tot de tekstbreedte */
}