/*
Theme Name: Gesso Pellino
Theme URI: https://www.gessopellino.it/
Description: Tema del sito Gesso Pellino, costruito su Hello Elementor. Tutte le pagine si modificano con Elementor; qui dentro stanno solo i dettagli che l'editor non sa esprimere.
Author: PDC Assistant
Template: hello-elementor
Version: 1.0
Text Domain: gesso-pellino
*/

:root {
    --pellino-blu: #0a00a1;
    --pellino-testo: #111111;
    --pellino-chiaro: #f4f4f4;
}

/* ----------------------------------------------------------- testo e titoli */
body {
    color: var(--pellino-testo);
}

/* I titoli del sito originale sono in Arial Black: dove non c'e', si usa
   il grassetto piu' pesante disponibile invece di un ripiego magro. */
h1, h2, h3,
.elementor-heading-title {
    font-stretch: normal;
    letter-spacing: -0.01em;
}

/* ------------------------------------------------------------------ gallerie */
/* Le gallerie dell'originale sono griglie fitte, senza cornici ne' didascalie. */
.elementor-widget-image-gallery .gallery-item {
    margin: 0 !important;
}

.elementor-widget-image-gallery .gallery-icon img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 4 / 3;
    border: 0 !important;
    transition: transform .4s ease, filter .4s ease;
}

.elementor-widget-image-gallery .gallery-icon {
    overflow: hidden;
}

.elementor-widget-image-gallery .gallery-icon:hover img {
    transform: scale(1.06);
}

.elementor-widget-image-gallery .gallery-caption {
    display: none;
}

/* --------------------------------------------------------- riquadri servizi */
/* I quattro riquadri della home: immagine sopra, etichetta blu sotto. */
.pellino-riquadro .elementor-widget-image img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.pellino-riquadro a {
    text-decoration: none;
}

/* ---------------------------------------------------------- schede su sfondo */
.pellino-scheda {
    backdrop-filter: blur(2px);
}

/* ------------------------------------------------------------------- menu */
/* La voce della pagina aperta resta accesa, come nell'originale. */
.hfe-nav-menu .current-menu-item > a.hfe-menu-item {
    background-color: #ffffff !important;
    color: var(--pellino-blu) !important;
}

/* ------------------------------------------------- barra "Chiama ora" mobile */
.pellino-chiama {
    display: none;
}

@media (max-width: 767px) {
    .pellino-chiama {
        display: block;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 9999;
    }

    .pellino-chiama a {
        display: block;
        padding: 14px 10px;
        background: var(--pellino-blu);
        color: #ffffff;
        font-weight: 700;
        text-align: center;
        text-decoration: none;
        letter-spacing: .04em;
    }

    body {
        padding-bottom: 52px;
    }
}

/* ------------------------------------------------------------------ moduli */
.wpcf7 label {
    display: block;
    width: 100%;
    font-size: 15px;
    margin-bottom: 14px;
}

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid #c9c9c9;
    background: #ffffff;
    font: inherit;
    margin-top: 4px;
}

.wpcf7 textarea {
    min-height: 130px;
}

.wpcf7 .pellino-consenso {
    font-size: 14px;
    line-height: 1.45;
}

.wpcf7 input[type="submit"] {
    padding: 11px 44px;
    border: 0;
    background: var(--pellino-blu);
    color: #ffffff;
    font-weight: 700;
    letter-spacing: .03em;
    cursor: pointer;
}

.wpcf7 input[type="submit"]:hover {
    background: #07007a;
}

/* --------------------------------------------------------- tabella orari */
.pellino-orari {
    width: 100%;
    border-collapse: collapse;
}

.pellino-orari td {
    padding: 3px 0;
    vertical-align: top;
}

.pellino-orari td + td {
    text-align: right;
}

/* ------------------------------------------------------- elenchi a due colonne */
@media (min-width: 768px) {
    .pellino-elenco-due .elementor-icon-list-items {
        columns: 2;
        column-gap: 40px;
    }

    .pellino-elenco-due .elementor-icon-list-item {
        break-inside: avoid;
    }
}

/* Gli elenchi dell'originale sono centrati sotto al testo, non a tutta pagina. */
.elementor-widget-icon-list .elementor-icon-list-items {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}

.pellino-elenco-due .elementor-icon-list-items {
    max-width: 860px;
}

/* --------------------------------------------------------- immagini centrate */
.elementor-widget-image {
    text-align: center;
}

.elementor-widget-image img {
    display: inline-block;
}

/* --------------------------------------------------------------- testata */
.elementor-widget-social-icons .elementor-social-icon {
    background-color: #1877f2;
}

/* --------------------------------------------- modulo: due campi affiancati */
/* Contact Form 7 avvolge i campi in <p>: la riga affiancata sta li' dentro. */
@media (min-width: 600px) {
    .wpcf7 .pellino-riga > p,
    .wpcf7 .pellino-riga {
        display: flex;
        gap: 20px;
        align-items: flex-start;
    }

    .wpcf7 .pellino-riga label {
        flex: 1 1 0;
        min-width: 0;
    }

    .wpcf7 .pellino-riga > p > br {
        display: none;
    }
}

/* La tabella degli orari non ha cornici, come nell'originale. */
.pellino-orari,
.pellino-orari tr,
.pellino-orari td {
    border: 0 !important;
    background: none !important;
}

/* ------------------------------------------------------------ testata mobile */
/* Sul telefono le tre colonne della testata diventano tre righe: si centrano. */
@media (max-width: 767px) {
    .pellino-testata .elementor-widget-text-editor {
        text-align: center !important;
    }

    .pellino-testata .elementor-widget-social-icons {
        text-align: center;
    }

    .pellino-testata .elementor-social-icons-wrapper {
        justify-content: center;
    }

    .pellino-testata .elementor-element > .elementor-widget-container {
        padding-left: 0;
        padding-right: 0;
    }
}