/* style.css */

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

1. :ROOT VARIABLES
2. GLOBAL STYLES
   - Body & Typography
   - Links
   - Headings
   - Buttons (General, complementing Tailwind)
   - Forms (General, complementing Tailwind)
3. UTILITY CLASSES
   - Dynamic Gradient Background Animation
4. LAYOUT COMPONENTS
   - Main Container (page-container, content-wrap)
   - Header & Navigation
   - Footer
5. NEUMORPHIC COMPONENTS (Enhancements & Specifics)
   - Cards (.card, .card-image, .card-content)
   - Specific Card Types (Portfolio, Workshop, News, Testimonial)
6. SECTION SPECIFIC STYLES
   - Hero Section
   - Mission, History, Research, etc. (Mostly Tailwind-driven, minimal custom CSS)
   - Timeline (Already styled inline in HTML, ensure compatibility)
   - Accolades (Icon animations via JS, base styles)
   - External Resources
   - Contact Form (Enhancements)
7. PAGE SPECIFIC STYLES
   - success.html
   - privacy.html, terms.html
8. ANIMATIONS & TRANSITIONS
   - Elastic Transitions
   - Hover Effects
9. MODAL STYLES (Generic)
-------------------------------------------------------------------*/

/* 1. :ROOT VARIABLES */
:root {
    --background-neumorphic: #f0f2f5; /* Tailwind: bg-background_neumorphic */
    --text-color: #333333;           /* Tailwind: text-text_color */
    --text-color-dark: #222222;      /* Tailwind: text-text_color_dark */
    --text-light: #FFFFFF;            /* Tailwind: text-text_light */
    
    --primary-color: #087990;       /* Tailwind: primary */
    --secondary-color: #F97316;     /* Tailwind: secondary */
    --accent-color: #10B981;        /* Tailwind: accent */

    --font-sans: 'DM Sans', sans-serif;         /* Tailwind: font-sans */
    --font-heading: 'Space Grotesk', sans-serif; /* Tailwind: font-heading */

    /* Neumorphic Shadows (matching Tailwind config in HTML) */
    --shadow-neumorphic-static: 5px 5px 10px #d9dbde, -5px -5px 10px #ffffff;
    --shadow-neumorphic-inset: inset 5px 5px 10px #d9dbde, inset -5px -5px 10px #ffffff;
    --shadow-neumorphic-button: 3px 3px 6px #b8b9be, -3px -3px 6px #ffffff;
    --shadow-neumorphic-button-pressed: inset 2px 2px 4px #b8b9be, inset -2px -2px 4px #ffffff;

    /* Transitions */
    --transition-elastic: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    --transition-smooth: all 0.3s ease-in-out;
}

/* 2. GLOBAL STYLES */
body {
    background-color: var(--background-neumorphic);
    color: var(--text-color);
    font-family: var(--font-sans);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--text-color-dark);
    margin-bottom: 0.75rem;
    line-height: 1.3;
}
/* Tailwind applies heading sizes, this is for fallback or non-Tailwind contexts */
h1 { font-size: 2.5rem; } /* text-4xl or 5xl */
h2 { font-size: 2rem; }   /* text-3xl or 4xl */
h3 { font-size: 1.5rem; } /* text-2xl or xl */
h4 { font-size: 1.25rem; }/* text-xl or lg */

p {
    margin-bottom: 1rem;
    color: var(--text-color);
}

a {
    color: var(--primary-color);
    text-decoration: none;
    transition: var(--transition-smooth);
}
a:hover {
    color: var(--secondary-color);
    text-decoration: underline;
}

/* Base button style (complementing .neumorphic-button from HTML's inline style) */
button, .button, input[type="submit"], input[type="button"] {
    font-family: var(--font-heading);
    transition: var(--transition-elastic);
    cursor: pointer;
}
/* Ensure .neumorphic-button defined in HTML's <style> tag has priority or is consistent */

/* Read More Link Style */
.read-more-link {
    font-weight: bold;
    color: var(--primary-color);
    display: inline-block;
    position: relative;
    padding-bottom: 2px;
}
.read-more-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: var(--secondary-color);
    transition: width 0.3s ease-in-out;
}
.read-more-link:hover::after {
    width: 100%;
}
.read-more-link:hover {
    text-decoration: none;
    color: var(--secondary-color);
}

/* Text on image overlay styles (from HTML for consolidation) */
.text-on-image-overlay {
    position: relative;
}
.text-on-image-overlay::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)); /* Slightly darker for better contrast */
    z-index: 1;
}
.text-on-image-content {
    position: relative;
    z-index: 2;
}


/* 3. UTILITY CLASSES */
.dynamic-gradient-background {
    background: linear-gradient(45deg, var(--primary-color), var(--accent-color), var(--secondary-color));
    background-size: 200% 200%;
    animation: gradient-flow 10s ease infinite;
}

@keyframes gradient-flow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* 4. LAYOUT COMPONENTS */
#page-container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

#content-wrap {
    flex-grow: 1;
    /* pb-20 (padding-bottom: 5rem;) is applied via Tailwind for footer spacing */
}

/* Header (main styles via Tailwind, sticky top-0 z-50) */
header nav a.neumorphic-button {
    padding: 0.6rem 1.2rem; /* Slightly adjust padding for nav items */
    font-size: 0.95rem;
}
#mobile-menu a {
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}
#mobile-menu a:hover {
    background-color: #e0e2e5; /* Slightly darker shade of neumorphic bg */
    color: var(--primary-color);
}


/* Footer */
#footer {
    /* bg-text_color_dark, text-text_light, py-12 from Tailwind */
    /* position: absolute, bottom: 0, width: 100% from HTML ensures it's at bottom if content is short */
}
#footer a {
    color: var(--text-light);
    opacity: 0.8;
}
#footer a:hover {
    opacity: 1;
    color: var(--secondary-color);
    text-decoration: none;
}
#footer h5 {
    color: var(--text-light);
}
#footer .text-gray-300 { color: #d1d5db !important; } /* Tailwind class */
#footer .text-gray-400 { color: #9ca3af !important; } /* Tailwind class */
#footer .border-gray-700 { border-color: #374151 !important; } /* Tailwind class */

/* 5. NEUMORPHIC COMPONENTS */

/* General Card Styling (complementing Tailwind utility classes) */
.card {
    /* bg-background_neumorphic shadow-neumorphic-static rounded-xl overflow-hidden from Tailwind */
    transition: var(--transition-elastic);
    display: flex;
    flex-direction: column; /* Ensures content flows vertically */
}
.card:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 8px 8px 16px #d1d3d6, -8px -8px 16px #ffffff; /* Enhanced shadow on hover */
}

.card-image, .image-container { /* .image-container is an alias for .card-image */
    overflow: hidden; /* Important for rounded corners on images */
    position: relative;
    /* Fixed height is applied by Tailwind (e.g., h-56) */
    display: flex; /* Centers image if it's smaller, though img is w-full */
    align-items: center;
    justify-content: center;
    background-color: #e0e1e4; /* Placeholder bg for images */
}
.card-image img, .image-container img {
    /* w-full h-XX object-cover from Tailwind */
    display: block; /* Removes bottom space under image */
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.card:hover .card-image img, .card:hover .image-container img {
    transform: scale(1.05);
}

.card-content {
    /* p-6 text-left from Tailwind */
    flex-grow: 1; /* Allows content to take available space */
    display: flex;
    flex-direction: column;
}
.card-content > *:last-child {
    margin-top: auto; /* Pushes last element (e.g., button) to bottom if card heights are equalized by grid */
}

/* Portfolio, Workshop, News Cards - use general .card styles */

/* Testimonial Cards */
.testimonial-card { /* If specific styling beyond .card is needed */
    /* Example: Larger padding, specific text styling */
}
.testimonial-card img.rounded-full { /* Tailwind class */
    box-shadow: var(--shadow-neumorphic-button);
}

/* 6. SECTION SPECIFIC STYLES */

/* Hero Section */
#hero {
    /* parallax-bg, text-on-image-overlay handled by HTML/inline */
    /* min-h-[80vh] from Tailwind */
    background-size: cover;
    background-repeat: no-repeat;
}
#hero h1 {
    /* text-5xl md:text-7xl font-heading font-bold text-text_light mb-6 from Tailwind */
    text-shadow: 2px 2px 6px rgba(0,0,0,0.7); /* Ensure readability */
}
#hero p {
    /* text-xl md:text-2xl text-text_light mb-10 max-w-3xl mx-auto from Tailwind */
    text-shadow: 1px 1px 4px rgba(0,0,0,0.7); /* Ensure readability */
}

/* Sections like Mission, History, Research usually styled well by Tailwind utilities.
   Section titles are h2 with .text-4xl .font-heading .font-bold .text-text_color_dark .text-center .mb-X
   and a divider .w-24 .h-1 .bg-primary .mx-auto .mb-X
   This is a good, consistent pattern.
*/

/* Timeline - styles are inline in HTML for structure. This ensures they work. */
/* If moved to CSS, they would go here. For now, rely on HTML styles. */
.timeline-content {
    /* Styles for neumorphic content boxes within timeline are in HTML */
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}
.timeline-container:hover .timeline-content {
    transform: translateY(-3px);
    box-shadow: 7px 7px 14px #d1d3d6, -7px -7px 14px #ffffff;
}


/* Accolades Section - Icons are SVGs, animation by Motion One */
#accolades .flex-col svg {
    transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
#accolades .flex-col:hover svg {
    transform: scale(1.1);
}

/* External Resources Section */
#external-resources .bg-background_neumorphic { /* The resource link cards */
    transition: var(--transition-elastic);
}
#external-resources .bg-background_neumorphic:hover {
    transform: translateY(-4px);
    box-shadow: 7px 7px 14px #d1d3d6, -7px -7px 14px #ffffff;
}
#external-resources h3 a {
    font-size: 1.15rem; /* Slightly smaller than card titles for differentiation */
}


/* Contact Form - Inputs and buttons use .neumorphic-input/button from HTML */
#contact form {
    /* shadow-neumorphic-inset from Tailwind */
}
#contact label {
    font-weight: 500; /* DM Sans medium */
}

/* 7. PAGE SPECIFIC STYLES */

/* Success Page (success.html) */
.success-page-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    text-align: center;
    padding: 2rem;
    background-color: var(--background-neumorphic);
}
.success-page-content {
    background-color: var(--background-neumorphic);
    padding: 2rem 3rem;
    border-radius: 1rem;
    box-shadow: var(--shadow-neumorphic-static);
    max-width: 600px;
}
.success-page-content h1 {
    color: var(--primary-color);
    font-size: 2.5rem; /* text-4xl */
}
.success-page-content p {
    font-size: 1.125rem; /* text-lg */
    margin-bottom: 1.5rem;
}
.success-page-content .neumorphic-button-primary {
    margin-top: 1rem;
}

/* Privacy Policy & Terms of Service Pages (privacy.html, terms.html) */
.legal-page-content { /* Add this class to the main content div on these pages */
    padding-top: 120px; /* Header height (e.g., 5rem/80px) + extra space */
    padding-bottom: 4rem;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}
.legal-page-content h1 {
    font-size: 2.5rem; /* text-4xl */
    color: var(--text-color-dark);
    margin-bottom: 1.5rem;
    text-align: center;
}
.legal-page-content h2 {
    font-size: 1.75rem; /* text-2xl */
    color: var(--primary-color);
    margin-top: 2rem;
    margin-bottom: 1rem;
}
.legal-page-content p, .legal-page-content ul li {
    line-height: 1.7;
    color: var(--text-color);
}
.legal-page-content ul {
    list-style: disc;
    margin-left: 1.5rem;
    margin-bottom: 1rem;
}


/* 8. ANIMATIONS & TRANSITIONS (General setup) */
/* Elastic transition is defined as --transition-elastic */
/* Smooth transition is defined as --transition-smooth */

/* Hover effects for interactive elements using these transitions are applied directly or via Tailwind. */


/* 9. MODAL STYLES (Generic - if needed beyond cookie popup) */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.modal-content {
    background-color: var(--background-neumorphic);
    padding: 2rem;
    border-radius: 12px;
    box-shadow: var(--shadow-neumorphic-static);
    width: 90%;
    max-width: 500px;
    transform: scale(0.95);
    transition: transform 0.3s ease;
}
.modal-overlay.active .modal-content {
    transform: scale(1);
}

.modal-close-button {
    /* Style for a close button if needed */
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: transparent;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--text-color-dark);
}

/* Add fixes for potential Tailwind overlaps or to enforce styles */
html {
    scroll-behavior: smooth;
}