/* ==========================================================================
   Megamenu onder "Containers"

   Opbouw volgens bouwbak/mockup mega menu en menu.png. Vijf kolommen met een
   haarlijn ertussen; de rechterkolom is de contactkaart. De inhoud komt uit
   inc/megamenu.php.

   Kleuren en maten uit het palet en de tokens — geen vaste waarden, zodat een
   wijziging in de Customizer meeloopt.
   ========================================================================== */

/* Het paneel zelf.

   De uitklap van Kadence is standaard donker, net als de andere dropdowns.
   Daardoor stond de donkere tekst van dit paneel onzichtbaar op de donkere
   hero — alleen de oranje iconen waren te zien.

   Wit en de slagschaduw komen uit de instelling van Kadence zelf (menu-item
   "Containers" → Dropdown → achtergrond en schaduw). Die schrijft CSS met een
   id-selector en wint daarmee van de themaregels; eigen CSS zou daar tegenaan
   moeten duwen. Alleen de ronding zit hier, want daar heeft Kadence geen
   instelling voor. */
.kadence-menu-mega-enabled > .sub-menu {
  border-radius: 0 0 12px 12px;
}

/* Kadence verbergt élke geneste <ul> binnen een dropdown met
   `visibility: hidden` — dat is daar een tweede menuniveau dat pas bij zweven
   openklapt. Onze kolommen zijn gewone lijsten, geen submenu. Zonder deze
   regel staan de koppen en knoppen er wel en blijven de lijsten leeg; dat was
   op 30 juli 2026 goed te zien: vier lege kolommen onder hun kop.
   Ook de dropdown-opmaak (eigen achtergrond, schaduw, minimumbreedte,
   absolute positie) hoort hier niet en wordt teruggezet.

   De selector spiegelt bewust die van Kadence
   (`.header-menu-container ul.menu > li.kadence-menu-mega-enabled > ul ul`)
   met onze klasse erachter. Dat is één punt specifieker en wint dus, zonder
   dat er ergens !important aan te pas komt. */
.header-menu-container ul.menu > li.kadence-menu-mega-enabled > ul .bbd-mega ul {
  visibility: visible;
  opacity: 1;
  position: static;
  transform: none;
  min-width: 0;
  width: auto;
  background: transparent;
  box-shadow: none;
  border: 0;
  padding: 0;
}

/* Vijf gelijke kolommen, net als in de mockup. Eerder stonden ze op
   ongelijke breedtes naar rato van de inhoud; gelijk oogt rustiger en de
   scheidingslijntjes staan dan op een vast ritme.

   Binnen de contentbreedte gehouden, zodat de eerste kolom op dezelfde
   linkerlijn begint als het logo en de rest van de site. */
.bbd-mega {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  max-width: var(--global-content-width, 1200px);
  margin: 0 auto;
  padding: var(--bbd-s6) var(--global-content-edge-padding, 1.5rem) var(--bbd-s5);
}

/* De scheidingslijntjes uit de mockup: één haarlijn tussen de kolommen, niet
   links van de eerste en niet rechts van de laatste. */
.bbd-mega__kolom {
  padding: 0 20px;
  /* Bewust --bbd-line-diep en niet --bbd-line: deze lijn moet zelf te zien
     zijn, hij bakent geen vlak af. Met de lichte randkleur viel hij tegen het
     witte paneel vrijwel weg. */
  border-left: 1px solid var(--bbd-line-diep);
  min-width: 0;
}
.bbd-mega__kolom:first-child { border-left: 0; padding-left: 4px; }
.bbd-mega__kolom--maat       { border-left: 0; padding-right: 4px; }

/* ---------- kolomkop ---------- */

.bbd-mega__kop {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 13px;
  font-family: var(--bbd-font-kop);
  font-size: 15.5px;
  font-weight: 700;
  color: var(--bbd-ink);
  letter-spacing: .002em;
}
.bbd-mega__kop .bbd-icoon { color: var(--bbd-orange); flex: none; }

/* ---------- lijsten ---------- */

.bbd-mega__lijst,
.bbd-mega__maten {
  list-style: none;
  margin: 0;
  padding: 0;
}

.bbd-mega__lijst > li > a,
.bbd-mega__meer a {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 6px 6px 6px 0;
  color: var(--bbd-tekst);
  text-decoration: none;
  font-size: 14px;
  line-height: 1.3;
  border-radius: 7px;
  transition: color .15s ease, background-color .15s ease;
}
.bbd-mega__lijst > li > a:hover,
.bbd-mega__lijst > li > a:focus-visible,
.bbd-mega__meer a:hover {
  color: var(--bbd-ink);
  background: var(--bbd-concrete);
}

.bbd-mega__ico {
  flex: none;
  display: inline-flex;
  color: var(--bbd-ink);
}
.bbd-mega__naam { flex: 1 1 auto; min-width: 0; }

/* Het pijltje: grijs, en oranje zodra de regel oplicht. */
.bbd-mega__pijl {
  flex: none;
  display: inline-flex;
  color: var(--bbd-line-diep, #B9C2C9);
  transition: color .15s ease, transform .15s ease;
}
a:hover > .bbd-mega__pijl,
a:focus-visible > .bbd-mega__pijl {
  color: var(--bbd-orange);
  transform: translateX(2px);
}

/* Kale variant: klussen en gemeenten hebben geen eigen icoon. */
.bbd-mega__lijst--kaal > li > a { gap: 8px; }

/* ---------- formaten als omrande rijen ---------- */

.bbd-mega__maten > li { margin-bottom: 6px; }
.bbd-mega__maten > li > a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border: 1px solid var(--bbd-line);
  border-radius: 8px;
  color: var(--bbd-ink);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  transition: border-color .15s ease, background-color .15s ease;
}
.bbd-mega__maten > li > a:hover,
.bbd-mega__maten > li > a:focus-visible {
  border-color: var(--bbd-orange);
  background: rgba(236, 96, 23, .05);
}
.bbd-mega__maten .bbd-mega__ico { color: var(--bbd-orange); }

/* ---------- voetregels onder een kolom ---------- */

/* De pil onder de afvalstromen: dezelfde chip als "Voor 14:00 besteld" in de
   hero (.bbd-hero__pil) en "Container laten ophalen" in de header
   (.bbd-ophaal-knop) — hoekig, hoofdletters, oranje stipje ervoor. Hier de
   lichte-ondergrondvariant: donker gevuld met witte tekst.

   Geen ronde pil dus: de huisstijl gebruikt hiervoor juist een strakke chip
   met een radius van 2–3px. */
.bbd-mega__pil {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 16px;
  padding: 9px 14px;
  border-radius: 3px;
  background: var(--bbd-ink);
  color: #fff;
  font-family: var(--bbd-font-data);
  font-size: 11.5px;
  letter-spacing: .09em;
  text-transform: uppercase;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  transition: background-color .15s ease;
}
.bbd-mega__pil::before {
  content: "";
  width: 6px; height: 6px;
  background: var(--bbd-orange);
  border-radius: 50%;
  flex: none;
  transition: background-color .15s ease;
}
.bbd-mega__pil:hover,
.bbd-mega__pil:focus-visible { background: var(--bbd-orange); color: #fff; }
.bbd-mega__pil:hover::before,
.bbd-mega__pil:focus-visible::before { background: #fff; }
/* Het pijltje weg: de chip heeft al een stip vóór de tekst. */
.bbd-mega__pil .bbd-mega__pijl { display: none; }

/* "Kies op hoeveelheid afval" — een tekstlink met icoon, geen knop. */
.bbd-mega__voet {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  color: var(--bbd-tekst);
  font-size: 13.5px;
  text-decoration: none;
}
.bbd-mega__voet .bbd-icoon { color: var(--bbd-orange); flex: none; }
.bbd-mega__voet:hover { color: var(--bbd-orange); }

/* ---------- uitklapper met de overige gemeenten ---------- */

/* De uitklapper staat in twee kolommen: bij de formaten (na vijf) en bij de
   gemeenten (na zes). In de formatenkolom moet hij geen kader krijgen, want
   daar zijn de gewone regels omrand. */
.bbd-mega__maten > .bbd-mega__meer { margin-top: 2px; }
.bbd-mega__meer > details > summary {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 0;
  font-size: 13.5px;
  color: var(--bbd-tekst);
}
.bbd-mega__meer summary::-webkit-details-marker { display: none; }
.bbd-mega__meer summary::after {
  content: "";
  width: 6px; height: 6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
  transition: transform .18s ease;
}
.bbd-mega__meer details[open] summary::after { transform: rotate(-135deg) translate(-1px, -1px); }
.bbd-mega__meer summary:hover { color: var(--bbd-orange); }
.bbd-mega__meer summary:focus-visible {
  outline: 2px solid var(--bbd-orange);
  outline-offset: 3px;
  border-radius: 3px;
}

/* ---------- contactkaart ---------- */

/* Zonder foto vult het vlak de hoogte van de kolom, zodat het niet als een
   los blokje bovenin blijft hangen naast vier volle lijsten. */
.bbd-mega__kaart {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 140px;
  background: var(--bbd-orange);
  border-radius: 10px;
  padding: 22px 20px;
}
.bbd-mega__kaartkop {
  margin: 0 0 5px;
  font-family: var(--bbd-font-kop);
  font-size: 20px;
  line-height: 1.15;
  color: #fff;
}
.bbd-mega__kaarttekst {
  margin: 0;
  font-size: 14px;
  color: rgba(255, 255, 255, .92);
}

/* Contactknop eronder: omrand, met dezelfde lichte ronding als de rest van de
   site (kaarten en formaatrijen staan op 8–10px). Bewust geen ronde pil — die
   vorm is in de huisstijl voorbehouden aan de chips met het oranje stipje. */
.bbd-mega__knop {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
  padding: 11px 16px;
  border: 1px solid var(--bbd-orange);
  border-radius: 8px;
  color: var(--bbd-orange);
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease;
}
.bbd-mega__knop:hover,
.bbd-mega__knop:focus-visible { background: var(--bbd-orange); color: #fff; }
.bbd-mega__knop:hover .bbd-mega__pijl { color: #fff; }

/* ---------- smaller dan desktop ----------
   Kadence toont het megamenu alleen op desktop; onder het breekpunt valt het
   menu terug op de gewone uitklap. Deze regels vangen de tussenmaten op waar
   het paneel nog wel opent maar vijf kolommen niet meer passen. */

/* Smalle laptopschermen (1025–1250 px).

   Hier stond eerst een terugval naar drie kolommen. Dat was verkeerd: Kadence
   toont dit paneel pas vanaf 1025 px en gaat daaronder naar het mobiele menu,
   dus die driekolomsvariant lag precies in de band waar de meeste laptops
   zitten — op een scherm van 1100 px zag je drie kolommen met de rest eronder
   in plaats van de vijf uit de mockup.

   Vijf kolommen passen daar wél, mits er ruimte vrijkomt. Gemeten op 1100 px:
   alleen "Bouw- en sloopafval" brak over twee regels. De kolommen krijgen
   daarom minder binnenruimte en de pijltjes gaan eruit — die zijn decoratief,
   de link draagt de betekenis. */
@media (max-width: 1250px) {
  .bbd-mega__kolom { padding: 0 12px; }
  .bbd-mega__lijst .bbd-mega__pijl,
  .bbd-mega__maten .bbd-mega__pijl { display: none; }
  .bbd-mega__lijst > li > a { gap: 9px; }
}

/* Vangnet: mocht het breekpunt van Kadence ooit lager gezet worden, dan valt
   het paneel netjes terug op twee kolommen in plaats van vijf geplette. */
@media (max-width: 1024px) {
  .bbd-mega { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--bbd-s5); }
  .bbd-mega__kolom:nth-child(odd) { border-left: 0; padding-left: 4px; }
  .bbd-mega__kolom--maat { grid-column: span 2; border-left: 0; }
  .bbd-mega__kaart { flex-direction: row; align-items: baseline; gap: 12px; min-height: 0; }
}