/*
 * Evident ICU mobile drawer optimization layer.
 *
 * This file refines touch, safe-area, focus, contrast, and reduced-motion
 * behavior without changing the foundation's full-viewport overlay contract.
 */

#mobile-drawer.site-header__drawer {
  color-scheme: dark;
  padding-block-start: max(1rem, env(safe-area-inset-top));
  padding-block-end: max(1.5rem, env(safe-area-inset-bottom));
  padding-inline-start: max(clamp(1.25rem, 5vw, 4rem), env(safe-area-inset-left));
  padding-inline-end: max(clamp(1.25rem, 5vw, 4rem), env(safe-area-inset-right));
  -webkit-overflow-scrolling: touch;
}

#mobile-drawer :is(
    .site-header__drawer-link,
    .site-header__drawer-summary,
    .site-header__btn
  ) {
  min-block-size: 48px;
  min-inline-size: 48px;
  padding-block: 0.875rem;
  padding-inline: 1rem;
  gap: 0.75rem;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

#mobile-drawer :is(
    .site-header__drawer-link,
    .site-header__drawer-summary,
    .site-header__btn
  ):focus-visible {
  outline: 2px solid var(--color-accent, #f7b32b);
  outline-offset: 4px;
  border-radius: 0.5rem;
}

#mobile-drawer :is(.site-header__drawer-link, .site-header__drawer-summary) svg {
  flex-shrink: 0;
  margin-inline-start: auto;
}

@media (max-width: 480px) {
  #mobile-drawer .site-header__drawer-shell {
    width: 100%;
  }

  #mobile-drawer .site-header__drawer-menu {
    gap: 0.625rem;
    padding-block-start: 1rem;
  }
}

@media (min-width: 481px) and (max-width: 768px) {
  #mobile-drawer .site-header__drawer-shell {
    width: min(100%, 32rem);
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  #mobile-drawer .site-header__drawer-shell {
    width: min(100%, 38rem);
  }
}

@media (min-width: 1025px) and (max-width: 1279px) {
  #mobile-drawer .site-header__drawer-shell {
    width: min(100%, 42rem);
  }
}

@media (prefers-contrast: more) {
  #mobile-drawer :is(
      .site-header__drawer-link,
      .site-header__drawer-summary,
      .site-header__btn
    ) {
    outline: 1px solid rgb(255 255 255 / 45%);
    outline-offset: -1px;
  }

  #mobile-drawer :is(
      .site-header__drawer-link,
      .site-header__drawer-summary,
      .site-header__btn
    ):hover {
    outline-color: rgb(255 255 255 / 75%);
  }
}

@media (prefers-reduced-motion: reduce) {
  #mobile-drawer.site-header__drawer,
  #mobile-drawer.site-header__drawer.is-open,
  #mobile-drawer.site-header__drawer.is-closing,
  #mobile-drawer.site-header__drawer[aria-hidden="false"] {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto;
  }

  #mobile-drawer .site-header__drawer-item {
    animation: none !important;
  }
}