/* ==========================================================================
 * Regole ponte fra Elementor e Bricks
 *
 * Alcuni colori non stavano nel foglio di stile della pagina: venivano dal
 * markup dei widget di Elementor, che in Bricks non esiste. Sono stati
 * misurati sul riferimento in tools/riferimento e riscritti qui.
 *
 * Questo file e' scritto a mano: rigenerando i CSS delle pagine non viene
 * toccato.
 * ======================================================================= */

/* Eroe della home: titolo e testo su fondo scuro */
.el-f1c7b29,
.el-cd18c40,
.el-cd18c40 p {
    color: #ffffff;
}

/* ==========================================================================
 * Parte evidenziata del titolo, con il tratto animato
 *
 * Riproduce il marcatore "underline" del titolo animato di Elementor Pro.
 * Tracciato, riquadro, spessore e fotogrammi sono presi dai suoi file
 * animated-headline, non ridisegnati. Durata e attesa fra un giro e
 * l'altro arrivano dalle impostazioni del widget, tramite variabili.
 * ======================================================================= */

.montanaro-evidenziato {
    position: relative;
    display: inline-block;
    /* Il colore non e' sempre sabbia: Elementor lo dichiara per elemento
       come --dynamic-text-color, ed e' rosso logo nella sezione azienda. */
    color: var(--dynamic-text-color, #e9d9aa);
}

.montanaro-evidenziato > span {
    position: relative;
    z-index: 1;
}

.montanaro-marcatore {
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(100% + 20px);
    height: calc(100% + 20px);
    transform: translate(-50%, -50%);
    overflow: visible;
    pointer-events: none;
}

.montanaro-marcatore path {
    fill: none;
    stroke: var(--marcatore, #e9d9aa);
    stroke-width: 9;
    stroke-dasharray: 0 1500;
    animation: montanaro-tratto var(--marcatore-durata, 9600ms) linear infinite;
}

@keyframes montanaro-tratto {
    0% {
        opacity: 1;
        stroke-dasharray: 0 1500;
    }
    /* Il tratto si completa in 1200 ms su un giro di 9600: il 12,5 per cento */
    12.5% {
        opacity: 1;
        stroke-dasharray: 1500 1500;
    }
    95% {
        opacity: 1;
        stroke-dasharray: 1500 1500;
    }
    100% {
        opacity: 0;
        filter: blur(10px);
        stroke-dasharray: 1500 1500;
    }
}

/* La targhetta sopra il titolo e' 56e8789, non 4ffdcaa: quella e' la
   colonna destra intera. Colore, bordo, raggio e spaziatura arrivano dal
   foglio della pagina; occupa tutta la larghezza della colonna, come in
   Elementor, quindi non va ristretta al contenuto. */

/* I titoli convertiti dai titoli animati mantengono il corpo di Elementor */
.el-f1c7b29 {
    line-height: 1.15;
}

/* Le righe convertite portano la larghezza massima di Elementor ma non si
   centravano da sole: senza questo il testo resta incollato al bordo. */
.brxe-section > .brxe-container,
.brxe-section > .brxe-block {
    margin-inline: auto;
}

/* I pulsanti non hanno piu' regole scritte a mano: l'estrattore riconosce
   .elementor-button come corrispondente all'elemento, quindi riempimento,
   colori, raggio e varianti responsive arrivano dal foglio della pagina. */

/* ==========================================================================
 * Elenchi con icone
 *
 * In Elementor erano un widget dedicato. Qui sono una lista con le stesse
 * icone Font Awesome, che il tema child carica esplicitamente perche'
 * Bricks lo fa solo quando e' lui a usarle.
 * ======================================================================= */

.montanaro-elenco {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Elementor non usa uno spazio fra le voci: mette meta' distanza sotto
   ogni voce e meta' sopra, tranne rispettivamente l'ultima e la prima. */
/* Come in Elementor: l'icona e' larga 1,25 volte la sua dimensione, con
   interlinea 1, centrata sulla voce (--icon-vertical-align del widget), e
   il testo parte 5,5 px dopo. Misurato sulla produzione. */
.montanaro-elenco li {
    display: flex;
    align-items: var(--icon-vertical-align, center);
    gap: 5.5px;
    font-size: var(--corpo, inherit);
}

.montanaro-elenco i {
    font-size: var(--icona, var(--e-icon-list-icon-size, inherit));
}

.montanaro-elenco li:not(:last-child) {
    padding-block-end: calc(var(--spazio, 10px) / 2);
}

.montanaro-elenco li:not(:first-child) {
    margin-block-start: calc(var(--spazio, 10px) / 2);
}

.montanaro-elenco i {
    flex: 0 0 auto;
    width: 1.25em;
    line-height: 1;
    text-align: center;
}

/* ==========================================================================
 * Distanza fra gli elementi dentro una colonna
 *
 * Elementor separa i widget di 20 px, tranne l'ultimo del contenitore:
 * `.elementor-widget:not(:last-child) { margin-block-end: 20px }`, con il
 * valore dichiarato dal kit come --widgets-spacing. L'estrattore scarta
 * quella regola perche' aggancia il suo markup, e senza di essa i margini
 * negativi dei titoli facevano sovrapporre i testi.
 * ======================================================================= */

#brx-content :is(
    .brxe-heading,
    .brxe-text,
    .brxe-text-basic,
    .brxe-image,
    .brxe-button,
    .brxe-shortcode,
    .brxe-html,
    .brxe-social-icons
):not(:last-child) {
    margin-block-end: 20px;
}

/* ==========================================================================
 * Interlinea di titoli e pulsanti
 *
 * Elementor impone `line-height: 1` a `.elementor-heading-title` e a
 * `.elementor-button`. Sono regole agganciate al suo markup, quindi
 * scartate dall'estrattore: senza, valeva l'interlinea di Bricks, circa
 * 1,4, e ogni titolo e ogni pulsante risultavano piu' alti.
 * ======================================================================= */

/* :where() azzera la specificita': sono i valori di base di Elementor e
   devono cedere il passo a quanto dichiarato per il singolo elemento. */
:where(#brx-content .brxe-heading),
:where(#brx-content .brxe-button) {
    line-height: 1;
}

/* Riempimento dei pulsanti: Elementor lo dichiara sulla propria classe di
   base, non per elemento, quindi l'estrattore non lo raccoglie. */
:where(#brx-content .brxe-button) {
    padding: 12px 24px;
}

/* Il titolo animato di Elementor ha interlinea 1,2, non 1 come gli altri */
#brx-content .brxe-heading.montanaro-titolo-animato {
    line-height: 1.2;
}

/* ==========================================================================
 * Modulo della home
 *
 * Contact Form 7 al posto del modulo Elementor, con lo stesso aspetto.
 * Misure e colori presi dal modulo online: campi alti 40 px a 10 px l'uno
 * dall'altro, area di testo 96, testo Roboto 15 leggero grigio, bordo
 * 1 px grigio scuro con raggio 3, pulsante rosso logo.
 * ======================================================================= */

.montanaro-modulo p {
    margin: 0 0 10px;
}

.montanaro-modulo input[type="text"],
.montanaro-modulo input[type="tel"],
.montanaro-modulo input[type="email"],
.montanaro-modulo textarea {
    width: 100%;
    padding: 5px 14px;
    font-family: "Roboto", sans-serif;
    font-size: 15px;
    font-weight: 300;
    line-height: 1.4;
    color: var(--e-global-color-text, #7a7a7a);
    background-color: #ffffff;
    border: 1px solid #69727d;
    border-radius: 3px;
}

.montanaro-modulo input[type="text"],
.montanaro-modulo input[type="tel"],
.montanaro-modulo input[type="email"] {
    height: 40px;
}

/* Contact Form 7 mette ogni campo in uno span in riga: sotto l'area di testo
   restava lo spazio di una riga, 9 px in piu' prima del consenso. */
.montanaro-modulo .wpcf7-form-control-wrap,
.montanaro-modulo textarea {
    display: block;
}

.montanaro-modulo textarea {
    height: 96px;
}

.montanaro-modulo ::placeholder {
    color: var(--e-global-color-text, #7a7a7a);
    opacity: 1;
}

/* Il consenso: la casella in alto a sinistra e il testo a capo accanto */
.montanaro-modulo .montanaro-consenso {
    min-height: 58px;
    margin-bottom: 10px;
    padding-top: 7px;
    font-family: "Roboto", sans-serif;
    font-size: 15px;
    font-weight: 300;
    line-height: 1.6;
    color: var(--e-global-color-text, #7a7a7a);
}

/* Contact Form 7 avvolge la casella in tre span in riga: come blocchi non
   aggiungono l'altezza di una riga vuota sotto il testo. */
.montanaro-modulo .montanaro-consenso :is(.wpcf7-form-control-wrap, .wpcf7-acceptance, .wpcf7-list-item) {
    display: block;
    margin: 0;
}

.montanaro-modulo .montanaro-consenso label {
    display: flex;
    align-items: flex-start;
    gap: 4px;
}

.montanaro-modulo .montanaro-consenso input[type="checkbox"] {
    flex: 0 0 auto;
    margin: 1px 0 0;
}

.montanaro-modulo input[type="submit"] {
    height: 40px;
    padding: 0 24px;
    font-family: "Roboto", sans-serif;
    font-size: 18px;
    font-weight: 300;
    line-height: 1;
    color: #ffffff;
    background-color: var(--e-global-color-ec96114, #c30b1b);
    border: 0;
    border-radius: 3px;
    cursor: pointer;
}

/* Su telefono il pulsante del modulo Elementor era centrato */
@media (max-width: 767px) {
    .montanaro-modulo input[type="submit"] {
        display: block;
        margin-inline: auto;
    }
}

.montanaro-modulo input[type="submit"]:hover,
.montanaro-modulo input[type="submit"]:focus {
    filter: brightness(0.9);
}

/* ==========================================================================
 * Interlinea di base delle pagine convertite
 *
 * In produzione i testi ereditano l'interlinea 1,6 del tema Envo; Bricks
 * usa 1,7 e ogni paragrafo risultava piu' alto. Vale solo dentro le pagine
 * convertite, riconoscibili dalle colonne.
 * ======================================================================= */

:where(#brx-content:has(.mtn-colonna)) {
    line-height: 1.6;
}

/* Margini dei testi del tema Envo (Bootstrap 3), che in produzione valgono
   dentro i widget di Elementor: paragrafi ed elenchi 10 px sotto, titoli
   h1-h3 20 sopra e 10 sotto, h4-h6 10 e 10. In Bricks erano a zero e ogni
   blocco di testo risultava piu' basso, spostando in su tutto il resto. */
:where(#brx-content:has(.mtn-colonna)) :is(.brxe-text, .brxe-text-basic) :is(p, ul:not(.montanaro-elenco), ol) {
    margin: 0 0 10px;
}

:where(#brx-content:has(.mtn-colonna)) :is(.brxe-text, .brxe-text-basic) :is(h1, h2, h3) {
    margin: 20px 0 10px;
}

:where(#brx-content:has(.mtn-colonna)) :is(.brxe-text, .brxe-text-basic) :is(h4, h5, h6) {
    margin: 10px 0 10px;
}

/* Envo stringe tutti i titoli di -0,02em: senza, "Complete Winery
   Solutions" andava a capo nella scheda. */
:where(#brx-content:has(.mtn-colonna)) :is(h1, h2, h3, h4, h5, h6) {
    letter-spacing: -0.02em;
}

/* Il titolo animato di Elementor e' un h2 dentro il widget: prende i margini
   di Envo, 20 sopra e 10 sotto, che si sommano al margine del widget. Qui il
   titolo e' l'elemento stesso, e lo stesso risultato lo da' il riempimento. */
#brx-content:has(.mtn-colonna) .brxe-heading.montanaro-titolo-animato {
    padding-top: 20px;
    padding-bottom: 10px;
}

/* ==========================================================================
 * Schermi stretti
 *
 * Elementor sotto i 768 px porta ogni colonna a tutta larghezza e le
 * impila. Le righe convertite restavano affiancate con le percentuali del
 * desktop, e la pagina diventava illeggibile.
 * ======================================================================= */

@media (max-width: 767px) {
    #brx-content .brxe-section > :is(.brxe-container, .brxe-block),
    #brx-content .brxe-block > :is(.brxe-container, .brxe-block) {
        flex-direction: column;
    }

    #brx-content .brxe-section :is(.brxe-container, .brxe-block) {
        width: 100%;
        max-width: 100%;
    }
}

/* ==========================================================================
 * Larghezza massima delle sezioni non dichiarate
 *
 * Elementor limita il contenuto delle sezioni "boxed" con una regola
 * generica, non legata al singolo elemento, che l'estrattore non raccoglie:
 * 1140 px su desktop, 1024 su tablet, 767 su telefono. Le sezioni che
 * dichiarano una larghezza propria la sovrascrivono dal foglio della pagina.
 * ======================================================================= */

/* :where() azzera la specificita': queste sono misure di ripiego e devono
   cedere il passo alle larghezze dichiarate dalle singole sezioni. */
:where(#brx-content .brxe-section) > :where(.brxe-container, .brxe-block) {
    max-width: 1140px;
    margin-inline: auto;
}

@media (max-width: 1024px) {
    :where(#brx-content .brxe-section) > :where(.brxe-container, .brxe-block) {
        max-width: 1024px;
    }
}

@media (max-width: 767px) {
    :where(#brx-content .brxe-section) > :where(.brxe-container, .brxe-block) {
        max-width: 767px;
    }
}

/* ==========================================================================
 * Gallerie
 *
 * Elementor ritaglia le miniature con proporzione 3:2, misurata sul
 * riferimento: 216 per 144. Bricks mostrerebbe le immagini a piena
 * altezza, allungando la pagina di oltre mille pixel.
 * ======================================================================= */

#brx-content .brxe-image-gallery:not(.mtn-galleria) img {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

/* Bordo, raggio e filtro delle immagini di galleria: Elementor li dichiara
   come variabili sull'elemento e come filtro su un div di sfondo. Qui
   valgono sul tag img, che e' la scatola corrispondente. */
#brx-content .brxe-image-gallery:not(.mtn-galleria) img {
    border-radius: var(--image-border-radius, 0);
    border: var(--image-border-width, 0) solid var(--image-border-color, transparent);
    transition: filter var(--image-transition-duration, 350ms) ease,
                transform var(--image-transition-duration, 350ms) ease;
}

/* Su telefono Elementor porta le gallerie a una colonna: nel riferimento a
   375 px le venti immagini stanno su venti righe, larghe 355 px. Bricks
   tiene le colonne del desktop e le immagini scendevano a 63 px. */
@media (max-width: 767px) {
    #brx-content .brxe-image-gallery:not(.mtn-galleria) {
        --columns: 1;
    }
}

/* Le gallerie che erano di NextGEN (Museo, Musa-Tech, Realizzazione
   cantine: tools/nextgen/sostituisci-nextgen.php) hanno la classe
   mtn-galleria e seguono solo le impostazioni del loro elemento Bricks:
   colonne, proporzione e larghezza misurate sulle gallerie NextGEN. */
#brx-content .brxe-image-gallery.mtn-galleria img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Realizzazione cantine: in NextGEN ogni miniatura aveva un filo grigio. */
#brx-content .brxe-image-gallery.mtn-galleria-bordo img {
    border: 1px solid #a9a9a9;
}

/* ==========================================================================
 * Regole di impaginazione comuni di Elementor
 *
 * Valgono per tutti gli elementi di un tipo, non per il singolo, quindi non
 * stanno nel foglio della pagina. Le classi le mette
 * tools/bricks/struttura-elementor.php leggendo le impostazioni Elementor.
 * ======================================================================= */

/* Spazio "default" fra le colonne: 10 px di riempimento dentro ognuna.
   Con :where() cede ai riempimenti dichiarati per la singola colonna. */
:where(#brx-content .mtn-colonna) {
    padding: 10px;
}

/* Larghezza delle colonne secondo la struttura della sezione, come
   elementor-col-25 e simili: vale da 768 px in su, sotto le colonne vanno a
   tutta larghezza. :where() lascia vincere le larghezze scelte a mano, che
   stanno nel foglio della pagina. */
@media (min-width: 768px) {
    :where(#brx-content .mtn-col-100) { width: 100%; }
    :where(#brx-content .mtn-col-50)  { width: 50%; }
    :where(#brx-content .mtn-col-33)  { width: 33.333%; }
    :where(#brx-content .mtn-col-25)  { width: 25%; }
    :where(#brx-content .mtn-col-20)  { width: 20%; }
    :where(#brx-content .mtn-col-16)  { width: 16.666%; }
}

/* Sezioni "full_width": il contenuto non ha larghezza massima */
#brx-content .brxe-section.mtn-sezione-piena > :is(.brxe-container, .brxe-block) {
    max-width: none;
}

/* Pulsanti: in Elementor sono larghi quanto il testo e allineati secondo il
   widget, a sinistra se non dichiarato. La colonna allarga i figli a tutta
   larghezza, quindi l'allineamento va dato al pulsante stesso. */
#brx-content .brxe-button.mtn-allinea-sinistra { align-self: flex-start; }
#brx-content .brxe-button.mtn-allinea-centro   { align-self: center; }
#brx-content .brxe-button.mtn-allinea-destra   { align-self: flex-end; }
#brx-content .brxe-button.mtn-allinea-pieno    { align-self: stretch; }

/* Sotto i 1025 px Elementor lascia andare a capo le colonne di una riga:
   una colonna portata al 100% su tablet spinge le altre sotto. Solo nelle
   sezioni dove succede: altrove i margini delle colonne, che in Elementor
   stanno dentro la loro larghezza, le farebbero andare a capo. */
@media (max-width: 1024px) {
    #brx-content .mtn-a-capo-tablet > :is(.brxe-container, .brxe-block) {
        flex-wrap: wrap;
    }
}

@media (max-width: 1024px) {
    #brx-content .brxe-button.mtn-allinea-tablet-sinistra { align-self: flex-start; }
    #brx-content .brxe-button.mtn-allinea-tablet-centro   { align-self: center; }
    #brx-content .brxe-button.mtn-allinea-tablet-destra   { align-self: flex-end; }
    #brx-content .brxe-button.mtn-allinea-tablet-pieno    { align-self: stretch; }
}

@media (max-width: 767px) {
    #brx-content .brxe-button.mtn-allinea-mobile-sinistra { align-self: flex-start; }
    #brx-content .brxe-button.mtn-allinea-mobile-centro   { align-self: center; }
    #brx-content .brxe-button.mtn-allinea-mobile-destra   { align-self: flex-end; }
    #brx-content .brxe-button.mtn-allinea-mobile-pieno    { align-self: stretch; }
}