/* === Tokens === */
.nav-main{
  --nav-fg: #2B8DB1;          /* tekst standaard */
  --nav-bg: #FFFFFF;          /* achtergrond standaard */
  --nav-fg-hover: #FFFFFF;
  --nav-bg-hover: #2B8DB1;

  /* zelfde font als je buttons (zie theme.json: Source Sans 3, 700) */
  --nav-font: var(--wp--preset--font-family--source-sans-3, inherit);
  --nav-font-weight: 500;
  --nav-font-weight-hover: 500;
  --nav-letter-spacing-hover: 0.02em; /* optioneel, button-achtig */
}

/* Basis links (desktop + overlay) */
.nav-main .wp-block-navigation-item__content{
  color: var(--nav-fg);
  background: var(--nav-bg);
  text-decoration: none;
  padding: .35rem .6rem;
  border-radius: 0rem;
  transition: color .2s ease, background-color .2s ease, font-weight .2s ease, letter-spacing .2s ease;
  font-family: var(--nav-font);
  font-weight: var(--nav-font-weight);
}

/* Hover/focus: maak typografie gelijk aan button */
.nav-main .wp-block-navigation-item__content:hover,
.nav-main .wp-block-navigation-item__content:focus-visible{
  color: var(--nav-fg-hover);
  background: var(--nav-bg-hover);
  font-family: var(--nav-font);
  font-weight: var(--nav-font-weight-hover);
  letter-spacing: var(--nav-letter-spacing-hover);
}

/* ► Active/current NIET automatisch pill-highlighten */
.nav-main .current-menu-item > .wp-block-navigation-item__content,
.nav-main .wp-block-navigation-item__content[aria-current="page"]{
  color: var(--nav-fg);
  background: var(--nav-bg);
  font-weight: var(--nav-font-weight);
  letter-spacing: normal;
}

/* ► Uitklap/overlay-menu links uitlijnen (oude én nieuwe WP-markup) */
.wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-content,
.wp-block-navigation__responsive-dialog .wp-block-navigation__responsive-container-content{
  text-align: left;
}

/* Lijsten in overlay links uitlijnen */
.wp-block-navigation__responsive-container .wp-block-navigation__container,
.wp-block-navigation__responsive-dialog .wp-block-navigation__container,
.nav-main .wp-block-navigation__container{
  align-items: flex-start;     /* bij column-layout: links uitlijnen */
  justify-content: flex-start; /* zekerheidje */
}

/* Submenu's ook links uitlijnen */
.nav-main .wp-block-navigation__submenu-container{
  text-align: left;
  align-items: flex-start;
}

/* 1) Top-level dropdown links onder het parent-Item ankeren */
.nav-main :where(.wp-block-navigation__container)
> li.wp-block-navigation-item.has-child
> .wp-block-navigation__submenu-container{
  left: 0 !important;
  right: auto !important;
  inset-inline-start: 0 !important;
  inset-inline-end: auto !important;
  transform: translateX(0) !important;
  text-align: left;
}

/* 2) Ook voor geneste submenus (flyouts) dezelfde linkse anchoring */
.nav-main .wp-block-navigation__submenu-container
  .wp-block-navigation-item.has-child
  > .wp-block-navigation__submenu-container{
  left: 0 !important;
  right: auto !important;
  inset-inline-start: 0 !important;
  inset-inline-end: auto !important;
  transform: translateX(0) !important;
  text-align: left;
}

/* 3) Sommige WP-versies zetten inline styles die naar rechts duwen.
      Override die inline hints expliciet. */
.nav-main .wp-block-navigation__submenu-container[style*="right"]{
  right: auto !important; left: 0 !important;
}
.nav-main .wp-block-navigation__submenu-container[style*="inset-inline-end"]{
  inset-inline-end: auto !important; inset-inline-start: 0 !important;
}

/* 4) Zorg dat de content in de link/pill zelf niet ‘space-between’ gebruikt */
.nav-main .wp-block-navigation-item__content{
  justify-content: flex-start !important;
  text-align: left;
  gap: .5rem;
}

/* Normaliseer alle basestates naar je merk-kleur (ook visited) */
.nav-main .wp-block-navigation-item__content,
.nav-main .wp-block-navigation-item__content:link,
.nav-main .wp-block-navigation-item__content:visited{
  color: var(--nav-fg);
  background: var(--nav-bg);
  font-weight: var(--nav-font-weight);
  letter-spacing: normal;
}

/* Neutraliseer 'active/current' vlaggen (WP zet o.a. deze klassen/attributes) */
.nav-main .current-menu-item > .wp-block-navigation-item__content,
.nav-main .current-menu-ancestor > .wp-block-navigation-item__content,
.nav-main .wp-block-navigation-item__content[aria-current],
.nav-main .wp-block-navigation-item__content[aria-current="page"],
.nav-main .wp-block-navigation-item__content[aria-current="true"]{
  color: var(--nav-fg);
  background: var(--nav-bg);
  font-weight: var(--nav-font-weight);
  letter-spacing: normal;
}

/* Hou hover zoals “button” */
.nav-main .wp-block-navigation-item__content:hover,
.nav-main .wp-block-navigation-item__content:focus-visible{
  color: var(--nav-fg-hover);
  background: var(--nav-bg-hover);
  font-weight: var(--nav-font-weight-hover);
  letter-spacing: var(--nav-letter-spacing-hover);
}

/* Overlay/drawer visited ook normaliseren */
.wp-block-navigation__responsive-container .nav-main .wp-block-navigation-item__content:visited{
  color: var(--nav-fg);
  background: var(--nav-bg);
}

/* Zorg dat HOVER ALTIJD wint – ook als het item visited/current/open is */
.nav-main .wp-block-navigation-item__content:hover,
.nav-main .wp-block-navigation-item__content:visited:hover,
.nav-main .current-menu-item > .wp-block-navigation-item__content:hover,
.nav-main .current-menu-ancestor > .wp-block-navigation-item__content:hover,
.nav-main .wp-block-navigation-item__content[aria-current]:hover,
.nav-main .wp-block-navigation-item__content[aria-current="page"]:hover {
  color: var(--nav-fg-hover) !important;
  background: var(--nav-bg-hover) !important;
  font-weight: var(--nav-font-weight-hover);
  letter-spacing: var(--nav-letter-spacing-hover);
}

/* En zet de basisstates expliciet terug naar default (ook visited/current) */
.nav-main .wp-block-navigation-item__content,
.nav-main .wp-block-navigation-item__content:link,
.nav-main .wp-block-navigation-item__content:visited,
.nav-main .current-menu-item > .wp-block-navigation-item__content,
.nav-main .current-menu-ancestor > .wp-block-navigation-item__content,
.nav-main .wp-block-navigation-item__content[aria-current],
.nav-main .wp-block-navigation-item__content[aria-current="page"] {
  color: var(--nav-fg);
  background: var(--nav-bg);
  font-weight: var(--nav-font-weight);
  letter-spacing: normal;
}

/* MENU: nooit underline, in alle states/varianten */
:where(.wp-block-navigation) a,
:where(.wp-block-navigation) a:link,
:where(.wp-block-navigation) a:visited,
:where(.wp-block-navigation) a:hover,
:where(.wp-block-navigation) a:focus,
:where(.wp-block-navigation) a:active,
:where(.wp-block-navigation) .wp-block-navigation-item__content,
:where(.wp-block-navigation) .wp-block-navigation-item__content:link,
:where(.wp-block-navigation) .wp-block-navigation-item__content:visited,
:where(.wp-block-navigation) .wp-block-navigation-item__content:hover,
:where(.wp-block-navigation) .wp-block-navigation-item__content:focus,
:where(.wp-block-navigation) .wp-block-navigation-item__content:active{
  text-decoration: none !important;
}

/* Navigation menu links: vaste kleur, nooit zwart */
.wp-block-navigation a,
.wp-block-navigation a:link,
.wp-block-navigation a:visited,
.wp-block-navigation a:hover,
.wp-block-navigation a:focus,
.wp-block-navigation a:active,
.wp-block-navigation .wp-block-navigation-item__content {
  color: var(--wp--preset--color--base);   /* of #fff als je menu op donkere achtergrond staat */
  text-decoration: none;
}

/* Submenu-openers (button i.p.v. link): altijd juiste kleur, geen underline/border */
.wp-block-navigation .wp-block-navigation-item__content,
.wp-block-navigation .wp-block-navigation-submenu__toggle,
.wp-block-navigation .wp-block-navigation-submenu__toggle:link,
.wp-block-navigation .wp-block-navigation-submenu__toggle:visited,
.wp-block-navigation .wp-block-navigation-submenu__toggle:hover,
.wp-block-navigation .wp-block-navigation-submenu__toggle:focus,
.wp-block-navigation .wp-block-navigation-submenu__toggle:active {
  color: var(--wp--preset--color--base);   /* kies evt. accent-1 als je header licht is */
  text-decoration: none;
  background: transparent;
  border: 0;
  box-shadow: none;
}

/* Zorg dat het pijltje dezelfde kleur aanneemt */
.wp-block-navigation .wp-block-navigation-submenu__toggle svg {
  fill: currentColor;
}

/* === MENU ITEM BASIS === */
.wp-block-navigation a,
.wp-block-navigation .wp-block-navigation-item__content,
.wp-block-navigation .wp-block-navigation-submenu__toggle {
  color: var(--wp--preset--color--accent-1) !important; /* standaard blauw */
  text-decoration: none;
  background: transparent;
  border: 0;
  box-shadow: none;
}

/* === HOVER / FOCUS STATES === */
.wp-block-navigation a:hover,
.wp-block-navigation a:focus,
.wp-block-navigation .wp-block-navigation-item__content:hover,
.wp-block-navigation .wp-block-navigation-item__content:focus,
.wp-block-navigation .wp-block-navigation-submenu__toggle:hover,
.wp-block-navigation .wp-block-navigation-submenu__toggle:focus {
  color: var(--wp--preset--color--accent-2) !important; /* oranje accent-2, pas aan naar wens */
  text-decoration: none;
}

/* === ACTIEVE / CURRENT STATES === */
.wp-block-navigation [aria-current],
.wp-block-navigation .current-menu-item .wp-block-navigation-item__content,
.wp-block-navigation .current-menu-parent .wp-block-navigation-item__content,
.wp-block-navigation .current-menu-ancestor .wp-block-navigation-item__content {
  color: var(--wp--preset--color--accent-1) !important; /* actief blijft blauw */
}

/* === SUBMENU ICONS === */
.wp-block-navigation .wp-block-navigation-submenu__toggle svg {
  fill: currentColor !important;
}