:root {
    --color-primary: #2e7d32;
    --color-secondary: #a5d6a7;
    --color-accent: #43a047;
    --color-background: #f5f5dc;
    --color-footer-bg: #1b5e20;
    --color-text: #333;
    --color-light-text: #f0f0f0;
    --color-border: rgba(0, 0, 0, 0.1);

    --font-family-heading: 'Lora', serif;
    --font-family-body: 'Open Sans', sans-serif;

    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 1.5rem;
    --spacing-lg: 2.5rem;
    --spacing-xl: 4rem;

    --border-radius-sm: 0.5rem;
    --border-radius-md: 1rem;
    --border-radius-lg: 2rem;

    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 6px 12px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.16);

    --glass-background: rgba(255, 255, 255, 0.4);
    --glass-border: rgba(255, 255, 255, 0.6);
}

@import url('https://fonts.googleapis.com/css2?family=Lora:wght@400;700&family=Open+Sans:wght@300;400;600&display=swap');

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    font-family: var(--font-family-body);
    line-height: 1.6;
    color: var(--color-text);
    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-family-heading);
    color: var(--color-primary);
    margin-top: var(--spacing-lg);
    margin-bottom: var(--spacing-md);
    line-height: 1.2;
}

h1 {
    font-size: 3.2rem;
    font-weight: 700;
    letter-spacing: -0.03em;
}

h2 {
    font-size: 2.4rem;
    font-weight: 700;
}

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

h4 {
    font-size: 1.4rem;
    font-weight: 600;
}

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

a {
    color: var(--color-accent);
    text-decoration: none;
    transition: color 0.3s ease, text-decoration 0.3s ease;
}

a:hover {
    color: var(--color-primary);
    text-decoration: underline;
}

/* Layout & Structure */
.container {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 var(--spacing-md);
}

section {
    padding: var(--spacing-xl) 0;
    background-color: var(--color-background);
    position: relative;
    overflow: hidden;
}

section:nth-of-type(even) {
    background-color: #e0f2f1; /* from section_bg_colors */
}

section:nth-of-type(3n) {
    background-color: #fff8e1; /* from section_bg_colors */
}

section:nth-of-type(4n) {
    background-color: #c8e6c9; /* from section_bg_colors */
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--border-radius-sm);
    font-family: var(--font-family-body);
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    border: none;
    transition: all 0.3s ease;
    text-decoration: none;
    white-space: nowrap;
}

.btn-primary {
    background-color: var(--color-accent);
    color: var(--color-light-text);
    box-shadow: var(--shadow-sm);
}

.btn-primary:hover {
    background-color: var(--color-primary);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.btn-secondary {
    background-color: var(--color-secondary);
    color: var(--color-primary);
    border: 1px solid var(--color-secondary);
}

.btn-secondary:hover {
    background-color: var(--color-primary);
    color: var(--color-light-text);
    border-color: var(--color-primary);
}

/* Cards & Glassmorphism */
.card {
    background-color: var(--glass-background);
    backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border);
    border-radius: var(--border-radius-md);
    padding: var(--spacing-md);
    box-shadow: var(--shadow-sm);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
}

/* Forms */
.form-group {
    margin-bottom: var(--spacing-md);
}

.form-group label {
    display: block;
    margin-bottom: var(--spacing-xs);
    font-weight: 600;
    color: var(--color-primary);
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="password"],
.form-group textarea {
    width: 100%;
    padding: var(--spacing-sm);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-sm);
    background-color: rgba(255, 255, 255, 0.7);
    font-family: var(--font-family-body);
    font-size: 1rem;
    color: var(--color-text);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.form-group input[type="text"]:focus,
.form-group input[type="email"]:focus,
.form-group input[type="password"]:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(67, 160, 71, 0.2);
}

/* Header & Footer */
.header {
    background-color: var(--color-footer-bg); /* Using footer color for a strong contrast */
    padding: var(--spacing-sm) 0;
    color: var(--color-light-text);
    box-shadow: var(--shadow-md);
    position: sticky;
    top: 0;
    z-index: 100;
}

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

.header .logo {
    font-family: var(--font-family-heading);
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--color-light-text);
    text-decoration: none;
    letter-spacing: -0.02em;
}

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

.header nav a {
    color: var(--color-light-text);
    font-weight: 400;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--border-radius-sm);
    transition: background-color 0.3s ease, color 0.3s ease;
}

.header nav a:hover {
    background-color: rgba(255, 255, 255, 0.15);
    color: var(--color-secondary);
    text-decoration: none;
}

.footer {
    background-color: var(--color-footer-bg);
    color: var(--color-light-text);
    padding: var(--spacing-lg) 0;
    text-align: center;
}

.footer p {
    margin: 0;
    font-size: 0.9rem;
    opacity: 0.8;
}

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

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

/* Utility classes for Alpine.js transitions */
[x-cloak] {
    display: none !important;
}

.fade-enter-active, .fade-leave-active {
    transition: opacity 0.3s ease;
}
.fade-enter, .fade-leave-to {
    opacity: 0;
}

.slide-up-enter-active, .slide-up-leave-active {
    transition: all 0.3s ease;
}
.slide-up-enter, .slide-up-leave-to {
    opacity: 0;
    transform: translateY(10px);
}

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

    h2 {
        font-size: 1.8rem;
    }

    .header .container {
        flex-direction: column;
        gap: var(--spacing-sm);
    }

    .header nav ul {
        flex-direction: column;
        gap: var(--spacing-xs);
        text-align: center;
        width: 100%;
    }

    .header nav a {
        display: block;
        padding: var(--spacing-xs);
    }

    .btn {
        width: 100%;
        padding: var(--spacing-md) var(--spacing-sm);
    }

    section {
        padding: var(--spacing-lg) 0;
    }
}

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

    h2 {
        font-size: 1.5rem;
    }

    .card {
        padding: var(--spacing-sm);
    }
}

/* Specific elements for a natural, clean, minimalist style with glassmorphism touches */
.hero-section {
    background: linear-gradient(135deg, var(--color-background) 0%, var(--color-secondary) 100%);
    min-height: 50vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.hero-content {
    max-width: 800px;
    z-index: 1;
    position: relative;
    padding: var(--spacing-lg);
}

.hero-content h1 {
    color: var(--color-primary);
    margin-bottom: var(--spacing-md);
    text-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.hero-content p {
    font-size: 1.2rem;
    color: var(--color-text);
    margin-bottom: var(--spacing-lg);
    opacity: 0.9;
}

.glass-panel {
    background-color: var(--glass-background);
    backdrop-filter: blur(15px);
    border: 1px solid var(--glass-border);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-lg);
    box-shadow: var(--shadow-lg);
    margin: var(--spacing-xl) auto;
    max-width: 900px;
}

.glass-panel h2 {
    color: var(--color-primary);
    text-align: center;
    margin-bottom: var(--spacing-lg);
}

/* Subtle background patterns/textures for natural feel */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCA2MCA2MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxnIGZpbGw9IiMwMDAwMDAiIGZpbGwtb3BhY2l0eT0iMC4wNSI+PHBhdGggZD0iTTM2IDM0djJINjB2LTJIMzZ6TTAgMzR2MkgzNHYtMkgweiIvPjwvZz48L2c+PC9zdmc+');
    opacity: 0.05;
    pointer-events: none;
    z-index: -1;
}

/* Hover effects for interactive elements */
.interactive-element {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.interactive-element:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

/* Natural accents - e.g., slightly rounded images */
img {
    max-width: 100%;
    height: auto;
    border-radius: var(--border-radius-sm);
    display: block;
}

/* Alpine.js specific styles for dynamic elements */
[x-transition:enter],
[x-transition:leave] {
    transition-property: all;
    transition-duration: 300ms;
    transition-timing-function: ease-out;
}

[x-transition:enter-start],
[x-transition:leave-end] {
    opacity: 0;
    transform: translateY(10px);
}

[x-transition:enter-end],
[x-transition:leave-start] {
    opacity: 1;
    transform: translateY(0);
}

/* Example of a custom component that might use Alpine.js */
.accordion-item {
    margin-bottom: var(--spacing-sm);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-sm);
    overflow: hidden;
}

.accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-sm) var(--spacing-md);
    background-color: var(--color-background);
    cursor: pointer;
    font-weight: 600;
    color: var(--color-primary);
    transition: background-color 0.2s ease;
}

.accordion-header:hover {
    background-color: rgba(0, 0, 0, 0.03);
}

.accordion-content {
    padding: var(--spacing-sm) var(--spacing-md);
    background-color: rgba(255, 255, 255, 0.5);
    border-top: 1px solid var(--color-border);
}

.accordion-header svg {
    transition: transform 0.3s ease;
}

.accordion-header[aria-expanded="true"] svg {
    transform: rotate(180deg);
}

/* Specific styling for Tailwind complement */
/* This CSS file is intended to add custom styles that are not easily achievable or
   not present in default Tailwind, or to provide specific brand styling.
   It avoids directly overriding core Tailwind utilities where possible,
   focusing on components and global theme application. */

/* For example, if Tailwind is used, classes like .btn-primary would be preferred over
   direct styling of <button> tags to avoid conflicts, or to extend Tailwind's @apply. */
/* If a .tailwind-reset is present, it means Tailwind's preflight is active. */
/* This custom CSS provides a distinct visual layer on top of Tailwind's utility-first approach. */
/* Using CSS variables makes it easy to integrate with Tailwind's config if needed. */


/* 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;
    }
}