/* style.css */

/* -------------------------------------------------------------------------- */
/* GLOBAL STYLES & CSS VARIABLES */
/* -------------------------------------------------------------------------- */
:root {
    /* Fonts */
    --font-primary: 'Inter', sans-serif;
    --font-secondary: 'IBM Plex Sans', sans-serif;

    /* Bright Colors - Palette (Vibrant & Professional) */
    --color-primary: #007bff;        /* Vibrant Blue */
    --color-primary-darker: #0056b3; /* Darker Blue for hover/active */
    --color-primary-light: #66aaff;   /* Lighter blue for accents/gradients */

    --color-secondary: #17a2b8;      /* Bright Teal/Cyan */
    --color-secondary-darker: #107585; /* Darker Teal */

    --color-accent1: #ffc107;       /* Bright Yellow */
    --color-accent1-darker: #d39e00;  /* Darker Yellow */

    --color-accent2: #fd7e14;       /* Bright Orange */
    --color-accent2-darker: #c7610a;  /* Darker Orange */

    --color-success: #28a745;       /* Vivid Green */
    --color-danger: #dc3545;        /* Strong Red */
    --color-info: #17a2b8;         /* Same as secondary, can be different */
    --color-warning: #ffc107;       /* Same as accent1, can be different */

    /* Neutral Colors */
    --color-text-light: #ffffff;
    --color-text-dark: #212529;     /* Main text on light background */
    --color-text-dark-secondary: #343a40; /* Slightly lighter dark text */
    --color-text-muted: #6c757d;
    --color-bg-light: #f8f9fa;      /* Very light grey for sections */
    --color-bg-white: #ffffff;
    --color-bg-dark: #22272c;       /* Dark background (e.g., footer) */
    --color-border: #dee2e6;
    --color-border-light: #eeeeee;

    /* Spacing & Sizing */
    --spacing-xs: 0.25rem;  /* 4px */
    --spacing-sm: 0.5rem;   /* 8px */
    --spacing-md: 1rem;     /* 16px */
    --spacing-lg: 1.5rem;   /* 24px */
    --spacing-xl: 2rem;     /* 32px */
    --spacing-xxl: 3rem;    /* 48px */

    /* Borders */
    --border-radius-sm: 0.25rem; /* 4px */
    --border-radius-md: 0.5rem;  /* 8px */
    --border-radius-lg: 0.75rem; /* 12px */
    --border-width: 1px;
    --border-width-lg: 2px;

    /* Header */
    --header-height: 52px; /* Matches Bulma's default navbar height */
    --header-bg: rgba(255, 255, 255, 0.9);
    --header-shadow: 0 2px 5px rgba(0, 0, 0, 0.08);

    /* Shadows */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 5px 15px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.12);
    --shadow-inset: inset 0 1px 2px rgba(0,0,0,.075);

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

    /* Glassmorphism (use sparingly) */
    --glass-bg: rgba(255, 255, 255, 0.15);
    --glass-blur: 10px;
    --glass-border: 1px solid rgba(255, 255, 255, 0.25);
}

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

html {
    scroll-behavior: smooth;
    font-size: 100%; /* Typically 16px */
}

body {
    font-family: var(--font-secondary);
    line-height: 1.7;
    color: var(--color-text-dark);
    background-color: var(--color-bg-white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden; /* Prevent horizontal scrollbars from animations */
}

/* Typography */
h1, h2, h3, h4, h5, h6,
.title, .subtitle { /* Bulma classes */
    font-family: var(--font-primary);
    font-weight: 700;
    line-height: 1.3;
    color: var(--color-text-dark-secondary);
    margin-bottom: var(--spacing-md); /* Default bottom margin for headings */
}

.title.is-1 { font-size: 2.75rem; } /* ~44px */
.title.is-2 { font-size: 2.25rem; } /* ~36px */
.title.is-3 { font-size: 1.75rem; } /* ~28px */
.title.is-4 { font-size: 1.375rem; } /* ~22px */
.subtitle { color: var(--color-text-muted); font-weight: 400; }
.subtitle.is-4 { font-size: 1.25rem; }
.subtitle.is-5 { font-size: 1.1rem; }

p {
    margin-bottom: var(--spacing-md);
    font-size: 1rem; /* ~16px */
}
.content p:not(:last-child), /* Bulma override */
.content ul:not(:last-child),
.content ol:not(:last-child) {
    margin-bottom: var(--spacing-md);
}

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: var(--transition-fast);
}
a:hover {
    color: var(--color-primary-darker);
    text-decoration: underline;
}

/* Global Button Styles */
.button, button, input[type="submit"], input[type="button"], input[type="reset"] {
    font-family: var(--font-primary);
    font-weight: 600;
    padding: var(--spacing-sm) var(--spacing-lg);
    border-radius: var(--border-radius-md);
    border: var(--border-width) solid transparent;
    cursor: pointer;
    transition: var(--transition-medium);
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    user-select: none;
    font-size: 1rem;
    line-height: 1.5;
    box-shadow: var(--shadow-sm);
}

.button:hover, button:hover, input[type="submit"]:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}
.button:active, button:active, input[type="submit"]:active {
    transform: translateY(0px);
    box-shadow: var(--shadow-sm);
}

.button.is-primary, button.is-primary {
    background-color: var(--color-primary);
    color: var(--color-text-light);
    border-color: var(--color-primary);
}
.button.is-primary:hover, button.is-primary:hover {
    background-color: var(--color-primary-darker);
    border-color: var(--color-primary-darker);
    color: var(--color-text-light);
}
.button.is-primary.is-outlined {
    background-color: transparent;
    border-color: var(--color-primary);
    color: var(--color-primary);
}
.button.is-primary.is-outlined:hover {
    background-color: var(--color-primary);
    color: var(--color-text-light);
}

.button.is-secondary, button.is-secondary { /* Custom class */
    background-color: var(--color-secondary);
    color: var(--color-text-light);
    border-color: var(--color-secondary);
}
.button.is-secondary:hover, button.is-secondary:hover {
    background-color: var(--color-secondary-darker);
    border-color: var(--color-secondary-darker);
    color: var(--color-text-light);
}
.button.is-secondary.is-outlined {
    background-color: transparent;
    border-color: var(--color-secondary);
    color: var(--color-secondary);
}
.button.is-secondary.is-outlined:hover {
    background-color: var(--color-secondary);
    color: var(--color-text-light);
}

.button.is-link { /* Bulma mapping */
    background-color: var(--color-secondary); /* Using our secondary as Bulma's link */
    border-color: var(--color-secondary);
    color: var(--color-text-light);
}
.button.is-link:hover {
    background-color: var(--color-secondary-darker);
    border-color: var(--color-secondary-darker);
}
.button.is-link.is-outlined {
    background-color: transparent;
    border-color: var(--color-secondary);
    color: var(--color-secondary);
}
.button.is-link.is-outlined:hover {
    background-color: var(--color-secondary);
    color: var(--color-text-light);
}


.button.is-large {
    padding: var(--spacing-md) var(--spacing-xl);
    font-size: 1.125rem;
}

/* Read More Link Style */
.read-more-link {
    font-weight: 600;
    color: var(--color-primary);
    display: inline-block;
    margin-top: var(--spacing-sm);
    transition: var(--transition-fast);
}
.read-more-link::after {
    content: ' →';
    transition: var(--transition-fast);
}
.read-more-link:hover {
    color: var(--color-primary-darker);
    text-decoration: underline;
}
.read-more-link:hover::after {
    transform: translateX(3px);
}

/* Global Form Element Styling */
.input, .textarea, .select select {
    font-family: var(--font-secondary);
    background-color: var(--color-bg-white);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--border-radius-md);
    color: var(--color-text-dark);
    padding: calc(0.75em - 1px) calc(1em - 1px); /* Bulma-like padding */
    box-shadow: var(--shadow-inset);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    width: 100%; /* Ensure full width within their containers */
}
.input:focus, .textarea:focus, .select select:focus,
.input.is-focused, .textarea.is-focused, .select.is-focused select,
.input:active, .textarea:active, .select select:active,
.input.is-active, .textarea.is-active, .select.is-active select {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 0.125em rgba(0,123,255,.25); /* Primary color focus glow */
    outline: none;
}
.label {
    color: var(--color-text-dark-secondary);
    font-weight: 600;
    font-family: var(--font-primary);
    margin-bottom: var(--spacing-sm);
}
.checkbox input[type="checkbox"] + label::before, /* For custom checkboxes if used */
.radio input[type="radio"] + label::before {
    border-color: var(--color-primary);
}
.checkbox input[type="checkbox"]:checked + label::before,
.radio input[type="radio"]:checked + label::before {
    background-color: var(--color-primary);
}


/* General Section Styling */
.section {
    padding: var(--spacing-xxl) var(--spacing-lg); /* Vertical, Horizontal padding */
}
.section.has-background-light {
    background-color: var(--color-bg-light);
}
.section.has-background-dark {
    background-color: var(--color-bg-dark);
    color: var(--color-text-light);
}
.section.has-background-dark .title,
.section.has-background-dark .subtitle,
.section.has-background-dark h1,
.section.has-background-dark h2,
.section.has-background-dark h3,
.section.has-background-dark h4 {
    color: var(--color-text-light);
}
.section.has-background-dark p {
    color: #e0e0e0; /* Slightly off-white for better readability */
}
.section.has-background-dark a {
    color: var(--color-accent1);
}
.section.has-background-dark a:hover {
    color: var(--color-accent1-darker);
}


.container { /* Bulma's container is fine, this ensures consistency if not using Bulma fully */
    max-width: 1140px;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--spacing-lg);
    padding-right: var(--spacing-lg);
}
@media (max-width: 768px) {
    .container {
        padding-left: var(--spacing-md);
        padding-right: var(--spacing-md);
    }
}

.section-title { /* Shared style for main title of sections */
    text-align: center;
    margin-bottom: var(--spacing-sm) !important; /* Override Bulma if needed */
    color: #222222; /* Explicit dark color for titles for contrast */
    font-size: 2.5rem; /* Adjust as needed */
}
.section-title + .subtitle, /* Subtitle directly after section title */
.section-title + p { /* Paragraph directly after section title */
    text-align: center;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: var(--spacing-xl) !important;
    color: var(--color-text-muted);
}

/* Helper class for images in cards/blocks */
.image-container {
    display: block; /* or flex if content inside */
    overflow: hidden;
    position: relative;
    margin-bottom: var(--spacing-md); /* Space below image */
}
.image-container img {
    display: block;
    width: 100%;
    height: 100%; /* Will be overridden if fixed height is set */
    object-fit: cover; /* Default, can be overridden */
    transition: transform var(--transition-medium);
}
.card:hover .image-container img { /* Subtle zoom on card hover */
    /* transform: scale(1.05); */
}


/* -------------------------------------------------------------------------- */
/* HEADER / NAVBAR */
/* -------------------------------------------------------------------------- */
.header.is-fixed-top {
    background-color: var(--header-bg);
    box-shadow: var(--header-shadow);
    backdrop-filter: blur(var(--glass-blur));
    z-index: 1030; /* Above other content */
    height: var(--header-height);
}
.navbar {
    min-height: var(--header-height); /* Ensure navbar takes up the header height */
}
.navbar-brand .navbar-item.logo-text {
    font-family: var(--font-primary);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--color-primary);
    padding-left: 0; /* Adjust if needed */
}
.navbar-item, .navbar-link {
    font-family: var(--font-secondary);
    font-weight: 500;
    color: var(--color-text-dark-secondary);
    transition: var(--transition-fast);
}
.navbar-item:hover, .navbar-link:hover,
.navbar-item.is-active, .navbar-link.is-active { /* is-active for current page */
    background-color: transparent !important; /* Bulma override */
    color: var(--color-primary) !important;
}
.navbar-burger {
    color: var(--color-primary);
    height: var(--header-height); /* Match navbar height */
    width: var(--header-height);  /* Match navbar height */
}
.navbar-burger span {
    background-color: var(--color-primary);
    height: 2px; /* Thinner burger lines */
}
.navbar-menu.is-active { /* Mobile menu background */
    background-color: var(--color-bg-white);
    box-shadow: var(--shadow-lg);
}
@media screen and (max-width: 1023px) { /* Bulma's mobile breakpoint */
    .navbar-menu {
        padding: var(--spacing-sm) 0;
    }
    .navbar-item {
        padding: var(--spacing-sm) var(--spacing-lg);
    }
    #page-container main { /* Ensure content isn't hidden by fixed header */
        padding-top: var(--header-height);
    }
}


/* -------------------------------------------------------------------------- */
/* HERO SECTION */
/* -------------------------------------------------------------------------- */
#hero {
    /* background-image is set inline with linear-gradient */
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    color: var(--color-text-light); /* Default text color for hero */
    position: relative; /* For particle overlay */
}
#particles-js-hero {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 0; /* Behind hero content */
}
#hero .hero-body {
    position: relative;
    z-index: 1; /* Hero content above particles */
    padding: var(--spacing-xl) var(--spacing-lg); /* Adjust padding */
    display: flex;
    align-items: center;
    justify-content: center;
}
#hero .title, #hero .subtitle {
    color: var(--color-text-light) !important; /* IMPORTANT: Ensure white text */
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6); /* For readability */
}
#hero .title.is-1 {
    font-size: 3rem; /* Large title for hero */
    margin-bottom: var(--spacing-md);
}
#hero .subtitle.is-4 {
    font-size: 1.25rem;
    margin-bottom: var(--spacing-xl);
    max-width: 650px; /* Constrain subtitle width */
    margin-left: auto;
    margin-right: auto;
}
#hero .button.is-primary {
    background-color: var(--color-accent1); /* Use a bright accent for CTA */
    border-color: var(--color-accent1);
    color: var(--color-text-dark); /* Text on yellow button */
    padding: var(--spacing-md) var(--spacing-xl);
    font-size: 1.1rem;
}
#hero .button.is-primary:hover {
    background-color: var(--color-accent1-darker);
    border-color: var(--color-accent1-darker);
}

/* -------------------------------------------------------------------------- */
/* CARD STYLES (Services, Customer Stories, etc.) */
/* -------------------------------------------------------------------------- */
.card { /* Bulma's card base */
    background-color: var(--color-bg-white);
    border-radius: var(--border-radius-lg); /* Slightly larger radius for blocky feel */
    box-shadow: var(--shadow-md);
    transition: var(--transition-medium);
    height: 100%; /* For equal height cards in a row with Bulma columns */
    display: flex;
    flex-direction: column;
    /* align-items: center; STRICT: applied here or to specific card types */
}
.card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.card .card-image { /* Bulma's card-image */
    border-top-left-radius: var(--border-radius-lg);
    border-top-right-radius: var(--border-radius-lg);
    overflow: hidden; /* Important for image inside */
    margin: 0; /* Remove default Bulma margin if any */
    /* display: flex; align-items: center; justify-content: center; */ /* For the figure itself */
}
/* STRICT: image-container for images within cards */
.card .image-container {
    width: 100%;
    /* height: 200px; /* Example fixed height, adjust per card type */
    overflow: hidden;
    display: flex; /* Center image if it's smaller than container */
    align-items: center;
    justify-content: center;
}
.card .image-container img {
    width: 100%;
    height: 100%; /* Fill container if fixed height set on .image-container */
    object-fit: cover;
}

.card .card-content {
    padding: var(--spacing-lg);
    flex-grow: 1; /* Content takes remaining space */
    text-align: left; /* Default, can be overridden for specific cards */
    /* text-align: center; STRICT: applied here or to specific card types */
}
.card .card-content .title {
    margin-bottom: var(--spacing-sm);
    color: var(--color-primary); /* Card titles in primary color */
    font-size: 1.25rem;
}
.card .card-content .content p { /* Paragraphs inside .content of a card */
    font-size: 0.95rem;
    color: var(--color-text-muted);
    margin-bottom: var(--spacing-sm);
}

/* Specific Card Type: Service Card */
.service-card {
    text-align: center; /* Center content within service cards */
}
.service-card .card-image .image-container {
    height: 220px; /* Fixed height for service card images */
}
.service-card .card-title { /* For titles directly in card content */
    color: var(--color-primary);
    font-size: 1.3rem;
}

/* Specific Card Type: Testimonial Card */
.testimonial-card {
    display: flex;
    flex-direction: column;
    align-items: center; /* STRICT: center content for testimonial cards */
    text-align: center;
    padding: var(--spacing-xl);
}
.testimonial-card .card-image { /* For the rounded profile image */
    width: 100px; /* Size of profile image */
    height: 100px;
    border-radius: 50%;
    overflow: hidden;
    margin-bottom: var(--spacing-md);
    border: 3px solid var(--color-primary-light);
    box-shadow: var(--shadow-sm);
}
.testimonial-card .card-image img {
    object-fit: cover;
}
.testimonial-card .card-title { /* Quote itself or name */
    font-style: italic;
    color: var(--color-text-dark-secondary);
    margin-bottom: var(--spacing-sm);
    font-size: 1.1rem;
}
.testimonial-card .content {
    font-size: 0.9rem;
}
.testimonial-card .has-text-weight-bold {
    margin-top: var(--spacing-md);
    color: var(--color-primary);
}

/* Team Member Card (from about.html) */
.team-member-card { /* Assuming a similar structure to testimonial */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.team-member-card .image.is-128x128 { /* Bulma class */
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid var(--color-secondary);
    margin-bottom: var(--spacing-sm);
}

/* -------------------------------------------------------------------------- */
/* SPECIFIC SECTION STYLES */
/* -------------------------------------------------------------------------- */

/* Calculator Form Section (#calculator-form) */
#calculator-form .box {
    background-color: var(--color-bg-white);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-xl);
    box-shadow: var(--shadow-lg); /* More pronounced shadow for form block */
}
#calculator-form .field:not(:last-child) {
    margin-bottom: var(--spacing-lg); /* More space between form fields */
}

/* About Us Section (#about) */
#about .content p {
    font-size: 1.05rem;
    line-height: 1.8;
}
#about .image-container img {
    border-radius: var(--border-radius-md);
}

/* Behind The Scenes Section (#behind-the-scenes) */
#behind-the-scenes h4 {
    color: var(--color-secondary);
    margin-top: var(--spacing-lg);
}
#behind-the-scenes .image-container img {
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-md);
}

/* External Resources Section (#external-resources) */
.external-links-list {
    list-style: none;
    padding-left: 0;
}
.external-links-list .link-item.box { /* Using Bulma .box */
    margin-bottom: var(--spacing-lg);
    padding: var(--spacing-lg);
    background-color: var(--color-bg-white);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-sm);
    transition: var(--transition-medium);
}
.external-links-list .link-item.box:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-3px);
}
.external-links-list .link-title a {
    font-family: var(--font-primary);
    font-weight: 600;
    color: var(--color-primary);
    font-size: 1.15rem;
}
.external-links-list .link-description {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    margin-top: var(--spacing-xs);
}


/* -------------------------------------------------------------------------- */
/* FOOTER */
/* -------------------------------------------------------------------------- */
.footer {
    background-color: var(--color-bg-dark);
    color: var(--color-text-light);
    padding: var(--spacing-xxl) var(--spacing-lg);
}
.footer .title.has-text-white { /* Bulma class */
    color: var(--color-text-light) !important;
    margin-bottom: var(--spacing-md);
    font-size: 1.25rem;
}
.footer p, .footer .content p {
    color: #b0bec5; /* Lighter grey for footer text */
    font-size: 0.95rem;
    margin-bottom: var(--spacing-sm);
}
.footer ul {
    list-style: none;
    padding-left: 0;
    margin-left: 0; /* Override Bulma if needed */
}
.footer ul li {
    margin-bottom: var(--spacing-xs);
}
.footer ul li a { /* Text-based social links & nav links */
    color: #cfd8dc; /* Slightly brighter for links */
    text-decoration: none;
    transition: var(--transition-fast);
    font-weight: 500; /* Make links slightly bolder */
}
.footer ul li a:hover {
    color: var(--color-accent1); /* Bright accent on hover */
    text-decoration: none; /* No underline for footer links by default */
}
.footer hr {
    background-color: #455a64 !important; /* Darker border in footer */
    height: 1px;
    margin: var(--spacing-lg) 0;
}
.footer .content.has-text-centered p { /* Copyright text */
    color: #90a4ae;
    font-size: 0.85rem;
}

/* Footer Social Links (Text-based) Specific Styling */
.footer .column ul li a[target="_blank"] { /* Assuming social links open in new tab */
    /* No specific icon styling needed as they are text */
    /* You can add padding or display:inline-block if needed for spacing */
}


/* -------------------------------------------------------------------------- */
/* PAGE-SPECIFIC STYLES */
/* -------------------------------------------------------------------------- */

/* Main content area for pages with fixed header, ensures no overlap */
/* Applied to main content wrappers on privacy.html, terms.html */
.page-content-wrapper {
    padding-top: calc(var(--header-height) + var(--spacing-xl)); /* Header height + extra space */
}
/* Or more specifically */
body.privacy-page main, body.terms-page main { /* Add these classes to body tag of respective pages */
    padding-top: calc(var(--header-height) + var(--spacing-xl));
}

/* success.html - Full viewport height and centered content */
body.success-page #page-container { /* Target the main container for success page */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
body.success-page main {
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding-top: 0; /* Reset padding-top from general main styles */
}
.success-animation .checkmark {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: block;
    stroke-width: 3; /* Thicker for visibility */
    stroke: var(--color-success);
    stroke-miterlimit: 10;
    box-shadow: inset 0px 0px 0px var(--color-success);
    animation: success-fill .4s ease-in-out .4s forwards, success-scale .3s ease-in-out .9s both;
    margin: 0 auto var(--spacing-lg) auto;
}
.success-animation .checkmark__circle {
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    stroke-width: 3;
    stroke-miterlimit: 10;
    stroke: var(--color-success);
    fill: none;
    animation: success-stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}
.success-animation .checkmark__check {
    transform-origin: 50% 50%;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    animation: success-stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}
@keyframes success-stroke {
    100% { stroke-dashoffset: 0; }
}
@keyframes success-scale {
    0%, 100% { transform: none; }
    50% { transform: scale3d(1.1, 1.1, 1); }
}
@keyframes success-fill {
    100% { box-shadow: inset 0px 0px 0px 60px var(--color-success); }
}
body.success-page .footer {
    flex-shrink: 0; /* Prevent footer from shrinking too much */
}

/* Switches (from Bulma extensions or custom) */
.switch[type=checkbox] {
    outline: 0;
    user-select: none;
    position: absolute;
    opacity: 0;
}
.switch[type=checkbox] + label {
    position: relative;
    display: inline-flex;
    align-items: center;
    font-size: 1rem;
    color: var(--color-text-muted);
    user-select: none;
    cursor: pointer;
    padding-left: 44px; /* Increased space for a larger switch */
    line-height: 24px; /* Match switch height */
    min-height: 24px;
}
.switch[type=checkbox] + label::before { /* Track */
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    width: 40px;
    height: 24px;
    border-radius: 12px;
    background: #b5b5b5;
    transition: var(--transition-fast);
}
.switch[type=checkbox] + label::after { /* Knob */
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--color-bg-white);
    box-shadow: var(--shadow-sm);
    transition: var(--transition-fast);
}
.switch[type=checkbox]:checked + label::before {
    background: var(--color-primary);
}
.switch[type=checkbox]:checked + label::after {
    left: 19px; /* 40px (track) - 18px (knob) - 3px (padding) */
}
.switch.is-info[type=checkbox]:checked + label::before {
    background: var(--color-info);
}


/* -------------------------------------------------------------------------- */
/* UTILITY CLASSES & RESPONSIVENESS */
/* -------------------------------------------------------------------------- */
.has-text-centered { text-align: center !important; }
.is-fullheight { min-height: 100vh; } /* For Hero usually */
.mt-1 { margin-top: var(--spacing-xs) !important; }
.mt-2 { margin-top: var(--spacing-sm) !important; }
.mt-3 { margin-top: var(--spacing-md) !important; }
.mt-4 { margin-top: var(--spacing-lg) !important; }
.mt-5 { margin-top: var(--spacing-xl) !important; }
.mb-1 { margin-bottom: var(--spacing-xs) !important; }
.mb-2 { margin-bottom: var(--spacing-sm) !important; }
.mb-3 { margin-bottom: var(--spacing-md) !important; }
.mb-4 { margin-bottom: var(--spacing-lg) !important; }
.mb-5 { margin-bottom: var(--spacing-xl) !important; }

/* Responsive adjustments for columns and sections */
@media screen and (max-width: 768px) {
    .section {
        padding: var(--spacing-xl) var(--spacing-md);
    }
    .section-title {
        font-size: 2rem;
    }
    .section-title + .subtitle, .section-title + p {
        margin-bottom: var(--spacing-lg) !important;
    }
    #hero .title.is-1 { font-size: 2.25rem; }
    #hero .subtitle.is-4 { font-size: 1.1rem; }

    /* Make Bulma columns stack earlier or with more space */
    .columns.is-multiline .column {
        margin-bottom: var(--spacing-lg); /* Space between stacked cards */
    }
    .footer .columns { /* Stack footer columns */
        text-align: center;
    }
    .footer .column:not(:last-child) {
        margin-bottom: var(--spacing-lg);
    }
}

/* AOS Animation Support */
[data-aos] {
    /* Default state, AOS will handle transition */
    /* Example: opacity: 0; transform: translateY(20px); */
}

/* Cookie Popup - From previous HTML, minimal styling */
#cookie-popup {
    /* display, position, bottom, left, width, background-color, color, padding, text-align, z-index, box-sizing, border-top are set inline */
    /* No additional CSS needed unless overriding inline styles */
}
#cookie-popup p {
    color: var(--color-text-light); /* Ensure text is light on dark popup */
    margin-bottom: var(--spacing-md);
}
#cookie-popup a {
    color: #bdbdbd; /* Muted link color */
    text-decoration: underline;
}
#cookie-popup a:hover {
    color: var(--color-text-light);
}
#cookie-popup button#accept-cookie {
    background-color: var(--color-primary);
    color: var(--color-text-light);
    border: none;
    padding: var(--spacing-sm) var(--spacing-lg);
    font-size: 0.95em;
    cursor: pointer;
    border-radius: var(--border-radius-sm);
    font-weight: 600;
}
#cookie-popup button#accept-cookie:hover {
    background-color: var(--color-primary-darker);
}

/* Ensure high contrast throughout */
/* Dark text on light backgrounds (default): Checked */
/* Light text on dark backgrounds (footer, hero): Checked */
/* Buttons: Text color contrasts with background */
.title:not(.is-spaced)+.subtitle{
    margin: 0;
}