/* Navigation.
 *
 * RESPONSIVE BEHAVIOUR IS STRUCTURAL AND LIVES HERE, NOT IN A SKIN.
 * Breakpoints are deliberately literal so that no skin can accidentally remove
 * the mobile layout. A skin controls how the nav LOOKS (colour, type, spacing,
 * radius, shadow); the theme guarantees that it WORKS at every width.
 */

.ivy-nav > ul { display: flex; flex-wrap: wrap; gap: var(--ivy-nav-gap); list-style: none; margin: 0; padding: 0; }

/* Above the breakpoint the nav keeps one line and the brand yields space,
   rather than the nav being squeezed into two rows. */
@media (min-width: 68.0625rem) {
  .ivy-nav { flex: 0 0 auto; }
  .ivy-nav > ul { flex-wrap: nowrap; }
  .ivy-header__brand { flex: 0 1 auto; min-width: 0; }
  .ivy-header__name { overflow-wrap: anywhere; }
}
.ivy-nav li { margin: 0; position: relative; }
.ivy-nav a { display: inline-block; padding-block: var(--ivy-space-3xs); text-decoration: none; font-size: var(--ivy-text-sm); }
.ivy-nav a:hover, .ivy-nav .current-menu-item > a, .ivy-nav .current-menu-ancestor > a { text-decoration: underline; }

/* submenu affordance */
.ivy-nav__toggle { background: none; border: 0; padding: 0 0 0 var(--ivy-space-3xs); color: inherit; font: inherit; cursor: pointer; line-height: 1; }
.ivy-nav__toggle svg { width: 0.7em; height: 0.7em; transition: transform var(--ivy-duration) var(--ivy-ease); }
.ivy-nav__item--has-children[data-open="true"] .ivy-nav__toggle svg { transform: rotate(180deg); }

/* dropdown */
.ivy-nav .sub-menu {
  position: absolute; top: 100%; left: 0; z-index: 60;
  display: none; min-width: var(--ivy-submenu-width);
  margin: 0; padding: var(--ivy-space-2xs); list-style: none;
  background: var(--ivy-submenu-bg); color: var(--ivy-submenu-fg);
  border: var(--ivy-border-width) solid var(--ivy-c-border);
  border-radius: var(--ivy-submenu-radius); box-shadow: var(--ivy-submenu-shadow);
}
.ivy-nav .sub-menu a { display: block; padding: var(--ivy-space-3xs) var(--ivy-space-2xs); color: var(--ivy-submenu-fg); border-radius: var(--ivy-radius-sm); }
.ivy-nav .sub-menu a:hover { background: var(--ivy-submenu-hover-bg); color: var(--ivy-link-hover); text-decoration: none; }
.ivy-nav__item--has-children:hover > .sub-menu,
.ivy-nav__item--has-children:focus-within > .sub-menu,
.ivy-nav__item--has-children[data-open="true"] > .sub-menu { display: block; }

/* the hamburger: hidden on wide screens */
.ivy-menu-btn {
  display: none; align-items: center; gap: var(--ivy-space-3xs);
  background: none; border: var(--ivy-border-width) solid currentColor;
  border-radius: var(--ivy-radius-sm); color: inherit; cursor: pointer;
  padding: var(--ivy-space-3xs) var(--ivy-space-2xs);
  font: inherit; font-size: var(--ivy-text-sm);
}
.ivy-menu-btn svg { width: 1em; height: 1em; }

/* ---------------------------------------------------------------------------
   Below 68rem (1088px): collapse to a toggled panel.
   --------------------------------------------------------------------------- */
@media (max-width: 68rem) {
  .ivy-menu-btn { display: inline-flex; order: 3; }
  .ivy-header__bar { flex-wrap: wrap; gap: var(--ivy-space-2xs); }
  .ivy-header__brand { flex: 1 1 auto; }

  .ivy-nav {
    order: 10; flex-basis: 100%;
    display: none;
    padding-block: var(--ivy-space-2xs) var(--ivy-space-sm);
  }
  .ivy-nav[data-open="true"] { display: block; }
  .ivy-nav > ul { flex-direction: column; gap: 0; }
  .ivy-nav > ul > li { border-top: var(--ivy-border-width) solid var(--ivy-rule-on-brand); }
  .ivy-nav a { display: block; padding-block: var(--ivy-space-2xs); }

  /* submenus stack inline rather than overlay */
  .ivy-nav .sub-menu {
    position: static; display: none; min-width: 0;
    background: transparent; border: 0; box-shadow: none;
    padding: 0 0 var(--ivy-space-2xs) var(--ivy-space-sm);
    /* The panel drops its own background here, so it must drop the text colour
       that went with it. Without this the list keeps --ivy-submenu-fg (chosen
       to sit on the white dropdown) and renders dark-on-pink at about 1.9:1. */
    color: inherit;
  }
  .ivy-nav .sub-menu a { color: inherit; }
  .ivy-nav .sub-menu a:hover { background: transparent; }
  .ivy-nav__item--has-children:hover > .sub-menu { display: none; }   /* hover is meaningless on touch */
  .ivy-nav__item--has-children[data-open="true"] > .sub-menu { display: block; }

  .ivy-nav__toggle { float: right; padding: var(--ivy-space-2xs); }
}

/* ---------------------------------------------------------------------------
   Mega panel: the Services dropdown carries four columns instead of one list.

   Same structural rule as the rest of this file — the theme guarantees the
   panel WORKS at every width; a skin only decides how it looks.
   --------------------------------------------------------------------------- */
@media (min-width: 68.0625rem) {
  /* Anchored to the NAV, not to the Services item and not to the header bar.
   *
   * Anchoring to the item put a 900px panel off one edge or the other, because
   * Services is the leftmost thing in the nav. Anchoring to the bar fixed that
   * but introduced a worse bug: the bar is taller than the links inside it, so
   * a ~30px dead strip opened up between the link and the panel. Crossing it
   * lost :hover and the menu shut before you could reach a service.
   *
   * The nav's own box ends exactly where the links end, so top:100% of the nav
   * puts the panel flush against them with nothing in between.
   *
   * left:0 rather than right:0, because the nav's left edge IS the Services
   * item — so the panel opens directly beneath the thing you hovered. Pinning
   * it right instead left a diagonal path from Services to a menu item that
   * travelled through dead space beside the panel, which reintroduced exactly
   * the bug this was meant to fix, only at narrower widths. */
  .ivy-nav { position: relative; }
  .ivy-nav .ivy-nav__item--has-children { position: static; }
  .ivy-nav .ivy-mega {
    display: none;
    grid-template-columns: repeat(4, minmax(min(11rem, 100%), 1fr));
    gap: var(--ivy-space-md);
    padding: var(--ivy-space-sm);
    left: 0; right: auto;
    width: max-content; max-width: min(58rem, calc(100vw - var(--ivy-space-lg)));
  }
  .ivy-nav__item--has-children:hover > .ivy-mega,
  .ivy-nav__item--has-children:focus-within > .ivy-mega,
  .ivy-nav__item--has-children[data-open="true"] > .ivy-mega { display: grid; }

  /* The panel opens at the nav's left edge and grows rightward, so how many
     columns fit depends on how far right the nav starts — which moves with the
     width of the brand lockup, and therefore with the skin. Step the count down
     as the room runs out. check-nav.mjs asserts the panel is fully on screen at
     every width, so a skin that shifts these boundaries fails loudly. */
  @media (max-width: 92rem) {
    .ivy-nav .ivy-mega { grid-template-columns: repeat(3, minmax(min(10rem, 100%), 1fr)); }
  }
  @media (max-width: 80rem) {
    .ivy-nav .ivy-mega { grid-template-columns: repeat(2, minmax(min(10rem, 100%), 1fr)); }
  }

  /* A column heading: the category itself, still a link. */
  .ivy-nav .ivy-mega > .ivy-mega__col > a {
    font-weight: var(--ivy-weight-heading);
    letter-spacing: var(--ivy-tracking-wide);
    text-transform: uppercase;
    font-size: var(--ivy-text-xs);
    opacity: 0.75;
    padding-bottom: var(--ivy-space-3xs);
  }
  /* Columns are always open on a wide screen; their toggle is for touch only. */
  .ivy-nav .ivy-mega .ivy-nav__toggle { display: none; }
  .ivy-nav .ivy-mega__list {
    position: static; display: block; min-width: 0;
    background: transparent; border: 0; box-shadow: none; padding: 0;
  }
}

/* Below the breakpoint the panel is a nested accordion, so the Services item
   does not empty 25 links into the page at once. */
@media (max-width: 68rem) {
  .ivy-nav .ivy-mega__col > a { font-weight: var(--ivy-weight-medium); }
  .ivy-nav .ivy-mega__list { padding-left: var(--ivy-space-sm); }

  /* Lay each expandable row out as link + toggle, with the submenu on its own
     line. The toggle used to float, which overlapped the row beneath it once
     the menu gained a second level — the toggle was unclickable because the
     next item's link sat on top of it. */
  .ivy-nav .ivy-nav__item--has-children {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  }
  .ivy-nav .ivy-nav__item--has-children > a { flex: 1 1 auto; }
  .ivy-nav .ivy-nav__item--has-children > .sub-menu { flex-basis: 100%; }
  .ivy-nav__toggle { float: none; }
}