/* style.css */

/* --- CSS Variables --- */
:root {
    --font-primary: 'Oswald', sans-serif;
    --font-secondary: 'Nunito', sans-serif;

    /* Monochromatic Base */
    --color-background-light: #ffffff; /* Pure white */
    --color-background-medium: #f8f9fa; /* Very light gray */
    --color-background-dark: #1a1a1a;  /* Very dark gray / off-black */
    --color-background-footer: #111111; /* Even darker for footer */

    --color-text-primary: #333333;    /* Dark gray for body text on light bg */
    --color-text-secondary: #555555;  /* Medium gray for less important text */
    --color-text-headings: #111111;   /* Near black for headings on light bg */
    --color-text-light: #f0f0f0;      /* Light gray / off-white for text on dark bg */
    --color-text-hero: #FFFFFF;       /* Pure white for hero */

    /* Accent Color (Deep, professional blue) */
    --color-accent: #0D47A1;
    --color-accent-hover: #0A3690;
    --color-accent-light: #E3F2FD;
    --color-accent-rgb: 13, 71, 161; /* For rgba box-shadows */


    --color-border: #dee2e6;        /* Light gray for borders */
    --color-border-darker: #cccccc;

    /* Spacing & Sizing */
    --spacing-unit: 1rem; /* 16px base */
    --section-padding-y: 4rem;
    --container-max-width: 1140px;
    --border-radius-small: 4px;
    --border-radius-medium: 8px;

    /* Transitions & Shadows */
    --transition-speed-fast: 0.2s;
    --transition-speed-medium: 0.3s;
    --transition-speed-slow: 0.5s;
    --box-shadow-soft: 0 4px 12px rgba(0, 0, 0, 0.08);
    --box-shadow-medium: 0 6px 20px rgba(0, 0, 0, 0.1);
    --text-shadow-subtle-dark: 0 1px 3px rgba(0,0,0,0.3); /* For light text on images */

    --header-height: 70px; /* Approximate height of the fixed header */
}

/* --- Base Styles --- */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 100%; /* Typically 16px */
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-secondary);
    line-height: 1.7;
    color: var(--color-text-primary);
    background-color: var(--color-background-light);
    overflow-x: hidden;
}

/* --- Typography --- */
h1, h2, h3, h4, h5, h6, .title, .subtitle {
    font-family: var(--font-primary);
    font-weight: 700;
    line-height: 1.3;
    color: var(--color-text-headings);
    margin-top: 0;
    margin-bottom: calc(var(--spacing-unit) * 0.75);
    text-rendering: optimizeLegibility;
}

.title.is-1 { font-size: clamp(2.5rem, 5vw, 3.5rem); }
.title.is-2 { font-size: clamp(2rem, 4vw, 3rem); }
.title.is-3 { font-size: clamp(1.75rem, 3.5vw, 2.5rem); }
.title.is-4 { font-size: clamp(1.25rem, 3vw, 1.75rem); }
.subtitle.is-3 { font-size: clamp(1.25rem, 3vw, 1.75rem); color: var(--color-text-secondary); font-weight: 400; }
.subtitle.is-5 { font-size: clamp(1rem, 2.5vw, 1.25rem); color: var(--color-text-secondary); font-weight: 400; }

p {
    margin-bottom: var(--spacing-unit);
    font-size: clamp(0.9rem, 1.5vw + 0.5rem, 1.1rem);
}

a {
    color: var(--color-accent);
    text-decoration: none;
    transition: color var(--transition-speed-fast) ease-in-out;
}
a:hover {
    color: var(--color-accent-hover);
    text-decoration: underline;
}

strong {
    font-weight: 700;
    color: var(--color-text-headings); /* Slightly stronger than body text */
}

/* --- Layout & Container (Bulma Overrides/Enhancements) --- */
.container { /* Already defined by Bulma, ensure max-width */
    max-width: var(--container-max-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--spacing-unit);
    padding-right: var(--spacing-unit);
}

.section { /* Bulma class, adjust padding */
    padding-top: var(--section-padding-y);
    padding-bottom: var(--section-padding-y);
}

.section-alternative {
    background-color: var(--color-background-medium);
}

.section-title {
    margin-bottom: calc(var(--spacing-unit) * 2);
    color: var(--color-text-headings);
    text-align: center; /* As per instruction */
    text-shadow: var(--text-shadow-subtle-light); /* Subtle shadow if needed */
}
.section-subtitle {
    margin-bottom: calc(var(--spacing-unit) * 2.5);
    color: var(--color-text-secondary);
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    text-align: center; /* As per instruction */
}

.content-subtitle {
    margin-bottom: var(--spacing-unit);
    color: var(--color-text-headings);
}

/* Ensure columns have enough width */
.columns .column.is-two-thirds {
    flex: none;
    width: 66.6666%;
}
@media screen and (max-width: 768px) {
    .columns .column.is-two-thirds {
        width: 100%;
    }
}


/* --- Global UI Components --- */

/* Buttons (Styling Bulma's .button) */
.button, button, input[type="submit"], input[type="button"], input[type="reset"] {
    font-family: var(--font-secondary);
    font-weight: 700;
    border-radius: var(--border-radius-small);
    padding: calc(var(--spacing-unit)*0.75) calc(var(--spacing-unit)*1.5);
    transition: all var(--transition-speed-medium) ease;
    cursor: pointer;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    font-size: clamp(0.85rem, 1.5vw, 1rem);
    border: 2px solid transparent; /* For outline effect consistency */
    line-height: 1.5;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05); /* Subtle shadow */
}

.button.is-primary {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-background-light);
}
.button.is-primary:hover, .button.is-primary:focus {
    background-color: var(--color-accent-hover);
    border-color: var(--color-accent-hover);
    color: var(--color-background-light);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}
.button.is-primary.is-outlined {
    background-color: transparent;
    border-color: var(--color-accent);
    color: var(--color-accent);
}
.button.is-primary.is-outlined:hover, .button.is-primary.is-outlined:focus {
    background-color: var(--color-accent);
    color: var(--color-background-light);
    border-color: var(--color-accent);
}

.button.is-large {
    padding: var(--spacing-unit) calc(var(--spacing-unit)*2);
    font-size: clamp(1rem, 2vw, 1.15rem);
}

/* Cards */
.card { /* Bulma class */
    background-color: var(--color-background-light);
    border-radius: var(--border-radius-medium);
    box-shadow: var(--box-shadow-soft);
    overflow: hidden;
    transition: transform var(--transition-speed-medium) ease, box-shadow var(--transition-speed-medium) ease;
    height: 100%; /* Make cards in a row same height */
    display: flex; /* STROGO: For centering content and structure */
    flex-direction: column; /* STROGO: Content stacks vertically */
}
.card:hover {
    transform: translateY(-5px);
    box-shadow: var(--box-shadow-medium);
}

.card .card-image, .card .image-container { /* STROGO: Container for image */
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 250px; /* Default, can be overridden. Use aspect-ratio if browser support allows */
    display: flex;
    align-items: center; /* STROGO: Centers image vertically if smaller */
    justify-content: center; /* STROGO: Centers image horizontally if smaller */
    background-color: var(--color-background-medium); /* Placeholder bg for image */
}

.card .card-image img, .card .image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* STROGO: Ensure image covers the container */
    display: block;
    transition: transform var(--transition-speed-slow) ease;
}
.card:hover .card-image img, .card:hover .image-container img {
    transform: scale(1.05);
}

.card .card-content { /* Bulma class */
    padding: calc(var(--spacing-unit) * 1.5);
    flex-grow: 1; /* Allows content to take remaining space */
    display: flex;
    flex-direction: column;
    /* text-align: center;  STROGO: If all card content should be centered */
}
.card .card-content .title, .card .card-content .subtitle {
    margin-bottom: calc(var(--spacing-unit) * 0.5);
}
.card .card-content p {
    font-size: clamp(0.85rem, 1.5vw, 1rem);
    color: var(--color-text-secondary);
}
.card .card-content .news-date {
    font-size: 0.8rem;
    color: var(--color-text-secondary);
    margin-bottom: calc(var(--spacing-unit) * 0.25);
    text-transform: uppercase;
}
.card .card-content .news-title {
    color: var(--color-text-headings);
    font-size: clamp(1.1rem, 2vw, 1.3rem);
}

/* Specifically for stat-widget cards */
.card.stat-widget {
    align-items: center; /* STROGO: Center flex items */
}
.card.stat-widget .card-content {
    text-align: center; /* STROGO: Center text within content block */
}
.stat-widget .stat-number {
    font-size: clamp(2.5rem, 6vw, 4rem);
    font-weight: 700;
    color: var(--color-accent);
    margin-bottom: calc(var(--spacing-unit) * 0.25);
}
.stat-widget .stat-label {
    font-size: clamp(1rem, 3vw, 1.25rem);
    color: var(--color-text-headings);
    margin-bottom: calc(var(--spacing-unit) * 0.5);
}
.stat-widget .stat-description {
    font-size: clamp(0.85rem, 2vw, 1rem);
    color: var(--color-text-secondary);
}

/* Accordions */
.accordion {
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-medium);
    overflow: hidden;
}
.accordion-item {
    border-bottom: 1px solid var(--color-border);
}
.accordion-item:last-child {
    border-bottom: none;
}
.accordion-header {
    background-color: var(--color-background-light);
    color: var(--color-text-headings);
    cursor: pointer;
    padding: var(--spacing-unit) calc(var(--spacing-unit) * 1.5);
    width: 100%;
    text-align: left;
    border: none;
    outline: none;
    font-size: clamp(1rem, 2vw, 1.15rem);
    font-family: var(--font-primary);
    font-weight: 700;
    transition: background-color var(--transition-speed-fast) ease;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.accordion-header:hover {
    background-color: var(--color-accent-light);
}
.accordion-icon {
    font-size: 1.5em;
    font-weight: bold;
    color: var(--color-accent);
    transition: transform var(--transition-speed-medium) ease;
}
.accordion-content {
    padding: 0 calc(var(--spacing-unit) * 1.5);
    background-color: var(--color-background-light);
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition-speed-medium) ease-out, padding var(--transition-speed-medium) ease-out;
}
.accordion-content p {
    padding-top: var(--spacing-unit);
    padding-bottom: var(--spacing-unit);
    color: var(--color-text-secondary);
}


/* --- Header & Navigation --- */
.header.sticky-header { /* Class from HTML */
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background-color: rgba(255, 255, 255, 0.9); /* Semi-transparent */
    backdrop-filter: blur(8px); /* Glassmorphism effect */
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.navbar { /* Bulma class */
    min-height: var(--header-height);
    align-items: center; /* Vertically align items in navbar */
}
.navbar-brand .navbar-item.logo-text {
    font-family: var(--font-primary);
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--color-text-headings);
    padding-left: 0; /* Align with container padding */
}
.navbar-brand .navbar-item.logo-text:hover {
    background-color: transparent !important;
    color: var(--color-accent);
}
.navbar-menu { /* Bulma class */
    background-color: transparent; /* Inherit from .header */
}
.navbar-item { /* Bulma class */
    font-family: var(--font-secondary);
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text-secondary);
    padding: 0.5rem 1rem;
    transition: color var(--transition-speed-fast) ease;
}
.navbar-item:hover, .navbar-item.is-active { /* Bulma states */
    background-color: transparent !important;
    color: var(--color-accent) !important;
}

.navbar-burger { /* Bulma class */
    color: var(--color-text-headings);
    height: var(--header-height); /* Match navbar height */
    width: var(--header-height);
}
.navbar-burger:hover {
    background-color: rgba(0,0,0,0.05);
}
.navbar-burger span { /* Bulma class */
    background-color: var(--color-text-headings);
    height: 2px;
    left: calc(50% - 8px); /* Center burger lines */
    width: 16px;
}
.navbar-burger span:nth-child(1) { top: calc(50% - 6px); }
.navbar-burger span:nth-child(2) { top: calc(50% - 1px); }
.navbar-burger span:nth-child(3) { top: calc(50% + 4px); }


@media screen and (max-width: 1023px) { /* Bulma's $navbar-breakpoint */
    .navbar-menu {
        background-color: var(--color-background-light);
        box-shadow: 0 8px 16px rgba(0,0,0,0.1);
        border-radius: 0 0 var(--border-radius-medium) var(--border-radius-medium);
        padding: 0.5rem 0;
    }
    .navbar-item {
        padding: 0.75rem 1.5rem;
    }
}


/* --- Footer --- */
.footer { /* Bulma class */
    background-color: var(--color-background-footer);
    color: var(--color-text-light);
    padding-top: calc(var(--section-padding-y) * 1.5);
    padding-bottom: calc(var(--section-padding-y) * 0.5);
}
.footer .footer-title {
    color: var(--color-background-light); /* White titles */
    margin-bottom: var(--spacing-unit);
}
.footer p {
    color: var(--color-text-light);
    opacity: 0.8;
    font-size: 0.95rem;
}
.footer ul {
    list-style: none;
    padding-left: 0;
}
.footer ul li {
    margin-bottom: calc(var(--spacing-unit) * 0.5);
}
.footer ul li a {
    color: var(--color-text-light);
    opacity: 0.8;
    text-decoration: none;
    transition: opacity var(--transition-speed-fast) ease, color var(--transition-speed-fast) ease;
}
.footer ul li a:hover {
    opacity: 1;
    color: var(--color-accent);
    text-decoration: underline; /* Add underline on hover for text links */
}
.footer hr { /* Bulma class, if used */
    background-color: rgba(255, 255, 255, 0.1);
    height: 1px;
    border: none;
    margin-top: calc(var(--section-padding-y) * 0.75);
    margin-bottom: calc(var(--section-padding-y) * 0.75);
}
.footer .social-links li a {
    font-weight: bold; /* Make social links stand out a bit more */
}


/* --- Hero Section --- */
.section-hero { /* Custom class for hero section element */
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    position: relative;
}
.hero.is-fullheight .hero-body { /* Bulma classes */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-unit);
}
/* VITAL: Text on image overlay for readability */
.hero-text-overlay {
    background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)); /* Dark semi-transparent overlay */
    padding: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 1.5);
    border-radius: var(--border-radius-medium);
    max-width: 800px;
    margin: 0 auto;
}

.hero-title, .hero-subtitle, .hero-description {
    color: var(--color-text-hero) !important; /* VITAL: White text for hero */
    text-shadow: var(--text-shadow-subtle-dark); /* Improves readability on complex backgrounds */
}
.hero-title {
    font-size: clamp(2.8rem, 6vw, 4.5rem);
    margin-bottom: var(--spacing-unit);
}
.hero-subtitle {
    font-size: clamp(1.3rem, 3.5vw, 2rem);
    font-weight: 400; /* Lighter than title */
    margin-bottom: calc(var(--spacing-unit) * 1.5);
}
.hero-description {
    font-size: clamp(1rem, 2.5vw, 1.2rem);
    line-height: 1.8;
}


/* --- Gallery Section --- */
#gallery .card .card-content { /* Centering caption for gallery */
    text-align: center;
}
#gallery .card .image-caption {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
}
#gallery .card .card-image, #gallery .card .image-container {
    height: 280px;
}


/* --- News Section --- */
#noticias .card.news-item .card-image, #noticias .card.news-item .image-container {
    height: 200px;
}
#noticias .card.news-item .news-excerpt {
    font-size: 0.9rem;
    line-height: 1.6;
}
#noticias .card.news-item .card-content a.read-more-link { /* Example for "Read More" */
    display: inline-block;
    margin-top: calc(var(--spacing-unit) * 0.75);
    font-weight: bold;
    color: var(--color-accent);
}
#noticias .card.news-item .card-content a.read-more-link:hover {
    text-decoration: underline;
}


/* --- External Resources Section --- */
#external-resources .external-links-list {
    list-style: none;
    padding-left: 0;
}
#external-resources .external-link-item {
    display: block;
    background-color: var(--color-background-light);
    padding: var(--spacing-unit);
    margin-bottom: var(--spacing-unit);
    border-radius: var(--border-radius-small);
    border: 1px solid var(--color-border);
    transition: all var(--transition-speed-medium) ease;
    color: var(--color-text-primary); /* Default text color */
}
#external-resources .external-link-item:hover {
    border-color: var(--color-accent);
    box-shadow: var(--box-shadow-soft);
    transform: translateY(-3px);
    text-decoration: none;
}
#external-resources .external-link-item strong {
    display: block;
    font-size: 1.1rem;
    color: var(--color-accent); /* Title of link in accent color */
    margin-bottom: calc(var(--spacing-unit) * 0.25);
}
#external-resources .external-link-item p {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    margin-bottom: 0;
}


/* --- Contact CTA Section --- */
#contact-cta .section-title, #contact-cta .section-subtitle {
    color: var(--color-text-headings);
}

/* --- Contact Page Specific Styles (contacts.html) --- */
.contact-page-section {
    padding-top: calc(var(--header-height) + var(--section-padding-y));
    padding-bottom: var(--section-padding-y);
    background-color: var(--color-background-medium); /* Light bg for contact page */
}
.contact-form-container {
    background-color: var(--color-background-light);
    padding: calc(var(--spacing-unit) * 2.5);
    border-radius: var(--border-radius-medium);
    box-shadow: var(--box-shadow-medium);
}
.contact-form-container .title { /* Bulma class */
    text-align: center;
    margin-bottom: calc(var(--spacing-unit) * 2);
}
.contact-form .field { /* Bulma class */
    margin-bottom: calc(var(--spacing-unit) * 1.25);
}
.contact-form .label { /* Bulma class */
    color: var(--color-text-headings);
    font-weight: 700;
    font-family: var(--font-secondary);
    font-size: 0.95rem;
}
.contact-form .input, .contact-form .textarea { /* Bulma classes */
    border-radius: var(--border-radius-small);
    border: 1px solid var(--color-border);
    padding: calc(var(--spacing-unit) * 0.75);
    font-size: 1rem;
    font-family: var(--font-secondary);
    transition: border-color var(--transition-speed-fast) ease, box-shadow var(--transition-speed-fast) ease;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.075);
}
.contact-form .input:focus, .contact-form .textarea:focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 0.125em rgba(var(--color-accent-rgb), 0.25), inset 0 1px 2px rgba(0,0,0,0.075);
}
.contact-form .textarea {
    min-height: 150px;
    resize: vertical;
}
.contact-form .button { /* Bulma class */
    width: 100%;
    padding-top: var(--spacing-unit);
    padding-bottom: var(--spacing-unit);
    font-size: 1.05rem;
}
.contact-info {
    padding-left: calc(var(--spacing-unit) * 2);
}
.contact-info h3 {
    color: var(--color-text-headings);
    margin-bottom: var(--spacing-unit);
}
.contact-info p {
    color: var(--color-text-secondary);
    margin-bottom: calc(var(--spacing-unit) * 0.75);
    font-size: 1rem;
    line-height: 1.6;
}
.contact-info p strong {
    color: var(--color-text-headings);
}
.contact-map iframe {
    border-radius: var(--border-radius-medium);
    width: 100%;
    min-height: 300px;
    border: 0;
    filter: grayscale(80%); /* Subtle monochrome map */
    transition: filter var(--transition-speed-medium) ease;
}
.contact-map iframe:hover {
    filter: grayscale(0%);
}


@media screen and (max-width: 991px) { /* Adjust breakpoint as needed */
    .contact-info {
        padding-left: 0;
        margin-top: calc(var(--spacing-unit) * 2);
    }
}


/* --- Privacy & Terms Pages --- */
.privacy-page-section, .terms-page-section {
    padding-top: calc(var(--header-height) + var(--section-padding-y));
    padding-bottom: var(--section-padding-y);
    min-height: calc(100vh - var(--header-height) - 150px); /* Approximate footer height */
}
.privacy-page-section .container .content h1, /* Bulma .content class */
.terms-page-section .container .content h1 {
    font-size: clamp(2rem, 4vw, 2.8rem);
    margin-bottom: calc(var(--spacing-unit) * 1.5);
    color: var(--color-text-headings);
}
.privacy-page-section .container .content h2,
.terms-page-section .container .content h2 {
    font-size: clamp(1.5rem, 3vw, 2rem);
    margin-top: calc(var(--spacing-unit) * 2);
    margin-bottom: var(--spacing-unit);
    color: var(--color-text-headings);
}
.privacy-page-section .container .content p,
.terms-page-section .container .content p,
.privacy-page-section .container .content li,
.terms-page-section .container .content li {
    color: var(--color-text-secondary);
    line-height: 1.8;
    font-size: clamp(0.95rem, 1.8vw, 1.1rem);
}
.privacy-page-section .container .content ul,
.terms-page-section .container .content ul {
    margin-left: var(--spacing-unit);
    margin-bottom: var(--spacing-unit);
    list-style-position: outside;
}


/* --- Success Page (success.html) --- */
.success-page-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    text-align: center;
    padding: calc(var(--spacing-unit) * 2);
    background-color: var(--color-background-medium);
}
.success-content {
    background-color: var(--color-background-light);
    padding: calc(var(--spacing-unit) * 3);
    border-radius: var(--border-radius-medium);
    box-shadow: var(--box-shadow-medium);
    max-width: 600px;
}
.success-content .icon-success { /* Placeholder for an SVG or font icon */
    display: inline-block;
    width: 60px;
    height: 60px;
    background-color: var(--color-accent); /* Or a success green */
    color: white;
    border-radius: 50%;
    line-height: 60px; /* Center checkmark if using text */
    font-size: 2.5rem;
    margin-bottom: var(--spacing-unit);
    /* Example: content: '✔'; */
}
.success-content h1 {
    color: var(--color-text-headings);
    font-size: clamp(1.8rem, 4vw, 2.5rem);
    margin-bottom: var(--spacing-unit);
}
.success-content p {
    color: var(--color-text-secondary);
    font-size: clamp(1rem, 2.5vw, 1.2rem);
    margin-bottom: calc(var(--spacing-unit) * 1.5);
}


/* --- Animations on Scroll (JS will add .is-visible) --- */
.animated-element {
    /*opacity: 0;*/
    transform: translateY(30px);
    transition: opacity var(--transition-speed-slow) cubic-bezier(0.645, 0.045, 0.355, 1),
                transform var(--transition-speed-slow) cubic-bezier(0.645, 0.045, 0.355, 1);
}
.animated-element.is-visible {
    opacity: 1;
    transform: translateY(0);
}
/* Example for staggered animation delay (could be set by JS for more flexibility) */
.columns.is-multiline .column.animated-element:nth-child(1) { transition-delay: 0.1s; }
.columns.is-multiline .column.animated-element:nth-child(2) { transition-delay: 0.2s; }
.columns.is-multiline .column.animated-element:nth-child(3) { transition-delay: 0.3s; }
/* ... and so on */


/* --- Utility Classes --- */
.has-text-centered { /* Bulma class */
    text-align: center !important;
}
.mt-1 { margin-top: calc(var(--spacing-unit) * 0.5) !important; }
.mt-2 { margin-top: var(--spacing-unit) !important; }
.mt-3 { margin-top: calc(var(--spacing-unit) * 1.5) !important; }
.mt-4 { margin-top: calc(var(--spacing-unit) * 2) !important; }
.mt-5 { margin-top: calc(var(--spacing-unit) * 3) !important; }

.mb-1 { margin-bottom: calc(var(--spacing-unit) * 0.5) !important; }
.mb-2 { margin-bottom: var(--spacing-unit) !important; }
.mb-3 { margin-bottom: calc(var(--spacing-unit) * 1.5) !important; }
.mb-4 { margin-bottom: calc(var(--spacing-unit) * 2) !important; }
.mb-5 { margin-bottom: calc(var(--spacing-unit) * 3) !important; }

.has-text-primary { /* Bulma class, ensure it uses our accent */
    color: var(--color-accent) !important;
}

/* Parallax (Basic CSS version - JS recommended for better performance/control) */
[style*="background-image"] { /* Targets elements with inline background images */
    /* This is a generic selector; be more specific if needed */
}
.section-hero[style*="background-image"] {
    /* A simple parallax-like effect: */
    /* background-attachment: fixed; */ /* CAUTION: Can have performance issues, especially on mobile. Test thoroughly. */
}

@media (max-width: 768px) {
    .section-hero[style*="background-image"] {
        /* background-attachment: scroll; Disable fixed attachment on mobile if problematic */
    }
}