/* BBMc nav dropdowns. Owner: FOUNDATION.
   The persistent nav is now a WordPress menu, so .navlinks is a <ul> instead of
   a bare row of <a>. Level 1 must keep looking exactly as it did (see
   two-world.css `.alethia .navlinks`); levels 2 and 3 are new.

   Menu entries that have no page yet are custom links with href="#". They are
   labels, not destinations — pointer-events:none keeps them unclickable while
   still readable, so the structure is visible before the content exists. */

.alethia .navlinks {
  list-style: none;
  margin: 0;
  padding: 0;
  align-items: center;
}

.alethia .navlinks li {
  position: relative;
  list-style: none;
}

/* ---- level 1: unchanged appearance ---- */
.alethia .navlinks > li > a {
  display: inline-block;
  white-space: nowrap;
  padding-block: 0.4rem; /* a hover gap here would drop the submenu on the way down */
}

.alethia .navlinks > li.menu-item-has-children > a::after {
  content: "";
  display: inline-block;
  width: 0.32em;
  height: 0.32em;
  margin-left: 0.42em;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translateY(-0.14em) rotate(45deg);
  opacity: 0.65;
}

/* ---- levels 2 and 3 ---- */
.alethia .navlinks .sub-menu {
  position: absolute;
  top: 100%;
  left: -0.9rem;
  z-index: 60;
  min-width: 15rem;
  margin: 0;
  padding: 0.5rem 0;
  list-style: none;
  background: rgba(19, 38, 54, 0.94);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: var(--hairline, 1px solid rgba(233, 241, 247, 0.12));
  border-radius: 10px;
  box-shadow: 0 18px 46px rgba(6, 14, 22, 0.5);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}

.alethia .navlinks li:hover > .sub-menu,
.alethia .navlinks li:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.alethia .navlinks .sub-menu a {
  display: block;
  padding: 0.46rem 1.1rem;
  font-size: 0.82rem;
  line-height: 1.35;
  color: var(--text-2);
  white-space: nowrap;
}

.alethia .navlinks .sub-menu a:hover {
  color: var(--pale);
  background: rgba(94, 154, 200, 0.14);
}

/* a long panel (Sectoren) must never grow past the window */
.alethia .navlinks .sub-menu {
  max-height: min(72vh, 34rem);
  overflow-y: auto;
  /* Per CSS overflow spec, when one axis is not `visible` the other computes to
     `auto` — so `overflow-y: auto` alone was giving the panel a spurious
     HORIZONTAL scrollbar as soon as one label ran a pixel past 240px. Pin the
     x-axis explicitly; the labels wrap instead. */
  overflow-x: hidden;
  overscroll-behavior: contain;
}

/* third level (Sectoren > SaaS scale-up > Omgeving) flies out sideways */
.alethia .navlinks .sub-menu .sub-menu {
  top: -0.5rem;
  left: 100%;
  transform: translateX(-6px);
}

.alethia .navlinks .sub-menu li:hover > .sub-menu,
.alethia .navlinks .sub-menu li:focus-within > .sub-menu {
  transform: translateX(0);
}

/* RIGHT-EDGE OVERFLOW (measured 2026-08-08 at 1024px):
   panels open leftwards from their parent, so the menus near the end of the row
   ran off-screen — Sectoren's third level reached 1177px in a 1024px window and
   Afspraak's panel reached 1256px. The last four top-level items therefore
   right-align their panel, and their third level flies out to the LEFT. */
.alethia .navlinks > li:nth-last-child(-n + 4) > .sub-menu {
  left: auto;
  right: -0.9rem;
}

.alethia .navlinks > li:nth-last-child(-n + 4) .sub-menu .sub-menu {
  left: auto;
  right: 100%;
  transform: translateX(6px);
}

.alethia .navlinks > li:nth-last-child(-n + 4) .sub-menu li:hover > .sub-menu,
.alethia .navlinks > li:nth-last-child(-n + 4) .sub-menu li:focus-within > .sub-menu {
  transform: translateX(0);
}

.alethia .navlinks > li:nth-last-child(-n + 4) .sub-menu .menu-item-has-children > a::after {
  content: "‹";
  float: left;
  margin: 0 0.8rem 0 0;
}

.alethia .navlinks .sub-menu .menu-item-has-children > a::after {
  content: "›";
  float: right;
  margin-left: 0.8rem;
  opacity: 0.6;
}

/* structural labels with no page behind them */
.alethia .navlinks a[href="#"],
.alethia .navlinks a[href$="/#"] {
  pointer-events: none;
  cursor: default;
  color: var(--text-2);
  opacity: 0.72;
}

/* a parent label still needs to open its own submenu on hover */
.alethia .navlinks li.menu-item-has-children > a[href="#"] {
  pointer-events: auto;
  cursor: default;
}

/* The 761-1096px rule in nav.css lets the link row scroll horizontally. A
   dropdown inside a scroll container would be clipped, so on those widths the
   submenus open as an inline block instead of an overlay. */
/* NARROW DESKTOP (761-1096px), measured 2026-08-08.
   nav.css lets the link row scroll horizontally in this band because the row
   needs ~1097px to lay out. A dropdown inside a scroll container gets clipped,
   but forcing `overflow: visible` to fix that stops the row scrolling and pushes
   the last two items ("Multiplier - Visie" at 1026px, "Afspraak" at 1112px)
   clean off a 1024px window — unreachable, which is worse than no dropdown.
   So: keep the scroll, and drop the submenus here. Every child page stays
   reachable through its hub page, exactly as before the menu existed. */
@media (max-width: 1096px) {
  .alethia .navlinks .sub-menu {
    display: none;
  }
  .alethia .navlinks > li.menu-item-has-children > a::after {
    display: none;
  }
}