/* Only geometry changes: retain the native menu's colors, buttons and typography. */
html:has(#zdm-overlay.zdm--open) #zcc-banner,
html:has(.header__menu__content[data-state="open"]) #zcc-banner {
  visibility: hidden;
  pointer-events: none;
}
@media (min-width: 768px) {
  #zdm-overlay { overscroll-behavior: contain; }
}
/* Six links at the original size and spacing need a window about 760px tall,
   so taller windows keep the original menu untouched. Shorter laptop windows
   shrink the links and the space around them together (the coefficients sum
   to 1 against 100vh - 180px), keeping the original proportions instead of
   squeezing the gaps, and never going below 48px. Windows 768-1024px wide
   already use 48px links and simply scroll when they are short. */
@media (min-width: 1025px) and (max-height: 763px) {
  .zdm__content { padding-block: clamp(30px, calc((100vh - 180px) * 0.0685), 40px); }
  .zdm__nav { gap: clamp(12px, calc((100vh - 180px) * 0.0274), 16px); }
  .zdm__link { font-size: clamp(48px, calc((100vh - 180px) * 0.1096), 64px); }
  .zdm__footer { margin-top: clamp(30px, calc((100vh - 180px) * 0.0685), 40px); }
}
@media (max-width: 767px) {
  /* Radix normally positions against the layout viewport, not the visible one. */
  [data-radix-popper-content-wrapper]:has(.header__menu__content) {
    position: fixed !important;
    top: var(--zeen-menu-top, var(--header-height, 68px)) !important;
    left: var(--zeen-menu-left, 0px) !important;
    transform: none !important;
  }
  .header__menu__content {
    min-block-size: 0 !important;
    max-height: var(--zeen-menu-height, calc(100dvh - var(--header-height, 68px) - 16px));
  }
  .header__menu__wrapper {
    box-sizing: border-box;
    min-height: 0 !important;
    max-height: var(--zeen-menu-height, calc(100dvh - var(--header-height, 68px) - 16px));
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    /* Floating browser chrome need not reduce visualViewport.height.
       Reserve 100px even when it reports the entire screen. */
    padding-bottom: max(100px, env(safe-area-inset-bottom));
  }
  .header__menu__wrapper > * { flex-shrink: 0; }
}
@media (max-width: 440px) {
  .header__menu__wrapper {
    height: var(--zeen-menu-height, calc(100dvh - var(--header-height, 68px) - 16px));
  }
}