/* ============================================ */
/* Color variables */

:root {
    --color-primary: rgb(47, 74, 46);
    --color-primary-dark: rgb(36, 58, 35);
    --color-accent: rgb(196, 122, 44);
    --color-accent-light: rgb(226, 164, 94);
    --color-bg-main: rgb(243, 233, 198);
    --color-bg-soft: rgb(250, 245, 228);
    --color-text-main: rgb(30, 42, 30);
    --color-text-light: rgb(247, 240, 214);
    --color-border: rgb(212, 200, 158);
}

.dark_background {
    background-color: rgba(47, 74, 46, 0.9) !important;
}

.light_background{
    background-color: rgba(196, 122, 44, 0.9) !important;
}

.text_shadow {
    text-shadow: 0 5px 10px rgba(0, 0, 0, 0.9);
}

/* ============================================ */
/* Reset & base styles */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
}

body {
    font-family: 'Montserrat', sans-serif;
    min-height: 100vh;
    color: var(--color-text-light);
}

/* ============================================ */
/* Layout */

main {
    padding-top: 70px;
}

#main-home {
    background:
        linear-gradient(to right, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.9)),
        url("../img/hero-image-1.webp") left bottom / cover no-repeat fixed;
}   

/* ============================================ */
/* Navbar */

.active {
    border-bottom: 1px solid var(--color-primary);
}

/* ============================================ */
/* Buttons */

.btn-styles,
.btn-styles-reverse {
    border: 2px solid whitesmoke !important;
    border-radius: 0;
}

.btn-styles {
    background-color: var(--color-accent) !important;
    color: var(--color-text-light) !important;
}

.btn-styles-reverse {
    background-color: var(--color-primary) !important;
    color: var(--color-text-light) !important;

}

.btn-styles:hover,
.btn-styles-reverse:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

/* ============================================ */
/* Hero text */

.hero h1 {
    color: whitesmoke;
    margin-bottom: 20px;
    font-size: 2.5rem;
    font-weight: 600;
}

.hero p {
    color: whitesmoke;
    font-size: 1.1rem;
    margin-bottom: 20px;

    font-weight: 500;
}

/* ============================================ */
/* Sections Styles */

/* Section 1 */
#section-1-index {
    min-height: 80vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 40px;
}

/* Section 2 */
/* Accordion styles */

/* Shared accordion base */
.accordion-button-1,
.accordion-button-2 {
    background-color: var(--color-bg-soft);
    color: var(--color-text-main);
    box-shadow: none;
}

.accordion-body-1,
.accordion-body-2 {
    background-color: var(--color-bg-soft);
    box-shadow: none;
}

/* Accordion active states */
.accordion-button-1:not(.collapsed) {
    background-color: var(--color-accent);
    color: var(--color-text-light);
    box-shadow: none;
}

.accordion-button-1:is(.collapsed),
.accordion-button-2:is(.collapsed) {
    box-shadow: none;
}

.accordion-button-2:not(.collapsed) {
    background-color: var(--color-primary);
    color: var(--color-text-light);
    box-shadow: none;
}

/* ============================================ */
/* Section 3 */
/* Cards (cleaned & unified) */

.card,
.card * {
    border: none;
    background-color: transparent;
}


/* Fixed size card */
.card-fixedSize {
    width: 15rem;
    height: 15rem;
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        background-color 0.3s ease;
}

/* Responsive icon */
.card-icon {
    font-size: clamp(3rem, 5vw, 5rem);
    padding: 0.8rem;
    transition: transform 0.3s ease, color 0.3s ease;
}

.card-icon-tree {
    color: rgb(47, 74, 46);
 }

.card-icon-sun {
    color: rgb(226, 164, 94);
 }

.card-icon-fire {
    color: rgb(249, 120, 29);
 }

/* Card text */
.card-body-index {
    color: var(--color-text-light);
    font-size: small;
}

/* Hover effect */
.card-fixedSize:hover {
    transform: translateY(-8px);
}

.card-fixedSize:hover .card-icon {
    transform: scale(1.1);
}

/* ============================================ */
/* Footer */

.site-footer {
    text-align: center;
    padding: 1.5rem;
    font-size: 0.875rem;
    background-color: rgba(243, 233, 198, 0.85);
}

footer p {
    color: var(--color-text-main);
}

#social-networks {
    display: flex;
    justify-content: center;
    gap: 20px;
    list-style: none;
    padding: 0;
}

#social-networks a {
    color: var(--color-primary-dark);
    font-size: 1.5rem;
}

#image-homepage {
    width: 350px;
    height: auto;
    border-radius: 20px;
}

/* ============================================ */
/* Modal */
.modal-content {
    color: whitesmoke;
}

/* ============================================ */
/* Back to top button */

.back-to-top {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 999;

    width: 48px;
    height: 48px;

    display: flex;
    align-items: center;
    justify-content: center;

    background-color: rgba(196, 122, 44, 0.5);
    color: var(--color-text-light);
    text-decoration: none;

    font-size: 1.5rem;
    font-weight: bold;
    border-radius: 50%;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
}

/* ============================================ */
/* Media queries for responsiveness */

@media (max-width: 576px) {
    .hero p {
        color: whitesmoke;
        font-size: 0.9rem;
        margin-bottom: 20px;
    }

    .back-to-top {
        width: 42px;
        height: 42px;
        font-size: 1.25rem;
        bottom: 1rem;
        right: 1rem;
    }
}

@media (max-width: 768px) {
    .section2,
    .section3 {
        width: 100%;
    }

    .section2 {
        margin-bottom: 20px;
    }

    .card-fixedSize {
        width: 10rem !important;
        height: 17rem !important;
        margin: 0;
        padding: 0;
    }   

    .card h3 {
        font-size: 1rem;
    }
}