/* style.css */

/* CSS Variables for Theme */
:root {
    --color-primary: #FF7E5F; /* Warm Gradient Start */
    --color-secondary: #FEB47B; /* Warm Gradient End */
    --color-accent: #FFC107; /* Bright Yellow Accent */
    --color-dark: #222222; /* Dark text for headings/accents */
    --color-text-light: #333333; /* Default text on light bg */
    --color-text-dark: #EEEEEE; /* Default text on dark bg */
    --color-black: #000000;
    --color-white: #FFFFFF;
    --box-shadow-brutal: 8px 8px 0 0 var(--color-black);
    --border-brutal: 4px solid var(--color-black);
    --gradient-bg: linear-gradient(to right, var(--color-primary), var(--color-secondary));
    --overlay-dark: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)); /* Slightly darker overlay */
}

/* Base Styles */
body {
    font-family: 'Lato', sans-serif;
    color: var(--color-text-light);
    line-height: 1.6;
    background-color: #f4f4f4; /* Light background default */
    padding-top: 6rem; /* Add padding for fixed header on main content */
    transition: padding-top 0.3s ease-in-out; /* Smooth transition if header height changes */
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Roboto', sans-serif;
    color: var(--color-dark);
    text-align: center;
    margin-bottom: 1rem; /* Default margin for headings */
}

h1 {
    font-size: 3.5rem; /* Adjust as needed */
}

h2 {
    font-size: 2.5rem;
}

h3 {
    font-size: 1.8rem;
}

/* Ensure text contrast */
.text-high-contrast {
    color: var(--color-dark);
}

.bg-dark .text-high-contrast,
.gradient-bg .text-high-contrast,
.hero .text-high-contrast {
    color: var(--color-text-dark);
}

.heading-shadow {
     text-shadow: 2px 2px 4px rgba(0,0,0,0.6);
}

/* Layout Containers (Tailwind's container class is used in HTML) */
/* We can add basic styling here if needed, but Tailwind handles responsiveness */
.container {
    /* max-width: 1200px; - Defined by Tailwind */
    /* margin: 0 auto; - Defined by Tailwind */
    /* padding: 0 1rem; - Defined by Tailwind */
}

/* Global Button Styles */
.btn {
    display: inline-block;
    padding: 0.75rem 1.5rem; /* Adjusted padding */
    font-weight: 700;
    font-size: 1rem; /* Adjusted font size */
    text-transform: uppercase;
    border: var(--border-brutal);
    background-color: var(--color-accent);
    color: var(--color-black);
    transition: transform 0.3s ease-in-out, background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    box-shadow: 4px 4px 0 0 var(--color-black); /* Smaller shadow for buttons */
    cursor: pointer;
    text-decoration: none; /* Ensure it looks like a button, not a link */
    text-align: center;
}

.btn:hover {
    transform: translate(2px, 2px); /* Brutalist hover effect */
    box-shadow: 2px 2px 0 0 var(--color-black); /* Smaller shadow on hover */
    background-color: #ffda6a; /* Slightly darker yellow */
}

.btn:active {
    transform: translate(4px, 4px); /* Press effect */
    box-shadow: 0 0 0 0 var(--color-black);
}

/* Global Form Input Styles */
.form-input {
    display: block;
    width: 100%;
    padding: 0.75rem 1rem; /* Adjusted padding */
    border: var(--border-brutal);
    background-color: var(--color-white);
    color: var(--color-black);
    font-size: 1rem;
    transition: border-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out, ring-color 0.3s ease-in-out;
}

.form-input:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 4px rgba(255, 193, 7, 0.5); /* Focus ring effect */
    /* Tailwind focus:ring-4 focus:ring-yellow-400 achieves similar */
}

/* Header Styles */
header {
    background-color: var(--color-black);
    color: var(--color-text-dark);
    padding: 1rem 0; /* Padding adjusted for container */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 50;
    transition: background-color 0.3s ease-in-out, padding 0.3s ease-in-out;
}

header .container {
     padding: 0 1rem; /* Ensure container padding */
}


header nav ul li a {
    color: var(--color-text-dark);
    text-decoration: none;
    transition: color 0.3s ease-in-out;
}

header nav ul li a:hover {
    color: var(--color-accent);
}

/* Burger Menu Styles (Mobile) */
#mobile-menu {
    display: none; /* Hidden by default, JS toggles display */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.95);
    z-index: 60; /* Higher than header */
    flex-direction: column;
    align-items: center;
    justify-center;
    padding-top: 4rem;
}

#mobile-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: center;
}

#mobile-menu ul li {
    margin-bottom: 1.5rem;
}

#mobile-menu ul li a {
    color: var(--color-white);
    font-size: 1.5rem;
    text-decoration: none;
    transition: color 0.3s ease-in-out;
}

#mobile-menu ul li a:hover {
    color: var(--color-accent);
}

#close-menu-button {
    position: absolute;
    top: 1rem;
    right: 1rem;
    color: var(--color-white);
    font-size: 2rem;
    cursor: pointer;
    background: none;
    border: none;
}


/* Section Base Styles */
section {
    padding: 4rem 1rem; /* Base padding */
    position: relative;
    overflow: hidden;
    /* Min-height removed as requested */
}

/* Hero Section */
#hero {
    min-height: 100vh; /* Use min-height 100vh specifically for hero */
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-white); /* White text for hero */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: max-content;
}

#hero .image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--overlay-dark); /* Dark overlay */
    z-index: 1;
}

#hero h1, #hero p {
     color: var(--color-white); /* Ensure white text */
}

#hero .container {
     position: relative;
     z-index: 10; /* Above overlay */
}


/* About Section */
#about {
    background-color: var(--color-white);
}

/* Statistics Section */
#statistics {
    background: var(--gradient-bg);
    color: var(--color-white);
    position: relative; /* Needed for overlay */
}

#statistics .image-overlay {
     background: var(--overlay-dark); /* Dark overlay for statistics section if background image used */
}

#statistics h2 {
    color: var(--color-white); /* White heading on gradient */
}

/* Progress Indicator Styles */
.w-full.bg-gray-200.rounded-full.h-2.5 { /* Targeting the Tailwind structure */
    background-color: rgba(255, 255, 255, 0.3); /* Lighter track on dark bg */
}

.bg-yellow-400.h-2.5.rounded-full { /* Targeting the Tailwind structure */
    background-color: var(--color-accent); /* Accent color for progress */
}


/* Testimonials Section */
#testimonials {
    background-color: var(--color-white);
}

/* Research Section */
#research {
    background-color: #f4f4f4; /* Light gray */
}

/* Accordion Styles */
details {
    border: var(--border-brutal); /* Brutal border */
    margin-bottom: 1rem;
    transition: all 0.3s ease-in-out;
    background-color: var(--color-white);
    overflow: hidden; /* Prevents content overflow during transition */
}

details summary {
    display: block; /* Needed for full click area */
    padding: 1rem;
    font-weight: 700;
    background-color: var(--color-accent);
    color: var(--color-black);
    cursor: pointer;
    position: relative;
    transition: background-color 0.3s ease-in-out;
}

details summary:hover {
    background-color: #ffda6a; /* Slightly darker yellow on hover */
}

details summary::marker,
details summary::-webkit-details-marker {
    display: none; /* Hide default marker */
}

/* Add a custom marker (requires more advanced CSS or JS) */
details summary::after {
    content: '+';
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.5rem;
    line-height: 1;
    transition: transform 0.3s ease-in-out;
}

details[open] summary::after {
    content: '-';
    transform: translateY(-50%) rotate(180deg); /* Rotate on open */
}


details .p-4 { /* Targeting the Tailwind padding */
    padding: 1rem;
    background-color: var(--color-white);
    color: var(--color-text-light);
}


/* Blog Section */
#blog {
    background-color: var(--color-white);
}

/* Case Studies Section */
#case-studies {
    background: var(--gradient-bg);
    color: var(--color-white);
    position: relative; /* Needed for overlay */
}

#case-studies .image-overlay {
     background: var(--overlay-dark); /* Dark overlay */
}

#case-studies h2 {
     color: var(--color-white); /* White heading on gradient */
}


/* External Resources Section */
#external-resources {
    background-color: #f4f4f4; /* Light gray */
}

/* Community Section */
#community {
    background-color: var(--color-white);
}

/* Media Section */
#media {
    background-color: #f4f4f4; /* Light gray */
}

/* Partners Section */
#partners {
    background-color: var(--color-white);
}

#partners img {
    display: block; /* Ensure image takes up space */
    max-width: 100%;
    height: auto; /* Maintain aspect ratio */
    filter: grayscale(100%); /* Optional: grayscale for partner logos */
    transition: filter 0.3s ease-in-out;
}

#partners .p-4:hover img {
    filter: grayscale(0%); /* Show color on hover */
}


/* Contact Section */
#contact {
    background-color: #f4f4f4; /* Light gray */
}


/* Card Styles (Applied to Testimonials, Blog, Case Studies, Media) */
.card {
    border: var(--border-brutal);
    background-color: var(--color-white);
    padding: 1.5rem; /* Adjusted padding */
    box-shadow: var(--box-shadow-brutal);
    display: flex; /* Enable flexbox for internal layout */
    flex-direction: column; /* Stack content vertically */
    align-items: center; /* Center content horizontally */
    text-align: center; /* Center text content */
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.card:hover {
    transform: translateY(-5px); /* Lift effect on hover */
    box-shadow: 12px 12px 0 0 var(--color-black); /* Larger shadow on hover */
}

.card-image {
    border: 2px solid var(--color-black); /* Smaller border for image container */
    overflow: hidden;
    margin-bottom: 1rem; /* Space between image and content */
    width: 100%; /* Take full width of card */
    height: 200px; /* Fixed height for consistency */
    display: flex; /* Needed to center image within container */
    justify-content: center; /* Center image horizontally */
    align-items: center; /* Center image vertically */
}

.card-image img {
    display: block;
    width: 100%; /* Make image fill the container width */
    height: 100%; /* Make image fill the container height */
    object-fit: cover; /* Crop image to cover the container */
    margin: 0 auto; /* Ensure image itself is centered if container is larger */
    transition: transform 0.5s ease-in-out; /* Zoom effect on hover */
}

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

.card-content {
    width: 100%; /* Take full width of card */
    color: var(--color-text-light); /* Default text color for card content */
}

.card-content h3 {
    color: var(--color-dark); /* Dark heading in card */
    margin-top: 0; /* Remove default top margin */
}

/* "Read More" or Action Link Styles */
.card-content a {
    display: inline-block; /* Or block for a button-like link */
    margin-top: 0.75rem;
    font-weight: 700;
    color: var(--color-accent); /* Accent color for links */
    text-decoration: none;
    position: relative;
    padding-bottom: 2px; /* Space for underline effect */
}

.card-content a:hover {
    color: #ffda6a; /* Slightly darker accent on hover */
}

.card-content a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    background-color: var(--color-accent);
    transition: width 0.3s ease-in-out;
}

.card-content a:hover::after {
    width: 100%;
}


/* Footer Styles */
footer {
    background-color: var(--color-black);
    color: var(--color-text-dark);
    padding: 3rem 1rem; /* Adjusted padding */
    font-size: 0.9rem;
}

footer h3 {
    color: var(--color-white); /* White headings in footer */
    text-align: left; /* Left-align footer headings */
    margin-bottom: 1rem;
}

footer a {
    color: var(--color-text-dark);
    text-decoration: none;
    transition: color 0.3s ease-in-out;
}

footer a:hover {
    color: var(--color-accent);
}

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

footer ul li {
    margin-bottom: 0.5rem;
}

/* Specific Page Styles */

/* Success Page */
body#success-page {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding-top: 0; /* Remove padding from header for success page */
    text-align: center;
    background-color: var(--color-white); /* Or another background */
    color: var(--color-dark);
}

body#success-page h1, body#success-page p {
     color: var(--color-dark);
}


/* Privacy & Terms Pages */
body.legal-page {
    padding-top: 6rem; /* Add padding to body to clear header */
    background-color: var(--color-white);
    color: var(--color-text-light);
}

body.legal-page .container {
    max-width: 800px; /* Narrower container for readable text columns */
    margin: 0 auto;
    padding-top: 2rem; /* Additional padding below header */
    padding-bottom: 2rem;
}

body.legal-page h1, body.legal-page h2, body.legal-page h3 {
    text-align: left; /* Left-align headings on legal pages */
    color: var(--color-dark);
}

body.legal-page h1 {
     margin-bottom: 2rem;
}

body.legal-page h2 {
     margin-top: 2rem;
     margin-bottom: 1rem;
}

body.legal-page p {
    margin-bottom: 1rem;
}

body.legal-page ul {
    list-style: disc;
    margin-left: 1.5rem;
    margin-bottom: 1rem;
}

body.legal-page li {
    margin-bottom: 0.5rem;
}


/* Parallax Effect (Simple CSS background-attachment) */
[data-parallax] {
    background-attachment: fixed;
}

/* Scroll Reveal (Placeholder - needs JS to trigger animations) */
.data-scroll-reveal {
    opacity: 0;
    transform: translateY(50px); /* Initial state */
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.data-scroll-reveal.is-revealed {
    opacity: 1;
    transform: translateY(0); /* Final state */
}

/* Add delays or different effects based on data attributes if needed by JS */
/* e.g., [data-scroll-reveal][data-delay="200"] { transition-delay: 0.2s; } */


/* Microanimations - Examples */

/* Spin icon on hover (example for an icon link) */
.icon-spin:hover {
    animation: spin 1s infinite linear;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Subtle pulse animation (example for a notification or highlight) */
.pulse {
    animation: pulse 2s infinite ease-in-out;
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}


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

    h2 {
        font-size: 2rem;
    }

    section {
        padding: 3rem 1rem;
    }

    #hero {
         min-height: 70vh; /* Adjust hero height on smaller screens */
         padding-top: 4rem; /* Ensure hero content is visible below fixed header */
    }

    #hero .container {
        grid-template-columns: 1fr; /* Stack columns */
        text-align: center;
    }

     #hero .md\:col-span-1 { /* Target the text column */
         margin-bottom: 2rem; /* Add space below text before form */
     }

     .card {
         padding: 1rem; /* Reduce card padding */
     }

     .card-image {
         height: 150px; /* Smaller image height on mobile */
     }

     /* Center card content explicitly for smaller screens if needed */
     .card-content {
         text-align: center;
     }

     .card-content a {
         margin-top: 0.5rem; /* Adjust link spacing */
     }


     footer .container {
         grid-template-columns: 1fr; /* Stack footer columns */
         gap: 2rem;
         text-align: center;
     }

     footer h3 {
         text-align: center; /* Center footer headings on mobile */
     }
     #mobile-menu ul li {
      margin-bottom: 4px;
     }
}

nav ul {
  flex-wrap: wrap;
  justify-content: flex-end;
  row-gap: 16px;
}