/*
Theme Name: Recipe Database
Description: A custom WordPress theme for a recipe database
Version: 1.0
*/

/* Core Layout */
.recipe-container { max-width: 1200px; margin: 0 auto; padding: 20px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
.recipe-grid { display: grid; grid-template-columns: 1fr; gap: 30px; margin-top: 20px; }
@media (min-width: 768px) { .recipe-grid { grid-template-columns: 1fr 1fr; } }
.scanned-recipe-card { width: 100%; height: auto; border-radius: 12px; box-shadow: 0 8px 16px rgba(0,0,0,0.1); }
.ingredients-list, .instructions-list { background: #f9f9f9; padding: 24px; border-radius: 12px; font-size: 1.1rem; line-height: 1.6; }

/* Recipe Controls */
.recipe-controls { display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 30px; align-items: flex-end; }
.control-group { display: flex; flex-direction: column; flex: 1; min-width: 200px; }
.control-group label { margin-bottom: 8px; font-weight: 600; }
.btn-secondary { background: #e2e8f0; color: #4a5568; border: none; padding: 12px 20px; border-radius: 8px; cursor: pointer; font-weight: 600; height: 44px; transition: background 0.2s; }
.btn-secondary:hover { background: #cbd5e0; }
.clear-btn-group { flex: 0 1 auto; }

/* Friendly Empty State */
.empty-state { text-align: center; padding: 60px 20px; background-color: #f8fafc; border-radius: 12px; border: 2px dashed #cbd5e0; grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; justify-content: center; margin-top: 20px; }
.empty-state-icon { font-size: 48px; margin-bottom: 16px; animation: gentle-bounce 2s infinite ease-in-out; }
.empty-state h3 { margin: 0 0 10px 0; color: #2d3748; font-size: 1.5rem; }
.empty-state p { color: #718096; margin: 0; max-width: 400px; line-height: 1.5; }
@keyframes gentle-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* Favorites Active State */
.active-fav { background-color: #ffe4e6 !important; color: #e11d48 !important; border: 1px solid #fda4af; }

/* Wake Lock Active State */
.active-wake { background-color: #fef08a !important; color: #854d0e !important; border: 1px solid #fde047; }

/* Interactive Instruction Steps */
.instructions-list li, .instructions-list p { cursor: pointer; transition: color 0.3s ease, opacity 0.3s ease, text-decoration 0.3s ease; padding: 8px; margin-left: -8px; border-radius: 6px; }
.instructions-list li:hover, .instructions-list p:hover { background-color: #f1f5f9; }
.step-completed { text-decoration: line-through; text-decoration-color: #94a3b8; text-decoration-thickness: 2px; color: #94a3b8; opacity: 0.7; background-color: transparent !important; }

/* Floating Back to Top Button */
html { scroll-behavior: smooth; }
#back-to-top-btn { position: fixed; bottom: 30px; right: 30px; z-index: 99; border: none; outline: none; background-color: #2b6cb0; color: white; cursor: pointer; padding: 15px; border-radius: 50px; font-size: 16px; font-weight: bold; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease, background-color 0.3s ease; }
#back-to-top-btn:hover { background-color: #2c5282; }
#back-to-top-btn.show { opacity: 1; visibility: visible; }

/* Print Styles */
@media print {
    header, footer, .recipe-controls, #add-to-list-btn, #share-recipe-btn, #favorite-recipe-btn, #print-recipe-btn, #wake-lock-btn, #back-to-top-btn, .site-navigation, .sidebar { display: none !important; }
    body, .recipe-container, .ingredients-list, .instructions-list { background-color: transparent !important; color: #000 !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; }
    .recipe-grid { display: block !important; margin-top: 0 !important; }
    .scanned-recipe-card { max-width: 100% !important; height: auto !important; page-break-inside: avoid; margin-bottom: 20px; border-radius: 0 !important; border: 1px solid #ccc; }
    h1.recipe-title { font-size: 24pt !important; margin-bottom: 10px; page-break-after: avoid; }
    h2 { font-size: 18pt !important; margin-top: 20px; border-bottom: 1px solid #000; padding-bottom: 5px; page-break-after: avoid; }
    .ingredients-list li, .instructions-list p { font-size: 12pt !important; line-height: 1.4 !important; page-break-inside: avoid; }
    a { text-decoration: none !important; color: #000 !important; }
    .step-completed { text-decoration: none !important; color: #000 !important; opacity: 1 !important; }
}