/* =========================
   LIJSTEN
   ========================= */

.mob-nav-container,
.mob-nav-container ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.mob-nav {
  border-bottom: 1px solid #dbe6f6;
}

/* =========================
   LINKS
   ========================= */

.mob-nav > a,
.mob-nav li > a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 8px;
  font-size: 16px;
  font-weight: 500;
  color: #111;
  text-decoration: none;
}

.mob-nav > a:active,
.mob-nav li > a:active {
  background-color: #e4edfa;
}

/* =========================
   PIJLTJES
   ========================= */

.mob-nav > a i {
  font-size: 18px;
  position: relative;
  margin-top: 20px;                 /* iets naar beneden */
  transition: transform 0.3s ease;
}

/* Pijltje draaien bij open */
.mob-nav.open > a i,
.mob-nav > a[aria-expanded="true"] i {
  transform: rotate(180deg);
}

/* =========================
   SUBMENU'S
   ========================= */

.mob-nav ul {

  display: none;
  animation: submenuFade 0.35s ease;
}

/* Open submenu */
.mob-nav.open > ul,
.mob-nav > a[aria-expanded="true"] + ul {
  display: block;
  padding-bottom: 2px;
}

/* Eerste item iets laten zakken */
.mob-nav.open > ul > li:first-child,
.mob-nav > ul > li:first-child {
  margin-top: 8px;
  
}
.mob-nav.open > ul > li,
.mob-nav > ul > li{
 background-color: #eef3fb;
}

/* Subniveau (niveau 2: subcategorieën binnen een hoofditem, bv. "Biologisch" onder
   "Speciaal" of een land onder "Landen"). Was voorheen "ul li a" (descendant) - die
   matchte óók niveau 3 (elk niveau-3-element zit óók binnen "ul li"), waardoor
   niveau 2 en 3 exact even hoog waren en een paar geneste categorieën het scherm
   al vulden. ".mob-nav ul ul li > a" hieronder heeft hogere specificiteit (4 i.p.v.
   3 elementen in de selector) en wint dus voor niveau 3 - de twee niveaus lopen
   nu niet meer in elkaar over. */
.mob-nav ul li > a {
  padding: 10px 8px 10px 12px;
  font-size: 14px;
  font-weight: 400;
}

/* Derde niveau (kleurfilters/leaf-links binnen een subcategorie, bv. "Wit"/"Rood"
   onder "Biologisch"). Bewust compacter dan niveau 2: dit is het niveau met de
   meeste regels per foldout (tot 7), dus hier telt elke bespaarde pixel het meest. */
.mob-nav ul ul li {
  padding-left: 30px;
  background-color: white;
  margin-top: 0;
  border-bottom: 1px solid #dbe6f6;
}
.mob-nav ul ul li > a {
  padding: 6px 8px 6px 4px;
  font-size: 12.5px;
}

/* Kleurstip vóór Wit/Rood/Rosé/Bubbels/Oranje/Zoet-filters - dezelfde tinten als de
   "Shop op smaak"-tegels op de homepage (inc/home/laag-3.php), hier hergebruikt zodat
   een kleurfilter ook zonder lezen herkenbaar is. .wk-row bundelt stip + tekst tot één
   flex-item, zodat de bestaande "justify-content: space-between" op de link niet de
   stip en de tekst uit elkaar trekt. */
.wk-row {
  display: flex;
  align-items: center;
  gap: 7px;
}
.wk-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, .18);
  flex-shrink: 0;
}
.wk-wit     { background-color: #e8d88a; }
.wk-rood    { background-color: #7b1e2b; }
.wk-rose    { background-color: #e7a3ab; }
.wk-oranje  { background-color: #d98b3a; }
.wk-bubbels { background-color: #ecdf9e; }
.wk-zoet    { background-color: #c9a24a; }

/* "Over ..."/"Wijngebieden"/"Wijnmakers"-links onderaan een foldout: geen kleurfilter
   maar een doorverwijzing naar de hele categorie/informatiepagina. Een randlijn + pijltje
   maakt dat verschil zichtbaar i.p.v. dat de link als achtste kleurfilter oogt. */
/* Zelfde specificiteit-opbouw (.mob-nav ul ul li > a) als de niveau-3-regel hierboven,
   plus de eigen class - nodig om ".mob-nav li > a"'s color/font-weight te verslaan
   zonder naar !important te grijpen. */
.mob-nav ul ul li > a.mob-nav-info {
  border-top: 1px solid #dbe6f6;
  color: #7b1e2b;
  font-weight: 600;
}
.mob-nav ul ul li > a.mob-nav-info::before {
  content: "→";
  margin-right: 6px;
}



/* =========================
   TERUG / SLUIT ELEMENT
   ========================= */

.mob-nav.open > ul::before,
.mob-nav > a[aria-expanded="true"] + ul::before {
  content: "← Terug";
  display: block;
  padding: 14px 8px;
  font-size: 15px;
  font-weight: 600;
  color: #111;
  background-color: #e4edfa;
  border-bottom: 1px solid #c7d9f0;
  cursor: pointer;
}

/* =========================
   HOOFDCATEGORIEËN
   ========================= */

.menu-item-a1 > a {
  font-size: 18px;
  font-weight: 600;
}

.menu-item-a3 > a {
  font-size: 17px;
  font-weight: 600;
}

/* =========================
   SPECIAL ITEMS
   ========================= */

/* Sale accent */
.mob-nav a[href*="sale"] {
  color: #b30000;
  font-weight: 700;
}

/* =========================
   ANIMATIE
   ========================= */

@keyframes submenuFade {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* =========================
   DESKTOP UIT
   ========================= */

@media (min-width: 1001px) {
  .menu-wrapper {
    display: none;
  }
}