/* style.css */

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

1.  ROOT VARIABLES
    1.1 Colors (Tetrad Scheme)
    1.2 Typography
    1.3 Neomorphism & Shadows
    1.4 Borders & Spacing
2.  BASE & RESET STYLES
    2.1 HTML & Body
    2.2 Typography Defaults
    2.3 Links
    2.4 Utility Classes
3.  LAYOUT
    3.1 Container
    3.2 Grid System (Basic)
4.  HEADER & NAVIGATION
    4.1 Site Header
    4.2 Main Navigation
    4.3 Mobile Navigation (Burger)
5.  HERO SECTION
6.  GENERAL SECTION STYLING
7.  CARD COMPONENTS (GLOBAL & SPECIFIC)
    7.1 Base Card (.card) - Neomorphic
    7.2 Image Handling in Cards
    7.3 Workshop Card
    7.4 Blog Post Card
    7.5 Resource Card
    7.6 Event Item
    7.7 Team Member Card
    7.8 Process Step Card
8.  BUTTONS (GLOBAL STYLES)
    8.1 .cta-button (Primary)
    8.2 .cta-button-secondary
    8.3 .cta-button-workshop, .external-link-button
    8.4 .read-more-link
9.  FORM ELEMENTS (GLOBAL STYLES)
10. ACCORDION COMPONENT
11. FOOTER
    11.1 Footer Layout
    11.2 Footer Text & Links
    11.3 Footer Social Links (Text-based)
12. SPECIFIC PAGE STYLING
    12.1 Success Page (success.html)
    12.2 Legal Pages (privacy.html, terms.html)
    12.3 About Page Specifics (Timeline, Team)
    12.4 Contact Page Specifics
13. ANIMATIONS & TRANSITIONS
14. HYPERREALISTIC TEXTURES & GLASSMORPHISM (Hints/Placeholders)
15. MEDIA QUERIES (RESPONSIVENESS)
-------------------------------------------------------------------*/

/* 1. ROOT VARIABLES */
:root {
    /* 1.1 Colors (Tetrad Scheme) */
    --color-primary: #7B61FF; /* Vibrant Purple - Main */
    --color-primary-darker: #5c40cc;
    --color-secondary: #3D4A5C; /* Dark Slate Blue - Supportive, Text */
    --color-accent1: #FFA07A; /* Light Salmon - Accent */
    --color-accent1-darker: #e07a50;
    --color-accent2: #00C49F; /* Turquoise/Green - Positive Action, Accent */
    --color-accent2-darker: #00a080;

    --color-background: #F0F2F5; /* Light Grey - Neomorphism Base */
    --color-background-alt: #E8EBF0; /* Slightly darker for depth */
    --color-surface: var(--color-background); /* For card surfaces etc. */

    --color-text-light: #FFFFFF;
    --color-text-body: var(--color-secondary);
    --color-text-headings: #2C3A47; /* Darker for strong contrast */
    --color-text-muted: #6c757d;

    /* Gradient examples */
    --gradient-primary: linear-gradient(135deg, var(--color-primary), var(--color-accent2));
    --gradient-subtle-bg: linear-gradient(180deg, rgba(240,242,245,0.5) 0%, rgba(232,235,240,0.8) 100%);
    --dark-overlay-gradient: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5));

    /* 1.2 Typography */
    --font-heading: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-body: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-base-size: 16px;
    --line-height-base: 1.7;
    --line-height-heading: 1.3;

    /* 1.3 Neomorphism & Shadows */
    /* Main surface color: var(--color-background) or var(--color-surface) */
    --shadow-light-source: rgba(255, 255, 255, 0.7); /* Light part of the shadow */
    --shadow-dark-source: rgba(174, 174, 192, 0.4); /* Dark part of the shadow, adjust opacity based on bg */
    
    --shadow-raised-light: -6px -6px 12px var(--shadow-light-source);
    --shadow-raised-dark: 6px 6px 12px var(--shadow-dark-source);
    --shadow-raised-hover-light: -8px -8px 16px var(--shadow-light-source);
    --shadow-raised-hover-dark: 8px 8px 16px var(--shadow-dark-source);

    --shadow-pressed-light: inset -4px -4px 8px var(--shadow-light-source);
    --shadow-pressed-dark: inset 4px 4px 8px var(--shadow-dark-source);
    --shadow-pressed-focus-light: inset -5px -5px 10px var(--shadow-light-source);
    --shadow-pressed-focus-dark: inset 5px 5px 10px var(--shadow-dark-source);

    /* 1.4 Borders & Spacing */
    --border-radius-soft: 20px; /* Softer for neomorphism */
    --border-radius-medium: 15px;
    --border-radius-small: 10px;
    --spacing-unit: 1rem; /* Approx 16px */
}

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

/* 2.1 HTML & Body */
html {
    font-size: var(--font-base-size);
    scroll-behavior: smooth;
    -webkit-tap-highlight-color: transparent;
}

body {
    font-family: var(--font-body);
    line-height: var(--line-height-base);
    color: var(--color-text-body);
    background-color: var(--color-background);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden; /* Prevent horizontal scrollbars */
}

.site-container {
    width: 100%;
    overflow-x: hidden;
}

/* 2.2 Typography Defaults */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--color-text-headings);
    margin-bottom: calc(var(--spacing-unit) * 0.75);
    line-height: var(--line-height-heading);
    font-weight: 700;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.03); /* Very subtle shadow for dark text on light bg */
}

h1 { font-size: clamp(2.2rem, 5vw, 3.5rem); font-weight: 900; }
h2 { font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 900; }
h3 { font-size: clamp(1.4rem, 3vw, 1.8rem); }
h4 { font-size: clamp(1.2rem, 2.5vw, 1.5rem); }

p {
    margin-bottom: var(--spacing-unit);
    max-width: 75ch; /* Optimal reading line length */
}

strong, b { font-weight: 700; }
em, i { font-style: italic; }

/* 2.3 Links */
a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color 0.3s ease, opacity 0.3s ease;
}
a:hover, a:focus {
    color: var(--color-primary-darker);
    text-decoration: underline;
    outline: 2px solid transparent; /* For better focus state if needed */
    outline-offset: 2px;
}

/* 2.4 Utility Classes */
.text-center { text-align: center; }
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}
.full-width { width: 100%; }
.mb-1 { margin-bottom: var(--spacing-unit); }
.mb-2 { margin-bottom: calc(var(--spacing-unit) * 2); }
/* Add more as needed */

/* 3. LAYOUT */
/* 3.1 Container */
.container {
    width: 90%;
    max-width: 1200px; /* Standard max width */
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--spacing-unit);
    padding-right: var(--spacing-unit);
}

/* 3.2 Grid System (Basic example, can be expanded) */
.grid-layout {
    display: grid;
    gap: calc(var(--spacing-unit) * 2);
}
/* Default to 1 column, override for larger screens */
@media (min-width: 768px) {
    .grid-layout-cols-2 { grid-template-columns: repeat(2, 1fr); }
    .grid-layout-cols-3 { grid-template-columns: repeat(3, 1fr); }
    .grid-layout-cols-auto-fit { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));}
}

.mission-content.grid-layout,
.contact-form-container.grid-layout {
    align-items: center; /* Vertically align items if they have different heights */
}
@media (min-width: 768px) {
    .mission-content.grid-layout,
    .contact-form-container.grid-layout {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); /* Ensure columns don't overflow */
    }
     .mission-content .column-text, .contact-form-container .contact-details {
        padding-right: calc(var(--spacing-unit) * 2);
    }
    .mission-content .column-visual, .contact-form-container .contact-form {
        padding-left: calc(var(--spacing-unit) * 2);
    }
     .mission-content .column-text { order: 1; }
     .mission-content .column-visual { order: 2; }
     .contact-form-container .contact-details { order: 1; }
     .contact-form-container .contact-form { order: 2; }
}


/* 4. HEADER & NAVIGATION */
/* 4.1 Site Header */
.site-header {
    background-color: var(--color-background);
    padding: var(--spacing-unit) 0;
    box-shadow: var(--shadow-raised-light), var(--shadow-raised-dark);
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.logo {
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 3vw, 1.8rem);
    font-weight: 900;
    color: var(--color-primary);
    text-decoration: none;
}
.logo:hover { text-decoration: none; opacity: 0.85; }

/* 4.2 Main Navigation */
.main-navigation .nav-list {
    list-style: none;
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1.8);
}
.main-navigation .nav-link {
    font-family: var(--font-body);
    font-weight: 500;
    color: var(--color-text-body);
    font-size: 1rem;
    padding: calc(var(--spacing-unit) * 0.5) 0;
    position: relative;
    text-decoration: none;
}
.main-navigation .nav-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--color-primary);
    transition: width 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); /* Non-linear */
}
.main-navigation .nav-link:hover::after,
.main-navigation .nav-link.active::after {
    width: 100%;
}
.main-navigation .nav-link:hover,
.main-navigation .nav-link.active {
    color: var(--color-primary);
    text-decoration: none;
}

/* 4.3 Mobile Navigation (Burger) */
.nav-toggle {
    display: none; /* Hidden by default, shown in media query */
    background: transparent;
    border: none;
    cursor: pointer;
    padding: calc(var(--spacing-unit) * 0.5);
    z-index: 1001; /* Above nav list when open */
}
.hamburger-icon {
    display: block;
    width: 25px;
    height: 3px;
    background-color: var(--color-text-headings);
    position: relative;
    transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55), background-color 0s 0.15s; /* Non-linear, delay bg color change */
}
.hamburger-icon::before,
.hamburger-icon::after {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background-color: var(--color-text-headings);
    position: absolute;
    left: 0;
    transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55), top 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.1s, bottom 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.1s; /* Non-linear */
}
.hamburger-icon::before { top: -8px; }
.hamburger-icon::after { bottom: -8px; }

.nav-toggle[aria-expanded="true"] .hamburger-icon {
    background-color: transparent; /* Middle bar disappears */
}
.nav-toggle[aria-expanded="true"] .hamburger-icon::before {
    top: 0;
    transform: rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .hamburger-icon::after {
    bottom: 0;
    transform: rotate(-45deg);
}


/* 5. HERO SECTION */
.hero-section {
    /* min-height: 85vh; - User constraint: natural height */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: calc(var(--spacing-unit) * 6) var(--spacing-unit); /* Generous padding */
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    position: relative; /* For pseudo-elements or overlays if needed */
    /* The linear-gradient is applied inline in HTML */
}
.hero-content {
    max-width: 800px;
    z-index: 2; /* Above background/overlay */
}
.hero-title {
    /* color: var(--color-text-light); Already set inline for strictness */
    /* text-shadow: 2px 2px 4px rgba(0,0,0,0.7); Already set inline for strictness */
    margin-bottom: var(--spacing-unit);
}
.hero-subtitle {
    /* color: var(--color-text-light); Already set inline for strictness */
    /* text-shadow: 1px 1px 3px rgba(0,0,0,0.6); Already set inline for strictness */
    font-size: clamp(1.1rem, 2vw, 1.3rem);
    line-height: 1.8;
    margin-bottom: calc(var(--spacing-unit) * 2);
    max-width: 650px;
    margin-left: auto;
    margin-right: auto;
}
/* Hero CTA already covered by global button styles */
.page-hero-section { /* For inner pages */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: calc(var(--spacing-unit) * 4) var(--spacing-unit);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}


/* 6. GENERAL SECTION STYLING */
.content-section {
    padding-top: calc(var(--spacing-unit) * 4);
    padding-bottom: calc(var(--spacing-unit) * 4);
}
.content-section:nth-child(even) {
    background-color: var(--color-background-alt); /* Subtle variation for sections */
}
.section-title {
    text-align: center;
    margin-bottom: calc(var(--spacing-unit) * 1.5);
    color: var(--color-text-headings);
}
.section-intro {
    text-align: center;
    font-size: 1.1rem;
    color: var(--color-text-body);
    max-width: 700px;
    margin: 0 auto calc(var(--spacing-unit) * 2.5) auto;
}

/* 7. CARD COMPONENTS (GLOBAL & SPECIFIC) */
/* 7.1 Base Card (.card) - Neomorphic */
.card {
    background-color: var(--color-surface);
    border-radius: var(--border-radius-soft);
    padding: calc(var(--spacing-unit) * 1.5);
    box-shadow: var(--shadow-raised-light), var(--shadow-raised-dark);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Non-linear */
    display: flex;
    flex-direction: column;
    /* align-items: center; Applied specifically where image is direct child or needs centering */
    text-align: center; /* Ensures text content inside is centered by default */
    overflow: hidden; /* Important for child elements with border-radius */
}
.card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: var(--shadow-raised-hover-light), var(--shadow-raised-hover-dark);
}

/* 7.2 Image Handling in Cards */
.card .card-image, .card .image-container { /* Div wrapper for image */
    width: 100%;
    /* max-width: 300px; /* Example constraint if needed */
    margin-left: auto;
    margin-right: auto;
    margin-bottom: var(--spacing-unit);
    border-radius: var(--border-radius-medium); /* Rounded corners for the container */
    overflow: hidden; /* Crucial for object-fit and border-radius on image */
    /* Forcing aspect ratio if needed, e.g., 16:9 for consistency */
    /* aspect-ratio: 16 / 9;  */
    /* Or fixed height */
    height: 200px; /* Fixed height for image containers in cards, adjust as needed */
    display: flex; /* To center image if it's smaller than container */
    align-items: center;
    justify-content: center;
}
.card .card-image img, .card .image-container img {
    width: 100%;
    height: 100%; /* Fill the container */
    object-fit: cover; /* Cover the area, crop if necessary */
    display: block;
    border-radius: inherit; /* Inherit from .image-container if desired, or set none */
    transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}
.card:hover .card-image img, .card:hover .image-container img {
    transform: scale(1.05); /* Subtle zoom on hover */
}
.card-content {
    flex-grow: 1; /* Allows content to fill space */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Pushes elements apart if needed */
    align-items: center; /* Ensures content within card-content is centered */
    width: 100%;
}
.card-content h3 {
    font-size: clamp(1.2rem, 2.5vw, 1.5rem);
    color: var(--color-primary);
    margin-bottom: calc(var(--spacing-unit) * 0.5);
}
.card-content p {
    font-size: 0.95rem;
    margin-bottom: var(--spacing-unit);
    flex-grow: 1; /* Allow p to take space if needed */
}

/* Specific Card Grids */
.about-us-grid, .process-steps-grid, .workshops-grid, .blog-posts-grid, .resources-grid, .team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); /* Responsive columns */
    gap: calc(var(--spacing-unit) * 2);
}

/* 7.3 Workshop Card */
.workshop-card .card-image.image-container { /* Image as background for text overlay */
    position: relative;
    background-size: cover;
    background-position: center;
    min-height: 200px;
    display: flex; /* For aligning overlay content */
    align-items: flex-end; /* Align title to bottom */
    justify-content: center; /* Center title horizontally */
    padding: var(--spacing-unit);
    text-align: center;
    /* Linear gradient applied inline */
}
.workshop-card .card-image.image-container .card-image-overlay-content {
    position: relative;
    z-index: 2;
}
.workshop-on-image-title {
    color: var(--color-text-light);
    font-size: clamp(1.4rem, 3vw, 1.7rem);
    text-shadow: 1px 1px 3px rgba(0,0,0,0.7);
    margin: 0;
}

/* 7.4 Blog Post Card */
.blog-post-card .post-meta {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    margin-bottom: calc(var(--spacing-unit) * 0.75);
}
.blog-post-card .post-title { /* Overrides default card h3 color if needed */
    color: var(--color-text-headings);
}

/* 7.5 Resource Card - uses base card styles */

/* 7.6 Event Item */
.events-list .event-item.card {
    display: flex;
    flex-direction: row; /* Horizontal layout for event items */
    align-items: flex-start; /* Align items to the top */
    text-align: left; /* Override card's text-align: center */
    gap: calc(var(--spacing-unit) * 1.5);
}
.event-date-badge {
    background-color: var(--color-primary);
    color: var(--color-text-light);
    padding: calc(var(--spacing-unit) * 0.75);
    border-radius: var(--border-radius-small);
    text-align: center;
    min-width: 70px;
    height: fit-content; /* Adjusts to content */
    box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
}
.event-date-badge .month {
    display: block;
    font-size: 0.85rem;
    font-weight: bold;
    text-transform: uppercase;
    line-height: 1.2;
}
.event-date-badge .day {
    display: block;
    font-size: 1.8rem;
    font-weight: 900;
    line-height: 1;
}
.event-item .card-content {
    padding: 0; /* Remove card's inner padding for this specific layout */
    align-items: flex-start; /* Align content to left */
}
.event-item h3 {
    font-size: clamp(1.2rem, 2.5vw, 1.4rem);
    margin-bottom: calc(var(--spacing-unit) * 0.5);
    color: var(--color-text-headings);
}
.event-meta {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    margin-bottom: calc(var(--spacing-unit) * 0.75);
}

/* 7.7 Team Member Card (Styles in About Page Specifics) */
/* 7.8 Process Step Card - uses base card styles */

/* 8. BUTTONS (GLOBAL STYLES) */
.cta-button, .cta-button-secondary, .cta-button-workshop, .external-link-button,
button, input[type="submit"], input[type="button"] {
    display: inline-block;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1rem;
    padding: calc(var(--spacing-unit) * 0.9) calc(var(--spacing-unit) * 2);
    border-radius: var(--border-radius-soft);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275),
                background-color 0.3s ease,
                color 0.3s ease,
                box-shadow 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: none; /* Key for neomorphism */
    -webkit-appearance: none; /* Removes default iOS styling */
    -moz-appearance: none;
    appearance: none;
    line-height: 1.5; /* Ensure text is vertically centered */
}

/* 8.1 .cta-button (Primary) */
.cta-button, button[type="submit"] { /* Apply to general submit buttons too */
    background-color: var(--color-primary);
    color: var(--color-text-light);
    box-shadow: var(--shadow-raised-light), var(--shadow-raised-dark);
}
.cta-button:hover, .cta-button:focus,
button[type="submit"]:hover, button[type="submit"]:focus {
    background-color: var(--color-primary-darker);
    color: var(--color-text-light); /* Ensure text remains light */
    transform: translateY(-3px) scale(1.03);
    box-shadow: var(--shadow-raised-hover-light), var(--shadow-raised-hover-dark);
    text-decoration: none;
}
.cta-button:active, button[type="submit"]:active {
    transform: translateY(1px) scale(0.98);
    box-shadow: var(--shadow-pressed-light), var(--shadow-pressed-dark);
}

/* 8.2 .cta-button-secondary */
.cta-button-secondary {
    background-color: transparent;
    color: var(--color-primary);
    /* Create a neomorphic "outlined" effect */
    box-shadow: var(--shadow-raised-light), var(--shadow-raised-dark);
    /* Add a subtle border that matches background to enhance depth */
    border: 2px solid var(--color-surface); /* Same as card background for subtle edge */
}
.cta-button-secondary:hover, .cta-button-secondary:focus {
    background-color: var(--color-background-alt); /* Slight change on hover */
    color: var(--color-primary-darker);
    transform: translateY(-2px);
    box-shadow: var(--shadow-raised-hover-light), var(--shadow-raised-hover-dark);
    border-color: var(--color-background-alt);
    text-decoration: none;
}
.cta-button-secondary:active {
    transform: translateY(1px);
    box-shadow: var(--shadow-pressed-light), var(--shadow-pressed-dark);
}

/* 8.3 .cta-button-workshop, .external-link-button */
.cta-button-workshop, .external-link-button {
    /* Similar to secondary but can be styled distinctly if needed */
    background-color: var(--color-accent2);
    color: var(--color-text-light);
    box-shadow: var(--shadow-raised-light), var(--shadow-raised-dark);
    margin-top: auto; /* Pushes button to bottom of card content */
}
.cta-button-workshop:hover, .cta-button-workshop:focus,
.external-link-button:hover, .external-link-button:focus {
    background-color: var(--color-accent2-darker);
    color: var(--color-text-light);
    transform: translateY(-2px);
    box-shadow: var(--shadow-raised-hover-light), var(--shadow-raised-hover-dark);
    text-decoration: none;
}

/* 8.4 .read-more-link */
.read-more-link {
    display: inline-block;
    font-weight: 700;
    color: var(--color-accent1);
    background-color: transparent;
    padding: calc(var(--spacing-unit) * 0.5) 0; /* Minimal padding */
    border: none;
    box-shadow: none;
    text-decoration: none;
    position: relative;
}
.read-more-link::after {
    content: '→';
    margin-left: 0.3em;
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    display: inline-block;
}
.read-more-link:hover, .read-more-link:focus {
    color: var(--color-accent1-darker);
    background-color: transparent; /* Ensure no bg change */
    text-decoration: underline;
}
.read-more-link:hover::after {
    transform: translateX(5px);
}


/* 9. FORM ELEMENTS (GLOBAL STYLES) */
.form-group {
    margin-bottom: calc(var(--spacing-unit) * 1.5);
}
.form-group label {
    display: block;
    margin-bottom: calc(var(--spacing-unit) * 0.5);
    font-weight: 700;
    color: var(--color-text-body);
    font-size: 0.95rem;
}
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="search"],
input[type="url"],
select,
textarea {
    width: 100%;
    padding: calc(var(--spacing-unit) * 0.9) calc(var(--spacing-unit) * 1.2);
    border: 1px solid transparent; /* Border is created by shadow */
    border-radius: var(--border-radius-medium);
    background-color: var(--color-surface);
    box-shadow: var(--shadow-pressed-light), var(--shadow-pressed-dark);
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--color-text-body);
    transition: box-shadow 0.3s cubic-bezier(0.165, 0.84, 0.44, 1), border-color 0.3s ease;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="password"]:focus,
select:focus,
textarea:focus {
    outline: none;
    /* Slightly deeper pressed effect or an outer glow */
    box-shadow: var(--shadow-pressed-focus-light), var(--shadow-pressed-focus-dark),
                0 0 0 3px rgba(var(--color-primary-rgb, 123, 97, 255), 0.3); /* RGB for primary */
    /* --color-primary-rgb needs to be defined if using rgba with CSS var */
    /* Fallback: box-shadow: var(--shadow-pressed-focus-light), var(--shadow-pressed-focus-dark), 0 0 0 2px var(--color-primary); */
}
textarea {
    min-height: 120px;
    resize: vertical;
}
select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%233D4A5C'%3E%3Cpath d='M7 10l5 5 5-5H7z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right calc(var(--spacing-unit) * 1.2) center;
    background-size: 1.2em;
    padding-right: calc(var(--spacing-unit) * 3); /* Space for arrow */
}
.contact-form button[type="submit"] { /* Ensure full width for form submit */
    width: 100%;
    margin-top: var(--spacing-unit);
}
.required-asterisk { color: var(--color-accent1); margin-left: 2px; }
input[type="checkbox"] {
    /* Basic custom checkbox styling */
    appearance: none;
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    background-color: var(--color-surface);
    border-radius: var(--border-radius-small);
    box-shadow: var(--shadow-pressed-light), var(--shadow-pressed-dark);
    vertical-align: middle;
    margin-right: calc(var(--spacing-unit) * 0.5);
    cursor: pointer;
    position: relative;
}
input[type="checkbox"]:checked {
    background-color: var(--color-primary);
    box-shadow: var(--shadow-raised-light), var(--shadow-raised-dark); /* Pop out when checked */
}
input[type="checkbox"]:checked::after {
    content: '✔';
    font-size: 14px;
    color: var(--color-text-light);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.checkbox-label {
    font-weight: normal;
    font-size: 0.9em;
    display: inline;
    vertical-align: middle;
    cursor: pointer;
}


/* 10. ACCORDION COMPONENT */
.accordion {
    max-width: 800px; /* Or adjust as needed */
    margin: 0 auto;
}
.accordion-item {
    background-color: var(--color-surface);
    margin-bottom: var(--spacing-unit);
    border-radius: var(--border-radius-medium);
    box-shadow: var(--shadow-raised-light), var(--shadow-raised-dark);
    overflow: hidden; /* For smooth animation */
    transition: box-shadow 0.3s ease;
}
.accordion-item:hover {
    box-shadow: var(--shadow-raised-hover-light), var(--shadow-raised-hover-dark);
}
.accordion-header {
    background-color: transparent;
    color: var(--color-text-headings);
    cursor: pointer;
    padding: calc(var(--spacing-unit) * 1.25) calc(var(--spacing-unit) * 1.5);
    width: 100%;
    text-align: left;
    border: none;
    outline: none;
    font-size: 1.2rem;
    font-weight: 700;
    font-family: var(--font-heading);
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color 0.3s ease;
}
.accordion-header:hover {
    /* background-color: var(--color-background-alt); */ /* Subtle hover on header */
}
.accordion-icon {
    font-size: 1.5rem;
    font-weight: bold;
    transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55); /* Non-linear rotation */
    color: var(--color-primary);
}
.accordion-item.active .accordion-icon {
    transform: rotate(135deg); /* Rotates '+' to 'x' style */
}
.accordion-content {
    padding: 0 calc(var(--spacing-unit) * 1.5);
    background-color: var(--color-surface); /* Match item bg */
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s cubic-bezier(0.25, 0.8, 0.25, 1), padding 0.5s cubic-bezier(0.25, 0.8, 0.25, 1); /* Non-linear */
}
.accordion-item.active .accordion-content {
    padding-top: calc(var(--spacing-unit) * 0.5); /* Add padding when open */
    padding-bottom: calc(var(--spacing-unit) * 1.5);
    /* max-height is set by JS */
}
.accordion-content p {
    font-size: 1rem;
    line-height: var(--line-height-base);
    color: var(--color-text-body);
}
.accordion-content p:last-child {
    margin-bottom: 0;
}


/* 11. FOOTER */
/* 11.1 Footer Layout */
.site-footer {
    background-color: var(--color-secondary); /* Dark background for footer */
    color: #E0E5EC; /* Light text */
    padding: calc(var(--spacing-unit) * 3) 0 calc(var(--spacing-unit) * 1) 0;
    font-size: 0.95rem;
}
.footer-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: calc(var(--spacing-unit) * 2);
    margin-bottom: calc(var(--spacing-unit) * 2);
}

/* 11.2 Footer Text & Links */
.footer-column h4 {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    color: var(--color-text-light);
    margin-bottom: var(--spacing-unit);
}
.footer-column p {
    color: #bdc3c7; /* Lighter grey for paragraphs */
    font-size: 0.9rem;
}
.footer-column ul {
    list-style: none;
    padding-left: 0;
}
.footer-column ul li {
    margin-bottom: calc(var(--spacing-unit) * 0.6);
}
.footer-column ul li a {
    color: #bdc3c7;
    text-decoration: none;
    transition: color 0.3s ease, padding-left 0.3s ease;
}
.footer-column ul li a:hover,
.footer-column ul li a:focus {
    color: var(--color-text-light);
    text-decoration: underline;
    padding-left: 5px; /* Subtle indent on hover */
}

/* 11.3 Footer Social Links (Text-based) */
.social-media-links-footer li a {
    /* Inherits general footer link styles */
    font-weight: 500; /* Slightly bolder for social links */
}
/* If you need icons (SVG or font) alongside text: */
/* .social-media-links-footer li a i { margin-right: 0.5em; } */

.footer-bottom {
    text-align: center;
    padding-top: calc(var(--spacing-unit) * 1.5);
    border-top: 1px solid #4A5B70; /* Slightly lighter than footer bg */
    font-size: 0.9rem;
    color: #bdc3c7;
}


/* 12. SPECIFIC PAGE STYLING */
/* 12.1 Success Page (success.html) */
.success-page-container { /* Wrapper div inside body if needed */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
.success-page-content { /* The main content area of success.html */
    flex-grow: 1; /* Takes up available space */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: calc(var(--spacing-unit) * 2);
}
.success-page-content .success-icon {
    font-size: 5rem;
    color: var(--color-accent2);
    margin-bottom: calc(var(--spacing-unit) * 1.5);
    /* Neomorphic touch for the icon container (optional) */
    /* background-color: var(--color-surface); */
    /* width: 120px; height: 120px; */
    /* border-radius: 50%; */
    /* display: flex; align-items: center; justify-content: center; */
    /* box-shadow: var(--shadow-raised-light), var(--shadow-raised-dark); */
}
.success-page-content .section-title {
    font-size: clamp(2rem, 4vw, 2.8rem);
}
.success-page-content p {
    font-size: clamp(1rem, 1.8vw, 1.2rem);
    max-width: 600px;
    margin: 0 auto calc(var(--spacing-unit) * 2) auto;
}
.success-page-content .cta-button,
.success-page-content .cta-button-secondary {
    margin: calc(var(--spacing-unit) * 0.5);
}


/* 12.2 Legal Pages (privacy.html, terms.html) */
.legal-page-content { /* The main content area of legal pages */
    padding-top: 100px; /* Avoid header overlap */
    padding-bottom: calc(var(--spacing-unit) * 3);
}
.legal-page-content h1.section-title {
    text-align: left; /* Align title to left for legal docs */
    margin-bottom: calc(var(--spacing-unit) * 2);
}
.legal-page-content h2 {
    font-size: clamp(1.5rem, 3vw, 2rem);
    color: var(--color-primary);
    margin-top: calc(var(--spacing-unit) * 2);
    margin-bottom: var(--spacing-unit);
}
.legal-page-content ul {
    list-style-position: outside;
    padding-left: calc(var(--spacing-unit) * 1.5); /* Indent list */
    margin-bottom: var(--spacing-unit);
}
.legal-page-content li {
    margin-bottom: calc(var(--spacing-unit) * 0.5);
}

/* 12.3 About Page Specifics (Timeline, Team) */
/* Timeline */
.timeline {
    position: relative;
    max-width: 800px;
    margin: calc(var(--spacing-unit) * 2) auto;
}
.timeline::before { /* The vertical line */
    content: '';
    position: absolute;
    left: 20px;
    top: 0;
    bottom: 0;
    width: 3px;
    background-color: var(--color-primary);
    opacity: 0.3;
    border-radius: 3px;
}
.timeline-item {
    margin-bottom: calc(var(--spacing-unit) * 2.5);
    position: relative;
    padding-left: 50px; /* Space for the circle and line */
    background: var(--color-surface);
    padding: var(--spacing-unit);
    border-radius: var(--border-radius-medium);
    box-shadow: var(--shadow-raised-light), var(--shadow-raised-dark);
}
.timeline-item::before { /* The circle on the line */
    content: '';
    position: absolute;
    left: -10px; /* Adjust to align with line based on new padding-left */
    top: calc(var(--spacing-unit) + 5px); /* Align with first line of text or h4 */
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: var(--color-primary);
    border: 3px solid var(--color-background);
    z-index: 1;
    box-shadow: 0 0 0 3px var(--color-primary-darker); /* Outer glow */
}
.timeline-item h4 {
    color: var(--color-primary);
    font-size: 1.4rem;
    margin-bottom: calc(var(--spacing-unit) * 0.5);
}
.timeline-item p {
    font-size: 0.95rem;
    margin-bottom: 0;
}

/* Team Section (About Page) */
.team-member-card.card {
    /* Base card styles apply */
    /* Specific centering handled by .card */
}
.team-member-card .card-image.image-container {
    width: 150px; /* Fixed size for circular images */
    height: 150px;
    border-radius: 50%; /* Circular images */
    margin: 0 auto var(--spacing-unit) auto; /* Center the image container */
    box-shadow: var(--shadow-raised-light), var(--shadow-raised-dark); /* Neomorphic */
}
.team-member-card .card-image img {
    border-radius: 50%; /* Ensure image itself is circular if not already by container */
}
.team-member-card .card-content {
    text-align: center; /* Content is already centered by .card */
}
.team-member-card h3 {
    font-size: clamp(1.2rem, 2.5vw, 1.4rem);
    color: var(--color-text-headings);
}
.team-role {
    font-size: 0.95rem;
    color: var(--color-primary);
    font-weight: 700;
    margin-bottom: calc(var(--spacing-unit) * 0.5);
    display: block; /* Ensure it takes full width for centering */
}

/* 12.4 Contact Page Specifics */
.contact-info-detailed {
    text-align: left;
}
.contact-info-detailed p {
    margin-bottom: calc(var(--spacing-unit) * 1.2);
    line-height: 1.6;
}
.contact-info-detailed h3 {
    color: var(--color-primary);
    font-size: clamp(1.5rem, 3vw, 1.8rem);
    margin-bottom: calc(var(--spacing-unit) * 1.5);
}
.contact-info-detailed h4 { /* For "Redes Sociales" */
    font-size: clamp(1.1rem, 2.5vw, 1.3rem);
    color: var(--color-text-headings);
    margin-top: calc(var(--spacing-unit) * 2);
    margin-bottom: calc(var(--spacing-unit) * 0.8);
}
.contact-social-list {
    list-style: none;
    padding-left: 0;
}
.contact-social-list li {
    margin-bottom: calc(var(--spacing-unit) * 0.5);
}
.contact-social-list li a {
    font-weight: 500;
    /* Styles inherited from base 'a' and footer links can be used or customized */
}
.map-container img, #leafletMap {
    border-radius: var(--border-radius-medium);
    box-shadow: var(--shadow-raised-light), var(--shadow-raised-dark);
    width: 100%;
    height: 450px;
    object-fit: cover;
}


/* 13. ANIMATIONS & TRANSITIONS */
/* Animate.css is linked in HTML. These are for custom transitions. */
/* General purpose smooth transition for properties */
.smooth-transition {
    transition-property: all;
    transition-duration: 0.3s;
    transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1); /* Non-linear */
}
/* Example: Parallax-like effect on hero (if background-attachment: fixed is not enough) */
/* This would require JS to manipulate background-position on scroll */
/* .parallax-bg { background-attachment: fixed; } */


/* 14. HYPERREALISTIC TEXTURES & GLASSMORPHISM (Hints/Placeholders) */
/*
.textured-surface {
    background-image: url('image/subtle-paper-texture.png'), var(--color-surface);
    background-blend-mode: multiply; // Or 'overlay', 'soft-light'
    background-size: cover; // If texture is an image
}
.glassmorphism-element {
    background: rgba(255, 255, 255, 0.15); // Semi-transparent white
    backdrop-filter: blur(10px); // The blur effect
    -webkit-backdrop-filter: blur(10px); // Safari support
    border-radius: var(--border-radius-medium);
    border: 1px solid rgba(255, 255, 255, 0.2); // Subtle border
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); // Soft shadow
}
*/

/* 15. MEDIA QUERIES (RESPONSIVENESS) */
@media (max-width: 992px) {
    /* Adjust container padding or other global styles for tablets */
    .hero-title { font-size: clamp(2rem, 6vw, 3rem); }
    .hero-subtitle { font-size: clamp(1rem, 2.5vw, 1.2rem); }
}

@media (max-width: 768px) {
    /* Tablet and Mobile */
    .container { width: 95%; }
    .section-title { font-size: clamp(1.6rem, 5vw, 2.2rem); }
    .section-intro { font-size: 1rem; }

    .grid-layout {
        grid-template-columns: 1fr; /* Stack columns by default */
    }
    .mission-content .column-text, .mission-content .column-visual,
    .contact-form-container .contact-details, .contact-form-container .contact-form {
        order: initial !important; /* Reset order for stacking */
        padding-left: 0;
        padding-right: 0;
    }
     .mission-content .column-visual, .contact-form-container .contact-form {
        margin-top: calc(var(--spacing-unit) * 2);
    }


    /* Mobile Navigation */
    .main-navigation .nav-list {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 100%; /* Position below header after it measures its height */
        left: 0;
        width: 100%;
        background-color: var(--color-background);
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        padding: var(--spacing-unit) 0;
        border-top: 1px solid var(--color-background-alt);
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), padding 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    }
    .main-navigation .nav-list.active {
        display: flex;
        max-height: 500px; /* Or enough to show all items */
        padding: var(--spacing-unit) 0;
    }
    .main-navigation .nav-list li {
        width: 100%;
        text-align: center;
    }
    .main-navigation .nav-link {
        display: block;
        padding: var(--spacing-unit);
        width: 100%;
        font-size: 1.1rem;
    }
    .main-navigation .nav-link::after { display: none; } /* Remove underline for mobile */
    .nav-toggle { display: block; }


    .events-list .event-item.card {
        flex-direction: column; /* Stack date and content on mobile */
        align-items: center; /* Center badge */
        text-align: center;
    }
    .event-date-badge { margin-bottom: var(--spacing-unit); }
    .event-item .card-content { align-items: center; }


    .timeline::before { left: 10px; }
    .timeline-item { padding-left: 35px; }
    .timeline-item::before { left: -10px; top: 15px; }

    .footer-container { text-align: center; }
    .footer-column ul { padding-left: 0; }
}

@media (max-width: 480px) {
    /* Small Mobile */
    body { font-size: calc(var(--font-base-size) * 0.95); } /* Slightly smaller base font */
    .cta-button, .cta-button-secondary, button, input[type="submit"] {
        padding: calc(var(--spacing-unit) * 0.8) calc(var(--spacing-unit) * 1.5);
        font-size: 0.95rem;
    }
    .card { padding: var(--spacing-unit); }
    .card .card-image, .card .image-container { height: 180px; }
}