/* style.css */

/*------------------------------------------------------------------
[Table of Contents]

1. ROOT VARIABLES
2. RESET & GLOBAL STYLES
3. TYPOGRAPHY
4. UTILITY CLASSES
5. UI COMPONENTS
    5.1. Buttons (Global & Volumetric)
    5.2. Cards (Global & Volumetric)
    5.3. Forms (Inputs, Textarea, Select)
    5.4. Progress Bars (Volumetric)
    5.5. Switches (Toggles)
    5.6. Tabs (Volumetric)
    5.7. Image Galleries (Part of Cards)
6. LAYOUT COMPONENTS
    6.1. Header (Navbar)
    6.2. Footer
7. SECTION SPECIFIC STYLES
    7.1. Hero Section
    7.2. Collections Section
    7.3. Sportswear Section
    7.4. Brands Section
    7.5. Blog Section
    7.6. Testimonials Section
    7.7. Sustainability Section
    7.8. Events & News Section
    7.9. External Resources Section
    7.10. Contact Index Section
8. PAGE SPECIFIC STYLES
    8.1. About Page
    8.2. Contacts Page
    8.3. Privacy & Terms Pages
    8.4. Success Page
9. ANIMATIONS & TRANSITIONS
    9.1. Microanimations
    9.2. Animated Icons
10. RESPONSIVE DESIGN OVERRIDES
-------------------------------------------------------------------*/

/* 1. ROOT VARIABLES */
:root {
    /* Fonts */
    --font-primary: 'Raleway', sans-serif;
    --font-secondary: 'Open Sans', sans-serif;

    /* Neutral Colors - Retro Palette */
    --color-text: #383838; /* Darker for better contrast */
    --color-text-light: #f8f8f8;
    --color-text-muted: #6c757d;
    
    --color-background-body: #fdfbf5; /* Very light warm cream/beige */
    --color-background-section-light: #ffffff;
    --color-background-section-medium: #f0ede6; /* Slightly darker beige for subtle contrast */
    --color-background-section-dark: #333333; /* For footer */

    --color-border: #d1ccc0; /* Muted border color */
    --color-border-input: #b0a99a;

    /* Accent Colors - Retro Palette */
    --color-primary: #b08d57; /* Warm, earthy gold/brown - from cookie button */
    --color-primary-dark: #937047; /* Darker shade of primary */
    --color-primary-light: #c4a87a; /* Lighter shade of primary */
    
    --color-accent: #708090; /* Slate Gray - a cool retro contrast */
    --color-accent-dark: #5a6875;
    --color-accent-light: #8c9baa;

    --color-link: var(--color-primary);
    --color-link-hover: var(--color-primary-dark);

    /* Volumetric UI Shadows & Effects */
    --shadow-soft: 0 2px 5px rgba(0,0,0,0.08);
    --shadow-medium: 0 5px 15px rgba(0,0,0,0.1);
    --shadow-deep: 0 8px 20px rgba(0,0,0,0.12);
    
    --volumetric-shadow-light-bg: 4px 4px 8px #d9d4c8, -4px -4px 8px #ffffff;
    --volumetric-shadow-light-bg-inset: inset 4px 4px 8px #d9d4c8, inset -4px -4px 8px #ffffff;
    
    --volumetric-shadow-dark-bg: 4px 4px 8px #2b2b2b, -4px -4px 8px #3b3b3b;
    --volumetric-shadow-dark-bg-inset: inset 4px 4px 8px #2b2b2b, inset -4px -4px 8px #3b3b3b;

    /* Spacing */
    --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: 6px;
    --border-radius-md: 10px;
    --border-radius-lg: 15px;

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

/* 2. RESET & GLOBAL STYLES */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    font-size: 16px; /* Base font size */
}

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

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* General Parallax Background Style */
.parallax-background {
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* Section styling - Bulma's section class is fine, we'll add padding */
.section {
    padding: var(--spacing-xxl) var(--spacing-lg);
}

@media screen and (max-width: 768px) {
    .section {
        padding: var(--spacing-xl) var(--spacing-md);
    }
}

/* Ensure main content area is not overlapped by fixed header */
main {
    padding-top: 60px; /* Adjust if header height changes */
}

/* 3. TYPOGRAPHY */
h1, h2, h3, h4, h5, h6,
.title, .subtitle { /* Bulma classes */
    font-family: var(--font-primary);
    color: var(--color-text); /* Default for light backgrounds */
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: var(--spacing-md);
}

.title.is-1 { font-size: 3rem; }
.title.is-2 { font-size: 2.5rem; }
.title.is-3 { font-size: 2rem; }
.title.is-4 { font-size: 1.5rem; }
.title.is-5 { font-size: 1.25rem; }
.title.is-6 { font-size: 1rem; }

.subtitle {
    color: var(--color-text-muted);
    font-weight: 400;
}
.subtitle.is-3 { font-size: 1.75rem; }
.subtitle.is-5 { font-size: 1.1rem; }


p {
    margin-bottom: var(--spacing-md);
    font-size: 1rem;
    line-height: 1.7;
}

a {
    color: var(--color-link);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--color-link-hover);
    text-decoration: underline;
}

.section-title {
    text-align: center;
    margin-bottom: var(--spacing-xl);
    color: #222222; /* Ensure high contrast for section titles */
    position: relative;
    padding-bottom: var(--spacing-sm);
}

.section-title::after { /* Subtle underline effect */
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background-color: var(--color-primary);
    margin: var(--spacing-sm) auto 0;
    border-radius: var(--border-radius-sm);
}

/* 4. UTILITY CLASSES */
.has-text-shadow {
    text-shadow: 1px 1px 3px rgba(0,0,0,0.3);
}

.image-container { /* For card images */
    overflow: hidden;
    border-radius: var(--border-radius-md) var(--border-radius-md) 0 0; /* Rounded top corners */
}
.image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-medium);
}
.card:hover .image-container img {
    transform: scale(1.05);
}


/* 5. UI COMPONENTS */

/* 5.1. Buttons (Global & Volumetric) */
.button, button, input[type="submit"], input[type="button"] {
    font-family: var(--font-primary);
    font-weight: 700;
    border-radius: var(--border-radius-md);
    padding: var(--spacing-sm) var(--spacing-lg);
    transition: all var(--transition-fast);
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: 2px solid transparent; /* For consistent sizing */
}

/* Bulma button overrides for consistency with theme */
.button.is-primary {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-text-light);
}
.button.is-primary:hover {
    background-color: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    color: var(--color-text-light);
    transform: translateY(-2px);
    box-shadow: var(--shadow-medium);
}
.button.is-primary:active {
    transform: translateY(0);
    box-shadow: var(--shadow-soft);
}

.button.is-link { /* For "Read More" type links */
    background-color: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-text-light);
}
.button.is-link:hover {
    background-color: var(--color-accent-dark);
    border-color: var(--color-accent-dark);
    color: var(--color-text-light);
}

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

/* Volumetric Button Style */
.volumetric-button {
    box-shadow: var(--volumetric-shadow-light-bg);
    border: none;
    background-color: var(--color-background-section-light); /* Or slightly off-white like body */
    color: var(--color-primary);
}

.volumetric-button.is-primary, /* If Bulma's is-primary is also volumetric */
.button.is-primary.volumetric-button { 
    background-color: var(--color-primary);
    color: var(--color-text-light);
    box-shadow: 3px 3px 6px color-mix(in srgb, var(--color-primary) 70%, black), 
                -3px -3px 6px color-mix(in srgb, var(--color-primary) 70%, white);
}
.volumetric-button.is-primary:hover {
    background-color: var(--color-primary-dark);
     box-shadow: 4px 4px 8px color-mix(in srgb, var(--color-primary-dark) 65%, black), 
                -4px -4px 8px color-mix(in srgb, var(--color-primary-dark) 65%, white),
                inset 1px 1px 2px color-mix(in srgb, var(--color-primary-dark) 80%, white),
                inset -1px -1px 2px color-mix(in srgb, var(--color-primary-dark) 80%, black);
}
.volumetric-button.is-primary:active {
    box-shadow: var(--volumetric-shadow-light-bg-inset);
    transform: translateY(1px) translateX(1px);
    background-color: color-mix(in srgb, var(--color-primary) 95%, black);
}

.volumetric-button-small { /* For "Read More" type links if styled as volumetric */
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: 0.85rem;
    text-transform: none;
    background-color: var(--color-accent);
    color: var(--color-text-light);
    box-shadow: 2px 2px 4px color-mix(in srgb, var(--color-accent) 70%, black), 
                -2px -2px 4px color-mix(in srgb, var(--color-accent) 70%, white);
}
.volumetric-button-small:hover {
    background-color: var(--color-accent-dark);
}
.volumetric-button-small:active {
    box-shadow: inset 2px 2px 4px color-mix(in srgb, var(--color-accent) 70%, black), 
                inset -2px -2px 4px color-mix(in srgb, var(--color-accent) 70%, white);
}


/* 5.2. Cards (Global & Volumetric) */
.card { /* Bulma's card base */
    background-color: var(--color-background-section-light);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-soft);
    transition: all var(--transition-medium);
    height: 100%; /* For consistent height in columns */
    display: flex;
    flex-direction: column;
}

.card:hover {
    box-shadow: var(--shadow-medium);
    transform: translateY(-5px);
}

.card .card-image { /* Bulma's card-image */
    border-radius: var(--border-radius-md) var(--border-radius-md) 0 0;
    overflow: hidden; /* Ensures image respects border radius */
    position: relative; /* For potential overlays */
    display: flex; /* For image centering in case figure is not full width */
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.card .card-image .image { /* Bulma's .image wrapper */
    display: block; /* Remove any extra space */
    height: 200px; /* Default fixed height for card images, adjust per section if needed */
}
.card .card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card .card-content {
    padding: var(--spacing-lg);
    text-align: left; /* Default, override for centered content */
    flex-grow: 1; /* Allows content to fill space, pushing footer down */
    display: flex;
    flex-direction: column;
}
.card .card-content .title,
.card .card-content .subtitle {
    margin-bottom: var(--spacing-sm);
}
.card .card-content .content {
    font-size: 0.95rem;
    color: var(--color-text-muted);
    flex-grow: 1; /* Pushes buttons/links to bottom of content */
}
.card .card-content .button {
    margin-top: auto; /* Pushes button to the bottom of card-content */
    align-self: flex-start; /* Aligns button to the left by default */
}

.card.volumetric-card {
    box-shadow: var(--volumetric-shadow-light-bg);
    border: 1px solid transparent; /* To prevent jump on hover if border is added */
    background-color: var(--color-background-body); /* Match body for seamless volumetric effect */
}
.card.volumetric-card:hover {
    box-shadow: 6px 6px 12px #d9d4c8, -6px -6px 12px #ffffff;
    transform: translateY(-3px);
}
.card.volumetric-card .card-content {
    text-align: center;
}
.card.volumetric-card .card-content .button {
    align-self: center; /* Center button in volumetric cards */
}

/* Centering for specific card content as requested */
.testimonial-card .card-content,
.resource-card .card-content {
    text-align: left; /* Overriding volumetric-card center if needed, or keep centered */
}

/* 5.3. Forms (Inputs, Textarea, Select) */
.input, .textarea, .select select {
    font-family: var(--font-secondary);
    background-color: var(--color-background-section-light);
    border: 1px solid var(--color-border-input);
    border-radius: var(--border-radius-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    box-shadow: var(--volumetric-shadow-light-bg-inset);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    color: var(--color-text);
}
.input:focus, .textarea:focus, .select select:focus,
.input:active, .textarea:active, .select select:active {
    border-color: var(--color-primary);
    box-shadow: var(--volumetric-shadow-light-bg-inset), 0 0 0 0.125em var(--color-primary-light);
    outline: none;
}
.label {
    font-family: var(--font-primary);
    color: var(--color-text);
    font-weight: 700;
    margin-bottom: var(--spacing-xs);
}
.control.has-icons-left .icon, .control.has-icons-right .icon {
    color: var(--color-border-input);
}

/* 5.4. Progress Bars (Volumetric) */
.progress { /* Bulma's progress bar */
    border-radius: var(--border-radius-lg); /* Make container rounded */
    height: 20px !important; /* Override Bulma's default for better volumetric feel */
}
.progress::-webkit-progress-bar {
    background-color: var(--color-background-section-medium);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--volumetric-shadow-light-bg-inset);
}
.progress::-webkit-progress-value {
    background-color: var(--color-primary);
    border-radius: var(--border-radius-lg);
    transition: width var(--transition-slow);
}
.progress.is-primary::-webkit-progress-value { background-color: var(--color-primary); }
.progress.is-success::-webkit-progress-value { background-color: #48c774; } /* Bulma success */
.progress.is-warning::-webkit-progress-value { background-color: #ffdd57; } /* Bulma warning */

.volumetric-progress { /* For HTML's class, ensures styles apply */
    /* Styles above for .progress already cover this */
}

/* 5.5. Switches (Toggles) */
.switch {
    position: relative;
    display: inline-block;
    width: 50px; /* Smaller switch */
    height: 26px; /* Smaller switch */
}
.switch input { 
    opacity: 0;
    width: 0;
    height: 0;
}
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--color-background-section-medium);
    transition: .4s;
    border-radius: 26px;
    box-shadow: var(--volumetric-shadow-light-bg-inset);
}
.slider:before {
    position: absolute;
    content: "";
    height: 18px; /* Smaller knob */
    width: 18px; /* Smaller knob */
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
    box-shadow: var(--shadow-soft);
}
input:checked + .slider {
    background-color: var(--color-primary);
    box-shadow: var(--volumetric-shadow-light-bg-inset); /* Maintain inset on track */
}
input:checked + .slider:before {
    transform: translateX(24px); /* Adjust for new size */
    box-shadow: var(--shadow-soft); /* Knob remains slightly elevated */
}

/* 5.6. Tabs (Volumetric) */
.tabs.is-boxed li a {
    border-radius: var(--border-radius-sm) var(--border-radius-sm) 0 0 !important; /* Bulma specificity */
    border-bottom-color: var(--color-border) !important;
    transition: all var(--transition-fast);
    font-weight: 600;
}
.tabs.is-boxed li.is-active a {
    background-color: var(--color-background-section-light);
    border-color: var(--color-border);
    border-bottom-color: transparent !important;
    color: var(--color-primary);
}
.tabs.volumetric-tabs.is-boxed li a {
    background-color: var(--color-background-section-medium);
    box-shadow: var(--volumetric-shadow-light-bg);
    margin: 0 var(--spacing-xs);
    border: none !important;
}
.tabs.volumetric-tabs.is-boxed li.is-active a {
    background-color: var(--color-background-body); /* Make it look pressed into the page */
    box-shadow: var(--volumetric-shadow-light-bg-inset);
    color: var(--color-primary);
}
.tab-content-item {
    padding: var(--spacing-lg);
    background-color: var(--color-background-body); /* Match tabs for seamless look */
    border-radius: 0 0 var(--border-radius-md) var(--border-radius-md);
    box-shadow: var(--volumetric-shadow-light-bg-inset); /* Continue inset look */
    margin-top: -1px; /* Overlap slightly with tabs */
}


/* 6. LAYOUT COMPONENTS */

/* 6.1. Header (Navbar) */
.header {
    background-color: rgba(253, 251, 245, 0.9); /* var(--color-background-body) with alpha */
    backdrop-filter: blur(8px);
    box-shadow: var(--shadow-soft);
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1000;
    transition: background-color var(--transition-medium);
}
.navbar {
    min-height: 60px; /* Adjust as needed */
}
.navbar-item, .navbar-link {
    font-family: var(--font-primary);
    font-weight: 600;
    color: var(--color-text);
    transition: color var(--transition-fast), background-color var(--transition-fast);
    padding: 0.5rem 1.25rem;
}
.navbar-item:hover, .navbar-link:hover,
.navbar-item.is-active { /* For current page indication */
    background-color: var(--color-primary-light);
    color: var(--color-text-light);
}
.navbar-brand .navbar-item.logo-text {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--color-primary);
}
.navbar-brand .navbar-item.logo-text:hover {
    background-color: transparent;
    color: var(--color-primary-dark);
}

.navbar-burger {
    color: var(--color-primary);
    height: 60px; /* Match navbar min-height */
    width: 60px;
}
.navbar-burger span {
    background-color: var(--color-primary);
    height: 2px; /* Thinner lines */
    transition: all var(--transition-fast);
}
.navbar-burger.is-active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.navbar-burger.is-active span:nth-child(2) {
    opacity: 0;
}
.navbar-burger.is-active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

@media screen and (max-width: 1023px) {
    .navbar-menu {
        background-color: rgba(253, 251, 245, 0.95); /* var(--color-background-body) with alpha */
        backdrop-filter: blur(5px);
        box-shadow: 0 8px 16px rgba(10,10,10,.1);
        padding: 0.5rem 0;
    }
    .navbar-item {
        border-bottom: 1px solid var(--color-border);
    }
    .navbar-item:last-child {
        border-bottom: none;
    }
}


/* 6.2. Footer */
.footer { /* Bulma's footer base */
    background-color: var(--color-background-section-dark);
    color: var(--color-text-light);
    padding: var(--spacing-xxl) var(--spacing-lg);
}
.footer .title {
    color: var(--color-text-light);
}
.footer a {
    color: var(--color-primary-light);
    transition: color var(--transition-fast);
}
.footer a:hover {
    color: var(--color-text-light);
    text-decoration: underline;
}
.footer .content p {
    color: var(--color-text-light);
}
.footer hr {
    background-color: #555; /* Darker hr for dark footer */
}
/* Social links in footer (text-based) */
.footer .column:last-child p {
    margin-bottom: var(--spacing-xs); /* Tighter spacing for social links */
}

img {
  object-fit: cover;
}

/* 7. SECTION SPECIFIC STYLES */

/* 7.1. Hero Section */
#hero {
    /* background-image is set inline */
    position: relative;
}
#hero .hero-body {
    position: relative;
    z-index: 2;
    padding-block: 100px;
}
#hero .hero-text-overlay { /* This class is in HTML */
    background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)); /* Darker overlay for better text contrast */
    padding: var(--spacing-xl);
    border-radius: var(--border-radius-lg);
    display: inline-block; /* So it doesn't take full width unless content pushes it */
    max-width: 800px; /* Limit width for better readability */
    box-shadow: var(--shadow-deep);
}
#hero .title, #hero .subtitle, #hero p {
    color: var(--color-text-light) !important; /* Ensure white text as per requirement */
}
#hero .title {
    text-shadow: 2px 2px 4px rgba(0,0,0,0.7);
}
#hero .button {
    margin-top: var(--spacing-lg);
}

/* 7.2. Collections Section, 7.3. Sportswear, 7.4. Brands */
/* These sections primarily use cards, styled above */
#brands .brand-logo img {
    border-radius: var(--border-radius-sm);
    box-shadow: var(--shadow-soft);
    transition: transform var(--transition-fast);
}
#brands .brand-logo img:hover {
    transform: scale(1.1);
}

/* 7.5. Blog Section */
#blog .card .card-content .button.is-link {
    font-size: 0.9rem;
    padding: var(--spacing-xs) var(--spacing-sm);
}

/* 7.6. Testimonials Section */
#testimonials .card.testimonial-card {
    background-color: var(--color-background-section-medium); /* Slightly different bg for testimonials */
    box-shadow: var(--volumetric-shadow-light-bg);
}
#testimonials .media-left .image img {
    border-radius: 50%;
    border: 3px solid var(--color-primary-light);
}
#testimonials .content {
    font-style: italic;
    color: var(--color-text);
}
#testimonials .content small {
    font-style: normal;
    color: var(--color-text-muted);
    display: block;
    margin-top: var(--spacing-sm);
}

/* 7.7. Sustainability Section */
#sustainability .hero-text-overlay { /* Specific overlay style from HTML */
    background: linear-gradient(rgba(245,245,245,0.9), rgba(245,245,245,0.9)) !important;
    color: var(--color-text) !important;
    padding: var(--spacing-xl);
    border-radius: var(--border-radius-lg);
}
#sustainability .hero-text-overlay .title,
#sustainability .hero-text-overlay .subtitle,
#sustainability .hero-text-overlay p,
#sustainability .hero-text-overlay ul li {
    color: var(--color-text) !important;
}
#sustainability .hero-text-overlay .section-title {
    color: #222222 !important;
}


/* 7.8. Events & News Section */
/* Tab styles are global. Card styles are global. */

/* 7.9. External Resources Section */
#recursos-externos .card.resource-card {
    background-color: var(--color-background-section-medium);
}
#recursos-externos .card.resource-card .title a {
    color: var(--color-primary);
}
#recursos-externos .card.resource-card .title a:hover {
    color: var(--color-primary-dark);
}

/* 7.10. Contact Index Section */
#contact-index p strong {
    color: var(--color-primary);
}


/* 8. PAGE SPECIFIC STYLES */

/* 8.1. About Page */
.about-page-content,
.generic-page-content { /* For terms, privacy etc. */
    padding: var(--spacing-xl) 0; /* Add vertical padding to content within sections */
}
.about-page-content .column.is-two-thirds { /* Ensure this column layout is used */
    margin: 0 auto; /* Center the content column */
}

/* 8.2. Contacts Page */
.contact-form-section {
    background-color: var(--color-background-section-medium);
    padding: var(--spacing-xxl) var(--spacing-lg);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--volumetric-shadow-light-bg);
}
.contact-form-section .form-container {
    max-width: 700px;
    margin: 0 auto;
    background-color: var(--color-background-body);
    padding: var(--spacing-xl);
    border-radius: var(--border-radius-md);
    box-shadow: var(--volumetric-shadow-light-bg-inset);
}
.contact-info-sidebar .icon {
    color: var(--color-primary);
    margin-right: var(--spacing-sm);
}

/* 8.3. Privacy & Terms Pages */
.privacy-page-container, .terms-page-container {
    padding-top: 100px; /* Avoid header overlap, includes main's padding-top */
    padding-bottom: var(--spacing-xxl);
}
.privacy-page-container .section, .terms-page-container .section {
    padding-top: 0; /* Remove section's default top padding as container handles it */
}
.privacy-page-container h1, .terms-page-container h1 {
    margin-bottom: var(--spacing-lg);
}
.privacy-page-container h2, .terms-page-container h2 {
    margin-top: var(--spacing-lg);
    margin-bottom: var(--spacing-sm);
    color: var(--color-primary);
}

/* 8.4. Success Page */
.success-page-container {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--spacing-lg);
    padding-top: 80px; /* Account for fixed header */
}
.success-page-container .success-content {
    background-color: var(--color-background-section-light);
    padding: var(--spacing-xxl);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-deep);
    max-width: 600px;
}
.success-page-container .icon.is-large .fa-check-circle { /* Assuming Font Awesome icon */
    font-size: 4rem;
    color: #48c774; /* Bulma success color */
    margin-bottom: var(--spacing-lg);
}


/* 9. ANIMATIONS & TRANSITIONS */

/* 9.1. Microanimations already part of hover states */

/* 9.2. Animated Icons (example for HTML's animated-icon-jump) */
.animated-icon-jump i {
    display: inline-block;
    animation: jump 0.5s ease-in-out infinite alternate;
}
@keyframes jump {
    0% { transform: translateY(0); }
    100% { transform: translateY(-3px); }
}

/* Smooth page transitions */
body.page-transition-fade-out {
    opacity: 0;
}

/* 10. RESPONSIVE DESIGN OVERRIDES */
@media screen and (max-width: 768px) {
    .title.is-1 { font-size: 2.5rem; }
    .title.is-2 { font-size: 2rem; }
    .title.is-3 { font-size: 1.75rem; }

    main {
        padding-top: 52px; /* If navbar height is smaller on mobile */
    }
    .navbar, .header .navbar-burger {
        min-height: 52px;
        height: 52px;
        width: 52px;
    }
     .navbar-brand .navbar-item.logo-text {
        font-size: 1.5rem;
    }

    #hero .hero-text-overlay {
        padding: var(--spacing-lg);
    }
    #hero .title.is-1 { font-size: 2.2rem; }
    #hero .subtitle.is-3 { font-size: 1.3rem; }

    .columns.is-multiline .column { /* Ensure cards stack nicely */
        margin-bottom: var(--spacing-lg);
    }
    .columns.is-multiline .column:last-child {
        margin-bottom: 0;
    }
    
    .contact-info-sidebar {
        margin-bottom: var(--spacing-xl);
        text-align: center;
    }
}

/* Cookie consent specific styling (already inline in HTML, but can be enhanced here if needed) */
#cookieConsentPopup {
    /* HTML provides base styling, this is for overrides or consistency check */
    font-family: var(--font-secondary); /* Ensure consistent font */
}
#cookieConsentPopup #acceptCookieButton {
    background-color: var(--color-primary); /* Match theme button */
    font-family: var(--font-primary);
}
#cookieConsentPopup #acceptCookieButton:hover {
    background-color: var(--color-primary-dark);
}