/* ================================================
   IMKERIJ DE GROENE WEG — style.css
   Fase 2: CSS fundament — custom properties, reset, typografie, utilities
================================================ */


/* ================================================
   1. CUSTOM PROPERTIES (ONTWERPTOKENS)
================================================ */

:root {
  /* Kleuren */
  --color-donkergrijs: #444546;
  --color-grijstint:   #E7E6E7;
  --color-brons:       #98694C;
  --color-saliegroen:  #7A9672;
  --color-honingzand:  #efe6d4;   /* honingzand — achtergrond Verkooppunten */
  --color-mosgroen:    #627A58;
  --color-creme:       #faf8f3;

  /* Onze Honing — sectie, banner & etiket-accenten (web) */
  --color-creme-honing:       var(--color-creme);   /* gelijk aan Over (#faf8f3) — crème-blok Onze Honing */
  --color-honing-dark:        #2c2723;   /* titels Onze Honing */
  --color-honing-grijs:       #6b6359;   /* kaartbeschrijving */
  --color-honing-eyebrow:     #b07a3f;   /* accent-brons eyebrow — streekmarkt-blok */
  --color-banner-eyebrow:     #c79a6d;   /* eyebrow op de donkere banner */
  --color-brons-licht:        #bc8b5e;   /* lichte accent-brons — IG-icoon streekmarkt-link */
  --color-brons-licht-hover:  #a87a4f;   /* lichte accent-brons hover — streekmarkt-link hover */
  --accent-voorjaar:          #7ecbb0;   /* mint — etiket Voorjaarshoning */
  --accent-koolzaad:          #7c93d8;   /* blauw — etiket Koolzaadhoning */
  --accent-zomer:             #f3a35a;   /* oranje — etiket Zomerhoning */

  /* Lettertypen */
  --font-display: 'Josefin Sans', sans-serif;
  --font-body:    'Jost', sans-serif;
  --font-accent:  'Caveat', cursive;

  /* Spacing */
  --section-padding: 70px;

  /* Hoeken */
  --radius-small:  3px;
  --radius-medium: 10px;
  --radius-field:  8px;
}


/* ================================================
   2. RESET & BOX-MODEL
================================================ */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: auto; /* smooth scroll wordt in JS gedaan (zachter/trager) — zie inline script onderaan index.html */
  font-size: 16px;
}

body {
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--color-donkergrijs);
  background-color: #ffffff;
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

ul {
  list-style: none;
}

a {
  color: var(--color-brons);
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  color: var(--color-donkergrijs);
}


/* ================================================
   3. TYPOGRAFIE
================================================ */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1.2;
  color: var(--color-donkergrijs);
}

h1 { font-size: clamp(2rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.25rem); }
h3 { font-size: clamp(1.125rem, 2vw, 1.5rem); }
h4 { font-size: 1.125rem; }

p {
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.7;
  color: var(--color-donkergrijs);
}

p + p {
  margin-top: 1em;
}

.text-accent {
  font-family: var(--font-accent);
  color: var(--color-brons);
}


/* ================================================
   4. KNOPPEN
================================================ */

.btn-primary {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #ffffff;
  background-color: var(--color-brons);
  border: 2px solid var(--color-brons);
  border-radius: var(--radius-small);
  padding: 0.75rem 1.75rem;
  min-height: 44px;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
  text-decoration: none;
}

.btn-primary:hover {
  background-color: transparent;
  color: var(--color-brons);
}

.btn-outline {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-donkergrijs);
  background-color: transparent;
  border: 2px solid var(--color-donkergrijs);
  border-radius: var(--radius-small);
  padding: 0.75rem 1.75rem;
  min-height: 44px;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
  text-decoration: none;
}

.btn-outline:hover {
  background-color: var(--color-donkergrijs);
  color: #ffffff;
}

/* Knop op donkere achtergrond */
.btn-outline-light {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #ffffff;
  background-color: transparent;
  border: 2px solid var(--color-brons);
  border-radius: var(--radius-small);
  padding: 0.75rem 1.75rem;
  min-height: 44px;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
  text-decoration: none;
}

.btn-outline-light:hover {
  background-color: var(--color-brons);
  color: #ffffff;
}


/* ================================================
   5. UTILITY CLASSES
================================================ */

.container {
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

/* Consistente verticale witruimte tussen alle secties — geen aparte blokken,
   alleen padding. Secties onderscheiden zich via een zachte achtergrondwisseling
   (wit ↔ crème/salie), niet via harde lijnen. De hero (full-bleed, 100vh) is
   bewust uitgezonderd. */
section:not(.hero) {
  padding: var(--section-padding) 0;
}

.section-padding {
  padding-top: var(--section-padding);
  padding-bottom: var(--section-padding);
}

/* Ademruimte-spacer tussen secties — neutrale band in de kleur van de
   aangrenzende sectie; verzacht de overgang zonder harde breuk. Draagt het
   sectie-anker zodat navigatie bovenaan de witruimte landt. */
.section-spacer {
  height: clamp(48px, 8vw, 80px);
  background-color: var(--color-creme);
}

/* Spacer in het honingzand van de Verkooppunten-sectie */
.section-spacer--honingzand {
  background-color: var(--color-honingzand);
}

.text-center { text-align: center; }
.text-white  { color: #ffffff; }
.text-brons  { color: var(--color-brons); }


/* ================================================
   6. NAVIGATIE
================================================ */

#navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  transition: background-color 0.35s ease, box-shadow 0.35s ease;
}

/* .scrolled = homepage bij scrollen; .nav-solid = subpagina's (altijd donker) */
#navbar.scrolled,
#navbar.nav-solid {
  background-color: var(--color-donkergrijs);
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.18);
}

.nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.25rem;
  height: 72px;
}

.nav-logo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.05rem, 4vw, 1.25rem);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #ffffff;
  text-decoration: none;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
  transition: color 0.2s ease;
  white-space: nowrap;
}

.nav-logo:hover {
  color: var(--color-brons);
}

#navbar.scrolled .nav-logo,
#navbar.nav-solid .nav-logo {
  text-shadow: none;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  list-style: none;
}

.nav-links a {
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: #ffffff;
  text-decoration: none;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
  transition: color 0.2s ease;
  letter-spacing: 0.02em;
}

.nav-links a:hover {
  color: var(--color-brons);
}

/* Actieve pagina (subpagina's) — lichte brons, leesbaar op het donkergrijs */
.nav-links a.nav-active {
  color: var(--color-brons-licht);
}

#navbar.scrolled .nav-links a,
#navbar.nav-solid .nav-links a {
  text-shadow: none;
}

/* Hamburger */
.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  z-index: 1001;
}

.nav-hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: #ffffff;
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

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

@media (max-width: 768px) {
  .nav-hamburger {
    display: flex;
  }

  .nav-links {
    display: none;
    position: absolute;
    top: 72px;
    left: 0;
    right: 0;
    background-color: var(--color-donkergrijs);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.5rem 0 1rem;
  }

  .nav-links.open {
    display: flex;
  }

  .nav-links li {
    width: 100%;
  }

  .nav-links a {
    display: block;
    padding: 0.875rem 1.5rem;
    text-shadow: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  }

  .nav-links a:hover {
    background-color: rgba(255, 255, 255, 0.06);
  }
}


/* ================================================
   7. HERO
================================================ */

.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  background-image: url('../images/hero-heide.webp');
  background-size: cover;
  background-position: center;
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.28);
  z-index: 0;
}

/* Logo direct onder de navbar — zo hoog mogelijk in de lucht */
.hero-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  padding-top: 110px;
  padding-left: 2rem;
  padding-right: 2rem;
}

/* Web-embleem: gecentreerd op de hero, bovenkant op 110px (= padding-top hierboven) */
.hero-logo-main {
  height: 300px;
  width: auto;
  display: block;
}

/* Tagline: verticaal exact gecentreerd tussen onderkant logo (410px) en bovenkant CTA */
.hero-tagline {
  position: absolute;
  left: 0;
  right: 0;
  top: 410px;                    /* onderkant logo: 110px top + 300px hoogte */
  bottom: calc(5rem + 44px);     /* bovenkant CTA: hero-cta bottom (5rem) + knophoogte (44px) */
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0 1.5rem;
  font-family: var(--font-accent);
  font-size: clamp(1.75rem, 5vw, 2.75rem);
  line-height: 1.2;
  color: #ffffff;
  text-align: center;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

/* CTA-knoppen: absoluut onderaan de hero — altijd zichtbaar, los van de logogrootte */
.hero-cta {
  position: absolute;
  bottom: 5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  gap: 1rem;
  white-space: nowrap;
}

/* Beide knoppen even breed: min-width ruim genoeg voor het langste label
   ('Over de Imkerij'), zodat 'Onze Honing' mee verbreedt */
.hero-cta .btn-primary {
  min-width: 13rem;
  text-align: center;
}

/* Scroll-indicator: onderaan de hero, smooth (scroll-behavior) naar 'Over de Imkerij' */
.hero-scroll {
  position: absolute;
  left: 50%;
  bottom: 1.5rem;
  transform: translateX(-50%);
  z-index: 2;
  color: #ffffff;
  font-size: 2rem;
  line-height: 1;
  text-decoration: none;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
  transition: opacity 0.2s ease;
  animation: hero-scroll-bounce 2s ease-in-out infinite;
}

.hero-scroll:hover {
  color: var(--color-brons);
}

@keyframes hero-scroll-bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(6px); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-scroll {
    animation: none;
  }
}

@media (max-width: 480px) {
  .hero-cta {
    flex-direction: column;
    align-items: center;
    width: 100%;
  }

  .hero-cta .btn-primary {
    width: 100%;
    text-align: center;
  }

  /* CTA stapelt verticaal (2×44px + 1rem gap), tagline-box volgt mee */
  .hero-tagline {
    bottom: calc(5rem + 104px);
  }
}


/* ================================================
   8. OVER DE IMKERIJ
================================================ */

.over {
  background-color: var(--color-creme);
}

/* Twee kolommen: foto's links (iets breder), tekst rechts */
.over-grid {
  display: grid;
  grid-template-columns: 1.32fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

/* Foto-kolom: twee portretten naast elkaar */
.over-portraits {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1rem, 2.5vw, 1.75rem);
  align-items: start;
}

.over-portrait {
  margin: 0;
}

/* Tweede portret iets lager — speelse versprong */
.over-portrait--offset {
  margin-top: clamp(2rem, 6vw, 4rem);
}

.over-portrait img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--radius-medium);
  box-shadow: 0 14px 30px rgba(68, 69, 70, 0.18);
}

.over-portrait-caption {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin-top: 1rem;
}

.over-portrait-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.2rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-donkergrijs);
}

.over-portrait-role {
  font-family: var(--font-body);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--color-brons);
}

/* Tekst-kolom */
.section-eyebrow {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--color-brons);
  margin-bottom: 1.25rem;
}

.over-title {
  margin-bottom: 1.5rem;
}

.over-content p + p {
  margin-top: 1.25rem;
}

/* Knop-groep: meerdere CTA's naast elkaar, wrappen op smal scherm */
.over-actions {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.over-btn {
  flex: 1 1 0;              /* beide knoppen even breed */
  display: inline-flex;
  align-items: center;
  justify-content: center;  /* label + pijltje gecentreerd in de knop */
  gap: 0.6rem;
  white-space: nowrap;      /* label breekt niet af → knophoogte blijft één regel */
}

/* Mobiel: één kolom, foto's boven de tekst */
@media (max-width: 768px) {
  .over-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
}

/* Smal scherm: CTA's stapelen, elk volle breedte (blijven onderling gelijk) */
@media (max-width: 480px) {
  .over-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .over-btn {
    flex: none;
  }
}


/* ================================================
   9. ONZE HONING
================================================ */

/* Banner en crème-blok regelen hun eigen verticale ruimte → globale sectiepadding uit */
section.onze-honing {
  padding: 0;
  background-color: var(--color-creme-honing);
}

/* --- Deel 1: full-bleed bannerfoto met donkere overlay --- */
.honing-banner {
  display: flex;
  align-items: center;
  min-height: clamp(460px, 70vh, 620px);
  /* Donkere gradient (linksonder donker → rechtsboven lichter) bovenop de foto */
  background-image:
    linear-gradient(105deg,
      rgba(40, 28, 18, 0.78) 0%,
      rgba(40, 28, 18, 0.45) 45%,
      rgba(40, 28, 18, 0.15) 100%),
    url('../images/banner-honingpotten.jpg');
  background-size: cover, cover;
  background-position: center, 50% 42%;
  background-repeat: no-repeat, no-repeat;
}

.honing-banner-inner {
  padding-top: clamp(2.5rem, 6vw, 4rem);
  padding-bottom: clamp(2.5rem, 6vw, 4rem);
}

.honing-banner-eyebrow {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--color-banner-eyebrow);
  margin-bottom: 1.25rem;
}

.honing-banner-title {
  margin: 0;
  color: #ffffff;
  /* Ondergrens laag genoeg zodat lange woorden (KOOLZAADHONING) op smal scherm passen */
  font-size: clamp(1.5rem, 6vw, 3.5rem);
  line-height: 1.1;
  letter-spacing: 0.03em;
}

.honing-banner-subtitle {
  max-width: 480px;
  margin-top: 1.5rem;
  color: rgba(255, 255, 255, 0.9);
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  line-height: 1.6;
}

/* --- Deel 2: crème-blok met de drie honingsoorten --- */
/* Top-padding bewust kleiner dan bottom: de kaarten sluiten dichter aan op de
   banner (sneller lezen/scrollen); de header (eyebrow/titel/intro) is verwijderd
   omdat die info dubbelde met de banner. */
.honing-content {
  padding: clamp(40px, 6vw, 64px) 0 clamp(56px, 9vw, 88px);
  background-color: var(--color-creme-honing);
}

/* Drie kaarten — gelijke kolommen */
.honing-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

.honing-card {
  text-align: center;
}

/* Accentkleur per kaart (rand + streepje) via lokale --accent */
.honing-card--voorjaar { --accent: var(--accent-voorjaar); }
.honing-card--koolzaad { --accent: var(--accent-koolzaad); }
.honing-card--zomer    { --accent: var(--accent-zomer); }

.honing-card-media {
  border-radius: 14px;
  overflow: hidden;
  line-height: 0;
  background-color: #ffffff;
}

.honing-card-media img {
  width: 100%;
  height: auto;
  display: block;
}

.honing-card-naam {
  margin-top: 1.5rem;
  color: var(--color-honing-dark);
  font-size: clamp(1.125rem, 2vw, 1.5rem);
}

.honing-card-streep {
  display: block;
  width: 44px;
  height: 3px;
  margin: 0.85rem auto;
  background-color: var(--accent);
  border-radius: 2px;
}

.honing-card-desc {
  color: var(--color-honing-grijs);
  font-size: 1rem;
  line-height: 1.6;
}

/* CTA onder de kaarten — gecentreerd in de sectie, scrollt naar Verkooppunten.
   Standaard .btn-primary (bronstint #98694C) → consistent met de Over-CTA's op
   crème en beter wit-op-knop-contrast dan de lichtere bannerbron. */
.honing-cta {
  margin-top: clamp(2.5rem, 6vw, 4rem);
  text-align: center;
}

.honing-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

/* Mobiel: kaarten onder elkaar */
@media (max-width: 768px) {
  .honing-cards {
    grid-template-columns: 1fr;
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
  }
}


/* ================================================
   10. VERKOOPPUNTEN (LEAFLET-KAART)
================================================ */

.verkooppunten {
  background-color: var(--color-honingzand);
}

/* Header — gecentreerd, zelfde stijl als de Over-sectie (eyebrow + h2) */
.verkooppunten-header {
  text-align: center;
  margin-bottom: clamp(2rem, 5vw, 3rem);
}

.verkooppunten-header .section-eyebrow {
  margin-bottom: 0.75rem;
}

.verkooppunten-title {
  margin: 0;
}

/* Tweekoloms: kaart links (~60%), tekstlijst rechts (~40%) */
.verkooppunten-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
}

/* Hoogte wordt door js/map.js gezet (MAP_HEIGHT_DESKTOP/MOBILE) — één bron van waarheid.
   Witte omkadering rond de kaart. */
#map {
  width: 100%;
  border: 6px solid #ffffff;
  border-radius: var(--radius-medium);
  box-shadow: 0 14px 30px rgba(68, 69, 70, 0.18);
  z-index: 0; /* onder de fixed navbar (z-index 1000) */
}

/* Kaartkolom: kaart + Antwerpen-verwijzing eronder */
.verkooppunten-mapcol {
  min-width: 0; /* laat de kaart krimpen binnen de grid-kolom */
}

/* Verwijzing naar Antwerpen (Middelheim) — wit kaartje onder de kaart, stijl als .vp-item */
.vp-antwerpen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1rem;
  padding: 0.85rem 1.1rem;
  background-color: #ffffff;
  border-radius: var(--radius-medium);
  box-shadow: 0 4px 14px rgba(68, 69, 70, 0.10);
}

.vp-antwerpen-text {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--color-donkergrijs);
}

.vp-antwerpen-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.95rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #ffffff;
  background-color: var(--color-brons);
  border: 0;
  border-radius: var(--radius-small);
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.vp-antwerpen-btn:hover {
  background-color: var(--color-donkergrijs);
}

.vp-antwerpen-btn:focus-visible {
  outline: 2px solid var(--color-brons);
  outline-offset: 2px;
}

/* --- Tekstlijst van verkooppunten (rechts) — statische namen, SEO-vriendelijk --- */
.vp-lijst {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  max-height: 500px;          /* ≈ MAP_HEIGHT_DESKTOP — scrollt indien nodig */
  overflow-y: auto;
  padding-right: 0.25rem;
}

.vp-item {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.7rem 0.95rem;
  background-color: #ffffff;
  border-radius: var(--radius-medium);
  box-shadow: 0 4px 14px rgba(68, 69, 70, 0.10);
  cursor: pointer;
  transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}

.vp-item:hover {
  box-shadow: 0 6px 18px rgba(68, 69, 70, 0.18);
  transform: translateY(-1px);
}

.vp-item:focus-visible {
  outline: 2px solid var(--color-brons);
  outline-offset: 2px;
}

.vp-badge {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: var(--color-brons);
  color: #ffffff;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.85rem;
  line-height: 1;
}

.vp-naam {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-donkergrijs);
}

/* Highlight bij klik op de bijhorende pin (of op het item zelf) — volle bronzen knop */
.vp-item.is-active {
  background-color: var(--color-brons);
  box-shadow: 0 8px 20px rgba(152, 105, 76, 0.35);
}

.vp-item.is-active .vp-naam {
  color: #ffffff;
}

.vp-item.is-active .vp-badge {
  background-color: #ffffff;
  color: var(--color-brons);
}

/* Live filter: verberg locaties die buiten het zichtbare kaartgebied vallen */
.vp-item.is-hidden {
  display: none;
}

/* --- Bronzen locatie-pin (L.divIcon met inline SVG) --- */
.map-pin {
  display: block;
  color: var(--color-brons);
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.35));
}

/* DivIcon-wrappers: geen standaard wit kader (className vervangt leaflet-div-icon) */
.map-pin-icon,
.map-wegwijzer-icon {
  background: transparent;
  border: 0;
}

/* Wegwijzer-pill gecentreerd op zijn ankerpunt */
.map-wegwijzer-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --- Middelheim-wegwijzer: pijl omlaag + label, duidelijk anders dan de pins --- */
.map-wegwijzer {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  white-space: nowrap;
  padding: 0.28rem 0.6rem;
  background-color: rgba(68, 69, 70, 0.88);
  border-radius: 999px;
  color: #ffffff;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
}

.map-wegwijzer svg {
  display: block;
  flex-shrink: 0;
}

/* --- Popup: wit met saliegroen accent (leesbaar op de saliegroen sectie) --- */
.leaflet-popup-content-wrapper {
  background-color: #ffffff;
  border-top: 4px solid var(--color-saliegroen);
  border-radius: var(--radius-medium);
  box-shadow: 0 10px 28px rgba(68, 69, 70, 0.28);
}

.leaflet-popup-tip {
  background-color: #ffffff;
}

.map-popup {
  font-family: var(--font-body);
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--color-donkergrijs);
}

.map-popup strong {
  display: block;
  margin-bottom: 0.35rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-saliegroen);
}

.map-popup a {
  color: var(--color-brons);
  text-decoration: underline;
}

.map-popup a:hover {
  color: var(--color-donkergrijs);
}

/* Mobiel: kaart boven, lijst eronder; lijst niet capped */
@media (max-width: 768px) {
  .verkooppunten-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .vp-lijst {
    max-height: none;
    overflow-y: visible;
  }
}


/* ================================================
   11. STREEKMARKT-BLOK (onder de kaart → Nieuws)
================================================ */

/* Witte kaart op volle containerbreedte, ruime marge boven de kaart */
.streekmarkt-card {
  margin-top: 72px;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  background-color: #ffffff;
  border-radius: 20px;
  overflow: hidden;                       /* foto volgt de afgeronde hoeken */
  box-shadow: 0 18px 40px rgba(68, 69, 70, 0.12);
}

/* Linkerkolom — tekst, verticaal gecentreerd */
.streekmarkt-text {
  padding: clamp(2rem, 4vw, 60px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.streekmarkt-eyebrow {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.8125rem;                   /* ~13px */
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--color-honing-eyebrow);
  margin-bottom: 1.25rem;
}

/* Titel: onze titelfont (Josefin Sans uppercase) i.p.v. de mockup-serif */
.streekmarkt-title {
  margin: 0;
  color: var(--color-honing-dark);
}

.streekmarkt-desc {
  max-width: 440px;
  margin-top: 1.25rem;
  color: var(--color-honing-grijs);
  font-size: 1.125rem;                    /* ~18px */
  font-weight: 300;
  line-height: 1.7;
}

/* "eerste zondag" geaccentueerd in brons */
.streekmarkt-desc strong {
  font-weight: 600;
  color: var(--color-brons);
}

/* Label boven de data-pillen — gedempt, uppercase */
.streekmarkt-data-label {
  margin-top: 1.75rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.8125rem;                   /* ~13px */
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: #a89f8f;                         /* gedempt taupe */
}

/* Data-pillen — flexibele wrap */
.streekmarkt-data {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.streekmarkt-datum {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.7rem 1.15rem;
  background-color: #f4eede;             /* zacht crème */
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 1.0625rem;                   /* ~17px */
  color: var(--color-honing-dark);
}

.streekmarkt-datum-dag {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.8125rem;                   /* ~13px */
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-brons);
}

/* "streekmarkt" linkt naar de IG-pagina — brons, subtiele underline + icoon */
.streekmarkt-link {
  color: var(--color-brons);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(152, 105, 76, 0.45);
  text-underline-offset: 3px;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.streekmarkt-link:hover {
  color: var(--color-brons-licht-hover);
  text-decoration-color: var(--color-brons-licht-hover);
}

.streekmarkt-link .fa-instagram {
  margin-left: 0.4em;
  font-size: 0.95em;
  color: var(--color-brons-licht);
}

/* Rechterkolom — foto, full-bleed binnen de kaart */
.streekmarkt-foto {
  background-image: url('../images/foto-streekmarkt.jpeg');
  background-size: cover;
  background-position: 50% 38%;
  background-repeat: no-repeat;
  min-height: 420px;
}

/* Mobiel: kolommen onder elkaar — foto bovenaan, dan tekst */
@media (max-width: 768px) {
  .streekmarkt-card {
    grid-template-columns: 1fr;
    margin-top: 48px;
  }
  .streekmarkt-text {
    padding: 2rem 1rem;                   /* smallere zijmarge op mobiel */
  }
  .streekmarkt-foto {
    order: -1;                            /* foto eerst */
    min-height: 260px;
  }
}

/* Contact-CTA onder het streekmarkt-blok — gecentreerd, scrollt naar Contact */
.vp-contact-cta {
  margin-top: clamp(2.5rem, 6vw, 4rem);
  text-align: center;
}

.vp-contact-cta-tekst {
  margin-bottom: 1.5rem;
  color: var(--color-honing-dark);
  font-size: 1.25rem;                     /* ~20px */
  font-weight: 300;
}

.vp-contact-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}


/* ================================================
   12. CONTACT
================================================ */

/* Donkergrijze sectie (= scrolled navbar), gecentreerde inhoud */
.contact {
  background-color: var(--color-donkergrijs);
  text-align: center;
  scroll-margin-top: 80px;                 /* fixed navbar niet over de titel */
}

.contact-inner {
  max-width: 720px;
}

/* "Contact" eyebrow — lichtere brons voor leesbaarheid op donkergrijs */
.contact-eyebrow {
  color: var(--color-brons-licht);
  margin-bottom: 1rem;
}

.contact-title {
  color: #ffffff;
  margin-bottom: 1.75rem;
}

/* E-mail als hyperlink — lichte brons, subtiele underline */
.contact-email {
  display: inline-block;
  font-family: var(--font-body);
  font-size: clamp(1.125rem, 2.5vw, 1.5rem);
  color: var(--color-brons-licht);
  text-decoration: underline;
  text-decoration-color: rgba(188, 139, 94, 0.5);
  text-underline-offset: 4px;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.contact-email:hover {
  color: #ffffff;
  text-decoration-color: #ffffff;
}

/* Sociale media — enkel icoontjes, gecentreerd onder het e-mailadres */
.contact-socials {
  margin-top: 1.75rem;
  display: flex;
  justify-content: center;
  gap: 1.5rem;
}

.contact-social {
  color: var(--color-brons-licht);
  font-size: 1.5rem;
  line-height: 1;
  transition: color 0.2s ease, transform 0.2s ease;
}

.contact-social:hover {
  color: #ffffff;
  transform: translateY(-2px);
}


/* ================================================
   13. FOOTER
================================================ */

/* Zelfde donkergrijs als de Contact-sectie; subtiele scheidingslijn,
   kleine en gedempte tekst (bewust minder prominent) */
.footer {
  background-color: var(--color-donkergrijs);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 2.5rem 0;
  text-align: center;
}

.footer-bedrijf {
  font-style: normal;                      /* <address> niet cursief */
  font-size: 0.8125rem;                    /* ~13px — kleiner */
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.42);        /* gedempt — minder duidelijk zichtbaar */
}

.footer-copy {
  margin-top: 1.25rem;
  font-size: 0.75rem;                      /* ~12px */
  color: rgba(255, 255, 255, 0.3);
}


/* ================================================
   14. GALERIJ (gallery.html)
================================================ */

/* Header — crème, ademruimte boven voor de fixed navbar (72px) */
.gallery-hero {
  background-color: var(--color-creme);
  text-align: center;
  padding: calc(72px + clamp(2.5rem, 6vw, 4rem)) 0 clamp(1.75rem, 4vw, 2.5rem);
}

.gallery-title {
  margin-bottom: 1rem;
}

.gallery-intro {
  max-width: 620px;
  margin: 0 auto;
  font-weight: 300;
  color: var(--color-honing-grijs);
}

/* Fotogrid — witte sectie onder de crème header */
.gallery-section {
  background-color: #ffffff;
  padding: clamp(2rem, 5vw, 3.5rem) 0 clamp(4rem, 8vw, 6rem);
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.5rem, 1.5vw, 1rem);
}

.gallery-item {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius-medium);
  aspect-ratio: 4 / 3;
  background-color: var(--color-grijstint);   /* zachte placeholder vóór lazy-load */
  cursor: pointer;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

/* Subtiele verdonkering bij hover */
.gallery-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(68, 69, 70, 0.18);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.gallery-item:hover img {
  transform: scale(1.06);
}

.gallery-item:hover::after {
  opacity: 1;
}

/* Toegankelijkheid: zichtbare focus bij toetsenbordnavigatie */
.gallery-item:focus-visible {
  outline: 3px solid var(--color-brons);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .gallery-item img { transition: none; }
  .gallery-item:hover img { transform: none; }
}

@media (max-width: 768px) {
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* ================================================
   15. BINNENKORT — placeholder voor-de-imker & faq
================================================ */

/* Gecentreerd "binnenkort"-blok; min-height duwt de footer netjes onderaan */
.soon {
  background-color: var(--color-creme);
  min-height: 82vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: calc(72px + clamp(3rem, 8vw, 5rem)) 0 clamp(3rem, 8vw, 5rem);
}

.soon-inner {
  max-width: 560px;
  margin: 0 auto;
  /* Subtiele fade-up bij het laden */
  animation: soon-fade-up 0.7s ease both;
}

.soon-icon {
  display: block;
  font-size: clamp(2.5rem, 6vw, 3.5rem);
  color: var(--color-brons);
  margin-bottom: 1.5rem;
}

/* Klein "Binnenkort"-label in honingzand-pil */
.soon-badge {
  display: inline-block;
  margin-bottom: 1.25rem;
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  background-color: var(--color-honingzand);
  color: var(--color-honing-eyebrow);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.soon-title {
  margin-bottom: 1rem;
}

.soon-text {
  max-width: 480px;
  margin: 0 auto 2rem;
  font-weight: 300;
  color: var(--color-honing-grijs);
}

.soon-back {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

@keyframes soon-fade-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .soon-inner { animation: none; }
}