/*
 * PDI shared header — centered desktop navigation, consistent site gutters,
 * and viewport-safe flyouts. Load AFTER pdi-header.css.
 *
 * Header width and horizontal padding intentionally match the shared footer:
 *   maximum content width: 1320px
 *   desktop horizontal gutter: 20px
 */

#pdi-common-header,
#pdi-common-header .pdi-site-header,
#pdi-common-header .pdi-site-header__inner,
#pdi-common-header .pdi-nav,
#pdi-common-header .pdi-nav__menu--level-1,
#pdi-common-header .pdi-nav__item {
  overflow: visible !important;
}

#pdi-common-header,
#pdi-common-header .pdi-site-header {
  position: relative !important;
  z-index: 100000 !important;
}

/* Desktop and large laptop layout. */
@media (min-width: 1351px) {
  #pdi-common-header .pdi-site-header__inner {
    justify-content: center !important;
    width: min(calc(100% - 40px), 1320px) !important;
    max-width: 1320px !important;
    margin-inline: auto !important;
    padding-inline: 20px !important;
    gap: clamp(24px, 2vw, 34px) !important;
  }

  #pdi-common-header .pdi-site-header__logo {
    flex: 0 0 178px !important;
    width: 178px !important;
    max-width: 178px !important;
    position: relative !important;
    left: -112px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  #pdi-common-header .pdi-site-header__logo img {
    width: 178px !important;
    max-width: 178px !important;
  }

  #pdi-common-header .pdi-nav {
    flex: 0 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  #pdi-common-header .pdi-nav__menu--level-1 {
    justify-content: center !important;
    width: auto !important;
    gap: clamp(16px, 1.25vw, 24px) !important;
  }

  #pdi-common-header .pdi-nav__menu--level-1 > li {
    flex: 0 0 auto !important;
  }

  #pdi-common-header .pdi-nav__top-link,
  #pdi-common-header .pdi-nav__toggle--top {
    padding-inline: 0 !important;
    white-space: nowrap !important;
  }

  /* Anchor each first panel beneath its own top-level item. */
  #pdi-common-header .pdi-nav__submenu--level-2,
  #pdi-common-header .pdi-nav__menu--level-1 > .pdi-nav__item--dropdown:nth-child(2) > .pdi-nav__submenu {
    top: 100% !important;
    left: -14px !important;
    right: auto !important;
    transform: none !important;
  }

  /* Deeper panels open to the right once the top menu is moved left. */
  #pdi-common-header .pdi-nav__submenu--level-3,
  #pdi-common-header .pdi-nav__submenu--level-4,
  #pdi-common-header .pdi-nav__submenu .pdi-nav__submenu {
    top: -5px !important;
    left: calc(100% - 1px) !important;
    right: auto !important;
    transform: none !important;
  }

  #pdi-common-header .pdi-nav__submenu--level-2 {
    min-width: 300px !important;
    max-width: 340px !important;
  }

  #pdi-common-header .pdi-nav__submenu--level-3 {
    min-width: 315px !important;
    max-width: 390px !important;
  }

  #pdi-common-header .pdi-nav__submenu--level-3.pdi-nav__submenu--wide {
    min-width: 390px !important;
    max-width: 410px !important;
  }

  #pdi-common-header .pdi-nav__submenu--level-4 {
    min-width: 250px !important;
    max-width: 300px !important;
  }

  #pdi-common-header .pdi-nav__submenu,
  #pdi-common-header .pdi-nav__submenu li {
    overflow: visible !important;
  }
}

/* Common 1366–1536px laptop widths: keep the full four-column Services tree visible. */
@media (min-width: 1351px) and (max-width: 1599px) {
  #pdi-common-header .pdi-site-header__inner {
    width: min(calc(100% - 32px), 1320px) !important;
    max-width: 1320px !important;
    padding-inline: 16px !important;
    gap: 20px !important;
  }

  #pdi-common-header .pdi-site-header__logo,
  #pdi-common-header .pdi-site-header__logo img {
    flex-basis: 158px !important;
    width: 158px !important;
    max-width: 158px !important;
  }

  #pdi-common-header .pdi-nav__menu--level-1 {
    gap: 15px !important;
  }

  #pdi-common-header .pdi-nav a,
  #pdi-common-header .pdi-nav button {
    font-size: 16px !important;
  }

  #pdi-common-header .pdi-nav__submenu--level-2 {
    min-width: 270px !important;
    max-width: 290px !important;
  }

  #pdi-common-header .pdi-nav__submenu--level-3 {
    min-width: 285px !important;
    max-width: 330px !important;
  }

  #pdi-common-header .pdi-nav__submenu--level-3.pdi-nav__submenu--wide {
    min-width: 330px !important;
    max-width: 350px !important;
  }

  #pdi-common-header .pdi-nav__submenu--level-4 {
    min-width: 225px !important;
    max-width: 245px !important;
  }

  #pdi-common-header .pdi-nav__submenu a,
  #pdi-common-header .pdi-nav__submenu .pdi-nav__toggle,
  #pdi-common-header .pdi-nav__link-row {
    min-height: 47px !important;
    padding: 10px 16px !important;
    font-size: 15.5px !important;
  }

  #pdi-common-header .pdi-nav__link-row > a {
    min-height: 47px !important;
    padding: 10px 0 10px 16px !important;
  }
}

/* The existing pdi-header.css switches to the hamburger menu at 1350px.
   Do not apply desktop flyout positioning below that breakpoint. */
@media (max-width: 1350px) {
  #pdi-common-header .pdi-site-header__inner {
    justify-content: space-between !important;
  }

  #pdi-common-header .pdi-nav__submenu,
  #pdi-common-header .pdi-nav__submenu--level-2,
  #pdi-common-header .pdi-nav__submenu--level-3,
  #pdi-common-header .pdi-nav__submenu--level-4 {
    left: auto !important;
    right: auto !important;
    top: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    transform: none !important;
  }
}