/* Reset default margins and padding */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Earth-toned background gradient transitioning downwards */
body {
    display: flex;
    flex-direction: column;
    min-height: 85vh;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: linear-gradient(180deg, #3a5043 0%, #8f9779 50%, #dcd1be 100%);
    background-attachment: fixed;
    color: #2c2520; 
}

/* Header anchoring the dark forest green theme */
header {
    width: 100%;
    max-width: 100vw; /* Safety lock: prevents header from ever growing wider than the screen viewport */
    background-color: #1e352f;
    color: #f4eae1; 
    padding: 5px 20px 0 20px; /* Safe 20px side margins so text never clips edges */
    text-align: center;
    border-bottom: 3px solid #cca43b; 
    box-sizing: border-box; /* Forces padding to stay INSIDE the 100% width rule */
}

header h1 {
    font-size: 2.2rem;
    letter-spacing: 1px;
    margin-top: 5px;     /* Small buffer to keep text from touching the exact ceiling */
    margin-bottom: 15px; /* Clean spacing before the image banner begins */
}

/* New responsive container for your header image */
.header-image-container {
    width: 100%;
    max-height: auto; 
    overflow: hidden;
    display: block;
    margin-top: 5px;
    
    /* Pulls image out to stretch clean if needed, without breaking boundaries */
    margin-left: -20px; 
    margin-right: -20px;
    width: calc(100% + 40px); 
}

.header-image {
    width: 100%;
    height: auto;
    object-fit: cover; /* Crops the image elegantly to fit the frame regardless of screen width */
    display: block;
}

/* Warm sienna horizontal navigation menu bar */
nav {
    width: 100%;
    max-width: 100vw; /* Safety lock */
    background-color: #a0522d;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
}

nav ul {
    list-style: none;
    display: flex;
    justify-content: center;
    flex-wrap: wrap; /* Allows links to safely wrap to a 2nd line instead of breaking off screen */
    padding: 0 10px;
}

nav ul li a {
    display: block;
    color: #f4eae1;
    padding: 15px 25px;
    text-decoration: none;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

/* Warm ochre gold on hover */
nav ul li a:hover {
    background-color: #cca43b;
    color: #1e352f;
}

/* Sets up the horizontal bar layout without breaking your header green colors */
.i20-nav-list {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
}

/* Flexbox push: Drives the Facebook icon and all following items to the far right edge */
.i20-social-item:first-of-type {
    margin-left: auto;
}

/* Standardizes spacing buffers around the clickable link targets */
.i20-social-item a {
    display: flex;
    align-items: center;
    padding: 10px 12px;
}

/* Explicit image sizing and border shapes for the icons */
.i20-menu-icon {
    width: 24px;
    height: 24px;
    object-fit: contain;
    border-radius: 50%; /* Ensures a perfectly sharp, clean circle look */
    transition: transform 0.2s ease-in-out;
}

/* Subtle mouse hover response for food park visitors */
.i20-menu-icon:hover {
    transform: scale(1.15);
}

/* Main website body container */
main {
    flex: 1;
    width: 90%;
    max-width: 1200px;
    margin: 40px auto;
    padding: 40px;
    background-color: #fcf8f2; 
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

/* This forces a safe margin buffer on desktop screens */
    box-sizing: border-box; 
}

/* Add this media query to protect smaller laptop and tablet screens */
@media (max-width: 1200px) {
    main {
        width: 92%;          /* Guarantees a clean 4% safety margin on each side */
        padding: 30px 20px;  /* Slightly tighter internal padding for smaller screens */
    }
}

main h2 {
    color: #1e352f; 
    margin-bottom: 15px;
    font-size: 1.8rem;
}

main p {
    line-height: 1.6;
    font-size: 1.1rem;
}

/* Container styling for the future plans section */
.future-plans {
    margin-top: 30px;
    padding: 20px;
    background-color: #ffffff; /* Clean white block to make text pop */
    border-radius: 6px;
    border-left: 5px solid #a0522d; /* Terracotta vertical accent bar */
}

.future-plans h3 {
    color: #1e352f; /* Dark forest green heading */
    font-size: 1.5rem;
    margin-bottom: 10px;
}

.future-plans p {
    margin-bottom: 20px;
    font-size: 1rem;
    color: #4a423a; /* Dark coffee text tone */
}

/* Custom list styling */
.amenities-list {
    list-style: none; /* Removes standard black bullet points */
    padding-left: 0;
}

.amenities-list li {
    font-size: 1.05rem;
    line-height: 1.6;
    margin-bottom: 12px;
    position: relative;
    padding-left: 30px; /* Leaves space for the custom icon */
    color: #2c2520;
}

/* Generates a custom earth-toned bullet/checkmark icon */
.amenities-list li::before {
    content: "✓"; 
    position: absolute;
    left: 5px;
    top: 2px;
    color: #3a5043; /* Moss green icon color */
    font-weight: bold;
    font-size: 1.1rem;
}

/* Accent highlight for the bold labels */
.amenities-list li strong {
    color: #a0522d; /* Terracotta accent text */
    font-weight: 600;
}

/* Dark forest green footer matching the header */
footer {
    width: 100%;
    background-color: #1e352f;
    color: #d7ccc8;
    text-align: center;
    padding: 20px;
    font-size: 0.9em;
    border-top: 3px solid #cca43b;
}