/*
Theme Name: SGRnet
Theme URI: https://www.sangiovannirotondonet.it
Author: SanGiovanniRotondoNET.it
Description: Tema a blocchi su misura per SanGiovanniRotondoNET.it, giornale locale online dal 2006. Nessun page builder, font auto-ospitato, pensato per un archivio di quindicimila articoli.
Version: 0.1.0
Requires at least: 6.5
Tested up to: 6.9
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sgrnet
Tags: news, blog, block-theme, full-site-editing
*/

/* Il grosso dello stile vive in theme.json. Qui solo cio che theme.json non copre. */

.sgrnet-logo {
  display: block;
  width: auto;
  height: 44px;
}

@media (max-width: 599px) {
  .sgrnet-logo { height: 34px; }
}

/* Ricerca nell'intestazione: campo compatto con la lente dentro.
   Volutamente senza JavaScript: la ricerca a scomparsa dipende da uno script
   che si aggancia in modo inaffidabile, e su un archivio di quindicimila
   articoli conviene comunque che il campo si veda subito. */
.sgrnet-cerca .wp-block-search__inside-wrapper {
  border: 1px solid var(--wp--preset--color--bordo);
  border-radius: 999px;
  padding: 2px 2px 2px 14px;
  background: var(--wp--preset--color--superficie);
}

.sgrnet-cerca .wp-block-search__inside-wrapper:focus-within {
  border-color: var(--wp--preset--color--primario);
  background: #fff;
}

.sgrnet-cerca .wp-block-search__input {
  border: 0;
  background: transparent;
  font-size: 0.875rem;
  padding: 0.35rem 0;
}

.sgrnet-cerca .wp-block-search__input:focus {
  outline: none;
}

.sgrnet-cerca .wp-block-search__button {
  background: transparent;
  border: 0;
  padding: 0 8px;
  color: var(--wp--preset--color--primario);
  min-width: 0;
}

.sgrnet-cerca .wp-block-search__button svg {
  width: 21px;
  height: 21px;
  fill: currentColor;
}

.sgrnet-cerca .wp-block-search__button:hover {
  background: transparent;
  color: var(--wp--preset--color--accento);
}

/* Occhiello di categoria sopra i titoli */
.sgrnet-occhiello a {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--sgrnet-sezione-testo, var(--wp--preset--color--accento-testo));
  text-decoration: none;
}

.sgrnet-occhiello a:hover { text-decoration: underline; }

/* I titoli degli articoli in elenco non devono ereditare il blu dei link */
.sgrnet-scheda .wp-block-post-title a {
  color: var(--wp--preset--color--testo);
}

.sgrnet-scheda .wp-block-post-title a:hover {
  color: var(--wp--preset--color--primario);
  text-decoration: none;
}

/* Immagini in evidenza: proporzione costante, evita salti di layout.
   840/440 non e' un numero scelto a caso: e' la misura con cui la redazione
   prepara le foto. Con 16/10 il riquadro era piu alto della foto, quindi
   `cover` la ingrandiva e ne tagliava il 16% sui lati — sembrava uno zoom.
   Facendo coincidere le due proporzioni, le foto moderne si vedono intere. */
.sgrnet-scheda .wp-block-post-featured-image img {
  aspect-ratio: 840 / 440;
  object-fit: cover;
  width: 100%;
  border-radius: 8px;
}

/* Apertura: immagine panoramica, il titolo deve dominare.
   Era 3:2 su una colonna del 58%: veniva 696x464, il 64% dell'altezza di uno
   schermo da 1280x720, e sopra la piega non entrava nient'altro. Con 16:9 su
   una colonna del 50% scende a circa 600x338. */
.sgrnet-apertura .wp-block-post-featured-image img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  width: 100%;
  border-radius: 10px;
}

.sgrnet-apertura .wp-block-post-title a {
  color: var(--wp--preset--color--testo);
}

.sgrnet-apertura .wp-block-post-title a:hover {
  color: var(--wp--preset--color--primario);
  text-decoration: none;
}

/* Titoli lunghi: due gradini piu' in basso.
   La misura "apertura" e' fluida sulla larghezza della finestra, ma non sa
   quanto e' lungo il titolo: "Virtual...Mente" e un titolo da novantaquattro
   caratteri venivano scritti alla stessa altezza, e il secondo si mangiava la
   prima pagina. La classe la mette `sgrnet_apertura_titolo_misura()` contando
   i caratteri. Le soglie, e i numeri da cui vengono, stanno li'.

   L'`!important` non e' pigrizia: WordPress scrive da se'
   `.has-apertura-font-size { font-size: ... !important }` fra gli stili
   generati, e contro un `!important` la specificita' non puo' niente. L'unica
   alternativa sarebbe togliere al blocco la misura dall'editor, e allora il
   titolo perderebbe la sua misura di partenza. */
.sgrnet-apertura .wp-block-post-title.sgrnet-apertura__titolo--lungo {
  font-size: clamp(1.75rem, 1.35rem + 1.6vw, 2.5rem) !important;
}

.sgrnet-apertura .wp-block-post-title.sgrnet-apertura__titolo--lunghissimo {
  font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2.125rem) !important;
  line-height: 1.2;
}

/* Sotto i 782px le colonne si impilano: l'immagine non deve diventare enorme */
@media (max-width: 781px) {
  .sgrnet-apertura .wp-block-post-featured-image img { aspect-ratio: 16 / 10; }
}

/* Giostra dell'apertura.
   Senza JavaScript resta visibile il primo articolo e basta: la home non si
   riempie di cinque aperture impilate. Con JavaScript comanda .is-attiva. */
.sgrnet-giostra .wp-block-post-template > li:not(:first-child) {
  display: none;
}

.sgrnet-giostra.is-pronta .wp-block-post-template > li {
  display: none;
}

.sgrnet-giostra.is-pronta .wp-block-post-template > li.is-attiva {
  display: block;
  animation: sgrnet-comparsa 0.4s ease;
}

@keyframes sgrnet-comparsa {
  from { opacity: 0; }
  to { opacity: 1; }
}

.sgrnet-giostra__punti {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  margin-top: 1rem;
}

.sgrnet-giostra__punto {
  width: 32px;
  height: 4px;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: var(--wp--preset--color--bordo);
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.sgrnet-giostra__punto[aria-current="true"] {
  background: var(--wp--preset--color--accento);
}

.sgrnet-giostra__punto:hover {
  background: var(--wp--preset--color--primario);
}

.sgrnet-giostra__punto:focus-visible {
  outline: 2px solid var(--wp--preset--color--primario);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .sgrnet-giostra.is-pronta .wp-block-post-template > li.is-attiva { animation: none; }
}

/* Immagini dentro gli articoli: tetto di 840x440.
   E' un tetto, non un ritaglio: le proporzioni restano quelle originali e una
   foto verticale si rimpicciolisce invece di essere tagliata a meta'. I file
   sul disco non si toccano, quindi si torna indietro cancellando queste righe.
   In larghezza la colonna dell'articolo e' gia' 760px: quello che morde
   davvero e' l'altezza. */
.wp-block-post-content img,
.sgrnet-foto-articolo img {
  max-width: min(100%, 840px);
  max-height: 440px;
  width: auto;
  height: auto;
}

/* Rimpicciolita, l'immagine va centrata: appoggiata a sinistra sembrerebbe
   sfuggita all'impaginazione. Vale anche per quella in evidenza, che sta fuori
   dal contenuto e senza questa riga restava incollata al bordo sinistro. */
.wp-block-post-content img,
.wp-block-post-content figure,
.wp-block-post-content .wp-caption,
.sgrnet-foto-articolo,
.sgrnet-foto-articolo img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  float: none;
}

.wp-block-post-content figure img { margin-left: auto; margin-right: auto; }

/* Le gallerie sono anche loro `figure`, e la regola qui sopra gli toglieva
   l'impaginazione a colonne: le fotografie finivano una sotto l'altra invece
   che affiancate. Qui si restituisce alla galleria — e ai riquadri dentro —
   il comportamento che WordPress gli da' di suo. */
.wp-block-post-content figure.wp-block-gallery {
  display: flex;
  flex-wrap: wrap;
}

.wp-block-post-content .wp-block-gallery figure {
  display: flex;
  margin: 0;
}

/* -------------------------------------------------------------------------
 * Il tasto "Scarica" accanto ai documenti
 *
 * WordPress, di suo, scrive questa riga:
 *
 *   :where(.wp-block-file__button):where(a):hover,:focus,:active,:visited
 *     { color: #fff }
 *
 * cioe' da' per scontato che il tasto abbia uno sfondo scuro. Da noi lo sfondo
 * non c'era, e quindi al passaggio del mouse la scritta diventava bianca su
 * bianco: il tasto spariva. E spariva anche dopo averlo premuto una volta,
 * perche' quella riga vale pure per `:visited`.
 *
 * Qui gli si da' lo sfondo arancione che la riga di WordPress presupponeva.
 * L'arancione e' quello gia' usato per il testo (#B54700, non #F06000): sul
 * bianco della scritta fa 5,4 a 1, mentre l'arancione acceso si fermerebbe a
 * 3,3 e per un carattere piccolo non basta.
 * ---------------------------------------------------------------------- */
.wp-block-post-content .wp-block-file__button,
.wp-block-post-content .wp-block-file__button:visited {
  background: var(--wp--preset--color--accento-testo);
  color: var(--wp--preset--color--base);
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

/* Sopra il tasto si scurisce, non si schiarisce: l'opacita' che mette
   WordPress lo sbiadiva, e sbiadire e' il contrario di "sono qui". */
.wp-block-post-content .wp-block-file__button:hover,
.wp-block-post-content .wp-block-file__button:focus,
.wp-block-post-content .wp-block-file__button:active {
  background: #933900;
  color: var(--wp--preset--color--base);
  opacity: 1;
}

.wp-block-post-content .wp-block-file__button:focus-visible {
  outline: 2px solid var(--wp--preset--color--primario);
  outline-offset: 3px;
}

/* -------------------------------------------------------------------------
 * Gli argomenti in fondo all'articolo
 *
 * Erano una riga di parole separate da virgole, in grigio piccolo: si leggevano
 * come una nota a pie' di pagina, e nessuno capiva che erano da premere. Il
 * sito vecchio li dava come etichette, ed e' il modo giusto — un'etichetta si
 * vede che e' un tasto.
 * ---------------------------------------------------------------------- */

.taxonomy-post_tag {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}

/* Le virgole fra un'etichetta e l'altra: con i riquadri sono di troppo.
   Restano nella pagina — le toglie il disegno, non il contenuto — perche' chi
   legge con il lettore di schermo sente comunque un elenco separato. */
.taxonomy-post_tag .wp-block-post-terms__separator { display: none; }

.taxonomy-post_tag .wp-block-post-terms__prefix {
  margin-right: 0.15rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--wp--preset--color--testo-tenue);
}

.taxonomy-post_tag a {
  display: inline-block;
  padding: 0.3rem 0.75rem;
  border: 1px solid var(--wp--preset--color--bordo);

  /* Tonde: le distingue dai rettangoli delle sezioni, che vogliono dire
     un'altra cosa. */
  border-radius: 999px;
  background: var(--wp--preset--color--superficie);
  color: var(--wp--preset--color--testo-secondario);
  text-decoration: none;
  line-height: 1.25;
}

@media not (prefers-reduced-motion) {
  .taxonomy-post_tag a { transition: background-color .15s, border-color .15s, color .15s; }
}

.taxonomy-post_tag a:hover,
.taxonomy-post_tag a:focus-visible {
  background: var(--wp--preset--color--primario);
  border-color: var(--wp--preset--color--primario);
  color: #fff;
}

/* I numeri di pagina della home vanno in fondo alla colonna.
   Stanno dentro il blocco della griglia, che e' il primo della colonna: senza
   questo finivano a meta' pagina, prima delle fasce di sezione, dove nessuno
   li cercava. La colonna diventa una pila ordinata e la paginazione va per
   ultima, come negli archivi. */
.sgrnet-colonna-principale {
  display: flex;
  flex-direction: column;
}

.sgrnet-colonna-principale > .sgrnet-griglia { display: contents; }

.sgrnet-colonna-principale .sgrnet-pagine { order: 99; }

/* Data e ora in testata, in fondo alla barra del menu */
.sgrnet-adesso {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--wp--preset--color--testo-tenue);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* La data non si nasconde piu sul telefono.
   Era nascosta perche' sotto i 900px il menu andava a capo e la data si
   mangiava una riga da sola. Adesso sotto i 1000px il menu diventa il tasto a
   tre righe (vedi sotto), quindi di spazio ce n'e' in abbondanza — e nascondere
   la data lasciava in testata la sola icona del meteo, che da sola non dice
   niente. */

/* Sui telefoni stretti si toglie l'anno: "12 Ottobre, 10:50" basta e avanza,
   e il giorno della settimana e' gia' via sotto i 1200. */
@media (max-width: 420px) {
  .sgrnet-adesso__anno { display: none; }
}

/* Le voci dei sottomenu restano piu piccole della barra principale */
.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  font-size: 0.875rem;
  font-weight: 500;
}

.wp-block-navigation__submenu-container {
  border-radius: 8px;
  padding: 0.35rem 0;
}

/* Colonna laterale: NON si aggancia piu mentre si scorre. Non e' una svista.

   Un elemento agganciato piu alto della finestra fissa il proprio bordo
   superiore e si porta il fondo fuori vista, dove resta inchiodato per tutto
   lo scorrimento: il fondo della colonna diventa irraggiungibile. E' il
   difetto per cui "I piu letti" si vedeva solo in fondo alla pagina.

   L'aggancio era stato rimesso con un vincolo di altezza minima dopo aver
   compattato la colonna. Con l'arrivo di "Importante" e "Archivio notizie" la
   colonna misura 979px: piu di quasi ogni finestra, e l'altezza cambia con
   quanti articoli sono messi in evidenza. Un vincolo fisso su un'altezza che
   varia e' una trappola che scatta il giorno in cui qualcuno mette in evidenza
   un articolo in piu.

   Quindi la colonna scorre con la pagina. Se un giorno si rivuole l'aggancio,
   va fatto misurando l'altezza vera con JavaScript, non con una media query. */

/* Nelle schede della colonna stretta l'immagine e' panoramica.
   Questa regola sta prima di quella dell'evidenza di proposito: hanno la stessa
   specificita', quindi vince l'ultima scritta. */
.sgrnet-lato .sgrnet-scheda .wp-block-post-featured-image img {
  aspect-ratio: 3 / 2;
  border-radius: 6px;
}

/* "In evidenza": elenco compatto, immagine quadrata a sinistra e titolo a
   fianco. Con le immagini grandi impilate la colonna arrivava a 1353px, cioe'
   piu di uno schermo intero, e l'aggancio non poteva funzionare. */
/* La griglia va sulla singola voce, non sull'elenco: `sgrnet-scheda` sta sul
   contenitore <ul>, e messa li dentro impaginava le tre voci in colonna larga
   92px. */
.sgrnet-evidenza,
.sgrnet-compatta { --sgrnet-miniatura: 112px; }

.sgrnet-evidenza .wp-block-post-template > li,
.sgrnet-compatta .wp-block-post-template > li {
  display: grid;
  grid-template-columns: var(--sgrnet-miniatura) 1fr;
  grid-template-rows: auto 1fr;
  column-gap: 0.8rem;
  align-items: start;
}

.sgrnet-evidenza .wp-block-post-template > li > .wp-block-post-featured-image,
.sgrnet-compatta .wp-block-post-template > li > .wp-block-post-featured-image {
  grid-column: 1;
  grid-row: 1 / -1;
  margin: 0;
}

/* La miniatura ha la forma della foto, non un quadrato.
   Le copertine sono tutte 840x440: ritagliarle quadrate buttava via il 48%
   della larghezza — quasi meta' immagine — e quel che restava sembrava una
   fotografia ingrandita. Con lo stesso rapporto non si taglia nulla. */
.sgrnet-evidenza .sgrnet-scheda .wp-block-post-featured-image img,
.sgrnet-compatta .sgrnet-scheda .wp-block-post-featured-image img {
  aspect-ratio: 840 / 440;
  object-fit: cover;
  width: var(--sgrnet-miniatura);
  border-radius: 6px;
}

.sgrnet-evidenza .sgrnet-scheda .sgrnet-occhiello,
.sgrnet-compatta .sgrnet-scheda .sgrnet-occhiello { margin: 0 0 0.15rem; }

.sgrnet-evidenza .sgrnet-scheda .wp-block-post-title,
.sgrnet-compatta .sgrnet-scheda .wp-block-post-title {
  margin: 0;
  line-height: 1.3;
}

/* Le voci si separano con un filetto, come "I piu letti" qui sotto */
.sgrnet-evidenza .wp-block-post-template > li + li,
.sgrnet-compatta .wp-block-post-template > li + li {
  border-top: 1px solid var(--wp--preset--color--bordo);
  padding-top: 1rem;
}

/* Elenco numerato dei piu letti */
.sgrnet-piu-letti {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
}

/* Le miniature sono le stesse di "In evidenza", stessa misura e stessa forma:
   nella colonna di fianco i due elenchi stanno uno sotto l'altro, e due
   grandezze diverse si notano subito. */
.sgrnet-piu-letti { --sgrnet-miniatura: 112px; }

.sgrnet-letto {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--wp--preset--color--bordo);
}

.sgrnet-letto:last-child { border-bottom: 0; }

.sgrnet-letto__foto-link {
  flex: 0 0 auto;
  display: block;
  line-height: 0;
}

/* Il rapporto e' quello delle copertine, 840x440: ritagliarle quadrate
   butterebbe via quasi meta' immagine. */
.sgrnet-letto__foto {
  display: block;
  width: var(--sgrnet-miniatura);
  aspect-ratio: 840 / 440;
  object-fit: cover;
  border-radius: 6px;
}

.sgrnet-letto__foto--vuota {
  object-fit: contain;
  padding: 0.6rem;
  background: var(--wp--preset--color--superficie);
  box-sizing: border-box;
}

.sgrnet-letto__t {
  color: var(--wp--preset--color--testo);
  font-weight: 600;
  text-decoration: none;
  line-height: 1.35;
}

.sgrnet-letto__t:hover { color: var(--wp--preset--color--primario); }

/* -------------------------------------------------------------------------
 * Paginazione — vale per la prima pagina, gli archivi e la ricerca
 * ---------------------------------------------------------------------- */

.wp-block-query-pagination {
  gap: 0.4rem;
  align-items: center;
  flex-wrap: wrap;
  padding-top: 1.75rem;
  border-top: 1px solid var(--wp--preset--color--bordo);
}

.wp-block-query-pagination .page-numbers,
.wp-block-query-pagination .wp-block-query-pagination-previous,
.wp-block-query-pagination .wp-block-query-pagination-next {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-width: 2.5rem;
  height: 2.5rem;
  padding: 0 0.75rem;
  border: 1px solid var(--wp--preset--color--bordo);
  border-radius: 999px;
  background: #fff;
  color: var(--wp--preset--color--testo);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.wp-block-query-pagination a:hover {
  border-color: var(--wp--preset--color--primario);
  color: var(--wp--preset--color--primario);
  background: var(--wp--preset--color--superficie);
}

/* La pagina in cui ci si trova */
.wp-block-query-pagination .page-numbers.current {
  background: var(--wp--preset--color--primario);
  border-color: var(--wp--preset--color--primario);
  color: #fff;
}

/* I puntini fra un gruppo di numeri e l'altro non sono un bottone */
.wp-block-query-pagination .page-numbers.dots {
  border-color: transparent;
  background: transparent;
  min-width: 1.5rem;
  padding: 0 0.2rem;
  color: var(--wp--preset--color--testo-tenue);
}

/* Avanti e indietro: piu larghi, con la freccia staccata dalla parola */
.wp-block-query-pagination .wp-block-query-pagination-previous,
.wp-block-query-pagination .wp-block-query-pagination-next {
  padding: 0 1.1rem;
  font-weight: 700;
}

.wp-block-query-pagination .wp-block-query-pagination-previous {
  margin-right: 0.35rem;
}

.wp-block-query-pagination .wp-block-query-pagination-next {
  margin-left: 0.35rem;
}

.wp-block-query-pagination a:focus-visible {
  outline: 2px solid var(--wp--preset--color--primario);
  outline-offset: 2px;
}

/* Sul telefono i numeri sono tanti: restano leggibili ma occupano meno */
@media (max-width: 599px) {
  .wp-block-query-pagination .page-numbers,
  .wp-block-query-pagination .wp-block-query-pagination-previous,
  .wp-block-query-pagination .wp-block-query-pagination-next {
    min-width: 2.2rem;
    height: 2.2rem;
    padding: 0 0.5rem;
    font-size: 0.8125rem;
  }
}

/* Sfogliando le notizie piu vecchie, l'apertura e le fasce di sezione
   mostrerebbero comunque le notizie di oggi: fuori dai piedi. */
.sgrnet-sfoglia .sgrnet-apertura,
.sgrnet-sfoglia .sgrnet-apertura + .wp-block-separator,
.sgrnet-sfoglia .sgrnet-fascia {
  display: none;
}

/* Marchio nel piede: piu grande che in testata, perche' li e' l'unico
   elemento della colonna e non deve sembrare un ripensamento. */
/* -------------------------------------------------------------------------
 * Il marchio della testata
 *
 * Due immagini affiancate che devono rimpicciolirsi **insieme**: se la sfera
 * avesse una misura fissa, sul telefono resterebbe grande accanto a una scritta
 * minuscola. Per questo le larghezze sono in percentuale del marchio intero, e
 * il marchio intero si stringe con lo schermo.
 * ---------------------------------------------------------------------- */

.sgrnet-marchio { max-width: 520px; }

.sgrnet-marchio__link {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
}

.sgrnet-marchio__simbolo {
  flex: 0 0 13%;
  width: 13%;
  height: auto;
}

.sgrnet-marchio__scritta {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  height: auto;
}

@media (max-width: 420px) {
  /* Lo spazio per la sfera lo si ruba alla scritta, che a questa larghezza e'
     gia' al limite della leggibilita'. */
  .sgrnet-marchio__link { gap: 0.45rem; }
  .sgrnet-marchio__simbolo { flex-basis: 15%; width: 15%; }
}

/* La riga del copyright sta sotto a quella dell'informazione in rete, un po'
   piu' spenta: e' una formalita', non un messaggio. */
.sgrnet-copyright {
  margin: 0.35rem 0 0;
  font-size: 0.75rem;
  color: #6E90B4;
}

.sgrnet-marchio-negativo {
  margin: 0;
  max-width: 460px;
}

.sgrnet-marchio-negativo__link {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
}

.sgrnet-marchio-negativo__simbolo {
  flex: 0 0 14%;
  width: 14%;
  height: auto;
}

/* La scritta e' disegnata dalla mascherina, il bianco lo mette questa riga.
   Il rapporto e' quello del file, 1140x140: senza, l'altezza sarebbe zero. */
.sgrnet-marchio-negativo__scritta {
  flex: 1 1 auto;
  min-width: 0;
  aspect-ratio: 1140 / 140;
  background: #fff;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: left center;
  mask-position: left center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

/* Salto al contenuto, visibile solo da tastiera */
.sgrnet-salta {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 0.75rem 1.25rem;
  background: var(--wp--preset--color--primario);
  color: #fff;
  font-weight: 600;
}

.sgrnet-salta:focus { left: 0; }

/* -------------------------------------------------------------------------
 * Colonna di fianco: Importante e Archivio notizie
 * ---------------------------------------------------------------------- */

/* "Importante": il riquadro di pubblica utilita' in cima alla colonna.
   Il banner e' un'immagine larga, quindi prende tutta la colonna e si adatta. */
.sgrnet-importante .sgrnet-banner {
  margin: 0;
}

/* Il manifesto del 1522 e' verticale (543x760), mentre il banner di prima era
   orizzontale. A tutta larghezza della colonna di fianco verrebbe alto oltre
   cinquecento pixel e si mangerebbe "In evidenza" e "I piu' letti" che gli
   stanno sotto. Contenuto a 260 e centrato: resta il primo elemento della
   colonna, si legge il numero a colpo d'occhio, ma non diventa la pagina. */
/* Il contenimento e il centraggio vanno sul **collegamento**, non
   sull'immagine: il banner e' `<figure><a><img></a></figure>`, e l'ancora e'
   un elemento in linea che si stringe sul suo contenuto. Centrare l'immagine
   dentro un'ancora larga quanto lei non sposta niente — resta tutto a
   sinistra, come si e' visto. */
.sgrnet-importante .sgrnet-banner a {
  display: block;
  max-width: 260px;
  margin-inline: auto;
}

.sgrnet-importante .sgrnet-banner img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
}

/* Il richiamo alla rubrica, fra "In evidenza" e "I piu letti".
   Stessa forma del riquadro qui sopra: nella colonna di fianco le immagini che
   portano da qualche parte si somigliano tutte, e chi legge impara una regola
   sola. */
/* Un filetto sopra e uno sotto: il richiamo diventa una cosa chiusa fra due
   righe, non l'ultima di "In evidenza" ne' la prima di "I piu letti". Sono gli
   stessi filetti che separano le voci dentro gli elenchi della colonna —
   stessa misura, stesso grigio — quindi non entra in scena niente di nuovo.
   Lo spazio e' uguale sopra e sotto: se fosse sbilanciato, l'occhio
   riattaccherebbe il banner al blocco piu' vicino. */
.sgrnet-rubrica-banner {
  margin-top: var(--wp--preset--spacing--40);
  padding-top: var(--wp--preset--spacing--40);
  padding-bottom: var(--wp--preset--spacing--40);
  border-top: 1px solid var(--wp--preset--color--bordo);
  border-bottom: 1px solid var(--wp--preset--color--bordo);
}

.sgrnet-rubrica-banner a {
  display: block;
  line-height: 0;
  border-radius: 6px;

  /* L'immagine e' chiara sui bordi: senza un filo intorno si perde nel bianco
     della pagina e non si capisce dove comincia. */
  box-shadow: 0 0 0 1px var(--wp--preset--color--bordo);
}

.sgrnet-rubrica-banner img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
}

@media not (prefers-reduced-motion) {
  .sgrnet-rubrica-banner a { transition: box-shadow .15s; }
}

.sgrnet-rubrica-banner a:hover,
.sgrnet-rubrica-banner a:focus-visible {
  box-shadow: 0 0 0 2px var(--wp--preset--color--primario);
}

/* Archivio notizie. Il modulo e' vero: scelta piu tasto. Lo script nasconde il
   tasto e fa partire la ricerca da solo, ma solo quando c'e' davvero. */
.sgrnet-archivio__etichetta {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.sgrnet-archivio__riga {
  display: flex;
  gap: 0.5rem;
  align-items: stretch;
}

.sgrnet-archivio__scelta {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  padding: 0.6rem 0.7rem;
  background: var(--wp--preset--color--base);
  border: 1px solid var(--wp--preset--color--bordo);
  border-radius: 6px;
  color: var(--wp--preset--color--testo);
  font-family: inherit;
  font-size: 0.9375rem;
}

.sgrnet-archivio__scelta:focus-visible {
  outline: 2px solid var(--wp--preset--color--primario);
  outline-offset: 1px;
}

.sgrnet-archivio__vai {
  flex: 0 0 auto;
  padding: 0 0.9rem;
  background: var(--wp--preset--color--primario);
  border: 0;
  border-radius: 6px;
  color: #fff;
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
}

.sgrnet-archivio__vai[hidden] { display: none; }

.sgrnet-archivio__vai:hover { background: var(--wp--preset--color--primario-scuro); }

/* -------------------------------------------------------------------------
 * Fascia "Info e utilità", sopra il piede
 * ---------------------------------------------------------------------- */

.sgrnet-utilita {
  padding: 1.5rem 0 1.75rem;
  border-top: 1px solid var(--wp--preset--color--bordo);
}

.sgrnet-utilita__capo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.sgrnet-utilita__titolo {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.sgrnet-utilita__titolo a {
  color: var(--wp--preset--color--testo-secondario);
  text-decoration: none;
}

.sgrnet-utilita__titolo a:hover,
.sgrnet-utilita__titolo a:focus-visible {
  color: var(--wp--preset--color--primario);
  text-decoration: underline;
}

.sgrnet-utilita__frecce { display: flex; gap: 0.4rem; }
.sgrnet-utilita__frecce[hidden] { display: none; }

.sgrnet-utilita__freccia {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  background: var(--wp--preset--color--base);
  border: 1px solid var(--wp--preset--color--bordo);
  border-radius: 50%;
  color: var(--wp--preset--color--testo-secondario);
  cursor: pointer;
}

/* La punta e' un quadratino girato di quarantacinque gradi: una freccia
   disegnata col bordo non ha bisogno ne di un file ne di un carattere. */
.sgrnet-utilita__freccia::before {
  content: "";
  width: 7px;
  height: 7px;
  margin-left: 2px;
  border-top: 2px solid currentColor;
  border-left: 2px solid currentColor;
  transform: rotate(-45deg);
}

.sgrnet-utilita__freccia--avanti::before {
  margin-left: -2px;
  transform: rotate(135deg);
}

.sgrnet-utilita__freccia:hover:not(:disabled) {
  border-color: var(--wp--preset--color--primario);
  color: var(--wp--preset--color--primario);
}

.sgrnet-utilita__freccia:disabled { opacity: 0.35; cursor: default; }

.sgrnet-utilita__pista {
  display: flex;
  gap: 0.75rem;
  margin: 0;
  padding: 0 0 0.35rem;
  list-style: none;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  overscroll-behavior-x: contain;
}

.sgrnet-utilita__voce {
  flex: 0 0 auto;
  scroll-snap-align: start;
}

/* La scheda: sopra la copertina della pagina, sotto il nome della sezione.
   Le copertine sono tutte 840x440, quindi il ritaglio e' solo una sicurezza
   per il giorno in cui qualcuno ne carica una di forma diversa. */
.sgrnet-utilita__riquadro {
  display: flex;
  flex-direction: column;
  width: 13.5rem;
  height: 100%;
  overflow: hidden;
  background: var(--wp--preset--color--superficie);
  border: 1px solid var(--wp--preset--color--bordo);
  border-top: 3px solid var(--wp--preset--color--primario);
  border-radius: 6px;
  color: var(--wp--preset--color--testo);
  text-decoration: none;
  transition: background-color .15s, border-color .15s;
}

.sgrnet-utilita__foto {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 840 / 440;
  object-fit: cover;
  background: var(--wp--preset--color--bordo);
}

.sgrnet-utilita__nome {
  padding: 0.65rem 0.8rem 0.75rem;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.3;
}

.sgrnet-utilita__riquadro:hover,
.sgrnet-utilita__riquadro:focus-visible {
  background: var(--wp--preset--color--base);
  border-color: var(--wp--preset--color--primario);
  border-top-color: var(--wp--preset--color--accento);
  color: var(--wp--preset--color--primario);
}

@media (max-width: 599px) {
  .sgrnet-utilita__riquadro { width: 11.5rem; }
  .sgrnet-utilita__nome { font-size: 0.875rem; }
}

/* Chi ha chiesto meno animazioni non vede la fascia scivolare: salta e basta. */
@media (prefers-reduced-motion: reduce) {
  .sgrnet-utilita__pista { scroll-behavior: auto; }
}

@media print {
  .sgrnet-utilita { display: none; }
}

/* -------------------------------------------------------------------------
 * Colori delle sezioni
 *
 * `--sgrnet-sezione` e' la tinta chiesta dalla redazione e si usa per i
 * filetti; `--sgrnet-sezione-testo` e' la stessa resa leggibile e si usa solo
 * per le parole. Il perche' delle due varianti sta in functions.php, sopra
 * sgrnet_colori_sezioni(). I valori li scrive il PHP: scheda per scheda
 * nell'occhiello, una volta per pagina negli archivi di categoria.
 * ---------------------------------------------------------------------- */

.sgrnet-sezione--attualita { --sgrnet-sezione: #98c301; --sgrnet-sezione-testo: #637f01; }
.sgrnet-sezione--cronaca   { --sgrnet-sezione: #2e2e2e; --sgrnet-sezione-testo: #2e2e2e; }
.sgrnet-sezione--sport     { --sgrnet-sezione: #8c0303; --sgrnet-sezione-testo: #8c0303; }

/* Il filetto sotto il titolo nell'archivio di una categoria. */
/* Il titolo dell'archivio e' l'etichetta della sezione, come in prima pagina.
   Vale per tutti gli archivi, non solo le categorie: sui tag e sugli archivi
   per data il colore non c'e' e scatta il blu del marchio. */
.wp-block-query-title {
  display: flex;
  align-items: flex-end;
  border-bottom: 3px solid var(--sgrnet-sezione, var(--wp--preset--color--primario));
}

/* L'etichetta di una sezione aperta e' grande quanto il titolo della pagina:
   un rettangolo di quella misura riempirebbe mezzo schermo. Qui la scritta
   scende di un gradino e il riquadro torna una targhetta. */
.wp-block-query-title .sgrnet-fascia__nome {
  font-size: 1.5rem;
  line-height: 1.2;
  letter-spacing: 0.02em;
}

/* "Info e utilità" e' una sezione come le altre: arancio anche qui. */
.sgrnet-utilita {
  --sgrnet-sezione: #ff6600;
  --sgrnet-sezione-testo: #c95100;
}

.sgrnet-utilita__riquadro { border-top-color: var(--sgrnet-sezione); }

.sgrnet-utilita__riquadro:hover,
.sgrnet-utilita__riquadro:focus-visible {
  border-color: var(--sgrnet-sezione);
  color: var(--sgrnet-sezione-testo);
}

.sgrnet-utilita__titolo a:hover,
.sgrnet-utilita__titolo a:focus-visible { color: var(--sgrnet-sezione-testo); }

.sgrnet-utilita__freccia:hover:not(:disabled) {
  border-color: var(--sgrnet-sezione);
  color: var(--sgrnet-sezione-testo);
}

/* -------------------------------------------------------------------------
 * "Home" nel menu: la casetta
 *
 * La parola resta scritta nel segnaposto e viene solo spinta fuori dalla
 * vista: chi naviga con il lettore di schermo continua a sentire "Home", che
 * e' quello che quel link fa. Un link con dentro solo un disegno sarebbe un
 * link senza nome.
 *
 * La casetta e' una maschera e non un'immagine: cosi' prende il colore del
 * testo che la circonda, blu come le altre voci, e diventa arancio al
 * passaggio del puntatore senza che serva un secondo disegno. Il disegno sta
 * dentro il foglio: nessuna richiesta in piu al server.
 *
 * E' disegnata a tratto e non piena perche' le voci accanto sono parole, non
 * blocchi: una sagoma piena a fianco di "Attualita" pesa il doppio e tira
 * l'occhio dove non serve. Piena lo diventa soltanto quando si e' davvero in
 * prima pagina, ed e' quello il modo in cui dice "sei qui".
 * ---------------------------------------------------------------------- */

.sgrnet-casa .wp-block-navigation-item__label {
  display: block;
  width: 1.5rem;
  height: 1.5rem;
  /* Mezzo pixel piu in alto: il tetto e' appuntito e la base e' piatta, quindi
     centrata sul rigo la casetta sembra seduta troppo in basso. */
  margin-top: -0.1em;
  overflow: hidden;
  text-indent: 110%;
  white-space: nowrap;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.6 9.9 12 3.2l8.4 6.7v9.6a1.7 1.7 0 0 1-1.7 1.7H5.3a1.7 1.7 0 0 1-1.7-1.7Z'/%3E%3Cpath d='M9.5 21.2v-6h5v6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.6 9.9 12 3.2l8.4 6.7v9.6a1.7 1.7 0 0 1-1.7 1.7H5.3a1.7 1.7 0 0 1-1.7-1.7Z'/%3E%3Cpath d='M9.5 21.2v-6h5v6'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* In prima pagina la casetta si riempie: e' l'unica voce del menu che puo'
   dire "sei qui" senza aggiungere una riga di testo. */
.sgrnet-casa.current-menu-item .wp-block-navigation-item__label,
.home .sgrnet-casa .wp-block-navigation-item__label {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 2.6 21.6 10.2V19.8a1.9 1.9 0 0 1-1.9 1.9H15.1V15.4H8.9v6.3H4.3a1.9 1.9 0 0 1-1.9-1.9V10.2Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 2.6 21.6 10.2V19.8a1.9 1.9 0 0 1-1.9 1.9H15.1V15.4H8.9v6.3H4.3a1.9 1.9 0 0 1-1.9-1.9V10.2Z'/%3E%3C/svg%3E");
}

/* Nel menu a scomparsa del telefono torna la parola: li' le voci sono una
   sotto l'altra e un disegno solo, in mezzo a nove scritte, sembrerebbe un
   errore di caricamento. */
.wp-block-navigation__responsive-container.is-menu-open .sgrnet-casa .wp-block-navigation-item__label {
  width: auto;
  height: auto;
  margin-top: 0;
  overflow: visible;
  text-indent: 0;
  background: none;
  -webkit-mask: none;
  mask: none;
}


/* -------------------------------------------------------------------------
 * Titoli delle fasce: rettangolo pieno, e la linea che corre fino in fondo
 *
 * Il titolo e' la linea: tiene il filetto in basso e occupa tutta la larghezza.
 * Il rettangolo e' il nome dentro, che ci si appoggia sopra come una linguetta.
 * Cosi' la linea che divideva le sezioni resta dov'era, e prende il colore
 * della sezione come il rettangolo.
 * ---------------------------------------------------------------------- */

.sgrnet-fascia > .wp-block-heading {
  display: flex;
  align-items: flex-end;
  border-bottom: 3px solid var(--sgrnet-sezione, var(--wp--preset--color--primario));
}

.sgrnet-fascia__nome {
  padding: 0.3em 0.75em;
  background: var(--sgrnet-sezione, var(--wp--preset--color--primario));
  color: #fff;
  border-radius: 4px 4px 0 0;
}

/* Gli stessi titoli nella colonna di fianco — "In evidenza", "I piu letti",
   "Archivio notizie". Li' non c'e' una sezione da cui prendere il colore,
   quindi vale il blu del marchio: e' il ripiego gia' scritto nella riga qui
   sopra, e per questo non serve ripetere il colore. */
.sgrnet-titolo-fascia {
  display: flex;
  align-items: flex-end;
}


/* -------------------------------------------------------------------------
 * Le altre sezioni, sotto Sport, su due colonne
 *
 * Quattro fasce una sotto l'altra alla larghezza piena allungavano la prima
 * pagina di un paio di schermate. In due colonne, con l'elenco compatto,
 * stanno nello spazio che prima ne bastava per due.
 * ---------------------------------------------------------------------- */

.sgrnet-sezione--politica             { --sgrnet-sezione: #a61556; --sgrnet-sezione-testo: #a61556; }
.sgrnet-sezione--cultura-e-spettacolo { --sgrnet-sezione: #418da8; --sgrnet-sezione-testo: #3a7f97; }
.sgrnet-sezione--rubriche             { --sgrnet-sezione: #197526; --sgrnet-sezione-testo: #197526; }
.sgrnet-sezione--editoriale           { --sgrnet-sezione: #0d4880; --sgrnet-sezione-testo: #0d4880; }

/* Griglia unica e non due colonne separate: con due colonne indipendenti la
   seconda fascia di sinistra partiva piu' in basso di quella di destra, perche'
   la prima aveva titoli piu' lunghi. In griglia le righe si allineano da se',
   e la seconda riga comincia allo stesso livello da entrambe le parti. */
.sgrnet-altre-sezioni {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--wp--preset--spacing--50);
  align-items: start;
  margin-top: var(--wp--preset--spacing--60);
}

/* WordPress stacca ogni figlio dal precedente con un margine in alto. In una
   colonna ha senso; in una griglia no: quel margine spingeva in basso la
   seconda, la terza e la quarta fascia, e la prima no. Risultato, nessuna
   riga allineata. Lo spazio fra le fasce lo da' gia' `gap`. */
.sgrnet-altre-sezioni > .sgrnet-compatta { margin-block-start: 0; }

/* Nelle colonne strette il titolo della fascia pesa meno: resta leggibile ma
   non compete con quelli delle fasce grandi qui sopra. */
.sgrnet-compatta > .wp-block-heading { font-size: 1rem; }

/* Sotto gli 800 pixel le due colonne diventano una sola: in mezza colonna di
   telefono il titolo andrebbe a capo dentro al rettangolo. */
@media (max-width: 800px) {
  .sgrnet-altre-sezioni { grid-template-columns: minmax(0, 1fr); }
}

/* -------------------------------------------------------------------------
 * "Info e utilità" su fondo nero
 *
 * Il titolo si comporta come quelli delle sezioni: rettangolo pieno del colore
 * della sezione — qui l'arancio — con la scritta bianca, appoggiato sulla linea.
 * Il fondo nero stacca la fascia dall'articolo che la precede e la lega al
 * piede, che e' scuro: due zone scure di seguito invece di una striscia chiara
 * incastrata fra due.
 *
 * Le regole stanno dopo quelle di base del plugin, e le sovrascrivono.
 * ---------------------------------------------------------------------- */

.sgrnet-utilita {
  margin-top: var(--wp--preset--spacing--60);
  padding: 1.6rem 1.5rem 1.75rem;
  background: #111417;
  border: 0;
  border-radius: 8px;
}

/* Il titolo e il rettangolo, come nelle fasce di sezione. */
.sgrnet-utilita__capo {
  align-items: flex-end;
  margin-bottom: 1.15rem;
  border-bottom: 3px solid var(--sgrnet-sezione);
}

.sgrnet-utilita__titolo {
  font-size: 0.875rem;
}

.sgrnet-utilita__titolo a {
  display: inline-block;
  padding: 0.35em 0.8em;
  background: var(--sgrnet-sezione);
  border-radius: 4px 4px 0 0;
  color: #fff;
}

.sgrnet-utilita__titolo a:hover,
.sgrnet-utilita__titolo a:focus-visible {
  color: #fff;
  text-decoration: underline;
}

/* Le frecce stavano su fondo chiaro: qui si rovescia. */
.sgrnet-utilita__frecce { align-self: center; margin-bottom: 0.5rem; }

.sgrnet-utilita__freccia {
  background: transparent;
  border-color: #3A4049;
  color: #C8CFD8;
}

.sgrnet-utilita__freccia:hover:not(:disabled) {
  border-color: var(--sgrnet-sezione);
  color: var(--sgrnet-sezione);
}

.sgrnet-utilita__freccia:disabled { opacity: 0.3; }

/* Le schede diventano scure: su nero, cartoncini bianchi sembrerebbero
   ritagli incollati sopra. */
.sgrnet-utilita__riquadro {
  background: #1B1F25;
  border-color: #2A3038;
  border-top-color: var(--sgrnet-sezione);
  color: #EAEEF3;
}

.sgrnet-utilita__riquadro:hover,
.sgrnet-utilita__riquadro:focus-visible {
  background: #232830;
  border-color: var(--sgrnet-sezione);
  color: #fff;
}

.sgrnet-utilita__foto { background: #2A3038; }

/* La barra di scorrimento chiara su nero sarebbe un taglio bianco. */
.sgrnet-utilita__pista { scrollbar-color: #3A4049 transparent; }

/* -------------------------------------------------------------------------
 * Banner del canale YouTube, in fondo alla colonna di fianco
 *
 * Disegnato in codice e non caricato come immagine: resta nitido su qualunque
 * schermo, non e' un file da rifare se cambia una parola, e non costa una
 * richiesta in piu al server.
 *
 * Il tasto di YouTube e' riprodotto nelle sue proporzioni e nel suo rosso:
 * un marchio altrui non si ricolora e non si schiaccia.
 * ---------------------------------------------------------------------- */

/* -------------------------------------------------------------------------
 * I canali Telegram e WhatsApp
 *
 * Fondo blu pieno: le sezioni della prima pagina colorano solo il rettangolo
 * del titolo, quindi una fascia piena non si confonde con nessuna di loro e si
 * vede che e' un'altra cosa.
 * ---------------------------------------------------------------------- */

.sgrnet-canali {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  margin-top: var(--wp--preset--spacing--60);
  padding: 1.5rem 1.6rem;
  border-radius: 10px;
  background: var(--wp--preset--color--primario);
  color: #fff;
}

.sgrnet-canali__testo { min-width: 0; }

.sgrnet-canali__occhiello {
  margin: 0 0 0.25rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9FC4E6;
}

.sgrnet-canali__titolo {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.25;
}

.sgrnet-canali__sotto {
  margin: 0.4rem 0 0;
  font-size: 0.9375rem;
  line-height: 1.4;
  color: #C9DCEE;
  max-width: 46ch;
}

.sgrnet-canali__tasti {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

/* Ogni tasto porta il colore del suo servizio: e' quello che la gente
   riconosce da lontano, prima ancora di leggere il nome. */
.sgrnet-canali__tasto {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;

  /* Quarantaquattro pixel di altezza: la misura minima per prendere un tasto
     col pollice senza mirare. */
  min-height: 44px;
  padding: 0.6rem 1.1rem;
  border-radius: 999px;
  background: var(--sgrnet-canale);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.sgrnet-canali__segno { display: flex; }

@media not (prefers-reduced-motion) {
  .sgrnet-canali__tasto { transition: filter .15s, transform .15s; }
}

.sgrnet-canali__tasto:hover,
.sgrnet-canali__tasto:focus-visible {
  filter: brightness(1.08);
  transform: translateY(-1px);
  color: #fff;
}

/* Sul telefono la fascia diventa una colonna e i tasti si allargano: sono la
   cosa da premere, non un dettaglio in fondo. */
@media (max-width: 680px) {
  .sgrnet-canali { padding: 1.25rem; }
  .sgrnet-canali__tasti { width: 100%; }
  .sgrnet-canali__tasto { flex: 1 1 0; justify-content: center; }
}

/* La striscia in fondo allo schermo del telefono.
   Stessa forma e stesso nero dell'invito a mettere il giornale sulla
   schermata: sono due avvisi della stessa famiglia, e chi legge li riconosce
   come la stessa cosa invece di spaventarsi per una novita'. */
.sgrnet-avviso-canali {
  position: fixed;
  left: .6rem;
  right: .6rem;
  bottom: .6rem;
  z-index: 50;
  display: grid;
  gap: .65rem;
  padding: .85rem .9rem;
  background: #111417;
  border-radius: 10px;
  color: #fff;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .28);
  transform: translateY(130%);
}

@media not (prefers-reduced-motion) {
  .sgrnet-avviso-canali { transition: transform .28s ease-out; }
}

.sgrnet-avviso-canali.is-dentro { transform: translateY(0); }
.sgrnet-avviso-canali[hidden] { display: none; }

.sgrnet-avviso-canali__testo {
  margin: 0;

  /* Spazio a destra per il tasto di chiusura, che gli sta sopra. */
  padding-right: 1.9rem;
  display: grid;
  gap: .1rem;
  font-size: .875rem;
  line-height: 1.3;
}

.sgrnet-avviso-canali__testo span { color: #AFB8C2; font-size: .8125rem; }

.sgrnet-avviso-canali .sgrnet-canali__tasti { width: 100%; }
.sgrnet-avviso-canali .sgrnet-canali__tasto { flex: 1 1 0; justify-content: center; }

.sgrnet-avviso-canali__chiudi {
  position: absolute;
  top: .35rem;
  right: .35rem;
  width: 36px;
  height: 36px;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.sgrnet-avviso-canali__chiudi::before,
.sgrnet-avviso-canali__chiudi::after {
  content: "";
  position: absolute;
  left: 12px;
  top: 17px;
  width: 12px;
  height: 2px;
  border-radius: 1px;
  background: #9AA7B5;
}

.sgrnet-avviso-canali__chiudi::before { transform: rotate(45deg); }
.sgrnet-avviso-canali__chiudi::after { transform: rotate(-45deg); }

/* Nella colonna di fianco c'e' meno spazio: tutto incolonnato. */
.sgrnet-canali--riquadro {
  flex-direction: column;
  align-items: stretch;
  gap: 0.9rem;
  margin-top: var(--wp--preset--spacing--50);
  padding: 1.2rem;
}

.sgrnet-canali--riquadro .sgrnet-canali__titolo { font-size: 1.0625rem; }

.sgrnet-canali--riquadro .sgrnet-canali__tasti { flex-direction: column; }

.sgrnet-canali--riquadro .sgrnet-canali__tasto { justify-content: center; }

.sgrnet-youtube { margin-top: var(--wp--preset--spacing--50); }

.sgrnet-youtube__link {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.95rem 1.05rem;
  background: #0F0F0F;
  border-radius: 8px;
  color: #fff;
  text-decoration: none;
  transition: background-color .15s, transform .15s;
}

.sgrnet-youtube__link:hover,
.sgrnet-youtube__link:focus-visible {
  background: #1C1C1C;
  transform: translateY(-1px);
}

.sgrnet-youtube__segno { display: flex; flex: 0 0 auto; }

.sgrnet-youtube__testo {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
}

.sgrnet-youtube__titolo {
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.25;
}

.sgrnet-youtube__sotto {
  font-size: 0.8125rem;
  line-height: 1.3;
  color: #AFAFAF;
}

@media (prefers-reduced-motion: reduce) {
  .sgrnet-youtube__link:hover,
  .sgrnet-youtube__link:focus-visible { transform: none; }
}

/* -------------------------------------------------------------------------
 * Data, meteo e menu sulla stessa riga
 *
 * Andavano a capo per un soffio: il menu chiede 920 pixel, data e meteo 271,
 * e il contenitore ne ha 1200. Con lo spazio in mezzo si sforava di una
 * ventina di pixel e la data finiva sotto.
 *
 * Non basta stringere qualcosa: domani una voce di menu in piu, o una
 * previsione con una parola lunga, rifarebbero sforare. Quindi la riga non va
 * piu a capo per definizione, e a cedere e' il menu, che puo' restringersi;
 * data e meteo restano interi. Nel caso estremo in cui il menu non ci stia
 * davvero, sono le sue voci ad andare a capo dentro al menu.
 * ---------------------------------------------------------------------- */

.sgrnet-riga-menu {
  flex-wrap: nowrap;
  align-items: center;
  gap: 1rem;
}

.sgrnet-riga-menu > .wp-block-navigation {
  flex: 1 1 auto;
  min-width: 0;
}

.sgrnet-riga-adesso {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* Lo spazio fra le voci era 1,45rem: stretto a 0,95 il menu occupa una
   sessantina di pixel in meno, abbastanza perche' da 1200 pixel in su resti
   tutto su una riga senza comprimere nulla. */
.sgrnet-riga-menu .wp-block-navigation__container {
  column-gap: 0.95rem;
}

/* Anche dentro il gruppo niente a capo: data e meteo sono una cosa sola. */
.sgrnet-riga-adesso { flex-wrap: nowrap; }

/* Sotto i 1200 pixel il giorno della settimana si toglie di mezzo: e' il
   pezzo piu' lungo e il meno necessario, e il suo posto serve al menu.
   Resta "11 Ottobre 2026, 17:27", che e' quel che conta. */
@media (max-width: 1199px) {
  .sgrnet-adesso__giorno { display: none; }
}


/* -------------------------------------------------------------------------
 * Il menu resta compatto fino a mille pixel
 *
 * WordPress mostra tutte le voci gia' da 600px in su. Con nove voci questo
 * giornale non ci sta: a 768 "Redazione" finiva su una riga sua, e una barra
 * di navigazione a due righe sopra il titolo e' la prima cosa che si nota
 * entrando. Meglio il tasto a tre righe fino a quando le voci non ci stanno
 * davvero.
 *
 * Le due regole rispecchiano quelle del nocciolo di WordPress, al contrario.
 * ---------------------------------------------------------------------- */

@media (max-width: 999px) {
  .wp-block-navigation__responsive-container-open:not(.always-shown) {
    display: flex;
  }

  .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
    display: none;
  }
}

/* -------------------------------------------------------------------------
 * Menu a scomparsa: le sottovoci si aprono una alla volta
 *
 * WordPress le mostra tutte aperte. Con le tredici rubriche e le nove voci di
 * "Info e utilita" l'elenco diventa lunghissimo e per arrivare a "Sport" si
 * scorre mezzo schermo. Qui restano chiuse, e le apre chi vuole.
 * ---------------------------------------------------------------------- */

.wp-block-navigation__responsive-container.is-menu-open .has-child > .wp-block-navigation__submenu-container {
  display: none;
}

.wp-block-navigation__responsive-container.is-menu-open .has-child[data-sgrnet-aperta] > .wp-block-navigation__submenu-container {
  display: block;
}

/* La freccetta e' il tasto da premere: va presa col pollice senza mirare.
   WordPress la nasconde di proposito nel menu a scomparsa — tenendo tutto
   aperto, per lui non serve. Il selettore passa per `.has-child` apposta: senza
   quel pezzo in piu' la regola vale quanto la sua e vince chi arriva dopo. */
.wp-block-navigation__responsive-container.is-menu-open .has-child > .wp-block-navigation-submenu__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-left: 0.25rem;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: transform .18s;
}

.wp-block-navigation__responsive-container.is-menu-open .has-child[data-sgrnet-aperta] > .wp-block-navigation-submenu__toggle {
  transform: rotate(180deg);
}

/* Giriamo il tasto, e WordPress gira anche la freccetta dentro: due mezzi giri
   fanno un giro intero e la freccetta torna a puntare in giu' con il sottomenu
   gia' aperto. Qui le togliamo il suo. */
.wp-block-navigation__responsive-container.is-menu-open .has-child[data-sgrnet-aperta] > .wp-block-navigation-submenu__toggle svg {
  transform: none;
}

/* La voce e la sua freccetta sulla stessa riga: il nome a sinistra, la
   freccetta a destra, e le sottovoci a capo sotto tutte e due.

   Il `...container-content` in mezzo non e' decorativo: WordPress incolonna le
   voci con un selettore da quattro classi, e senza quel pezzo la nostra regola
   ne conta tre e perde. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item.has-child {
  display: flex;

  /* WordPress mette le voci del menu a scomparsa una sotto l'altra, freccetta
     compresa: qui le rimettiamo in fila. */
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;

  /* Senza questo la voce e' larga quanto la parola — una sessantina di pixel —
     e il tasto da quarantaquattro non ci sta accanto: va a capo da solo. */
  width: 100%;
}

/* Il nome occupa solo il suo spazio, cosi' la freccetta gli sta subito a
   fianco invece che all'altro capo dello schermo: il pollice la trova dove
   sta guardando l'occhio. */
.wp-block-navigation__responsive-container.is-menu-open .has-child > .wp-block-navigation-item__content {
  flex: 0 0 auto;
  width: auto;
}

.wp-block-navigation__responsive-container.is-menu-open .has-child > .wp-block-navigation__submenu-container {
  flex: 0 0 100%;
}

/* La freccetta e' piccola: a essere grande e' il tasto che la contiene, cosi'
   si prende col pollice senza mirare. */
.wp-block-navigation__responsive-container.is-menu-open .has-child > .wp-block-navigation-submenu__toggle svg {
  width: 14px;
  height: 14px;
}

@media (prefers-reduced-motion: reduce) {
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle { transition: none; }
}