/* =========================================================
   Primary Nav
   Strip below the sticky header. Pulls items from the WP
   menu assigned to the "primary" location. Surface is the
   raised paper (paper-2) so it reads as a tab-divider below
   the header. Borders only — no shadows.
   ========================================================= */
.mz-nav {
  background: var(--paper-2);
  border-bottom: 1px solid var(--border);
  /* Keep submenus above page content but below the sticky header. */
  position: relative;
  z-index: 40;
}

.mz-nav__list {
  display: flex;
  align-items: stretch;
  gap: var(--s-6);
  list-style: none;
  margin: 0;
  padding: 0;
  height: 44px;
}

.mz-nav__list > li {
  position: relative;
  display: flex;
  align-items: stretch;
}

.mz-nav__list > li > a {
  display: inline-flex;
  align-items: center;
  padding: 0;
  height: 100%;
  color: var(--ink-2);
  font-family: var(--ff-ui);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
  /* Reset global anchor underline; we paint our own bottom bar. */
  border-bottom: 2px solid transparent;
  transition: color var(--d-1) var(--ease), border-color var(--d-1) var(--ease);
}

.mz-nav__list > li > a:hover,
.mz-nav__list > li > a:focus-visible {
  color: var(--ink-1);
  border-bottom-color: var(--brand);
}

.mz-nav__list > li.current-menu-item > a,
.mz-nav__list > li.current-menu-parent > a,
.mz-nav__list > li.current-menu-ancestor > a {
  color: var(--ink-1);
  border-bottom-color: var(--brand);
}

/* Caret hint for items with a submenu. Pure CSS, scoped to descendants
   of the WP "menu-item-has-children" class WP adds automatically. */
.mz-nav__list > li.menu-item-has-children > a::after {
  content: "";
  display: inline-block;
  margin-left: 8px;
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  opacity: 0.6;
}

/* =========================================================
   Submenu — single level (depth=2 in PHP).
   ========================================================= */
.mz-nav__list .sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  margin: 0;
  padding: var(--s-2) 0;
  min-width: 220px;
  list-style: none;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--r-2);
  /* Hidden by default; revealed via hover/focus-within. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(2px);
  transition:
    opacity var(--d-1) var(--ease),
    transform var(--d-1) var(--ease),
    visibility 0s linear var(--d-1);
  z-index: 1;
}

.mz-nav__list > li:hover > .sub-menu,
.mz-nav__list > li:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition:
    opacity var(--d-1) var(--ease),
    transform var(--d-1) var(--ease),
    visibility 0s;
}

.mz-nav__list .sub-menu li { display: block; }

.mz-nav__list .sub-menu a {
  display: block;
  padding: 10px 16px;
  min-height: 36px;
  color: var(--ink-2);
  font-family: var(--ff-ui);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  border-bottom: 0;
  transition: color var(--d-1) var(--ease), background-color var(--d-1) var(--ease);
}

.mz-nav__list .sub-menu a:hover,
.mz-nav__list .sub-menu a:focus-visible {
  color: var(--ink-1);
  background: var(--paper-2);
}

.mz-nav__list .sub-menu .current-menu-item > a {
  color: var(--ink-1);
}

/* =========================================================
   Mobile — horizontal scroll, no submenus.
   Per "hurry-friendly" principle: a tech on a phone in a customer's
   kitchen taps the parent, doesn't navigate two-level menus.
   ========================================================= */
@media (max-width: 700px) {
  .mz-nav__list {
    gap: var(--s-5);
    height: 48px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .mz-nav__list::-webkit-scrollbar { display: none; }

  .mz-nav__list > li {
    scroll-snap-align: start;
    flex: 0 0 auto;
  }

  .mz-nav__list > li > a {
    font-size: 14px;
    /* Maintain ≥24px hit area (WCAG 2.2 SC 2.5.8); strip height does the rest. */
    padding: 0 2px;
  }

  /* No dropdowns on mobile; the caret would lie. */
  .mz-nav__list > li.menu-item-has-children > a::after { display: none; }
  .mz-nav__list .sub-menu { display: none; }
}