/* ==========================================================================
   Culina — Warm Social Cooking design system
   Custom CSS that supplements the Tailwind (Play CDN) utility classes.
   ========================================================================== */

html, body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  background-color: #faf9f5;
}

body {
  min-height: max(884px, 100dvh);
}

/* Material Symbols icon font base settings */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
}

.material-symbols-outlined[data-weight="fill"] {
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Utility: hide scrollbars but keep scrolling (used by the horizontal chef rail) */
.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Glassmorphism used on fixed headers / bottom nav / search bar */
.backdrop-glass,
.glass-effect {
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
}

/* Safe-area padding helpers (iOS home indicator etc.) */
.pb-safe { padding-bottom: env(safe-area-inset-bottom); }
.safe-pb { padding-bottom: env(safe-area-inset-bottom); }

/* ==========================================================================
   Shared dimmed backdrop used behind slide-overs / overlays
   ========================================================================== */
#backdrop {
  position: fixed;
  inset: 0;
  background: rgba(26, 28, 26, 0.45);
  backdrop-filter: blur(2px);
  z-index: 55;
  opacity: 0;
  pointer-events: none;
  transition: opacity 250ms ease;
}

#backdrop.is-visible {
  opacity: 1;
  pointer-events: auto;
}

/* ==========================================================================
   Search overlay
   ========================================================================== */
#search-overlay {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  flex-direction: column;
  pointer-events: none;
  opacity: 0;
  transition: opacity 200ms ease;
}

#search-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

#search-overlay .search-panel {
  transform: translateY(-12px);
  transition: transform 250ms ease;
}

#search-overlay.is-open .search-panel {
  transform: translateY(0);
}

/* ==========================================================================
   Slide-over panels (Notifications + Menu drawer)
   ========================================================================== */
.slide-over {
  position: fixed;
  inset-block: 0;
  right: 0;
  z-index: 65;
  height: 100%;
  transform: translateX(100%);
  transition: transform 300ms cubic-bezier(0.32, 0.72, 0, 1);
  display: flex;
  flex-direction: column;
}

.slide-over.is-open {
  transform: translateX(0);
}

#menu-drawer {
  width: 100%;
  max-width: 320px;
}

#notifications-panel {
  width: 100%;
  max-width: 420px;
}

/* ==========================================================================
   Bottom sheet (Comments)
   ========================================================================== */
.sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 65;
  max-height: 75vh;
  border-radius: 20px 20px 0 0;
  transform: translateY(100%);
  transition: transform 300ms cubic-bezier(0.32, 0.72, 0, 1);
  display: flex;
  flex-direction: column;
}

.sheet.is-open {
  transform: translateY(0);
}

.sheet-handle {
  width: 36px;
  height: 4px;
  border-radius: 9999px;
  background: var(--sheet-handle-color, #d4d4d4);
  margin: 10px auto 6px;
  flex-shrink: 0;
}

/* Prevent background scroll while an overlay/drawer is open */
body.no-scroll {
  overflow: hidden;
}

/* Fade-in used for search suggestions */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in {
  animation: fadeIn 300ms ease;
}