/* Hoofdmenu (app/lib/layout.php, site_header): breed paneel voor de grote menu's en uitklapmenu op de telefoon. */

/* De knoppen vullen de hele hoogte van de kop, zodat het menu niet sluit op weg naar het paneel. */
.menu-nav { align-self: stretch; }
.menu-klein, .menu-breed { display: flex; align-items: center; align-self: stretch; }
.menu-klein { position: relative; }
.menu-breed { position: static; }

/* Het paneel hangt onder de hele kop (de header is sticky en dus het ankerpunt). */
.menu-paneel {
  position: absolute; left: 0; right: 0; top: 100%;
  background: #fff;
  border-top: 1px solid var(--color-border, #E9EDF2);
  border-bottom: 1px solid var(--color-border, #E9EDF2);
  box-shadow: 0 18px 36px rgba(10, 46, 91, .10);
}
.menu-paneel[hidden] { display: none; }
.menu-paneel-binnen { display: flex; gap: 2rem; padding-top: 1.75rem; padding-bottom: 1.25rem; }
.menu-kols { flex: 1; display: grid; gap: .5rem 1.75rem; }
.menu-n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 34rem; }
.menu-n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.menu-n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.menu-kop {
  margin: 0 0 .5rem; padding-bottom: .5rem;
  border-bottom: 1px solid var(--color-border, #E9EDF2);
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--color-blue-grey, #6B7C93);
}
.menu-link { display: block; padding: .375rem 0; font-size: .875rem; color: var(--color-navy, #0B2740); text-decoration: none; }
.menu-link:hover, .menu-link:focus-visible {
  text-decoration: underline; text-decoration-color: var(--color-sky, #7FA9D1);
  text-decoration-thickness: 2px; text-underline-offset: 4px;
}
.menu-pijl { display: inline-block; margin-left: .25rem; vertical-align: -2px; }

/* Uitgelicht blok rechts. */
.menu-uit {
  width: 16rem; flex-shrink: 0; display: flex; flex-direction: column;
  background: var(--color-navy, #0B2740); color: #fff; border-radius: 10px; padding: 1.25rem;
}
.menu-uit-titel { margin: 0 0 .375rem; font-weight: 700; font-size: 1rem; color: #fff; }
.menu-uit-zin { margin: 0 0 1rem; flex: 1; font-size: .85rem; line-height: 1.5; color: var(--color-mist, #DCE8F4); }
.menu-uit-knop {
  align-self: flex-start; padding-bottom: 2px; border-bottom: 2px solid var(--color-sky, #7FA9D1);
  font-size: .85rem; font-weight: 600; color: #fff; text-decoration: none;
}
.menu-uit-knop:hover { color: var(--color-mist, #DCE8F4); }

/* Link onderaan naar het overzicht. */
.menu-voet { background: #F5F7FA; border-top: 1px solid var(--color-border, #E9EDF2); padding: .75rem 0; }
.menu-alles { font-size: .85rem; font-weight: 600; color: var(--color-navy, #0B2740); text-decoration: none; }
.menu-alles:hover { text-decoration: underline; text-decoration-color: var(--color-sky, #7FA9D1); text-underline-offset: 4px; }

/* Telefoon: per menu uitklappen. */
.menu-mob { border-bottom: 1px solid var(--color-border, #E9EDF2); }
.menu-mob > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  padding: .9rem .125rem; font-size: .95rem; font-weight: 600; color: var(--color-navy, #0B2740);
}
.menu-mob > summary::-webkit-details-marker { display: none; }
.menu-mob > summary svg { opacity: .5; transition: transform .2s; }
.menu-mob[open] > summary svg { transform: rotate(180deg); }
.menu-mob-in { padding: 0 .125rem .875rem; }
.menu-mob-groep {
  margin: .75rem 0 .25rem; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--color-blue-grey, #6B7C93);
}
.menu-mob-link {
  display: block; padding: .45rem 0 .45rem .75rem; border-left: 2px solid var(--color-border, #E9EDF2);
  font-size: .9rem; color: var(--color-navy, #0B2740); text-decoration: none;
}
.menu-mob-alles { border-left-color: var(--color-navy, #0B2740); font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .menu-mob > summary svg { transition: none; } }