/* style.css */

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

1. ROOT VARIABLES
2. GLOBAL STYLES
3. UTILITY CLASSES
4. HEADER & NAVIGATION
5. HERO SECTION
6. GENERAL SECTION STYLING
7. CARD STYLES (GENERAL)
    - Methodology Cards
    - Portfolio Cards
    - Team Cards
    - Event Cards
    - Resource Cards
8. STATISTICS SECTION
9. PRESS SECTION
10. EXTERNAL RESOURCES SECTION
11. CONTACT FORM
12. FOOTER
13. SPECIFIC PAGE STYLES
    - Success Page
    - Privacy & Terms Pages
14. ANIMATIONS & TRANSITIONS (ScrollReveal initial states)
15. RESPONSIVE ADJUSTMENTS
-------------------------------------------------------------------*/

/* 1. ROOT VARIABLES */
:root {
    --primary-color: #B08D57; /* Muted Gold/Brown - Retro */
    --primary-color-darker: #937040;
    --accent-color: #C75000; /* Burnt Orange - Retro */
    --accent-color-darker: #A04000;
    --text-color: #3D352A; /* Dark Brown */
    --text-color-light: #FDFBF5; /* Light Beige for dark backgrounds */
    --text-color-medium: #5a4d3c;
    --background-color: #F5F5DC; /* Beige */
    --card-background-color: #FFF8E7; /* Lighter Beige/Cream */
    --footer-background-color: #4A4033; /* Dark Brown */
    --border-color: #DCD0BA; /* Muted border color */
    --neutral-light-gray: #EAE0C8;

    --font-primary: 'Playfair Display', serif;
    --font-secondary: 'Source Sans Pro', sans-serif;

    --border-radius: 8px;
    --shadow-light: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-medium: 0 5px 15px rgba(61, 53, 42, 0.15); /* Darker shadow for retro feel */
    --shadow-strong: 0 8px 25px rgba(61, 53, 42, 0.2);

    --transition-speed: 0.3s;
    --transition-effect: ease-in-out;
}

/* 2. GLOBAL STYLES */
body {
    font-family: var(--font-secondary);
    color: var(--text-color);
    background-color: var(--background-color);
    line-height: 1.7;
    font-size: 16px;
    overflow-x: hidden; /* Prevent horizontal scroll */
}

h1, h2, h3, h4, h5, h6, .title, .subtitle {
    font-family: var(--font-primary);
    color: var(--text-color);
    font-weight: 700;
    margin-bottom: 0.75em;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}

.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; }

p {
    margin-bottom: 1.25rem;
    color: var(--text-color-medium);
}

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

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

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

.container {
    max-width: 1140px; /* Bulma default is fine, can be adjusted */
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
}

/* Bulma overrides/enhancements */
.button {
    font-family: var(--font-secondary);
    font-weight: 600;
    border-radius: var(--border-radius);
    padding: 0.8em 1.8em;
    transition: all var(--transition-speed) var(--transition-effect), transform 0.1s ease-out;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 4px rgba(61, 53, 42, 0.1);
    border-width: 2px;
    border-style: solid;
}

.button:active {
    transform: translateY(2px) scale(0.98);
    box-shadow: 0 1px 2px rgba(61, 53, 42, 0.15);
}

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

.button.is-primary:hover {
    background-color: var(--primary-color-darker);
    border-color: var(--primary-color-darker);
    color: var(--text-color-light);
    transform: translateY(-2px);
    box-shadow: var(--shadow-medium);
}

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

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

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


.input, .textarea {
    font-family: var(--font-secondary);
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
    padding: 0.8em 1em;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.06);
    transition: border-color var(--transition-speed) var(--transition-effect), box-shadow var(--transition-speed) var(--transition-effect);
}

.input:focus, .textarea:focus,
.input.is-focused, .textarea.is-focused,
.input:active, .textarea:active,
.input.is-active, .textarea.is-active {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.125em rgba(176, 141, 87, 0.25); /* primary color with alpha */
}

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

.checkbox label, label.checkbox {
    color: var(--text-color-medium);
}
.checkbox input[type="checkbox"] + a {
    text-decoration: underline;
}


/* 3. UTILITY CLASSES */
.has-parallax-background {
    background-attachment: fixed; /* Simple parallax */
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

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

.has-text-primary {
    color: var(--primary-color) !important;
}

.has-text-white {
    color: #FFFFFF !important;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5); /* Ensure readability on light parts of images */
}
.has-text-white .title, .has-text-white .subtitle {
    color: #FFFFFF !important;
}

.section-title, .section-subtitle {
    text-shadow: none; /* Remove global shadow if local context is better without */
}
.section-title { color: var(--text-color); }
.section-subtitle { color: var(--text-color-medium); margin-bottom: 2.5rem; }


/* 4. HEADER & NAVIGATION */
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background-color: rgba(255, 248, 231, 0.85); /* --card-background-color with alpha */
    backdrop-filter: blur(8px);
    box-shadow: var(--shadow-light);
    transition: background-color var(--transition-speed) var(--transition-effect), box-shadow var(--transition-speed) var(--transition-effect);
}

.header.is-scrolled {
    background-color: rgba(245, 245, 220, 0.95); /* --background-color with alpha */
    box-shadow: var(--shadow-medium);
}

.navbar {
    min-height: 4.5rem; /* Increased height */
}

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

.navbar-item:hover, .navbar-link:hover,
.navbar-item.is-active, .navbar-link.is-active {
    background-color: var(--neutral-light-gray);
    color: var(--primary-color-darker);
}

.site-title.navbar-item {
    font-family: var(--font-primary);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-color-darker);
}
.site-title.navbar-item:hover {
    background-color: transparent;
    color: var(--accent-color);
}

.navbar-burger {
    color: var(--text-color);
    height: 4.5rem;
    width: 4.5rem;
}
.navbar-burger span {
    background-color: var(--text-color);
    height: 2px;
}

@media screen and (max-width: 1023px) {
    .navbar-menu {
        background-color: rgba(255, 248, 231, 0.98); /* --card-background-color with alpha */
        box-shadow: 0 8px 16px rgba(0,0,0,0.1);
        padding: 0.5rem 0;
    }
    .navbar-item {
        padding: 0.75rem 1.5rem;
    }
}


/* 5. HERO SECTION */
#hero {
    color: var(--text-color-light);
    position: relative;
}

#hero .hero-body {
    position: relative;
    z-index: 2;
    padding-top: 10rem; /* Adjust for fixed header */
    padding-bottom: 5rem;
}

.hero-title {
    font-size: 3.5rem;
    font-weight: 700;
    margin-bottom: 0.5em;
    color: #FFFFFF !important;
    text-shadow: 2px 2px 6px rgba(0,0,0,0.7);
}

.hero-subtitle {
    font-size: 1.5rem;
    margin-bottom: 2em;
    color: #FFFFFF !important;
    opacity: 0.9;
    text-shadow: 1px 1px 4px rgba(0,0,0,0.6);
}

.cta-button {
    transform: scale(1);
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
.cta-button:hover {
    transform: scale(1.05) translateY(-3px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}
.cta-button .icon svg {
    transition: transform 0.3s ease-in-out;
}
.cta-button:hover .icon svg {
    transform: rotate(90deg);
}

/* 6. GENERAL SECTION STYLING */
.section {
    padding: 4rem 1.5rem; /* Reduced padding for less empty space */
}
.section:nth-of-type(even) {
    /* background-color: var(--neutral-light-gray); */ /* Subtle alternating background */
}

/* 7. CARD STYLES (GENERAL) */
.card {
    background-color: var(--card-background-color);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-medium);
    transition: transform var(--transition-speed) var(--transition-effect), box-shadow var(--transition-speed) var(--transition-effect);
    overflow: hidden; /* Ensure content fits */
    height: 100%; /* For equal height cards in columns */
    display: flex;
    flex-direction: column;
    /* align-items: center;  This centers text content too. Better to center only image */
    /* text-align: center; */ /* This centers text content. Apply specifically if needed */
}

.card:hover {
    transform: translateY(-8px) perspective(1000px) rotateX(2deg) rotateY(-2deg);
    box-shadow: var(--shadow-strong);
}

.card .card-image, .card .image-container { /* .image-container for consistency */
    width: 100%;
    height: 220px; /* Fixed height for consistent card image sizes */
    overflow: hidden;
    position: relative; /* For potential overlays */
    margin-left: auto; /* Center the container if its parent is flex and allows it */
    margin-right: auto;
    display: flex; /* To center image if it's smaller than container */
    justify-content: center;
    align-items: center;
}

.card .card-image img, .card .image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures image covers the area, might crop */
    transition: transform 0.4s ease-out;
}
.card:hover .card-image img, .card:hover .image-container img {
    transform: scale(1.05);
}

.card .card-content {
    padding: 1.75rem;
    flex-grow: 1; /* Allows content to push footer down if card is flex column */
    text-align: left; /* Default text alignment for card content */
}
.card .card-content .title {
    margin-bottom: 0.5rem;
    color: var(--primary-color-darker);
}
.card .card-content .subtitle {
    margin-bottom: 1rem;
    color: var(--text-color-medium);
}
.card .card-content p {
    font-size: 0.95rem;
    line-height: 1.6;
}

/* Specific centering for cards that need it globally in their content */
.team-card .card-content, .methodology-card .card-content {
    text-align: center;
}

/* Methodology Cards */
.methodology-card {}

/* Portfolio Cards */
.portfolio-card {}

/* Team Cards */
.team-card .card-image, .team-card .image-container {
    height: 300px; /* Larger images for team */
    width: 100%; /* ensure it takes full width of column */
    max-width: 300px; /* if you want to cap the width */
    border-radius: 8px 8px 0 0; /* if card has rounded top for image */
    /* If image itself needs to be circular:
    img { border-radius: 50%; width: 150px; height: 150px; margin: 1.5rem auto; }
    Then image-container height should be auto or fit content.
    The current HTML implies rectangular images.
    */
}
.team-card .card-content {
    padding-top: 1rem;
}

/* Event Cards */
.event-item.card {
    margin-bottom: 1.5rem;
}
.event-item .card-content .title {
    color: var(--accent-color);
}
.event-item .card-content .subtitle {
    color: var(--text-color-medium);
    font-size: 0.9rem;
    margin-bottom: 0.75rem;
}

/* Resource Cards */
.resource-card {
    margin-bottom: 1rem;
    background-color: var(--background-color); /* Slightly different from other cards */
}
.resource-card .card-content .title a {
    color: var(--primary-color-darker);
}
.resource-card .card-content .title a:hover {
    color: var(--accent-color);
}
.resource-description {
    font-size: 0.9em;
    color: var(--text-color-medium);
}


/* 8. STATISTICS SECTION */
#statistics {
    color: var(--text-color-light);
    padding: 5rem 1.5rem;
}
#statistics .hero-background-overlay {
    background: linear-gradient(135deg, rgba(44, 62, 80, 0.85), rgba(61, 53, 42, 0.9)); /* Darker, more opaque */
}
#statistics .section-title, #statistics .section-subtitle {
    color: var(--text-color-light) !important; /* Override global color */
    text-shadow: 1px 1px 3px rgba(0,0,0,0.4);
}
.stat-item {
    padding: 1rem;
    transition: transform 0.3s ease;
}
.stat-item:hover {
    transform: scale(1.05);
}
.stat-number {
    font-family: var(--font-primary);
    font-size: 3.5rem;
    font-weight: 700;
    line-height: 1.1;
    display: block;
    margin-bottom: 0.25rem;
    color: var(--primary-color) !important; /* Accent for numbers */
    text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
}
.stat-label {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-color-light) !important;
    opacity: 0.9;
}

/* 9. PRESS SECTION */
#press .press-logos img {
    max-height: 40px; /* Consistent logo height */
    width: auto;
    margin: 1rem auto;
    filter: grayscale(50%) opacity(0.8);
    transition: filter var(--transition-speed) var(--transition-effect), transform var(--transition-speed) var(--transition-effect);
}
#press .press-logos img:hover {
    filter: grayscale(0%) opacity(1);
    transform: scale(1.1);
}
#press p {
    font-style: italic;
    color: var(--text-color-medium);
}
#press p strong {
    color: var(--text-color);
}

/* 10. EXTERNAL RESOURCES SECTION */
.external-links-list {
    list-style: none;
    padding-left: 0;
}
.external-links-list li {
    margin-bottom: 1rem;
}

/* 11. CONTACT FORM */
.contact-form {
    background-color: var(--card-background-color);
    padding: 2.5rem;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-strong);
}
.contact-form .field {
    margin-bottom: 1.5rem;
}
.contact-form .control.has-icons-left .icon {
    height: 2.85em; /* Align with is-medium input */
    width: 2.85em;
}
.contact-form .control.has-icons-left .icon svg {
    color: var(--text-color-medium);
}
.contact-form .button.submit-button {
    min-width: 200px;
}

/* 12. FOOTER */
.site-footer {
    background-color: var(--footer-background-color);
    color: var(--text-color-light);
    padding: 3rem 1.5rem 2rem;
}
.site-footer .title.footer-title {
    color: var(--text-color-light);
    margin-bottom: 1rem;
    font-size: 1.2rem;
    opacity: 0.9;
}
.site-footer p, .site-footer .footer-links li {
    color: var(--neutral-light-gray);
    font-size: 0.95rem;
    margin-bottom: 0.5rem;
}
.site-footer .footer-links {
    list-style: none;
    padding-left: 0;
}
.site-footer .footer-links a {
    color: var(--neutral-light-gray);
    transition: color var(--transition-speed) var(--transition-effect), padding-left var(--transition-speed) var(--transition-effect);
}
.site-footer .footer-links a:hover {
    color: var(--primary-color);
    padding-left: 5px;
    text-decoration: none;
}
.site-footer .social-media-links a {
    display: inline-block; /* For padding effect */
    margin-right: 10px; /* If needed, but list items handle spacing */
}

.site-footer .copyright {
    margin-top: 2rem;
    font-size: 0.85rem;
    color: var(--neutral-medium);
    opacity: 0.7;
}

/* 13. SPECIFIC PAGE STYLES */

/* Success Page */
body.success-page {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    text-align: center;
    padding: 2rem;
    background-color: var(--background-color); /* Ensure consistent bg */
}
.success-page .success-container {
    background-color: var(--card-background-color);
    padding: 3rem;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-strong);
    max-width: 600px;
}
.success-page .success-icon {
    font-size: 4rem;
    color: var(--primary-color);
    margin-bottom: 1.5rem;
}
.success-page h1 {
    color: var(--primary-color-darker);
}
.success-page p {
    color: var(--text-color-medium);
    font-size: 1.1rem;
}

/* Privacy & Terms Pages */
/* Using a general class for content pages */
.content-page .main-content-area { /* Assume you wrap content in this div on those pages */
    padding-top: 8rem; /* Header height + extra space */
    padding-bottom: 4rem;
    min-height: calc(100vh - 12rem); /* Approximate footer height */
}
.content-page .main-content-area h1,
.content-page .main-content-area h2 {
    margin-bottom: 1.5rem;
    color: var(--primary-color-darker);
}
.content-page .main-content-area h1 { font-size: 2.5rem; }
.content-page .main-content-area h2 { font-size: 2rem; }
.content-page .main-content-area p,
.content-page .main-content-area li {
    line-height: 1.8;
    margin-bottom: 1rem;
}
.content-page .main-content-area ul,
.content-page .main-content-area ol {
    margin-left: 1.5rem;
    margin-bottom: 1.5rem;
}

/* Cookie Consent Popup - Basic Styling from HTML, no extra CSS here to keep it minimal as per prompt */


/* 14. ANIMATIONS & TRANSITIONS (ScrollReveal initial states) */
/* These are initial states for ScrollReveal. JS will remove/add classes. */
/* The transition itself will be on the element it's applied to. */
.sr-bottom, .sr-left, .sr-right, .sr-top, .sr-pop, .sr-scale {
    visibility: hidden; /* Hide until ScrollReveal makes it visible */
}
/* Example of how you'd set up the transition on the revealed elements if needed,
   but ScrollReveal handles the animation if transitions are defined on the elements themselves */
.card, .stat-item, .press-logos img, .event-item, .resource-card, .contact-form {
    transition: opacity 0.6s var(--transition-effect), transform 0.6s var(--transition-effect), box-shadow 0.3s var(--transition-effect);
}


/* 15. RESPONSIVE ADJUSTMENTS */
@media screen and (max-width: 768px) {
    .hero-title {
        font-size: 2.5rem;
    }
    .hero-subtitle {
        font-size: 1.2rem;
    }
    .title.is-1 { font-size: 2.2rem; }
    .title.is-2 { font-size: 1.8rem; }

    .section {
        padding: 3rem 1rem;
    }

    #statistics .columns.is-multiline .column {
        flex-basis: 50%; /* Two items per row on tablets */
    }
    .stat-number {
        font-size: 2.5rem;
    }
    .stat-label {
        font-size: 0.9rem;
    }
    .contact-form {
        padding: 1.5rem;
    }

    .footer .columns {
        text-align: center;
    }
    .footer .column {
        margin-bottom: 1.5rem;
    }
}

@media screen and (max-width: 480px) {
    .hero-title {
        font-size: 2rem;
    }
    .hero-subtitle {
        font-size: 1rem;
    }
     #statistics .columns.is-multiline .column {
        flex-basis: 100%; /* One item per row on mobile */
    }
}