/* Google Font Import - Place at the very top */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Montserrat:wght@400;700&display=swap');

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

body {
    font-family: 'Montserrat', sans-serif; /* Using Montserrat for body text for better readability */
    font-weight: 400;
    font-style: normal;
    background-color: #f8f5f0; /* Softer, more neutral background */
    margin: 0;
    padding: 0;
    color: #333; /* Default text color for better contrast */
    line-height: 1.6; /* Improved default line height */
}

header {
    text-align: center;
    padding: 30px 20px; /* Increased padding */
    background-color: #6a8c7a; /* A sophisticated natural green */
    border-bottom: 4px solid #526d5f; /* Slightly darker accent */
    margin: 0 0 30px 0; /* Remove top/bottom margin, add bottom margin for spacing */
}

header h1 {
    font-family: "Bebas Neue", sans-serif; /* Keep your chosen display font */
    font-size: 4em; /* Adjusted size */
    color: #ffffff; /* White for contrast */
    text-transform: uppercase;
    letter-spacing: 1.5px; /* Subtle letter spacing */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3), /* More refined shadow */
                 0 0 5px rgba(0,0,0,0.1); /* Slight outer glow */
    line-height: 1.1;
    margin: 0; /* Remove default h1 margin */
}

/* Navigation Menu Styling */
nav {
    background-color: #e9e4d8; /* Light, neutral background for nav */
    padding: 12px 0;
    text-align: center;
    border-bottom: 1px solid #d1cbbd;
    position: sticky; /* Make nav sticky */
    top: 0;           /* Stick to the top */
    z-index: 1000;    /* Ensure it's above other content */
    margin: 0 0 30px 0; /* Remove top margin, add bottom margin */
}

nav a {
    text-decoration: none;
    font-family: 'Montserrat', sans-serif; /* Consistent font */
    font-weight: bold;
    color: #526d5f; /* Dark green text, matching header accent */
    background-color: transparent;
    padding: 10px 18px; /* Adjusted padding */
    margin: 0 8px; /* Spacing between links */
    border-radius: 20px; /* Pill-shaped buttons */
    box-shadow: none;
    display: inline-block;
    transition: color 0.3s ease, background-color 0.3s ease, transform 0.2s ease; /* Added transform */
}

nav a:hover, nav a:focus { /* Added :focus for accessibility */
    color: #ffffff;
    background-color: #6a8c7a; /* Main header green on hover/focus */
    transform: translateY(-2px); /* Slight lift effect */
}
/* You can add an .active class in your HTML to the current page's link */
nav a.active {
    color: #ffffff;
    background-color: #526d5f; /* Darker green for active link */
    font-weight: bold;
}


/* Main Content Area */
main {
    padding: 0 20px 20px 20px; /* Remove top padding as sections have margins */
    max-width: 1200px; /* Max width for main content for better readability on large screens */
    margin: 0 auto; /* Center main content */
}

/* Highlight Box section - for intro text */
section.highlight-box {
    background-color: #ffffff; /* Clean white background */
    color: #444; /* Darker grey text */
    border: 1px solid #d1cbbd; /* Subtle border */
    border-left: 5px solid #6a8c7a; /* Accent border on the left */
    padding: 20px 25px;
    margin: 0 auto 40px auto; /* Centered, with bottom margin */
    width: 85%; /* Slightly adjusted width */
    text-align: left; /* Keep text left-aligned for readability */
    font-size: 1.1em; /* Good readable size */
    line-height: 1.7;
    border-radius: 0 8px 8px 0; /* Rounded corners on one side */
    box-shadow: 2px 2px 8px rgba(0,0,0,0.05);
}
/* Assuming you add an h2 inside highlight-box for a sub-heading */
section.highlight-box h2 {
    font-family: "Bebas Neue", sans-serif;
    font-size: 2em;
    color: #526d5f;
    margin-bottom: 10px;
}


/* Image Grid section */
section.image-grid {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    gap: 20px; /* Consistent gap */
    padding: 0; /* Remove padding if items have margins or gap is sufficient */
    margin: 0 auto 40px auto; /* Centered, with bottom margin */
}

section.image-grid img {
    max-width: 100%; /* Essential for responsiveness */
    height: 270px; /* Slightly taller images */
    border-radius: 12px; /* Softer radius */
    /* Adjust flex-basis with calc to account for gap */
    flex-basis: calc(33.333% - 20px); /* Aim for 3 items on wider screens */
    flex-grow: 1; /* Allow items to grow to fill space if fewer than 3 */
    object-fit: cover; /* Important for fixed height */
    box-shadow: 0 5px 15px rgba(0,0,0,0.1); /* Enhanced shadow */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 3px solid white; /* Optional: white border around images */
}

section.image-grid img.focus-runner {
  object-position: center 35%;
}

section.image-grid img:hover {
    transform: scale(1.05); /* Slightly more pronounced hover effect */
    box-shadow: 0 8px 20px rgba(0,0,0,0.2);
}

/* Hobby-related content section (was #cooking-adventures) */
/* Assuming you might rename this ID in your HTML, or keep it if "cooking" is the hobby */
section#cooking-adventures { /* Or a more generic ID like #additional-content */
    background-color: #e9e4d8; /* Match nav background for thematic consistency */
    padding: 25px;
    margin: 0 auto 40px auto; /* Centered, with bottom margin */
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    line-height: 1.6;
    width: 85%; /* Consistent width with highlight-box */
}

section#cooking-adventures h2 {
    font-family: "Bebas Neue", sans-serif;
    color: #6a8c7a; /* Theme green */
    font-size: 2.2em;
    text-align: center;
    margin-bottom: 15px;
}

/* Footer Styling */
footer {
    text-align: center;
    background-color: #333; /* Dark footer */
    color: #e9e4d8; /* Light text for contrast */
    padding: 25px 15px; /* Increased padding */
    margin-top: 40px;
    font-size: 0.9em;
    line-height: 1.5;
}
footer p {
    margin-bottom: 8px;
}

footer .ai-citation {
    font-size: 0.8em;
    font-style: italic;
    color: #aaa;
}

                                                  /* --- Responsive Adjustments --- */

                                          /* Tablet View (e.g., screens up to 768px wide) */
@media (max-width: 768px) {
    header h1 {
        font-size: 3em;
    }

    nav {
        padding: 10px 0;
    }
    nav a {
        padding: 8px 12px;
        margin: 0 4px;
        font-size: 0.95em; 
    }

    main {
        padding: 0 15px 15px 15px;
    }

    section.highlight-box,
    section#cooking-adventures {
        width: 90%; 
        padding: 20px;
    }
    section.highlight-box h2 {
        font-size: 1.8em;
    }

    section.image-grid {
        gap: 15px;
    }
    section.image-grid img {
        flex-basis: calc(50% - 15px); 
        height: 220px; 
    }

    section#cooking-adventures h2 {
        font-size: 2em;
    }

    footer {
        font-size: 0.85em;
    }
}

                                              /* Phone View (e.g., screens up to 576px wide) */
@media (max-width: 576px) {
    body {
        line-height: 1.5; 
    }
    header {
        padding: 20px 15px;
    }
    header h1 {
        font-size: 2.2em;
        letter-spacing: 1px;
    }

    nav { 
        padding-bottom: 5px; 
    }
    nav a { 
        padding: 8px 10px;
        margin: 5px; 
        font-size: 0.9em;
    }

    section.highlight-box,
    section#cooking-adventures {
        width: 95%; 
        padding: 15px;
        font-size: 1em;
        margin-bottom: 30px;
    }
    section.highlight-box h2 {
        font-size: 1.6em;
    }

    main {
        padding: 0 10px 10px 10px;
    }

    section.image-grid {
        gap: 10px;
    }
    section.image-grid img {
        flex-basis: calc(50% - 10px); 
        height: 180px; 
    }
    

    section#cooking-adventures h2 {
        font-size: 1.8em;
    }

    footer {
        font-size: 0.8em;
        padding: 20px 10px;
    }
}

                      /* Optional: Stack nav links on very small screens if they still look crowded */
@media (max-width: 420px) {
    nav a {
        display: block;
        width: calc(100% - 30px); 
        margin: 8px auto; 
        text-align: center;
    }
    nav {
        padding-bottom: 10px;
    }
    section.image-grid img {
        flex-basis: 100%; 
        height: 200px; 
    }
}