/* District-AI Upgrades — phone menu pinned to the top while scrolling (see sticky-menu.js) */

/* a little more air between Site Index entries, desktop and phone (theme: 0.9) */
#siteIndex.editorial-menu .site-index-item {
  line-height: 0.99;
}
@media (max-width: 760px) {
  body.dai-menu-stuck #siteIndex.editorial-menu {
    position: fixed;
    top: max(8px, env(safe-area-inset-top));
    left: 10px;
    right: 10px;
    bottom: auto;
    width: auto;
    height: auto;
    min-height: 0;
    z-index: 60;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 20px;
    padding: 12px 16px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent);
    mask-image: linear-gradient(90deg, #000 82%, transparent);
    -webkit-overflow-scrolling: touch;
    /* frosted glass: the page shows through, blurred and slightly saturated */
    background: linear-gradient(180deg, rgba(40, 40, 44, 0.46), rgba(14, 14, 16, 0.38));
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 10px 30px rgba(0, 0, 0, 0.38);
    -webkit-backdrop-filter: blur(24px) saturate(170%);
    backdrop-filter: blur(24px) saturate(170%);
    transform: none;
    animation: dai-menu-pin 260ms cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  body.dai-menu-stuck #siteIndex.editorial-menu::-webkit-scrollbar {
    display: none;
  }

  body.dai-menu-stuck #siteIndex .site-index-item {
    flex: none;
    width: auto;
    margin: 0;
    font-size: 15px;
    line-height: 1.2;
    white-space: nowrap;
    color: rgba(214, 214, 217, 0.9);
  }

  body.dai-menu-stuck #siteIndex .site-index-item:hover,
  body.dai-menu-stuck #siteIndex .site-index-item:focus-visible,
  body.dai-menu-stuck #siteIndex .site-index-item[aria-current="page"] {
    color: #ef7624;
  }
}

/* while the menu is open, the opening headline moves down below it; it eases back up when the menu closes */
@media (max-width: 760px) {
  body.menu-open:not(.dai-push-measure) .main-stage {
    padding-top: var(--dai-menu-push, 48px);
  }

  body.dai-push-ready .main-stage {
    /* !important: the theme turns every transition off under prefers-reduced-motion; this one is short and visitor-triggered */
    transition: padding-top 620ms cubic-bezier(0.16, 1, 0.3, 1) !important;
  }
}

@keyframes dai-menu-pin {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  body.dai-menu-stuck #siteIndex.editorial-menu { animation: none; }
}