/**
 * Nav overrides for dynamic overflow / mobile flat list
 */

/* ------------------------------------------------------------------
   DESKTOP (>768px): ensure the flex row doesn't wrap — items that
   don't fit are moved into the More dropdown by JS instead.
   ------------------------------------------------------------------ */
@media (min-width: 769px) {
  .plugin-Navigation .plugin-Navigation-list {
    flex-wrap: nowrap !important;
    overflow: visible;         /* must be visible so the More dropdown can float outside */
  }

  /* The More dropdown needs display:none until hovered / JS-toggled.
     The existing CSS already does this, but reinforce here so items
     moved in by JS are definitely hidden initially.                    */
  .plugin-Navigation-more > ul {
    display: none;
  }
}

/* ------------------------------------------------------------------
   MOBILE (<=768px): all items show vertically; no More/Less needed.
   The JS hides .plugin-Navigation-more on mobile, so the items it
   contains are moved back to the main list. This just ensures the
   vertical list wraps properly.
   ------------------------------------------------------------------ */
@media (max-width: 768px) {
  .plugin-Navigation-more {
    display: none !important;   /* hide the More button entirely */
  }

  /* Match the desktop More dropdown shadow on the mobile hamburger tray */
  .plugin-Header-nav.is-expanded {
    -webkit-box-shadow: -1px 3px 4px rgba(0, 0, 0, 0.3);
    box-shadow: -1px 3px 4px rgba(0, 0, 0, 0.3);
  }

  /* The theme sets --navigation-height-mobile: calc(100vh - 410px) which
     reserves far more space than the Header--10 layout actually needs.
     Override the max-height on the nav list so it can use the viewport
     minus just the real header content above it (~140px for the mobile
     icon bar + logo/hamburger row).                                      */
  .basic .plugin-Header.plugin-Header--10 .plugin-Navigation .plugin-Navigation-list {
    max-height: calc(100vh - 240px);
  }
}