/*===================================================================
=   nelquotidiano.news — il foglio di stile del progetto            =
====================================================================*/

/*
   QUESTO È L'UNICO FOGLIO DI STILE NOSTRO. Tutto quello che il sito ha in più
   rispetto al tema comprato sta qui dentro, diviso in sezioni.

   Perché uno solo. I fogli erano tre — menu.css, footer.css, articolo.css — e
   l'1 agosto 2026 tutti e tre, uno dopo l'altro, sono rimasti indietro durante
   il caricamento sul server: il footer è comparso senza grafica, «Contatti» si
   è visto rosso, i tasti di condivisione si sono impilati in colonna. Ogni file
   nuovo è un file che si può dimenticare. Con uno solo, o c'è tutto o manca
   tutto — e manca in modo così vistoso che ci si accorge subito.

   Si carica per ULTIMO, dopo style.css e responsive.css: quelli sono i fogli
   del tema comprato e non vanno toccati, perché un loro aggiornamento
   riscriverebbe le modifiche. Qui si corregge, là mai.

   Come controllare che sia arrivato, dopo ogni caricamento:
       curl -s -o /dev/null -w "%{http_code}\n" \
            https://nelquotidiano.news/assets/css/nelquotidiano.css
   200 vuol dire che c'è, 404 che manca.

   Le sezioni:
       1. Menù di testata
       2. Footer: modulo newsletter, sezioni, modal delle preferenze
       3. Pagina dell'articolo: i tasti di condivisione
       4. Home: le sezioni in evidenza
       5. L'indice delle sezioni, nella colonna di fianco
*/


/*===================================================================
=  1. MENÙ DI TESTATA
===================================================================*/

/*
   Le correzioni al menù di testata. Due cose:
   1. la barra delle sezioni da tre righe a due;
   2. le tendine lunghe su più colonne, invece di una colonna sola che esce
      dallo schermo.

   Tutto sta dentro la soglia dei 992px, sopra la quale compare il menù di
   testata; sotto entra quello a scomparsa del telefono, che non si tocca.
   Le regole partono da .navbar-wrap, che nel menù del telefono non esiste
   (main.js:30 ne copia il contenuto, non il contenitore): il clone resta com'è.
*/

@media (min-width: 992px) {

    /*---------------------------------------------
    =   1. La barra delle sezioni: due righe       =
    ---------------------------------------------*/

    /* Le diciotto voci sommate superano di due volte e mezza la larghezza del
       contenitore: su una riga sola non ci stanno in nessun caso. Corpo e
       spaziature ridotti portano la riga da 70px a 37, e le voci da tre righe
       a due su tutti gli schermi da 1200px in su. */
    .menu-style-six .navbar-wrap {
        flex: 1;
    }

    .menu-style-six .navbar-wrap > ul {
        width: 100%;
        justify-content: center;
    }

    .menu-style-six .navbar-wrap > ul > li > a {
        font-size: 13px;
        padding: 12px 13px;
    }

    /* Il segnaposto che compensa il menù quando si stacca e resta in alto:
       il tema lo dava alto 95px, quanto il menù non è mai stato. */
    #header-fixed-height.active-height {
        height: 111px;
    }

    /*---------------------------------------------
    =   2. Le tendine lunghe, su più colonne       =
    ---------------------------------------------*/

    /* La classe la mette include.php contando le voci della sezione
       (funzione classe_colonne_sottomenu). Le sezioni fino a otto voci non
       ricevono niente e restano la colonna stretta del tema. */

    .navbar-wrap ul li .sub-menu[class*="sub-menu-"] {
        right: auto;                       /* il tema fissava left e right insieme */
        padding: 10px 4px;
        column-gap: 10px;
        column-rule: 1px solid #f1f1f1;
    }

    .navbar-wrap ul li .sub-menu-2 {
        width: min(480px, calc(100vw - 40px));
        column-count: 2;
    }

    .navbar-wrap ul li .sub-menu-3 {
        width: min(700px, calc(100vw - 40px));
        column-count: 3;
    }

    .navbar-wrap ul li .sub-menu-4 {
        width: min(900px, calc(100vw - 40px));
        column-count: 4;
    }

    .navbar-wrap ul li .sub-menu-6 {
        width: min(1280px, calc(100vw - 30px));
        column-count: 6;
    }

    /* Un pannello largo, aperto da una voce della prima riga, copre la seconda.
       Con un filo di ritardo il mouse che passa sopra per andare altrove non lo
       apre: si apre solo fermandocisi. La chiusura resta immediata. */
    .navbar-wrap ul li:hover > .sub-menu[class*="sub-menu-"] {
        transition-delay: 0.15s;
    }

    /* Una voce non deve spezzarsi fra il fondo di una colonna e la cima
       della successiva. */
    .navbar-wrap ul li .sub-menu[class*="sub-menu-"] li {
        break-inside: avoid;
        -webkit-column-break-inside: avoid;
    }

    /* Voci più strette e più fitte: con sei colonne lo spazio di ognuna è un
       sesto, e i nomi dei comuni sono lunghi. Nessuna altezza massima e nessuno
       scorrimento interno: un contenitore a colonne con l'altezza bloccata
       sposta le colonne di troppo di lato, non in basso, e sarebbero voci perse.
       Il pannello si tiene basso col numero di colonne: Cronaca, la più lunga,
       resta entro lo schermo di un portatile da 768px di altezza. */
    .navbar-wrap ul li .sub-menu[class*="sub-menu-"] li a {
        font-size: 13px;
        padding: 5px 8px 5px 16px;
    }

    .navbar-wrap ul li .sub-menu[class*="sub-menu-"] li a::before {
        left: 5px;
    }

}

/* Il contenitore del sito è largo 1320px fino a 1500 di finestra e 960 sotto
   i 1200 (responsive.css:76 e :421): la misura intermedia di Bootstrap, 1140,
   qui non esiste. Da 1200 in su le voci stanno in due righe, sotto restano
   tre — alte un terzo di prima. */
@media (min-width: 1200px) {
    #header-fixed-height.active-height {
        height: 74px;
    }
}

/* Tema scuro: il separatore fra le colonne, come il bordo delle tendine
   alla riga 6241 di style.css. */
[tg-theme=dark] .navbar-wrap ul li .sub-menu[class*="sub-menu-"] {
    column-rule-color: var(--tg-gray);
}

/*---------------------------------------------
=   3. I collegamenti di servizio in alto      =
---------------------------------------------*/

/*
   Nella barra alta, a destra delle notizie flash, dove prima c'era «Seguici -»
   coi social. Contatti non è una sezione del giornale: nella barra delle
   sezioni stava in mezzo a Cronaca e Sport come se lo fosse.

   Colori presi dagli stessi da cui li prendeva il blocco dei social
   (style.css:459): la barra ha lo sfondo scuro di --tg-secondary-color (di
   --tg-teal col tema scuro, style.css:6356), quindi il testo va bianco.

   ⚠ Il bianco e il grassetto stanno SOLO qui. Il tema colora ogni link di
   rosso #ce0400 e senza grassetto (style.css:154), quindi se questo foglio non
   arriva sul server, o resta nella cache del browser, «Contatti» si vede rosso
   e sottile sul blu: è il segno che manca questo foglio, non una scelta di stile.

   È una lista e non un solo link perché qui dovranno arrivare anche «Giochi» e
   «Accedi»: aggiungerli sarà un <li> in più, senza toccare il resto.
*/
.header-top-links-four {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.header-top-links-four .list-wrap {
    display: flex;
    align-items: center;
    gap: 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.header-top-links-four .list-wrap li a {
    color: var(--tg-white);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    line-height: 1;
    white-space: nowrap;
}

/* Col mouse sopra resta bianco. Il tema porterebbe ogni link al rosso
   (style.css:148), che su questa barra blu è illeggibile: la risposta al mouse
   la dà la sottolineatura, non il colore. */
.header-top-links-four .list-wrap li a:hover,
.header-top-links-four .list-wrap li a:focus {
    color: var(--tg-white);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Sotto i 992px entra il menù a scomparsa del telefono, che porta Contatti
   nella sua lista (il <li class="d-lg-none"> di include.php). Qui la barra
   alta sparirebbe comunque sotto i 768 (responsive.css:1031): senza questa
   regola, fra 768 e 991 Contatti si vedrebbe due volte. */
@media (max-width: 991.98px) {
    .header-top-links-four {
        display: none;
    }
}


/*===================================================================
=  2. FOOTER
===================================================================*/

/*
   Le parti nuove del footer — il modulo di iscrizione, l'elenco delle sezioni
   su due colonnine, i social — e il modal delle preferenze.

   I colori sono quelli del tema (--tg-*): il footer del sito è chiaro, con i
   titoli nel blu della testata e l'accento rosso.
*/

/*---------------------------------------------
=   Il modulo di iscrizione                    =
---------------------------------------------*/

.footer-newsletter {
    margin-top: 28px;
    max-width: 420px;
}

.footer-newsletter .fw-title {
    font-size: 18px;
}

.footer-newsletter-invito {
    color: var(--tg-body-font-color);
    font-size: 15px;
    margin-bottom: 14px;
}

.footer-newsletter-campi {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.footer-newsletter-campi input {
    /* 130 e non 150: due campi da 150 più lo spazio in mezzo fanno 308px, e la
       colonna ne offre 300. Per otto pixel andavano a capo tutti e due. */
    flex: 1 1 130px;
    min-width: 0;                  /* senza, i campi in riga non si stringono */
    border: 1px solid var(--tg-gray);
    border-radius: 4px;
    padding: 10px 12px;
    font-size: 15px;
    background: var(--tg-white);
    color: var(--tg-heading-font-color);
}

.footer-newsletter-campi input:focus {
    outline: none;
    border-color: var(--tg-secondary-color);
}

.footer-newsletter-privacy {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 12px 0 14px;
    font-size: 14px;
    line-height: 1.4;
    color: var(--tg-body-font-color);
    cursor: pointer;
}

.footer-newsletter-privacy input {
    margin-top: 3px;
    flex-shrink: 0;
}

.footer-newsletter-privacy a {
    color: var(--tg-secondary-color);
    text-decoration: underline;
}

/* Il campo esca non deve vedersi né finire sotto il cursore di chi naviga da
   tastiera: display:none lo escluderebbe da certi programmi automatici, che
   proprio per questo lo riconoscono. Meglio toglierlo di vista. */
.footer-newsletter-esca {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.footer-newsletter-esito {
    font-size: 14px;
    margin: 10px 0 0;
    min-height: 1em;
}

/* La casella è il consenso; questa riga dice a cosa serve l'indirizzo e come
   si esce. È buona educazione prima che adempimento, e sta sotto il pulsante
   perché non deve pesare quanto il modulo. */
.footer-newsletter-nota {
    font-size: 13px;
    line-height: 1.5;
    color: var(--tg-body-font-color);
    opacity: 0.8;
    margin: 12px 0 0;
}

.footer-newsletter-nota a {
    color: var(--tg-secondary-color);
    text-decoration: underline;
}

.footer-newsletter-esito.esito-ok {
    color: #1c7c3f;
}

.footer-newsletter-esito.esito-no {
    color: var(--tg-primary-color);
}

/*---------------------------------------------
=   Le sezioni e i social                      =
---------------------------------------------*/

/* Otto voci in colonna sarebbero una lista lunga in un footer basso: due
   colonnine le tengono all'altezza delle altre parti. */
.footer-sezioni .list-wrap {
    column-count: 2;
    column-gap: 20px;
}

.footer-link-servizio {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--tg-border-color);
}

.footer-social {
    display: flex;
    gap: 12px;
    margin-top: 18px;
    padding: 0;
    list-style: none;
}

.footer-social li a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--tg-gray);
    color: var(--tg-secondary-color);
    font-size: 15px;
    transition: all 0.3s ease;
}

.footer-social li a:hover {
    background: var(--tg-primary-color);
    border-color: var(--tg-primary-color);
    color: var(--tg-white);
}

/*---------------------------------------------
=   Il modal delle sezioni preferite           =
---------------------------------------------*/

.preferenze-elenco {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 6px 16px;
    margin-top: 10px;
}

.preferenza-sezione {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    color: var(--tg-heading-font-color);
    cursor: pointer;
    margin: 0;
}

.preferenza-tutte {
    font-weight: 700;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--tg-border-color);
}

#modalPreferenzeNewsletter .modal-title {
    color: var(--tg-secondary-color);
    font-weight: 800;
}

/* Il tema veste .btn di rosso: il pulsante di rinuncia non deve gridare
   quanto quello che salva. */
.btn-chiaro {
    background: transparent;
    border: 1px solid var(--tg-gray);
    color: var(--tg-body-font-color);
    padding: 10px 20px;
    border-radius: 4px;
    text-transform: none;   /* il tema fa «Non Adesso» di «Non adesso» */
}

.btn-chiaro:hover {
    border-color: var(--tg-secondary-color);
    color: var(--tg-secondary-color);
}

/*---------------------------------------------
=   Schermi stretti                            =
---------------------------------------------*/

@media (max-width: 767.98px) {
    .footer-newsletter {
        margin-top: 24px;
        max-width: none;
    }

    /* In colonna: due campi affiancati su un telefono diventano illeggibili. */
    .footer-newsletter-campi input {
        flex: 1 1 100%;
    }

    .footer-social {
        margin-bottom: 24px;
    }
}


/*===================================================================
=  3. PAGINA DELL'ARTICOLO
===================================================================*/

/*
   Le correzioni alla pagina dell'articolo. Per ora una cosa sola: i tasti di
   condivisione uguali sopra e sotto.

   ⚠ Se i tasti sopra l'articolo si vedono come quadrati colorati (Facebook blu,
   WhatsApp verde) invece che come icone grigie, questo foglio non è arrivato sul
   server o è rimasto nella cache del browser.
*/

/*---------------------------------------------
=   I tasti di condivisione                    =
---------------------------------------------*/

/*
   Erano due elenchi diversi: sopra quattro icone a riquadri colorati, sotto sei
   icone grigie con la scritta «Condividi:». Ora il markup è uno solo
   (articoli-dett.php, $tasti_condivisione) e lo stile pure.

   Il selettore nomina anche la forma del tema (.blog-details-bottom .post-share)
   perché quella è più specifica e altrimenti vincerebbe lei: così i valori
   stanno scritti in un posto solo e i due gruppi non possono più separarsi.
   Sono gli stessi numeri di style.css:5319 — non è un cambio di aspetto, è lo
   stesso aspetto reso condivisibile.
*/
.post-share,
.blog-details-bottom .post-share {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}

.post-share .title,
.blog-details-bottom .post-share .title {
    font-size: 16px;
    margin-bottom: 0;
    font-weight: 600;
}

.post-share .list-wrap,
.blog-details-bottom .post-share .list-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.post-share .list-wrap li a,
.blog-details-bottom .post-share .list-wrap li a {
    font-size: 16px;
    color: var(--tg-icon-color);
}

.post-share .list-wrap li a:hover,
.post-share .list-wrap li a:focus,
.blog-details-bottom .post-share .list-wrap li a:hover {
    color: var(--tg-primary-color);
}

/* Sopra l'articolo la fila sta in fondo alla riga dell'autore e della data:
   .bd-content-inner è un flex con space-between (style.css:5112), quindi il
   meta va a sinistra e questa a destra. È la posizione che il tema aveva già
   previsto lì, e va bene: cambia il vestito delle icone, non dove stanno.
   Niente margini aggiuntivi, che in una riga allineata al centro sposterebbero
   la fila rispetto al meta. */
.post-share-top .post-share {
    margin-bottom: 0;
}

/* Tema scuro: le icone chiare, come già fa il tema per quelle in fondo
   (style.css:6500). */
[tg-theme=dark] .post-share .list-wrap li a {
    color: var(--tg-white);
}

[tg-theme=dark] .post-share .list-wrap li a:hover {
    color: var(--tg-primary-color);
}


/*===================================================================
=  4. HOME: LE SEZIONI IN EVIDENZA
===================================================================*/

/*
   I quattro blocchi delle macrocategorie in evidenza — Cronaca, Dalle città,
   Esteri, Cultura — sembravano riquadri di pubblicità. Non era un'impressione
   vaga: erano fatti con gli stessi tre ingredienti dei riquadri «Contenuti
   sponsorizzati» che si trovano in fondo agli articoli in giro per il web.

   1. Un'etichettina grigia in maiuscolo sopra ogni titolo. Tolta da
      index.php: ripeteva il nome della sezione dentro la sezione stessa.
   2. La foto piccola e QUADRATA. Ora è 4:3, cioè la proporzione di una
      fotografia, non di un banner.
   3. La foto a DESTRA del titolo (flex-direction: row-reverse nel tema).
      Nei giornali la foto sta a sinistra e il testo la segue: si legge da
      sinistra, e l'occhio parte dall'immagine.

   Le due regole qui sotto valgono solo per .horizontal-post-four, che nel sito
   esiste unicamente dentro questi blocchi (verificato: due usi in index.php,
   tutti e due nelle sezioni in evidenza).
*/

/* La foto torna a sinistra. */
.horizontal-post-four {
    flex-direction: row;
}

/* Da quadrata a 4:3. Servono tre cose insieme, e da sole non bastano:
   - align-self, perché il contenitore è un flex e senza questo la foto
     viene stirata fino all'altezza del titolo (misurato: 120x193 invece
     di 120x90) e l'aspect-ratio non entra nemmeno in gioco;
   - aspect-ratio, la proporzione vera;
   - min-height azzerato sull'immagine, che il tema fissava a 100px. */
.horizontal-post-thumb-four {
    width: 120px;
    aspect-ratio: 4 / 3;
    align-self: flex-start;
}

.horizontal-post-thumb-four img {
    min-height: 0;
    height: 100%;
}


/*===================================================================
=  5. L'INDICE DELLE SEZIONI, NELLA COLONNA DI FIANCO
===================================================================*/

/*
   Il riquadro «Categorie in Evidenza» della scheda articolo e delle pagine di
   sezione. Era una pila di sedici lastroni blu pieni, alti 80px, ognuno con una
   pastiglia e una freccia diagonale: milleseicento pixel di rettangoli colorati
   in colonna, con una pubblicità vera subito sotto. Sembrava una fila di banner,
   e la pastiglia era lo stesso componente (.post-tag) con cui altrove si marcano
   gli articoli sponsorizzati.

   Il tema quei riquadri li voleva con una FOTO di sfondo e una sfumatura sopra
   (style.css: background-size: cover, e un gradient poi commentato). La foto non
   c'è mai stata, e al posto della sfumatura è rimasto un colore pieno: un
   riquadro fotografico senza la fotografia.

   Adesso è quello che è sempre stato: l'indice delle sezioni del giornale. Un
   elenco di nomi con una riga sottile fra l'uno e l'altro, come l'indice di un
   quotidiano. Nessun rettangolo, nessuna freccia, nessuna pastiglia.

   L'unico tocco: passando sopra, il nome diventa rosso e a sinistra entra una
   lineetta rossa — la stessa che il sito mette sotto ogni titolo di sezione
   (.section-title-line). È un segno che il giornale già usa, non uno inventato.
*/

.sidebar-categories .list-wrap li {
    margin-bottom: 0;
}

/* Si smonta il riquadro del tema: niente sfondo, niente angoli tondi, niente
   altezza minima. Resta una riga di elenco. */
.sidebar-categories .list-wrap li a {
    position: relative;
    display: block;
    padding: 7px 0 7px 12px;
    min-height: 0;
    border-radius: 0;
    background: none;
    border-bottom: 1px solid #E6E6E6;
    font-family: var(--tg-heading-font-family);
    /* Maiuscoletto: le minuscole diventano maiuscole piccole, quindi il testo
       "cala" di suo. Il corpo sale a 16 e la spaziatura si allarga di un filo,
       altrimenti le sedici voci diventano una fila di lettere strette. */
    font-variant-caps: small-caps;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.4px;
    line-height: 1.3;
    color: var(--tg-secondary-color);
    text-transform: none;
    transition: color .2s ease-out;
}

/* Il colore pieno del tema arrivava da uno pseudo-elemento sotto il testo. */
.sidebar-categories .list-wrap li a::after {
    content: none;
}

.sidebar-categories .list-wrap li:last-child a {
    border-bottom: none;
}

/* La lineetta rossa che entra da sinistra. */
.sidebar-categories .list-wrap li a::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 3px;
    height: 0;
    background: var(--tg-primary-color);
    transform: translateY(-50%);
    transition: height .2s ease-out;
}

.sidebar-categories .list-wrap li a:hover,
.sidebar-categories .list-wrap li a:focus-visible {
    color: var(--tg-primary-color);
}

.sidebar-categories .list-wrap li a:hover::before,
.sidebar-categories .list-wrap li a:focus-visible::before {
    height: 60%;
}

/* Tema scuro: le righe chiare su fondo scuro, il separatore appena accennato. */
[tg-theme=dark] .sidebar-categories .list-wrap li a {
    color: var(--tg-white);
    border-bottom-color: var(--tg-gray);
}

[tg-theme=dark] .sidebar-categories .list-wrap li a:hover,
[tg-theme=dark] .sidebar-categories .list-wrap li a:focus-visible {
    color: var(--tg-primary-color);
}

/* Chi ha chiesto meno animazioni non vede entrare niente. */
@media (prefers-reduced-motion: reduce) {
    .sidebar-categories .list-wrap li a,
    .sidebar-categories .list-wrap li a::before {
        transition: none;
    }
}