/* Navigation component — structure and the enhanced/open states only.
   Visual styling of the desktop menu (colours, type) lives in base.css.
   Breakpoint is 767px, not the kernel default 48rem: the source still shows
   the full horizontal menu at 768 and collapses below it (capture: navLink
   present at about/768, absent at about/390). */
.primary-navigation {
  /* The panel's navy: the source's own mobile MENU button colour (measured
     @390), not a palette entry — it is only ever used here and on the hero. */
  --pc-nav-panel: #0B2371;
}
.primary-navigation__toggle[hidden] { display: none; }
.primary-navigation__toggle-icon--close { display: none; }

/* The panel wrapper exists for the mobile bar only; on desktop it is
   transparent to layout and the bar is gone. */
.primary-navigation__panel { display: contents; }
.primary-navigation__panel-bar { display: none; }

/* ---- below 768px: a full-screen panel, not a dropdown ------------------- */
/* Nick, 2026-09-22: "make the mobile menu modern and much better". The
   source's Elementor popup was a plain list. This is a full-height navy
   panel with large tappable links, the two dropdown groups listed under
   their parents, the current page picked out in brand yellow, and one
   control that turns from MENU into CLOSE. Motion is a short fade-and-lift
   and is dropped for reduced-motion users; the page behind stops scrolling. */
@media (max-width: 767px) {
  .primary-navigation.is-enhanced .primary-navigation__toggle {
    display: inline-flex;
    position: relative;
    z-index: 60;
    transition: background-color var(--pc-motion) ease, color var(--pc-motion) ease;
  }
  .primary-navigation.is-open .primary-navigation__toggle-icon--open { display: none; }
  .primary-navigation.is-open .primary-navigation__toggle-icon--close { display: block; }
  /* Open: the control pins itself to the panel's white bar, at the same
     spot on every template (the home header is 200px tall, interior 80px). */
  .primary-navigation.is-enhanced.is-open .primary-navigation__toggle {
    position: fixed;
    top: 20px;
    right: var(--wp--preset--spacing--sm);
    background: var(--pc-nav-panel);
    color: var(--pc-paper);
  }

  /* The panel: a white 80px bar with the logo (Nick, 2026-09-23: the logo is
     always visible), then the navy list filling the rest of the screen. */
  .primary-navigation.is-enhanced .primary-navigation__panel {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    flex-direction: column;
    background: var(--pc-nav-panel);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity var(--pc-motion) ease, transform var(--pc-motion) ease, visibility 0s linear var(--pc-motion);
  }
  .primary-navigation.is-enhanced.is-open .primary-navigation__panel {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
  }
  .primary-navigation.is-enhanced .primary-navigation__panel-bar {
    flex: 0 0 80px;
    display: flex;
    align-items: center;
    padding-inline: var(--wp--preset--spacing--sm);
    background: var(--pc-paper);
    border-bottom: 1px solid rgb(0 0 0 / .08);
  }
  .primary-navigation__brand { display: block; line-height: 0; }
  .primary-navigation__brand-logo { width: 202px; height: auto; }   /* the header's own mobile logo width */

  .primary-navigation.is-enhanced .primary-navigation__menu {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0;
    margin: 0;
    padding: 24px var(--wp--preset--spacing--md) 40px;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .primary-navigation.is-enhanced .primary-navigation__menu > li {
    border-bottom: 1px solid rgb(255 255 255 / .14);
  }
  .primary-navigation.is-enhanced .primary-navigation__menu a {
    padding: 16px 0;
    color: var(--pc-paper);
    font-size: 1.5rem;
    font-weight: var(--pc-fw-nav);
    line-height: 1.2;
    text-decoration: none;
  }
  .primary-navigation.is-enhanced .primary-navigation__menu a:hover,
  .primary-navigation.is-enhanced .primary-navigation__menu a:focus-visible {
    color: var(--pc-secondary);
    text-decoration: none;
  }
  .primary-navigation.is-enhanced .primary-navigation__menu .current-menu-item > a,
  .primary-navigation.is-enhanced .primary-navigation__menu .current-menu-ancestor > a {
    color: var(--pc-secondary);
  }

  /* The two dropdown groups sit under their parent, smaller and indented. */
  .primary-navigation.is-enhanced .primary-navigation__menu .sub-menu {
    display: block;
    position: static;
    min-width: 0;
    margin: -6px 0 10px;
    padding: 0 0 0 18px;
    background: transparent;
    box-shadow: none;
  }
  .primary-navigation.is-enhanced .primary-navigation__menu .sub-menu a {
    padding: 8px 0;
    font-size: 1rem;
    font-weight: 500;
    color: rgb(255 255 255 / .82);
  }

  body.pc-nav-open { overflow: hidden; }
}

@media (prefers-reduced-motion: reduce) {
  .primary-navigation__panel,
  .primary-navigation__toggle { transition: none !important; }
  .primary-navigation.is-enhanced .primary-navigation__panel { transform: none; }
}