/* CSS Variables for Analogous Color Scheme */
:root {
    --color-primary: #6A5ACD; /* Slate Blue - Bold Accent */
    --color-secondary: #5F9EA0; /* Cadet Blue - Secondary Accent */
    --color-base: #4682B4; /* Steel Blue - Base Blue Tone */
    --color-background-light: #F4F4F4; /* Light Grey */
    --color-background-dark: #E0E0E0; /* Slightly darker grey */
    --color-text-dark: #222222; /* Very dark grey for contrast */
    --color-text-light: #FFFFFF; /* White */
    --color-text-subtle: #555555; /* Medium grey for description */
    --color-hover-primary: #5A4CBB; /* Darker Primary */
    --color-hover-secondary: #508B8D; /* Darker Secondary */

    --font-heading: 'Roboto', sans-serif;
    --font-body: 'Lato', sans-serif;

    --spacing-small: 1rem;
    --spacing-medium: 2rem;
    --spacing-large: 3rem;

    --card-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    --transition-speed: 0.3s;
    --border-radius: 8px;
}

/* General Styles */
body {
    font-family: var(--font-body);
    line-height: 1.6;
    color: var(--color-text-dark);
    background-color: var(--color-text-light); /* White background */
    margin-top: 52px; /* Compensate for fixed header */
    overflow-x: hidden; /* Prevent horizontal scroll */
}

html {
    scroll-behavior: smooth; /* Smooth scrolling */
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--color-text-dark); /* Darker heading color for contrast */
    text-align: center;
    margin-bottom: var(--spacing-medium);
}

h1.title {
    color: var(--color-text-light); /* White for Hero section */
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5); /* Text shadow for readability on images */
}

h2.title {
     color: var(--color-text-dark); /* Ensure dark text on light backgrounds */
}

a {
    color: var(--color-primary);
    transition: color var(--transition-speed) ease;
}

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

.container {
    max-width: 1200px; /* Adjust max-width as needed */
}

.section {
    padding: var(--spacing-large) 1.5rem; /* Consistent section padding */
    position: relative; /* Needed for parallax or animations */
}

/* Ensure columns within is-two-thirds wrapper have proper spacing */
.columns.is-centered > .column.is-two-thirds > .columns {
    margin-left: -0.75rem;
    margin-right: -0.75rem;
    margin-top: -0.75rem;
}

.columns.is-centered > .column.is-two-thirds > .columns > .column {
     padding: 0.75rem;
}


/* Navbar */
.navbar.is-fixed-top {
    background-color: rgba(255, 255, 255, 0.95); /* Semi-transparent white */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: background-color var(--transition-speed) ease;
}

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

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

.navbar-menu {
    background-color: rgba(255, 255, 255, 0.95); /* Match navbar background */
}

.navbar-item {
    color: var(--color-text-dark);
    font-weight: 500;
    transition: color var(--transition-speed) ease, background-color var(--transition-speed) ease;
}

.navbar-item:hover {
    color: var(--color-primary);
    background-color: rgba(106, 90, 205, 0.1); /* Subtle hover background */
}

.navbar-item.has-dropdown:hover .navbar-link {
    background-color: transparent; /* Prevent background change on dropdown parent hover */
}

/* Buttons */
.button {
    border-radius: var(--border-radius);
    font-weight: bold;
    transition: background-color var(--transition-speed) ease, transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
    text-transform: uppercase;
}

.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-hover-primary);
    border-color: var(--color-hover-primary);
    transform: translateY(-2px); /* Micro-interaction */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.button.is-light {
     background-color: rgba(255, 255, 255, 0.9); /* Semi-transparent white */
     color: var(--color-primary);
     border-color: var(--color-primary);
}

.button.is-light:hover {
    background-color: var(--color-primary);
    color: var(--color-text-light);
    border-color: var(--color-primary);
    transform: translateY(-2px); /* Micro-interaction */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.button.is-responsive-button {
    width: 100%; /* Full width on mobile */
}

@media (min-width: 769px) {
    .button.is-responsive-button {
         width: auto; /* Auto width on larger screens */
    }
     body {
         margin-top: 52px; /* Keep consistent margin for desktop */
     }
}


/* Forms (Contact Section) */
.input.is-modern,
.textarea.is-modern {
    border-radius: var(--border-radius);
    border-color: var(--color-base);
    padding: 10px 15px;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.08);
    transition: border-color var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
}

.input.is-modern:focus,
.textarea.is-modern:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 8px rgba(106, 90, 205, 0.3); /* Focus glow */
}

.label {
    font-weight: bold;
    color: var(--color-text-dark);
}

/* Hero Section */
.hero.has-bg-image {
    position: relative;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    color: var(--color-text-light);
    /* Parallax effect will be handled by JS */
    background-attachment: fixed; /* Basic parallax feel */
}

.hero .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.5)); /* Dark overlay */
    z-index: 1;
}

.hero .hero-body {
    position: relative;
    z-index: 2;
}

.hero .title,
.hero .subtitle {
    color: var(--color-text-light); /* Ensure white text */
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5); /* Add shadow for visibility */
}


/* Cards (Services, Testimonials, News) */
.card.is-card-shadow {
    border-radius: var(--border-radius);
    box-shadow: var(--card-shadow);
    transition: transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
    display: flex; /* Use flexbox for vertical layout */
    flex-direction: column;
    align-items: center; /* Center content horizontally */
    text-align: center; /* Center text inside card content */
    overflow: hidden; /* Hide overflow for rounded corners */
    background-color: var(--color-text-light); /* White background */
}

.card.is-card-shadow:hover {
    transform: translateY(-5px); /* Lift effect on hover */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}

.card-image {
    width: 100%; /* Image container takes full width */
    /* Specific height can be set or rely on figure aspect ratio */
     overflow: hidden; /* Hide parts of image outside container */
}

.card-image figure {
     width: 100%;
     height: 100%;
     display: flex; /* Center image if it's smaller than container */
     justify-content: center;
     align-items: center;
}

.card-image img {
    display: block; /* Remove extra space below image */
    width: 100%; /* Make image take full width of container */
    height: auto; /* Maintain aspect ratio */
    object-fit: cover; /* Cover the area, cropping if necessary */
    margin: 0 auto; /* Center the image if container is wider */
     transition: transform var(--transition-speed) ease;
}

.card.is-card-shadow:hover .card-image img {
    transform: scale(1.05); /* Subtle zoom on image hover */
}

.card-content {
    flex-grow: 1; /* Allow content to take remaining space */
    padding: var(--spacing-small); /* Adjust padding */
     text-align: left; /* Align content text to left */
}

.card-content .title {
    margin-bottom: var(--spacing-small);
    text-align: left; /* Keep card title left-aligned */
    color: var(--color-primary); /* Card title color */
}

.card-content .subtitle {
     text-align: left;
     color: var(--color-text-subtle); /* Subtle subtitle color */
}

.card-content .content p {
    color: var(--color-text-dark); /* Ensure main text is dark */
}

.card-content .button.is-link {
    color: var(--color-primary);
     border: none;
     background-color: transparent;
     padding: 0;
     text-decoration: underline;
}

.card-content .button.is-link:hover {
     color: var(--color-hover-primary);
     text-decoration: none;
     background-color: transparent;
     transform: none;
     box-shadow: none;
}


/* Testimonials Specific Styling */
.testimonials .card-content .content {
    text-align: center; /* Center testimonial text */
}

.testimonials .media-content {
    text-align: left; /* Align name and title left */
}


/* Carousel (Basic Styling) */
.carousel-container {
    position: relative;
    overflow: hidden;
    margin: var(--spacing-large) auto;
    max-width: 800px; /* Example max width */
}

.carousel {
    display: flex;
    transition: transform 0.5s ease-in-out; /* Smooth scrolling transition */
}

.carousel-item {
    min-width: 100%; /* Each item takes full container width */
    box-sizing: border-box;
     padding: var(--spacing-small);
     text-align: center; /* Center content inside carousel item */
}

.carousel-item img {
     display: block;
     max-width: 100%;
     height: auto; /* Maintain aspect ratio */
     margin: 0 auto var(--spacing-small); /* Center image */
     border-radius: var(--border-radius);
     box-shadow: var(--card-shadow);
}


.carousel-prev,
.carousel-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 10px;
    cursor: pointer;
    z-index: 10;
    border-radius: 4px;
     transition: background-color var(--transition-speed) ease;
}

.carousel-prev:hover,
.carousel-next:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

.carousel-prev {
    left: 10px;
}

.carousel-next {
    right: 10px;
}

/* Progress Indicators (Basic Styling) */
.progress-indicators {
    margin-top: var(--spacing-large);
    padding-top: var(--spacing-medium);
    border-top: 1px solid var(--color-background-dark); /* Separator */
}

.progress-item {
    margin-bottom: var(--spacing-medium);
}

.progress-item p.is-size-5 {
    color: var(--color-primary); /* Color for metric name */
}

.progress-item p.is-size-6 {
    color: var(--color-text-subtle); /* Color for percentage/value text */
}

.progress-bar-container {
    width: 80%; /* Container width */
    height: 15px;
    background-color: var(--color-background-dark);
    border-radius: 10px;
    overflow: hidden;
    margin: 10px auto; /* Center container */
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
}

.progress-bar {
    height: 100%;
    background-color: var(--color-secondary); /* Use secondary color */
    border-radius: 10px;
    transition: width 1.5s ease-in-out; /* Animation on width change */
    /* Initial width should be 0 or percentage based on data-progress */
    width: 0%; /* Starting state for animation (JS will update) */
}


/* External Resources Section */
.is-resource-box {
    border-radius: var(--border-radius);
    box-shadow: var(--card-shadow);
    background-color: var(--color-text-light);
    margin-bottom: var(--spacing-small);
    padding: var(--spacing-medium);
}

.is-resource-box h3.title a {
    color: var(--color-primary); /* Link color */
    text-decoration: none;
     transition: color var(--transition-speed) ease;
}

.is-resource-box h3.title a:hover {
    color: var(--color-hover-primary);
    text-decoration: underline;
}

.is-resource-box p {
    color: var(--color-text-subtle); /* Description color */
}


/* Careers Section */
.job-listings .box {
     border-radius: var(--border-radius);
     box-shadow: var(--card-shadow);
     background-color: var(--color-text-light);
     margin-bottom: var(--spacing-small);
     padding: var(--spacing-medium);
}

.job-listings .box p {
    color: var(--color-text-dark);
    margin-bottom: 10px;
}

.job-listings .box p.title {
    color: var(--color-primary);
    margin-bottom: 5px;
}


/* Partners Section */
.partners img {
    filter: grayscale(100%); /* Grayscale logos */
    opacity: 0.7;
    transition: filter var(--transition-speed) ease, opacity var(--transition-speed) ease;
     display: inline-block; /* Ensure centered if parent is centered */
     max-width: 100%; /* Responsive image */
     height: auto; /* Maintain aspect ratio */
}

.partners img:hover {
    filter: grayscale(0%); /* Color on hover */
    opacity: 1;
}

/* Footer */
.footer {
    background-color: var(--color-text-dark); /* Dark background */
    color: var(--color-background-light); /* Light text */
    padding: var(--spacing-large) 1.5rem;
}

.footer a {
    color: var(--color-secondary); /* Accent color for links */
    transition: color var(--transition-speed) ease;
}

.footer a:hover {
    color: var(--color-background-light); /* Lighter color on hover */
}

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

.footer ul li {
    margin-bottom: 5px;
}

.footer .is-size-5.has-text-weight-bold {
     color: var(--color-text-light); /* White heading in footer */
     margin-bottom: 15px;
}

/* Social media links (text only) */
.footer .column ul li a {
     text-decoration: none; /* Remove underline */
}

.footer .column ul li a:hover {
     text-decoration: underline; /* Add underline on hover */
}


/* Page specific styles (about, privacy, terms, success) */
/* Add padding to non-index pages to avoid content hiding under fixed header */
body:not(.index-page) main .section:first-of-type {
     padding-top: calc(var(--spacing-large) + 52px); /* Add header height to top padding */
}

/* Success Page Styling */
body.success-page {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh; /* Full viewport height */
    text-align: center;
    background-color: var(--color-background-light); /* Light background */
}

.success-page .container {
     max-width: 600px;
}

.success-page h1.title {
     color: var(--color-primary); /* Primary color for success title */
     text-shadow: none; /* No shadow needed on solid background */
}

.success-page .content {
     color: var(--color-text-dark);
     margin-bottom: var(--spacing-medium);
}

.success-page .button {
     margin-top: var(--spacing-medium);
}


/* Micro-interactions & Animations (Conceptual) */
/* Simple hover effects are above. Scroll reveal and parallax need JS. */

/* Cookie Consent Popup Styling */
#cookieConsentPopup .button {
     margin-left: var(--spacing-small);
     flex-shrink: 0; /* Prevent button from shrinking */
}

#cookieConsentPopup .column.is-expanded {
     flex-grow: 1; /* Allow text column to expand */
}

#cookieConsentPopup p {
     margin: 0; /* Remove paragraph margin */
}

/* Responsive adjustments */
@media screen and (max-width: 768px) {
    .navbar-menu.is-active {
        padding-bottom: var(--spacing-small);
    }

    .hero .title {
        font-size: 2rem !important; /* Smaller title on mobile */
    }

    .hero .subtitle {
        font-size: 1.2rem !important; /* Smaller subtitle on mobile */
    }

    .button.is-large {
        font-size: 1rem;
         padding: 10px 20px;
    }

    .columns.is-multiline > .column {
        margin-bottom: var(--spacing-medium); /* Add space between columns on mobile */
    }

     .footer .column {
         text-align: center !important; /* Center footer columns on touch */
         margin-bottom: var(--spacing-medium);
     }

     .footer .column:last-child {
         margin-bottom: 0;
     }
}