/* General Body Styling */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    color: #333;
    background-color: #f5f5f5; /* Added a default light background color */
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center center;
    /* Important: If specific page background images are applied to the body via IDs (e.g., body#home-page),
       they will override the background-image property here.
       Other background properties (size, repeat, attachment, position) will apply to those images. */
}

/* Header Styles */
header {
    background-color: white; /* Changed from #0277bd to white as per your code */
    color: #039be5; /* Changed from white to #039be5 as per your code */
    padding: 20px 40px;
    text-align: center;
    display: flex; /* Essential for aligning logos */
    align-items: center; /* Centers items vertically in the header */
    justify-content: space-between; /* Pushes logos to the far ends */
    min-height: 300px; /* Adjusted to 300px as per your code */
    position: relative; /* Essential for absolute positioning of children */
    z-index: 100;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);

    /* Header's own background image */
    background-image: url('/Images and Video/IMG_Man in Boat.png'); /* Updated image path as per your code */
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-blend-mode: multiply; /* Blends image with background-color */
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5); /* Add text shadow for readability on background image */
}

/* Styles for the left logo image (Laguna Reserve Oysters Logo) */
.header-img {
    width: 250px; /* Increased size for desktop */
    height: 250px; /* Increased size for desktop */
    flex-shrink: 0; /* Prevents image from shrinking */
    margin: 0 10px; /* Add some spacing around images */
    object-fit: contain; /* Ensures the entire logo is visible within its space */
    display: block; /* Ensure it behaves as a block element within the flex context */
}

/* Styles for the right logo's clickable wrapper (Food Safety Partnership) */
.header-img-link { /* This applies to the <a> tag wrapping the Food Safety Partnership image */
    width: 250px; /* Adjusted to match .header-img */
    height: 150px; /* Adjusted to match .header-img */
    flex-shrink: 0;
    margin: 0 10px; /* Keep consistent margin on both sides for flexbox */
    display: flex; /* Make the link a flex container to center its image and text */
    flex-direction: column; /* Stack image and text vertically */
    justify-content: center; /* Center content horizontally within the link */
    align-items: center; /* Center content vertically within the link */
    text-decoration: none; /* Remove underline from the link itself */
}

.header-img-link img {
    width: 100%;
    height: 100%;
}

.image-link-text { /* New style for the "Click Here" text */
    color: white; /* White text for readability on the header background */
    font-size: 0.9em; /* Adjust font size as needed */
    font-weight: bold;
    margin-top: 5px; /* Space between image and text */
    text-shadow: 1px 1px 2px rgba(0,0,0,0.7); /* Add shadow for readability */
    white-space: nowrap; /* Prevent text from wrapping */
}


/* Styles for the main title and tagline */
header h1 {
    margin: 0;
    line-height: 1.2; /* Adjust line height for better appearance */
    font-size: 2.5em; /* Default desktop size for h1 in header */
}
header p {
    margin: 0; /* Remove default paragraph margin within header */
    line-height: 1.2;
    font-size: 1.2em; /* Default desktop size for p in header */
}

/* This div wraps h1 and p, and is absolutely positioned */
.header-text-container {
    position: absolute; /* Take it out of the normal flex flow */
    top: 20px; /* Adjust this value to move it closer to the top of the header */
    left: 50%;
    transform: translateX(-50%); /* Center horizontally */
    width: 60%; /* Give it a width to control text wrapping */
    max-width: 500px; /* Optional: limit max width for readability */
    text-align: center; /* Ensure text inside is centered */
    color: white; /* Changed color to white */
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5); /* Added text shadow for readability */
    z-index: 101; /* Ensure it's above other header content if needed */
}

.header-slogan {
    font-weight: bold; /* Make the slogan bolder */
}


/* Navigation Styles */
nav {
    background-color: #039be5;
    padding: 10px 40px;
    text-align: center;
    position: sticky; /* Makes nav stick to top on scroll */
    top: 0; /* Requires 'top' property for sticky positioning */
    width: 100%; /* Ensure it spans full width when sticky */
    z-index: 90; /* Slightly lower z-index than header so header overlaps if needed */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Optional: add a subtle shadow below nav */
}

nav a {
    color: white;
    margin: 0 15px;
    text-decoration: none;
    font-weight: bold;
    padding: 5px 10px;
    transition: background-color 0.3s ease;
    border-radius: 5px;
}

nav a:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

/* Section Styles */
.section {
    padding: 60px 40px;
    background-color: #039be555; /* Changed to solid blue matching nav bar */
    margin: 20px auto;
    max-width: 1000px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    color: white; /* White text for readability */
    text-align: center;
}

.section h2 {
    font-size: 3.2em; /* Increased for larger font */
    margin-bottom: 20px;
}
.section p {
    font-size: 1.8em; /* Increased for larger font */
    line-height: 1.6;
    font-weight: bold; /* Made text bolder */
}
.section ul {
    font-size: 1.8em; /* Increased for larger font */
    line-height: 1.6; /* Ensure consistent line height */
    font-weight: bold; /* Made text bolder */
    list-style-position: inside; /* Ensures bullets are inside the text flow */
    padding-left: 0;
    margin-bottom: 20px;
}


/* Gallery Styles */
.gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    padding: 40px;
    background-color: #039be5; /* Changed to solid blue matching nav bar */
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.gallery img,
.gallery video {
    width: 300px;
    height: auto; /* Ensures aspect ratio is maintained */
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    object-fit: cover;
}

/* Footer Styles */
footer {
    background-color: #0277bd;
    color: white;
    text-align: center;
    padding: 20px;
}

/* Styles for images within the sustainability section */
.sustainability-images {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin-top: 30px;
}

.sustainability-images img {
    max-width: 300px;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

#sustainability {
    background-color: #039be595;
}

/* --- Responsive Adjustments for Smaller Screens --- */

/* For screens up to 768px wide (tablets and smaller desktops) */
@media (max-width: 768px) {
    header {
        min-height: 180px; /* Reduced min-height for tablets */
        padding: 15px 20px;
    }

    /* Styles for the left logo image (Laguna Reserve Oysters Logo) on tablets */
    .header-img {
        width: 150px; /* Adjusted size for tablets */
        height: 150px; /* Adjusted size for tablets */
        margin: 0 5px;
    }

    /* Styles for the right logo's clickable wrapper (Food Safety Partnership) on tablets */
    .header-img-link {
        width: 150px; /* Adjusted to match .header-img */
        height: 150px; /* Adjusted to match .header-img */
        margin: 0 5px;
    }

    .header-text-container {
        top: 15px; /* Adjust top for smaller screens */
        width: 80%; /* Allow it to take more width on smaller screens */
    }

    header h1 {
        font-size: 1.8em; /* Smaller header title for tablets */
    }
    header p {
        font-size: 0.9em; /* Adjusted for better fit */
    }

    nav {
        padding: 10px 15px;
        position: static; /* Often better to remove sticky on mobile if height is an issue */
        display: flex; /* Ensure flexbox for nav links */
        flex-wrap: wrap; /* Allow links to wrap to next line */
        justify-content: center;
    }

    nav a {
        margin: 5px 8px; /* Add some vertical margin, reduce horizontal */
        padding: 8px 12px; /* Increase padding for touch targets */
        font-size: 0.9em;
        flex-grow: 1; /* Allow links to grow to fill space */
        flex-basis: auto; /* Default flex basis */
    }

    .section {
        padding: 30px 20px;
        margin: 15px auto;
    }
    .section h2 {
        font-size: 2.4em; /* Adjusted for larger font */
    }
    .section p, .section ul {
        font-size: 1.5em; /* Adjusted for larger font */
    }

    .gallery,
    .sustainability-images {
        flex-direction: column; /* Stack images vertically */
        gap: 10px;
        padding: 20px;
    }

    .gallery img, .gallery video,
    .sustainability-images img {
        width: 100%; /* Make images full width */
        max-width: none;
        height: auto;
    }

    footer {
        padding: 15px 20px;
        font-size: 0.85em;
    }
}

/* For screens up to 480px wide (most phones) */
@media (max-width: 480px) {
    header {
        min-height: 120px; /* Even smaller min-height for phones */
        padding: 10px 15px;
    }

    /* Styles for the left logo image (Laguna Reserve Oysters Logo) on phones */
    .header-img {
        width: 110px; /* Adjusted size for phones */
        height: 110px; /* Adjusted size for phones */
        margin: 0 3px;
    }

    /* Styles for the right logo's clickable wrapper (Food Safety Partnership) on phones */
    .header-img-link {
        width: 110px; /* Adjusted to match .header-img */
        height: 110px; /* Adjusted to match .header-img */
        margin: 0 3px;
    }

    .header-text-container {
        top: 10px; /* Further adjust top for very small screens */
        width: 90%; /* Allow it to take even more width on very small screens */
    }

    header h1 {
        font-size: 1.3em; /* Further reduce title size for phones */
    }
    header p {
        font-size: 0.8em; /* Further reduce paragraph size for phones */
    }

    nav {
        margin: 3px 5px; /* Tighter spacing for phone nav links */
        padding: 6px 10px;
        font-size: 0.8em;
    }

    .section {
        padding: 20px 15px;
        margin: 10px auto;
    }
    .section h2 {
        font-size: 2.2em; /* Adjusted for larger font */
    }
    .section p, .section ul {
        font-size: 1.4em; /* Adjusted for larger font */
    }
}