/* Global Styles */
:root {
    --primary-rust: #8B3A18;
    /* Adjusted for warmer rust tone */
    --secondary-blue: #AEC2D1;
    /* Muted blue-grey */
    --accent-lime: #D6E85C;
    /* Chartreuse/Lime */
    --text-dark: #1a1a1a;
    --text-light: #ffffff;
    --bg-white: #ffffff;

    --font-heading: 'Lora', serif;
    --font-body: 'Lato', sans-serif;
}

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

body {
    font-family: var(--font-body);
    color: var(--text-dark);
    line-height: 1.6;
    overflow-x: hidden;
}

/* Typography */
h1,
h2,
h3,
h4,
h5 {
    font-family: var(--font-heading);
    font-weight: 700;
}

a {
    text-decoration: none;
    color: inherit;
    transition: opacity 0.3s;
}

a:hover {
    opacity: 0.7;
}

/* Buttons */
.book-now-btn {
    padding: 10px 20px;
    background-color: var(--accent-lime);
    color: var(--text-dark);
    border-radius: 20px;
    font-weight: bold;
    font-size: 0.9rem;
    text-transform: uppercase;
    justify-self: end;
    /* Align to the right of the grid cell */
}

.btn-black {
    display: inline-block;
    padding: 12px 30px;
    background-color: black;
    color: white;
    border-radius: 30px;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 1px;
}

.btn-pill {
    display: inline-block;
    padding: 8px 16px;
    background-color: black;
    color: white;
    border-radius: 20px;
    font-size: 0.7rem;
    text-transform: uppercase;
    margin-top: auto;
    /* Push to bottom in flex container */
    align-self: flex-start;
}

.btn-black-large {
    display: inline-block;
    padding: 15px 40px;
    background-color: black;
    color: white;
    border-radius: 50px;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 2rem;
}

/* Header / Hero Section */
.hero-section {
    background-color: var(--primary-rust);
    color: var(--accent-lime);
    /* Yellow text for header */
    padding: 2rem;
    min-height: 90vh;
    display: flex;
    flex-direction: column;
    padding-top: 160px;
    /* Account for fixed header with larger logo */
}

.navbar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    /* Left (burger), Center (logo), Right (button) */
    align-items: center;
    padding: 1rem 2rem;
    /* Reduced padding for sticky */
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    background-color: var(--primary-rust);
    /* Initial background */
    transition: background-color 0.3s, padding 0.3s;
}

.navbar.sticky {
    padding: 0.5rem 2rem;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.menu-icon {
    display: flex;
    flex-direction: column;
    gap: 8px;
    /* Spacing between lines */
    cursor: pointer;
    justify-self: start;
    /* Align to the left of the grid cell */
    z-index: 1100;
    /* Above menu overlay */
}

/* Burger Animation */
.menu-icon.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 6px);
}

.menu-icon.active span:nth-child(2) {
    transform: rotate(-45deg) translate(5px, -6px);
}

.menu-icon span {
    transition: transform 0.3s;
}

/* Nav Links / Burger Menu */
.nav-links {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: var(--primary-rust);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    transform: translateY(-100%);
    transition: transform 0.4s ease-in-out;
    z-index: 1000;
    list-style: none;
}

.nav-links.active {
    transform: translateY(0);
}

.nav-links a {
    font-size: 1.5rem;
    font-family: var(--font-heading);
    color: var(--accent-lime);
}

/* Desktop Menu Tweaks (Hide burger, open links? Or keep burger as requested? User said "burger menu clicks open". Usually desktop has visible links. 
   Assuming keep burger for now as per "click to open" request, or maybe show links on desktop? 
   User didn't specify desktop vs mobile behavior difference. I'll stick to burger for now as requested, but often desktop shows links.
   Let's make links visible on desktop and hide burger for better UX? Or just keep burger everywhere to be safe with "the burger menu".
   "The burger menu if you click it open" implies it exists.
   However, common pattern is:
   Mobile: Burger -> Menu
   Desktop: Visible Links
   
   If I keep burger everywhere it's safest for "burger menu request".
   But I will add a potential media query to show links on desktop if that's preferred later.
   For now, I'll keep the burger functioning on all screens as requested.
*/

.menu-icon span {
    display: block;
    width: 40px;
    /* Width of the lines */
    height: 1px;
    /* Thickness of the lines */
    background-color: var(--accent-lime);
}

.logo {
    grid-column: 2;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.logo img {
    height: 90px;
    width: auto;
}

@media (min-width: 900px) {
    .logo img {
        height: 120px;
    }
}

.hero-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 2rem;
}

.hero-text h1 {
    font-size: 3.5rem;
    line-height: 1.1;
    margin-bottom: 2rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.hero-info {
    display: flex;
    justify-content: center;
    gap: 2rem;
    font-size: 0.9rem;
    color: white;
    font-family: var(--font-body);
    margin-bottom: 2rem;
}

.hero-image-container {
    width: 100%;
    max-width: 600px;
}

.hero-img.arched {
    width: 100%;
    height: 700px;
    object-fit: cover;
    border-top-left-radius: 300px;
    border-top-right-radius: 300px;
}

/* Desktop Hero Tweak: Side by side */
@media (min-width: 900px) {
    .hero-section {
        min-height: 100vh;
        /* Use full height on desktop for better centering */
        padding-top: 220px;
        /* Increased from default 100px to clear larger logo/menu */
        padding-bottom: 4rem;
    }

    .hero-content {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        /* Center items vertically */
        text-align: left;
        max-width: 1200px;
        margin: 0 auto;
        width: 100%;
        height: 100%;
        /* Ensure it takes available height */
    }

    .hero-text {
        display: flex;
        flex-direction: column;
        justify-content: center;
        /* Center text vertically */
        gap: 3rem;
        /* Add space between H1 and info */
        padding-bottom: 0;
        padding-top: 0;
    }

    .hero-text h1 {
        margin-left: 0;
        text-align: left;
        font-size: 4.5rem;
        margin-bottom: 0;
        /* Let gap handle spacing */
    }

    .hero-info {
        justify-content: flex-start;
        margin-bottom: 0;
    }
}

/* Intro Section */
.intro-section {
    background-color: var(--secondary-blue);
    padding: 4rem 2rem;
}

.intro-content {
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3rem;
}

.intro-image img {
    width: 100%;
    max-width: 300px;
    height: auto;
    object-fit: cover;
}

.intro-text {
    max-width: 500px;
}

.intro-text h2 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    color: var(--text-dark);
}

.intro-text p {
    margin-bottom: 2rem;
    font-size: 1rem;
}

@media (min-width: 768px) {
    .intro-content {
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 5rem;
    }
}

/* Services Section */
.services-section {
    background-color: var(--primary-rust);
    padding: 4rem 2rem;
}

.section-header {
    text-align: center;
    margin-bottom: 3rem;
    color: var(--accent-lime);
}

.section-header h3 {
    font-size: 2rem;
    font-style: italic;
}

.services-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.service-img-placeholder p {
    font-size: 0.85rem;
    line-height: 1.4;
    color: #555;
    margin-top: 0.5rem;
    /* Reduced from 1rem */
}

.service-card {
    background-color: white;
    padding: 2rem;
    min-height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    /* Remove space-between, rely on button margin-auto */
}

.service-card h4 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    /* Reduced from 1rem */
    min-height: auto;
    /* Removed fixed height to pull text up */
    display: flex;
    align-items: flex-start;
}

.service-card h5 {
    font-size: 1.5rem;
    margin-top: 1.5rem;
    margin-bottom: 1rem;
}

.service-card.image-card {
    padding: 0;
    overflow: hidden;
}

.service-card.image-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (min-width: 768px) {
    .services-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Banner Section */
.banner-section img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    display: block;
}

/* Gallery Section */
.gallery-section {
    background-color: var(--secondary-blue);
    padding: 4rem 2rem;
}

.gallery-container {
    display: flex;
    flex-direction: column;
    gap: 4rem;
    align-items: center;
}

.gallery-item {
    text-align: center;
    max-width: 600px;
    /* Increased from 400px */
}

.gallery-item img {
    width: 100%;
    height: 600px;
    /* Increased from 300px */
    object-fit: cover;
    margin-bottom: 1rem;
}

.gallery-caption {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    margin-top: 0.5rem;
}

/* Scalloped edge / Flower shape clip-path approximation */
.flower-shape-clip {
    clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%,
            80% 100%, 20% 100%, 0% 80%, 0% 20%);
    /* Simple octagon approximation for now, real flower shape needs complex SVG or very complex polygon */
    border-radius: 50px;
}

@media (min-width: 768px) {
    .gallery-container {
        flex-direction: row;
        justify-content: center;
        /* Changed from space-around to center for tighter grouping */
        gap: 4rem;
        /* Ensure gap is active */
        max-width: 1400px;
        /* Increased from 1000px to fit larger items */
        margin: 0 auto;
    }

    .item-1 {
        transform: none;
        /* Remove -50px offset */
    }

    .item-2 {
        transform: none;
        /* Remove 50px offset */
        margin-top: 4rem;
        /* Add padding top to both, or just match? User said 'wat meer padding boven' for the first one. Let's just align them clean. */
    }
}

/* Subscribe Section */
.subscribe-section {
    background-color: var(--secondary-blue);
    padding: 4rem 2rem;
    text-align: center;
}

.subscribe-section h2 {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.subscribe-form {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-top: 2rem;
    flex-wrap: wrap;
}

.subscribe-form input {
    padding: 10px;
    border: none;
    border-radius: 5px;
    width: 300px;
}

.subscribe-form button {
    padding: 10px 20px;
    background-color: black;
    color: white;
    border: none;
    border-radius: 20px;
    cursor: pointer;
}

/* Bottom Grid */
.bottom-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

.bottom-grid img {
    width: 100%;
    height: 300px;
    /* Square-ish */
    object-fit: cover;
}

@media (min-width: 768px) {
    .bottom-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Footer */
.site-footer {
    background-color: var(--accent-lime);
    padding: 4rem 2rem;
    text-align: center;
}

.footer-marquee {
    font-family: var(--font-heading);
    font-size: 3rem;
    font-weight: bold;
    margin-bottom: 2rem;
    white-space: nowrap;
    overflow: hidden;
    color: #2b4f18;
    /* Darker green tint for contrast */
}

.footer-links {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    font-size: 0.9rem;
    max-width: 1200px;
    margin: 0 auto;
}

.footer-col h5 {
    font-weight: bold;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
}

@media (min-width: 768px) {
    .footer-links {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 2rem;
        /* Previously flex row space-between */
    }
}

/* Contact Form Styles */
.contact-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 400px;
    margin: 2rem auto;
}

.contact-form input,
.contact-form textarea {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-family: inherit;
    width: 100%;
}

.contact-form button {
    padding: 10px 20px;
    background-color: black;
    color: white;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    align-self: center;
    min-width: 150px;
    font-weight: bold;
}

.contact-form button:hover {
    background-color: #333;
}