/* style.css */

/* -------------------------------------------------------------------------- */
/*                               Root Variables                               */
/* -------------------------------------------------------------------------- */
:root {
    --font-primary: 'Poppins', sans-serif;
    --font-secondary: 'Work Sans', sans-serif;

    /* Neutral Color Scheme with Dynamic Accents */
    --color-text-primary: #363636; /* Bulma's default text, good dark gray */
    --color-text-secondary: #555555;
    --color-text-light: #FFFFFF;
    --color-text-headings: #222222; /* Darker for strong headings */
    --color-text-link: #3273DC; /* Bulma's default link blue */
    --color-text-link-hover: #275AA3; /* Darker blue for link hover */

    --color-primary: #48C78E; /* Bulma's primary green - a good dynamic accent */
    --color-primary-light: #F0FAF6; /* Lighter shade of primary for backgrounds */
    --color-primary-dark: #3BAA7A;
    --color-accent: #FFDD57;    /* Bulma's warning yellow - for subtle highlights */
    --color-accent-dark: #F5CC37;

    --color-background-body: #FDFDFD; /* Very light, almost white */
    --color-background-light: #F8F9FA; /* Light gray for alternate sections */
    --color-background-card: #FFFFFF;
    --color-background-footer: #333333;
    --color-text-footer: #CCCCCC;
    --color-text-footer-link-hover: #FFFFFF;


    --color-border: #DBDBDB; /* Bulma's default border */
    --color-border-darker: #CCCCCC;

    /* Gradients for dynamic transitions */
    --gradient-primary: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    --gradient-accent: linear-gradient(135deg, var(--color-accent), var(--color-accent-dark));
    --gradient-hero-overlay: linear-gradient(0deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.2) 100%);

    /* Shadows */
    --shadow-sm: 0 2px 5px rgba(0, 0, 0, 0.07);
    --shadow-md: 0 5px 15px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.12);

    /* Transitions & Animations */
    --transition-speed-fast: 0.2s;
    --transition-speed-normal: 0.3s;
    --transition-speed-slow: 0.5s;
    --transition-timing-function: ease-in-out;

    /* Border Radius */
    --border-radius-sm: 4px;
    --border-radius-md: 8px;
    --border-radius-lg: 12px;

    /* Spacing */
    --navbar-height: 52px; /* Bulma default, can be adjusted */
    --section-padding: 3rem 1.5rem; /* Bulma default section padding */
    --section-padding-large: 6rem 1.5rem;
}

/* -------------------------------------------------------------------------- */
/*                               Global Styles                                */
/* -------------------------------------------------------------------------- */
html {
    scroll-behavior: smooth;
    background-color: var(--color-background-body);
    font-size: 16px; /* Base font size */
}

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

.main-container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main {
    flex-grow: 1;
}

h1, h2, h3, h4, h5, h6,
.title, .subtitle {
    font-family: var(--font-primary);
    color: var(--color-text-headings);
    text-shadow: 1px 1px 3px rgba(0,0,0,0.1); /* Subtle shadow for better contrast on lighter backgrounds */
}

.title {
    font-weight: 700;
}
.subtitle {
    font-weight: 400;
    color: var(--color-text-secondary);
}

.section-title {
    margin-bottom: 1.5rem;
    color: var(--color-text-headings);
    font-weight: 700;
}
.section-title.is-2 {
    font-size: 2.5rem; /* Bulma's is-2 is 2.5rem */
}

.section-subtitle {
    margin-bottom: 3rem;
    color: var(--color-text-secondary);
    max-width: 700px; /* Constrain width of subtitles for readability */
    margin-left: auto;
    margin-right: auto;
}

a {
    color: var(--color-text-link);
    transition: color var(--transition-speed-fast) var(--transition-timing-function);
}
a:hover {
    color: var(--color-text-link-hover);
}

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

/* Ensure images within figures behave correctly */
figure.image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Crucial for consistent image display */
}

/* -------------------------------------------------------------------------- */
/*                                  Header/Nav                                */
/* -------------------------------------------------------------------------- */
.header {
    background-color: rgba(255, 255, 255, 0.9); /* Slightly transparent white */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: var(--shadow-sm);
    position: sticky;
    top: 0;
    z-index: 1000;
    width: 100%;
}

.navbar-item, .navbar-link {
    font-family: var(--font-secondary);
    font-weight: 500;
    font-size: 0.95rem;
    transition: color var(--transition-speed-fast) var(--transition-timing-function),
                background-color var(--transition-speed-fast) var(--transition-timing-function);
}

.navbar-item:hover, .navbar-item.is-active,
.navbar-link:hover, .navbar-link.is-active {
    background-color: var(--color-primary-light) !important;
    color: var(--color-primary-dark) !important;
}

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

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

.navbar-menu {
    background-color: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    box-shadow: var(--shadow-md);
}

@media screen and (max-width: 1023px) {
    .navbar-menu {
        padding: 0.5rem 0;
    }
    .navbar-menu.is-active {
        display: block; /* Ensure it's visible */
    }
    .navbar-item {
        padding: 0.75rem 1rem;
    }
}


/* -------------------------------------------------------------------------- */
/*                                Hero Section                                */
/* -------------------------------------------------------------------------- */
#hero {
    position: relative;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    color: var(--color-text-light);
}

#hero .hero-background-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--gradient-hero-overlay); /* Darker overlay for text readability */
    z-index: 1;
}

#hero .hero-body {
    position: relative;
    z-index: 2;
    padding: 6rem 1.5rem; /* Increased padding for impact */
}

#hero .hero-title {
    font-size: 3rem; /* Adjust based on Bulma */
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--color-text-light) !important; /* Ensure white text */
    text-shadow: 2px 2px 8px rgba(0,0,0,0.7);
}

#hero .hero-subtitle {
    font-size: 1.5rem; /* Adjust based on Bulma */
    margin-bottom: 2rem;
    color: var(--color-text-light) !important; /* Ensure white text */
    text-shadow: 1px 1px 6px rgba(0,0,0,0.6);
}

/* -------------------------------------------------------------------------- */
/*                              Global Button Styles                          */
/* -------------------------------------------------------------------------- */
.button, button, input[type="submit"], input[type="button"] {
    font-family: var(--font-secondary);
    font-weight: 600;
    border-radius: var(--border-radius-sm);
    transition: transform var(--transition-speed-fast) var(--transition-timing-function),
                box-shadow var(--transition-speed-fast) var(--transition-timing-function),
                background-color var(--transition-speed-normal) var(--transition-timing-function);
    text-shadow: none; /* Remove text shadow from buttons unless specifically added */
}

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

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

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

.animate-button { /* For specific animated buttons if needed */
    position: relative;
    overflow: hidden;
    z-index: 1;
}
.animate-button::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width var(--transition-speed-slow) var(--transition-timing-function), height var(--transition-speed-slow) var(--transition-timing-function);
    z-index: -1;
}
.animate-button:hover::before {
    width: 300px;
    height: 300px;
}

/* -------------------------------------------------------------------------- */
/*                                Card Styles                                 */
/* -------------------------------------------------------------------------- */
.card {
    background-color: var(--color-background-card);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-speed-normal) var(--transition-timing-function),
                box-shadow var(--transition-speed-normal) var(--transition-timing-function);
    display: flex;
    flex-direction: column;
    height: 100%; /* Ensure cards in a row have same height */
}

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

.card .card-image { /* Bulma's card-image */
    border-top-left-radius: var(--border-radius-md);
    border-top-right-radius: var(--border-radius-md);
    overflow: hidden; /* Ensures image respects border radius */
    display: flex; /* For centering the figure/img */
    justify-content: center; /* Center figure horizontally */
    align-items: center; /* Center figure vertically */
}

/* Ensure the figure itself takes up space correctly */
.card .card-image figure.image {
    width: 100%; /* Make figure take full width of card-image */
}

/* Specific image styling within cards */
.card .card-image figure.image img {
    border-top-left-radius: var(--border-radius-md);
    border-top-right-radius: var(--border-radius-md);
    object-fit: cover;
}

/* Specific heights for image containers in different card types if needed */
.project-card .card-image figure.is-4by3,
.event-card .card-image figure.is-3by2 {
    /* Bulma aspect ratio classes will handle height. Ensure img inside uses object-fit: cover */
}

.card .card-content {
    padding: 1.5rem;
    text-align: left; /* Default text align for content */
    flex-grow: 1; /* Allows content to fill space, pushing footer down if any */
    display: flex;
    flex-direction: column;
}
.card .card-content .title,
.card .card-content .subtitle {
    margin-bottom: 0.75rem;
    text-shadow: none; /* Remove global text-shadow for card titles for clarity */
}
.card .card-content .title.is-4, .card .card-content .title.is-5 {
    color: var(--color-text-headings);
}
.card .card-content .content {
    color: var(--color-text-secondary);
    font-size: 0.95rem;
    flex-grow: 1;
}

/* Testimonial Card Specifics */
.testimonial-card .media-left img {
    border-radius: 50%;
}
.testimonial-card .content {
    font-style: italic;
}

/* Resource Card Specifics */
.resource-card .card-content .title a {
    color: var(--color-text-link);
}
.resource-card .card-content .title a:hover {
    color: var(--color-text-link-hover);
    text-decoration: underline;
}

/* Project & Event Cards centering content if overall text align is center */
.project-card, .event-card {
    /* text-align: center; /* If you want all text in card content centered */
}
.project-card .card-content, .event-card .card-content {
     /* display: flex; flex-direction: column; align-items: center; text-align: center; */
}


/* -------------------------------------------------------------------------- */
/*                              Timeline Styles                               */
/* -------------------------------------------------------------------------- */
/* Enhancing Bulma's timeline if a timeline extension is used, or custom styles */
.timeline .timeline-item .timeline-marker.is-primary {
    background-color: var(--color-primary);
    border-color: var(--color-primary-dark);
}
.timeline .timeline-header .tag.is-primary {
    background-color: var(--color-primary);
    color: var(--color-text-light);
}
.timeline .timeline-content p {
    color: var(--color-text-secondary);
}
.timeline .timeline-content .heading {
    color: var(--color-text-primary);
    font-weight: 600;
}

/* -------------------------------------------------------------------------- */
/*                        Section Specific Styles                             */
/* -------------------------------------------------------------------------- */
#sustainability, #testimonials, #press {
    background-color: var(--color-background-light);
}

#clientele img {
    max-height: 75px;
    width: auto;
    margin: 1rem;
    filter: grayscale(100%);
    opacity: 0.7;
    transition: filter var(--transition-speed-normal) var(--transition-timing-function),
                opacity var(--transition-speed-normal) var(--transition-timing-function);
}
#clientele img:hover {
    filter: grayscale(0%);
    opacity: 1;
}

#press .box.press-mention {
    background-color: var(--color-background-card);
    border-radius: var(--border-radius-sm);
    box-shadow: var(--shadow-sm);
    padding: 1.5rem;
    margin-bottom: 1.5rem; /* Space between press mentions */
}
#press .box.press-mention .title.is-5 {
    margin-bottom: 0.5rem;
    color: var(--color-text-headings);
}
#press .box.press-mention p:not(.title) {
    color: var(--color-text-secondary);
    font-size: 0.95rem;
    margin-bottom: 1rem;
}
#press .box.press-mention .button.is-link.is-outlined.is-small {
    font-size: 0.8rem;
    padding: 0.5em 1em;
}

#contact-promo {
    background-color: var(--color-primary-light);
    padding: var(--section-padding-large);
}
#contact-promo .title, #contact-promo .subtitle {
    color: var(--color-text-headings);
}
#contact-promo .button.is-primary {
    margin-top: 1rem;
}


/* -------------------------------------------------------------------------- */
/*                                Form Styles                                 */
/* -------------------------------------------------------------------------- */
.input, .textarea, .select select {
    border-radius: var(--border-radius-sm);
    border-color: var(--color-border);
    box-shadow: var(--shadow-sm);
    transition: border-color var(--transition-speed-fast) var(--transition-timing-function),
                box-shadow var(--transition-speed-fast) var(--transition-timing-function);
}
.input:focus, .textarea:focus, .select select:focus,
.input.is-focused, .textarea.is-focused, .select select.is-focused,
.input:active, .textarea:active, .select select:active,
.input.is-active, .textarea.is-active, .select select.is-active {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 0.125em rgba(var(--color-primary), 0.25); /* Using Bulma's focus style but with primary color */
}
.label {
    color: var(--color-text-headings);
    font-weight: 600;
}

/* -------------------------------------------------------------------------- */
/*                                   Footer                                   */
/* -------------------------------------------------------------------------- */
.footer {
    background-color: var(--color-background-footer);
    color: var(--color-text-footer);
    padding: 3rem 1.5rem 3rem; /* Adjusted padding */
}

.footer .title.is-5.footer-title {
    color: var(--color-text-light);
    margin-bottom: 1rem;
    font-weight: 600;
}

.footer p, .footer ul {
    font-size: 0.9rem;
    line-height: 1.7;
}

.footer a {
    color: var(--color-text-footer);
    transition: color var(--transition-speed-fast) var(--transition-timing-function);
}
.footer a:hover {
    color: var(--color-text-footer-link-hover);
    text-decoration: underline;
}

.footer .content p { /* For copyright text */
    color: var(--color-text-footer);
}

.footer .columns {
    margin-bottom: 1.5rem;
}

.footer hr {
    background-color: #444444; /* Darker hr for footer */
    height: 1px;
    margin: 2rem 0;
}

/* Footer social media links (text-based styling) */
.footer .column ul li a[target="_blank"] { /* Basic styling for text-based social links */
    display: inline-block;
    padding: 0.25rem 0; /* Minimal padding */
}
.footer .column ul li a[target="_blank"]:hover {
    /* Color already handled by general footer link hover */
}

/* -------------------------------------------------------------------------- */
/*                        Specific Page Styles                              */
/* -------------------------------------------------------------------------- */

/* Privacy & Terms pages */
.privacy-content-page,
.terms-content-page {
    padding-top: calc(var(--navbar-height) + 2rem); /* 52px + 2rem, ensure content below fixed header */
    padding-bottom: 3rem;
}
.privacy-content-page .container .content h1,
.terms-content-page .container .content h1 {
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
}
.privacy-content-page .container .content h2,
.terms-content-page .container .content h2 {
    font-size: 1.75rem;
    margin-top: 2rem;
    margin-bottom: 1rem;
}
.privacy-content-page .container .content p, .privacy-content-page .container .content ul,
.terms-content-page .container .content p, .terms-content-page .container .content ul {
    color: var(--color-text-secondary);
    margin-bottom: 1rem;
    line-height: 1.7;
}

/* Success Page */
.success-page-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: calc(100vh - var(--navbar-height) - 170px); /* 170px approx footer height */
    text-align: center;
    padding: 2rem;
}
.success-page-container .icon.is-large .fa-check-circle { /* If using FontAwesome */
    font-size: 4rem;
    color: var(--color-primary);
}
.success-page-container .title {
    color: var(--color-text-headings);
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
}
.success-page-container .subtitle {
    color: var(--color-text-secondary);
    margin-bottom: 2rem;
}

/* About Page Example Styles */
.about-page-section {
    padding: var(--section-padding);
}
.about-page-section .content {
    max-width: 800px;
    margin: 0 auto;
}
.about-page-section img.is-rounded {
    box-shadow: var(--shadow-lg);
}


/* -------------------------------------------------------------------------- */
/*                            Scroll Animations                             */
/* -------------------------------------------------------------------------- */
.scroll-animate {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity var(--transition-speed-slow) var(--transition-timing-function),
                transform var(--transition-speed-slow) var(--transition-timing-function);
}

.scroll-animate.is-visible {
    opacity: 1;
    transform: translateY(0);
}


/* -------------------------------------------------------------------------- */
/*                            Responsiveness                                  */
/* -------------------------------------------------------------------------- */
@media screen and (max-width: 768px) {
    .section-title.is-2 {
        font-size: 2rem;
    }
    #hero .hero-title {
        font-size: 2.25rem;
    }
    #hero .hero-subtitle {
        font-size: 1.25rem;
    }
    .footer .columns .column {
        margin-bottom: 1.5rem; /* Space out footer columns on mobile */
    }
    .footer .content.has-text-centered { /* Ensure copyright is centered on mobile */
        text-align: center !important;
    }
}