/* Full-width mobile navigation requested in the visual review on 08/10/2026. */
:is(#k9-navigation, #gaeru-site-navigation) a {
  min-height: 44px;
}

@media (max-width: 1100px) {
  /* Let the shared menu sample page pixels behind its translucent backdrop. */
  body.gaeru-mobile-menu-open #gaeru-site-header { z-index: auto; }
  body.gaeru-mobile-menu-open :is(#gaeru-k9-root, #gaeru-site-header) .header > :is(.menu, .gaeru-header-controls, .image-wordmark, .button) {
    position: relative;
    z-index: 101;
  }

  :is(#gaeru-k9-root, #gaeru-site-header) .header {
    position: relative;
    flex-wrap: nowrap;
    gap: 12px;
  }

  :is(#gaeru-k9-root, #gaeru-site-header) .header .image-wordmark {
    margin-right: auto;
  }

  :is(#gaeru-k9-root, #gaeru-site-header) .header > .menu {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-width: 44px;
    min-height: 44px;
    width: 44px;
    height: 44px;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #111;
    box-shadow: none !important;
  }

  :is(#gaeru-k9-root, #gaeru-site-header) .header > .menu svg {
    display: block;
    width: 18px !important;
    height: 18px !important;
  }

  #gaeru-site-header .header > .menu.is-open svg { display: none !important; }
  #gaeru-site-header .header > .menu.is-open::after {
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    background:
      linear-gradient(45deg, transparent calc(50% - 1px), currentColor calc(50% - 1px), currentColor calc(50% + 1px), transparent calc(50% + 1px)),
      linear-gradient(-45deg, transparent calc(50% - 1px), currentColor calc(50% - 1px), currentColor calc(50% + 1px), transparent calc(50% + 1px));
  }

  :is(#gaeru-k9-root, #gaeru-site-header) .header > .menu:focus-visible {
    outline: 3px solid #1d4ed8;
    outline-offset: 2px;
  }

  :is(#gaeru-k9-root, #gaeru-site-header) .header > .button {
    flex-shrink: 0;
  }

  :is(#k9-navigation, #gaeru-site-navigation) {
    display: none !important;
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    top: var(--gaeru-menu-top, 132px) !important;
    bottom: 0 !important;
    width: 100vw !important;
    min-width: 0 !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 12px clamp(16px, 4vw, 40px) calc(24px + env(safe-area-inset-bottom)) !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: rgba(255, 255, 255, .87) !important;
    -webkit-backdrop-filter: blur(12px) saturate(115%);
    backdrop-filter: blur(12px) saturate(115%);
    box-shadow: 0 12px 24px #16376812 !important;
    max-height: var(--gaeru-menu-height, calc(100dvh - 132px)) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    z-index: 100 !important;
  }

  :is(#k9-navigation, #gaeru-site-navigation).open {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    animation: gaeru-mobile-menu-enter 160ms ease-out both;
  }

  :is(#k9-navigation, #gaeru-site-navigation) a {
    display: flex !important;
    align-items: center;
    justify-content: flex-start !important;
    width: 100%;
    min-height: 52px;
    box-sizing: border-box;
    padding: 12px 4px !important;
    color: #111;
    font-size: 18px !important;
    font-weight: 600;
    line-height: 1.45 !important;
    text-align: left !important;
    white-space: normal !important;
    overflow-wrap: break-word;
    border-radius: 6px;
    flex-shrink: 0;
  }

  :is(#k9-navigation, #gaeru-site-navigation) a + a {
    border-top: 1px solid #1d4ed81a !important;
  }

  :is(#k9-navigation, #gaeru-site-navigation) a:is(:hover, :focus-visible) {
    color: #1d4ed8;
    background: #eff6ffa6;
  }

  @keyframes gaeru-mobile-menu-enter {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
  }

  @media (prefers-reduced-motion: reduce) {
    :is(#k9-navigation, #gaeru-site-navigation).open { animation: none; }
  }

  @media (prefers-reduced-transparency: reduce) {
    :is(#k9-navigation, #gaeru-site-navigation) {
      background: #fff !important;
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
    }
  }
}