/*
Theme Name: Hello Elementor Child
Description: Tema child per Carrella Floral Design
Template: hello-elementor
Version: 1.6.0
Text Domain: hello-elementor-child
*/

/*
 * DATA: 19/10/2026
 * MODIFICA: caricamento dei font Cormorant Garamond e Inter
 * MOTIVO: definire una tipografia editoriale coordinata
 * per l'intero sito Carrella Floral Design.
 */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600&family=Inter:wght@400;500;600&display=swap');


/* ==========================================
   1. DESIGN SYSTEM - VARIABILI
========================================== */

/*
 * DATA: 19/10/2026
 * MODIFICA: introduzione delle variabili CSS globali
 * MOTIVO: centralizzare palette, font, larghezze e spaziature.
 */

:root {
    --carrella-bg: #F8F7F4;
    --carrella-white: #FFFFFF;
    --carrella-text: #242320;
    --carrella-muted: #77736E;
    --carrella-accent: #B7A89B;

    --carrella-serif: 'Cormorant Garamond', Georgia, serif;
    --carrella-sans: 'Inter', Arial, sans-serif;

    --carrella-content-width: 1180px;
    --carrella-text-width: 760px;

    --carrella-section-space: 110px;
}


/* ==========================================
   2. HEADER E FOOTER ORIGINALI
========================================== */

/*
 * DATA: 19/10/2026
 * MODIFICA: disattivazione header e footer Hello Elementor
 * MOTIVO: utilizzare gli elementi personalizzati del child.
 */

#site-header,
#site-footer {
    display: none !important;
}


/* ==========================================
   3. HEADER PERSONALIZZATO
========================================== */

/*
 * DATA: 19/10/2026
 * MODIFICA: creazione header Carrella a tre colonne
 * MOTIVO: menu a sinistra, logo centrale e lingue a destra.
 */

.carrella-header {
    position: relative;
    z-index: 1001;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    width: 100%;
    min-height: 100px;
    padding: 24px 4%;
    background: #ffffff;
    color: #181818;
}

/*
 * DATA: 19/10/2026
 * MODIFICA: header trasparente sulla homepage
 * MOTIVO: sovrapporre la navigazione alla hero fotografica.
 */

body.home .carrella-header {
    position: absolute;
    top: 0;
    left: 0;
    background: transparent;
    color: #ffffff;
}


/* ==========================================
   4. LOGOTIPO TESTUALE
========================================== */

/*
 * DATA: 19/10/2026
 * MODIFICA: logotipo temporaneo CARRELLA
 * MOTIVO: mantenere una corretta identità visiva
 * in attesa del logo ufficiale.
 */

.carrella-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    color: inherit;
    text-decoration: none;
}

.carrella-brand:hover,
.carrella-brand:focus {
    color: inherit;
}

.carrella-brand-name {
    font-family: Georgia, serif;
    font-size: 35px;
    font-weight: 400;
    letter-spacing: .13em;
    line-height: 1;
}

.carrella-brand-subtitle {
    font-family: Arial, sans-serif;
    font-size: 9px;
    letter-spacing: .35em;
}


/* ==========================================
   5. MENU HAMBURGER
========================================== */

/*
 * DATA: 19/10/2026
 * MODIFICA: hamburger personalizzato con animazione
 * MOTIVO: navigazione minimale senza Elementor Pro.
 */

.carrella-menu-toggle {
    width: 36px;
    height: 32px;
    padding: 5px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 7px;
    background: transparent;
    border: 0;
    cursor: pointer;
    color: inherit;
}

.carrella-menu-toggle span {
    display: block;
    width: 26px;
    height: 1px;
    background: currentColor;
    transition: transform .3s ease;
}

.carrella-menu-toggle.is-active span:first-child {
    transform: translateY(4px) rotate(45deg);
}

.carrella-menu-toggle.is-active span:last-child {
    transform: translateY(-4px) rotate(-45deg);
}


/* ==========================================
   6. SELETTORE LINGUE
========================================== */

/*
 * DATA: 19/10/2026
 * MODIFICA: visualizzazione IT/EN nell'header
 * MOTIVO: navigazione multilingua tramite Polylang.
 */

.carrella-languages {
    justify-self: end;
    display: flex;
    gap: 15px;
    font-family: var(--carrella-sans);
    font-size: 12px;
    letter-spacing: .1em;
}

.carrella-languages a {
    text-decoration: none;
    color: inherit;
    opacity: .55;
}

.carrella-languages a[aria-current="page"] {
    opacity: 1;
}


/* ==========================================
   7. NAVIGAZIONE A SCHERMO INTERO
========================================== */

/*
 * DATA: 19/10/2026
 * MODIFICA: menu overlay a schermo intero
 * MOTIVO: riprodurre una navigazione editoriale
 * minimale, ispirata al riferimento creativo.
 */

.carrella-navigation {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f5f3ef;
    opacity: 0;
    visibility: hidden;
    transition:
        opacity .35s ease,
        visibility .35s ease;
}

.carrella-navigation.is-open {
    opacity: 1;
    visibility: visible;
}

body.carrella-menu-open {
    overflow: hidden;
}

body.carrella-menu-open .carrella-header {
    position: fixed;
    top: 0;
    left: 0;
    background: transparent;
    color: #181818;
}

.carrella-nav-list {
    padding: 0;
    margin: 0;
    list-style: none;
    text-align: center;
}

.carrella-nav-list li {
    margin: 12px 0;
}

.carrella-nav-list a {
    font-family: var(--carrella-serif);
    font-size: clamp(28px, 4vw, 55px);
    font-weight: 400;
    line-height: 1.25;
    text-decoration: none;
    color: var(--carrella-text);
    transition: opacity .25s ease;
}

.carrella-nav-list a:hover {
    opacity: .45;
}


/* ==========================================
   8. HERO SLIDESHOW
========================================== */

/*
 * DATA: 19/10/2026
 * MODIFICA: slideshow con ID carerlla-hero-slider
 * MOTIVO: gestire quattro widget Immagine Elementor
 * con dissolvenza automatica, senza Elementor Pro.
 *
 * ID CORRETTO: carrella-hero-slider
 */

/*
 * DATA: 19/10/2026
 * MODIFICA: altezza desktop fissata a 60svh
 * MOTIVO: ridurre l'ingombro verticale della hero.
 * Eliminati i precedenti conflitti tra height e min-height.
 */

body #carrella-hero-slider {
    position: relative !important;
    display: block !important;
    box-sizing: border-box !important;

    width: 100% !important;

    height: 60vh !important;
    height: 60svh !important;
    min-height: 0 !important;
    max-height: 60svh !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;
    isolation: isolate;
}

/*
 * DATA: 19/10/2026
 * MODIFICA: sovrapposizione dei widget Immagine
 * MOTIVO: consentire la transizione tra le fotografie
 * senza utilizzare caroselli o plugin aggiuntivi.
 */

#carrella-hero-slider > * {
    position: absolute !important;
    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;

    opacity: 0;
    animation: carrellaSlideshow 24s linear infinite;
}

/*
 * DATA: 19/10/2026
 * MODIFICA: uniformazione dei contenitori delle immagini
 * MOTIVO: garantire che le fotografie occupino tutta la hero.
 */

#carrella-hero-slider .elementor-widget-container,
#carrella-hero-slider picture,
#carrella-hero-slider figure {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
}

/*
 * DATA: 19/10/2026
 * MODIFICA: immagini con object-fit cover
 * MOTIVO: riempire lo slideshow mantenendo
 * le proporzioni originali delle fotografie.
 */

#carrella-hero-slider img {
    display: block !important;

    width: 100% !important;
    height: 100% !important;
    max-width: none !important;

    object-fit: cover !important;
    object-position: center center;
}

/*
 * DATA: 19/10/2026
 * MODIFICA: sequenza di quattro fotografie
 * MOTIVO: ciclo automatico di 24 secondi.
 */

#carrella-hero-slider > :nth-child(1) {
    animation-delay: 0s;
}

#carrella-hero-slider > :nth-child(2) {
    animation-delay: -18s;
}

#carrella-hero-slider > :nth-child(3) {
    animation-delay: -12s;
}

#carrella-hero-slider > :nth-child(4) {
    animation-delay: -6s;
}

/*
 * DATA: 19/10/2026
 * MODIFICA: animazione dissolvenza fotografica
 * MOTIVO: passaggio morbido tra le fotografie.
 */

@keyframes carrellaSlideshow {

    0% {
        opacity: 1;
    }

    20% {
        opacity: 1;
    }

    25% {
        opacity: 0;
    }

    95% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}


/* ==========================================
   9. STILI DELLE SEZIONI
========================================== */

/*
 * DATA: 19/10/2026
 * MODIFICA: definizione delle classi editoriali
 * MOTIVO: uniformare lo stile delle pagine Elementor
 * senza configurare ogni widget individualmente.
 */

.carrella-section-intro,
.carrella-section-text,
.carrella-section-portfolio {
    color: var(--carrella-text);
    font-family: var(--carrella-sans);
}


/* ==========================================
   10. INTRODUZIONE HOME
========================================== */

/*
 * DATA: 19/10/2026
 * MODIFICA: stile della sezione introduttiva
 * MOTIVO: presentare il brand sotto lo slideshow
 * con ampi spazi e testo centrato.
 */

.carrella-section-intro {
    background: var(--carrella-bg);
    padding: var(--carrella-section-space) 40px;
    text-align: center;
}

.carrella-section-intro > * {
    max-width: var(--carrella-text-width);
    margin-left: auto;
    margin-right: auto;
}


/* ==========================================
   11. TITOLI PRINCIPALI
========================================== */

/*
 * DATA: 19/10/2026
 * MODIFICA: tipografia H1 editoriale
 * MOTIVO: utilizzare Cormorant Garamond
 * con dimensioni responsive.
 */

.carrella-title,
.carrella-title .elementor-heading-title,
.carrella-title.elementor-heading-title {
    font-family: var(--carrella-serif) !important;
    font-size: clamp(38px, 4.3vw, 64px) !important;
    font-weight: 400 !important;
    line-height: 1.12 !important;
    letter-spacing: -.015em !important;
    color: var(--carrella-text) !important;
    text-transform: none;
    margin: 0;
}


/* ==========================================
   12. TITOLI SECONDARI
========================================== */

/*
 * DATA: 19/10/2026
 * MODIFICA: tipografia H2 e titoli secondari
 * MOTIVO: mantenere una gerarchia visiva coerente.
 */

.carrella-subtitle,
.carrella-subtitle .elementor-heading-title,
.carrella-subtitle.elementor-heading-title {
    font-family: var(--carrella-serif) !important;
    font-size: clamp(30px, 3vw, 46px) !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
    color: var(--carrella-text) !important;
    margin: 0;
}


/* ==========================================
   13. PARAGRAFI
========================================== */

/*
 * DATA: 19/10/2026
 * MODIFICA: stile dei testi descrittivi
 * MOTIVO: garantire leggibilità e coerenza
 * nelle pagine italiane e inglesi.
 */

.carrella-text,
.carrella-text p,
.carrella-text .elementor-widget-container {
    font-family: var(--carrella-sans);
    font-size: 17px;
    font-weight: 400;
    line-height: 1.85;
    letter-spacing: 0;
    color: var(--carrella-text);
}

.carrella-text {
    max-width: var(--carrella-text-width);
    margin-left: auto;
    margin-right: auto;
}

.carrella-text p {
    margin: 0 0 20px;
}

.carrella-text p:last-child {
    margin-bottom: 0;
}


/* ==========================================
   14. SEZIONI TESTUALI
========================================== */

/*
 * DATA: 19/10/2026
 * MODIFICA: spaziatura sezioni editoriali
 * MOTIVO: mantenere ampio respiro tra i contenuti.
 */

.carrella-section-text {
    background: var(--carrella-white);
    padding: 100px 40px;
}


/* ==========================================
   15. PORTFOLIO
========================================== */

/*
 * DATA: 19/10/2026
 * MODIFICA: sezioni portfolio senza padding
 * MOTIVO: valorizzare le immagini a tutta larghezza.
 */

.carrella-section-portfolio {
    background: var(--carrella-white);
    padding: 0;
}


/* ==========================================
   16. LINK EDITORIALI
========================================== */

/*
 * DATA: 19/10/2026
 * MODIFICA: stile link testuali
 * MOTIVO: evitare pulsanti commerciali e mantenere
 * una comunicazione minimalista.
 */

.carrella-editorial-link,
.carrella-editorial-link a {
    font-family: var(--carrella-sans);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--carrella-text);
}

.carrella-editorial-link a:hover,
a.carrella-editorial-link:hover {
    color: var(--carrella-muted);
}


/* ==========================================
   17. RESPONSIVE MOBILE
========================================== */

/*
 * DATA: 19/10/2026
 * MODIFICA: adattamento mobile di header e menu
 * MOTIVO: mantenere leggibilità e proporzioni
 * adeguate su smartphone.
 */

@media (max-width: 767px) {

    :root {
        --carrella-section-space: 65px;
    }

    .carrella-header {
        min-height: 80px;
        padding: 20px;
    }

    .carrella-brand-name {
        font-size: 21px;
        letter-spacing: .08em;
    }

    .carrella-brand-subtitle {
        font-size: 7px;
        letter-spacing: .2em;
    }

    .carrella-languages {
        gap: 8px;
        font-size: 11px;
    }

    .carrella-nav-list a {
        font-size: 32px;
    }

    /*
     * DATA: 19/10/2026
     * MODIFICA: altezza slideshow mobile a 55svh
     * MOTIVO: ridurre l'ingombro fotografico
     * sui dispositivi mobili.
     */

    body #carrella-hero-slider {
        height: 55vh !important;
        height: 55svh !important;
        min-height: 0 !important;
        max-height: 55svh !important;
    }

    /*
     * DATA: 19/10/2026
     * MODIFICA: padding ridotto delle sezioni
     * MOTIVO: mantenere leggibilità su schermi stretti.
     */

    .carrella-section-intro,
    .carrella-section-text {
        padding: 65px 24px;
    }

    /*
     * DATA: 19/10/2026
     * MODIFICA: titoli responsive
     * MOTIVO: evitare testi troppo grandi su smartphone.
     */

    .carrella-title,
    .carrella-title .elementor-heading-title,
    .carrella-title.elementor-heading-title {
        font-size: clamp(32px, 8vw, 42px) !important;
        line-height: 1.15 !important;
    }

    .carrella-subtitle,
    .carrella-subtitle .elementor-heading-title,
    .carrella-subtitle.elementor-heading-title {
        font-size: 32px !important;
    }

    /*
     * DATA: 19/10/2026
     * MODIFICA: testo responsive
     * MOTIVO: migliorare la lettura su mobile.
     */

    .carrella-text,
    .carrella-text p,
    .carrella-text .elementor-widget-container {
        font-size: 16px;
        line-height: 1.75;
    }
}


/* ==========================================
   18. ACCESSIBILITÀ
========================================== */

/*
 * DATA: 19/10/2026
 * MODIFICA: rispetto delle preferenze movimento ridotto
 * MOTIVO: disattivare lo slideshow animato quando
 * il visitatore preferisce ridurre le animazioni.
 */

@media (prefers-reduced-motion: reduce) {

    #carrella-hero-slider > * {
        animation: none !important;
        opacity: 0;
    }

    #carrella-hero-slider > :first-child {
        opacity: 1;
    }

}