/* ============================================================
   Culinary Atelier — main.css
   Custom styles that supplement Tailwind
   ============================================================ */

/* Material Symbols default weight */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* ── Cards ─────────────────────────────────────────────── */
.recipe-card-shadow:hover {
  box-shadow: 0 12px 32px rgba(26, 28, 28, 0.06);
}

/* ── Hero gradient overlay ─────────────────────────────── */
.hero-gradient {
  background: linear-gradient(to bottom, rgba(26,28,28,0) 0%, rgba(26,28,28,0.82) 100%);
}

/* ── Step completion — Cauliflower Bowl page ───────────── */
.step-item {
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.step-item.completed {
  background-color: rgba(0, 110, 28, 0.05) !important;
  border-color: rgba(0, 110, 28, 0.2) !important;
}
.step-item.completed p {
  color: #6f7a6b;
  text-decoration: line-through;
}
.step-check { display: none; font-variation-settings: 'FILL' 1; }
.step-item.completed .step-check { display: inline-block; }
.step-item.completed .step-default-indicator { display: none; }

/* ── Prep step completion — Zucchini page (:has) ──────── */
.prep-step-container {
  cursor: pointer;
  transition: background-color 0.3s ease, border-radius 0.3s ease;
}
.prep-step-container:has(input:checked) {
  background-color: rgba(76, 175, 80, 0.05);
  border-radius: 0.75rem;
}
.prep-step-container input:checked ~ div h4,
.prep-step-container input:checked ~ div p {
  text-decoration: line-through;
  opacity: 0.6;
}
.prep-step-container input:checked ~ .step-num {
  color: #4CAF50 !important;
}

/* ── Glass / backdrop blur nav ─────────────────────────── */
.glass-nav {
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

/* ── Star rating widget ─────────────────────────────────── */
#star-rating [data-star] {
  cursor: pointer;
  font-size: 2rem;
  transition: color 0.1s;
  user-select: none;
}

/* ── Placeholder image style ───────────────────────────── */
img[src$=".webp"] {
  object-fit: cover;
}