/* style.css */

/*------------------------------------------------------------------
[Table of Contents]

1. ROOT VARIABLES & BASIC SETUP
    - Color Palette (Split-Complementary & Neo-Brutalism)
    - Typography
    - Spacing
    - Transitions & Borders
2. GENERAL STYLES
    - Body & HTML
    - Container
    - Headings (h1-h6)
    - Paragraphs & Links
    - Utility Classes
3. UI COMPONENTS
    - Buttons (Global)
    - Cards (Global)
    - Forms (Global)
    - Accordion (FAQ)
    - Statistical Widgets
4. HEADER & NAVIGATION
    - Main Header (Fixed)
    - Logo
    - Main Navigation (Desktop & Mobile Toggle)
5. SECTION STYLING
    - General Section Styles (.section-padding, .section-title, .section-subtitle)
    - Hero Section (#hero) & Particle Animation
    - About Intro Section (#about-intro)
    - Services Section (#services)
    - Testimonials Section (#testimonials)
    - Partners Section (#partners)
    - Press Section (#press)
    - Sustainability Section (#sustainability)
    - Events Section (#events)
    - Community Section (#community)
    - External Resources Section (#external-resources)
    - FAQ Section (#faq) - Uses Accordion
    - Contact Section (#contact) & Map Placeholder
6. FOOTER
    - Main Footer
    - Footer Navigation, Social Links, Contact Info
7. SPECIFIC PAGE STYLES
    - Success Page
    - Legal/About/Contacts Content Pages (Privacy, Terms, About, Contacts)
8. ANIMATIONS & INTERACTIVITY
    - Scroll Animations (Placeholder for JS integration with Motion One)
    - Hover Effects (Integrated into components)
9. RESPONSIVE DESIGN (Media Queries)
    - Tablet
    - Mobile
-------------------------------------------------------------------*/

/* 1. ROOT VARIABLES & BASIC SETUP
-------------------------------------------------------------------*/
:root {
    /* Color Palette - Split-Complementary with Neo-Brutalism in mind */
    --color-primary: #2A67AC; /* Professional Blue */
    --color-accent1: #F9A825; /* Vibrant Orange/Yellow - CTAs, Highlights */
    --color-accent2: #4DC9B0; /* Teal/Turquoise - Freshness, Secondary Accent */
    
    --color-text-dark: #1E1E1E; /* Nearly Black - Strong Readability */
    --color-text-medium: #555555; /* Medium Grey for subtitles or less important text */
    --color-text-light: #FFFFFF; /* White for dark backgrounds */
    
    --color-background-light: #F0F4F8; /* Light Grey/Blue Tint - Main Light Background */
    --color-background-sections: #FFFFFF; /* White for most section backgrounds */
    --color-background-accent: #E8F5E9; /* Light green for sustainability as per HTML */
    --color-background-dark-alpha: rgba(30, 30, 30, 0.95); /* For overlays like cookie bar */

    --color-border: #CDCDCD; /* Standard Border */
    --color-border-strong: #1E1E1E; /* Neo-Brutalist Strong Border */
    
    --color-shadow-neo: rgba(0, 0, 0, 0.15); /* Softer neo-brutalist shadow for cards */
    --color-shadow-button-neo: #111111; /* Stronger shadow for buttons */

    /* Typography */
    --font-family-headings: 'Poppins', sans-serif;
    --font-family-body: 'Work Sans', sans-serif;
    
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-black: 900;

    /* Spacing (Neo-Brutalism often uses generous or very structured spacing) */
    --space-xs: 0.5rem;  /* 8px */
    --space-sm: 1rem;    /* 16px */
    --space-md: 1.5rem;  /* 24px */
    --space-lg: 2.5rem;  /* 40px */
    --space-xl: 4rem;    /* 64px */

    /* Transitions & Borders */
    --transition-fast: 0.2s ease-in-out;
    --transition-medium: 0.3s ease-in-out;
    --border-radius-sharp: 0px; /* Neo-Brutalism tendency */
    --border-radius-slight: 4px; /* For a softer touch on some elements */

    /* Header */
    --header-height: 80px;
}

/* 2. GENERAL STYLES
-------------------------------------------------------------------*/
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

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

body {
    font-family: var(--font-family-body);
    font-weight: var(--font-weight-regular);
    line-height: 1.7;
    color: var(--color-text-dark);
    background-color: var(--color-background-light);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

.site-wrapper {
    overflow-x: hidden; /* Prevent horizontal scroll from animations or wide elements */
}

.container {
    width: 90%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--space-sm);
    padding-right: var(--space-sm);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family-headings);
    font-weight: var(--font-weight-bold);
    line-height: 1.3;
    color: var(--color-text-dark); /* Default dark for headings */
    margin-bottom: var(--space-md);
}
h1 { font-size: 2.8rem; font-weight: var(--font-weight-black); }
h2 { font-size: 2.2rem; }
h3 { font-size: 1.6rem; }
h4 { font-size: 1.3rem; }

p {
    margin-bottom: var(--space-md);
    color: var(--color-text-medium);
}
p:last-child {
    margin-bottom: 0;
}

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--transition-fast);
}
a:hover, a:focus {
    color: var(--color-accent1);
    text-decoration: underline;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Utility Classes */
.section-padding {
    padding-top: var(--space-xl);
    padding-bottom: var(--space-xl);
}

.text-center {
    text-align: center;
}

.text-light {
    color: var(--color-text-light) !important;
}

.text-primary { color: var(--color-primary); }
.text-accent1 { color: var(--color-accent1); }
.text-accent2 { color: var(--color-accent2); }

.content-columns {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-lg);
}
.column {
    flex-grow: 1;
    flex-basis: 100%; /* Default to full width on small screens */
}
@media (min-width: 768px) {
    .column.full-width { flex-basis: 100%; }
    .column.two-thirds { flex-basis: calc(66.66% - (var(--space-lg) / 2)); }
    .column.one-third { flex-basis: calc(33.33% - (var(--space-lg) / 2)); }
}

/* 3. UI COMPONENTS
-------------------------------------------------------------------*/
/* Buttons (Global) */
.button, button, input[type="submit"], input[type="button"] {
    display: inline-block;
    font-family: var(--font-family-headings);
    font-weight: var(--font-weight-bold);
    font-size: 1rem;
    text-align: center;
    text-decoration: none;
    padding: var(--space-sm) var(--space-md);
    border: 2px solid transparent;
    border-radius: var(--border-radius-sharp); /* Neo-brutalism */
    cursor: pointer;
    transition: all var(--transition-medium);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 3px 3px 0px var(--color-shadow-button-neo); /* Neo-brutalist shadow */
}

.button:hover, button:hover, input[type="submit"]:hover, input[type="button"]:hover {
    transform: translate(-2px, -2px);
    box-shadow: 5px 5px 0px var(--color-shadow-button-neo);
}
.button:active, button:active, input[type="submit"]:active, input[type="button"]:active {
    transform: translate(1px, 1px);
    box-shadow: 1px 1px 0px var(--color-shadow-button-neo);
}

.button-primary {
    background-color: var(--color-accent1);
    color: var(--color-text-dark);
    border-color: var(--color-accent1);
}
.button-primary:hover {
    background-color: var(--color-text-dark);
    color: var(--color-accent1);
    border-color: var(--color-text-dark);
}

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

.button-link { /* For "Read More" type links styled as buttons */
    background-color: transparent;
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
    box-shadow: none;
    padding: var(--space-xs) var(--space-sm);
}
.button-link:hover {
    background-color: var(--color-primary);
    color: var(--color-text-light);
    transform: none;
    box-shadow: none;
}

/* Cards (Global) */
.card {
    background-color: var(--color-background-sections);
    border: 2px solid var(--color-border-strong);
    border-radius: var(--border-radius-sharp);
    box-shadow: 5px 5px 0 var(--color-shadow-neo); /* Neo-brutalist shadow */
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Ensures content respects border-radius */
    transition: transform var(--transition-medium), box-shadow var(--transition-medium);
    height: 100%; /* For consistent height in grids */
}
.card:hover {
    transform: translateY(-5px) translateX(-5px);
    box-shadow: 10px 10px 0 var(--color-accent1);
}
.card-image { /* Container for image */
    width: 100%;
    height: 200px; /* Fixed height for consistency */
    overflow: hidden;
    background-color: var(--color-background-light); /* Placeholder bg */
}
.card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.card-content {
    padding: var(--space-md);
    flex-grow: 1; /* Allows content to take remaining space */
    display: flex;
    flex-direction: column;
}
.card-content > *:last-child {
    margin-bottom: 0;
}
.card-title {
    font-size: 1.4rem;
    margin-bottom: var(--space-sm);
    color: var(--color-primary);
    text-align: center;
}
.card p {
    font-size: 0.95rem;
    color: var(--color-text-medium);
    flex-grow: 1; /* Pushes button to bottom if card content uses flex column */
}
.card .button {
    margin-top: auto; /* Pushes button to the bottom */
    align-self: flex-start; /* Default, can be centered with text-align:center on parent if button is inline-block and only element */
}
.card .button-link {
    margin-top: var(--space-sm);
    align-self: flex-start;
}

/* Forms (Global) - Contact Form Example */
.form-group {
    margin-bottom: var(--space-md);
}
.form-group label {
    display: block;
    font-family: var(--font-family-headings);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--space-xs);
    color: var(--color-text-dark);
}
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
textarea {
    width: 100%;
    padding: var(--space-sm);
    border: 2px solid var(--color-border-strong);
    border-radius: var(--border-radius-sharp);
    font-family: var(--font-family-body);
    font-size: 1rem;
    background-color: var(--color-text-light);
    color: var(--color-text-dark);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
textarea:focus {
    outline: none;
    border-color: var(--color-accent1);
    box-shadow: 0 0 0 2px var(--color-accent1);
}
textarea {
    min-height: 120px;
    resize: vertical;
}

/* Accordion (FAQ) */
.accordion-item {
    border: 2px solid var(--color-border-strong);
    border-radius: var(--border-radius-sharp);
    margin-bottom: var(--space-sm);
    background-color: var(--color-background-sections);
}
.accordion-header {
    background-color: transparent;
    border: none;
    width: 100%;
    padding: var(--space-md);
    text-align: left;
    font-family: var(--font-family-headings);
    font-size: 1.1rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative; /* For icon positioning */
}
.accordion-header:hover {
    color: var(--color-accent1);
}
.accordion-icon {
    width: 20px;
    height: 20px;
    transition: transform var(--transition-medium);
    position: relative; /* For pseudo elements */
}
.accordion-icon::before,
.accordion-icon::after {
    content: '';
    position: absolute;
    background-color: currentColor; /* Inherits color from .accordion-header */
    transition: transform 0.3s ease;
}
.accordion-icon::before { /* Horizontal bar */
    left: 0;
    top: 50%;
    width: 100%;
    height: 3px; /* Boldness for Neo-Brutalism */
    transform: translateY(-50%);
}
.accordion-icon::after { /* Vertical bar */
    top: 0;
    left: 50%;
    height: 100%;
    width: 3px; /* Boldness for Neo-Brutalism */
    transform: translateX(-50%);
}
.accordion-header[aria-expanded="true"] .accordion-icon::after {
    transform: translateX(-50%) rotate(90deg); /* Hide vertical bar by rotating */
}
.accordion-header[aria-expanded="true"] .accordion-icon {
    /* transform: rotate(45deg); */ /* Alternative icon change */
}
.accordion-content {
    padding: 0 var(--space-md) var(--space-md) var(--space-md);
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition-medium), padding var(--transition-medium);
}
.accordion-content p {
    color: var(--color-text-medium);
    font-size: 0.95rem;
}

/* Statistical Widgets (Sustainability) */
.stat-widget {
    background-color: var(--color-text-light);
    padding: var(--space-md);
    text-align: center;
    border: 2px solid var(--color-accent2);
    border-radius: var(--border-radius-sharp);
    margin-bottom: var(--space-md);
    box-shadow: 3px 3px 0px var(--color-accent2);
}
.stat-value {
    font-size: 2.5rem;
    font-weight: var(--font-weight-black);
    color: var(--color-primary);
    margin-bottom: var(--space-xs);
}
.stat-label {
    font-size: 0.9rem;
    color: var(--color-text-medium);
    line-height: 1.4;
}


/* 4. HEADER & NAVIGATION
-------------------------------------------------------------------*/
.main-header {
    background-color: var(--color-background-sections);
    padding: var(--space-sm) 0;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    border-bottom: 2px solid var(--color-border-strong);
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    height: var(--header-height);
    display: flex;
    align-items: center;
}
.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}
.logo {
    font-family: var(--font-family-headings);
    font-size: 1.8rem;
    font-weight: var(--font-weight-black);
    color: var(--color-text-dark);
    text-decoration: none;
}
.logo .logo-accent {
    color: var(--color-primary);
}
.logo:hover {
    color: var(--color-primary);
    text-decoration: none;
}
.logo:hover .logo-accent {
    color: var(--color-accent1);
}

.main-nav .nav-menu {
    list-style: none;
    display: flex;
    align-items: center;
}
.main-nav .nav-menu li {
    margin-left: var(--space-md);
}
.main-nav .nav-link {
    font-family: var(--font-family-headings);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-dark);
    text-decoration: none;
    padding: var(--space-xs) 0;
    position: relative;
    transition: color var(--transition-fast);
}
.main-nav .nav-link:hover,
.main-nav .nav-link.active { /* Add .active class with JS for current page */
    color: var(--color-primary);
}
.main-nav .nav-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 3px; /* Bold underline for Neo-Brutalism */
    background-color: var(--color-accent1);
    transition: width var(--transition-medium);
}
.main-nav .nav-link:hover::after,
.main-nav .nav-link.active::after {
    width: 100%;
}

.nav-toggle {
    display: none; /* Hidden on desktop */
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--space-xs);
    z-index: 1001; /* Above nav menu if it animates */
}
.hamburger-icon {
    display: block;
    width: 28px;
    height: 3px;
    background-color: var(--color-text-dark);
    position: relative;
    transition: background-color var(--transition-fast);
}
.hamburger-icon::before,
.hamburger-icon::after {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: var(--color-text-dark);
    transition: transform var(--transition-medium), top var(--transition-medium);
}
.hamburger-icon::before { top: -8px; }
.hamburger-icon::after { top: 8px; }

/* Hamburger animation when active (add .nav-open to .main-nav or .nav-toggle) */
.main-nav.nav-menu-open .nav-toggle .hamburger-icon {
    background-color: transparent; /* Middle bar disappears */
}
.main-nav.nav-menu-open .nav-toggle .hamburger-icon::before {
    top: 0;
    transform: rotate(45deg);
}
.main-nav.nav-menu-open .nav-toggle .hamburger-icon::after {
    top: 0;
    transform: rotate(-45deg);
}


/* 5. SECTION STYLING
-------------------------------------------------------------------*/
/* General Section Styles */
.section-title {
    text-align: center;
    margin-bottom: var(--space-sm); /* Reduced from md to bring subtitle closer */
    font-weight: var(--font-weight-black);
    color: var(--color-text-dark); /* Ensure high contrast */
    text-shadow: 1px 1px 0px var(--color-border); /* Subtle neo-brutalist touch */
}
.section-subtitle {
    text-align: center;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: var(--space-lg);
    color: var(--color-text-medium);
    font-size: 1.1rem;
}

/* Hero Section (#hero) */
.hero-section {
    position: relative;
    color: var(--color-text-light); /* Default text color for hero */
    padding: calc(var(--space-xl) * 2 + var(--header-height)) 0 calc(var(--space-xl) * 2) 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    min-height: 80vh; /* Ensure it's substantial but not overly large */
}
.hero-section::before { /* Darkening overlay for text readability */
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.6));
    z-index: 1;
}
.particle-animation-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0; /* Behind overlay and content */
    pointer-events: none;
}
.hero-content {
    position: relative;
    z-index: 2; /* Above overlay */
    max-width: 800px;
}
.hero-title {
    font-size: 3.5rem; /* Larger for Hero */
    color: var(--color-text-light); /* Explicitly white */
    text-shadow: 2px 2px 4px rgba(0,0,0,0.7); /* As requested */
    margin-bottom: var(--space-md);
}
.hero-subtitle {
    font-size: 1.3rem;
    color: var(--color-text-light); /* Explicitly white */
    text-shadow: 1px 1px 3px rgba(0,0,0,0.6); /* As requested */
    margin-bottom: var(--space-lg);
    font-weight: var(--font-weight-regular);
}
.hero-cta {
    font-size: 1.1rem;
    padding: var(--space-md) var(--space-lg);
}

/* About Intro Section (#about-intro) */
#about-intro .button {
    margin-top: var(--space-md);
}

/* Services Section (#services) */
#services { background-color: var(--color-background-light); }
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-lg);
}
.service-card .card-title {
    color: var(--color-primary);
}

/* Testimonials Section (#testimonials) */
.testimonial-slider { /* Basic styles, JS will handle actual sliding */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-lg);
}
.testimonial-card {
    background-color: var(--color-background-light);
    border-color: var(--color-accent2);
    box-shadow: 5px 5px 0 var(--color-accent2);
}
.testimonial-card:hover {
    box-shadow: 10px 10px 0 var(--color-primary);
}
.testimonial-card .card-image { /* For optional client photo */
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin: 0 auto var(--space-md) auto;
    border: 3px solid var(--color-accent1);
}
.testimonial-card .card-content {
    text-align: center;
}
.testimonial-quote {
    font-size: 1.1rem;
    font-style: italic;
    color: var(--color-text-dark);
    margin-bottom: var(--space-md);
    position: relative;
    padding: 0 var(--space-sm);
}
.testimonial-quote::before {
    content: '“';
    font-size: 3rem;
    color: var(--color-accent1);
    position: absolute;
    left: -5px;
    top: -10px;
    font-family: serif;
}
.testimonial-quote::after {
    content: '”';
    font-size: 3rem;
    color: var(--color-accent1);
    position: absolute;
    right: -5px;
    bottom: -25px; /* Adjust as needed */
    font-family: serif;
}
.testimonial-author {
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
    margin-top: var(--space-md);
}

/* Partners Section (#partners) */
#partners { background-color: var(--color-background-light); }
.partners-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--space-lg);
}
.partner-logo img {
    max-width: 150px;
    height: auto;
    filter: grayscale(100%);
    opacity: 0.7;
    transition: filter var(--transition-medium), opacity var(--transition-medium);
}
.partner-logo img:hover {
    filter: grayscale(0%);
    opacity: 1;
}

/* Press Section (#press) */
.press-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--space-lg);
}
.press-card .card-title {
    font-size: 1.2rem;
    text-align: left;
}
.press-source {
    font-size: 0.85rem;
    color: var(--color-text-medium);
    font-style: italic;
    margin-bottom: var(--space-sm);
}

/* Sustainability Section (#sustainability) */
#sustainability { background-color: var(--color-background-accent); } /* Light green */

/* Events Section (#events) */
.events-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--space-lg);
}
.event-card .card-title {
    text-align: left;
}
.event-date {
    font-size: 0.9rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-accent1);
    margin-bottom: var(--space-sm);
}

/* Community Section (#community) */
#community { background-color: var(--color-background-light); }
.community-image-container {
    margin-top: var(--space-lg);
    border: 3px solid var(--color-primary);
    box-shadow: 5px 5px 0px var(--color-primary);
}
.community-image-container img {
    display: block;
    width: 100%;
}

/* External Resources Section (#external-resources) */
.resources-list {
    list-style: none;
    padding: 0;
}
.resources-list li {
    margin-bottom: var(--space-md);
    border: 2px solid var(--color-border);
    border-radius: var(--border-radius-sharp);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.resources-list li:hover {
    border-color: var(--color-accent1);
    box-shadow: 3px 3px 0 var(--color-accent1);
}
.resource-link {
    display: block;
    padding: var(--space-md);
    text-decoration: none;
}
.resource-link:hover {
    text-decoration: none;
}
.resource-link:hover .resource-title {
    color: var(--color-accent1);
}
.resource-title {
    font-family: var(--font-family-headings);
    font-size: 1.2rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
    margin-bottom: var(--space-xs);
    transition: color var(--transition-fast);
}
.resource-description {
    font-size: 0.9rem;
    color: var(--color-text-medium);
    line-height: 1.5;
    margin-bottom: 0;
}

/* FAQ Section (#faq) */
#faq { background-color: #f9f9f9; } /* Slightly different light bg for variety */
#faq .accordion {
    max-width: 800px;
    margin: 0 auto;
}

/* Contact Section (#contact) */
.contact-form-container {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-lg);
    background-color: var(--color-background-sections);
    padding: var(--space-lg);
    border: 2px solid var(--color-border-strong);
    box-shadow: 5px 5px 0 var(--color-shadow-neo);
}
#contact-form {
    flex: 2; /* Takes more space */
    min-width: 300px;
}
.contact-details {
    flex: 1;
    min-width: 280px;
    padding-left: var(--space-lg); /* If form and details are side by side */
    border-left: 2px solid var(--color-border); /* Separator */
}
.contact-details h3 {
    color: var(--color-primary);
    margin-bottom: var(--space-md);
}
.contact-details p {
    margin-bottom: var(--space-sm);
    font-size: 0.95rem;
}
.contact-details p strong {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-dark);
}
.contact-details a {
    word-break: break-all;
}
.map-placeholder {
    border: 2px solid var(--color-primary) !important; /* Override inline */
    background-color: var(--color-background-light) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary) !important;
    font-family: var(--font-family-headings) !important;
    font-weight: var(--font-weight-bold) !important;
}


/* 6. FOOTER
-------------------------------------------------------------------*/
.main-footer {
    background-color: var(--color-text-dark);
    color: var(--color-background-light);
    padding-top: var(--space-xl);
    padding-bottom: var(--space-lg);
    border-top: 5px solid var(--color-primary); /* Neo-brutalist accent */
}
.footer-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-lg);
}
.main-footer h4 {
    font-family: var(--font-family-headings);
    font-weight: var(--font-weight-bold);
    color: var(--color-accent1);
    margin-bottom: var(--space-md);
    font-size: 1.2rem;
}
.main-footer ul {
    list-style: none;
    padding: 0;
}
.main-footer ul li {
    margin-bottom: var(--space-xs);
}
.footer-link {
    color: var(--color-background-light) !important; /* Override general link color */
    text-decoration: none;
    font-size: 0.95rem;
    transition: color var(--transition-fast), padding-left var(--transition-fast);
}
.footer-link:hover {
    color: var(--color-accent1) !important;
    text-decoration: underline !important;
    padding-left: 5px;
}
.footer-social .footer-link {
    display: inline-block; /* For padding effect to work well */
}
.footer-contact-info p {
    color: var(--color-background-light);
    font-size: 0.95rem;
    margin-bottom: var(--space-xs);
}
.footer-copyright {
    grid-column: 1 / -1; /* Span all columns */
    text-align: center;
    margin-top: var(--space-lg);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--color-text-medium);
    font-size: 0.9rem;
    color: var(--color-border);
}


/* 7. SPECIFIC PAGE STYLES
-------------------------------------------------------------------*/
/* Success Page (e.g., after form submission) */
.success-page-container { /* This class should be on a wrapper div in success.html */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--space-lg);
    background-color: var(--color-background-light);
}
.success-page-container h1 {
    color: var(--color-primary);
    margin-bottom: var(--space-md);
    font-size: 2.5rem;
}
.success-page-container p {
    color: var(--color-text-dark);
    margin-bottom: var(--space-lg);
    max-width: 600px;
    font-size: 1.1rem;
}
.success-page-container .button {
    margin-top: var(--space-md);
}

/* Generic Content Pages (Privacy, Terms, About, Contacts) */
.legal-page-content,
.about-page-content,
.contacts-page-content { /* Class for the main content wrapper on these pages */
    padding-top: calc(var(--header-height) + var(--space-xl)); /* Header height + extra space */
    padding-bottom: var(--space-xl);
    background-color: var(--color-background-sections);
}
.legal-page-content .container h1,
.about-page-content .container h1,
.contacts-page-content .container h1 { /* Main page title */
    margin-bottom: var(--space-lg);
    color: var(--color-primary);
    text-align: center;
}
.legal-page-content .container h2,
.about-page-content .container h2,
.contacts-page-content .container h2 { /* Subheadings within the content */
    margin-top: var(--space-lg);
    margin-bottom: var(--space-md);
    color: var(--color-accent1);
}
.legal-page-content .container p,
.about-page-content .container p,
.contacts-page-content .container p {
    margin-bottom: var(--space-md);
    line-height: 1.8;
}
.legal-page-content .container ul,
.about-page-content .container ul,
.contacts-page-content .container ul {
    margin-bottom: var(--space-md);
    padding-left: var(--space-md);
}
.legal-page-content .container li,
.about-page-content .container li,
.contacts-page-content .container li {
    margin-bottom: var(--space-xs);
}

/* Cookie Consent Popup (styles from HTML but can be enhanced here) */
#cookie-consent-popup {
    /* Basic styles already in HTML. If more styling needed, add here. */
    /* Example: making button more prominent */
    /* #accept-cookie-consent {
        padding: 12px 30px;
        font-size: 1rem;
    } */
}

/* 8. ANIMATIONS & INTERACTIVITY (Placeholders for JS)
-------------------------------------------------------------------*/
/* .scroll-animate for Motion One or custom JS */
.scroll-animate {
    /*opacity: 0;*/
    transform: translateY(20px);
    /* Motion One will handle the animation, this is a fallback or initial state */
}
.scroll-animate.is-visible { /* Example class added by JS */
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* 9. RESPONSIVE DESIGN (Media Queries)
-------------------------------------------------------------------*/
@media (max-width: 992px) { /* Tablet */
    .hero-title { font-size: 2.8rem; }
    .hero-subtitle { font-size: 1.1rem; }
    h1 { font-size: 2.3rem; }
    h2 { font-size: 1.9rem; }

    .contact-form-container {
        flex-direction: column;
    }
    .contact-details {
        padding-left: 0;
        border-left: none;
        border-top: 2px solid var(--color-border);
        padding-top: var(--space-lg);
        margin-top: var(--space-lg);
    }
}

@media (max-width: 768px) { /* Mobile */
    :root { /* Adjust spacing for mobile */
        --space-md: 1.2rem;
        --space-lg: 2rem;
        --space-xl: 3rem;
        --header-height: 70px;
    }
    .hero-section {
        padding: calc(var(--space-xl) + var(--header-height)) 0 var(--space-xl) 0;
        min-height: 70vh;
    }
    .hero-title { font-size: 2.2rem; }
    .hero-subtitle { font-size: 1rem; }
    h1 { font-size: 2rem; }
    h2 { font-size: 1.7rem; }
    .section-title { font-size: 1.8rem; }
    .section-subtitle { font-size: 1rem; }


    /* Mobile Navigation */
    .nav-toggle {
        display: block; /* Show hamburger */
    }
    .main-nav .nav-menu {
        display: none; /* Hide menu by default */
        flex-direction: column;
        position: absolute;
        top: var(--header-height); /* Position below header */
        left: 0;
        width: 100%;
        background-color: var(--color-background-dark-alpha); /* Semi-transparent dark */
        backdrop-filter: blur(5px);
        padding: var(--space-md) 0;
        border-top: 1px solid var(--color-accent1);
    }
    .main-nav.nav-menu-open .nav-menu {
        display: flex; /* Show when .nav-menu-open is added to .main-nav */
    }
    .main-nav .nav-menu li {
        margin: 0;
        width: 100%;
    }
    .main-nav .nav-link {
        display: block;
        padding: var(--space-md) var(--space-lg);
        text-align: center;
        width: 100%;
        color: var(--color-text-light); /* Light text on dark mobile menu */
    }
    .main-nav .nav-link:hover,
    .main-nav .nav-link.active {
        background-color: var(--color-primary);
        color: var(--color-text-light);
    }
    .main-nav .nav-link::after { /* Disable underline for mobile nav items */
        display: none;
    }

    .footer-container {
        grid-template-columns: 1fr; /* Stack footer columns */
        text-align: center;
    }
    .footer-container > div {
        margin-bottom: var(--space-md);
    }
    .main-footer h4 {
        margin-bottom: var(--space-sm);
    }
}

@media (max-width: 480px) { /* Small mobile */
    .hero-title { font-size: 1.8rem; }
    h1 { font-size: 1.7rem; }
    .services-grid, .press-grid, .events-grid, .testimonial-slider {
        grid-template-columns: 1fr; /* Single column for cards on small screens */
    }
    .button, button, input[type="submit"], input[type="button"] {
        padding: var(--space-sm) var(--space-md);
        font-size: 0.9rem;
    }
    .hero-cta {
        padding: var(--space-sm) var(--space-lg);
    }
}