/* style.css */

/* --- CSS Variables --- */
:root {
    /* Colors */
    --primary-color-start: #6a82fb; /* Vibrant Blue/Purple */
    --primary-color-end: #fc5c7d; /* Complementary Pink/Red */
    --primary-gradient: linear-gradient(45deg, var(--primary-color-start), var(--primary-color-end));
    --primary-color-darker: #5a72e8; /* Darker shade of start color for hover/active */
    --text-dark: #222222; /* Very dark for headings */
    --text-medium: #333333; /* Standard dark text */
    --text-light: #ffffff; /* Light text for dark backgrounds */
    --background-light: #f5f5f5; /* Light gray background */
    --background-white: #ffffff; /* White background */
    --border-color: #dbdbdb; /* Standard border color */
    --shadow-light: rgba(0, 0, 0, 0.1);
    --shadow-medium: rgba(0, 0, 0, 0.15);

    /* Fonts */
    --font-heading: 'Manrope', sans-serif;
    --font-body: 'Rubik', sans-serif;

    /* Transitions */
    --transition-fast: 0.2s ease-in-out;
    --transition-medium: 0.3s ease-in-out;

    /* Spacing */
    --navbar-height: 3.25rem; /* Default Bulma navbar height */
    --section-padding: 4rem 1.5rem;
}

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

body {
    font-family: var(--font-body);
    color: var(--text-medium);
    line-height: 1.6;
    font-size: 1rem; /* Base font size */
    overflow-x: hidden; /* Prevent horizontal scroll */
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--text-dark);
    font-weight: 700; /* Bold headings */
}

.title {
    font-family: var(--font-heading);
    color: var(--text-dark);
    font-weight: 800; /* Extra bold titles */
}

.subtitle {
    font-family: var(--font-body); /* Subtitles use body font */
    color: var(--text-medium);
    font-weight: 400;
}

a {
    color: var(--primary-color-start);
    transition: color var(--transition-fast);
}

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

/* Section Styling */
section.section {
    padding: var(--section-padding);
}

.container {
    max-width: 1152px; /* Bulma container width */
    margin: 0 auto;
}

/* Ensure dark text on light backgrounds */
.has-background-light {
    background-color: var(--background-light) !important;
}

/* Section Title Styling */
.section-title {
    text-align: center;
    margin-bottom: 3rem;
    font-size: 2.5rem; /* Larger title */
    color: var(--text-dark);
    font-weight: 800;
}

/* --- Header / Navbar --- */
.navbar.is-fixed-top {
    background-color: transparent;
    transition: background-color var(--transition-medium), box-shadow var(--transition-medium);
    z-index: 1000; /* Ensure navbar is above other content */
}

.navbar.is-fixed-top.is-scrolled {
    background-color: rgba(0, 0, 0, 0.85); /* Dark semi-transparent background on scroll */
    box-shadow: 0 2px 5px var(--shadow-light);
    /* Consider adding backdrop-filter for glassmorphism */
    /* backdrop-filter: blur(10px); */
}

.navbar-brand .navbar-item.title {
    color: var(--text-light); /* White title */
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
    font-weight: 800;
}

.navbar-menu .navbar-item {
    font-family: var(--font-body);
    font-weight: 500;
    color: var(--text-light); /* White links */
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
    transition: color var(--transition-fast), background-color var(--transition-fast);
}

.navbar-menu .navbar-item:hover {
    background-color: transparent; /* Override Bulma's default hover */
    color: var(--primary-color-start) !important; /* Highlight color on hover */
    text-shadow: none;
}

.navbar.is-fixed-top.is-scrolled .navbar-item:hover {
     color: var(--primary-color-end) !important; /* Different hover on scrolled bg */
}


.navbar-burger {
    color: var(--text-light); /* White burger icon */
}

/* Mobile Menu */
@media screen and (max-width: 1023px) {
    .navbar-menu {
        background-color: rgba(0, 0, 0, 0.9); /* Dark background */
        box-shadow: 0 8px 16px rgba(0,0,0,0.1);
        padding: 0.5rem 0;
        position: absolute;
        width: 100%;
        left: 0;
        top: var(--navbar-height); /* Position below navbar */
    }
    .navbar-menu.is-active {
        display: block;
    }
    .navbar-menu .navbar-item {
        color: var(--text-light) !important; /* Ensure white text */
        padding: 0.75rem 1.5rem;
        text-shadow: none;
    }
    .navbar-menu .navbar-item:hover {
        background-color: rgba(255, 255, 255, 0.1); /* Subtle hover effect */
         color: var(--primary-color-start) !important;
    }
}

/* --- Hero Section --- */
.hero.is-fullheight {
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.hero .image-overlay::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.6)); /* Dark overlay */
    z-index: 1;
}

.hero .hero-body {
    position: relative;
    z-index: 2; /* Place content above overlay */
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero .title, .hero .subtitle {
    color: var(--text-light); /* White text */
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.7); /* Stronger shadow for readability */
}

.hero .title {
    font-size: 3.5rem; /* Large hero title */
    margin-bottom: 1rem;
}

.hero .subtitle {
    font-size: 1.5rem;
    margin-bottom: 2rem;
}


/* --- Global Button Styles --- */
.button {
    border-radius: 25px; /* Rounded modern buttons */
    font-weight: 500;
    padding: 0.75em 1.75em; /* Comfortable padding */
    transition: transform var(--transition-fast), box-shadow var(--transition-medium);
    border: none; /* Remove default border */
    cursor: pointer;
}

.button:hover {
    transform: translateY(-2px); /* Subtle lift */
    box-shadow: 0 4px 10px var(--shadow-medium);
}

.button:active {
    transform: translateY(0px);
    box-shadow: 0 2px 5px var(--shadow-light);
}

/* Primary Button Style */
.button.is-primary {
    background: var(--primary-gradient);
    color: var(--text-light); /* White text on gradient */
}

.button.is-primary:hover {
    /* We can't easily transition a gradient background, so rely on shadow/transform */
    /* Optional: slightly darken using a filter or overlay if needed */
     background: linear-gradient(45deg, var(--primary-color-darker), var(--primary-color-end)); /* Simple gradient shift */
}

.button.is-link { /* Style for secondary actions if needed */
    background-color: var(--background-light);
    color: var(--primary-color-start);
    border: 1px solid var(--primary-color-start);
}

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

.button.is-large {
    font-size: 1.25rem;
    padding: 1em 2em;
}

.button.is-medium {
     font-size: 1rem;
     padding: 0.75em 1.75em;
}

/* --- Card Styles --- */
.card {
    background-color: var(--background-white);
    border-radius: 12px; /* Smoother radius */
    box-shadow: 0 4px 15px var(--shadow-light);
    transition: transform var(--transition-medium), box-shadow var(--transition-medium);
    height: 100%; /* Ensure cards in a row have same height */
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Clip content */
    text-align: center; /* Center content by default */
}

.card:hover {
    transform: translateY(-5px) scale(1.02); /* Morphing effect */
    box-shadow: 0 8px 25px var(--shadow-medium);
}

.card .card-image {
    position: relative; /* Needed if overlay applied here */
    overflow: hidden; /* Ensure image stays within bounds */
    display: flex; /* Use flex to center */
    justify-content: center;
    align-items: center;
    /* Fixed height and object-fit handled by img itself */
}

.card .card-image img {
    display: block;
    width: 100%;
    height: 200px; /* Standard fixed height for card images */
    object-fit: cover; /* Ensure image covers the area, maintaining aspect ratio */
    margin: 0 auto; /* Center image if width is less than container */
}

.card .card-content {
    padding: 1.5rem;
    flex-grow: 1; /* Allow content to fill remaining space */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Center content vertically if needed */
}

.card .card-content .title,
.card .card-content .subtitle {
    margin-bottom: 0.75rem;
}
.card .card-content .title {
    font-size: 1.25rem;
}
.card .card-content .subtitle {
    font-size: 0.9rem;
    color: #7a7a7a; /* Lighter subtitle */
}

.card .card-content p:last-child {
    margin-bottom: 0;
}

/* Specific card content alignment */
.card.has-text-centered .card-content {
    text-align: center;
}
.card.has-text-justified .card-content {
    text-align: justify;
}

/* --- Form Styles --- */
.field .label {
    font-family: var(--font-heading);
    color: var(--text-dark);
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.input, .textarea {
    border-radius: 8px;
    border: 1px solid var(--border-color);
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.06);
    transition: border-color var(--transition-medium), box-shadow var(--transition-medium);
    padding: 0.75em 1em;
    font-family: var(--font-body);
}

.input:focus, .textarea:focus {
    border-color: var(--primary-color-start);
    box-shadow: 0 0 0 3px rgba(106, 130, 251, 0.25); /* Bulma-like focus ring */
    outline: none;
}

.textarea {
    min-height: 120px;
}

.field.is-grouped.is-centered {
    justify-content: center; /* Center button in form */
    margin-top: 1.5rem;
}

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

/* History Section */
#history figure img {
    border-radius: 8px;
    box-shadow: 0 5px 15px var(--shadow-light);
}

/* Process Section */
#process .card .title {
    margin-top: 0.5rem; /* Space between image and title */
}

/* Events Calendar Section */
#events-calendar.parallax-background {
    background-attachment: fixed; /* Basic parallax */
}

#events-calendar .image-overlay::before {
    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.8)); /* Darker overlay for readability */
}

#events-calendar .box {
    background-color: rgba(255, 255, 255, 0.95); /* Slightly transparent box */
    border-radius: 8px;
    padding: 1.5rem;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    text-align: left; /* Align text left within the box */
}
#events-calendar .box .title, #events-calendar .box p {
    color: var(--text-dark) !important; /* Ensure dark text inside box */
    text-shadow: none;
}

/* Inspirations (Press) Section */
#inspirations .box {
    background-color: var(--background-white);
    border-radius: 8px;
    padding: 2rem;
    box-shadow: 0 3px 10px var(--shadow-light);
    text-align: left;
}
#inspirations blockquote {
    background-color: var(--background-light);
    border-left: 5px solid var(--primary-color-start);
    padding: 1rem 1.5rem;
    margin-bottom: 1rem;
    font-style: italic;
}
#inspirations blockquote footer {
    margin-top: 0.5rem;
    font-style: normal;
    font-weight: 500;
    color: #555;
}

/* External Resources Section */
#external-resources .card .title a {
    color: var(--primary-color-start);
    text-decoration: none;
}
#external-resources .card .title a:hover {
    color: var(--primary-color-end);
    text-decoration: underline;
}
#external-resources .card p {
    font-size: 0.9rem;
    color: #555;
}


/* --- Footer --- */
.footer {
    background-color: var(--background-light);
    padding: 3rem 1.5rem 3rem;
    border-top: 1px solid #e0e0e0;
}

.footer .title {
    color: var(--text-dark);
    margin-bottom: 1rem;
}

.footer p {
    color: var(--text-medium);
}

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

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

.footer a {
    color: #4a4a4a; /* Bulma's default link color */
    font-weight: 500;
    text-decoration: none;
}

.footer a:hover {
    color: var(--primary-color-start);
    text-decoration: underline;
}

.footer .social-links p {
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: var(--text-dark);
}

.footer .social-links a {
    margin-right: 1rem; /* Spacing between text links */
    font-weight: 500;
    display: inline-block; /* Ensure proper spacing */
}

.footer .content.has-text-centered p {
    color: #7a7a7a; /* Lighter text for copyright */
    font-size: 0.9rem;
}

/* --- Specific Page Styles --- */

/* Success Page */
body.success-page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
.success-page main {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 2rem; /* Add padding */
}
.success-content {
    background: var(--background-white);
    padding: 3rem;
    border-radius: 12px;
    box-shadow: 0 5px 20px var(--shadow-light);
}
.success-content .icon {
    color: var(--primary-color-start); /* Or a success green */
    font-size: 4rem; /* Large icon */
    margin-bottom: 1.5rem;
}
.success-content .title {
    margin-bottom: 1rem;
}
.success-content .button {
    margin-top: 1.5rem;
}


/* Privacy & Terms Pages */
body.privacy-page main,
body.terms-page main {
    padding-top: calc(var(--navbar-height) + 2rem); /* Add space below fixed navbar */
    padding-bottom: 2rem;
}

.privacy-page .content,
.terms-page .content {
     max-width: 800px; /* Limit content width for readability */
     margin: 0 auto;
     background-color: var(--background-white);
     padding: 2rem;
     border-radius: 8px;
     box-shadow: 0 3px 10px var(--shadow-light);
 }
.privacy-page h2, .terms-page h2 {
    margin-top: 2rem;
    margin-bottom: 1rem;
}
.privacy-page h3, .terms-page h3 {
     margin-top: 1.5rem;
     margin-bottom: 0.75rem;
}

/* --- Utilities & Animations --- */

/* AOS Animations - Ensure elements are visible for AOS */
[data-aos] {
    opacity: 0;
    transition-property: transform, opacity;
}
html.aos-animate [data-aos] {
    opacity: 1;
}

/* Simple Parallax (Enhance with JS for smoother effect if needed) */
.parallax-background {
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* Text on Image Overlay (Applied via .image-overlay class in HTML) */
.image-overlay {
    position: relative;
}
.image-overlay::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.5)); /* Default overlay */
    z-index: 1;
}
.image-overlay > * { /* Ensure content is above overlay */
    position: relative;
    z-index: 2;
}
.image-overlay .title, .image-overlay .subtitle, .image-overlay .content {
    color: var(--text-light); /* White text on overlay */
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5); /* Add shadow for readability */
}

/* Read More Link Style */
.read-more-link {
    display: inline-block;
    margin-top: 1rem;
    font-weight: 500;
    color: var(--primary-color-start);
    text-decoration: none;
    transition: color var(--transition-fast), transform var(--transition-fast);
}

.read-more-link::after {
    content: ' →'; /* Add arrow */
    display: inline-block;
    transition: transform var(--transition-fast);
}

.read-more-link:hover {
    color: var(--primary-color-end);
    transform: translateX(3px); /* Move arrow slightly */
}

.read-more-link:hover::after {
    transform: translateX(2px);
}

/* Responsive Adjustments (Example) */
@media screen and (max-width: 768px) {
    .hero .title {
        font-size: 2.5rem;
    }
    .hero .subtitle {
        font-size: 1.2rem;
    }
    .section-title {
        font-size: 2rem;
    }
    .columns.is-centered .column.is-two-thirds {
        width: 90%; /* Use more width on smaller screens */
    }
    .footer .columns {
        text-align: center;
    }
     .footer .column {
        margin-bottom: 2rem;
    }
    .footer .social-links a {
        margin: 0 0.5rem; /* Adjust spacing */
    }
    body.privacy-page main,
    body.terms-page main {
        padding-top: calc(var(--navbar-height) + 1rem);
    }
}