/* Google Fonts Import */
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;700&family=Inter:wght@400;700&display=swap');

/* Basic Reset & Body Styles */
body {
    margin: 0;
    font-family: 'Courier New', Courier, monospace; /* Retro/monospace font */
    color: #E0E0E0; /* Light gray for text */
    background-color: #1A1A1A; /* Dark background color */
    background-image: url('../images/background.png'); /* Updated Background Image Path */
    background-repeat: repeat;
    background-attachment: fixed; /* Makes background stationary */
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Ensure body takes full viewport height */
    overflow-x: hidden; /* Prevent horizontal scrollbar if elements slightly overflow */
}

/* Scrollbar Styling (Webkit - Chrome, Safari, Edge) */
::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    background: #333; /* Darker track */
    border: 1px solid #555;
}

::-webkit-scrollbar-thumb {
    background-color: #666; /* Gray thumb */
    border: 2px solid #888; /* Lighter border on thumb */
}

::-webkit-scrollbar-thumb:hover {
    background-color: #999; /* Even lighter on hover */
}


/* Header */
.header {
    background-color: rgba(10, 25, 40, 0.9); /* Dark blue, slightly transparent */
    padding: 15px 20px;
    text-align: center;
    border-bottom: 2px solid #555; /* Subtle border */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
    position: relative; /* Needed for absolute positioning of child GIFs */
    z-index: 10; /* Ensure header is above other content if needed */
}

.header h1 {
    margin: 0;
    font-family: 'Dancing Script', cursive; /* Cursive font for main title */
    font-size: 3.5em; /* Larger font size */
    color: #C0DEDD; /* Light greenish-blue color */
    text-shadow: 0 0 8px rgba(192, 222, 221, 0.7), 0 0 15px rgba(192, 222, 221, 0.4); /* Subtle glow effect */
    line-height: 1.2;
}

.header h1 small {
    display: block; /* Make the small text appear on a new line */
    font-family: 'Inter', sans-serif; /* Clean sans-serif for tagline */
    font-size: 0.35em; /* Smaller relative to h1 */
    color: #A0C0C0; /* Slightly darker shade for the tagline */
    letter-spacing: 0.2em; /* Spaced out letters */
    text-transform: uppercase; /* All caps for the tagline */
    margin-top: 5px;
    text-shadow: none; /* Remove glow from small text */
}

/* New: GIF Styling for header corners */
.corner-gif {
    position: absolute;
    width: 100px; /* Adjust size as needed */
    height: 100px; /* Adjust size as needed */
    object-fit: contain; /* Ensure GIF fits without cropping */
    top: 5px; /* Distance from the top */
    z-index: 11; /* Make sure GIFs are above the header content */
    border-radius: 5px; /* Slightly rounded corners */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.left-corner-gif {
    left: 10px; /* Distance from the left */
}

.right-corner-gif {
    right: 10px; /* Distance from the right */
}


/* Container for main layout */
.container {
    display: flex;
    flex: 1; /* Allows container to grow and take available space */
    width: 100%;
    max-width: 1200px; /* Max width for desktop layout */
    margin: 20px auto; /* Center the container with some vertical margin */
    padding: 0 10px; /* Padding on sides for smaller screens */
    box-sizing: border-box; /* Include padding in element's total width/height */
}

/* Sidebar Styling */
.sidebar {
    width: 250px; /* Fixed width for sidebars on desktop */
    flex-shrink: 0; /* Prevent sidebars from shrinking */
    padding: 15px;
    background-color: #2B2B2B; /* Darker background for sidebars */
    border: 1px solid #444; /* Subtle border */
    margin: 0 10px; /* Space between sidebars and main content */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
    overflow-y: auto; /* Enable scrolling for sidebar content if it overflows */
    max-height: calc(100vh - 140px); /* Adjust max-height to fit within viewport, considering header/footer */
    position: sticky; /* Make sidebars sticky */
    top: 20px; /* Stick to the top with some margin */
    align-self: flex-start; /* Align to the start of the cross-axis */
}

.sidebar h2, .sidebar h3, .sidebar h4 {
    color: #ADD8E6; /* Light blue for headings in sidebar */
    border-bottom: 1px dotted #555;
    padding-bottom: 5px;
    margin-top: 15px;
}

.sidebar ul {
    list-style: none;
    padding: 0;
}

.sidebar ul li a {
    color: #98FB98; /* Pale green for links */
    text-decoration: none;
    display: block;
    padding: 5px 0;
    transition: color 0.3s ease;
}

.sidebar ul li a:hover {
    color: #FFD700; /* Gold on hover */
    text-decoration: underline;
}

.sidebar-box {
    background-color: #3C3C3C;
    border: 1px dashed #777;
    padding: 10px;
    margin-top: 20px;
}

/* Main Content Area */
.main-content-wrapper {
    flex-grow: 1; /* Allows main content to take up remaining space */
    margin: 0 10px; /* Space between main content and sidebars */
    background-color: #2B2B2B; /* Same background as sidebars for consistency */
    border: 1px solid #444;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
    overflow-y: auto; /* Enable scrolling for main content */
    max-height: calc(100vh - 140px); /* Adjust max-height to fit within viewport, considering header/footer */
    padding: 20px;
    box-sizing: border-box;
}

.main-content {
    padding: 0; /* Padding is already on .main-content-wrapper */
}


.main-content h2, .main-content h3 {
    color: #ADD8E6;
    border-bottom: 1px solid #555;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

.main-content p {
    margin-bottom: 1em;
}

/* Footer */
.footer {
    background-color: #222;
    color: #777;
    padding: 15px 20px;
    text-align: center;
    border-top: 2px solid #555;
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.5);
    margin-top: auto; /* Pushes footer to the bottom */
}

/* General Link Styling (can be applied globally or to specific areas) */
a {
    color: #98FB98; /* Default link color (pale green) */
    text-decoration: none;
}

a:hover {
    color: #FFD700; /* Gold on hover */
    text-decoration: underline;
}

/* --- RECIPE GALLERY STYLES --- */

.recipe-grid-wrapper {
    /* This rule will override the general .main-content-wrapper margin if a right sidebar isn't present */
    margin-right: 10px; /* Adjust this to control how much wider the content gets when only left sidebar is present */
}

.recipe-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Responsive grid columns */
    gap: 20px; /* Space between recipe cards */
    margin-top: 30px;
}

.recipe-card {
    background-color: #3C3C3C; /* Slightly lighter background for cards */
    border: 1px solid #555;
    border-radius: 8px; /* Slightly rounded corners for a modern touch */
    overflow: hidden; /* Ensures image doesn't break rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.recipe-card:hover {
    transform: translateY(-5px); /* Lift effect on hover */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.6); /* More pronounced shadow */
}

.recipe-card a {
    /* Reverted to original display behavior for recipe gallery cards */
    display: block; /* Make the whole card clickable */
    text-decoration: none;
    color: #E0E0E0; /* Text color for card content */
    padding: 0; /* Remove padding from here, added inside for content */
}

.recipe-card img {
    width: 100%; /* Image fills the card width */
    height: 150px; /* Keep height at 150px */
    object-fit: contain; /* Ensure entire image is visible, no cropping */
    display: block; /* Removes extra space below image */
    border-bottom: 1px solid #555; /* Separator for image and title */
    border-radius: 0; /* Remove border-radius here */
    flex-shrink: initial; /* Revert flex-shrink */
    margin-right: 0; /* Revert margin-right */
}

.recipe-card h3 {
    margin: 15px; /* Revert margin */
    font-size: 1.3em; /* Revert font size */
    color: #ADD8E6; /* Match sidebar heading color */
    text-align: center; /* Revert text alignment */
    border-bottom: none; /* Remove border from card title */
    padding-bottom: 0;
    flex-grow: initial; /* Revert flex-grow */
}


/* --- NEW STYLES FOR SINGLE RECIPE PAGES --- */

/* Adjust container for single recipe page to remove right sidebar */
.single-recipe-container {
    max-width: 1000px; /* Wider content area for single recipe */
}

.single-recipe-wrapper {
    margin-right: 10px; /* Ensure main content expands when only left sidebar is present */
    padding: 30px; /* More internal padding for single recipe */
}

.recipe-card-full {
    background-color: #F8F8F0; /* Creamy background for the recipe card, like the images */
    color: #333; /* Dark text for readability */
    border: 2px solid #555; /* Darker border */
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    overflow: hidden; /* For image border-radius */
}

.recipe-header-section {
    display: flex; /* Make it a flex container */
    flex-direction: row; /* Arrange items in a row */
    align-items: center; /* Vertically align items in the center */
    padding: 20px;
    background-color: #E0E8E8; /* Light blue-grey background for header section */
    border-bottom: 1px solid #BBB;
    text-align: left; /* Align text within this section to the left */
}

.recipe-title-block {
    margin-bottom: 0; /* Remove margin-bottom as it's now a row layout */
    flex-grow: 1; /* Allow title block to take remaining space */
    padding-left: 15px; /* Add some padding to separate from image */
}

.recipe-main-title {
    font-family: 'Inter', sans-serif; /* Clean sans-serif, bold for main title */
    font-size: 2.8em;
    font-weight: 700;
    color: #333; /* Dark text */
    margin: 0;
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: none; /* Override general h2/h3 border */
}

.recipe-subtitle {
    font-family: 'Inter', sans-serif;
    font-size: 1em;
    color: #666;
    margin: 5px 0 0;
    font-style: italic;
}

.recipe-image-placeholder {
    width: 200px; /* Fixed width for the image container */
    height: 150px; /* Fixed height to match */
    flex-shrink: 0; /* Prevent it from shrinking */
    margin: 0; /* Reset margins */
    border: 1px solid #DDD; /* Light border around image */
    border-radius: 5px; /* Slight roundness for image */
    overflow: hidden;
}

.recipe-image-placeholder img {
    width: 100%;
    height: 100%; /* Make image fill its container */
    display: block;
    object-fit: contain; /* Changed from 'cover' to 'contain' */
    border-bottom: none; /* Override general image border-bottom */
}

.recipe-details-section {
    display: flex;
    flex-wrap: wrap; /* Allow columns to wrap on smaller screens */
    padding: 25px;
    border-bottom: 1px solid #DDD;
}

.ingredients-list, .directions-list {
    flex: 1; /* Distribute space evenly */
    min-width: 300px; /* Minimum width before wrapping */
    padding: 0 15px;
    box-sizing: border-box;
}

.ingredients-list {
    border-right: 1px dashed #DDD; /* Dashed separator */
}

.directions-list {
    border-left: 1px dashed #DDD; /* Dashed separator */
}

.ingredients-list h3, .directions-list h3 {
    font-family: 'Inter', sans-serif;
    font-size: 1.4em;
    font-weight: 700;
    color: #444;
    margin-top: 0;
    border-bottom: 2px solid #C0DEDD; /* Light blue accent border */
    padding-bottom: 5px;
    margin-bottom: 15px;
    text-transform: uppercase;
}

.ingredients-list ul, .directions-list ol {
    padding-left: 25px; /* Indent lists */
    margin: 0;
    color: #555;
    font-size: 1.1em;
    line-height: 1.8; /* More spacing for readability */
}

.ingredients-list ul li::marker {
    color: #888; /* Darker bullet point */
}

.directions-list ol li::marker {
    color: #888; /* Darker number */
}

.recipe-notes-section {
    padding: 25px;
    font-size: 0.95em;
    color: #777;
    background-color: #F0F0E8; /* Slightly different background for notes */
    border-top: 1px solid #DDD;
    text-align: center; /* Center notes */
}

.recipe-notes-section p {
    margin: 5px 0;
}

.back-link {
    text-align: center;
    padding: 20px;
}

.back-link a {
    display: inline-block;
    background-color: #ADD8E6; /* Light blue button */
    color: #2B2B2B; /* Dark text for button */
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

.back-link a:hover {
    background-color: #98FB98; /* Pale green on hover */
    color: #1A1A1A;
    text-decoration: none;
}


/* Responsive Design */
@media (max-width: 900px) {
    .container {
        flex-direction: column; /* Stack elements vertically */
        align-items: center; /* Center items in column layout */
        padding: 0 15px;
    }

    .sidebar {
        width: 90%; /* Sidebars take more width on smaller screens */
        max-width: 600px; /* Max width for sidebars */
        margin: 10px 0; /* Adjust vertical margin */
        position: static; /* Remove sticky behavior on smaller screens */
        max-height: none; /* Allow sidebars to expand naturally */
        overflow-y: visible; /* Prevent unwanted scrollbars on sidebars */
    }

    .main-content-wrapper {
        width: 90%; /* Main content takes more width */
        max-width: 600px;
        margin: 10px 0;
        max-height: 80vh; /* Limit height for main content to keep it scrollable */
    }

    /* Adjust recipe grid for smaller screens */
    .recipe-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Allow smaller cards */
        gap: 15px;
    }

    .header h1 {
        font-size: 2.5em; /* Adjust font size for smaller screens */
    }

    .header h1 small {
        font-size: 0.4em;
    }

    /* Recipe card responsive adjustment (stack image and text) */
    .recipe-card a {
        flex-direction: column; /* Stack image and text vertically */
        text-align: center;
    }

    .recipe-card img {
        margin-right: 0; /* Remove right margin when stacked */
        margin-bottom: 10px; /* Add bottom margin for spacing */
        width: 100px; /* Slightly larger thumbnail when stacked */
        height: 75px; /* Maintain aspect ratio */
    }
    .recipe-card h3 {
        text-align: center; /* Center title when stacked */
    }

    /* Single recipe page responsive adjustments */
    .single-recipe-container {
        max-width: 100%; /* Take full width on small screens */
    }

    .single-recipe-wrapper {
        margin-right: 0; /* Remove right margin */
        padding: 15px; /* Reduce padding for smaller screens */
    }

    .recipe-header-section {
        flex-direction: column; /* Stack image and text vertically on small screens */
        align-items: center;
        text-align: center;
        padding: 15px;
    }

    .recipe-image-placeholder {
        width: 100%; /* Image takes full width of container */
        max-width: 300px; /* Max width for image on smaller screens */
        height: auto; /* Auto height to maintain aspect ratio */
        margin-right: 0; /* Remove right margin */
        margin-bottom: 15px; /* Add bottom margin for spacing */
    }

    .recipe-image-placeholder img {
        height: auto; /* Allow image to scale with width */
    }

    .recipe-title-block {
        padding-left: 0; /* Remove padding */
    }

    .recipe-main-title {
        font-size: 2em; /* Smaller title on mobile */
    }

    .recipe-details-section {
        flex-direction: column; /* Stack ingredients and directions */
    }

    .ingredients-list, .directions-list {
        min-width: auto; /* Remove min-width constraint */
        width: 100%;
        padding: 15px 0; /* Adjust padding */
        border-right: none; /* Remove vertical borders */
        border-left: none;
        border-bottom: 1px dashed #DDD; /* Add horizontal separator */
    }

    .directions-list {
        border-bottom: none; /* Remove border from the last section */
    }
}

@media (max-width: 600px) {
    .header h1 {
        font-size: 2em; /* Even smaller font for very small screens */
    }
    .header h1 small {
        font-size: 0.45em;
    }
    .sidebar, .main-content-wrapper {
        width: 95%; /* Almost full width */
        padding-left: 10px;
        padding-right: 10px;
    }
    .recipe-grid {
        grid-template-columns: 1fr; /* Single column on very small screens */
        gap: 10px;
    }

    .single-recipe-wrapper {
        padding: 10px;
    }

    .recipe-main-title {
        font-size: 1.6em; /* Even smaller title */
    }

    .ingredients-list ul, .directions-list ol {
        font-size: 1em; /* Smaller font for lists */
    }
}