/* Hoofdmenu (templates/_menu.html). Ook geladen op de warmtepomppagina's uit
   /opt/wp, die eigen variabelen hebben (--zacht/--tekst/--lijn i.p.v.
   --muted/--text/--line): daarom overal een fallback. Zet expliciet wat
   wp's "nav a{…}" ook zet, zodat die regel hier niets verandert. */
.hoofdmenu {
  display: flex;
  flex-wrap: wrap;            /* 9 links: mag op smal scherm doorlopen */
  align-items: baseline;
  gap: 6px 18px;
  font-family: "IBM Plex Sans", system-ui, sans-serif;
}

.hoofdmenu a {
  margin: 0;
  color: var(--muted, var(--zacht));
  font-size: 13px;
  font-weight: 400;
  text-decoration: none;
  border-bottom: 1px solid var(--line, var(--lijn));
}

.hoofdmenu a:hover,
.hoofdmenu a.actief {
  color: var(--text, var(--tekst));
}

.hoofdmenu a.actief {
  border-bottom-color: currentColor;
}

/* Op de warmtepomppagina's staat het menu los in <body> (niet in een
   header.top): zelfde breedte en marge als hun <main>. */
body > .hoofdmenu {
  max-width: 980px;
  margin: 0 auto;
  padding: 16px 16px 0;
}