/* ==========================================================================
   Storefront Stylesheet - Public Landing Page
   Loaded after assets/css/app.css. Page-specific overrides for index.php,
   built on Kumo tokens so light and dark mode both apply.
   ========================================================================== */

/* ─── Visibility Guards ─────────────────────────────────────────────────── */

/* app.css component rules set a display value after the utility layer loads,
   so the JS-toggled `hidden` class needs an explicit win on these elements */
.t-card.hidden,
.qty.hidden,
.cart-count.hidden,
.btn.hidden {
  display: none;
}

/* ─── Navigation ────────────────────────────────────────────────────────── */

html { scroll-padding-top: 4rem; }

/* Full-width sticky bar: bottom hairline instead of the glass ring */
.sf-nav.glass {
  background: color-mix(in oklab, var(--color-kumo-canvas) 82%, transparent);
  box-shadow: 0 1px 0 0 var(--color-kumo-line);
}
.sf-nav.glass.glass-strong {
  background: color-mix(in oklab, var(--color-kumo-canvas) 94%, transparent);
}

.sf-nav-sheet {
  background: var(--color-kumo-base);
  box-shadow: 0 1px 0 0 var(--color-kumo-line);
}

/* Nav indicator sits behind 32px links */
#nav-links .nav-link { display: inline-flex; align-items: center; height: 32px; }

/* ─── Form Details ──────────────────────────────────────────────────────── */

/* Search input with a leading icon */
.input.sf-input-icon { padding-left: 2.25rem; }

/* Fieldset legends rendered as compact section labels */
.sf-legend {
  display: block;
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-color-kumo-subtle);
}

.textarea.sf-textarea-sm { min-height: 72px; }

/* Bot trap kept off-screen and out of the tab order */
.sf-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Long checkout label wraps instead of overflowing on narrow drawers */
#checkout-btn {
  height: auto;
  min-height: 44px;
  padding-top: 10px;
  padding-bottom: 10px;
  white-space: normal;
  line-height: 1.25;
  text-align: center;
}

/* ─── Mobile Booking Bar ────────────────────────────────────────────────── */

.sf-mobile-bar { padding-bottom: env(safe-area-inset-bottom); }

/* ─── Modals ────────────────────────────────────────────────────────────── */

/* Canvas backdrop lets the receipt ticket notches read as cut-outs */
#receipt-modal .modal-panel { background: var(--color-kumo-canvas); }

/* Lightbox sits on a photo backdrop in both modes */
.modal.sf-lightbox { background: rgba(10, 10, 10, 0.88); }