/**
 * recipeDetailStyles.css
 *
 * Styles specifically for the Recipe Detail page.
 */

/* --- General Page Structure --- */
.recipe-detail-page-container {
    max-width: 1600px;
    margin: 0 auto;
    padding-left: var(--container-left-padding, 40px);
    padding-right: var(--container-left-padding, 40px);
    padding-top: var(--spacing4, 20px);
    padding-bottom: var(--spacing6, 80px);
}

/* --- Breadcrumbs --- */
.breadcrumbs {
    margin-bottom: var(--space-5, 2.5rem);
    font-size: 0.9rem;
    color: var(--color-text-secondary, #64748b);
}
.breadcrumbs ol {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap; /* Allow wrapping */
    gap: var(--space-1, 0.25rem) var(--space-2, 0.5rem); /* Vertical and horizontal gap */
}
.breadcrumbs li {
    display: inline-flex; /* Align separator correctly */
    align-items: center;
}
/* Separator using pseudo-element */
.breadcrumbs li:not(:last-child)::after {
    content: ">"; /* Simple separator */
    margin-left: var(--space-2, 0.5rem);
    color: var(--color-text-subtle, #9194A0);
}
.breadcrumbs a {
    color: var(--color-primary, #007bff);
    text-decoration: none;
}
.breadcrumbs a:hover {
    text-decoration: underline;
}
/* Current page styling */
.breadcrumbs li[aria-current="page"] {
    color: var(--color-text-base, #18191F);
    font-weight: 500;
}


/* --- Recipe Layout Grid --- */
.recipe-layout-grid {
    display: grid;
    grid-template-columns: 2fr 1fr; /* Main content wider than sidebar */
    gap: var(--space-6, 3.5rem); /* Generous gap */
}


/* --- Main Content Column (Left) --- */
.recipe-main-content {
    /* Takes width from grid */
}

.recipe-image {
    margin-bottom: var(--space-5, 2.5rem);
}
.recipe-image-placeholder { /* Styling for the grey box */
    height: 400px; /* Adjust as needed */
    background-color: var(--color-bg-subtle, #f8fafc);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-subtle, #9194A0);
    font-size: 1rem;
    border-radius: var(--radius-md, 8px);
    border: 1px solid var(--color-border-light, #e0e0e0);
}
/* Image containment fixes */
.recipe-image-placeholder { overflow: hidden; }
#detailImage img,
.recipe-image-placeholder img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
}

/* Similar recipe thumbnails: keep images inside their boxes */
.similar-recipe-img-placeholder { overflow: hidden; position: relative; }
.similar-recipe-img-placeholder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* If using actual images: */
/*
.recipe-image img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-md, 8px);
}
*/

/* Ingredients & Instructions Sections */
.recipe-ingredients,
.recipe-instructions {
    margin-bottom: var(--spacing5);
    background-color: var(--card-bg);
    border: 1px solid var(--text-secondary);
    border-radius: var(--radius-md);
    padding: var(--spacing4);
}

.recipe-ingredients h2,
.recipe-instructions h2 {
    font-size: 1.4rem;
    margin-bottom: var(--spacing4);
    padding-bottom: var(--spacing2);
    color: var(--text-color);
}

/* Ingredients List */
.recipe-ingredients ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.recipe-ingredients li {
    margin-bottom: var(--space-2, 0.5rem);
}
.recipe-ingredients label {
    display: inline-flex; /* Align checkbox and text */
    align-items: center;
    gap: var(--space-2, 0.5rem);
    cursor: pointer;
    color: var(--color-text-base, #18191F);
    font-size: 1rem;
}
.recipe-ingredients input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--color-primary, #007bff); /* Style checkbox color */
}

/* Instructions List */
.recipe-instructions ol {
    list-style: none; /* Remove default numbers */
    padding: 0;
    margin: 0;
    counter-reset: instructions-counter; /* Initialize counter */
}
.recipe-instructions li {
    margin-bottom: var(--space-3, 1rem);
    position: relative; /* For number positioning */
    padding-left: 2.5em; /* Space for the number */
    line-height: 1.7;
    color: var(--color-text-base, #18191F);
}
/* Custom step numbers */
.recipe-instructions li::before {
    counter-increment: instructions-counter;
    content: counter(instructions-counter);
    position: absolute;
    left: 0;
    top: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.8em;
    height: 1.8em;
    border-radius: 50%;
    background-color: var(--color-primary-light, #e7f3ff); /* Light blue background */
    color: var(--color-primary-dark, #0056b3);
    font-weight: 600;
    font-size: 0.9rem;
    line-height: 1;
}


/* --- Sidebar Column (Right) --- */
.recipe-sidebar {
    /* Takes width from grid */
    position: sticky; /* Optional: make sidebar sticky */
    top: var(--space-5, 2.5rem); /* Adjust based on nav height */
    align-self: start; /* Align to top of grid row */
}

.sidebar-block {
    background-color: var(--color-bg-subtle, #f8fafc);
    padding: var(--space-4, 1.25rem);
    border-radius: var(--radius-md, 8px);
    border: 1px solid var(--color-border-light, #e0e0e0);
    margin-bottom: var(--space-5, 2.5rem);
}
.sidebar-block:last-child {
    margin-bottom: 0;
}

/* Recipe Title Block */
.recipe-title-block h1 {
    font-size: 1.8rem;
    margin-bottom: var(--spacing2, 8px);
    color: var(--text-color);
}
.recipe-description {
    font-size: 1rem;
    color: var(--text-secondary);
    margin-bottom: var(--spacing4, 20px);
    line-height: 1.6;
}
.recipe-meta-info {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing4, 20px);
    margin-bottom: var(--spacing4, 20px);
    color: var(--text-secondary);
    font-size: 0.95rem;
    padding-bottom: var(--spacing4, 20px);
}
.recipe-meta-info span {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1, 0.25rem);
}
.recipe-meta-info .fa {
    font-size: 1.1rem;
    margin-right: var(--space-1, 0.25rem);
}

/* Recipe Action Buttons */
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing2, 8px);
    padding: var(--spacing2, 8px) var(--spacing3, 16px);
    border-radius: var(--radius-sm);
    font-weight: 500;
    font-size: 0.9rem;
    text-decoration: none;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.button .fa { font-size: 1rem; }

.button-primary.save-recipe {
    background-color: var(--text-color);
    color: var(--card-bg);
    border: 1px solid var(--text-color);
}
.button-primary.save-recipe:hover {
    background-color: var(--text-mid);
    border-color: var(--text-mid);
}

.button-secondary {
    background-color: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--text-secondary);
}
.button-secondary:hover {
    background-color: var(--filter-inactive-bg);
    border-color: var(--text-mid);
    color: var(--text-color);
}

/* Chef Info Block */
.chef-info {
    display: flex;
    align-items: center;
    gap: var(--space-3, 1rem);
    text-decoration: none;
    color: inherit;
}
.chef-image-placeholder {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: var(--text-secondary);
    color: var(--card-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    flex-shrink: 0;
    overflow: hidden; /* clip image to circle */
}
.chef-image-placeholder img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* crop to circle */
    border-radius: 50%;
    display: block;
}
.chef-info:hover h3 { color: var(--primary-color); }
.chef-details h3 {
    font-size: 1.1rem;
    margin: 0 0 var(--space-1, 0.25rem) 0;
    color: var(--text-color);
}
.chef-details p {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-secondary);
}
.chef-details .chef-bio {
    font-size: 0.85rem;
    margin-top: var(--space-1, 0.25rem);
}

/* Similar Recipes Block */
.similar-recipes h3 { /* Match block heading style */
    font-size: 1.25rem;
    margin-bottom: var(--space-3, 1rem);
    color: var(--text-color);
}
.similar-recipes ul { list-style: none; padding: 0; margin: 0; }
.similar-recipes li { margin-bottom: var(--space-3, 1rem); }
.similar-recipes li:last-child { margin-bottom: 0; }

.similar-recipes a {
    display: flex;
    align-items: center;
    gap: var(--space-3, 1rem);
    text-decoration: none;
    color: inherit;
}
.similar-recipe-img-placeholder {
    width: 50px;
    height: 50px;
    border-radius: var(--radius-sm, 5px);
    background-color: var(--text-secondary);
    display: flex; align-items: center; justify-content: center;
    font-size: 0.7rem; color: var(--card-bg);
    flex-shrink: 0;
}
.similar-recipe-details h4 {
    font-size: 1rem;
    font-weight: 500;
    margin: 0 0 var(--space-1, 0.25rem) 0;
    color: var(--text-color);
}
.similar-recipe-details span {
    font-size: 0.85rem;
    color: var(--text-secondary);
}
.similar-recipes a:hover h4 {
    color: var(--primary-color);
}


/* --- Responsive Adjustments --- */
@media (max-width: 992px) { /* Tablet breakpoint */
    .recipe-layout-grid {
        grid-template-columns: 1fr; /* Stack columns */
        gap: var(--space-5, 2.5rem);
    }
    .recipe-sidebar {
        position: static; /* Remove sticky positioning */
        top: auto;
    }
     .recipe-image-placeholder {
        height: 300px; /* Adjust image height */
    }
}

@media (max-width: 768px) { /* Mobile breakpoint */
    .recipe-detail-page-container {
        padding-left: var(--container-padding-inline-default, 1rem);
        padding-right: var(--container-padding-inline-default, 1rem);
        padding-top: var(--space-3, 1rem);
        padding-bottom: var(--space-5, 2.5rem);
    }
     .breadcrumbs {
        margin-bottom: var(--space-4, 1.25rem);
     }
     .recipe-image-placeholder {
        height: 250px;
     }
      .recipe-ingredients h2, .recipe-instructions h2, .similar-recipes h3 {
        font-size: 1.2rem;
      }
      .recipe-title-block h1 {
          font-size: 1.5rem;
      }
}

/* Love Button Styles */
.love-recipe.loved {
    background-color: var(--text-color);
    color: var(--card-bg);
    border-color: var(--text-color);
}

.love-recipe.loved .fa-heart {
    color: #ff4444;
}

/* Print Styles */
@media print {
    /* Hide non-essential elements */
    .recipe-actions,
    .recipe-sidebar .similar-recipes,
    .site-header,
    .site-footer,
    .recipe-image,
    .recipe-image-placeholder,
    .chef-image-placeholder,
    .similar-recipe-img-placeholder {
        display: none;
    }

    /* Reset grid layout */
    .recipe-layout-grid {
        display: block;
    }

    /* Force sidebar content to top */
    .recipe-sidebar {
        display: block;
        position: static;
        width: 100%;
        margin-bottom: 2rem;
    }

    /* Move title section to top */
    .recipe-title-block {
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        margin-bottom: 2rem !important;
        page-break-after: avoid;
    }

    /* Ensure main content follows title */
    .recipe-main-content {
        page-break-before: avoid;
    }

    /* Clean styling for print */
    .recipe-ingredients,
    .recipe-instructions {
        page-break-inside: avoid;
        border: none;
        background: none;
        padding: 0;
    }

    /* Basic print styling */
    body {
        color: #000;
        background: none;
    }

    .sidebar-block {
        background: none;
        border: none;
        padding: 0;
        margin: 0;
    }
}