/* MATU PRINT v108 — reliable mobile navigation. */

@media (max-width: 1099px) {
  /* `contain: paint` clips every child to the 88 px header box.  The mobile
     menu lives below that box, so the containment must be disabled here. */
  body.matu-light-site > header {
    contain: none !important;
    overflow: visible !important;
  }

  body.matu-light-site > header nav,
  body.matu-light-site > header .matu-header-eshop,
  body.matu-light-site > header [aria-label="Sociální sítě MATU PRINT"] {
    display: none !important;
  }

  body.matu-light-site #mobile-menu-btn {
    position: relative;
    z-index: 72;
    display: inline-flex !important;
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    align-items: center;
    justify-content: center;
    border: 1px solid #dce4ee;
    border-radius: 13px;
    background: #fff;
    color: #0b1737 !important;
    box-shadow: 0 7px 18px rgba(11, 23, 55, .10);
    cursor: pointer;
    pointer-events: auto;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  body.matu-light-site #mobile-menu-btn:active {
    transform: scale(.96);
  }

  body.matu-light-site #mobile-menu-btn[aria-expanded="true"] {
    border-color: rgba(0, 174, 239, .55);
    background: #eefaff;
    color: #007faf !important;
    box-shadow: 0 0 0 3px rgba(0, 174, 239, .12);
  }

  body.matu-light-site #mobile-menu-btn i {
    pointer-events: none;
  }

  body.matu-light-site #mobile-menu {
    position: absolute;
    z-index: 70;
    top: 88px;
    right: 0;
    left: 0;
    max-height: calc(100vh - 88px);
    max-height: calc(100dvh - 88px);
    overflow-y: auto;
    overscroll-behavior: contain;
    border-top: 1px solid #e4e8ef !important;
    background: rgba(255, 255, 255, .99) !important;
    box-shadow: 0 24px 46px rgba(11, 23, 55, .20);
    -webkit-overflow-scrolling: touch;
  }

  body.matu-light-site #mobile-menu.hidden {
    display: none !important;
  }

  body.matu-light-site #mobile-menu:not(.hidden) {
    display: block !important;
    animation: matu-mobile-menu-in .18s ease-out both;
  }

  body.matu-light-site #mobile-menu > div {
    max-width: 42rem;
    margin: 0 auto;
    padding: 12px max(18px, env(safe-area-inset-right)) calc(18px + env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
  }

  body.matu-light-site #mobile-menu a {
    min-height: 46px;
    display: flex !important;
    align-items: center;
    border-radius: 10px;
    color: #15213e !important;
    touch-action: manipulation;
  }

  body.matu-light-site #mobile-menu a:not(.bg-matu-magenta) {
    padding-right: 12px;
    padding-left: 12px;
  }

  body.matu-light-site #mobile-menu a:not(.bg-matu-magenta):active,
  body.matu-light-site #mobile-menu a:not(.bg-matu-magenta):focus-visible {
    background: #eef8fd;
  }

  body.matu-light-site #mobile-menu a.bg-matu-magenta {
    color: #fff !important;
    background: linear-gradient(100deg, #00aeef, #6f43e8 52%, #ec008c) !important;
  }

  body.matu-mobile-menu-open {
    overflow: hidden;
  }
}

@media (min-width: 1100px) {
  #mobile-menu-btn,
  #mobile-menu {
    display: none !important;
  }
}

@keyframes matu-mobile-menu-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  body.matu-light-site #mobile-menu:not(.hidden) {
    animation: none !important;
  }
}
