/* 
 * What A Food - Premium Food Brand Stylesheet
 * High-performance, lightweight, clean animations
 */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Playfair+Display:ital,wght@0,600;0,700;1,600&display=swap');

:root {
  --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-serif: 'Playfair Display', Georgia, serif;
  --brand-primary: #f59e0b; /* Amber */
  --brand-accent: #e11d48;  /* Rose */
  --brand-dark: #1c1917;    /* Warm Stone 900 */
}

body {
  font-family: var(--font-sans);
  color: #292524;
  background-color: #fafaf9;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, .font-heading {
  font-family: var(--font-sans);
}

.font-serif-title {
  font-family: var(--font-serif);
}

/* Custom interactive recipe step checkbox & strike-through */
.recipe-step-item {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  user-select: none;
}

.recipe-step-item:hover {
  transform: translateY(-2px);
}

.recipe-step-item.is-completed {
  opacity: 0.55;
  background-color: #f5f5f4 !important;
  border-color: #a8a29e !important;
}

.recipe-step-item.is-completed .step-instruction {
  text-decoration: line-through;
  color: #78716c;
}

.recipe-step-item.is-completed .step-badge {
  background-color: #10b981 !important;
  color: #ffffff !important;
}

/* Subtle pulse glow for order CTA */
@keyframes warm-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.45);
  }
  50% {
    box-shadow: 0 0 0 14px rgba(245, 158, 11, 0);
  }
}

.btn-pulse {
  animation: warm-pulse 2.4s infinite;
}

/* Active tab highlight */
.nav-link.active {
  color: #d97706;
  font-weight: 700;
  border-bottom: 2px solid #d97706;
}

/* Print styles for recipes */
@media print {
  header, footer, .no-print, #whata-toast-container, .timer-widget {
    display: none !important;
  }
  body {
    background: #ffffff;
    color: #000000;
  }
  .recipe-step-item {
    opacity: 1 !important;
    text-decoration: none !important;
    border: 1px solid #ccc !important;
    page-break-inside: avoid;
  }
}