/* ==========================================================================
   Primary navigation — second level

   Two layers, deliberately separated:

   1. A no-JS baseline. :hover and :focus-within alone open a dropdown, so the
      second level of the information architecture is reachable by mouse and by
      keyboard on a page where zip-nav.js failed to load. Focusing the parent
      link makes the panel visible, which is what lets the next Tab reach the
      links inside it — a panel hidden with display:none can never be tabbed
      into, which is why visibility is used here instead.

   2. The enhanced layer. zip-nav.js sets .has-js on the menu and drives .is-open
      itself, so aria-expanded and the visible state can never disagree. The
      baseline rules are switched off in that case rather than left to fight it.
   ========================================================================== */

#primary-menu .sub-menu {
  list-style: none;
  margin:0;
  padding:var(--s-1) 0;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 80;
  min-width: 232px;
  /* Offset to the lower edge of the header bar; the ::before below bridges the
     same 16px so the pointer never crosses dead space on its way into the
     panel and drops the :hover that opened it. */
  margin-top:var(--s-4);
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: 0 14px 34px -18px rgba(20,48,23, .38);
  /* The panel is laid out but not painted or hit-tested until it opens. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity .16s ease, transform .16s ease, visibility 0s .16s;
}

/* The parent row carries the link and the caret side by side; the panel itself
   is out of flow, so the flex context only ever has those two children. */
#primary-menu .menu-item-has-children {
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
}

/* Products is an information-architecture label; its three application pages
   are the destinations. Keep the inherited top-level styling without implying
   that the label itself navigates. */
#primary-menu .menu-item-label-only > a {
  cursor: default;
}

#primary-menu .sub-menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -16px;
  height: 16px;
}

#primary-menu .sub-menu a {
  padding:var(--s-2) var(--s-4);
  font-size:var(--fs-small);
  line-height:var(--lh-h3);
  white-space: normal;
  border-bottom: 0;
  color: var(--muted);
}

#primary-menu .sub-menu a:hover,
#primary-menu .sub-menu a:focus-visible {
  background: var(--mist);
  color: var(--ink);
}

#primary-menu .sub-menu li.current-menu-item > a {
  color: var(--ink);
  font-weight:var(--fw-micro);
  box-shadow: inset 2px 0 0 var(--sage);
}

/* Open state. .is-open is the only rule the enhanced layer needs. */
#primary-menu .menu-item-has-children.is-open > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

/* Baseline, withdrawn once the script is in charge. */
#primary-menu:not(.has-js) .menu-item-has-children:hover > .sub-menu,
#primary-menu:not(.has-js) .menu-item-has-children:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

/* --------------------------------------------------------------------------
   Toggle button

   Injected by the script as a sibling of the parent label or link. Products is
   intentionally label-only; the other parents retain their own destinations.
   -------------------------------------------------------------------------- */

#primary-menu .subtoggle {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: none;
  padding:var(--s-2) var(--s-2) var(--s-2) 0;
  margin-left:calc(var(--s-2) * -1);
  color: var(--muted);
  line-height:1;
  min-width:44px;
  min-height:44px;
}

#primary-menu .subtoggle .en-icon {
  width: 1em;
  height: 1em;
  transition: transform .16s ease;
}

#primary-menu .menu-item-has-children.is-open > .subtoggle {
  color: var(--ink);
}

#primary-menu .menu-item-has-children.is-open > .subtoggle .en-icon {
  transform: rotate(180deg);
}

/* The desktop caret owns a full 44px hit area but sits inside reserved link
   padding, so it does not create a second navigation row or steal another
   44px of horizontal track. */
@media (min-width: 1281px) {
  /* The caret sits beside its own label, not pinned to the far edge of the row.
     Absolutely positioning it at right:0 across a 44px reservation pushed the
     glyph away from the word it belongs to, so on a wide item it read as an
     unrelated mark floating in the gap. It is now a flow sibling of the link
     text with a small gap, and the row keeps its 44px hit area through padding
     on the button rather than through distance. */
  #primary-menu .menu-item-has-children {
    display:flex;
    align-items:center;
  }

  /* The label and its caret are one item, so the space between them has to read
     as smaller than the space between items. The link contributes nothing and
     the caret carries a 2px lead — against the 8px column-gap style.css sets on
     the list, that is a clear four-to-one. Neither carries trailing padding:
     the item's box ends at the caret, so the gap to the next item is the same
     8px as between two plain items. It was 13px here, which is what made the
     row look unevenly spaced around exactly the items that have a dropdown. */
  #primary-menu .menu-item-has-children > a {
    padding-right:0;
  }

  #primary-menu .menu-item-has-children > .subtoggle {
    position:static;
    width:auto;
    min-width:0;
    height:44px;
    padding:0;
    margin:0 0 0 2px;
    display:inline-flex;
    align-items:center;
  }
}

/* A coarse pointer has no hover, so the caret is the whole mechanism there and
   needs to clear the 44px target the bundle asks for on mobile. */
@media (pointer: coarse) {
  #primary-menu .subtoggle {
    min-width: 44px;
    min-height: 44px;
    padding:0;
    margin-left:0;
  }
}

/* --------------------------------------------------------------------------
   Inside the hamburger panel

   At 1280px and below #primary-menu.open is a stacked panel — the same width
   at which style.css swaps .primary-navigation for the burger, not the 1000px
   an earlier wave of this comment named — so the dropdown stops
   being an overlay and becomes an indented block that pushes the rest of the
   list down. display is used rather than visibility here because the collapsed
   rows must not occupy height in a column that is already scrolling.
   -------------------------------------------------------------------------- */
@media (max-width: 1280px) {
  #primary-menu.open .menu-item-has-children {
    display: block;
    position: relative;
  }

  #primary-menu.open .menu-item-has-children > a {
    /* Room for the caret, which is pinned to the right of the row. */
    padding-right:var(--s-7);
  }

  #primary-menu.open .subtoggle {
    position: absolute;
    top: 0;
    right: 0;
    width: 48px;
    height: 44px;
    min-width: 0;
    min-height: 0;
    padding:0;
    margin:0;
  }

  #primary-menu.open .sub-menu {
    display: none;
    position: static;
    min-width: 0;
    margin:0 0 var(--s-1);
    padding:0 0 var(--s-1) var(--s-3);
    border: 0;
    border-left: 2px solid var(--line);
    box-shadow: none;
    background: none;
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  #primary-menu.open .sub-menu::before {
    content: none;
  }

  #primary-menu.open .menu-item-has-children.is-open > .sub-menu {
    display: block;
  }

  #primary-menu.open .sub-menu a {
    padding:var(--s-3) 0;
    font-size:var(--fs-small);
    min-height: 44px;
    border-bottom: 1px solid var(--line-2);
  }

  #primary-menu.open .sub-menu li:last-child a {
    border-bottom: 0;
  }
}

/* Hover is not an input method on a touch screen; leaving the baseline rule on
   there makes the first tap open a panel the second tap has to dismiss. */
@media (hover: none) {
  #primary-menu:not(.has-js) .menu-item-has-children:hover > .sub-menu {
    opacity: 0;
    visibility: hidden;
  }
}