/* --- Global Styles --- */
body {
    font-family: 'Montserrat', sans-serif;
    margin: 0;
    /* CRITICAL: Padding-top for the sticky header */
    padding-top: 110px; 
    /* NEW: Padding added to the bottom of the body to make space for the fixed banner */
    padding-bottom: 75px; 
    background-color: #f7f7f7; /* Light background */
    color: #333;
}
a {
    color: #4CAF50; /* Green link color */
    text-decoration: none;
    transition: color 0.3s;
}
a:hover {
    color: #388e3c;
    text-decoration: underline;
}
h1, h2, h3 {
    color: #2e7d32; /* Darker green for headings */
}
.btn {
    display: inline-block;
    padding: 10px 20px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 5px;
    margin-top: 15px;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.1s;
    font-weight: 500;
}
.btn:hover {
    background-color: #388e3c;
    text-decoration: none;
    transform: translateY(-1px);
}
section {
    padding: 40px 5%;
}

/* ----------------------------------------------------------------- */
/* --- Header & Navigation (STICKY + SHRINKING) --- */
/* ----------------------------------------------------------------- */
.main-header {
    background-color: white;
    padding: 10px 5%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    
    /* Sticky Properties */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
    
    /* Base Size and Transition for Shrinking */
    height: 110px; /* Base height */
    transition: all 0.3s ease-in-out;
    box-sizing: border-box;
}

/* Logo (Image + Text) Styling */
.logo {
    font-size: 1.8em; /* Increased text size for better visual balance */
    font-weight: 700;
    color: #2e7d32;
    display: flex; /* Aligns image and text horizontally */
    align-items: center;
    gap: 15px; /* Increased space between logo image and text */
    transition: all 0.3s ease-in-out;
}
.logo-icon {
    /* NEW BASE LOGO SIZE (Tripled) */
    height: 90px; 
    width: auto;
    transition: all 0.3s ease-in-out;
}
.logo span {
    transition: font-size 0.3s ease-in-out;
    white-space: nowrap; /* Prevents text wrap */
}

/* SCROLLED STATE: Shrinks the header and logo when user scrolls */
.main-header.scrolled {
    height: 60px; /* Reduced height on scroll */
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
    padding-top: 5px;
    padding-bottom: 5px;
}
.main-header.scrolled .logo-icon {
    height: 40px; /* Reduced logo size on scroll */
}
.main-header.scrolled .logo span {
    font-size: 1.4em; /* Smaller text on scroll */
}

nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center; /* Centers navigation text vertically with the logo */
}
nav li {
    margin-left: 20px;
}
nav a {
    color: #333;
    font-weight: 500;
}

/* --- Hero Section & Search (Unchanged) --- */
.hero {
    background: url('/images/MTHFR-Diet-Kitchen-Food.webp') no-repeat center center/cover; 
    height: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: white;
    position: relative;
    z-index: 1;
}

/* Fallback for browsers that don't support WebP */
.no-webp .hero {
    background: url('/images/MTHFR-Diet-Kitchen-Food.jpg') no-repeat center center/cover;
}

.hero::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: -1;
}
.hero-content h1 {
    font-size: 2.5em;
    margin-bottom: 10px;
    color: white;
}
.hero-content p {
    font-size: 1.2em;
}

/* Primary Search Styling (Unchanged) */
.search-container {
    display: flex;
    margin-top: 20px;
    width: 100%;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}
.search-container input {
    flex-grow: 1;
    padding: 12px 15px;
    border: none;
    border-radius: 5px 0 0 5px;
    font-size: 1em;
}
.search-container button {
    padding: 12px 20px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 0 5px 5px 0;
    cursor: pointer;
    font-size: 1em;
}

/* --- Featured/Recipe Grid Styles (Unchanged) --- */
.featured-recipes, .recipe-index {
    text-align: center;
}
.recipe-grid {
    display: flex; 
    justify-content: center;
    gap: 20px;
    margin-top: 30px;
    flex-wrap: wrap;
    max-width: 1200px; 
    margin-left: auto;
    margin-right: auto;
    min-height: 150px; 
}
.recipe-card {
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    width: 100%;
    max-width: 350px;
    flex-grow: 1;
    padding-bottom: 20px;
    overflow: hidden;
    text-align: left;
    transition: transform 0.2s, box-shadow 0.2s;
    margin-bottom: 20px;
}
.recipe-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
}
.recipe-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 8px 8px 0 0;
}
.card-content {
    padding: 0 15px;
}
.recipe-card h3 {
    margin: 10px 0 5px;
    font-size: 1.2em;
}
.recipe-card .tag {
    color: #888;
    font-size: 0.9em;
    margin-bottom: 10px;
    display: block;
}
.recipe-card .description {
    font-size: 0.95em;
    color: #555;
}

/* --- Site Purpose Section (Unchanged) --- */
.purpose-statement {
    text-align: center;
    background-color: #e8f5e9;
    padding: 40px 10%;
    margin-top: 30px;
}

/* --- Footer (Unchanged) --- */
footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 20px;
    font-size: 0.9em;
}

/* ----------------------------------------------------------------- */
/* --- Utility & Info Pages (About, Disclaimer, Forms) Styles --- */
/* ----------------------------------------------------------------- */
.content-page {
    max-width: 900px;
    margin: 40px auto;
    padding: 20px;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.05);
}
.content-page h1 {
    font-size: 2em;
    border-bottom: 2px solid #e8f5e9;
    padding-bottom: 10px;
    margin-bottom: 20px;
}
.content-page h2 {
    font-size: 1.5em;
    color: #4CAF50;
    margin-top: 30px;
}
.content-page p {
    line-height: 1.6;
    margin-bottom: 15px;
}
.content-page ul {
    list-style: disc;
    margin-left: 20px;
    padding-left: 0;
}
.content-page ul li {
    margin-bottom: 10px;
    line-height: 1.6;
}
.last-updated {
    font-style: italic;
    color: #888;
    margin-bottom: 30px;
}

/* ----------------------------------------------------------------- */
/* --- NEW: Meet the Website Owner / Photo Styling --- */
/* ----------------------------------------------------------------- */

/* Styling for the entire figure container (The image and caption) */
.owner-bio {
    /* Float the container to the left so text wraps around it */
    float: left;
    margin: 0 25px 15px 0; /* Margin: Top, Right (for space), Bottom, Left */
    width: 150px; /* Set a fixed width for the entire photo/caption block */
    text-align: center;
}

/* Styling for the image itself */
.owner-photo {
    width: 100%; /* Makes the image fit the 150px figure width */
    height: 150px; /* Makes the image a perfect square */
    object-fit: cover; /* Ensures the image fills the area without distortion */
    border-radius: 50%; /* Creates the circular shape for an aesthetic touch */
    border: 3px solid #4CAF50; /* A subtle border using your primary accent color */
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.15); /* Soft shadow for depth */
}

/* Styling for the caption */
.owner-bio figcaption {
    font-size: 0.85em;
    color: #666;
    margin-top: 5px;
}

/* Clear the float after the section to prevent layout issues with subsequent elements */
.content-page section::after {
    content: "";
    display: table;
    clear: both;
}

/* --- Form Styling (Add/Edit Recipe) (Unchanged) --- */
.form-section {
    padding: 20px 0;
    border-bottom: 1px dashed #eee;
    margin-bottom: 20px;
}
.form-section:last-of-type {
    border-bottom: none;
}
label {
    display: block;
    font-weight: 700;
    margin: 15px 0 5px;
    color: #2e7d32;
}
input[type="text"], 
input[type="url"], 
input[type="number"], 
textarea,
select { 
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 1em;
    font-family: 'Montserrat', sans-serif;
}
textarea {
    resize: vertical;
}

/* --- Recipe Detail Page Specifics (Unchanged) --- */
.recipe-detail {
    max-width: 1000px;
    margin: 40px auto; /* Centered layout */
    padding: 20px;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.05);
}
.recipe-header {
    text-align: center;
    margin-bottom: 30px;
}
.recipe-header h1 {
    font-size: 2.5em;
    margin-bottom: 10px;
    border-bottom: none;
}
.metadata {
    display: flex;
    justify-content: center;
    gap: 30px;
    font-size: 1.1em;
    color: #555;
    margin-bottom: 20px;
}
.recipe-hero-image {
    width: 100%;
    height: 400px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 30px;
}
.recipe-description {
    font-size: 1.1em;
    font-style: italic;
    color: #444;
    padding-bottom: 20px;
    border-bottom: 1px solid #eee;
}
.recipe-body {
    display: flex;
    gap: 40px;
    margin-top: 30px;
}
.ingredients-section {
    flex: 1;
}
.instructions-section {
    flex: 2;
}
.ingredients-section ul {
    list-style: none;
    padding: 0;
}
.ingredients-section li {
    background: #f1f8e9; /* Lightest green for ingredient lists */
    margin-bottom: 8px;
    padding: 10px;
    border-radius: 4px;
    font-size: 1.05em;
    /* FIX: Ensures the ingredient name and button are laid out side-by-side */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-right: 10px; 
}
.ingredients-section li span {
    flex-grow: 1;
    margin-right: 10px;
}
.instructions-section ol {
    padding-left: 20px;
}
.instructions-section ol li {
    margin-bottom: 15px;
    line-height: 1.6;
    font-size: 1.1em;
}
.admin-tools {
    text-align: center;
    padding: 20px 0;
    margin-top: 20px;
    border-top: 1px solid #eee;
}
.admin-tools .delete-btn {
    background-color: #e57373;
    margin-left: 15px;
}
.admin-tools .delete-btn:hover {
    background-color: #d32f2f;
}

/* Nutrition Card Styling (Unchanged) */
.nutrition-card {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    margin-top: 30px; 
}
.nutrition-card h2 {
    font-size: 1.4em;
    border-bottom: 2px solid #2e7d32;
    padding-bottom: 5px;
    margin-bottom: 15px;
    color: #2e7d32;
}
.nutrition-card p {
    line-height: 1.4;
    font-size: 0.95em;
    white-space: pre-wrap; 
}

/* NEW: Style for the small Buy button embedded next to the ingredient */
.buy-ingredient-btn {
    display: inline-block;
    background-color: #34d399; /* A distinct green */
    color: white !important;
    font-size: 0.7em;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 4px;
    transition: background-color 0.2s;
    text-decoration: none !important;
    white-space: nowrap; /* Prevents button text from wrapping */
}
.buy-ingredient-btn:hover {
    background-color: #10b981; /* Darker green on hover */
    transform: none; /* Override general button effects */
}

/* ----------------------------------------------------------------- */
/* --- SOCIAL SHARE BUTTONS --- */
/* ----------------------------------------------------------------- */
.social-share-container {
    display: flex;
    align-items: center; /* Ensures vertical alignment */
    justify-content: center;
    gap: 15px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.social-share-buttons {
    display: flex;
    gap: 10px;
    align-items: center;
}

.social-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: white;
    text-decoration: none;
    transition: transform 0.2s, opacity 0.2s;
    font-size: 20px;
}

.social-btn:hover {
    transform: translateY(-2px);
    opacity: 0.9;
    text-decoration: none;
}

.social-btn.facebook {
    background-color: #1877F2;
}

.social-btn.twitter {
    background-color: #000000;
}

.social-btn.linkedin {
    background-color: #0A66C2;
}

.social-btn.pinterest {
    background-color: #E60023;
}

.social-btn.whatsapp {
    background-color: #25D366;
}

.social-btn.instagram {
    background: linear-gradient(45deg, #F58529, #DD2A7B, #8134AF, #515BD4);
}

/* Fix print button alignment and remove old container styles */
.print-button {
    background-color: #555;
    margin-top: 0; /* Remove any top margin for proper alignment */
}
.print-button:hover {
    background-color: #333;
}

/* Remove old print-button-container styles if they exist */
.print-button-container {
    text-align: right;
    margin-bottom: 20px;
}

/* --- Recipe Index Filter/Search Bar (Unchanged) --- */
.filter-bar {
    max-width: 1200px;
    margin: 0 auto 30px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 15px 20px;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    gap: 10px; 
}
.filter-bar input[type="text"], .filter-bar select {
    font-size: 1em; 
}
.filter-bar button {
    margin-top: 0; 
}
.filter-bar input[type="text"] {
    flex-grow: 1; 
}


/* ----------------------------------------------------------------- */
/* --- LOADING INDICATOR (Spinner) STYLES (Unchanged) --- */
/* ----------------------------------------------------------------- */
.loading-indicator {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-height: 100px; 
    margin: 20px 0;
}
.spinner {
    border: 4px solid #f3f3f3; 
    border-top: 4px solid #4CAF50; 
    border-radius: 50%;
    width: 30px;
    height: 30px;
    animation: spin 1s linear infinite;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ----------------------------------------------------------------- */
/* --- PRINT OPTIONS MODAL STYLES (Unchanged) --- */
/* ----------------------------------------------------------------- */
.print-modal {
    display: none; 
    position: fixed; 
    z-index: 1000; 
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto; 
    background-color: rgba(0,0,0,0.4); 
    justify-content: center;
    align-items: center;
}

.print-modal-content {
    background-color: #fefefe;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    width: 90%;
    max-width: 450px;
    animation: slide-down 0.3s ease-out;
}

.print-modal-content h2 {
    color: #2e7d32;
    margin-top: 0;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}

.print-modal-content label {
    display: block;
    margin-bottom: 10px;
    font-size: 1.1em;
    font-weight: normal;
    color: #333;
    cursor: pointer;
}

.print-modal-content input[type="checkbox"] {
    margin-right: 10px;
    transform: scale(1.1);
}

.modal-actions {
    text-align: right;
    padding-top: 20px;
    border-top: 1px solid #eee;
    margin-top: 20px;
}
.modal-actions button {
    margin-left: 10px;
    margin-top: 0;
}
.print-cancel-btn {
    background-color: #ccc;
    color: #333;
}
.print-cancel-btn:hover {
    background-color: #bbb;
}

@keyframes slide-down {
    from { transform: translateY(-50px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}


/* ----------------------------------------------------------------- */
/* --- EMBEDDED GDPR CONSENT STYLES --- */
/* ----------------------------------------------------------------- */
#gdpr-banner-container {
    position: fixed; 
    left: 0;
    bottom: 0; 
    width: 100%;
    background-color: #fff;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
    z-index: 10000; 
    margin: 0; 
    box-sizing: border-box;
    padding: 15px 5%; 
    text-align: center; 
}

.gdpr-content {
    display: block; 
    text-align: center; 
    padding: 0;
    max-width: 800px; 
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}

.gdpr-text {
    font-size: 0.9em;
    line-height: 1.4;
    margin-bottom: 10px; 
    text-align: center; 
    width: 100%;
    display: block; 
}

.gdpr-actions {
    text-align: center; 
    width: 100%;
    margin-top: 5px;
}

.gdpr-accept-btn {
    background-color: #4CAF50;
    margin-top: 0;
    padding: 10px 20px;
    font-size: 0.9em;
    white-space: nowrap;
    display: inline-block; 
}
.gdpr-accept-btn:hover {
    background-color: #388e3c;
}

.gdpr-hidden {
    display: none !important;
}


/* ----------------------------------------------------------------- */
/* --- PRINT MEDIA QUERIES (CSS Hiding Logic) (Unchanged) --- */
/* ----------------------------------------------------------------- */

@media print {
    /* 1. Hide NON-PRINT ELEMENTS GLOBALLY */
    .main-header, 
    footer, 
    .social-share-container,
    .print-modal,
    #gdpr-banner-container {
        display: none !important;
    }
    
    /* Force main content area to take full width and remove shadows/margins */
    .recipe-detail {
        box-shadow: none !important;
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        display: block !important; 
    }
    
    /* Ensure ingredients and instructions stack nicely for printing */
    .recipe-body {
        display: block !important;
    }
    .ingredients-section {
        border-right: none !important;
        padding-right: 0 !important;
        width: 100% !important;
        float: none !important;
        margin-bottom: 20px;
    }
    .instructions-section {
        width: 100% !important;
    }

    /* 2. Hide specific sections based on JS-toggled classes */
    .print-hide-title #print-title-element,
    .print-hide-title .metadata {
        display: none !important;
    }
    .print-hide-image #print-image-element {
        display: none !important;
    }
    .print-hide-desc #print-desc-element {
        display: none !important;
    }
    .print-hide-nutrition #print-nutrition-card {
        display: none !important;
    }
    .print-hide-admin .admin-tools {
        display: none !important;
    }
}


/* --- Media Queries for Responsiveness (Unchanged) --- */

/* Tablet and below */
@media (max-width: 950px) {
    .main-header {
        flex-direction: column;
        text-align: center;
        /* NEW: Account for the smaller scrolled height in media query */
        height: auto !important;
        min-height: 60px;
    }
    nav ul {
        margin-top: 10px;
        flex-wrap: wrap;
        justify-content: center;
    }
    nav li {
        margin: 5px 10px;
    }
    .content-page, .recipe-detail {
        margin: 20px 5%;
        padding: 15px;
    }
    .recipe-body {
        flex-direction: column; 
    }
    .ingredients-section {
        border-right: none;
        padding-right: 0;
        border-bottom: 1px solid #eee;
        padding-bottom: 20px;
        margin-bottom: 20px;
    }
    .filter-bar {
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .filter-bar input[type="text"], .filter-bar select, .filter-bar button {
        width: 100%;
        box-sizing: border-box;
    }
    .filter-bar input[type="text"] {
        order: -1; 
    }
    /* FIX: Prevents large logo from breaking navigation on tablet */
    .logo {
        gap: 10px;
        font-size: 1.5em;
        padding-top: 10px;
        padding-bottom: 10px;
        height: 60px;
    }
    .logo-icon {
        height: 40px;
    }
    .main-header.scrolled {
        height: 60px;
    }
    .main-header.scrolled .logo-icon {
        height: 30px;
    }
    
    /* Aesthetic Fix for Photo on Tablet */
    .owner-bio {
        float: none; /* Turn off float */
        margin: 0 auto 15px auto; /* Center the element */
        width: 150px; 
    }
}

/* Phone screens */
@media (max-width: 600px) {
    .hero-content h1 {
        font-size: 1.8em;
    }
    .hero {
        height: 300px;
    }
    .search-container {
        flex-direction: column;
        max-width: 90%;
    }
    .search-container input, .search-container button {
        border-radius: 5px;
        margin-bottom: 10px;
    }
    .recipe-card {
        max-width: 100%;
    }
    .metadata {
        flex-direction: column;
        gap: 10px;
    }
    /* FIX: Ensure the header stacks correctly on mobile */
    .main-header {
        height: auto;
        min-height: 50px;
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .logo {
        height: 50px;
        font-size: 1.4em;
    }
    .logo-icon {
        height: 35px;
    }
    
    /* Social buttons stack on mobile */
    .social-share-container {
        flex-direction: column;
        gap: 10px;
    }
    
    .social-share-buttons {
        order: -1; /* Put social buttons above print button on mobile */
    }
    
    /* Aesthetic Fix for Photo on Phone */
    .owner-bio {
        float: none; /* Ensure float is off */
        margin: 0 auto 15px auto; /* Keep it centered */
        width: 120px; /* Maybe slightly smaller for phone screens */
    }
    .owner-photo {
        height: 120px;
    }
}