/*
 * BLOG — aspetto allineato al sito principale.
 *
 * Stessa famiglia del resto di OrizzonteSconti: azzurro #bde4ff, riquadri
 * bianchi con bordo chiaro e angoli da 10px, fascia del titolo con il filetto
 * blu a sinistra e l'angolo di condivisione.
 *
 * Sostituisce il tema che il blog si portava dietro: quello aveva un impianto
 * suo, e le due parti del sito sembravano due siti diversi.
 */

:root {
    --azzurro: #bde4ff;
    --blu: #0b63c5;
    --scuro: #12293f;
    --testo: #3d4d5e;
    --bordo: #d9e6f2;
    --sfondo: #eef4f9;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--sfondo);
    color: var(--testo);
    font: 16px/1.65 system-ui, -apple-system, "Segoe UI", sans-serif;
}

img { max-width: 100%; }

a { color: var(--blu); }

/* ---------------- testata ---------------- */

.testata {
    position: sticky;
    top: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 18px;
    background: var(--azzurro);
    border-bottom: 1px solid #a5d0ee;
}

.testata .marchio {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--scuro);
    font-weight: 800;
    font-size: 1.1rem;
}

.testata .marchio img { height: 40px; }

.testata .menu { display: flex; gap: 18px; }

.testata .menu a {
    color: var(--scuro);
    text-decoration: none;
    font-weight: 600;
}

.testata .menu a:hover { text-decoration: underline; }

/* ---------------- struttura ---------------- */

.contenuto {
    max-width: 900px;
    margin: 0 auto;
    padding: 18px 14px 40px;
}

.riquadro {
    background: #fff;
    border: 1px solid var(--bordo);
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(16, 42, 67, .07);
    padding: 18px 22px;
    margin-bottom: 16px;
}

.riquadro h2 {
    font-size: 1.2rem;
    color: var(--scuro);
    margin: 0 0 12px;
}

.centrato { text-align: center; }
.minuto { font-size: .85rem; color: #6b7a8c; }

/* ---------------- fascia del titolo ----------------
   Le stesse classi del sito, ridefinite qui perché il blog non carica
   navbar/style.css: ha una sua struttura e non gli serve il resto. */

.cat-bar {
    position: relative;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 auto 16px;
    padding: 14px 46px 14px 16px;
    background: #fff;
    border: 1px solid var(--bordo);
    border-left: 4px solid var(--blu);
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(16, 42, 67, .07);
    overflow: hidden;
}

.cat-nome {
    flex: 0 1 auto;
    min-width: 0;
    margin: 0;
    font-size: clamp(1.25rem, 1.1rem + 1vw, 1.9rem);
    font-weight: 800;
    line-height: 1.2;
    color: var(--scuro);
}

.cat-num {
    flex: 0 0 auto;
    padding: 3px 11px;
    border-radius: 999px;
    background: #eaf3ff;
    color: var(--blu);
    font-size: .85rem;
    font-weight: 700;
    white-space: nowrap;
}

.cat-sub {
    flex: 1 1 100%;
    color: #5d6f83;
    font-size: .95rem;
    line-height: 1.3;
}

/* Angolo di condivisione: stessa ricetta delle card delle offerte. */
.cat-share {
    position: absolute;
    top: 0;
    right: 0;
    width: 46px;
    height: 50px;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
}

.cat-share::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 46px 50px 0;
    border-color: transparent var(--azzurro) transparent transparent;
    border-radius: 0 10px 0 0;
    transition: border-color 1.5s;
}

.cat-share:hover::before {
    border-color: transparent deepskyblue transparent transparent;
}

.cat-share i {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 1;
    font-size: 1rem;
    color: var(--scuro);
}

.cat-share svg { display: none; }
.cat-share.copiato i::after { content: " ✓"; }

/* ---------------- articolo ---------------- */

.autore-riga {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
}

.autore-riga .avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
}

.immagine-articolo {
    width: 100%;
    border-radius: 8px;
    margin-bottom: 16px;
}

.occhiello {
    font-size: 1.08rem;
    color: var(--scuro);
    font-weight: 600;
    margin: 0 0 18px;
}

.indice {
    background: var(--sfondo);
    border-radius: 8px;
    padding: 14px 18px;
    margin-bottom: 22px;
}

.indice h2 { font-size: 1rem; margin: 0 0 8px; }
.indice ol { margin: 0; padding-left: 20px; }
.indice li { margin: 4px 0; }
.indice a { text-decoration: none; }
.indice a:hover { text-decoration: underline; }

.testo h2, .testo h3 {
    color: var(--scuro);
    margin: 28px 0 10px;
    scroll-margin-top: 80px;
}

.testo h2 { font-size: 1.35rem; }
.testo h3 { font-size: 1.15rem; }
.testo p { margin: 0 0 14px; }
.testo ul, .testo ol { margin: 0 0 14px; padding-left: 22px; }
.testo img { border-radius: 8px; }

/* ---------------- vetrine di prodotti ---------------- */

.vetrina {
    margin: 20px 0 26px;
    padding: 14px;
    background: var(--sfondo);
    border-radius: 10px;
}

.vetrina-titolo {
    margin: 0 0 10px;
    font-weight: 700;
    color: var(--scuro);
    font-size: .95rem;
}

.vetrina-titolo span {
    font-weight: 400;
    color: #6b7a8c;
    font-size: .82rem;
}

/*
 * In fila con scorrimento orizzontale invece che incolonnati: alcuni articoli
 * hanno decine di prodotti, e messi uno sotto l'altro allontanavano il testo
 * che veniva dopo.
 */
.vetrina-scorri {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 6px;
    scroll-snap-type: x proximity;
}

.prodotto {
    flex: 0 0 150px;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 12px 10px;
    background: #fff;
    border: 1px solid var(--bordo);
    border-radius: 10px;
    text-decoration: none;
    color: var(--testo);
    transition: transform .15s ease, box-shadow .15s ease;
}

.prodotto:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(16, 42, 67, .12);
}

.prodotto img {
    width: 110px;
    height: 110px;
    object-fit: contain;
}

.prodotto span {
    font-size: .82rem;
    text-align: center;
    line-height: 1.3;
}

/* ---------------- parole cliccabili ---------------- */

.parola-cerca {
    display: inline;
    padding: 0 2px;
    border: none;
    background: linear-gradient(transparent 62%, #ffe9a8 62%);
    color: inherit;
    font: inherit;
    cursor: pointer;
    border-radius: 3px;
}

.parola-cerca i {
    font-size: .78em;
    margin-left: 3px;
    color: var(--blu);
}

.parola-cerca:hover { background: #ffe08a; }

/* ---------------- griglia articoli ---------------- */

.griglia-articoli {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
}

.griglia-articoli.grande {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.scheda {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--bordo);
    border-radius: 10px;
    overflow: hidden;
    text-decoration: none;
    color: var(--testo);
    transition: transform .15s ease, box-shadow .15s ease;
}

.scheda:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(16, 42, 67, .14);
}

.scheda img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
}

.scheda time {
    font-size: .8rem;
    color: #6b7a8c;
    padding: 10px 14px 0;
}

.scheda h2, .scheda h3 {
    font-size: 1.02rem;
    color: var(--scuro);
    margin: 4px 14px 6px;
    line-height: 1.3;
}

.scheda p {
    margin: 0 14px 14px;
    font-size: .88rem;
    /* tre righe e poi basta: le schede restano tutte della stessa altezza */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ---------------- bottoni ---------------- */

.bottone {
    display: inline-block;
    padding: 10px 18px;
    border: 1px solid var(--blu);
    border-radius: 8px;
    background: var(--blu);
    color: #fff;
    font: 600 15px/1 system-ui, sans-serif;
    text-decoration: none;
    cursor: pointer;
}

.bottone:hover { background: #0a559f; }

.bottone.chiaro {
    background: #fff;
    color: var(--scuro);
    border-color: var(--bordo);
}

.bottone.chiaro:hover { background: #f4f9fd; }

/* ---------------- pagina non trovata ---------------- */

.vuoto {
    text-align: center;
    padding: 40px 22px;
}

.vuoto h1 {
    font-size: 1.4rem;
    color: var(--scuro);
    margin: 0 0 10px;
}

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

.pie {
    background: var(--azzurro);
    border-top: 1px solid #a5d0ee;
    padding: 22px 14px;
    text-align: center;
}

.pie .dentro { max-width: 900px; margin: 0 auto; }
.pie a { color: var(--scuro); font-weight: 600; }

/* ---------------- torna su ---------------- */

/*
 * Sta sopra il badge di iubenda, non sotto: quello e' fisso nello stesso
 * angolo, alto 38px a 16px dal fondo, e con bottom:16px i due si coprivano
 * a vicenda. 70px lo lasciano libero con un margine di respiro.
 */
.torna-su {
    position: fixed;
    right: 16px;
    bottom: 70px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--bordo);
    background: #fff;
    color: var(--scuro);
    font-size: 1.1rem;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
    box-shadow: 0 4px 14px rgba(16, 42, 67, .18);
}

.torna-su.visibile {
    opacity: 1;
    pointer-events: auto;
}

/* ---------------- avvisi iPhone e Facebook ----------------
   Il markup di alerts.html porta gli stili in attributo: qui si limita solo la
   larghezza delle immagini, che altrimenti escono dal riquadro. */

#myiphonediv img, #FACEBOOKBROWSER img {
    border-radius: 8px;
    margin: 6px 0;
}

@media (max-width: 600px) {
    .contenuto { padding: 12px 10px 30px; }
    .riquadro { padding: 14px 16px; }
    .prodotto { flex-basis: 130px; }
    .prodotto img { width: 92px; height: 92px; }
}

/*
 * Indice di articoli che hanno i titoli gia numerati a mano: l'elenco rinuncia
 * ai propri numeri, altrimenti si legge "1. 1. Deumidificatori elettrici".
 */
.indice ol.senza-numeri {
    list-style: none;
    padding-left: 4px;
}

/* ---------------- ricerca negli articoli ---------------- */

.cerca-blog {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 14px;
    padding: 8px 14px;
    background: #fff;
    border: 1px solid var(--bordo);
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(16, 42, 67, .07);
}

.cerca-blog i { color: #6b7a8c; }

.cerca-blog input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: none;
    font: inherit;
    color: var(--testo);
    padding: 6px 0;
}

/* La × nativa di Chrome su input[type=search] farebbe il paio con la nostra. */
.cerca-blog input[type="search"]::-webkit-search-cancel-button { display: none; }

.cerca-blog .pulisci {
    text-decoration: none;
    color: #6b7a8c;
    font-size: 1.3rem;
    line-height: 1;
    padding: 0 4px;
}

.cerca-blog button {
    padding: 8px 16px;
    border: none;
    border-radius: 8px;
    background: var(--blu);
    color: #fff;
    font: 600 14px system-ui, sans-serif;
    cursor: pointer;
}

.cerca-blog button:hover { background: #0a559f; }

.esito-ricerca {
    margin: 0 0 14px;
    padding: 0 4px;
    color: #6b7a8c;
    font-size: .92rem;
}

/* Mentre la ricerca corre l'elenco sbiadisce appena: fa capire che i risultati
   che stai guardando non sono ancora quelli buoni, senza spostare nulla. */
.griglia-articoli.in-attesa {
    opacity: .45;
    transition: opacity .12s;
}

/* Il ritorno al blog dall'articolo. */
.torna-blog {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 10px;
    padding: 7px 14px;
    background: #fff;
    border: 1px solid var(--bordo);
    border-radius: 999px;
    color: var(--blu);
    font-weight: 600;
    font-size: .9rem;
    text-decoration: none;
    box-shadow: 0 1px 3px rgba(16, 42, 67, .07);
}

.torna-blog:hover {
    background: var(--blu);
    border-color: var(--blu);
    color: #fff;
}

/* ---------- fascia dell'anteprima ---------- */

/*
 * Compare solo quando un articolo non pubblicato viene aperto con
 * ?anteprima=1 da chi ha la sessione del pannello. Deve stonare di proposito:
 * se somigliasse al resto della pagina non servirebbe a niente.
 */
.fascia-anteprima {
    margin: 0 0 18px;
    padding: 12px 16px;
    border: 2px dashed #e8a33d;
    border-radius: 10px;
    background: #fff8ec;
    color: #6b4a12;
    font-size: .95rem;
    line-height: 1.5;
}

.fascia-anteprima strong { color: #a35d00; }

@media (prefers-color-scheme: dark) {
    .fascia-anteprima {
        background: #2a2214;
        color: #f0d9ab;
        border-color: #a37a2e;
    }
    .fascia-anteprima strong { color: #f6c469; }
}