/* Casa Pizza LTS88 — LTS87 menu navigation plus stable top-left mobile Menu control. */

/* The Menu destination is intentionally the strong red CTA in both header and mobile nav. */
.site-header .primary-nav a[href="menu.html"],
.site-header .primary-nav a[href$="/menu.html"] {
  background: #da3528 !important;
  border-color: #da3528 !important;
  color: #fff !important;
}

.site-header .primary-nav a[href="menu.html"]:hover,
.site-header .primary-nav a[href$="/menu.html"]:hover,
.site-header .primary-nav a[href="menu.html"][aria-current="page"],
.site-header .primary-nav a[href$="/menu.html"][aria-current="page"] {
  background: #c72f24 !important;
  border-color: #c72f24 !important;
  color: #fff !important;
}

.mobile-bottom-nav a[data-nav="menu"],
.mobile-bottom-nav a[data-nav="menu"].active {
  background: #da3528 !important;
  border-color: #da3528 !important;
  color: #fff !important;
}

.mobile-bottom-nav a[data-nav="menu"]::before {
  color: #fff !important;
}

#menu-products {
  scroll-margin-top: calc(var(--header-h, 78px) + 12px);
}

@media (max-width: 960px) {
  /* Scroll the entire fixed drawer on real touch devices. This avoids nested
     overflow areas that worked with a desktop wheel but could trap phone swipes. */
  body[data-page="menu"] .menu-control-zone {
    touch-action: pan-y !important;
  }

  body[data-page="menu"] .menu-control-shell {
    grid-template-rows: auto auto auto !important;
    align-content: start !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: contain !important;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y !important;
  }

  body[data-page="menu"] .menu-category-rail {
    min-height: auto !important;
    overflow: visible !important;
  }

  body[data-page="menu"] .menu-category-tabs {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    overscroll-behavior: auto !important;
    touch-action: pan-y !important;
  }

  body[data-page="menu"] .menu-mobile-sidebar-toggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 9px;
    top: calc(var(--header-h, 68px) + 10px) !important;
    left: 0 !important;
    width: 112px !important;
    height: 50px !important;
    padding: 0 13px !important;
    border-color: #da3528 !important;
    background: #da3528 !important;
    color: #fff !important;
    border-radius: 0 14px 14px 0 !important;
    font-size: .88rem;
    font-weight: 950;
    letter-spacing: .01em;
    white-space: nowrap;
    transform: none !important;
    transform-origin: left center;
  }

  body[data-page="menu"] .menu-mobile-sidebar-toggle:hover,
  body[data-page="menu"] .menu-mobile-sidebar-toggle:focus-visible {
    background: #c72f24 !important;
    border-color: #c72f24 !important;
    color: #fff !important;
  }

  body[data-page="menu"] .menu-mobile-sidebar-toggle [data-menu-sidebar-label] {
    display: inline-block;
    font: inherit;
    line-height: 1;
  }

  body[data-page="menu"] .menu-mobile-sidebar-toggle [data-menu-sidebar-chevron] {
    display: inline-block;
    font-size: 1.65rem !important;
    font-weight: 900;
    line-height: .8;
    transform: translateY(-1px);
  }

  /* Open state: the close control sits just outside the drawer/categories.
     It becomes a compact chevron tab so it never covers a category or leaves
     the viewport on narrow phones. */
  body[data-page="menu"].menu-mobile-sidebar-open .menu-mobile-sidebar-toggle {
    top: calc(var(--header-h, 68px) + 12px) !important;
    left: calc(var(--menu-mobile-drawer-width) + 8px) !important;
    width: 36px !important;
    height: 46px !important;
    min-width: 36px !important;
    padding: 0 !important;
    gap: 0 !important;
    border-radius: 0 12px 12px 0 !important;
    transform: none !important;
  }

  body[data-page="menu"].menu-mobile-sidebar-open .menu-mobile-sidebar-toggle [data-menu-sidebar-label] {
    display: none !important;
  }

  body[data-page="menu"].menu-mobile-sidebar-open .menu-mobile-sidebar-toggle [data-menu-sidebar-chevron] {
    transform: none !important;
    font-size: 1.7rem !important;
  }

  /* Only a never-opened sidebar receives this discovery hint. JS removes the
     class and persists the state as soon as the customer opens it once. */
  body[data-page="menu"] .menu-mobile-sidebar-toggle.is-first-use:not([aria-expanded="true"]) {
    animation: casaMenuFirstUseHint 1.15s ease-in-out infinite;
  }
}

@keyframes casaMenuFirstUseHint {
  0%, 100% {
    box-shadow: 0 8px 24px rgba(218, 53, 40, .22), 0 0 0 0 rgba(218, 53, 40, .24);
  }
  50% {
    box-shadow: 0 10px 30px rgba(218, 53, 40, .42), 0 0 0 7px rgba(218, 53, 40, .08);
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-page="menu"] .menu-mobile-sidebar-toggle.is-first-use {
    animation: none !important;
  }
}