:root {
    /* Colors */
    --color-primary: #6B8E23;
    --color-secondary: #A7C957;
    --color-background: #F9F6EE;
    --color-footer-bg: #3D4F1E;
    --color-button: #8B9E4A;
    --color-text-dark: #3D4F1E;
    --color-text-light: #F9F6EE;

    --section-bg-1: #E9F5DB;
    --section-bg-2: #D4E8B9;
    --section-bg-3: #B0D88D;
    --section-bg-4: #97C36C;
    --section-bg-5: #7CAE4F;

    /* Fonts */
    --font-heading: 'Quicksand', sans-serif;
    --font-body: 'Lato', sans-serif;

    /* Spacing */
    --spacing-unit: 1rem;
    --spacing-md: calc(var(--spacing-unit) * 1.5);
    --spacing-lg: calc(var(--spacing-unit) * 3);
    --spacing-xl: calc(var(--spacing-unit) * 5);

    /* Border Radius */
    --border-radius-sm: 0.5rem;
    --border-radius-md: 1rem;
    --border-radius-full: 9999px;

    /* Shadows */
    --shadow-soft: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-button: 0 6px 12px rgba(139, 158, 74, 0.3);

    /* Transitions */
    --transition-speed: 0.3s;
    --transition-ease: ease-in-out;
}

/* Base Styles */
html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    color: var(--color-text-dark);
    line-height: 1.7;
    background-color: var(--color-background);
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--color-primary);
    line-height: 1.2;
    margin-top: var(--spacing-lg);
    margin-bottom: var(--spacing-md);
    letter-spacing: -0.02em;
}

h1 {
    font-size: 3.5rem;
    font-weight: 700;
}

h2 {
    font-size: 2.5rem;
    font-weight: 600;
}

h3 {
    font-size: 1.8rem;
    font-weight: 500;
}

p {
    margin-bottom: var(--spacing-md);
}

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--transition-speed) var(--transition-ease);
}

a:hover {
    color: var(--color-secondary);
}

ul, ol {
    margin-left: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

/* Utility Classes */
.container {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--spacing-unit);
    padding-right: var(--spacing-unit);
}

.section-padding {
    padding-top: var(--spacing-xl);
    padding-bottom: var(--spacing-xl);
}

/* Header */
.header {
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 1000;
    background-color: rgba(249, 246, 238, 0.8); /* background_color_hex with opacity */
    backdrop-filter: blur(10px); /* Glassmorphism effect */
    border-bottom: 1px solid rgba(107, 142, 35, 0.1);
    padding: var(--spacing-unit) 0;
    transition: background-color var(--transition-speed) var(--transition-ease);
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-logo {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--color-primary);
}

.main-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: var(--spacing-md);
}

.main-nav a {
    font-family: var(--font-heading);
    font-weight: 500;
    color: var(--color-text-dark);
    padding: 0.5rem 1rem;
    border-radius: var(--border-radius-full);
    transition: all var(--transition-speed) var(--transition-ease);
}

.main-nav a:hover,
.main-nav a.active {
    background-color: var(--color-secondary);
    color: var(--color-text-light);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(167, 201, 87, 0.4);
}

/* Hamburger Menu (Mobile) */
.hamburger-menu {
    display: none; /* Hidden by default on desktop */
    font-size: 2rem;
    cursor: pointer;
    color: var(--color-primary);
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.8rem 2rem;
    background-color: var(--color-button);
    color: var(--color-text-light);
    border: none;
    border-radius: var(--border-radius-full); /* Full-rounded */
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 1.1rem;
    cursor: pointer;
    text-decoration: none;
    transition: all var(--transition-speed) var(--transition-ease);
    box-shadow: var(--shadow-button);
    position: relative;
    overflow: hidden;
}

.btn:hover {
    background-color: var(--color-primary); /* Darker shade on hover */
    transform: translateY(-3px) scale(1.02); /* Delicate enlargement */
    box-shadow: 0 8px 16px rgba(107, 142, 35, 0.4);
}

.btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(107, 142, 35, 0.4);
}

/* Card Style */
.card {
    background-color: var(--color-background); /* Default card background */
    border-radius: var(--border-radius-md); /* rounded-xl */
    box-shadow: var(--shadow-soft);
    padding: var(--spacing-lg);
    transition: transform var(--transition-speed) var(--transition-ease), box-shadow var(--transition-speed) var(--transition-ease);
    position: relative;
    overflow: hidden;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

/* Organic SVG shapes for cards */
.card::before {
    content: '';
    position: absolute;
    top: -20px;
    left: -20px;
    width: 100px;
    height: 100px;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path fill="%23A7C957" fill-opacity="0.2" d="M50 0C77.6 0 100 22.4 100 50C100 77.6 77.6 100 50 100C22.4 100 0 77.6 0 50C0 22.4 22.4 0 50 0ZM30 30C20 30 15 40 15 50C15 60 20 70 30 70C40 70 45 60 45 50C45 40 40 30 30 30ZM70 30C60 30 55 40 55 50C55 60 60 70 70 70C80 70 85 60 85 50C85 40 80 30 70 30Z"/></svg>') no-repeat center center / contain;
    transform: rotate(45deg);
    opacity: 0.3;
    z-index: 0;
}
.card:nth-child(even)::before {
    top: auto;
    bottom: -20px;
    left: auto;
    right: -20px;
    transform: rotate(-135deg);
}

/* Section Backgrounds */
.section-bg-1 {
    background-color: var(--section-bg-1);
}
.section-bg-2 {
    background-color: var(--section-bg-2);
}
.section-bg-3 {
    background-color: var(--section-bg-3);
}
.section-bg-4 {
    background-color: var(--section-bg-4);
}
.section-bg-5 {
    background-color: var(--section-bg-5);
}

/* Icons */
.icon {
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    stroke-width: 2;
    stroke: var(--color-primary);
    fill: none;
    vertical-align: middle;
    margin-right: 0.5em; /* Example spacing if used with text */
}

/* Footer */
.footer {
    background-color: var(--color-footer-bg);
    color: var(--color-text-light);
    padding: var(--spacing-lg) 0;
    text-align: center;
    font-size: 0.9rem;
}

.footer a {
    color: var(--color-secondary);
}

.footer a:hover {
    color: var(--color-primary);
}

/* Media Queries */
@media (max-width: 768px) {
    h1 {
        font-size: 2.5rem;
    }

    h2 {
        font-size: 1.8rem;
    }

    .header-content {
        flex-wrap: wrap;
    }
    
    .main-nav {
        display: none; /* Hide by default on mobile */
        width: 100%;
        order: 3; /* Move below logo and hamburger */
    }

    .main-nav.open {
        display: block;
    }

    .main-nav ul {
        flex-direction: column;
        gap: 0.5rem;
        padding-top: var(--spacing-unit);
    }

    .main-nav a {
        display: block;
        text-align: center;
        width: 100%;
    }

    .hamburger-menu {
        display: block; /* Show hamburger on mobile */
    }
}


/* Cookie Banner Additional Styles for Tailwind */
.cookie-banner-hover-effect:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

@media (prefers-reduced-motion: reduce) {
    .cookie-banner-hover-effect:hover {
        transform: none;
    }
}