/* ZENITH SPA / Step 07: unobtrusive mobile navigation refinements. */
:where(a, button, summary):focus-visible { outline: 2px solid #6a806a; outline-offset: 3px; }
@media (max-width: 900px) {
  .menu-toggle { min-width: 44px; min-height: 44px; }
  .mobile-menu { overscroll-behavior-y: contain; padding-bottom: max(105px, calc(90px + env(safe-area-inset-bottom))); }
  .mobile-menu-item { min-height: 59px; }
  .bottom-navigation a { min-height: 60px; touch-action: manipulation; }
  .bottom-navigation a:focus-visible { outline-color: #fff; outline-offset: -3px; }
  /* Slider dots retain subtle 6px appearance but use >=34px tap targets. */
  .motion-hero-controls { gap: 1px; padding: 3px 5px; }
  .motion-hero-dot, .motion-hero-dot.is-current { 
    display: grid; place-items: center; flex: 0 0 34px;
    width: 34px; min-width: 34px; height: 38px; background: transparent;
    border-radius: 3px;
  }
  .motion-hero-dot::after { content: ''; display:block; width: 7px; height: 7px; border-radius: 20px; background: rgba(255,255,255,.55); transition: width .3s ease, background-color .3s ease; }
  .motion-hero-dot.is-current::after { width: 19px; background: #f5e8d1; }
  .motion-hero-pause { min-width: 42px; width: 42px; height: 38px; }
  .motion-hero-controls { bottom: 12px; }
}
@media (max-width: 600px) {
  .menu-toggle { min-width: 44px; min-height: 44px; padding: 10px; }
  .bottom-navigation { min-height: calc(65px + env(safe-area-inset-bottom)); }
  .bottom-navigation a svg { width: 22px; height: 22px; }
  .mobile-menu { inset: var(--header) 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .motion-hero-dot::after { transition: none; }
}