/* --- Base Styles (from user's original file) --- */
.recipe-preview-content {
    font-family: 'Lexend', Arial, 'sans-serif';
    line-height: 1.6;
    color: #333;
}

/* --- UPDATED: Font styling for headings --- */
/* h1 (title) and h3 (unused) base styles */
.recipe-preview-content h1, 
.recipe-preview-content h3 {
    /* font-family removed, will be applied by class */
    font-weight: 700;
    color: #222;
}
.recipe-preview-content h1 {
    text-align: center;
    border-bottom: 2px solid #eee;
    padding-bottom: 10px;
    font-size: 2.25rem; /* Tailwind text-4xl */
}
/* h2 (dynamic headings) gets base styles */
.recipe-preview-content h2 {
    font-weight: 700;
    color: #222;
    border-bottom: 1px solid #eee;
    padding-bottom: 5px;
    margin-top: 30px;
    font-size: 1.875rem; /* Tailwind text-3xl */
}

/* NEW: Dynamic font classes for h1 AND h2 */
.recipe-preview-content h1.font-style-display,
.recipe-preview-content h2.font-style-display { font-family: '"Baloo 2"', cursive; }

.recipe-preview-content h1.font-style-serif,
.recipe-preview-content h2.font-style-serif { font-family: 'Merriweather', serif; }

.recipe-preview-content h1.font-style-sans,
.recipe-preview-content h2.font-style-sans { font-family: 'Lexend', sans-serif; }


.recipe-preview-content h3 {
    margin-top: 25px;
    font-style: normal;
    font-weight: 700;
    font-size: 1.5rem; /* Tailwind text-2xl */
}
/* --- End of heading font update --- */

.recipe-preview-content ul, 
.recipe-preview-content ol {
    padding-left: 30px;
    list-style-position: outside;
}
.recipe-preview-content ol {
    list-style-type: decimal;
}
.recipe-preview-content li {
    margin-bottom: 10px;
}
.recipe-preview-content img {
    display: block;
    height: auto;
    margin: 20px auto;
    border-radius: 8px;
    background-color: #f0f0f0;
    object-fit: cover;
}


.recipe-preview-content p#recipe-desc-preview {
    text-align: center;
    font-style: italic;
    color: #555;
    margin-bottom: 1rem;
}
/* --- End of Original Styles --- */

/* --- New Plain Text Block Style --- */
.recipe-text-block {
    text-align: left;
    font-style: normal;
    color: #333;
    margin: 1rem 0;
    line-height: 1.6;
}

/* --- New "Text Bubble" Style (Stylized as a sticky note) --- */
/* Base style for all "toasts" */
.toast-base {
    border-radius: 8px;
    padding: 12px 16px;
    margin: 20px 0;
    font-family: 'Kalam', cursive; /* Playful font */
    font-size: 1.1rem; /* Slightly larger */
    box-shadow: 2px 2px 10px rgba(0,0,0,0.05);
    transform: rotate(-1deg); /* Slight playful tilt */
}
.toast-base::before {
    font-weight: 700;
    font-style: normal;
}

/* Note Style (Yellow) */
.toast-note {
    background-color: #fefce8; /* yellow-50 */
    border-left: 5px solid #eab308; /* yellow-500 */
    color: #713f12; /* yellow-900 */
}
.toast-note::before {
    content: '💡 Note: ';
}

/* Tip Style (Blue) */
.toast-tip {
    background-color: #e0f2fe; /* light-blue-100 */
    border-left: 5px solid #0ea5e9; /* sky-500 */
    color: #0c4a6e; /* sky-900 */
}
.toast-tip::before {
    content: '📘 Tip: ';
}

/* Warning Style (Red) */
.toast-warning {
    background-color: #fef2f2; /* red-50 */
    border-left: 5px solid #ef4444; /* red-500 */
    color: #991b1b; /* red-900 */
}
.toast-warning::before {
    content: '⚠️ Warning: ';
}


/* --- Builder & Print Styles --- */
/* Base style for all item buttons (move, delete) */
.item-btn {
    font-weight: bold;
    cursor: pointer;
    font-size: 1.25rem;
    line-height: 1;
    transition: all 0.2s ease;
}

/* New Move Button Styles */
.move-up-btn, .move-down-btn {
    color: #3b82f6; /* blue-500 */
}
.move-up-btn:hover, .move-down-btn:hover {
    color: #1d4ed8; /* blue-700 */
    transform: scale(1.25);
}
/* Class to hide arrows when at top/bottom */
.hidden-arrow {
    visibility: hidden;
    cursor: default;
}
.hidden-arrow:hover {
    transform: none;
    color: inherit;
}

.delete-btn {
    color: #ef4444; /* red-500 */
}
.delete-btn:hover {
    color: #b91c1c; /* red-700 */
    transform: scale(1.25) rotate(10deg); /* Added playful hover */
}

/* --- NEW: Material Icons Base Style --- */
.material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;  /* Default icon size */
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'liga';
}

/* --- NEW: Inline Icon Style for Preview --- */
.recipe-preview-content .material-icons {
    font-size: 1.1em; /* Make icon match text size */
    vertical-align: -0.15em; /* Align icon nicely with text */
    line-height: 1;
}

@media print {
    /* Hide the builder panel and all buttons */
    .builder-panel, .no-print, .preview-controls {
        display: none !important;
    }

    /* Make the recipe panel take full width */
    .recipe-panel {
        width: 100%;
        padding: 0;
        margin: 0;
        display: block !important; /* Ensure it's visible for print */
    }

    body {
        background-color: #ffffff;
        margin: 0;
        padding: 0;
        font-family: 'Lexend', sans-serif;
        color: #000;
    }

    /* Reset recipe container for printing */
    .recipe-preview-content.container {
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0;
        border: none;
        box-shadow: none;
    }

    /* Ensure images print well */
    .recipe-preview-content img {
        /* Allow the inline `style="max-width:...px"` set by the preview to take precedence
           while still preventing images from overflowing the printed page. Removing the
           previous `!important` cap lets element inline styles (the user's chosen size)
           apply. Use max-width:100% so very large values still fit the page. */
        max-width: 100%;
        height: auto;
        display: block;
        margin: 20px auto;
        page-break-inside: avoid;
    }
    
    /* Style text bubble for print */
    .text-bubble, .toast-base {
        background-color: #f8f8f8 !important;
        border: 1px solid #ddd !important;
        color: #333 !important;
        font-family: 'Lexend', sans-serif !important; /* Reset font for print */
        font-style: italic;
        font-size: 1rem;
        transform: rotate(0deg); /* Straighten for print */
        page-break-inside: avoid;
    }
    .text-bubble::before, .toast-base::before {
        color: #000 !important;
        font-family: 'Lexend', sans-serif !important;
    }
    /* Specific print "before" content */
    .toast-note::before { content: 'Note: '; }
    .toast-tip::before { content: 'Tip: '; }
    .toast-warning::before { content: 'Warning: '; }

    /* --- NEW: Hide icons in print only for UI chrome areas (not the recipe preview) --- */
    .no-print .material-icons, .builder-panel .material-icons, .preview-controls .material-icons {
        display: none !important;
    }

    /* General print typography */
    .recipe-preview-content h1, 
    .recipe-preview-content h3 {
        color: #000;
        /* font-family applied by class */
    }
    /* UPDATED: h1/h2 print styles */
    .recipe-preview-content h1,
    .recipe-preview-content h2 { color: #000; }
    
    .recipe-preview-content h1.font-style-display,
    .recipe-preview-content h2.font-style-display { font-family: '"Baloo 2"', cursive; }
    
    .recipe-preview-content h1.font-style-serif,
    .recipe-preview-content h2.font-style-serif { font-family: 'Merriweather', serif; }
    
    .recipe-preview-content h1.font-style-sans,
    .recipe-preview-content h2.font-style-sans { font-family: 'Lexend', sans-serif; }


    .recipe-preview-content p#recipe-desc-preview, 
    .recipe-preview-content li,
    .recipe-text-block {
        color: #000;
    }

    .recipe-preview-content li {
        color: #000;
    }

    /* Prevent page breaks where we don't want them */
    .recipe-preview-content li, 
    .recipe-preview-content h2, 
    .recipe-preview-content h3 {
        page-break-after: avoid;
        page-break-inside: avoid;
    }
    .recipe-preview-content h1 {
        page-break-after: avoid;
    }
}

/* --- Inline Editor & Floating Add Button Styles --- */
.inline-edit-image {
    cursor: pointer;
    border-radius: 6px;
    transition: box-shadow 0.15s ease, transform 0.12s ease;
}
.inline-edit-image:hover {
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
    transform: translateY(-2px);
}

.image-resizer-overlay input[type="range"] {
    appearance: none;
    -webkit-appearance: none;
    height: 6px;
    border-radius: 6px;
    background: linear-gradient(90deg,#60a5fa,#7c3aed);
}

/* Floating add menu default styles (menu created dynamically) */
#floating-add-menu button:hover { background: #f3f4f6; }

/* Ensure inline preview looks like the recipe preview */
#inline-preview .recipe-text-block { margin: 0.75rem 0; }

/* Global font-style helper classes so inline preview headings respect settings */
.font-style-display { font-family: '"Baloo 2"', cursive !important; }
.font-style-serif { font-family: 'Merriweather', serif !important; }
.font-style-sans { font-family: 'Lexend', sans-serif !important; }

/* New text outline to make freshly added text visible */
.new-text-outline {
    outline: 2px dashed rgba(59,130,246,0.6); /* blue-500-ish */
    padding: 2px;
    border-radius: 4px;
}

/* Inline item wrapper */
.inline-item {
    cursor: grab;
}
.inline-item.dragging {
    opacity: 0.5;
}
.inline-item.drop-target {
    outline: 2px solid rgba(79,70,229,0.25);
}

/* Step badge styling (numbered prefix for inline steps) */
.step-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 9999px;
    background: #f3f4f6; /* gray-100 */
    color: #111827; /* gray-900 */
    font-weight: 700;
    margin-right: 10px;
    flex: 0 0 32px;
}
.step-content { display: inline; }


/* Print helpers: when JS adds body.print-inline-only or body.print-recipe-only
   we make only the chosen preview visible for printing. This prevents UI chrome
   from appearing in the printout when using the experimental inline editor. */
@media print {
    /* Hide everything first */
    body.print-inline-only * { visibility: hidden !important; }
    /* Show inline preview only */
    body.print-inline-only #inline-preview, body.print-inline-only #inline-preview * { visibility: visible !important; }
    body.print-inline-only #inline-preview { position: absolute; left: 0; top: 0; width: 100%; }

    /* Classic/preview-only print (used when printing from the recipe preview) */
    body.print-recipe-only * { visibility: hidden !important; }
    body.print-recipe-only #recipe-preview, body.print-recipe-only #recipe-preview * { visibility: visible !important; }
    body.print-recipe-only #recipe-preview { position: absolute; left: 0; top: 0; width: 100%; }

    /* Ensure we don't print editor outlines or floating controls */
    .new-text-outline { outline: none !important; padding: 0 !important; }
    #floating-add-btn, #icon-key-btn, #settings-btn { display: none !important; }
}