/* Header menus. Products and Industries open as full-width panels (markup from inc/mega-menu.php);
   the other submenus are plain white dropdowns. Below 1024px everything uses core's mobile menu. */

.ld-site-header__nav .wp-block-navigation__submenu-container {
  background: var(--ld-white);
  color: var(--ld-navy);
}
.ld-site-header__nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  padding: var(--ld-sp-6) var(--ld-sp-8);
}
.ld-mega { display: none; }

@media (min-width: 1024px) {
  /* Panels hang from the header bar, not from their menu item, so they can span the page. */
  .ld-site-header__bar { position: relative; }
  .ld-site-header .wp-block-navigation.ld-site-header__nav,
  .ld-site-header .wp-block-navigation.ld-site-header__nav .wp-block-navigation__responsive-container:not(.is-menu-open),
  .ld-site-header .wp-block-navigation.ld-site-header__nav .wp-block-navigation__responsive-dialog,
  .ld-site-header .wp-block-navigation.ld-site-header__nav .wp-block-navigation__container,
  .ld-site-header .wp-block-navigation.ld-site-header__nav .wp-block-navigation-item.has-child.ld-nav__panel { position: static; }

  /* Each top-level item reaches down to the header's bottom edge (bar padding plus the space left by
     centering the labels against the taller logo), so the open bar sits on that edge. The negative
     margins keep the header's height unchanged. */
  .ld-site-header__nav .wp-block-navigation__container > .wp-block-navigation-item {
    margin-block: calc(-1 * var(--ld-sp-28));
    padding-block: var(--ld-sp-28);
  }

  /* Open item: blue label with a bar along the bottom edge of the header. */
  .ld-site-header__nav .wp-block-navigation__container > .has-child:is(:hover, :focus-within) {
    background: linear-gradient(var(--ld-blue-700), var(--ld-blue-700)) bottom / 100% var(--ld-border-2) no-repeat;
  }
  .ld-site-header__nav .wp-block-navigation__container > .has-child:is(:hover, :focus-within) > .wp-block-navigation-item__content,
  .ld-site-header__nav .wp-block-navigation__container > .has-child:is(:hover, :focus-within) > .wp-block-navigation__submenu-icon { color: var(--ld-blue-700); }

  /* Panel surface: white across the full window, a hairline at the bottom. Core's long selectors size
     open submenus, so these need the same weight. */
  .ld-site-header .wp-block-navigation.ld-site-header__nav .wp-block-navigation-item.has-child.ld-nav__panel > .wp-block-navigation__submenu-container {
    position: absolute;
    inset-block-start: 100%;
    inset-inline: var(--ld-margin);
    width: auto;
    min-width: 0;
    padding: var(--ld-sp-28) 0;
    border: 0;
    border-radius: 0;
    /* The first shadow paints on top: white page-wide, with the grey one peeking out 1px below as a hairline. */
    box-shadow: 0 0 0 100vmax var(--ld-white), 0 1px 0 100vmax var(--ld-grey-300);
    clip-path: inset(0 -100vmax -1px -100vmax);
  }
  /* Invisible strip above the panel, the height of the bar's bottom padding, so a diagonal move from the
     menu item towards a card (for example HD-AIT) stays inside the menu and does not close it. */
  .ld-site-header .ld-site-header__nav .ld-nav__panel > .wp-block-navigation__submenu-container::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    inset-block-end: 100%;
    block-size: var(--ld-sp-14);
  }
  .ld-nav__panel > .wp-block-navigation__submenu-container > li:not(.ld-mega) { display: none; }
  .ld-mega { display: block; inline-size: 100%; }

  .ld-mega__inner { display: grid; gap: var(--ld-sp-24); align-items: stretch; }
  .ld-mega--products .ld-mega__inner { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
  .ld-mega--industries .ld-mega__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) var(--ld-size-380); align-items: start; }

  /* Shared type. */
  .ld-mega p { margin: 0; }
  .ld-mega a { text-decoration: none; }
  .ld-mega__kicker {
    font-size: var(--ld-fs-eyebrow);
    font-weight: var(--ld-fw-semibold);
    letter-spacing: var(--ld-ls-eyebrow);
    text-transform: uppercase;
    color: var(--ld-blue-700);
  }
  .ld-mega__kicker--muted { color: var(--ld-grey-600); }
  .ld-mega__title {
    display: inline-block;
    margin-block-start: var(--ld-sp-12);
    color: var(--ld-navy);
    font-size: var(--ld-fs-20);
    font-weight: var(--ld-fw-bold);
    line-height: var(--ld-lh-heading);
  }
  .ld-mega__title sup { font-size: 0.5em; vertical-align: super; line-height: 0; }
  .ld-mega__title:hover { color: var(--ld-blue-700); }
  .ld-mega .ld-mega__desc {
    margin-block-start: var(--ld-sp-10);
    color: var(--ld-light-navy);
    font-size: var(--ld-fs-small);
    font-weight: var(--ld-fw-regular);
    line-height: var(--ld-lh-body);
  }
  .ld-mega__cta a {
    color: var(--ld-blue-700);
    font-size: var(--ld-fs-15);
    font-weight: var(--ld-fw-bold);
  }
  .ld-mega__cta a:hover { color: var(--ld-blue-800); text-decoration: underline; }

  /* Products: HEXWAVE feature card, weighted heavier than the HD-AIT card. */
  .ld-mega__feature {
    display: flex;
    gap: var(--ld-sp-28);
    padding: var(--ld-sp-20);
    background: var(--ld-grey-100);
    border-radius: var(--ld-radius-md);
  }
  .ld-mega__media {
    flex: none;
    inline-size: var(--ld-size-220);
    block-size: var(--ld-size-240);
    object-fit: cover;
    border-radius: var(--ld-radius-sm);
  }
  .ld-mega__body { display: flex; flex-direction: column; align-items: flex-start; padding-block-start: var(--ld-sp-6); }
  .ld-mega__title--feature {
    margin-block-start: var(--ld-sp-10);
    font-size: var(--ld-fs-h2);
    font-weight: var(--ld-fw-extrabold);
    letter-spacing: var(--ld-ls-heading);
  }
  .ld-mega__feature .ld-mega__desc { font-size: var(--ld-fs-body); max-inline-size: var(--ld-size-440); }
  /* Core zeroes list margins inside Navigation, hence the extra class. */
  .ld-mega .ld-mega__chips { display: flex; flex-wrap: wrap; gap: var(--ld-sp-8); margin: var(--ld-sp-16) 0 0; padding: 0; list-style: none; }
  .ld-mega__chip {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--ld-size-40);
    padding: 0 var(--ld-sp-12);
    border: var(--ld-border-1) solid var(--ld-grey);
    border-radius: var(--ld-radius-sm);
    background: var(--ld-white);
    color: var(--ld-navy);
    font-size: var(--ld-fs-15);
    font-weight: var(--ld-fw-semibold);
  }
  .ld-mega__chip:hover { border-color: var(--ld-navy); }
  .ld-mega__feature .ld-mega__cta { margin-block-start: var(--ld-sp-16); }
  .ld-mega__card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: var(--ld-sp-20);
    border: var(--ld-border-1) solid var(--ld-grey-300);
    border-radius: var(--ld-radius-md);
  }
  .ld-mega__card .ld-mega__cta { margin-block-start: auto; padding-block-start: var(--ld-sp-16); }

  /* Industries: two link columns split by a rule, and the note in a navy card. */
  .ld-mega__group { padding-block-start: var(--ld-sp-2); }
  .ld-mega__group--divided { padding-inline-start: var(--ld-sp-36); border-inline-start: var(--ld-border-1) solid var(--ld-grey-300); }
  .ld-mega .ld-mega__list { display: grid; gap: var(--ld-sp-26); margin: var(--ld-sp-22) 0 0; padding: 0; list-style: none; }
  .ld-mega__link { color: var(--ld-navy); font-size: var(--ld-fs-body); font-weight: var(--ld-fw-semibold); }
  .ld-mega__link:hover { color: var(--ld-blue-700); text-decoration: underline; }
  .ld-mega__aside {
    padding: var(--ld-sp-24) var(--ld-sp-22);
    min-block-size: var(--ld-size-180);
    background: var(--ld-navy);
    border-radius: var(--ld-radius-md);
  }
  .ld-mega__note { color: var(--ld-white); font-size: var(--ld-fs-17); font-weight: var(--ld-fw-semibold); line-height: var(--ld-lh-heading); }
  .ld-mega__aside .ld-mega__cta { margin-block-start: var(--ld-sp-16); }
  .ld-mega__aside .ld-mega__cta a { color: var(--ld-ice); }
  .ld-mega__aside .ld-mega__cta a:hover { color: var(--ld-white); }

  .ld-mega a:focus-visible { outline: var(--ld-border-2) solid var(--ld-focus); outline-offset: var(--ld-sp-2); }
  .ld-mega__aside a:focus-visible { outline-color: var(--ld-focus-on-dark); }
}

/* Between 600 and 1023px core still shows the full menu; the design switches to the mobile menu below 1024px. */
@media (min-width: 600px) and (max-width: 1023px) {
  .ld-site-header__nav .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
  .ld-site-header__nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
}
@media (max-width: 1023px) {
  .ld-site-header__bar .ld-site-header__nav { justify-content: flex-end; }
}

/* Mobile menu: plain indented link lists, as in the design's mobile list. */
.ld-site-header__nav .is-menu-open .ld-mega,
.ld-site-header__nav .is-menu-open .ld-nav__desktop-only,
.ld-site-header__nav .is-menu-open .wp-block-navigation-item__description { display: none; }
.ld-site-header__nav .is-menu-open .wp-block-navigation__responsive-container-content { padding: var(--ld-sp-24) var(--ld-margin); }
.ld-site-header__nav .is-menu-open .wp-block-navigation__submenu-container {
  background: transparent;
  border: 0;
  box-shadow: none;
  min-inline-size: 0;
  padding: var(--ld-sp-4) 0 var(--ld-sp-12) var(--ld-sp-16);
}
.ld-site-header__nav .is-menu-open .ld-nav__panel--industries > .wp-block-navigation__submenu-container { display: flex; flex-direction: column; }
.ld-site-header__nav .is-menu-open .ld-nav__museums { order: 1; }
.ld-nav__kicker {
  font-size: var(--ld-fs-eyebrow);
  font-weight: var(--ld-fw-semibold);
  letter-spacing: var(--ld-ls-eyebrow);
  text-transform: uppercase;
  color: var(--ld-blue-700);
  padding: var(--ld-sp-6) var(--ld-sp-8) var(--ld-sp-2) var(--ld-sp-14);
}
@media (min-width: 1024px) {
  .ld-nav__kicker { display: none; }
}
