/* ──────────────────────────────────────────────────────────────
   layout.css — page skeleton + responsive grid

   Breakpoints follow Material-UI defaults (the source site uses
   the same scale): xs/sm/md/lg/xl at 600 / 900 / 1200 / 1536.
   The 480 cutoff matches Incentivio's "phone" tier where modals
   convert to bottom sheets.
   ────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--color-page-bg);
  color: var(--color-text);
  font-family: var(--font-primary);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Honor PWA safe-area when installed to home screen */
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  /* Defensive: stops the horizontal-scroll tabs row from blowing out
     the page width if any descendant somehow exceeds the viewport. */
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

a { color: inherit; }

/* ── Site frame ───────────────────────────────────────────────── */

.site {
  min-height: 100dvh;
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto auto auto 1fr auto;
  /* `minmax(0, 1fr)` prevents the column from being sized by its
     largest intrinsic-min-width descendant — without this a wide
     horizontal-scroll row (like the tabs) blows the page out. */
  grid-template-columns: minmax(0, 1fr);
}

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-4);
}
@media (min-width: 600px)  { .container { padding-inline: var(--space-6); } }
@media (min-width: 1200px) { .container { padding-inline: var(--space-7); } }

/* ── Header (brand identity only — no cart, no order CTAs) ───── */

.site-header {
  background: var(--color-header-bg);
  color: var(--color-text-on-header);
  text-align: center;
  padding-block: var(--space-6) var(--space-5);
  padding-top: calc(var(--space-6) + env(safe-area-inset-top));
  border-bottom: 2px solid var(--color-rule);
}
@media (min-width: 600px) {
  .site-header { padding-block: var(--space-7) var(--space-6); }
}

/* ── Sticky category tabs ────────────────────────────────────── */

.tabs-bar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--color-page-bg);
  height: var(--tabs-height);
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid var(--color-divider);
}
.tabs-bar.is-stuck { box-shadow: var(--shadow-sticky); }
.tabs-bar > .container {
  display: flex;
  align-items: stretch;
  /* allow the inner overflow-x:auto element to actually shrink */
  min-width: 0;
}

/* ── Menu wrapper (item styling lives in components.css) ──────── */

.menu-section {
  padding-block: var(--space-7) var(--space-8);
}

/* ── Footer ───────────────────────────────────────────────────── */

.site-footer {
  background: var(--color-header-bg);
  color: var(--color-text-muted);
  border-top: 2px solid var(--color-rule);
  padding: var(--space-7) 0 calc(var(--space-7) + env(safe-area-inset-bottom));
  text-align: center;
}
.site-footer a { text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }

/* ── Reduced motion ───────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}