/* Shared drawer behaviour for the homepage and its detail pages. */
html.menu-scroll-locked,
body.menu-open {
  overflow: hidden;
  overscroll-behavior: none;
}

body.menu-open .page-wrap { touch-action: none; }
/* Page cues and the draft shortcut must not overlap the open navigation. */
body.menu-open > .scroll-hint,
body.menu-open > .nav-segs,
body.menu-open .craft-compare { visibility: hidden; }

#mainMenu {
  max-width: min(82vw, calc(100vw - 76px));
  height: 100vh;
  height: 100dvh;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  padding-bottom: max(32px, env(safe-area-inset-bottom));
  scrollbar-width: thin;
  scrollbar-color: rgba(244,241,232,.22) transparent;
}

#mainMenu::-webkit-scrollbar { width: 4px; }
#mainMenu::-webkit-scrollbar-thumb { background: rgba(244,241,232,.22); border-radius: 2px; }
#mainMenu > ul { flex-shrink: 0; }

#mainMenu ul li a {
  display: flex;
  justify-content: space-between;
  gap: 1.2rem;
  padding-right: 10px;
  transition: color .25s var(--ease);
}
#mainMenu ul li a:hover { padding-left: 0; }
#mainMenu .menu-link-label { transition: transform .35s var(--ease); }
#mainMenu a:hover,
#mainMenu a:focus-visible { color: var(--brass); }
#mainMenu a:hover .menu-link-label,
#mainMenu a:focus-visible .menu-link-label { transform: translateX(6px); }
#mainMenu a:focus-visible,
#mainMenu .grp:focus-visible { outline: 1px solid var(--brass); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  #mainMenu .menu-link-label { transition: none; }
}

/* Navigation follows available viewport height, including all five services.
   Retain overflow scrolling for extreme zoom or unusually short windows. */
@media (min-width: 1000px), (max-height: 800px) {
  #mainMenu {
    padding-top: clamp(16px, 5dvh, 90px);
    padding-bottom: clamp(16px, 2.5dvh, 32px);
  }
  #mainMenu ul li a,
  #mainMenu .grp .g-big > span > span {
    font-size: min(clamp(1.7rem, 4vw, 2.6rem), clamp(1.125rem, 4dvh, 2.6rem));
    line-height: 1.1;
  }
  #mainMenu > ul > li { padding-block: clamp(3px, .7dvh, 11.2px); }
  #mainMenu > ul > li:first-child { padding-top: 0; }
  #mainMenu .sub a { padding-block: clamp(3px, .55dvh, 7.2px); }
  #mainMenu .jr-theme-control[data-position=unten] {
    padding-top: clamp(12px, 2dvh, 28px);
  }
}

/* Stay in one column, even in landscape and shallow desktop windows. */
@media (max-height: 600px) {
  #mainMenu {
    padding-top: clamp(8px, 3dvh, 18px);
    padding-bottom: clamp(8px, 2dvh, 16px);
  }
  #mainMenu ul li a,
  #mainMenu .grp .g-big > span > span {
    font-size: min(clamp(1.7rem, 4vw, 2.6rem), clamp(.875rem, 4dvh, 1.5rem));
    padding-block: clamp(1px, .35dvh, 3px);
  }
  #mainMenu > ul > li { padding-block: clamp(1px, .4dvh, 3px); }
  #mainMenu > ul > li:first-child { padding-top: 0; }
  #mainMenu .grp .g-small > span > span { font-size: .5625rem; line-height: 1.2; padding-block: 2px; }
  #mainMenu .jr-theme-control[data-position=unten] { padding-top: 8px; }
}