/* General Body & Container Styling */
body {
    font-family: 'Lexend', sans-serif;
    /* Main text font */
    line-height: 1.6;
    margin: 0;
    padding: 0;
    background-color: #132741;
    /* Light cream background for a warm, rustic feel */
    color: #d4eaf7;
    /* Default text color */
    display: flex;
    justify-content: center;
    min-height: 100vh;
    /* Ensure it takes full viewport height */
    box-sizing: border-box;
    /* Include padding/border in element's total width/height */
}


.container {
    width: 90%;
    max-width: 960px;
    /* Max width for content */
    margin: 20px auto;
    /* Center the container with some top/bottom margin */
    background-color: #00346e;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
    /* Subtle shadow for depth */
    border-radius: 8px;
    overflow: hidden;
    /* Ensures child elements like images with border-radius are clipped */
    display: flex;
    flex-direction: column;
    /* Stacks header, main, footer vertically */
}

/* Header Styling */
header {
    text-align: center;
    padding: 20px;
    background-color: #000000;
    /* Slightly darker cream for header */
    border-bottom: 1px solid #d4eaf7;
}

.logo {
    max-width: 200px;
    /* Adjust as needed for your logo size */
    height: auto;
}

/* Headings and Text */
h1 {
    font-family: 'Patua One', cursive;
    /* Header font */
    color: #92c7e6;
    /* Rustic red/brown for headers */
    text-align: center;
    margin-bottom: 20px;
    font-size: 2.2em;
    /* Larger for main header */
}

p {
    margin-bottom: 1em;
    font-size: 1.1em;
    text-align: center;
}

a:link,
a:visited,
a:hover,
a:active {
    color: #5adfdf;
    /* A very pale sky blue */
}

.message {
    padding: 0 20px;
    /* Padding for the main message text */
}

/* Contact Info */
.contact-info {
    text-align: center;
    margin: 30px auto;
    padding: 20px;
    background-color: #61a2ce;
    /* Light green for contact, hints at fresh ingredients */
    border-radius: 5px;
    max-width: 400px;
}

.contact-info p {
    margin: 5px 0;
    font-size: 1.05em;
}

.contact-info a {
    color: #922b2b;
    /* Darker red for links */
    text-decoration: none;
    font-weight: bold;
}

.contact-info a:hover {
    text-decoration: underline;
    color: #a84b3d;
}

/* Common Image Styling */
.hero-image {
    max-width: 100%;
    height: auto;
    display: block;
    /* Removes extra space below image */
    margin: 0 auto;
    /* Center image */
    border-radius: 0 0 8px 8px;
    /* Rounded bottom corners if it's the last element */
}

.hero-image-superimposed {
    /* Specific to superimposed layout, ensures it covers parent */
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    /* Ensures image covers the area without distortion */
    border-radius: 0 0 8px 8px;
}

/* Footer Styling */
footer {
    text-align: center;
    padding: 20px;
    margin-top: auto;
    /* Pushes footer to the bottom of the container */
    background-color: #002341;
    border-top: 1px solid #d4eaf7;
    color: #d4eaf7;
    font-size: 0.9em;
}

/* --- LAYOUT OPTION 1: Hero picture below text (from index_below_hero.html) --- */
.content-below-hero {
    padding: 20px;
    text-align: center;
}

.content-below-hero h1 {
    margin-top: 0;
    /* Remove default top margin if it's the first element */
}


/* --- LAYOUT OPTION 2: Text superimposed onto hero picture (from index_superimposed_hero.html) --- */
.content-superimposed-hero {
    position: relative;
    /* Allows absolute positioning of children */
    padding: 0;
    /* Remove padding from main to allow image to span full width */
}

.hero-section {
    position: relative;
    /* Establishes positioning context for the overlay */
    width: 100%;
    overflow: hidden;
    /* Ensures relative content doesn't overflow */
}

.hero-text-overlay {
    position: absolute;
    top: 0;
    /* Position at the top of the image */
    left: 0;
    width: 100%;
    padding: 20px;
    /* Padding inside the text box */
    box-sizing: border-box;
    /* Include padding in width calculation */
    text-align: center;
    /* --- CUSTOMIZATION FOR OVERLAY TEXT READABILITY --- */
    /* 1. Background Color & Opacity of the rectangle */
    /* Use RGBA for color with an alpha channel (opacity) */
    /* Examples: */
    /*   White with 75% opacity: rgba(255, 255, 255, 0.75); */
    /*   Semi-transparent dark: rgba(0, 0, 0, 0.6); */
    /*   Semi-transparent light green (matching contact info): rgba(230, 240, 230, 0.85); */
    background-color: rgba(99, 138, 211, 0.6);
    /* Current: White with 85% opacity */
    /* 2. Text Color inside the overlay */
    /* Choose a color that contrasts well with the background-color above */
    /* Examples: */
    /*   Dark text for light background: #333; */
    /*   Light text for dark background: #fdfdfd; */
    color: #333;
    /* Current: Dark text */
    /* Optional: Add some backdrop blur for a frosted glass effect (modern browsers support) */
    /* backdrop-filter: blur(5px); */
    /* -webkit-backdrop-filter: blur(5px); /* For Safari */
    /* Optional: If you want the overlay to be a distinct box and not span full width */
    /* max-width: 80%; */
    /* left: 50%; */
    /* transform: translateX(-50%); */
}

.hero-text-overlay h1 {
    color: #a84b3d;
    /* Specific color for header within the overlay */
    margin-top: 0;
}

.hero-text-overlay p {
    color: inherit;
    /* Inherits text color from the .hero-text-overlay rule */
    margin-bottom: 1em;
}

.hero-text-overlay .contact-info {
    /* Adjust contact info specific to overlay if needed */
    background-color: rgba(230, 240, 230, 0.2);
    /* Slightly more opaque for contact info within overlay */
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .container {
        width: 95%;
        margin: 10px auto;
    }

    h1 {
        font-size: 1.8em;
    }

    p {
        font-size: 1em;
    }

    .logo {
        max-width: 150px;
    }

    .hero-text-overlay {
        padding: 15px;
    }
}

@media (max-width: 480px) {
    h1 {
        font-size: 1.5em;
    }

    .contact-info {
        max-width: 90%;
        padding: 15px;
    }

    .hero-text-overlay {
        padding: 10px;
    }
}