/* style.css */

/*------------------------------------------------------------------
[TABLE OF CONTENTS]

1.  ROOT VARIABLES
2.  GLOBAL STYLES & TYPOGRAPHY
3.  BULMA OVERRIDES & CUSTOMIZATIONS
4.  UTILITY CLASSES
5.  HEADER & NAVIGATION
6.  HERO SECTION
7.  GENERAL SECTION STYLING
8.  SERVICES SECTION
9.  INNOVATION SECTION
10. TEAM SECTION
11. GALLERY SECTION
12. SUCCESS STORIES SECTION
13. MEDIA SECTION
14. BLOG SECTION
15. EXTERNAL RESOURCES SECTION
16. CONTACT SECTION
17. FOOTER
18. SPECIFIC PAGE STYLES (Success, Privacy, Terms)
19. ANIMATIONS & EFFECTS
20. RESPONSIVE DESIGN
-------------------------------------------------------------------*/

/* 1. ROOT VARIABLES */
:root {
    --primary-color: #0D1B2A; /* Prussian Blue - stability, depth */
    --secondary-color: #FCA311; /* Bright Orange/Yellow - energy, accent (like the button in HTML) */
    --accent-color-1: #00A896; /* Persian Green - growth, Brazil's nature */
    --accent-color-2: #D62828; /* Imperial Red - strong CTA, sparingly */

    --text-light: #FFFFFF;
    --text-dark: #4A4A4A; /* Bulma's default text color, good for readability */
    --text-dark-strong: #363636; /* Bulma's strong text color */
    --text-heading: #222222; /* Darker for titles as requested */
    --text-muted: #7A7A7A;

    --background-light: #F9FAFB; /* Very light gray / Off-white */
    --background-medium: #F3F4F6; /* Slightly darker light gray for section alternation */
    --background-dark: var(--primary-color);

    --card-background: var(--text-light);
    --border-color: #DBDBDB; /* Bulma's default border */
    --border-color-light: #E5E7EB;

    --font-family-heading: 'Playfair Display', serif;
    --font-family-body: 'Source Sans Pro', sans-serif;

    --border-radius-small: 4px;
    --border-radius-medium: 8px;
    --border-radius-large: 16px;

    --shadow-small: 0 2px 4px rgba(0, 0, 0, 0.05);
    --shadow-medium: 0 4px 12px rgba(0, 0, 0, 0.1);
    --shadow-large: 0 10px 30px rgba(0, 0, 0, 0.1);

    --transition-fast: 0.2s ease-in-out;
    --transition-medium: 0.3s ease-in-out;

    --container-max-width: 1152px; /* Bulma's $desktop */
    --container-offset: 2rem; /* Bulma's $gap / 2 */
}

/* 2. GLOBAL STYLES & TYPOGRAPHY */
html {
    scroll-behavior: smooth;
    background-color: var(--background-light);
    font-size: 16px; /* Base font size */
}

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

.main-container {
    overflow: hidden; /* Helps contain child elements, useful for animations */
}

h1, h2, h3, h4, h5, h6,
.title, .subtitle {
    font-family: var(--font-family-heading);
    color: var(--text-heading);
    font-weight: 700; /* Playfair Display often needs bold */
}

.title {
    font-weight: 900; /* Extra bold for main titles */
}

h1, .is-1.title { font-size: 3rem; margin-bottom: 1rem; }
h2, .is-2.title { font-size: 2.5rem; margin-bottom: 0.75rem; }
h3, .is-3.title { font-size: 2rem; margin-bottom: 0.5rem; }
h4, .is-4.title { font-size: 1.5rem; }
h5, .is-5.title { font-size: 1.25rem; }
h6, .is-6.title { font-size: 1rem; }

p, .content {
    font-family: var(--font-family-body);
    color: var(--text-dark);
    margin-bottom: 1rem;
}

.content p:last-child,
.content ul:last-child,
.content ol:last-child {
    margin-bottom: 0;
}

.content strong {
    color: var(--text-dark-strong);
    font-weight: 600;
}

a {
    color: var(--secondary-color);
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--primary-color); /* Darken for hover */
}

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

/* 3. BULMA OVERRIDES & CUSTOMIZATIONS */
.button {
    font-family: var(--font-family-body);
    font-weight: 600;
    border-radius: var(--border-radius-small);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
    padding: 0.75em 1.5em; /* Slightly larger padding */
    letter-spacing: 0.5px;
}

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

.button.is-primary {
    background-color: var(--secondary-color); /* Using secondary as primary button color as per HTML example */
    color: var(--primary-color); /* Dark text on bright button */
    border-color: transparent;
}

.button.is-primary:hover {
    background-color: #e09300; /* Darker shade of secondary */
    color: var(--primary-color);
}
.button.is-primary.is-large.cta-button {
    font-size: 1.1rem;
    padding: 1em 2em;
}

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

.input, .textarea {
    font-family: var(--font-family-body);
    border-radius: var(--border-radius-small);
    border-color: var(--border-color);
    box-shadow: var(--shadow-small);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.input:focus, .textarea:focus,
.input.is-focused, .textarea.is-focused,
.input:active, .textarea:active,
.input.is-active, .textarea.is-active {
    border-color: var(--secondary-color);
    box-shadow: 0 0 0 0.125em rgba(252, 163, 17, 0.25); /* secondary color with alpha */
}

.label {
    font-family: var(--font-family-body);
    font-weight: 600;
    color: var(--text-dark-strong);
}

.card {
    background-color: var(--card-background);
    border-radius: var(--border-radius-medium);
    box-shadow: var(--shadow-medium);
    transition: transform var(--transition-medium), box-shadow var(--transition-medium);
    display: flex;
    flex-direction: column;
    height: 100%; /* Make cards in a row same height */
}

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

.card .card-content {
    flex-grow: 1; /* Ensure content area expands, pushing actions to bottom if any */
    padding: 1.5rem; /* Standard padding for cards */
}

.card .card-image .image-container { /* This applies to the figure element with .image-container */
    height: 220px; /* Fixed height for card image containers */
    overflow: hidden;
    border-top-left-radius: var(--border-radius-medium);
    border-top-right-radius: var(--border-radius-medium);
}
.card .card-image .image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    border-top-left-radius: var(--border-radius-medium); /* Match card radius if image is flush */
    border-top-right-radius: var(--border-radius-medium);
}

/* Specific card image container adjustments if needed for 1by1, 16by9 */
.card .card-image .image-container.is-1by1 {
    height: auto; /* Let Bulma's aspect ratio work for square */
    padding-top: 100%; /* Bulma's method for 1by1 */
    position: relative;
}
.card .card-image .image-container.is-1by1 img {
    position: absolute;
    top: 0;
    left: 0;
}

.card .card-image .image-container.is-16by9 {
  height: auto; /*Let Bulma's ratio*/
  padding-top: 56.25%; /* 9/16 for 16:9 */
  position:relative;
}
.card .card-image .image-container.is-16by9 img {
  position: absolute;
  top:0;
  left:0;
}


/* General card centering for content and images if not handled by structure */
.card-content .media-content, .card-content .content {
    text-align: left; /* Default text align */
}
.card .has-text-centered .content, .card .has-text-centered .title, .card .has-text-centered .subtitle {
    text-align: center;
}
/* If an image is directly in card-content and needs centering */
.card-content > figure.image, .card-content > .image-container:not(.card-image .image-container) {
    margin-left: auto;
    margin-right: auto;
    display: block; /* for margin auto to work */
}


.progress {
    height: 0.75rem;
    border-radius: var(--border-radius-small);
}
.progress.is-primary::-webkit-progress-value {
    background-color: var(--accent-color-1);
}
.progress.is-primary::-moz-progress-bar {
    background-color: var(--accent-color-1);
}
.progress.is-primary::-ms-fill {
    background-color: var(--accent-color-1);
}

/* 4. UTILITY CLASSES */
.section-title {
    color: var(--text-heading);
    margin-bottom: 1rem !important; /* Title usually has margin, but this standardizes it */
    position: relative;
    padding-bottom: 0.5rem;
}
/* Subtle underline effect for section titles */
.section-title::after {
    content: '';
    display: block;
    width: 80px;
    height: 3px;
    background-color: var(--secondary-color);
    margin: 0.75rem auto 0; /* Center the underline */
}

.section-subtitle {
    color: var(--text-muted);
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 3rem !important; /* Space after subtitle */
}

.has-text-shadow {
  text-shadow: 1px 1px 3px rgba(0,0,0,0.3);
}

.has-background-light-gray {
    background-color: var(--background-medium);
}


/* 5. HEADER & NAVIGATION */
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background-color: rgba(255, 255, 255, 0.9); /* Slight transparency */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: var(--shadow-small);
    transition: background-color var(--transition-medium);
}
.header.is-scrolled { /* Add this class with JS on scroll */
    background-color: var(--text-light);
    box-shadow: var(--shadow-medium);
}

.navbar-item, .navbar-link {
    font-family: var(--font-family-body);
    font-weight: 600;
    color: var(--text-dark-strong);
    padding: 0.75rem 1rem;
}
.navbar-item:hover, .navbar-link:hover,
.navbar-item.is-active, .navbar-link.is-active {
    background-color: transparent;
    color: var(--secondary-color);
}
.navbar-item img {
    max-height: 2.5rem; /* Control logo height */
}

.navbar-burger {
    color: var(--text-dark-strong);
}
.navbar-burger:hover {
    background-color: rgba(0,0,0,0.05);
}

@media screen and (max-width: 1023px) {
    .navbar-menu {
        background-color: var(--text-light);
        box-shadow: 0 8px 16px rgba(10,10,10,.1);
        padding: 0.5rem 0;
        border-bottom-left-radius: var(--border-radius-small);
        border-bottom-right-radius: var(--border-radius-small);
    }
    .navbar-menu.is-active {
        display: block; /* Bulma handles this */
    }
}


/* 6. HERO SECTION */
.section-hero {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    position: relative; /* For overlay and particles */
    color: var(--text-light); /* Default text color for hero */
}

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

#particles-js-hero {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
}

.hero .hero-body {
    position: relative;
    z-index: 3;
    padding-top: 10rem; /* Adjust if header is tall */
    padding-bottom: 5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.hero-title {
    color: var(--text-light);
    font-size: 3.5rem; /* Larger for hero */
    text-shadow: 2px 2px 8px rgba(0,0,0,0.6);
}
.hero-subtitle {
    color: var(--text-light);
    opacity: 0.9;
    font-size: 1.25rem;
    margin-bottom: 2rem;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

/* 7. GENERAL SECTION STYLING */
.section {
    padding: 4rem 1.5rem; /* Default section padding */
}

/* 8. SERVICES SECTION */
.services-section .service-card .media-left .icon {
    font-size: 2rem; /* Placeholder for icon size */
    color: var(--accent-color-1);
}
.services-section .service-card .card-title {
    margin-bottom: 0.5rem;
    color: var(--text-heading);
}
.services-section .service-card .content {
    font-size: 0.95rem;
    color: var(--text-muted);
}
.services-section .service-card .service-progress {
    margin-top: 1rem;
}


/* 9. INOVATION SECTION */
.innovation-section {
    background-color: var(--background-medium); /* Alternate background */
}
.innovation-section img {
    border-radius: var(--border-radius-medium);
    box-shadow: var(--shadow-large);
}

/* 10. TEAM SECTION */
.team-section .team-card .card-image img.is-rounded {
    border: 4px solid var(--text-light);
    box-shadow: var(--shadow-medium);
}
.team-section .team-card .card-content {
    text-align: center;
}
.team-section .team-card .title.card-title {
    margin-bottom: 0.25rem;
}
.team-section .team-card .subtitle {
    color: var(--secondary-color);
    font-weight: 600;
    margin-bottom: 0.75rem;
}


/* 11. GALLERY SECTION */
.gallery-section {
    background-color: var(--background-medium);
}
.gallery-section .gallery-image img {
    border-radius: var(--border-radius-medium);
    transition: transform var(--transition-medium), box-shadow var(--transition-medium);
}
.gallery-section .gallery-image img:hover {
    transform: scale(1.05);
    box-shadow: var(--shadow-large);
}

/* 12. SUCCESS STORIES SECTION */
.success-stories-section .success-story-card .card-image {
    border-top-left-radius: var(--border-radius-medium);
    border-top-right-radius: var(--border-radius-medium);
    overflow: hidden; /* Ensure image respects border radius */
}
.success-stories-section .success-story-card .card-image img {
   border-top-left-radius: 0; /* Reset if container handles radius */
   border-top-right-radius: 0;
}
.success-stories-section .card-title {
    font-style: italic;
    color: var(--primary-color);
}
.success-stories-section .subtitle strong {
    color: var(--text-dark-strong);
}

/* 13. MEDIA SECTION */
.media-section {
    background-color: var(--background-medium);
}
.media-section .media-logos img {
    max-height: 50px; /* As in HTML */
    width: auto;
    filter: grayscale(100%);
    opacity: 0.7;
    transition: filter var(--transition-medium), opacity var(--transition-medium);
    margin: 1rem;
}
.media-section .media-logos img:hover {
    filter: grayscale(0%);
    opacity: 1;
}
.media-section .Média-quote {
    margin-top: 2rem;
    font-style: italic;
    color: var(--text-muted);
}
.media-section .Média-quote p {
    color: var(--text-muted); /* Ensure p inside also has this color */
}

/* 14. BLOG SECTION */
.blog-section .blog-post-card .card-title {
    font-size: 1.3rem;
    line-height: 1.3;
}
.blog-section .blog-post-card .content.is-small { /* Date */
    color: var(--text-muted);
    margin-bottom: 0.5rem;
}
.blog-section .blog-post-card .button.is-link.is-outlined {
    margin-top: 1rem;
    font-weight: 600;
}


/* 15. EXTERNAL RESOURCES SECTION */
.external-resources-section {
    background-color: var(--background-medium);
}
.external-resources-section .resource-card .title.is-5 a {
    color: var(--primary-color);
    font-weight: 600;
}
.external-resources-section .resource-card .title.is-5 a:hover {
    color: var(--secondary-color);
}
.external-resources-section .resource-card .content.is-small {
    color: var(--text-muted);
}


/* 16. CONTACT SECTION */
.contact-section .map-placeholder img {
    border-radius: var(--border-radius-medium);
    box-shadow: var(--shadow-medium);
    width: 100%;
    height: 300px;
    object-fit: cover;
}
.contact-section .column strong {
    color: var(--text-dark-strong);
}
.contact-section .column p {
    margin-bottom: 0.5rem;
}


/* 17. FOOTER */
.site-footer {
    background-color: var(--primary-color);
    color: rgba(255, 255, 255, 0.8);
    padding: 3rem 1.5rem;
}
.site-footer .footer-title {
    color: var(--text-light);
    font-size: 1.2rem;
    margin-bottom: 1rem;
}
.site-footer p, .site-footer li {
    font-size: 0.95rem;
    margin-bottom: 0.5rem;
}
.site-footer .footer-link {
    color: rgba(255, 255, 255, 0.8);
    transition: color var(--transition-fast);
}
.site-footer .footer-link:hover {
    color: var(--secondary-color);
}
.site-footer .footer-copyright {
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.6);
}
/* Social media text links styling */
.site-footer .column ul li a, /* For list items */
.site-footer .column > p > a { /* For paragraph items */
    display: inline-block;
    padding: 0.25rem 0; /* Minimal padding for text links */
    text-decoration: none;
}
.site-footer .column > p > a:hover,
.site-footer .column ul li a:hover {
    text-decoration: underline;
}


/* 18. SPECIFIC PAGE STYLES */
/* success.html */
.page-success-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    text-align: center;
    padding: 2rem;
    background-color: var(--background-light);
}
.page-success-container .success-icon {
    font-size: 4rem;
    color: var(--accent-color-1);
    margin-bottom: 1rem;
}
.page-success-container .title {
    color: var(--text-heading);
}
.page-success-container .subtitle {
    color: var(--text-muted);
}
.page-success-container .button {
    margin-top: 1.5rem;
}

/* privacy.html & terms.html */
.page-legal .section { /* Assuming main content is in a .section */
    padding-top: calc(52px + 4rem); /* 52px is Bulma's default navbar height, 4rem is section padding */
                                    /* Adjust 52px if header height is different */
}
.page-legal h1, .page-legal .title.is-1 {
    margin-bottom: 2rem;
}
.page-legal h2, .page-legal .title.is-2 {
    margin-top: 2.5rem;
    margin-bottom: 1rem;
}
.page-legal .content p, .page-legal .content ul, .page-legal .content ol {
    margin-bottom: 1rem;
}


/* 19. ANIMATIONS & EFFECTS */
/* For GSAP reveal animations - initial states */
.reveal-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s var(--transition-medium), transform 0.6s var(--transition-medium);
}
.reveal-on-scroll.is-revealed { /* Class added by GSAP/ScrollTrigger */
    opacity: 1;
    transform: translateY(0);
}

/* Animated icons placeholder (if SVGs or CSS animations are used) */
.animated-icon {
    /* Basic styling, actual animation would be more complex */
    display: inline-block;
}

/* Parallax effect for background (simple version, GSAP can do more) */
.parallax-background {
    background-attachment: fixed; /* Note: this can have performance implications on mobile */
}


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

    .section {
        padding: 3rem 1rem;
    }
    .section-subtitle {
        margin-bottom: 2rem !important;
    }

    .hero .hero-body {
        padding-top: 8rem;
    }
    .hero-title {
        font-size: 2.8rem;
    }
    .hero-subtitle {
        font-size: 1.1rem;
    }

    .columns.is-reversed-mobile {
        flex-direction: column-reverse;
    }
    .footer .columns {
        text-align: center;
    }
    .footer .column {
        margin-bottom: 1.5rem;
    }
}

@media screen and (max-width: 480px) {
    h1, .is-1.title { font-size: 2rem; }
    h2, .is-2.title { font-size: 1.75rem; }
    h3, .is-3.title { font-size: 1.5rem; }

    .hero-title {
        font-size: 2.2rem;
    }
    .hero-subtitle {
        font-size: 1rem;
    }
    .button.is-primary.is-large.cta-button {
        font-size: 1rem;
        padding: 0.8em 1.5em;
    }
}