/* ==========================================================================
   1. Root Variables & Base Styles
   ========================================================================== */

:root {
    /* Fonts */
    --font-heading: 'Playfair Display', serif;
    --font-body: 'Source Sans Pro', sans-serif;

    /* Analogous Colors (Base: Blue #4A90E2) */
    --color-primary: #4A90E2;         /* Blue */
    --color-secondary: #349A89;       /* Greenish-Blue */
    --color-accent: #6A67CE;          /* Purplish-Blue */
    --color-primary-dark: #357ABD;    /* Darker Blue */
    --color-secondary-dark: #2A7C6F;  /* Darker Greenish-Blue */
    --color-accent-dark: #5552A6;     /* Darker Purplish-Blue */

    /* Neutral & Text Colors */
    --color-text-dark: #222222;       /* For Headings */
    --color-text-body: #333333;       /* For Body Text */
    --color-text-light: #FFFFFF;      /* For Text on Dark Backgrounds */
    --color-text-muted: #6c757d;      /* Muted text */
    --color-bg-light: #F8F9FA;        /* Light Background */
    --color-bg-dark: #212529;         /* Dark Background (e.g., Footer) */
    --color-bg-medium: #E9ECEF;       /* Medium Background (e.g., sections) */
    --color-border: #dee2e6;          /* Default Border Color */

    /* Glassmorphism */
    --color-glass-bg: rgba(255, 255, 255, 0.2);
    --color-glass-bg-darker: rgba(255, 255, 255, 0.3); /* Slightly less transparent */
    --color-glass-border: rgba(255, 255, 255, 0.3);
    --glass-blur: 10px;

    /* Gradients & Overlays */
    --gradient-primary: linear-gradient(135deg, var(--color-primary), var(--color-accent));
    --gradient-secondary: linear-gradient(135deg, var(--color-secondary), var(--color-primary));
    --overlay-dark: rgba(0, 0, 0, 0.5);
    --overlay-light: rgba(255, 255, 255, 0.1);

    /* Layout */
    --container-padding-x: 1.5rem; /* px-6 */
    --header-height: 5rem; /* Approx 80px - adjust based on final design */
    --header-height-mobile: 4rem; /* Approx 64px */
    --section-padding-y: 4rem; /* py-16 */
    --section-padding-y-md: 6rem; /* md:py-24 */
    --card-border-radius: 0.75rem; /* rounded-xl */
    --button-border-radius: 9999px; /* rounded-full */

    /* Transitions & Animations */
    --transition-speed: 0.3s;
    --transition-timing: ease-in-out;
    --transition-transform: transform var(--transition-speed) var(--transition-timing), box-shadow var(--transition-speed) var(--transition-timing);
}

/* Base HTML & Body Setup */
html {
    scroll-behavior: smooth;
    box-sizing: border-box;
}

*, *::before, *::after {
    box-sizing: inherit;
}

body {
    font-family: var(--font-body);
    color: var(--color-text-body);
    background-color: var(--color-bg-light);
    line-height: 1.6;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden; /* Prevent horizontal scroll */
    margin: 0; /* Reset default margin */
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--color-text-dark);
    font-weight: 700;
    line-height: 1.3;
    margin-top: 0;
    margin-bottom: 0.75rem; /* Consistent spacing below headings */
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
}

h1 { font-size: clamp(2.5rem, 5vw, 3.5rem); } /* Responsive H1 */
h2 { font-size: clamp(2rem, 4vw, 2.75rem); } /* Responsive H2 */
h3 { font-size: clamp(1.5rem, 3vw, 1.75rem); } /* Responsive H3 */
h4 { font-size: clamp(1.25rem, 2.5vw, 1.5rem); }

/* Paragraphs & Links */
p {
    margin-bottom: 1rem; /* Consistent paragraph spacing */
    max-width: 75ch; /* Improve readability */
}
/* Center paragraphs within centered containers */
.text-center p {
    margin-left: auto;
    margin-right: auto;
}

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

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

/* Section Base Styles */
section {
    padding-top: var(--section-padding-y);
    padding-bottom: var(--section-padding-y);
}

@media (min-width: 768px) {
    section {
        padding-top: var(--section-padding-y-md);
        padding-bottom: var(--section-padding-y-md);
    }
}

/* Utility for Centered Section Titles */
.section-title {
    text-align: center;
    margin-bottom: 3rem; /* More space after titles */
}

/* ==========================================================================
   2. Header / Navigation
   ========================================================================== */

.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    transition: background-color var(--transition-speed) var(--transition-timing),
                backdrop-filter var(--transition-speed) var(--transition-timing),
                box-shadow var(--transition-speed) var(--transition-timing);
    padding-top: 1rem; /* py-4 */
    padding-bottom: 1rem; /* py-4 */
    /* Initial state is transparent/slightly glassy */
    background-color: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border-bottom: 1px solid transparent; /* Prepare for scrolled state border */
}

.header-scrolled {
    background-color: var(--color-glass-bg-darker); /* More opaque */
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    border-bottom: 1px solid var(--color-glass-border);
}

/* Ensure nav links have good contrast */
.header nav a {
    color: var(--color-text-dark); /* Dark text on light glass header */
    font-weight: 600;
    padding: 0.5rem 0;
    position: relative;
    transition: color var(--transition-speed) var(--transition-timing);
}
.header nav a:hover {
    color: var(--color-primary);
    text-decoration: none;
}
/* Underline effect on hover */
.header nav a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--color-primary);
    transition: width var(--transition-speed) var(--transition-timing);
}
.header nav a:hover::after {
    width: 60%;
}

/* Header CTA button (uses global button styles, but specific alignment if needed) */
.header .cta-button {
    /* Tailwind handles spacing */
}

/* Mobile Menu Styles */
#mobile-menu {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 250px; /* Or use Tailwind w-64 */
    background-color: var(--color-bg-light);
    z-index: 1100; /* Above header */
    box-shadow: 5px 0 15px rgba(0, 0, 0, 0.1);
    transform: translateX(-100%);
    transition: transform var(--transition-speed) var(--transition-timing);
}
#mobile-menu.mobile-menu-open {
    transform: translateX(0);
}

#mobile-menu nav {
    padding-top: calc(var(--header-height-mobile) + 1rem);
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}
#mobile-menu nav a {
    display: block;
    padding: 0.75rem 0;
    color: var(--color-text-dark);
    font-weight: 600;
}
#mobile-menu nav a:hover {
    color: var(--color-primary);
}
#mobile-menu .cta-button {
    margin-top: 1.5rem;
    display: block;
    text-align: center;
}
#close-menu-button {
    position: absolute;
    top: 1rem;
    right: 1rem;
    color: var(--color-text-muted);
}


/* ==========================================================================
   3. Global Button Styles
   ========================================================================== */

.btn, button, input[type="submit"] {
    display: inline-block;
    font-family: var(--font-body);
    font-weight: 600;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    border: 1px solid transparent;
    padding: 0.75rem 1.5rem; /* Adjust padding */
    font-size: 1rem;
    border-radius: var(--button-border-radius);
    transition: var(--transition-transform);
    text-decoration: none; /* Remove underline from link buttons */
    line-height: 1.5; /* Ensure consistent height */
    transform-style: preserve-3d; /* For 3D effects */
    perspective: 1000px; /* For 3D effects */
}

.btn:hover, button:hover, input[type="submit"]:hover {
    text-decoration: none; /* Ensure no underline on hover */
    transform: translateY(-3px) scale(1.03) rotateX(5deg); /* Subtle 3D lift */
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15);
}

.btn:active, button:active, input[type="submit"]:active {
    transform: translateY(0px) scale(1) rotateX(0deg); /* Press down effect */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Primary Button */
.btn-primary {
    color: var(--color-text-light);
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}
.btn-primary:hover {
    background-color: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    color: var(--color-text-light); /* Ensure text color stays */
}

/* Secondary Button */
.btn-secondary {
    color: var(--color-text-light);
    background-color: var(--color-secondary);
    border-color: var(--color-secondary);
}
.btn-secondary:hover {
    background-color: var(--color-secondary-dark);
    border-color: var(--color-secondary-dark);
    color: var(--color-text-light);
}

/* Accent Button */
.btn-accent {
    color: var(--color-text-light);
    background-color: var(--color-accent);
    border-color: var(--color-accent);
}
.btn-accent:hover {
    background-color: var(--color-accent-dark);
    border-color: var(--color-accent-dark);
    color: var(--color-text-light);
}

/* Outline Button Example */
.btn-outline-primary {
    color: var(--color-primary);
    background-color: transparent;
    border-color: var(--color-primary);
}
.btn-outline-primary:hover {
    color: var(--color-text-light);
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

/* Apply global styles using Tailwind classes where appropriate in HTML */
/* e.g., <button class="btn btn-primary ..."> or use Tailwind directly */
/* These definitions serve as a base or for elements not easily styled by Tailwind */

/* ==========================================================================
   4. Global Form Styles
   ========================================================================== */

.form-input,
textarea.form-input {
    display: block;
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--color-text-body);
    background-color: rgba(255, 255, 255, 0.5); /* Semi-transparent */
    background-clip: padding-box;
    border: 1px solid var(--color-border);
    appearance: none; /* Remove default styling */
    border-radius: 0.5rem; /* Consistent radius */
    transition: border-color var(--transition-speed) var(--transition-timing),
                box-shadow var(--transition-speed) var(--transition-timing);
}

.form-input:focus,
textarea.form-input:focus {
    color: var(--color-text-body);
    background-color: rgba(255, 255, 255, 0.7); /* Slightly more opaque on focus */
    border-color: var(--color-primary);
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(var(--color-primary), 0.25); /* Use primary color for focus ring */
}

textarea.form-input {
    min-height: calc(1.5em + 1.5rem + 2px); /* Default height for textarea */
    resize: vertical; /* Allow vertical resizing */
}

/* Form Labels */
label {
    display: inline-block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: var(--color-text-dark);
}

/* ==========================================================================
   5. Card Styles (Global Pattern)
   ========================================================================== */

.card {
    background-color: var(--color-bg-light); /* Default background */
    border: 1px solid var(--color-border);
    border-radius: var(--card-border-radius);
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
    transition: var(--transition-transform);
    display: flex; /* Enable flex for centering */
    flex-direction: column; /* Stack image and content vertically */
    /* align-items: center; */ /* Center content horizontally IF needed globally */
    text-align: center; /* Center text within card */
    height: 100%; /* Make cards in a grid equal height */
}

/* Glassmorphism Card Variant */
.glass-card {
    background: var(--color-glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--color-glass-border);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
    color: var(--color-text-dark); /* Ensure text is readable on light glass */
}
/* Ensure nested elements contrast well */
.glass-card h3, .glass-card p {
     color: var(--color-text-dark);
}
/* For glass cards on dark backgrounds (like stats section) */
.bg-secondary .glass-card, .bg-dark .glass-card {
     background: rgba(255, 255, 255, 0.1); /* Darker glass */
     border: 1px solid rgba(255, 255, 255, 0.2);
     color: var(--color-text-light); /* Light text on dark glass */
}
.bg-secondary .glass-card h3, .bg-secondary .glass-card p,
.bg-dark .glass-card h3, .bg-dark .glass-card p {
     color: var(--color-text-light);
     text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}


/* Card Hover Effect (Subtle 3D) */
.card:hover {
    transform: translateY(-5px) scale(1.02) rotateX(2deg) rotateY(-1deg); /* Subtle 3D lift */
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.1);
}

/* Card Image Container */
.card .card-image,
.card .image-container {
    width: 100%; /* Full width of card */
    /* height: 12rem; */ /* Example fixed height (adjust as needed: 192px) */
    aspect-ratio: 16 / 10; /* Maintain aspect ratio instead of fixed height */
    overflow: hidden; /* Clip the image */
    margin-left: auto; /* Center block element */
    margin-right: auto; /* Center block element */
    flex-shrink: 0; /* Prevent shrinking */
}

/* Card Image */
.card .card-image img,
.card .image-container img {
    display: block; /* Remove extra space below image */
    width: 100%;
    height: 100%;
    object-fit: cover; /* Cover the container, cropping if needed */
    object-position: center; /* Center the image within its container */
    margin-left: auto; /* Ensure centering */
    margin-right: auto; /* Ensure centering */
    transition: transform var(--transition-speed) var(--transition-timing);
}

.card:hover img {
    transform: scale(1.05); /* Slight zoom on hover */
}

/* Card Content */
.card .card-content {
    padding: 1.5rem;
    flex-grow: 1; /* Allow content to fill remaining space */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Push actions (like links) to bottom */
}
.card .card-content h3 {
    margin-bottom: 0.5rem;
}
.card .card-content p {
    margin-bottom: 1rem;
    color: var(--color-text-body); /* Ensure body text color */
    font-size: 0.95rem;
}
.glass-card .card-content p {
    color: var(--color-text-dark); /* Darker text on light glass */
}
.bg-secondary .glass-card .card-content p, .bg-dark .glass-card .card-content p {
     color: var(--color-text-light); /* Adjust if glass is on dark bg */
}


/* Card "Read More" Link */
.card .card-content a {
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: none;
    display: inline-block; /* Allow margin */
    margin-top: auto; /* Push to bottom in flex container */
    align-self: center; /* Center horizontally */
    padding: 0.25rem 0; /* Add some padding */
    position: relative;
}
.card .card-content a:hover {
    color: var(--color-primary-dark);
    text-decoration: none; /* Keep decoration off for effect */
}
/* Underline effect */
.card .card-content a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    display: block;
    margin-top: 2px;
    right: 0;
    background: var(--color-primary-dark);
    transition: width var(--transition-speed) ease;
    -webkit-transition: width var(--transition-speed) ease;
}
.card .card-content a:hover::after {
    width: 100%;
    left: 0;
    background: var(--color-primary-dark);
}


/* ==========================================================================
   6. Section Specific Styles
   ========================================================================== */

/* Hero Section */
#hero {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    color: var(--color-text-light); /* Ensure text is white */
    padding-top: calc(var(--header-height) + var(--section-padding-y)); /* Account for fixed header */
    padding-bottom: var(--section-padding-y);
    min-height: 70vh; /* Ensure reasonable height */
}

/* Dark Overlay for Hero */
#hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--overlay-dark); /* Use variable */
    z-index: 1;
}

#hero > div { /* Content container */
    position: relative;
    z-index: 2;
}

#hero h1 {
    color: var(--color-text-light);
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); /* Stronger shadow for readability */
}

#hero p {
    color: var(--color-text-light);
    opacity: 0.9;
    max-width: 65ch;
    margin-left: auto;
    margin-right: auto;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
    font-size: 1.1rem;
}

#hero .cta-button {
    margin-top: 1.5rem;
}

/* Vision Section */
#vision .image-container img {
    border-radius: var(--card-border-radius);
}

/* Process Section */
#process .grid > div { /* Target the steps */
    text-align: center;
}
#process .bg-secondary { /* The number circle */
    flex-shrink: 0; /* Prevent shrinking */
}
/* Progress Bar */
#process .bg-gray-200 { /* Track */
    background-color: var(--color-border);
    overflow: hidden; /* Ensure rounded corners */
}
#process .bg-secondary, /* Filled part (steps 1-3) */
#process .bg-primary {  /* Filled part (step 4 - primary) */
    transition: width 0.5s ease-in-out;
}

/* Awards Section */
#awards img {
    transition: filter var(--transition-speed) var(--transition-timing), transform var(--transition-speed) var(--transition-timing);
}
#awards img:hover {
    filter: none; /* Remove grayscale on hover */
    transform: scale(1.1);
}

/* Behind the Scenes */
#behind-the-scenes .image-container {
    position: relative;
    overflow: hidden;
}
#behind-the-scenes img {
     transition: transform 0.5s ease;
}
#behind-the-scenes .image-container:hover img {
    transform: scale(1.08);
}

/* Partners Section */
#partners img {
    transition: filter var(--transition-speed) var(--transition-timing), transform var(--transition-speed) var(--transition-timing);
    filter: grayscale(80%); /* Slightly less gray */
    opacity: 0.8;
}
#partners img:hover {
    filter: none;
    opacity: 1;
    transform: scale(1.1);
}

/* Stats Section */
#stats {
    background-color: var(--color-secondary); /* Use variable */
    color: var(--color-text-light);
}
#stats h2, #stats p {
    color: var(--color-text-light); /* Ensure text is light */
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
}
#stats .glass-card p:first-child { /* The large number */
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--color-text-light);
}
#stats .glass-card p:nth-child(2) { /* Title */
    font-weight: 600;
    opacity: 0.9;
}
#stats .glass-card p:last-child { /* Description */
    font-size: 0.9rem;
    opacity: 0.8;
}

/* Resources Section */
#resources .card h3 {
    font-size: 1.1rem; /* Slightly smaller headings */
}
#resources .card p {
    font-size: 0.9rem;
    color: var(--color-text-muted);
}

/* Contact Section */
#contact .flex-wrap {
    align-items: flex-start; /* Align items top */
}
#contact .form-input, #contact textarea.form-input {
     background-color: rgba(255, 255, 255, 0.7); /* More opaque for better readability */
}

/* ==========================================================================
   7. Footer
   ========================================================================== */

footer {
    background-color: var(--color-bg-dark);
    color: var(--color-text-light);
    padding-top: var(--section-padding-y);
    padding-bottom: calc(var(--section-padding-y) / 2); /* Less padding at bottom */
}

footer h4 {
    color: var(--color-text-light);
    margin-bottom: 1rem;
    font-size: 1.2rem;
}

footer p, footer ul {
    margin-bottom: 0;
    font-size: 0.9rem;
}

footer ul {
    list-style: none;
    padding: 0;
}

footer li {
    margin-bottom: 0.5rem;
}

footer a {
    color: rgba(255, 255, 255, 0.7); /* Muted light text */
    text-decoration: none;
    transition: color var(--transition-speed) var(--transition-timing);
}

footer a:hover {
    color: var(--color-primary); /* Use primary color for hover */
    text-decoration: underline;
}

/* Footer Social Links (Text Only) */
footer div:last-child ul { /* Target the social links column */
    /* display: flex; */ /* Uncomment if horizontal layout desired */
    /* gap: 1rem; */ /* Uncomment if horizontal layout desired */
}
footer div:last-child ul a {
    font-weight: 600; /* Make social links slightly bolder */
    /* Add padding if needed for better click targets */
    /* padding: 0.25rem 0; */
}

/* Footer Bottom Bar */
footer .border-t {
    border-color: rgba(255, 255, 255, 0.15); /* Lighter border */
    padding-top: 1.5rem;
    margin-top: 2rem;
    font-size: 0.85rem;
    opacity: 0.7;
}

/* ==========================================================================
   8. Page Specific Styles
   ========================================================================== */

/* Success Page */
body[data-barba-namespace="success"] main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding-top: 0; /* Override section padding */
    padding-bottom: 0; /* Override section padding */
}
body[data-barba-namespace="success"] .container {
    width: 100%;
}

/* Privacy & Terms Pages */
body[data-barba-namespace="privacy"] main,
body[data-barba-namespace="terms"] main {
    padding-top: calc(var(--header-height) + 2rem); /* Add space below fixed header (100px approx) */
    padding-bottom: var(--section-padding-y-md);
}
/* Ensure prose styles have good contrast */
.prose {
    color: var(--color-text-body);
}
.prose h1, .prose h2, .prose h3, .prose h4, .prose strong {
    color: var(--color-text-dark);
}
.prose a {
    color: var(--color-primary);
    font-weight: 600;
}
.prose a:hover {
    color: var(--color-primary-dark);
}
.prose ul > li::before {
     background-color: var(--color-text-body);
}

/* ==========================================================================
   9. Animations & Transitions
   ========================================================================== */

/* Barba.js Transition (Basic Fade) */
.barba-transition {
    transition: opacity 0.5s var(--transition-timing);
    opacity: 1;
}
html.is-transitioning .barba-transition {
    opacity: 0;
}

/* General Hover Effects (applied via :hover pseudo-class) */

/* Add subtle animation to elements on load/scroll (requires JS Intersection Observer) */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.animate-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Parallax effect would typically require JS to manipulate background position or element transform based on scroll position. */

/* ==========================================================================
   10. Cookie Consent Bar
   ========================================================================== */
/* Styles included inline in HTML for simplicity as requested */

/* ==========================================================================
   11. Responsive Adjustments (Tailwind handles most)
   ========================================================================== */

/* Example: Adjust padding on smaller screens if needed */
@media (max-width: 767px) {
    body { font-size: 15px; }
    h1 { font-size: 2rem; }
    h2 { font-size: 1.75rem; }
    h3 { font-size: 1.35rem; }

    :root {
        --section-padding-y: 3rem; /* Slightly less padding on mobile */
    }

    /* Adjust card image height for mobile */
    .card .card-image,
    .card .image-container {
        /* aspect-ratio: 16 / 10; */ /* Maintain aspect ratio */
        /* height: 10rem; */ /* Or adjust fixed height */
    }

     #hero {
        min-height: 60vh;
    }

    /* Ensure footer columns stack nicely - Tailwind usually handles this */
}