/* style.css */

/*------------------------------------------------------------------
[TABLE OF CONTENTS]

1.  Global Styles & Variables
2.  Typography
3.  Helper / Utility Classes
4.  Header / Navigation
5.  Hero Section
6.  General Section Styling
7.  Card Styling (Statistics, Innovation, Success Stories, News, Resources)
8.  Accordion (Methodology)
9.  Button Styling (Global)
10. Form Elements
11. Specific Page Styles (Success, Privacy, Terms)
12. Footer
13. Particle Container
14. Animations & Transitions
15. Responsive Adjustments (Bulma handles a lot, add specifics if needed)
-------------------------------------------------------------------*/

img {
  object-fit: cover;
}

/* 1. Global Styles & Variables
-------------------------------------------------------------------*/
:root {
    /* Color Palette: Split-Complementary (Teal Primary, Red & Orange Accents) */
    --color-primary: #00BCD4;       /* Teal - Main Interactive Elements */
    --color-primary-dark: #008D9E;
    --color-primary-light: #62E3F4;

    --color-accent1: #FF5252;     /* Red - Strong Call to Actions, Alerts */
    --color-accent2: #FF9800;     /* Orange - Secondary Highlights, Badges */

    /* Neutrals */
    --color-text: #363636;        /* Bulma's default text, good contrast on light */
    --color-text-light: #ffffff;
    --color-text-muted: #7a7a7a;
    --color-heading: #222222;     /* Darker for strong headings */

    --color-background-body: #ffffff;
    --color-background-light-section: #f5f5f5; /* Light grey for section backgrounds */
    --color-background-dark-section: #2c3e50;  /* Dark slate blue for contrast sections/footer */
    --color-background-card: #ffffff;

    --color-border: #dbdbdb;      /* Bulma's default border */
    --color-border-strong: #333333; /* For neo-brutalist outlines */

    /* Shadows & Effects */
    --shadow-soft: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-medium: 0 6px 20px rgba(0, 0, 0, 0.1);
    --shadow-neo: 4px 4px 0px var(--color-heading); /* Neo-brutalist sharp shadow */
    --text-shadow-heading: 1px 1px 0px rgba(0,0,0,0.1); /* Subtle depth for light text on light bg if needed */

    /* Typography */
    --font-family-heading: 'Roboto', "Helvetica Neue", Helvetica, Arial, sans-serif;
    --font-family-body: 'Lato', "Helvetica Neue", Helvetica, Arial, sans-serif;

    /* Borders & Spacing */
    --border-radius-sharp: 0;
    --border-radius-slight: 3px;
    --border-radius-default: 6px; /* Bulma's default is often 4px or 6px */
    --header-height: 70px; /* Adjust based on final header size */
    --section-padding-vertical: 5rem;
    --section-padding-horizontal: 1.5rem;
}

html {
    scroll-behavior: smooth;
    font-size: 16px; /* Base font size */
}

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

/* 2. Typography
-------------------------------------------------------------------*/
h1, h2, h3, h4, h5, h6,
.title, .subtitle {
    font-family: var(--font-family-heading);
    color: var(--color-heading);
    font-weight: 700; /* Roboto bold */
}

.title {
    font-weight: 900; /* Roboto black for main titles */
    text-shadow: var(--text-shadow-heading);
}

.hero-title { /* Specific for hero title */
    font-size: 3rem; /* Adjust as needed */
    font-weight: 900;
    color: var(--color-text-light) !important; /* Ensure white for hero */
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5); /* Stronger shadow for readability on image */
}
@media screen and (max-width: 768px) {
    .hero-title {
        font-size: 2.2rem;
    }
}


.hero-subtitle {
    color: var(--color-text-light) !important; /* Ensure white for hero */
    text-shadow: 1px 1px 2px rgba(0,0,0,0.4);
}

.section-title {
    margin-bottom: 2.5rem !important; /* More space below section titles */
    color: var(--color-heading);
    text-align: center;
}

p {
    margin-bottom: 1rem;
}

a {
    color: var(--color-primary);
    transition: color 0.2s ease-in-out;
}

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

/* 3. Helper / Utility Classes
-------------------------------------------------------------------*/
.has-text-primary { color: var(--color-primary) !important; }
.has-background-primary { background-color: var(--color-primary) !important; }
.has-background-primary-dark { background-color: var(--color-primary-dark) !important; } /* As per HTML */
.has-background-dark { background-color: var(--color-background-dark-section) !important; }
.has-background-light { background-color: var(--color-background-light-section) !important; }

/* 4. Header / Navigation
-------------------------------------------------------------------*/
.header {
    background-color: rgba(255, 255, 255, 0.9); /* Slightly transparent white */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1000;
    height: var(--header-height);
}

.navbar {
    min-height: var(--header-height);
}

.navbar-item img {
    max-height: calc(var(--header-height) - 20px); /* Adjust padding */
}

.navbar-item, .navbar-link {
    font-family: var(--font-family-heading);
    font-weight: 700;
    color: var(--color-text);
    transition: color 0.2s ease, background-color 0.2s ease;
}

.navbar-item:hover, .navbar-link:hover,
.navbar-item.is-active, .navbar-link.is-active {
    background-color: transparent !important; /* Bulma override */
    color: var(--color-primary) !important;
}

.navbar-burger {
    color: var(--color-heading);
    height: var(--header-height);
    width: var(--header-height);
}
.navbar-burger span {
    background-color: var(--color-heading);
}

@media screen and (max-width: 1023px) {
    .navbar-menu {
        background-color: rgba(255, 255, 255, 0.98);
        box-shadow: 0 8px 16px rgba(10,10,10,.1);
        padding: 0.5rem 0;
    }
    .navbar-item {
        padding: 0.75rem 1rem;
    }
}

/* 5. Hero Section
-------------------------------------------------------------------*/
#hero {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    /* Gradient overlay is applied inline in HTML */
}

#hero .hero-body {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--section-padding-horizontal);
}

#hero .container {
    max-width: 800px;
}

.hero-cta {
    margin-top: 2rem;
}

/* 6. General Section Styling
-------------------------------------------------------------------*/
.section {
    padding: var(--section-padding-vertical) var(--section-padding-horizontal);
}
/* Ensure content sections have top padding for fixed header */
main > section:first-of-type, /* For ./ after hero */
.main-content-page > section:first-of-type { /* For other pages */
    /* padding-top: calc(var(--header-height) + var(--section-padding-vertical)); */
    /* This padding will be handled by .content-page wrapper or specific page CSS */
}


/* 7. Card Styling
-------------------------------------------------------------------*/
.card {
    background-color: var(--color-background-card);
    border-radius: var(--border-radius-slight);
    box-shadow: var(--shadow-soft);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%; /* Make cards in a row equal height if using Bulma columns */
    display: flex;
    flex-direction: column;
}

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

/* Neo-brutalist card variant */
.card.is-neo {
    border: 2px solid var(--color-border-strong);
    box-shadow: var(--shadow-neo);
    border-radius: var(--border-radius-sharp);
}
.card.is-neo:hover {
    transform: translate(-3px, -3px);
    box-shadow: 6px 6px 0px var(--color-border-strong);
}

.card .card-image { /* Bulma's structure */
    border-top-left-radius: var(--border-radius-slight);
    border-top-right-radius: var(--border-radius-slight);
    overflow: hidden; /* Ensures image respects border-radius */
}

.card .card-image.is-neo-image { /* For neo card image container */
    border-radius: 0;
}


.card .card-image figure.image {
    /* For fixed height images if aspect ratio not enough */
    /* height: 200px;  Example */
    /* overflow: hidden; */ /* Bulma's .image should manage */
    background-color: var(--color-background-light-section); /* Placeholder bg for images */
}

.card .card-image figure.image img {
    object-fit: cover; /* Crucial for consistent image display */
    width: 100%;
    height: 100%; /* Ensure img fills the figure if figure has fixed height */
    display: block; /* Remove any extra space below image */
}

.card .card-content {
    padding: 1.5rem;
    flex-grow: 1; /* Allows content to expand and push footer (if any) down */
    display: flex;
    flex-direction: column;
}
.card .card-content .content {
    flex-grow: 1;
}
.card .card-content .button { /* Ensure buttons in cards are at the bottom */
    margin-top: auto;
    align-self: flex-start; /* Or center if desired */
}

.stat-card .stat-number {
    font-size: 3.5rem;
    font-weight: 900;
    color: var(--color-primary);
}
.stat-card .stat-description {
    font-weight: 700;
    color: var(--color-heading);
    margin-bottom: 0.5rem;
}

.resource-card .title a {
    color: var(--color-heading);
}
.resource-card .title a:hover {
    color: var(--color-primary);
}

.news-card .card-content .is-size-7 {
    margin-bottom: 0.75rem;
}


/* 8. Accordion (Methodology)
-------------------------------------------------------------------*/
.accordion-item {
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-slight);
    margin-bottom: 1rem;
    overflow: hidden; /* For smooth transitions */
}
.accordion-item:last-child {
    margin-bottom: 0;
}

.accordion-header {
    background-color: var(--color-background-light-section);
    color: var(--color-heading);
    padding: 1rem 1.5rem;
    width: 100%;
    text-align: left;
    border: none;
    font-family: var(--font-family-heading);
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.2s ease;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.accordion-header:hover {
    background-color: var(--color-background-medium); /* Bulma .is-light gray */
}

.accordion-header .icon {
    transition: transform 0.3s ease;
}
.accordion-header.is-active .icon {
    transform: rotate(180deg); /* Example for a chevron down icon */
}

.accordion-content {
    padding: 0 1.5rem; /* Initially no padding for transition */
    background-color: var(--color-background-card);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out, padding 0.4s ease-out;
}
.accordion-content p {
    margin: 0; /* remove default p margin if content has its own wrapper */
}

.accordion-content.is-active {
    padding: 1.5rem; /* Add padding when active */
    max-height: 500px; /* Adjust as needed, should be more than content height */
}


/* 9. Button Styling (Global)
-------------------------------------------------------------------*/
.button, button, input[type="submit"], input[type="button"] {
    font-family: var(--font-family-heading);
    font-weight: 700; /* Bold */
    text-transform: uppercase;
    padding: 0.8em 1.8em;
    border-radius: var(--border-radius-slight);
    transition: all 0.25s ease-in-out;
    cursor: pointer;
    border: 2px solid transparent; /* Base border for consistency */
    letter-spacing: 0.5px;
}

/* Bulma .button overrides / enhancements */
.button.is-primary {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-text-light);
}
.button.is-primary:hover, .button.is-primary:focus {
    background-color: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    color: var(--color-text-light); /* Keep text light */
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}
.button.is-primary:active {
    transform: translateY(0px);
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.button.is-primary.is-outlined {
    background-color: transparent;
    border-color: var(--color-primary);
    color: var(--color-primary);
}
.button.is-primary.is-outlined:hover, .button.is-primary.is-outlined:focus {
    background-color: var(--color-primary);
    color: var(--color-text-light);
    border-color: var(--color-primary); /* Ensure border color remains */
}

.button.is-link.is-outlined { /* For "Read More" or similar */
    border-color: var(--color-accent2);
    color: var(--color-accent2);
    font-weight: bold;
}
.button.is-link.is-outlined:hover {
    background-color: var(--color-accent2);
    border-color: var(--color-accent2);
    color: var(--color-text-light);
}

/* Neo-brutalist button variant */
.button.is-neo {
    border-radius: var(--border-radius-sharp);
    border: 2px solid var(--color-border-strong);
    box-shadow: var(--shadow-neo);
    background-color: var(--color-accent1);
    color: var(--color-text-light);
}
.button.is-neo:hover {
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0px var(--color-border-strong);
    background-color: color-mix(in srgb, var(--color-accent1) 90%, black);
}
.button.is-neo:active {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0px var(--color-border-strong);
}

.hero-cta, .contact-cta { /* Large CTA buttons */
    padding: 1em 2.5em;
    font-size: 1.1rem;
}


/* 10. Form Elements (contacts.html)
-------------------------------------------------------------------*/
.contact-form .input,
.contact-form .textarea {
    border-radius: var(--border-radius-slight);
    border: 1px solid var(--color-border);
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.05);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.contact-form .input:focus,
.contact-form .textarea:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 0.125em color-mix(in srgb, var(--color-primary) 25%, transparent);
}

.contact-form label.label {
    color: var(--color-heading);
    font-weight: 700;
}

/* 11. Specific Page Styles
-------------------------------------------------------------------*/
/* Success Page */
.success-page-container {
    min-height: 100vh;
    display: flex;
    flex-direction: column; /* Ensure header and footer stack if present */
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--section-padding-horizontal);
    background-color: var(--color-background-light-section);
}
.success-page-container .box {
    max-width: 500px;
    padding: 2.5rem;
}
.success-page-container .icon.is-large .fa-check-circle {
    font-size: 4rem; /* Make icon larger */
    color: var(--color-primary);
}

/* Privacy & Terms Pages */
.content-page { /* Wrapper for content on privacy/terms pages */
    padding-top: calc(var(--header-height) + 2rem); /* Space for fixed header + extra */
    padding-bottom: 2rem;
    min-height: calc(100vh - var(--header-height) - 180px); /* Adjust 180px based on footer height */
}
.content-page .section {
    padding-top: 0; /* Remove top padding from the first section inside */
}

.content-page h1.title {
    margin-bottom: 2rem;
}
.content-page .content h2 {
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    font-size: 1.75rem;
}
.content-page .content p, .content-page .content li {
    line-height: 1.7;
    color: var(--color-text);
}


/* 12. Footer
-------------------------------------------------------------------*/
.footer {
    background-color: var(--color-background-dark-section);
    color: color-mix(in srgb, var(--color-text-light) 80%, transparent);
    padding: 3rem 1.5rem 2rem;
}

.footer .title {
    color: var(--color-text-light);
    font-weight: 700;
    margin-bottom: 1rem;
}

.footer a {
    color: color-mix(in srgb, var(--color-text-light) 90%, transparent);
    transition: color 0.2s ease;
}

.footer a:hover {
    color: var(--color-primary-light);
}

.footer ul {
    list-style: none;
    margin-left: 0;
}
.footer ul li {
    margin-bottom: 0.5rem;
}

.footer .content.has-text-centered p {
    color: color-mix(in srgb, var(--color-text-light) 70%, transparent);
    font-size: 0.9rem;
}

/* Social media links in footer (text-based) */
.footer .social-links a {
    /* Add specific styling if needed, Bulma link styling will apply */
    /* Example: margin-right: 10px; */
}


/* 13. Particle Container (if using particles.js for background)
-------------------------------------------------------------------*/
#particle-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -10; /* Well behind everything */
    background-color: var(--color-background-dark-section); /* Fallback or base for particles */
}


/* 14. Animations & Transitions (AOS is used, this is for custom)
-------------------------------------------------------------------*/
/* Microinteractions for buttons are included in .button styles */
/* Add other custom transitions here */

/* 15. Responsive Adjustments
-------------------------------------------------------------------*/
@media screen and (max-width: 768px) {
    .section {
        padding: calc(var(--section-padding-vertical) * 0.7) var(--section-padding-horizontal);
    }
    .title.is-1 { font-size: 2.5rem; }
    .title.is-2 { font-size: 2rem; }
    .subtitle.is-3 { font-size: 1.25rem; }

    .stat-card .stat-number { font-size: 2.8rem; }
    .hero-cta, .contact-cta {
        padding: 0.8em 2em;
        font-size: 1rem;
    }
}

/* Cookie Consent Popup (Minimal styling as per request, already in HTML) */
#cookieConsentPopup a {
    text-decoration: underline;
}
#cookieConsentPopup a:hover {
    color: var(--color-primary-light);
}
#acceptCookieButton {
    background-color: var(--color-primary) !important; /* Override inline */
}
#acceptCookieButton:hover {
    background-color: var(--color-primary-dark) !important; /* Override inline */
}