/* style.css */

/* -------------------------------------------------------------------------- */
/*                                CSS Variables                               */
/* -------------------------------------------------------------------------- */
:root {
    /* Split-Complementary Color Scheme */
    /* Primary Color (Tealish-Green) */
    --primary-color: #00A99D; /* A vibrant teal */
    --primary-color-dark: #00877A;
    --primary-color-light: #E0F2F1; /* Light background for primary elements */

    /* Split Complementary 1 (Warm Orange) */
    --accent-color-1: #FF7F50; /* Coral / Warm Orange */
    --accent-color-1-dark: #E57248;

    /* Split Complementary 2 (Golden Yellow/Orange) */
    --accent-color-2: #FFC107; /* Amber / Golden Yellow */
    --accent-color-2-dark: #E0A800;

    /* Neutral Colors */
    --text-color-dark: #222222; /* Very dark grey for high contrast text */
    --text-color-medium: #555555;
    --text-color-light: #FFFFFF;
    --background-color-light: #FFFFFF;
    --background-color-grey: #f5f5f5; /* Light grey for sections */
    --border-color: #DDDDDD;

    /* Fonts */
    --font-family-headings: 'Poppins', sans-serif;
    --font-family-body: 'Work Sans', sans-serif;

    /* Volumetric UI & Transitions */
    --volumetric-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 6px 15px rgba(0, 0, 0, 0.1);
    --volumetric-shadow-hover: 0 6px 12px rgba(0, 0, 0, 0.15), 0 8px 20px rgba(0, 0, 0, 0.15);
    --volumetric-shadow-active: 0 2px 4px rgba(0, 0, 0, 0.1), 0 3px 7px rgba(0, 0, 0, 0.1);
    --border-radius: 8px; /* Rounded corners for cards and inputs */
    --border-radius-button: 50px; /* Fully rounded buttons */
    --transition-duration: 0.3s;
    --transition-timing: ease-in-out;

    /* Spacing */
    --section-padding: 4rem 1.5rem;
    --navbar-height: 52px; /* Bulma's default navbar height, can be adjusted */
}

/* -------------------------------------------------------------------------- */
/*                                Global Styles                               */
/* -------------------------------------------------------------------------- */
html {
    scroll-behavior: smooth;
    background-color: var(--background-color-light);
}

body {
    font-family: var(--font-family-body);
    color: var(--text-color-medium);
    line-height: 1.7;
    font-size: 1rem; /* Base font size (usually 16px) */
    overflow-x: hidden;
    background-color: var(--background-color-light);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Headings */
h1, h2, h3, h4, h5, h6,
.title, .subtitle { /* Bulma classes included */
    font-family: var(--font-family-headings);
    color: var(--text-color-dark);
    font-weight: 700; /* Poppins bold */
}

.title {
    line-height: 1.2;
}
.subtitle {
    font-family: var(--font-family-body);
    color: var(--text-color-medium);
    font-weight: 400; /* Work Sans regular */
    line-height: 1.5;
}

/* Common title sizes (can be adjusted with Bulma classes too) */
.title.is-1 { font-size: 3rem; margin-bottom: 1rem;}
.title.is-2 { font-size: 2.5rem; margin-bottom: 1.5rem; }
.title.is-3 { font-size: 2rem; margin-bottom: 1rem;}
.title.is-4 { font-size: 1.5rem; margin-bottom: 0.75rem;}
.title.is-5 { font-size: 1.25rem; margin-bottom: 0.5rem;}


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

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

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

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

/* Sections basic styling */
.section {
    padding: var(--section-padding);
}

.section-title {
    color: var(--text-color-dark) !important; /* Ensure titles are dark for contrast */
    margin-bottom: 3rem !important; /* Give more space below section titles */
    text-align: center;
}

.container {
    max-width: 1140px; /* Or Bulma's default $container-max-width */
    margin-left: auto;
    margin-right: auto;
}

/* -------------------------------------------------------------------------- */
/*                                  Components                                */
/* -------------------------------------------------------------------------- */

/* Global Button Styles (enhancing Bulma's .button) */
.button, button, input[type="submit"], input[type="button"] {
    font-family: var(--font-family-headings);
    font-weight: 600;
    border-radius: var(--border-radius-button);
    transition: all var(--transition-duration) var(--transition-timing);
    box-shadow: var(--volumetric-shadow);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0.8em 1.8em;
    border: none; /* Remove default border if any for volumetric feel */
    cursor: pointer;
}

.button.is-primary,
button.is-primary,
input[type="submit"].is-primary {
    background-color: var(--primary-color);
    color: var(--text-color-light);
}

.button.is-primary:hover,
button.is-primary:hover,
input[type="submit"].is-primary:hover {
    background-color: var(--primary-color-dark);
    box-shadow: var(--volumetric-shadow-hover);
    transform: translateY(-2px);
}

.button.is-primary:active, .button.is-primary:focus,
button.is-primary:active, button.is-primary:focus,
input[type="submit"].is-primary:active, input[type="submit"].is-primary:focus {
    background-color: var(--primary-color-dark);
    box-shadow: var(--volumetric-shadow-active);
    transform: translateY(1px);
    outline: none;
}

.button.is-primary.is-light {
    background-color: var(--primary-color-light);
    color: var(--primary-color-dark);
}
.button.is-primary.is-light:hover {
    background-color: #cceae8;
    color: var(--primary-color-dark);
}

/* Volumetric Button specific for Hero or standout CTAs */
.volumetric-button-hero {
    font-size: 1.1rem !important;
    padding: 1em 2.2em !important;
    background-color: var(--accent-color-1) !important;
}
.volumetric-button-hero:hover {
    background-color: var(--accent-color-1-dark) !important;
}

/* Volumetric Inputs (enhancing Bulma's .input) */
.input.volumetric-input,
.textarea.volumetric-input {
    border-radius: var(--border-radius);
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.06);
    border: 1px solid var(--border-color);
    transition: all var(--transition-duration) var(--transition-timing);
    padding: 0.8em 1em;
    background-color: var(--background-color-light);
    color: var(--text-color-dark);
}

.input.volumetric-input:focus,
.textarea.volumetric-input:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.125em rgba(0, 169, 157, 0.25), inset 0 2px 4px rgba(0,0,0,0.06);
    outline: none;
}


/* Cards (enhancing Bulma's .card) */
.card.volumetric-card {
    border-radius: var(--border-radius);
    box-shadow: var(--volumetric-shadow);
    transition: transform var(--transition-duration) var(--transition-timing), box-shadow var(--transition-duration) var(--transition-timing);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%; /* Make cards in a row equal height by default */
    background-color: var(--background-color-light);
}

.card.volumetric-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--volumetric-shadow-hover);
}

.card .card-image {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: relative; /* For potential overlays */
}

.card .card-image figure.image { /* Bulma's figure for images */
    margin: 0;
    width: 100%;
    height: 220px; /* Consistent height for card images */
}

.card .card-image img {
    width: 100%;
    height: 100%; /* Fill the figure */
    object-fit: cover; /* Crop and center image */
    display: block;
    transition: transform var(--transition-duration) var(--transition-timing);
}
.card.volumetric-card:hover .card-image img {
    transform: scale(1.05);
}

.card .card-content {
    padding: 1.5rem;
    flex-grow: 1; /* Allows content to fill space */
    text-align: left; /* Default for content, override if needed for specific cards */
}

.card .card-content .title {
    margin-bottom: 0.75rem;
    color: var(--text-color-dark);
    line-height: 1.3;
}
.card .card-content .content {
    font-size: 0.95rem;
    color: var(--text-color-medium);
}
.card .card-content .content p:last-child {
    margin-bottom: 0;
}

/* Centering content within certain cards if structure supports it */
.card.text-center .card-content {
    text-align: center;
}

/* Specific card type titles */
.project-card .project-title,
.resource-card .title {
    color: var(--primary-color-dark);
}
.resource-card .title a {
    color: inherit; /* Inherit from parent title color */
    text-decoration: none;
}
.resource-card .title a:hover {
    text-decoration: underline;
}


/* Testimonial Cards specifics */
.testimonial-card .media-left img {
    border: 3px solid var(--primary-color);
    padding: 2px;
}
.testimonial-card .media-content .title {
    color: var(--text-color-dark);
}
.testimonial-card .media-content .subtitle {
    color: var(--text-color-medium);
}


/* Volumetric Tags (enhancing Bulma's .tag) */
.tag.volumetric-tag {
    border-radius: var(--border-radius);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    padding: 0.5em 1em;
    font-weight: 500;
}
.tag.is-primary.is-light.volumetric-tag {
    background-color: var(--primary-color-light);
    color: var(--primary-color-dark);
}

/* Accordion */
.accordion-container {
    max-width: 800px;
    margin: 0 auto;
}
.accordion-item {
    background-color: var(--background-color-light);
    margin-bottom: 1rem;
    border-radius: var(--border-radius);
    box-shadow: var(--volumetric-shadow);
    overflow: hidden;
}
.accordion-header { /* This is a button */
    background-color: transparent; /* Make button transparent to show item bg */
    color: var(--primary-color-dark);
    padding: 1rem 1.5rem;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: none;
    border-radius: 0;
    width: 100%;
    text-align: left;
    font-family: var(--font-family-headings);
    font-weight: 600;
    font-size: 1.1rem;
    box-shadow: none !important; /* Remove global button shadow */
    text-transform: none; /* Override global button uppercase */
    background-color: var(--primary-color-light);
}
.accordion-header:hover {
    background-color: #d1e7e5; /* Slightly darker shade of light primary */
}

.accordion-header .icon { /* For FontAwesome icon */
    transition: transform var(--transition-duration) var(--transition-timing);
    color: var(--primary-color);
}
.accordion-item.is-active .accordion-header .icon {
    transform: rotate(45deg);
}
.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease-in-out, padding 0.35s ease-in-out;
    padding: 0 1.5rem; /* Horizontal padding only when collapsed */
}
.accordion-item.is-active .accordion-content {
    /* max-height will be set by JS */
    padding: 1.5rem; /* Full padding when active */
    background-color: var(--background-color-light);
}
.accordion-content .content {
    margin-bottom: 0;
}
.accordion-content .content p:last-child {
    margin-bottom: 0;
}

/* -------------------------------------------------------------------------- */
/*                             Section Specific Styles                        */
/* -------------------------------------------------------------------------- */

/* Header / Navbar */
.header .navbar.is-fixed-top {
    background-color: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 2px 5px rgba(0,0,0,0.08);
    min-height: var(--navbar-height);
    padding: 0.5rem 0;
}
.navbar-item img {
    max-height: 2.5rem; /* Adjust logo size */
}
.navbar-item, .navbar-link {
    font-family: var(--font-family-headings);
    font-weight: 600;
    color: var(--text-color-dark);
    transition: color var(--transition-duration) var(--transition-timing);
    padding: 0.5rem 1rem;
}
.navbar-item:hover, .navbar-link:hover,
.navbar-item.is-active, .navbar-link.is-active {
    background-color: transparent !important;
    color: var(--primary-color) !important;
}
.navbar-burger {
    color: var(--text-color-dark); /* Make burger lines dark */
}
.navbar-burger span {
    background-color: var(--text-color-dark);
    height: 2px;
}
.navbar-menu.is-active { /* For mobile dropdown */
    background-color: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(5px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.1);
    border-top: 1px solid var(--border-color);
}

/* Hero Section */
#hero {
    /* background-image handled by inline style + linear-gradient in HTML */
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    position: relative;
    color: var(--text-color-light); /* Base text color for hero children */
}
#hero .hero-body {
    position: relative;
    z-index: 2;
    padding-top: calc(var(--navbar-height) + 3rem); /* Ensure content below navbar */
    padding-bottom: 3rem;
}
#hero .title, #hero .subtitle {
    color: var(--text-color-light); /* Explicitly set for hero text */
    text-shadow: 2px 2px 8px rgba(0,0,0,0.7);
}
#hero .volumetric-button-hero {
    margin-top: 2rem;
}

.hero-background-parallax {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 30%; /* Adjust as needed */
    background-size: contain; /* Or cover, depending on image */
    background-repeat: no-repeat;
    background-position: bottom center;
    z-index: 1;
    opacity: 0.3; /* Adjust opacity */
    pointer-events: none; /* Make sure it doesn't interfere with clicks */
}

/* Vision Section */
.vision-section .image-container img.volumetric-image {
    border-radius: var(--border-radius);
    box-shadow: var(--volumetric-shadow);
    max-width: 600px; /* Limit image width */
    margin: 1rem auto; /* Center if smaller than column */
}

/* Projects Section */
.projects-section {
    background-color: var(--background-color-grey);
}

/* Accolades Section */
.accolades-section {
    /* background-color already set in HTML for demo, can be here */
}

/* Resources Section */
/* .resources-section styles if any specific beyond cards */

/* FAQ Section */
.faq-section {
    background-color: var(--background-color-grey);
}

/* Contact Section */
.contact-section label.label {
    color: var(--text-color-dark);
    font-weight: 600;
}

/* Footer */
.footer {
    background-color: var(--text-color-dark);
    color: #B0B0B0; /* Lighter grey for better readability */
    padding: 4rem 1.5rem 2rem;
    font-size: 0.95rem;
}
.footer .title.footer-title {
    color: var(--text-color-light);
    margin-bottom: 1.5rem;
    font-size: 1.3rem;
}
.footer p, .footer li {
    color: #B0B0B0;
}
.footer a {
    color: var(--primary-color-light);
}
.footer a:hover {
    color: var(--text-color-light);
    text-decoration: underline;
}
.footer ul {
    list-style: none;
    padding-left: 0;
    margin-left: 0; /* Reset Bulma's list styling if present */
}
.footer ul li {
    margin-bottom: 0.75rem;
}
.footer hr {
    background-color: #444444;
    height: 1px;
    margin: 2rem 0;
}
.footer .content.has-text-centered p {
    font-size: 0.9rem;
    color: #909090;
}
.footer .social-links a { /* If you add a class for social links container */
    margin: 0 0.5rem;
    display: inline-block;
}

/* -------------------------------------------------------------------------- */
/*                            Special Page Styles                             */
/* -------------------------------------------------------------------------- */

/* success.html page styling */
body.success-page { /* Add this class to the body tag of success.html */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    text-align: center;
    background-color: var(--primary-color-light);
    padding: 2rem;
}
.success-page .success-container {
    background-color: var(--background-color-light);
    padding: 3rem;
    border-radius: var(--border-radius);
    box-shadow: var(--volumetric-shadow);
    max-width: 600px;
    width: 90%;
}
.success-page .success-container .title {
    color: var(--primary-color);
    margin-bottom: 1.5rem;
}
.success-page .success-container p {
    color: var(--text-color-medium);
    font-size: 1.1rem;
    margin-bottom: 2rem;
}

/* privacy.html & terms.html page styling */
body.privacy-page,
body.terms-page { /* Add these classes to body tags of respective pages */
    padding-top: calc(var(--navbar-height) + 40px); /* Space for fixed navbar + a bit more */
}
.privacy-page .section,
.terms-page .section {
    background-color: var(--background-color-light);
}
.privacy-page .content h2, .terms-page .content h2,
.privacy-page .content .title.is-2, .terms-page .content .title.is-2 {
    margin-top: 1.5rem;
    margin-bottom: 1rem;
    color: var(--text-color-dark);
    font-size: 1.8rem;
}
.privacy-page .content h3, .terms-page .content h3,
.privacy-page .content .title.is-3, .terms-page .content .title.is-3 {
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
    color: var(--text-color-dark);
    font-size: 1.4rem;
}
.privacy-page .content p, .terms-page .content p {
    margin-bottom: 1em;
    line-height: 1.8;
}
.privacy-page .content ul, .terms-page .content ul {
    margin-left: 1.5em;
    margin-bottom: 1em;
}


/* -------------------------------------------------------------------------- */
/*                                 Animations                                 */
/* -------------------------------------------------------------------------- */

/* Barba.js Page Transitions (Example - can be customized in script.js) */
.barba-leave-active,
.barba-enter-active {
    transition: opacity 0.4s var(--transition-timing),
                transform 0.4s var(--transition-timing);
}
.barba-leave { opacity: 1; transform: translateX(0); }
.barba-leave-to { opacity: 0; transform: translateX(-30px); }
.barba-enter { opacity: 0; transform: translateX(30px); }
.barba-enter-to { opacity: 1; transform: translateX(0); }

/* AOS Scroll Animations - if using AOS.js, these are basic initial states */
[data-aos] {
    opacity: 0;
    transition-property: transform, opacity;
}
[data-aos].aos-animate {
    opacity: 1;
}
[data-aos="fade-up"].aos-animate {
    transform: translateY(0);
}
[data-aos="fade-up"] {
    transform: translateY(40px);
}


/* -------------------------------------------------------------------------- */
/*                           Responsiveness (Media Queries)                   */
/* -------------------------------------------------------------------------- */

/* Tablets and larger mobiles */
@media screen and (max-width: 1023px) {
    .navbar-menu { padding: 0.5rem 0; }
    .navbar-item { padding: 0.75rem 1rem; }

    .columns.is-centered .column.is-two-thirds,
    .columns.is-centered .column.is-three-quarters {
        width: 90%; /* More width on smaller screens */
        flex: none; /* Override Bulma flex behavior if needed to ensure width */
    }
    .section { padding: 3rem 1rem; }
    .title.is-1 { font-size: 2.5rem; }
    .title.is-2 { font-size: 2rem; }
    .section-title { margin-bottom: 2rem !important; }
}

/* Mobile phones */
@media screen and (max-width: 768px) {
    body { font-size: 0.95rem; } /* Slightly smaller base font for mobile */
    .title.is-1 { font-size: 2rem; }
    .title.is-2 { font-size: 1.7rem; }
    .title.is-3 { font-size: 1.5rem; }
    .subtitle { font-size: 0.95rem; }

    #hero .hero-body {
        padding-top: calc(var(--navbar-height) + 2rem);
        padding-left: 1rem;
        padding-right: 1rem;
    }
    #hero .volumetric-button-hero {
        font-size: 1rem !important;
        padding: 0.8em 1.8em !important;
    }

    .columns.is-multiline .column.is-one-third,
    .columns.is-multiline .column.is-two-fifths {
        width: 100%; /* Stack cards on mobile */
        margin-bottom: 1.5rem; /* Add space between stacked cards */
    }
    .columns.is-multiline .column.is-one-third:last-child,
    .columns.is-multiline .column.is-two-fifths:last-child {
        margin-bottom: 0;
    }

    .footer .columns { text-align: center; }
    .footer .column { margin-bottom: 2rem; }
    .footer .column:last-child { margin-bottom: 0; }

    .accordion-header { font-size: 1rem; padding: 0.8rem 1rem; }
    .accordion-item.is-active .accordion-content { padding: 1rem; }
}

/* Cookie Consent Popup styling is inline in HTML as per prompt. */