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

    /* Triad Color Scheme */
    --color-primary: #4A90E2; /* Bright Blue */
    --color-primary-dark: #357ABD; /* Darker Blue for hover */
    --color-secondary: #F5A623; /* Bright Orange */
    --color-accent: #50E3C2;  /* Bright Teal */

    --color-text-dark: #222222;
    --color-text-body: #333333;
    --color-text-light: #FFFFFF;
    --color-text-subtle: #555555;

    --color-background-light: #F9FAFB;
    --color-background-page: #FFFFFF;
    --color-background-footer: #2c3e50; /* Dark blue-gray for footer */

    --color-border: #DDDDDD;
    --color-shadow: rgba(0, 0, 0, 0.1);
    --color-shadow-strong: rgba(0, 0, 0, 0.15);

    /* Glassmorphism */
    --color-glass-bg: rgba(255, 255, 255, 0.1);
    --color-glass-bg-light: rgba(255, 255, 255, 0.6); /* For lighter glass effect on dark bg */
    --color-glass-border: rgba(255, 255, 255, 0.2);
    --blur-intensity: 8px;

    --spacing-unit: 1rem; /* 16px */
    --border-radius: 8px;
    --transition-speed: 0.3s;
    --transition-easing: ease-in-out;

    --header-height: 70px; /* Approximate, adjust as needed */
}

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

html {
    scroll-behavior: smooth;
    font-size: 100%; /* Corresponds to 16px by default */
}

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

/* -------------------------------------------------------------------------- */
/*                                 Typography                                 */
/* -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6,
.title, .subtitle { /* Targeting Bulma classes as well */
    font-family: var(--font-primary);
    color: var(--color-text-dark);
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: calc(var(--spacing-unit) * 0.75);
    text-shadow: 1px 1px 2px rgba(0,0,0,0.1); /* Subtle shadow for titles */
}

.title.is-1 { font-size: 3rem; }
.title.is-2 { font-size: 2.5rem; margin-bottom: var(--spacing-unit); }
.title.is-3 { font-size: 2rem; }
.title.is-4 { font-size: 1.5rem; }
.title.is-5 { font-size: 1.25rem; }
.subtitle.is-4 { font-size: 1.25rem; }
.subtitle.is-5 { font-size: 1.1rem; color: var(--color-text-subtle); }


p {
    margin-bottom: var(--spacing-unit);
    font-size: 1rem; /* Base text size */
}

.content p:not(:last-child),
.content ul:not(:last-child),
.content ol:not(:last-child) {
    margin-bottom: var(--spacing-unit);
}

.content.is-medium p {
    font-size: 1.1rem;
    line-height: 1.8;
}

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--transition-speed) var(--transition-easing);
}

a:hover, a:focus {
    color: var(--color-secondary);
    text-decoration: underline;
}

.section-title {
    margin-bottom: calc(var(--spacing-unit) * 2.5);
    text-align: center;
    color: var(--color-text-dark); /* Ensure high contrast for section titles */
    text-shadow: 1px 1px 3px rgba(0,0,0,0.2); /* Stronger shadow for section titles */
}

.logo-text, .logo-text-footer {
    font-family: var(--font-primary);
    font-weight: 700;
    font-size: 1.75rem;
    color: var(--color-primary) !important; /* Override Bulma navbar item color */
}
.logo-text-footer {
    color: var(--color-text-light) !important;
}


/* -------------------------------------------------------------------------- */
/*                                   Layout                                   */
/* -------------------------------------------------------------------------- */
.container {
    max-width: 1140px; /* Standard container width */
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--spacing-unit);
    padding-right: var(--spacing-unit);
}

/* Bulma .section already has padding, this is for custom sections if any */
.section {
    padding-top: calc(var(--spacing-unit) * 3.5);
    padding-bottom: calc(var(--spacing-unit) * 3.5);
}

/* For textured backgrounds */
.section-textured {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Parallax placeholder - JS will manipulate background-position */
.parallax-background {
    background-attachment: fixed; /* Simple parallax, can be enhanced with JS */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* -------------------------------------------------------------------------- */
/*                             Header & Navigation                            */
/* -------------------------------------------------------------------------- */
.header {
    background-color: rgba(255, 255, 255, 0.8); /* Semi-transparent white */
    backdrop-filter: blur(var(--blur-intensity));
    -webkit-backdrop-filter: blur(var(--blur-intensity));
    box-shadow: 0 2px 10px var(--color-shadow);
    transition: background-color var(--transition-speed) var(--transition-easing);
    height: var(--header-height);
    display: flex;
    align-items: center;
}

.sticky-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
}

.navbar {
    background-color: transparent !important; /* Override Bulma */
}

.navbar-item {
    font-family: var(--font-primary);
    font-weight: 600;
    color: var(--color-text-dark);
    padding: 0.75rem 1.25rem;
    transition: color var(--transition-speed) var(--transition-easing), background-color var(--transition-speed) var(--transition-easing);
}

.navbar-item:hover,
.navbar-item.is-active { /* is-active might be used by JS for current page */
    color: var(--color-primary) !important; /* Important to override Bulma's hover */
    background-color: transparent !important;
}

.navbar-burger {
    color: var(--color-text-dark);
}

/* Ensure content isn't hidden by fixed header */
body.has-fixed-header main { /* Add .has-fixed-header to body via JS if needed */
    padding-top: var(--header-height);
}
/* For specific pages if body class isn't used globally */
.page-privacy main, .page-terms main {
    padding-top: calc(var(--header-height) + 2 * var(--spacing-unit));
}


/* -------------------------------------------------------------------------- */
/*                                Hero Section                                */
/* -------------------------------------------------------------------------- */
.hero.is-fullheight {
    min-height: 100vh;
    position: relative;
    display: flex; /* Ensure hero-body is vertically centered */
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.hero-background-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.7)); /* Darkening overlay */
    z-index: 1;
}

.hero .hero-body {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: calc(var(--spacing-unit) * 2);
}

.hero-title {
    font-size: clamp(2.5rem, 5vw, 4.5rem); /* Responsive font size */
    color: var(--color-text-light) !important; /* Explicitly white */
    margin-bottom: var(--spacing-unit);
    text-shadow: 2px 2px 8px rgba(0,0,0,0.7);
}

.hero-subtitle {
    font-size: clamp(1.1rem, 2.5vw, 1.5rem);
    color: var(--color-text-light) !important; /* Explicitly white */
    margin-bottom: calc(var(--spacing-unit) * 1.5);
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    text-shadow: 1px 1px 6px rgba(0,0,0,0.6);
}

.hero .button {
    margin-top: var(--spacing-unit);
}

/* -------------------------------------------------------------------------- */
/*                               Buttons (Global)                             */
/* -------------------------------------------------------------------------- */
.button, button, input[type="submit"], input[type="button"] {
    font-family: var(--font-primary);
    font-weight: 600;
    padding: calc(var(--spacing-unit) * 0.75) calc(var(--spacing-unit) * 1.75);
    border-radius: var(--border-radius);
    border: 2px solid transparent;
    cursor: pointer;
    transition: background-color var(--transition-speed) var(--transition-easing),
                color var(--transition-speed) var(--transition-easing),
                transform var(--transition-speed) var(--transition-easing),
                box-shadow var(--transition-speed) var(--transition-easing);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 0.9rem;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.button:hover, button:hover, input[type="submit"]:hover, input[type="button"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}
.button:active, button:active, input[type="submit"]:active, input[type="button"]:active {
    transform: translateY(0px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

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

.button.is-link { /* Often used for secondary actions */
    background-color: var(--color-accent);
    color: var(--color-text-dark); /* Text dark on accent for contrast */
    border-color: var(--color-accent);
}
.button.is-link:hover {
    background-color: color-mix(in srgb, var(--color-accent) 85%, black);
    border-color: color-mix(in srgb, var(--color-accent) 85%, black);
    color: var(--color-text-dark);
}

.button.is-large {
    padding: var(--spacing-unit) calc(var(--spacing-unit) * 2.5);
    font-size: 1.1rem;
}

/* "Read More" style links */
.read-more-link {
    display: inline-block;
    font-family: var(--font-primary);
    font-weight: 600;
    color: var(--color-secondary);
    text-decoration: none;
    padding-bottom: 2px;
    position: relative;
    transition: color var(--transition-speed) var(--transition-easing);
}
.read-more-link::after {
    content: '→';
    margin-left: 8px;
    transition: transform var(--transition-speed) var(--transition-easing);
    display: inline-block;
}
.read-more-link:hover {
    color: var(--color-primary);
    text-decoration: none; /* Keep it clean */
}
.read-more-link:hover::after {
    transform: translateX(5px);
}


/* -------------------------------------------------------------------------- */
/*                                    Cards                                   */
/* -------------------------------------------------------------------------- */
.card { /* Base card style, Bulma's .card */
    background-color: var(--color-background-page);
    border-radius: var(--border-radius);
    box-shadow: 0 5px 15px var(--color-shadow);
    transition: transform var(--transition-speed) var(--transition-easing), box-shadow var(--transition-speed) var(--transition-easing);
    overflow: hidden; /* Ensures content respects border-radius */
    display: flex;
    flex-direction: column;
    height: 100%; /* For equal height cards in a row */
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px var(--color-shadow-strong);
}

.card .card-image { /* Bulma's .card-image */
    overflow: hidden; /* Ensures img respects border-radius of this container */
    position: relative;
    /* Fixed height for card images can be set here if all card images should be same height */
    /* e.g. height: 200px; but it's better to handle this per card type if needed */
}
/* For card-image specifically (or a wrapper inside it if needed) */
.card .card-image .image-container, /* If you wrap img in another div */
.card .card-image > figure.image { /* Direct figure child of card-image */
    display: block; /* Ensure it takes full width */
    height: 200px; /* Example fixed height, adjust per card type design */
    width: 100%;
}

.card .card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Crop image to fit container */
    display: block;
    transition: transform var(--transition-speed) var(--transition-easing);
}

.card:hover .card-image img {
    transform: scale(1.05);
}

.card .card-content {
    padding: calc(var(--spacing-unit) * 1.5);
    flex-grow: 1; /* Allows content to fill space, pushing actions to bottom if any */
    display: flex;
    flex-direction: column;
}

.card .card-content .title,
.card .card-content .subtitle {
    margin-bottom: calc(var(--spacing-unit) * 0.5);
}
.card .card-content .content {
    font-size: 0.95rem;
    line-height: 1.6;
    flex-grow: 1;
}

/* Service Cards, Testimonial Cards, Resource Cards (if they need specific styling) */
.service-card .card-image > figure.image { height: 220px; }
.testimonial-card { text-align: left; } /* Default for Bulma cards */
.testimonial-card .media-left figure { margin-right: var(--spacing-unit); }
.testimonial-card .is-96x96 img { border: 3px solid var(--color-accent); }

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

/* For centering images in specific card layouts if the flex column approach is not enough globally */
.card.has-centered-image .card-image {
    display: flex;
    justify-content: center;
    align-items: center;
}
.card.has-centered-image .card-image img {
    width: auto; /* Adjust if needed, e.g. max-width: 100% */
    max-height: 100%;
}


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

/* About Us Section */
#about .image img {
    border-radius: var(--border-radius);
    box-shadow: 0 8px 20px var(--color-shadow);
}

/* Statistics Section */
#statistics {
    background-color: var(--color-background-light); /* Fallback if texture doesn't load */
}
#statistics .glass-effect { padding: calc(var(--spacing-unit) * 1.5); } /* Added via HTML */
#statistics .title.is-1 {
    font-size: 3.5rem;
    color: var(--color-primary);
    margin-bottom: calc(var(--spacing-unit) * 0.25);
}
#statistics .subtitle.is-4 {
    font-family: var(--font-secondary);
    color: var(--color-text-subtle);
    font-weight: normal;
}
#statistics .card-like-padding { /* from HTML */
    padding: calc(var(--spacing-unit) * 2);
    border-radius: var(--border-radius);
    text-align: center;
}

/* Media Section (Gallery) */
#media .card .card-content {
    text-align: center;
}
#media .card .title.is-5 {
    min-height: 2.6em; /* Ensure titles have enough space, roughly 2 lines */
}

/* Contact Section */
#contact .contact-details-card {
    padding: calc(var(--spacing-unit) * 1.5);
    border-radius: var(--border-radius);
    background-color: var(--color-background-light); /* Subtle background for details */
}
#contact .contact-details-card p {
    margin-bottom: calc(var(--spacing-unit) * 0.75);
}
#contact .contact-details-card strong {
    color: var(--color-text-dark);
}

#contact .contact-image-container img {
    border-radius: var(--border-radius);
    object-fit: cover;
}

/* Form Styling */
.label {
    font-family: var(--font-primary);
    font-weight: 600;
    color: var(--color-text-dark);
    margin-bottom: calc(var(--spacing-unit) * 0.5) !important; /* Override Bulma */
}
.input, .textarea {
    border-radius: var(--border-radius) !important; /* Override Bulma */
    border: 1px solid var(--color-border) !important;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.075) !important;
    transition: border-color var(--transition-speed) var(--transition-easing), box-shadow var(--transition-speed) var(--transition-easing) !important;
    font-family: var(--font-secondary);
    padding: calc(var(--spacing-unit) * 0.75) !important;
}
.input:focus, .textarea:focus {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 0.2rem rgba(var(--color-primary), 0.25) !important; /* Bulma-like focus */
    outline: none;
}
.textarea { min-height: 120px; }


/* -------------------------------------------------------------------------- */
/*                                   Footer                                   */
/* -------------------------------------------------------------------------- */
.footer {
    background-color: var(--color-background-footer);
    color: var(--color-text-light);
    padding-top: calc(var(--spacing-unit) * 3);
    padding-bottom: calc(var(--spacing-unit) * 3);
}

.footer .title.is-5 {
    color: var(--color-text-light);
    margin-bottom: var(--spacing-unit);
}

.footer p, .footer ul li {
    color: #bdc3c7; /* Lighter gray for footer text */
    font-size: 0.95rem;
}

.footer a, .footer .footer-social-link {
    color: var(--color-accent);
    transition: color var(--transition-speed) var(--transition-easing);
}
.footer a:hover, .footer .footer-social-link:hover {
    color: var(--color-text-light);
    text-decoration: underline;
}

.footer ul {
    list-style: none;
    margin-left: 0;
}
.footer ul li {
    margin-bottom: calc(var(--spacing-unit) * 0.5);
}

.footer hr {
    background-color: #34495e; /* Darker line in footer */
    height: 1px;
    border: none;
    margin-top: calc(var(--spacing-unit) * 2);
    margin-bottom: calc(var(--spacing-unit) * 2);
}

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

/* Footer social links (text-based) */
.footer-social-link {
    display: inline-block; /* Or block if they are on separate lines in HTML */
    margin-right: var(--spacing-unit); /* If inline */
    padding: 5px 0; /* Small padding for better click area */
}
.footer-social-link:last-child {
    margin-right: 0;
}


/* -------------------------------------------------------------------------- */
/*                            Glassmorphism Styles                            */
/* -------------------------------------------------------------------------- */
.glass-effect {
    background: var(--color-glass-bg);
    backdrop-filter: blur(var(--blur-intensity));
    -webkit-backdrop-filter: blur(var(--blur-intensity));
    border-radius: var(--border-radius);
    border: 1px solid var(--color-glass-border);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.17); /* Subtle shadow */
    /* Ensure text inside has good contrast */
}
/* Example usage on dark background: */
/* .dark-section .glass-effect { background: var(--color-glass-bg-light); border-color: rgba(255,255,255,0.5); } */
/* .dark-section .glass-effect p, .dark-section .glass-effect .title { color: var(--color-text-dark); } */

/* -------------------------------------------------------------------------- */
/*                         Animation & Transition Styles                      */
/* -------------------------------------------------------------------------- */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s var(--transition-easing), transform 0.7s var(--transition-easing);
}

.animate-on-scroll.is-visible { /* This class to be added by JavaScript */
    opacity: 1;
    transform: translateY(0);
}

/* Barba.js Page Transition Placeholder */
.page-transition {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: var(--color-primary); /* Or any other transition color */
    z-index: 9999;
    transform: translateY(100%); /* Or scale, opacity */
    pointer-events: none;
}
/* Example Barba.js transition classes (JS will add/remove these)
body.is-leaving .page-transition { transform: translateY(0); transition: transform 0.5s ease-in-out; }
body.is-entering .page-transition { transform: translateY(-100%); transition: transform 0.5s ease-in-out 0.3s; }
*/

/* -------------------------------------------------------------------------- */
/*                                Modal Styles                                */
/* -------------------------------------------------------------------------- */
.modal.is-active .modal-background { /* Bulma modal background */
    background-color: rgba(10, 10, 10, 0.75); /* Darker, more opaque */
    backdrop-filter: blur(calc(var(--blur-intensity)*0.5));
    -webkit-backdrop-filter: blur(calc(var(--blur-intensity)*0.5));
}

.modal-content {
    max-width: 90%; /* Or specific width */
    width: auto;
}
.modal-content img {
    max-height: 85vh;
    border-radius: var(--border-radius);
    box-shadow: 0 0 30px rgba(0,0,0,0.5);
}
.modal-close { /* Bulma close button */
    background-color: rgba(0,0,0,0.3) !important;
    transition: background-color var(--transition-speed) ease !important;
}
.modal-close:hover {
    background-color: rgba(0,0,0,0.6) !important;
}

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

/* Success Page Styling (success.html) */
.success-page-container { /* This class should be on a wrapper inside main of success.html */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 80vh; /* Use less than 100vh to account for header/footer if they exist */
    text-align: center;
    padding: var(--spacing-unit);
}
/* If success.html has the general header/footer, main might need padding like other pages */
body.success-page main { /* Example specific body class for success.html */
     padding-top: var(--header-height); /* If header is present */
     display: flex;
     flex-direction: column;
     min-height: 100vh; /* Overall page min height */
}
body.success-page main > .container { /* If content is in a .container */
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.success-page-container .icon {
    font-size: 5rem;
    color: var(--color-accent);
    margin-bottom: var(--spacing-unit);
}
.success-page-container .title {
    color: var(--color-primary);
}

/* Privacy & Terms Pages - padding already handled with .page-privacy main */
.page-privacy .content, .page-terms .content {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}
.page-privacy h1, .page-terms h1 { margin-bottom: calc(var(--spacing-unit) * 2); }
.page-privacy h2, .page-terms h2 { margin-top: calc(var(--spacing-unit) * 2); margin-bottom: var(--spacing-unit); }


/* -------------------------------------------------------------------------- */
/*                               Utility Classes                              */
/* -------------------------------------------------------------------------- */
.has-text-primary { color: var(--color-primary) !important; }
.has-text-secondary { color: var(--color-secondary) !important; }
.has-text-accent { color: var(--color-accent) !important; }

.mb-1 { margin-bottom: var(--spacing-unit) !important; }
.mt-1 { margin-top: var(--spacing-unit) !important; }
/* Add more spacing utilities as needed */

/* Responsive Adjustments (Example) */
@media (max-width: 768px) { /* Bulma's mobile breakpoint is 768px */
    .hero-title {
        font-size: clamp(2rem, 6vw, 3rem);
    }
    .hero-subtitle {
        font-size: clamp(1rem, 3vw, 1.25rem);
    }
    .section {
        padding-top: calc(var(--spacing-unit) * 2.5);
        padding-bottom: calc(var(--spacing-unit) * 2.5);
    }
    .section-title {
        font-size: 2rem;
        margin-bottom: calc(var(--spacing-unit) * 1.5);
    }
    .navbar{
        width: 100%;
        align-items: center;
    }
    .navbar-menu { /* For Bulma's mobile menu */
        background-color: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(var(--blur-intensity));
        -webkit-backdrop-filter: blur(var(--blur-intensity));
        box-shadow: 0 8px 16px var(--color-shadow);
        padding: var(--spacing-unit);
        border-bottom-left-radius: var(--border-radius);
        border-bottom-right-radius: var(--border-radius);
    }
    .navbar-menu.is-active{
        margin-top: 300px;
    }
    .navbar-item {
        padding: 0.75rem 1rem; /* Adjust padding for mobile menu items */
    }
    #statistics .title.is-1 { font-size: 2.5rem; }
    #statistics .subtitle.is-4 { font-size: 1rem; }

    /* Ensure columns stack nicely - Bulma handles this, but good to check */
    .columns.is-multiline .column {
        margin-bottom: var(--spacing-unit); /* Add some space when stacked */
    }
}

/* Cookie Consent Popup (Minimal styles as requested, already inline in HTML) */
/* Can add minor enhancements here if needed, but user requested minimal inline CSS */
#cookieConsentPopup {
    box-shadow: 0 -2px 10px rgba(0,0,0,0.2);
}
#cookieConsentPopup p a:hover {
    color: var(--color-text-light);
}

*{
    opacity: 1 !important;
}