/* Shared header QA repair.
   Keep these rules specific to this site's header markup so the desktop and
   mobile navigation states do not compete with generic compatibility rules. */

@media (min-width: 1181px) {
  .header {
    overflow: visible;
  }

  .header__inner {
    width: 100%;
    max-width: min(1380px, calc(100vw - 24px));
    min-width: 0;
    padding-inline: clamp(10px, 1vw, 20px);
    gap: clamp(8px, 0.8vw, 16px);
  }

  .header__logo {
    flex: 0 1 auto;
    min-width: 0;
    max-width: clamp(130px, 16vw, 220px);
  }

  .header__logo img {
    max-width: 100%;
    max-height: 72px;
    object-fit: contain;
  }

  .header__nav {
    flex: 1 1 auto;
    min-width: 0;
    justify-content: center;
    gap: clamp(8px, 0.8vw, 16px);
  }

  .header__nav-list {
    min-width: 0;
    flex-wrap: nowrap;
    gap: clamp(2px, 0.45vw, 10px);
  }

  .header__nav-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-inline: clamp(5px, 0.5vw, 10px);
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: normal;
    font-size: clamp(12px, 0.78vw, 14.5px);
    line-height: 1.1;
  }

  .header__dropdown-trigger {
    appearance: none;
    margin: 0;
    border: 0;
    background: transparent;
    font-family: inherit;
    cursor: pointer;
  }

  .header__actions {
    flex: 0 0 auto;
    gap: clamp(6px, 0.75vw, 12px);
  }

  .header__phone,
  .header__actions .btn {
    white-space: nowrap;
    font-size: clamp(12px, 0.82vw, 14px);
  }

  .header__actions .btn {
    padding-inline: clamp(10px, 0.95vw, 16px);
  }

  .header__nav-item--dropdown {
    height: 100%;
    overflow: visible;
  }

  /* While a disclosure is open, make the full rectangle between its trigger
     and panel part of the same hover target. Both panels open toward the left,
     away from the following nav item, so diagonal pointer travel cannot cross
     an overlapping sibling trigger and switch menus mid-path. */
  .header__nav-item--dropdown::after {
    content: '';
    position: absolute;
    z-index: 1;
    top: 50%;
    right: 0;
    width: 320px;
    height: calc(50% + 12px);
    pointer-events: none;
  }

  .header__nav-item--dropdown:hover::after,
  .header__nav-item--dropdown:focus-within::after,
  .header__nav-item--dropdown.is-open::after {
    pointer-events: auto;
  }

  .header__nav-item--dropdown > .header__nav-link {
    z-index: 2;
  }

  .header__nav-item--dropdown:hover,
  .header__nav-item--dropdown:focus-within,
  .header__nav-item--dropdown.is-open {
    z-index: 3;
  }

  .header__dropdown {
    /* Overlap the bridge and keep a predictable panel width so its entire
       trigger-to-menu pointer corridor remains interactive. */
    top: calc(100% - 8px);
    left: auto;
    right: 0;
    width: 320px;
    margin: 0;
    max-height: calc(100dvh - var(--header-height) - 12px);
    overflow-y: auto;
    transform: none;
    transition: none;
    z-index: 2;
  }

  /* Keep the open panel and bridge above adjacent navigation hit targets. */
  .header__nav-item--dropdown.is-open > .header__dropdown,
  .header__nav-item--dropdown:hover > .header__dropdown,
  .header__nav-item--dropdown:focus-within > .header__dropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
  }

  .hamburger,
  .mobile-nav {
    display: none !important;
  }
}

@media (min-width: 1181px) and (max-width: 1320px) {
  .header__phone {
    display: none;
  }
}

@media (max-width: 1180px) {
  .header {
    position: sticky;
    top: 0;
    overflow: visible;
  }

  .header__inner {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding-inline: clamp(14px, 4vw, 24px);
    gap: 12px;
  }

  .header__logo {
    flex: 0 1 auto;
    min-width: 0;
    max-width: min(68vw, 220px);
  }

  .header__logo img {
    max-width: 100%;
    max-height: 64px;
    object-fit: contain;
  }

  .header__nav,
  .header__actions {
    display: none !important;
  }

  .hamburger {
    position: relative;
    z-index: 10003;
    display: flex;
    flex: 0 0 auto;
  }

  body > .mobile-nav {
    position: fixed !important;
    inset: var(--header-height) 0 0;
    display: flex;
    width: 100%;
    height: auto;
    max-height: calc(100dvh - var(--header-height));
    margin: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    contain: layout paint;
    box-sizing: border-box;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
  }

  body > .mobile-nav.open,
  body > .mobile-nav[aria-hidden="false"] {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
  }

  /* Native details stay in the menu for keyboard and touch semantics, while
     their long panels are taken out of flow. Opening either submenu therefore
     cannot resize the drawer or move the page behind it. */
  .mobile-nav__list {
    position: relative;
    overflow: visible;
  }

  .mobile-nav__list > li {
    position: relative;
  }

  .mobile-nav__details .mobile-nav__submenu {
    position: absolute;
    z-index: 2;
    top: 100%;
    left: 0;
    right: 0;
    max-height: min(62dvh, 560px);
    overflow-y: auto;
    padding: 0.5rem 1rem 1rem 1.5rem;
    border: 1px solid var(--color-border);
    border-top: 0;
    border-radius: 0 0 var(--radius) var(--radius);
    box-shadow: 0 16px 30px rgba(0,0,0,0.16);
  }

}