/*
 * Aspetto coordinato di stampa-tesi.online.
 *
 * I colori vengono dal logo: blu #1878c0, verde #189048, arancio #f09018.
 * Qui sono usati in versione più scura, per avere contrasto sufficiente sul bianco.
 * Base grafite e bianco; il colore serve alle azioni, non alla decorazione.
 *
 * Regola di convivenza: Elementor scrive le sue regole con selettori molto specifici
 * e spesso in linea, quindi dove serve si usa !important. Nessun testo, nessuna
 * struttura di pagina viene toccata: disattivando il plugin il sito torna com'era.
 */

:root {
    --wiva-inchiostro: #1E2A30;
    --wiva-inchiostro-tenue: #5C6B73;
    --wiva-fondo-tenue: #F4F6F7;
    --wiva-bordo: #E2E8EA;

    --wiva-blu: #0A6099;
    --wiva-blu-scuro: #084B78;
    --wiva-blu-velo: rgba(10, 96, 153, 0.12);
    --wiva-verde: #1E7A44;
    --wiva-arancio: #C2660A;

    --wiva-raggio: 8px;
    --wiva-ombra: 0 1px 2px rgba(30, 42, 48, 0.06), 0 10px 28px rgba(30, 42, 48, 0.07);
    --wiva-transizione: 160ms ease;
}

/* ------------------------------------------------------------------ testo */

body {
    color: var(--wiva-inchiostro);
    -webkit-font-smoothing: antialiased;
}

.elementor-widget-text-editor p,
.elementor-widget-text-editor li {
    line-height: 1.7;
}

/* Titoli: stessa impronta ovunque, senza toccarne colore e corpo scelti nelle pagine. */
h1, h2, h3, h4,
.elementor-heading-title {
    letter-spacing: -0.015em;
    text-wrap: balance;
}

.elementor-widget-text-editor a:not(.elementor-button),
.entry-content a:not(.elementor-button):not(.button) {
    color: var(--wiva-blu);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

/* Tutto ciò che si può raggiungere da tastiera resta visibile. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.elementor-button:focus-visible {
    outline: 3px solid var(--wiva-blu-velo);
    outline-offset: 2px;
    border-radius: 4px;
}

/* -------------------------------------------------------------- menu alto */

.elementor-nav-menu a.elementor-item {
    color: var(--wiva-inchiostro) !important;
    font-weight: 500;
    letter-spacing: 0.01em;
    transition: color var(--wiva-transizione);
}

.elementor-nav-menu a.elementor-item:hover,
.elementor-nav-menu a.elementor-item.elementor-item-active,
.elementor-nav-menu a.elementor-item.highlighted {
    color: var(--wiva-blu) !important;
}

/* La sottolineatura animata del menu segue il colore delle azioni. */
.e--pointer-underline .elementor-item:after,
.e--pointer-underline .elementor-item:before,
.e--pointer-framed .elementor-item:before,
.e--pointer-background .elementor-item:before {
    background-color: var(--wiva-blu) !important;
}

/* ---------------------------------------------------------------- pulsanti */

.elementor-button,
.wp-block-button__link,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.wc-block-components-button {
    background-color: var(--wiva-blu) !important;
    color: #ffffff !important;
    border: 0 !important;
    border-radius: var(--wiva-raggio) !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em !important;
    text-transform: none !important;
    box-shadow: none !important;
    text-decoration: none !important;
    transition: background-color var(--wiva-transizione), transform var(--wiva-transizione), box-shadow var(--wiva-transizione);
}

.elementor-button:hover,
.wp-block-button__link:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.wc-block-components-button:hover {
    background-color: var(--wiva-blu-scuro) !important;
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(10, 96, 153, 0.22) !important;
}

.elementor-button:active,
.wc-block-components-button:active {
    transform: translateY(0);
}

/* Il pulsante che porta all'acquisto resta l'unico in arancio del logo. */
.woocommerce button.button.alt,
.woocommerce a.button.checkout-button,
.wc-block-components-checkout-place-order-button {
    background-color: var(--wiva-arancio) !important;
}

.woocommerce button.button.alt:hover,
.woocommerce a.button.checkout-button:hover,
.wc-block-components-checkout-place-order-button:hover {
    background-color: #A85708 !important;
    box-shadow: 0 6px 18px rgba(194, 102, 10, 0.24) !important;
}

/* --------------------------------------------------------- moduli e campi */

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.wc-block-components-text-input input,
.elementor-field-textual {
    border: 1px solid var(--wiva-bordo) !important;
    border-radius: var(--wiva-raggio) !important;
    transition: border-color var(--wiva-transizione), box-shadow var(--wiva-transizione);
}

.woocommerce form .form-row input.input-text:focus,
.wc-block-components-text-input input:focus,
.elementor-field-textual:focus {
    border-color: var(--wiva-blu) !important;
    box-shadow: 0 0 0 3px var(--wiva-blu-velo) !important;
    outline: none;
}

/* -------------------------------------------- catalogo copertine (griglia) */

#wiva-thesis-grid .thesis-card {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--wiva-ombra);
    transition: transform var(--wiva-transizione), box-shadow var(--wiva-transizione);
}

#wiva-thesis-grid .thesis-card-wrapper:hover .thesis-card {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(30, 42, 48, 0.14);
}

/*
 * I due pulsanti della scheda usano emoji come icone: su fondo scuro non si leggono,
 * quindi restano bianchi con un bordo, e si colorano al passaggio del mouse.
 */
#wiva-thesis-grid .card-actions button {
    background: #ffffff !important;
    border: 1px solid var(--wiva-bordo) !important;
    box-shadow: 0 1px 4px rgba(30, 42, 48, 0.1);
    transition: border-color var(--wiva-transizione), transform var(--wiva-transizione), box-shadow var(--wiva-transizione);
}

#wiva-thesis-grid .card-actions button:hover {
    border-color: var(--wiva-blu) !important;
    box-shadow: 0 4px 12px rgba(10, 96, 153, 0.18);
    transform: translateY(-1px);
}

/* Sul telefono due copertine per riga: prima ne entrava una sola e la pagina non finiva più. */
@media (max-width: 600px) {
    /* Lo spazio tra le schede lo detta il contenitore: qui 12px, così due stanno in riga. */
    #wiva-thesis-grid.thesis-container {
        gap: 12px;
        justify-content: center;
    }

    #wiva-thesis-grid .thesis-card-wrapper {
        flex: 1 1 calc(50% - 6px);
        max-width: calc(50% - 6px);
    }

    #wiva-thesis-grid .thesis-card {
        width: 100%;
        height: auto;
        aspect-ratio: 2 / 3;
    }
}

#wiva-thesis-grid .wiva-filters select {
    border: 1px solid var(--wiva-bordo);
    border-radius: var(--wiva-raggio);
    padding: 0.5rem 0.75rem;
    color: var(--wiva-inchiostro);
}

/* ------------------------------------------- pagine con le applicazioni Vue */

/* Senza un po' d'aria l'applicazione parte incollata al menu e sembra un modulo nudo. */
#copertina-vue,
#preventivo-vue,
#wiva-editor-stampa,
#wiva-thesis-grid {
    padding-block: clamp(20px, 3vw, 44px);
}

/* Vuetify scrive i pulsanti in maiuscolo: qui il resto del sito non lo fa. */
#copertina-vue .v-btn,
#preventivo-vue .v-btn,
#wiva-editor-stampa .v-btn {
    text-transform: none;
    letter-spacing: 0.01em;
    border-radius: var(--wiva-raggio);
}

/* Le schede delle applicazioni seguono la stessa ombra del resto del sito. */
#copertina-vue .v-card,
#preventivo-vue .v-card {
    border-radius: 12px !important;
    box-shadow: var(--wiva-ombra) !important;
}

/* --------------------------------------------------------- piè di pagina */

footer .elementor-heading-title,
.elementor-location-footer .elementor-heading-title {
    font-size: 0.82rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--wiva-inchiostro-tenue);
}

.elementor-location-footer {
    border-top: 1px solid var(--wiva-bordo);
}

.elementor-location-footer a:hover {
    color: var(--wiva-blu) !important;
}

/* ------------------------------------------------------------- movimento */

@media (prefers-reduced-motion: reduce) {
    .elementor-button,
    .wc-block-components-button,
    #wiva-thesis-grid .thesis-card,
    #wiva-thesis-grid .card-actions button {
        transition: none;
    }

    .elementor-button:hover,
    .wc-block-components-button:hover,
    #wiva-thesis-grid .thesis-card-wrapper:hover .thesis-card {
        transform: none;
    }
}

/* ------------------------------------------------- telefono: titolo d'apertura */

/*
 * Il titolo della home è impostato solo per il computer: sul telefono riempiva
 * l'intera schermata e l'immagine spariva. Qui viene ridotto solo quello
 * (elemento 2529c4e della home), senza toccare gli altri titoli del sito.
 */
@media (max-width: 767px) {
    .elementor-element-2529c4e .elementor-heading-title {
        font-size: clamp(1.9rem, 8.5vw, 2.6rem) !important;
        line-height: 1.15 !important;
    }
}

/* ------------------------------------------------------------ negozio */

/* I collegamenti del negozio seguivano un magenta che non sta nel logo. */
.woocommerce a:not(.button):not(.elementor-button),
.woocommerce-page a:not(.button):not(.elementor-button) {
    color: var(--wiva-blu);
}

/* Il nome del prodotto nel carrello è un'informazione, non un invito a cliccare. */
.wc-block-components-product-name,
.woocommerce table.shop_table td.product-name a {
    color: var(--wiva-inchiostro) !important;
    text-decoration: none;
}

.wc-block-components-product-name:hover,
.woocommerce table.shop_table td.product-name a:hover {
    color: var(--wiva-blu) !important;
}