/* Mobile navigation drawer. Owner: FOUNDATION.

   Why this file exists: two-world.css does `.alethia .navlinks { display:none }`
   below 760px and the design never shipped a replacement, so a phone visitor had
   a logo and a CTA and no route to any of the other 68 pages. Measured 2026-08-08:
   reachable nav links at 375px = 0.

   Specificity note: the rule being overridden is `.alethia .navlinks` (0,2,0), so
   every override here is written `.alethia .topnav .navlinks` (0,3,0) or tighter.
   No !important is needed and none is used. */

/* The toggle is desktop-hidden; the row of links is the navigation there. */
.nav-toggle {
  display: none;
  appearance: none;
  border: 0;
  background: transparent;
  /* 44x44 is the minimum comfortable touch target (WCAG 2.5.5 / Apple HIG);
     the 22x16 glyph is centred inside it. */
  width: 44px;
  height: 44px;
  padding: 0;
  margin-left: 0.2rem;
  cursor: pointer;
  color: var(--pale, #e9f1f7);
  border-radius: 8px;
  flex: 0 0 auto;
  place-items: center;
}

.nav-toggle:focus-visible {
  outline: 2px solid var(--sky, #5e9ac8);
  outline-offset: 2px;
}

/* The caret buttons are injected once by nav-mobile.js and stay in the DOM at
   every width, so they must be hidden outside the drawer — otherwise each of the
   14 parent items renders a stray button in the desktop nav row. Desktop opens
   submenus on hover and needs no control. */
.submenu-toggle { display: none; }

.nav-toggle-box {
  display: block;
  width: 22px;
  height: 16px;
  position: relative;
}

.nav-toggle-bar {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.22s ease, opacity 0.16s ease, top 0.22s ease;
}

.nav-toggle-bar:nth-child(1) { top: 0; }
.nav-toggle-bar:nth-child(2) { top: 7px; }
.nav-toggle-bar:nth-child(3) { top: 14px; }

/* open state: the bars become a cross */
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) {
  top: 7px;
  transform: rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) {
  top: 7px;
  transform: rotate(-45deg);
}

@media (max-width: 760px) {
  .nav-toggle { display: grid; }   /* grid so place-items centres the glyph */

  /* The nav bar keeps brand | CTA | toggle on one line. */
  .alethia .topnav {
    gap: 0.6rem;
    padding-inline: 1rem;
  }
  .alethia .topnav .nav-cta {
    font-size: 0.72rem;
    padding: 0.5rem 0.8rem;
    gap: 0.4rem;
  }

  /* THE DRAWER.
     Beats `.alethia .navlinks { display:none }` on specificity, not on !important.
     Closed state stays display:block but zero-height and inert, so the open/close
     can animate and screen readers still get a single predictable tree. */
  .alethia .topnav .navlinks {
    display: block;
    position: fixed;
    top: 64px;                 /* under the bar; JS syncs this to the real height */
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    margin: 0;
    padding: 0.5rem 0 4rem;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    background: rgba(12, 26, 38, 0.985);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border-top: 1px solid rgba(233, 241, 247, 0.1);
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform 0.26s ease, visibility 0.26s;
  }

  body.bbmc-nav-open .alethia .topnav .navlinks {
    transform: translateX(0);
    visibility: visible;
  }

  /* Rows, not a flex line. */
  .alethia .topnav .navlinks > li,
  .alethia .topnav .navlinks .sub-menu > li {
    display: block;
    border-bottom: 1px solid rgba(233, 241, 247, 0.07);
  }

  .alethia .topnav .navlinks a {
    display: block;
    padding: 0.95rem 1.25rem;
    font-size: 0.98rem;
    line-height: 1.3;
    color: var(--pale, #e9f1f7);
    white-space: normal;       /* desktop sets nowrap; long Dutch labels need to wrap */
  }

  /* Submenus become accordions: closed by default, opened by the caret button.
     nav-mobile.css deliberately does NOT reuse the desktop hover rules — hover
     does not exist here and a hover-opened panel is unreachable by touch. */
  .alethia .topnav .navlinks .sub-menu {
    position: static;
    display: none;
    min-width: 0;
    max-height: none;
    margin: 0;
    padding: 0;
    background: rgba(233, 241, 247, 0.035);
    border: 0;
    border-radius: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    overflow: visible;
  }

  .alethia .topnav .navlinks li.is-open > .sub-menu { display: block; }

  /* nav-menu.css right-aligns the last four top-level panels and flips their
     third level leftwards, at (0,5,1). Those offsets are meaningless in a
     stacked drawer but the transform still applied and pushed level-3 items 6px
     past the right edge. Neutralised here at (0,6,1). */
  .alethia .topnav .navlinks > li:nth-last-child(-n + 4) > .sub-menu,
  .alethia .topnav .navlinks > li:nth-last-child(-n + 4) .sub-menu .sub-menu {
    left: auto;
    right: auto;
    transform: none;
  }

  .alethia .topnav .navlinks .sub-menu a { padding-left: 2.1rem; font-size: 0.9rem; }
  .alethia .topnav .navlinks .sub-menu .sub-menu a { padding-left: 3rem; font-size: 0.86rem; }

  /* The caret is its own button so the parent link stays a link — tapping
     "Sectoren" should go to /sectoren, not merely expand it. */
  .alethia .topnav .navlinks .menu-item-has-children {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: start;
  }
  .alethia .topnav .navlinks .menu-item-has-children > .sub-menu {
    grid-column: 1 / -1;
  }
  .alethia .topnav .navlinks > li.menu-item-has-children > a::after,
  .alethia .topnav .navlinks .sub-menu .menu-item-has-children > a::after {
    content: none;             /* the desktop carets; the button replaces them */
  }

  .submenu-toggle {
    display: grid;
    place-items: center;
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--text-2, #9db4c7);
    padding: 0.95rem 1.25rem;
    cursor: pointer;
    line-height: 1;
    align-self: stretch;
  }
  .submenu-toggle:focus-visible {
    outline: 2px solid var(--sky, #5e9ac8);
    outline-offset: -2px;
  }
  .submenu-toggle svg {
    width: 14px;
    height: 14px;
    transition: transform 0.2s ease;
  }
  .submenu-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

  /* Structural labels (href="#") stay unclickable but must not look tappable. */
  .alethia .topnav .navlinks a[href="#"] { opacity: 0.6; }
}

@media (prefers-reduced-motion: reduce) {
  .alethia .topnav .navlinks,
  .nav-toggle-bar,
  .submenu-toggle svg {
    transition: none;
  }
}

/* Body scroll lock while the drawer is open. position:fixed is the only thing
   iOS Safari reliably honours; nav-mobile.js stashes and restores scrollY so the
   page does not jump to the top on close. */
body.bbmc-scroll-locked {
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
  overflow: hidden;
}