/* ------------------------------------------------------------
   PIH primary navigation
   Markup: default wp_nav_menu() walker inside nav.pih-nav
     ul.menu > li.menu-item(.menu-item-has-children) > a + ul.sub-menu
   pih-nav.js swaps each parent <a> for <button.submenu-toggle> and adds a
   back row to each panel. All open/closed state lives in aria-expanded;
   CSS reads it with :has().
   Colors follow 26PIH005-Website-DevBrandGuide-v1 and the Home design:
     desktop  L2 Legacy green / white text, L3 pale mint / dark text
     mobile   L1 Legacy, L2 PNW, L3 Forest, white text throughout
   ------------------------------------------------------------ */

.pih-nav-wrap {
  /* Local tokens read the theme's globals; names differ to avoid self-reference */
  --nav-legacy:  var(--accent, #007777);
  --nav-pnw:     var(--pnw, #003f3f);
  --nav-forest:  var(--forest, #002517);
  --nav-coastal: var(--coastal, #acc9c9);
  --nav-ink:     var(--contrast, #222222);
  --nav-mint:    #edf6f6;
  --nav-focus:   var(--nav-legacy);
  --bp: 1024px;
  --slide-speed: 0.3s;
  --slide-ease: ease;

  font-family: Lato, sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
}

@media (prefers-reduced-motion: reduce) {
  .pih-nav-wrap { --slide-speed: 0s; }
}

.pih-nav-wrap :focus-visible {
  outline: 3px solid var(--nav-focus);
  outline-offset: -3px;

  @media (forced-colors: active) { outline-color: Highlight; }
}

/* Anything sitting on a green background needs a white ring */
.pih-nav-wrap :is(.pih-menu-toggle, .pih-donate-btn):focus-visible,
.pih-nav-wrap .sub-menu :focus-visible {
  outline-color: #fff;
}

/* Hamburger (mobile only) */
.pih-menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  min-inline-size: 44px;
  min-block-size: 44px;
  padding: 10px;
  border: 0;
  background: transparent;
  color: var(--nav-legacy);
  cursor: pointer;

  svg { inline-size: 28px; block-size: 28px; }
  .icon-close { display: none; }

  &[aria-expanded="true"] {
    .icon-open { display: none; }
    .icon-close { display: block; }
  }
}

/* ---------- Shared ---------- */
.pih-nav {
  ul { list-style: none; margin: 0; padding: 0; }
  li { margin: 0; padding: 0; }

  a, .submenu-toggle, .nav-back {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    inline-size: 100%;
    min-block-size: 44px;
    border: 0;
    background: transparent;
    color: var(--nav-ink);
    font: inherit;
    text-align: start;
    text-decoration: none;
    cursor: pointer;
  }

  .sub-menu { display: none; }
  .nav-back-item { display: none; }
  .pih-mobile { display: none; }
}

/* Top-level chevron: solid down triangle in Legacy green (design) */
.pih-nav .chevron {
  flex-shrink: 0;
  inline-size: 0;
  block-size: 0;
  border-inline: 5px solid transparent;
  border-block-start: 6px solid var(--nav-legacy);
  transition: transform 0.2s var(--slide-ease);
}

/* Sub-level chevron: thin right arrow */
.pih-nav .sub-menu .chevron {
  inline-size: 0.5rem;
  block-size: 0.5rem;
  border: 0;
  border-inline-end: 2px solid currentColor;
  border-block-start: 2px solid currentColor;
  transform: rotate(45deg);
}

/* ---------- Desktop: top bar, dropdown, flyout ---------- */
@media (width > 1024px) {
  .pih-nav {
    .menu { display: flex; justify-content: flex-end; }
    .menu-item { position: relative; }

    /* Top level: idle border keeps height stable; Legacy on hover/current */
    .menu > .menu-item {
      border-block-end: 3px solid transparent;

      > :is(a, .submenu-toggle) {
        inline-size: auto;
        padding: 10px;
        white-space: nowrap;
      }

      &:is(:hover, :focus-within, .current-menu-item, .current-menu-ancestor) {
        border-block-end-color: var(--nav-legacy);
        > :is(a, .submenu-toggle) { color: var(--nav-legacy); }
      }
    }
    .menu > .menu-item > .submenu-toggle[aria-expanded="true"] .chevron { transform: rotate(180deg); }

    /* Open on click/keyboard only (aria-expanded). JS toggles the state,
       closes siblings, and closes on outside-click, Escape, or focus leaving
       the nav. Mobile keeps its drill-down below. */
    .menu-item:has(> .submenu-toggle[aria-expanded="true"]) > .sub-menu { display: block; }

    .sub-menu {
      position: absolute;
      inline-size: 18rem;
      padding-block: 8px;
      z-index: 100;

      :is(a, .submenu-toggle) {
        padding: 8px 20px;
        justify-content: space-between;
        font-weight: 400;
        line-height: 1.3;
      }
    }

    /* L2: Legacy green, white text, left-aligned under the item */
    .menu > .menu-item > .sub-menu {
      inset-block-start: 100%;
      inset-inline-start: 0;
      background: var(--nav-legacy);
      color: #fff;

      :is(a, .submenu-toggle) { color: #fff; text-transform: capitalize; }
      :is(a, .submenu-toggle):hover,
      .menu-item:has(> .submenu-toggle[aria-expanded="true"]) > .submenu-toggle {
        background: var(--nav-pnw);
      }
      .current-menu-item > a { font-weight: 700; box-shadow: inset 3px 0 0 #fff; }
    }

    /* L3: pale mint flyout to the right, dark text, Coastal hover.
       Selector is nested under the L2 rule so it wins on specificity. */
    .menu > .menu-item > .sub-menu .sub-menu {
      inset-block-start: 0;
      inset-inline-start: 100%;
      background: var(--nav-mint);
      color: var(--nav-ink);
      box-shadow: 4px 8px 24px rgb(0 0 0 / 0.12);

      a { color: var(--nav-ink); }
      a:hover { background: var(--nav-coastal); }
      .current-menu-item > a { font-weight: 700; background: var(--nav-coastal); box-shadow: none; }
      :focus-visible { outline-color: var(--nav-legacy); }
    }
  }
}

/* ---------- Mobile: full-screen drill-down ---------- */
@media (width <= 1024px) {
  .pih-menu-toggle { display: flex; }

  /* Lock page scroll while the overlay is open */
  html.pih-nav-open { overflow: hidden; }
  
  div:has(.pih-nav-wrap) {
    border: none;
    justify-content: flex-end;
  }

  .pih-nav {
    display: none;
    position: fixed;
    inset-inline: 0;
    inset-block-start: var(--pih-nav-top, 0);
    block-size: calc(100dvh - var(--pih-nav-top, 0px));
    overflow: hidden;
    background: var(--nav-legacy);
    color: #fff;
    z-index: 1000;

    .pih-nav-wrap:has(.pih-menu-toggle[aria-expanded="true"]) & { display: block; }

    /* Every panel is a full-size scrolling layer */
    .menu, .sub-menu {
      display: block;
      position: absolute;
      inset: 0;
      overflow: hidden auto;
      overscroll-behavior: contain;
      padding-block-end: 32px;
    }

    a, .submenu-toggle, .nav-back {
      padding: 12px 24px;
      justify-content: space-between;
      color: #fff;
      font-size: 18px;
      font-weight: 400;
      &:hover { background: rgb(0 0 0 / 0.15); }
    }
    .current-menu-item > a { font-weight: 700; box-shadow: inset 3px 0 0 #fff; }

    /* All chevrons point right on mobile */
    .chevron {
      inline-size: 0.5rem;
      block-size: 0.5rem;
      border: 0;
      border-inline-end: 2px solid currentColor;
      border-block-start: 2px solid currentColor;
      transform: rotate(45deg);
    }

    /* Child panels start offscreen right; deeper = darker */
    .sub-menu {
      background: var(--nav-pnw);
      transform: translateX(100%);
      transition: transform var(--slide-speed) var(--slide-ease);
      z-index: 10;
    }
    .sub-menu .sub-menu { background: var(--nav-forest); z-index: 20; }

    .menu-item:has(> .submenu-toggle[aria-expanded="true"]) > .sub-menu { transform: translateX(0); }

    /* Parent rows slide back and dim while a child panel is open.
       Rows move, not the panel, so the nested child panel stays put. */
    .menu > li, .sub-menu > li, .submenu-toggle {
      transition: transform var(--slide-speed) var(--slide-ease),
                  opacity var(--slide-speed) var(--slide-ease);
    }
    :is(.menu, .sub-menu):has(> li > .submenu-toggle[aria-expanded="true"]) {
      > li:not(:has(> .submenu-toggle[aria-expanded="true"])),
      > li:has(> .submenu-toggle[aria-expanded="true"]) > .submenu-toggle {
        transform: translateX(-30%);
        opacity: 0.4;
      }
    }

    /* Back row: "← Parent" on a lighter band (one shade up from the panel) */
    .nav-back-item { display: block; }
    .nav-back {
      justify-content: flex-start;
      font-weight: 600;
      background: var(--nav-legacy);
      margin-block-end: 8px;
    }
    .sub-menu .sub-menu .nav-back { background: var(--nav-pnw); }
    .back-arrow {
      inline-size: 0.6rem;
      block-size: 0.6rem;
      border-inline-start: 2px solid currentColor;
      border-block-end: 2px solid currentColor;
      transform: rotate(45deg);
      margin-inline-end: 4px;
    }

    /* ---- Mobile-only extras (search top; links, Donate, social bottom) ---- */
    .pih-mobile { display: block; }

    .pih-mobile-search {
      padding: 16px 24px 8px;

      form { display: flex; margin: 0; position: relative; }
      label { flex: 1; margin: 0; }
      input[type="search"] {
        inline-size: 100%;
        min-block-size: 44px;
        padding: 0 48px 0 16px;
        border: 1px solid #fff;
        border-radius: 999px;
        background: transparent;
        color: #fff;
        font: inherit;
        font-size: 18px;
        &::placeholder { color: rgb(255 255 255 / 0.85); }
      }
      .search-submit, button[type="submit"] {
        position: absolute;
        inset-inline-end: 2px;
        inset-block: 2px;
        inline-size: 44px;
        border: 0;
        border-radius: 999px;
        background: transparent;
        color: #fff;
        cursor: pointer;
        svg { inline-size: 1.1em; block-size: 1.1em; }
      }
    }

    .pih-mobile-donate {
      margin: 16px 24px 0;
      padding-block-start: 20px;
      border-block-start: 1px solid rgb(255 255 255 / 0.5);
      text-align: center;

      .pih-donate-btn {
        display: inline-flex;
        justify-content: center;
        inline-size: auto;
        min-inline-size: 140px;
        padding: 10px 32px;
        border-radius: 999px;
        background: var(--nav-pnw);
        color: #fff;
        font-weight: 600;
        text-transform: uppercase;
        &:hover { background: var(--nav-forest); }
      }
    }

    .pih-mobile-social {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 8px;
      padding: 20px 24px 0;
      color: #fff;

      .pih-follow { flex-basis: 100%; text-align: center; font-weight: 600; }
      a {
        display: inline-flex;
        inline-size: 44px;
        min-block-size: 44px;
        justify-content: center;
        padding: 0;
        svg { inline-size: 24px; block-size: 24px; }
      }
    }
  }
}

/* ------------------------------------------------------------
   Header utility cluster (search + utility link + Donate).
   GenerateBlocks hides .gb-element-e0b2a147 at <=767px; extend that to
   <=1024px so the desktop search/utilities track the primary nav. Their
   contents are relocated into the mobile menu by inc/pih-nav.php.
   (Class is the GenerateBlocks uniqueId for that row; update it if the
   header block is rebuilt.)
   ------------------------------------------------------------ */
@media (width <= 1024px) {
  .gb-element-e0b2a147 { display: none !important; }
}