/* style.css */

/* -------------------------------------------------------------------------
   1. CSS Variables
   ------------------------------------------------------------------------- */
:root {
    --font-primary: 'Roboto', sans-serif;
    --font-headings: 'Archivo Black', sans-serif;

    --color-text: #333333;
    --color-text-light: #FFFFFF;
    --color-text-muted: #555555;
    --color-headings: #222222;

    --color-primary: #A0D2DB; /* Pastel Blue/Teal */
    --color-primary-rgb: 160, 210, 219;
    --color-primary-dark: #74959A;
    --color-primary-light: #CDE8ED;

    --color-accent: #F7CAC9; /* Pastel Pink/Coral */
    --color-accent-rgb: 247, 202, 201;
    --color-accent-dark: #E0B0B0;

    --color-background-body: #FDFDFD; /* Very light, almost white */
    --color-background-light: #F8F8F8; /* Light sections */
    --color-background-section-alt: #EFEFEF; /* Alternate light sections */
    --color-background-dark: #343a40; /* Footer */
    --color-background-card: #FFFFFF;

    --color-border: #D0D0D0;
    --brutalist-border-color: #333333;
    --brutalist-border: 2px solid var(--brutalist-border-color);

    --shadow-light: 0 2px 4px rgba(0,0,0,0.05);
    --shadow-medium: 0 5px 15px rgba(0,0,0,0.1);
    --shadow-brutalist: 4px 4px 0px var(--brutalist-border-color);
    --shadow-brutalist-hover: 6px 6px 0px var(--color-primary-dark);

    --spacing-unit: 1rem;
    --navbar-height: 52px; /* Default Bulma navbar height, can adjust if needed */
    --section-padding-vertical: 4rem;
    --section-padding-vertical-mobile: 3rem;

    --border-radius-sharp: 0;
    --border-radius-soft: 4px;
}

/* -------------------------------------------------------------------------
   2. Global Styles & Typography
   ------------------------------------------------------------------------- */
html {
    scroll-behavior: smooth;
    background-color: var(--color-background-body);
}

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

h1, h2, h3, h4, h5, h6,
.title, .subtitle {
    font-family: var(--font-headings);
    color: var(--color-headings);
    line-height: 1.3;
}

.title { margin-bottom: 1.5rem; }
.subtitle { color: var(--color-text-muted); margin-top: -1rem; margin-bottom: 1.5rem; }

.title.is-1 { font-size: 3rem; }
.title.is-2 { font-size: 2.5rem; }
.title.is-3 { font-size: 2rem; }
.title.is-4 { font-size: 1.5rem; }


p {
    margin-bottom: var(--spacing-unit);
}

a {
    color: var(--color-primary);
    transition: color 0.3s ease, opacity 0.3s ease;
    text-decoration: none;
}
a:hover {
    color: var(--color-primary-dark);
}

.section {
    padding: var(--section-padding-vertical) 1.5rem;
}

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

/* Background image helper */
[style*="background-image"] {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* ScrollReveal elements are initially hidden */
.sr-reveal {
    visibility: hidden;
}

/* -------------------------------------------------------------------------
   3. Header / Navbar
   ------------------------------------------------------------------------- */
.navbar.is-fixed-top {
    background-color: rgba(253, 253, 253, 0.85); /* Slightly off-white glass */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: var(--shadow-light);
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

.navbar-brand .navbar-item {
    font-weight: bold;
    color: var(--color-headings) !important;
}

.navbar-menu {
    box-shadow: none; /* Remove Bulma's mobile menu shadow if fixed top has one */
}

.navbar-item, .navbar-link {
    font-family: var(--font-primary);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-text) !important;
    transition: color 0.3s ease, background-color 0.3s ease;
}
.navbar-item:hover, .navbar-link:hover,
.navbar-item.is-active, .navbar-link.is-active {
    background-color: transparent !important; /* Override Bulma's hover bg */
    color: var(--color-primary) !important;
}
.navbar-link::after {
    border-color: var(--color-primary) !important;
}
.navbar-dropdown .navbar-item {
    font-weight: normal;
    padding-left: 1.5rem;
}
.navbar-dropdown .navbar-item:hover {
    background-color: var(--color-background-light) !important;
}

.navbar-burger span {
    background-color: var(--color-headings);
    height: 2px;
}
.navbar-burger:hover {
    background-color: rgba(0,0,0,0.05);
}

/* Adjust main content for fixed navbar */
body {
    padding-top: var(--navbar-height);
}


/* -------------------------------------------------------------------------
   4. Hero Section
   ------------------------------------------------------------------------- */
#hero {
    position: relative;
    color: var(--color-text-light);
}
#hero .hero-overlay { /* Defined in HTML inline style */ }

#hero .title,
#hero .subtitle,
#hero p {
    color: var(--color-text-light);
    text-shadow: 2px 2px 4px rgba(0,0,0,0.6);
}

#hero .hero-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: calc(100vh - var(--navbar-height)); /* Full viewport height minus navbar */
    padding: 3rem 1.5rem;
}
#hero .button {
    margin-top: 1.5rem;
}

/* -------------------------------------------------------------------------
   5. General Button Styles
   ------------------------------------------------------------------------- */
.button, button, input[type="submit"], input[type="button"] {
    font-family: var(--font-primary);
    font-weight: 700;
    border-radius: var(--border-radius-sharp); /* Brutalist sharp edges */
    border-width: 2px;
    border-style: solid;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    padding: 0.75em 1.75em;
    transition: all 0.25s cubic-bezier(0.68, -0.55, 0.265, 1.55); /* Elastic transition */
    box-shadow: var(--shadow-brutalist);
    transform: translate(0,0); /* Base for transform */
}

.button:hover, button:hover, input[type="submit"]:hover, input[type="button"]:hover {
    transform: translate(-2px, -2px);
    box-shadow: var(--shadow-brutalist-hover);
}
.button:active, button:active, input[type="submit"]:active, input[type="button"]:active {
    transform: translate(1px, 1px);
    box-shadow: 2px 2px 0px var(--brutalist-border-color);
}

.button.is-primary {
    background-color: var(--color-primary);
    border-color: var(--color-primary-dark);
    color: var(--color-text-light);
}
.button.is-primary:hover {
    background-color: var(--color-primary-dark);
    border-color: var(--brutalist-border-color);
    box-shadow: 6px 6px 0px var(--brutalist-border-color);
}

.button.is-link { /* Using accent color for 'link' buttons */
    background-color: var(--color-accent);
    border-color: var(--color-accent-dark);
    color: var(--color-text-light);
}
.button.is-link:hover {
    background-color: var(--color-accent-dark);
    border-color: var(--brutalist-border-color);
    box-shadow: 6px 6px 0px var(--brutalist-border-color);
}

.button.is-info.is-light {
    background-color: var(--color-primary-light);
    border-color: var(--color-primary);
    color: var(--color-primary-dark);
}
.button.is-info.is-light:hover {
    background-color: var(--color-primary);
    color: var(--color-text-light);
    border-color: var(--color-primary-dark);
}

/* Microinteraction class (can be combined with button styles) */
.has-microinteraction:active {
    transform: translate(1px, 1px) scale(0.98);
    box-shadow: 2px 2px 0px var(--brutalist-border-color);
}


/* -------------------------------------------------------------------------
   6. Card Styles (Global)
   ------------------------------------------------------------------------- */
.card {
    background-color: var(--color-background-card);
    border: var(--brutalist-border);
    border-radius: var(--border-radius-sharp);
    box-shadow: var(--shadow-brutalist);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex; /* For flex properties like flex-grow in card-content */
    flex-direction: column; /* Stacks image and content vertically */
    height: 100%; /* Ensures cards in a row have same height if content varies */
    overflow: hidden; /* Ensures no content spills with transforms */
}

.card:hover {
    transform: translateY(-5px) translateX(-5px);
    box-shadow: 8px 8px 0px var(--color-primary);
}

.card .card-image { /* Bulma's wrapper */
    border-bottom: var(--brutalist-border);
    display: flex; /* Center the image-container */
    justify-content: center;
    align-items: center;
}
.card .card-image .image-container { /* Custom wrapper from HTML */
    width: 100%;
    overflow: hidden; /* Clip image if it's larger than the container */
}

.card .card-image .image-container img {
    display: block;
    width: 100%;
    height: 250px; /* Consistent image height */
    object-fit: cover; /* Cover, don't distort */
    transition: transform 0.4s ease;
}
.card:hover .card-image .image-container img {
    transform: scale(1.05); /* Subtle zoom on hover */
}

.card .card-content {
    padding: 1.5rem;
    flex-grow: 1; /* Allows content to fill available space */
    text-align: left; /* Default for card text */
}
.card .card-content .title,
.card .card-content .subtitle {
    color: var(--color-headings);
}
.card .card-content p {
    color: var(--color-text);
}
.card .card-content .content { /* Bulma's content wrapper */
    color: var(--color-text);
}
.card .card-content .content p:last-child {
    margin-bottom: 0;
}
/* For cards where all content needs to be centered */
.card.is-content-centered .card-content {
    text-align: center;
}
.card.is-content-centered .card-image { /* if image itself needs more centering context */
    margin-left: auto;
    margin-right: auto;
}

/* -------------------------------------------------------------------------
   7. Section-Specific Styles
   ------------------------------------------------------------------------- */

/* Statistics Section */
#statistics {
    background-color: var(--color-background-light);
}
#statistics .box {
    border: var(--brutalist-border);
    border-radius: var(--border-radius-sharp);
    box-shadow: var(--shadow-brutalist);
    background-color: var(--color-background-card);
    padding: 2rem;
    height: 100%;
}
#statistics .box .title.is-1 { /* The number */
    color: var(--color-primary);
    margin-bottom: 0.5rem;
}
#statistics .box .subtitle.is-5 { /* The text below number */
    color: var(--color-headings);
    font-weight: 700;
}
#statistics .box p:not(.title):not(.subtitle) {
    color: var(--color-text-muted);
    font-size: 0.9rem;
}

/* Success Stories (Timeline) */
#success-stories .timeline .timeline-header .tag {
    background-color: var(--color-primary);
    color: var(--color-text-light);
    font-family: var(--font-headings);
    padding: 0.5em 1em;
    font-size: 0.9rem;
    border-radius: var(--border-radius-sharp);
}
#success-stories .timeline .timeline-item .timeline-marker {
    background-color: var(--color-background-card);
    border: 3px solid var(--color-primary);
}
#success-stories .timeline .timeline-item .timeline-marker.is-image {
    padding: 0;
    border-width: 3px;
}
#success-stories .timeline .timeline-item .timeline-content .heading {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-text-muted);
    margin-bottom: 0.5rem;
}
#success-stories .timeline .timeline-content .card {
    margin-top: 0.5rem; /* Space between heading and card */
}

/* Challenges Section */
#challenges {
    background-color: var(--color-background-section-alt);
}

/* Experience Section (uses cards, already styled) */
#experience {
    background-color: var(--color-background-light);
}
#experience .card .card-image { /* Specific for this section if needed */
    height: 280px; /* Example of adjusting if needed */
}
#experience .card .card-image img {
    height: 280px;
}

/* Behind the Scenes Section */
#behind-the-scenes {
    /* Background image is set inline with parallax effect */
    background-attachment: fixed; /* For parallax effect */
}
#behind-the-scenes .column figure {
    border: var(--brutalist-border);
    border-radius: var(--border-radius-sharp);
    overflow: hidden;
    box-shadow: var(--shadow-brutalist);
    transition: all 0.3s ease;
}
#behind-the-scenes .column figure:hover {
    transform: scale(1.03) translateY(-3px) translateX(-3px);
    box-shadow: 8px 8px 0px var(--color-primary);
}
#behind-the-scenes .column figure img {
    display: block;
    width: 100%;
    height: auto;
}
#behind-the-scenes .column p {
    margin-top: 0.75rem;
    font-size: 0.9rem;
    color: var(--color-text); /* Ensure contrast on textured bg */
    text-shadow: 1px 1px 1px rgba(255,255,255,0.7); /* If bg is dark/busy */
}

/* Workshops & Webinars Sections (use cards) */
#workshops, #webinars {
    background-color: var(--color-background-section-alt);
}
#workshops .card, #webinars .card {
    margin-bottom: 1.5rem; /* Space between cards if stacked in mobile */
}

/* Careers Section */
#careers {
    background-color: var(--color-background-light);
}
#careers .content p {
    color: var(--color-text);
}

/* External Resources Section */
#external-resources {
    background-color: var(--color-background-section-alt);
}
#external-resources .card .title a {
    color: var(--color-primary);
    text-decoration: none;
}
#external-resources .card .title a:hover {
    color: var(--color-primary-dark);
    text-decoration: underline;
}
#external-resources .card .content {
    font-size: 0.9rem;
    color: var(--color-text-muted);
}

/* Contact Section */
#contact-form-section {
    /* Background image set inline */
    padding: var(--section-padding-vertical) 1.5rem;
}
#contact-form-section .box {
    background-color: rgba(255, 255, 255, 0.95); /* Semi-transparent box over textured bg */
    border-radius: var(--border-radius-soft); /* Softer for form */
    padding: 2.5rem;
    box-shadow: var(--shadow-medium);
    border: 1px solid var(--color-border);
}

.modern-input, .modern-textarea {
    font-family: var(--font-primary);
    border: var(--brutalist-border) !important;
    border-radius: var(--border-radius-sharp) !important;
    box-shadow: none !important;
    padding: 12px 15px !important;
    font-size: 1rem;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    background-color: #fff;
}
.modern-input:focus, .modern-textarea:focus {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.25) !important;
}
.label {
    color: var(--color-headings);
    font-weight: 700;
    font-family: var(--font-primary);
}
#contact-form-section hr {
    margin: 2rem 0;
    background-color: var(--color-border);
}
#contact-form-section .content strong {
    color: var(--color-headings);
}

/* -------------------------------------------------------------------------
   8. Footer
   ------------------------------------------------------------------------- */
.footer {
    background-color: var(--color-background-dark);
    color: var(--color-text-light);
    padding: 3rem 1.5rem 2rem;
}
.footer .title {
    color: var(--color-text-light) !important;
}
.footer p {
    color: #adb5bd; /* Lighter gray for footer text */
    font-size: 0.95rem;
}
.footer a {
    color: var(--color-accent) !important; /* Accent for links in dark footer */
    font-weight: normal;
}
.footer a:hover {
    color: var(--color-text-light) !important;
    text-decoration: underline;
}
.footer ul {
    list-style: none;
    padding-left: 0;
}
.footer ul li {
    margin-bottom: 0.5rem;
}
.footer hr {
    background-color: rgba(255,255,255,0.1);
    height: 1px;
    border: none;
    margin: 2rem 0;
}
.footer .content.has-text-centered p {
    font-size: 0.9rem;
}
.footer .content.has-text-centered p:last-child {
    font-size: 0.8rem;
    opacity: 0.7;
}

/* -------------------------------------------------------------------------
   9. Specific Page Styles (Success, Privacy, Terms)
   ------------------------------------------------------------------------- */
/* For success.html page */
body.success-page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    padding-top: 0; /* Override body padding-top if success page has no fixed header */
}
body.success-page.has-fixed-header {
    padding-top: var(--navbar-height); /* Add back if success page has header */
}

body.success-page main {
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem;
}
.success-message-container {
    background-color: var(--color-background-card);
    padding: 3rem;
    border: var(--brutalist-border);
    box-shadow: var(--shadow-brutalist);
    max-width: 600px;
}
.success-message-container .icon svg {
    width: 80px;
    height: 80px;
    color: var(--color-primary);
    margin-bottom: 1.5rem;
}

/* For privacy.html and terms.html pages */
body.privacy-page main .section:first-of-type,
body.terms-page main .section:first-of-type {
    padding-top: calc(var(--section-padding-vertical) + 30px); /* Extra padding for header */
}
/* If content is directly in main without a section */
body.privacy-page main.direct-content,
body.terms-page main.direct-content {
     padding-top: calc(var(--navbar-height) + 30px); /* Based on current HTML, this might not be needed if all content is in sections */
}

/* -------------------------------------------------------------------------
   10. Utility Classes
   ------------------------------------------------------------------------- */
.has-text-shadow {
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}
.has-light-text-shadow {
    text-shadow: 1px 1px 2px rgba(255,255,255,0.3);
}

.read-more-link {
    display: inline-block;
    margin-top: 1rem;
    font-weight: bold;
    color: var(--color-accent);
    text-decoration: none;
    position: relative;
    font-size: 0.95rem;
}
.read-more-link::after {
    content: '→';
    margin-left: 0.5em;
    transition: transform 0.3s ease;
    display: inline-block;
}
.read-more-link:hover {
    color: var(--color-accent-dark);
}
.read-more-link:hover::after {
    transform: translateX(5px);
}


/* -------------------------------------------------------------------------
   11. Cookie Consent Popup (Basic styles - mostly inline in HTML)
   ------------------------------------------------------------------------- */
#cookieConsentPopup {
    /* Styles are primarily inline in HTML for simplicity as requested */
    /* Can add more here if needed */
    box-shadow: 0 -2px 10px rgba(0,0,0,0.2);
}
#cookieConsentPopup p {
    margin-bottom: 15px !important; /* Override p margin if needed */
    font-size: 0.9rem;
    line-height: 1.5;
}
#acceptCookieButton {
    background-color: var(--color-primary) !important; /* Example using theme color */
    border: none;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 1rem;
    cursor: pointer;
    border-radius: var(--border-radius-soft);
    font-weight: bold;
    color: var(--color-text-light);
}
#acceptCookieButton:hover {
    background-color: var(--color-primary-dark) !important;
}

/* -------------------------------------------------------------------------
   12. Responsive Adjustments
   ------------------------------------------------------------------------- */
@media screen and (max-width: 1023px) { /* Bulma's $desktop breakpoint */
    .navbar-menu {
        background-color: rgba(253, 253, 253, 0.98);
        box-shadow: 0 8px 16px rgba(10,10,10,.1);
        padding: .5rem 0;
        border-top: 1px solid rgba(0,0,0,0.05);
    }
}

@media screen and (max-width: 768px) { /* Bulma's $tablet breakpoint */
    .title.is-1 { font-size: 2.5rem; }
    .title.is-2 { font-size: 2rem; }
    .title.is-3 { font-size: 1.75rem; }
    .section {
        padding: var(--section-padding-vertical-mobile) 1rem;
    }
    #hero .hero-body {
        padding: var(--section-padding-vertical-mobile) 1rem;
    }
    body.privacy-page main .section:first-of-type,
    body.terms-page main .section:first-of-type {
        padding-top: calc(var(--section-padding-vertical-mobile) + 20px);
    }
    #contact-form-section .box {
        padding: 1.5rem;
    }
}