/* Componenti riutilizzabili del sito (bottoni, card, tab, slider...). */

:root {
    /* --- COLORS --- */

    /* Brand */
    --color-dark-green: #052c00; /* Herosection */
    --color-green: #56cc00; /* Primary button, chips, eyebrow, highlight text */
    --color-grey: #eaeaea; /* Hero */

    /* Primary */
    --color-night-green: #031e00; /* Text, dark background */
    --color-semi-white: #f7f7f7; /* Text, dark background */
    --color-white: #ffffff; /* Primary surface */

    /* Secondary */
    --color-grey-100: #afafaf; /* Disabled elements */
    --color-grey-200: #585858; /* Secondary text */
    --color-grey-300: #1f1f1f; /* TBD - da capire se serve */
    --color-black: #000000; /* Secondary elements */

    
    
    /* --- SPACING --- */

    /* Section */
    --space-section-gap: 96px; /* Element gap */
    --space-section-py: 112px; /* Top & bottom padding */
    --container-max: 1280px; /* larghezza massima del contenuto (Figma: 1440 - 2×80) */
    --space-section-px-min: 80px; /* Right & left padding minimo */
    /* Right & left padding: mai sotto il minimo, oltre i 1280px di contenuto si allarga per centrarlo */
    --space-section-px: max(var(--space-section-px-min), (100vw - var(--container-max)) / 2);

    /* Text */
    --space-eyebrow-text-gap: 40px;
    --space-big-small-text-gap: 32px;
    --space-text-image-gap: 40px;

    /* Components */
    --space-gap-lg: 24px;
    --space-gap-md: 16px;
    --space-gap-sm: 8px;
    --space-component-padding: 24px; /* All padding */

    /* Layout */
    --navbar-height: 80px;
}


/* --- COLOR UTILITIES --- */

/* Brand */
.co-dark-green { color: var(--color-dark-green); }
.co-green { color: var(--color-green); }
.co-grey { color: var(--color-grey); }

/* Primary */
.co-night-green { color: var(--color-night-green); }
.co-semi-white { color: var(--color-semi-white); }
.co-white { color: var(--color-white); }

/* Secondary */
.co-grey-100 { color: var(--color-grey-100); }
.co-grey-200 { color: var(--color-grey-200); }
.co-grey-300 { color: var(--color-grey-300); }
.co-black { color: var(--color-black); }



/* --- BUTTON --- */

.button-primary,
.button-secondary {
    display: inline-flex;
    padding: var(--space-gap-sm) var(--space-gap-lg);
    justify-content: center;
    align-items: center;
    gap: 4px;
    border: 1px solid transparent; /* stessa altezza del secondario */
    cursor: pointer;
}

.button-primary {
    background: var(--color-green);
    color: var(--color-dark-green);
}

.button-secondary {
    border-color: #d7ddd4; /* non presente nella palette */
}


/* --- NAVBAR --- */

/* Sticky su tutto il sito: si nasconde scrollando verso il basso e ricompare
   scrollando verso l'alto (classe navbar_hidden gestita da navbar.js) */
.navbar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    height: var(--navbar-height);
    padding: var(--space-component-padding) var(--space-section-px);
    align-items: center;
    gap: 32px;
    background: var(--color-white);
    transition: transform .3s ease;
}

.navbar_hidden {
    transform: translateY(-100%);
}

.navbar__link,
.navbar__utility-link,
.navbar__search,
.navbar__toggle {
    color: var(--color-night-green);
}

.navbar__logo {
    flex-shrink: 0;
}

/* Desktop: il contenitore del menu "sparisce" e i suoi figli stanno in riga nella navbar */
.navbar__menu {
    display: contents;
}

.navbar__links,
.navbar__utility,
.navbar__utility-link {
    display: flex;
    align-items: center;
}

.navbar__links {
    gap: 32px;
}

.navbar__utility {
    margin-left: auto;
    gap: var(--space-gap-lg);
}

.navbar__utility-link {
    gap: var(--space-gap-sm);
}

.navbar__search,
.navbar__toggle {
    display: flex;
    cursor: pointer;
}

.navbar__toggle {
    position: relative;
    display: none;
    width: 34px;
    height: 34px;
    margin-left: auto;
}

.navbar__overlay {
    display: none;
}


/* --- FOOTER --- */

.footer {
    display: flex;
    flex-direction: column;
    gap: var(--space-section-px-min);
    padding: var(--space-section-px-min) var(--space-section-px) var(--space-section-py);
    background: var(--color-night-green) url("../img/svg/pattern-oscartek.svg") center / 3200px auto repeat;
    color: var(--color-semi-white);
}

.footer__top {
    display: grid;
    grid-template-columns: 1.4fr repeat(5, 1fr);
    gap: var(--space-gap-lg);
}

.footer__logo {
    display: flex;
    align-self: start; 
}

.footer__column {
    display: flex;
    flex-direction: column;
    gap: var(--space-gap-md);
}

.footer__bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: var(--space-component-padding);
    border-top: 1px solid rgba(255, 255, 255, .15);
}

.footer__legal,
.footer__social {
    display: flex;
    align-items: center;
}

.footer__legal {
    gap: var(--space-gap-lg);
}

.footer__social {
    gap: var(--space-gap-md);
}

.footer__social-link {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 48px;
    height: 48px;
    border: 1px solid currentColor;
    border-radius: 50%;
}


/* --- PAGE NAV --- */

/* Menu interno alla pagina: resta in alto mentre si scorre */
.page-nav {
    position: sticky;
    top: var(--navbar-height); /* sotto la navbar quando e' visibile */
    z-index: 5;
    display: flex;
    align-items: center;
    gap: var(--space-gap-lg);
    padding: 0 var(--space-section-px);
    background: var(--color-semi-white);
    transition: top .3s ease;
}

.page-nav__title {
    flex-shrink: 0;
    color: var(--color-night-green);
}

.page-nav__list {
    display: flex;
    gap: 48px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
    overflow-x: auto;
    scrollbar-width: none;
}

.page-nav__link {
    position: relative;
    display: block;
    padding: var(--space-component-padding) 0;
    color: var(--color-grey-100);
    white-space: nowrap;
}

/* trattino sotto la voce */
.page-nav__link::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 16px;
    width: 32px;
    height: 1px;
    background: currentColor;
    transform: translateX(-50%);
}

.page-nav__link_active {
    color: var(--color-green);
}

/* navbar nascosta (scroll verso il basso): il menu sale in cima */
html:has(.navbar_hidden) .page-nav {
    top: 0;
}

/* le sezioni linkate non finiscono sotto il menu sticky */
:where(section[id]) {
    scroll-margin-top: 72px;
}


/* --- MATERIALS --- */

/* Testo a sinistra (bottone in fondo), campioni a destra */
.materials {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-section-gap);
    padding: var(--space-section-py) var(--space-section-px);
}

.materials__text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.materials__title {
    margin-top: var(--space-eyebrow-text-gap);
    color: var(--color-night-green);
}

.materials__description {
    margin-top: var(--space-gap-md);
    color: var(--color-night-green);
}

.materials__button {
    margin-top: auto; /* allineato in basso ai campioni */
}

.materials__swatches {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.materials__swatch {
    display: flex;
    flex-direction: column;
    gap: var(--space-gap-md);
}

.materials__image {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 10;
    object-fit: cover;
}

.materials__name {
    color: var(--color-grey-100);
}


/* --- MEDIA QUERIES --- */

/* Sotto i 1300px le voci non stanno in riga: hamburger + menu a tendina sotto la navbar */
@media (max-width: 1300px) {
    .navbar {
        /* curva con rallentamento finale, usata da tutte le animazioni del menu */
        --menu-ease: cubic-bezier(.22, 1, .36, 1);
        --menu-duration: .4s;
    }

    .navbar__toggle {
        display: block;
    }

    /* Icone hamburger e X sovrapposte: si scambiano ruotando e sfumando */
    .navbar__toggle-icon {
        position: absolute;
        inset: 0;
        transition: opacity var(--menu-duration) var(--menu-ease), transform var(--menu-duration) var(--menu-ease);
    }

    .navbar__toggle-icon_close {
        opacity: 0;
        transform: rotate(-90deg);
    }

    .navbar_open .navbar__toggle-icon_open {
        opacity: 0;
        transform: rotate(90deg);
    }

    .navbar_open .navbar__toggle-icon_close {
        opacity: 1;
        transform: none;
    }

    .navbar__menu {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 10;
        display: flex;
        flex-direction: column;
        gap: var(--space-section-gap);
        max-height: calc(100dvh - var(--navbar-height));
        overflow-y: auto;
        padding: var(--space-component-padding) var(--space-section-px) var(--space-section-px-min);
        border-bottom: 1px solid var(--color-grey-100);
        background: var(--color-white);
        visibility: hidden;
        clip-path: inset(0 0 100% 0);
        transition: clip-path var(--menu-duration) var(--menu-ease), visibility 0s linear var(--menu-duration);
    }

    .navbar_open .navbar__menu {
        visibility: visible;
        clip-path: inset(0);
        transition: clip-path var(--menu-duration) var(--menu-ease), visibility 0s;
    }

    .navbar__links,
    .navbar__utility {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-gap-lg);
        margin-left: 0;
    }

    .navbar__search {
        order: -1;
    }

    .navbar__menu [style*="--i"] {
        opacity: 0;
        transform: translateY(-8px);
        transition: opacity .2s ease, transform .2s ease;
    }

    .navbar_open .navbar__menu [style*="--i"] {
        opacity: 1;
        transform: none;
        transition: opacity var(--menu-duration) var(--menu-ease), transform var(--menu-duration) var(--menu-ease);
        transition-delay: calc(100ms + var(--i) * 40ms);
    }

    .navbar__overlay {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 9;
        display: block;
        height: 100dvh;
        background: rgba(3, 30, 0, .4); /* --color-night-green al 40% */
        opacity: 0;
        visibility: hidden;
        transition: opacity var(--menu-duration) var(--menu-ease), visibility 0s linear var(--menu-duration);
    }

    .navbar_open .navbar__overlay {
        opacity: 1;
        visibility: visible;
        transition: opacity var(--menu-duration) var(--menu-ease), visibility 0s;
    }

    html.has-menu-open {
        overflow: hidden;
    }
}

/* Tablet: logo sopra, le 5 colonne sotto */
@media (max-width: 1200px) {
    .footer__top {
        grid-template-columns: repeat(5, 1fr);
        row-gap: var(--space-section-px-min);
    }

    .footer__logo {
        grid-column: 1 / -1;
    }
}

/* TODO: spaziature tablet/mobile provvisorie, da confermare su Figma */
@media (max-width: 1024px) {
    :root {
        --space-section-gap: 64px;
        --space-section-py: 80px;
        --space-section-px-min: 40px;
    }

    /* Materials: testo sopra, campioni sotto */
    .materials {
        grid-template-columns: 1fr;
    }

    .materials__button {
        margin-top: var(--space-big-small-text-gap);
    }

    /* Page nav: niente titolo, le voci scorrono in orizzontale */
    .page-nav__title {
        display: none;
    }

    .page-nav__list {
        gap: 32px;
        margin: 0;
    }
}

@media (max-width: 768px) {
    :root {
        --space-section-gap: 48px;
        --space-section-py: 64px;
        --space-section-px-min: 20px;
    }

    /* Footer: colonne a 2 a 2, parte bassa in verticale */
    .footer__top {
        grid-template-columns: repeat(2, 1fr);
        row-gap: var(--space-section-gap);
    }

    .footer__bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-gap-lg);
    }

    .footer__legal {
        flex-wrap: wrap;
        gap: var(--space-gap-sm) var(--space-gap-lg);
    }

    /* Materials: campioni su 3 colonne, meno alti */
    .materials__swatches {
        grid-template-columns: repeat(3, 1fr);
        row-gap: var(--space-gap-lg);
    }

    .materials__image {
        aspect-ratio: 1 / 2;
    }

    /* Page nav: voci tutte visibili, una sotto l'altra.
       In verticale coprirebbe mezzo schermo: si nasconde scrollando verso il basso
       e ricompare scrollando verso l'alto (classe gestita da page-nav.js) */
    .page-nav {
        padding: var(--space-gap-md) var(--space-section-px);
        transition: top .3s ease, transform .3s ease;
    }

    .page-nav_hidden {
        transform: translateY(-100%);
    }

    .page-nav__list {
        flex-direction: column;
        gap: 0;
        overflow: visible;
    }

    .page-nav__link {
        padding: var(--space-gap-sm) 0 var(--space-gap-md);
    }

    .page-nav__link::after {
        left: 0;
        bottom: 8px;
        transform: none;
    }
}

/* Chi ha chiesto meno animazioni nel sistema operativo le vede senza movimento */
@media (prefers-reduced-motion: reduce) {
    .navbar,
    .navbar *,
    .navbar__menu,
    .navbar__overlay,
    .page-nav {
        transition-duration: 0s !important;
        transition-delay: 0s !important;
    }
}

/* --- LET'S TALK --- */

.lets-talk {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-gap-lg);
    padding: 120px var(--space-section-px);
    overflow: hidden;
    background: var(--color-semi-white);
    color: var(--color-night-green);
    text-align: center;
}

.lets-talk h2,
.lets-talk p {
    margin: 0;
}

.lets-talk p {
    max-width: 400px;
}

.lets-talk > * {
    position: relative;
}

.lets-talk__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-gap-sm);
    margin-top: 40px;
}

.lets-talk::before,
.lets-talk::after {
    content: "";
    position: absolute;
    top: auto;
    bottom: -316px;
    width: 597px;
    height: 687px;
    border-radius: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='598' height='687' viewBox='0 0 598 687' fill='none'%3E%3Cpath opacity='0.05' d='M597.461 686.736V429.962H554.545C467.421 429.962 444.412 395.986 409.769 315.105L398.135 287.142C352.892 179.502 277.143 0 42.9155 0H-0.000427246V256.774H42.9155C139.605 256.774 158.22 301.575 199.584 399.594C244.568 506.934 320.059 686.736 554.545 686.736H597.461Z' fill='%2356CC00'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
    pointer-events: none;
}

.lets-talk::after {
    right: -237px;
}

.lets-talk::before {
    left: -237px;
    transform: scaleX(-1);
}

@media (max-width: 768px) {
    .lets-talk {
        padding-block: var(--space-section-py);
    }

    .lets-talk::before,
    .lets-talk::after {
        display: none;
    }
}