/* ============================================================
   Menux - custom styles (Tailwind via Play CDN handles utilities;
   this file covers things utilities alone can't: scrollbars,
   scroll-snap fine tuning, the sticky category animation, prints.
   ============================================================ */

html {
  scroll-behavior: smooth;
}

/* Hide scrollbars on horizontally-scrolling rows (carousel, categories) */
.no-scrollbar {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.no-scrollbar::-webkit-scrollbar {
  display: none;
}

/* Fallback line-clamp (Tailwind core already ships line-clamp-*, this
   just guarantees it even if the CDN build served ever lags behind) */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Hero carousel slides: scroll-snap track */
#heroCarousel {
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
#heroCarousel > .hero-slide {
  scroll-snap-align: center;
}

/* Category anchor targets shouldn't hide behind the sticky bars when jumped to */
.cat-section {
  scroll-margin-top: 7.5rem;
}

/* Sticky category bar: smooth condense transition driven by the
   `.is-condensed` class toggled from home.js via IntersectionObserver */
#categoryBar {
  transition: padding 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}
#categoryBar .cat-icon {
  transition: width 0.25s ease, height 0.25s ease, font-size 0.25s ease, margin 0.25s ease;
}
#categoryBar .cat-label {
  transition: font-size 0.25s ease, max-height 0.25s ease, opacity 0.2s ease;
}
#categoryBar.is-condensed {
  box-shadow: 0 4px 12px -4px rgb(0 0 0 / 0.12);
}
#categoryBar.is-condensed .cat-icon {
  width: 2.5rem;
  height: 2.5rem;
  font-size: 1.1rem;
}
#categoryBar.is-condensed .cat-label {
  font-size: 0.65rem;
  max-height: 0;
  opacity: 0;
  margin: 0;
  overflow: hidden;
}
#categoryBar.is-condensed .cat-item {
  gap: 0;
}

/* Toast notifications */
.menux-toast {
  animation: toastIn 0.25s ease-out both;
}
@keyframes toastIn {
  from { opacity: 0; transform: translateY(10px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Simple skeleton shimmer (used for poll/loading states) */
.skeleton {
  background: linear-gradient(90deg, rgba(0,0,0,0.06) 25%, rgba(0,0,0,0.10) 37%, rgba(0,0,0,0.06) 63%);
  background-size: 400% 100%;
  animation: skeletonShimmer 1.4s ease infinite;
}
.dark .skeleton {
  background: linear-gradient(90deg, rgba(255,255,255,0.06) 25%, rgba(255,255,255,0.12) 37%, rgba(255,255,255,0.06) 63%);
  background-size: 400% 100%;
}
@keyframes skeletonShimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

/* Order status stepper connector line */
.stepper-line {
  position: absolute;
  inset-inline-start: 1.25rem;
  top: 2.5rem;
  bottom: -0.5rem;
  width: 2px;
  background: rgb(229 231 235);
}
.dark .stepper-line {
  background: rgb(55 65 81);
}

/* Print: order invoice only */
@media print {
  header, footer, #invoiceActions, #toastHost {
    display: none !important;
  }
  body {
    background: #fff !important;
  }
  #invoiceCard {
    box-shadow: none !important;
    border: 1px solid #ddd !important;
  }
}