/* ==========================================================================
   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);
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/assets/fonts/plus-jakarta-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 100 700;
  font-display: block;
  src: url('/assets/fonts/material-symbols-28ad24b9.woff2') format('woff2');
}

.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  width: 1em;
  height: 1em;
  overflow: hidden;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  font-feature-settings: 'liga';
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

/* 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 {
  display: inline-block;
  width: 1em;
  height: 1em;
  overflow: hidden;
} */

.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;
}

/* ==========================================================================
   Centered modal (Add Prep Task)
   ========================================================================== */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(26, 28, 26, 0.45);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.modal-card {
  background: #ffffff;
  width: 100%;
  max-width: 400px;
  border-radius: 20px;
  padding: 28px 24px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
}

/* 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;
}

/* ==========================================================================
   Post detail — photo carousel dots (see views/pages/post-detail.php)
   ========================================================================== */
.carousel-dot {
  position: relative;
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 9999px;
  background: #c3c8bf;
  transition: width 200ms ease, background-color 200ms ease;
}

/* Bigger invisible tap target than the 7px dot itself */
.carousel-dot::after {
  content: '';
  position: absolute;
  inset: -10px -4px;
}

.carousel-dot.is-active {
  width: 18px;
  background: #466347;
}

/* ==========================================================================
   Post form — native date input dressed like the other fields. The
   browser's own calendar glyph is stretched over the whole field and made
   invisible, so tapping anywhere opens the picker while our own icon
   (positioned in the view) is what people see.
   ========================================================================== */
.date-field {
  position: relative;
  -webkit-appearance: none;
  appearance: none;
  min-height: 3.5rem;
}

.date-field::-webkit-calendar-picker-indicator {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  opacity: 0;
  cursor: pointer;
}