/* GN Media – aspetto dei contenuti scritti nell'editor (articoli e pagine). Mai !important. Due gruppi:
   1) dentro @layer apx: carattere, corpo e colore di base del testo. Il widget «Contenuto dell'articolo» ha i suoi
      controlli (Tipografia, Colore) e con il layer vincono sempre loro.
   2) fuori dal layer: spazi fra i blocchi e stili dei blocchi dell'editor (elenco numerato, aree, riquadri, citazione,
      loghi, scheda del libro, PayPal). Il reset del tema Hello e il CSS dei blocchi di WordPress non stanno in un layer:
      batterebbero qualunque regola in @layer (li, ul, p, figure tornano senza fondi, bordi e spazi). Su questi elementi
      Elementor non ha controlli, quindi portarli fuori dal layer non toglie niente alla modificabilità dal builder. */
:root {
	--gn-rosso: #d7261e; --gn-giallo: #f5b400; --gn-verde: #7cb83a; --gn-blu: #1672b8;
	--gn-inchiostro: #1b1b1f; --gn-testo: #3b3b42; --gn-grigio: #55555c; --gn-grigio2: #77777e;
	--gn-linea: #ecebe7; --gn-fondo2: #f5f4f1; --gn-bordo: #d9d8d3;
	--gn-titoli: 'Sora', sans-serif; --gn-corpo: 'DM Sans', system-ui, sans-serif;
}

@layer apx {
	.gn-contenuto, .editor-styles-wrapper { color: var(--gn-testo); font-family: var(--gn-corpo); font-size: 19px; line-height: 1.7; }
	.editor-styles-wrapper h2 { font-family: var(--gn-titoli); font-weight: 800; font-size: 36px; line-height: 1.1; letter-spacing: -0.03em; color: var(--gn-inchiostro); }
	.editor-styles-wrapper h3 { font-family: var(--gn-titoli); font-weight: 700; font-size: 24px; line-height: 1.2; letter-spacing: -0.02em; color: var(--gn-inchiostro); }
	@media (max-width: 767px) { .gn-contenuto, .editor-styles-wrapper { font-size: 17px; } }
}

/* ---- spazi e titoli dentro il testo ---- */
.gn-contenuto > * + * { margin-block-start: 32px; }
.gn-contenuto p { margin-block-end: 0; }
.gn-contenuto h2 { font-family: var(--gn-titoli); font-weight: 800; font-size: 36px; line-height: 1.1; letter-spacing: -0.03em; color: var(--gn-inchiostro); margin: 48px 0 0; }
.gn-contenuto h3 { font-family: var(--gn-titoli); font-weight: 700; font-size: 24px; line-height: 1.2; letter-spacing: -0.02em; color: var(--gn-inchiostro); margin: 36px 0 0; }
.gn-contenuto > :is(h2, h3):first-child, .gn-contenuto > .elementor-menu-anchor:first-child + :is(h2, h3) { margin-top: 0; }
.gn-contenuto a:not([class]) { text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }   /* gli indirizzi lunghi scritti per esteso vanno a capo invece di allargare la pagina */
.gn-contenuto figure { margin: 0; }
.gn-contenuto > * + figure { margin-block-start: 32px; }   /* immagini, gallerie e tabelle staccate dal blocco sopra come gli altri blocchi (la riga sopra azzerava anche lo spazio) */
.gn-contenuto.gn-contenuto img { border-radius: 16px; height: auto; max-width: 100%; }   /* classe doppia: «.elementor img» (raggio 0) di Elementor ha lo stesso peso e arriva dopo */
/* gallerie: angoli arrotondati anche sul riquadro, così la didascalia sovrapposta alla foto non esce dagli angoli (Simone, 10/10) */
.gn-contenuto .wp-block-gallery.has-nested-images:not(.is-style-gn-loghi) figure.wp-block-image { border-radius: 16px; overflow: hidden; }
.gn-contenuto ul:not([class*="is-style-gn"]), .gn-contenuto ol:not([class*="is-style-gn"]) { padding-left: 1.2em; }
.gn-contenuto .wp-block-embed iframe { border-radius: 20px; }
p.is-style-gn-lead { font-size: 22px; line-height: 1.55; color: var(--gn-inchiostro); }
/* pulsante dell'editor (blocco «Pulsanti») nel testo, es. «Vai al sito di IGE»: come i pulsanti del sito (pillola scura, rossa al passaggio) */
.gn-contenuto .wp-block-buttons { gap: 12px; }
.gn-contenuto .wp-block-button__link { display: inline-block; padding: 14px 26px; border-radius: 999px; background: var(--gn-inchiostro); color: #fff; font: 700 15px/1.2 var(--gn-titoli); text-decoration: none; transition: background-color .2s; }
.gn-contenuto .wp-block-button__link:hover, .gn-contenuto .wp-block-button__link:focus-visible { background: var(--gn-rosso); color: #fff; }

/* ---- Tabelle dell'editor (blocco «Tabella») ----
   Il tema Hello colora a righe alterne tutte le tabelle (fondo grigio) con bordi scuri, e l'editor non ha un controllo per
   toglierlo (Simone, 28/9: «il fondo delle tabelle è grigio, non riesco a modificarlo»). Qui: fondo bianco, bordi chiari,
   angoli arrotondati; prima colonna come etichetta nelle tabelle di testo (es. Target / Metodologia / Obiettivi). */
.gn-contenuto .wp-block-table { margin-inline: 0; }
.gn-contenuto .wp-block-table table { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--gn-linea); border-radius: 16px; overflow: hidden; background: #fff; font-size: 16px; line-height: 1.55; }
.gn-contenuto .wp-block-table td, .gn-contenuto .wp-block-table th { background: #fff; border: 0; border-bottom: 1px solid var(--gn-linea); padding: 18px 22px; vertical-align: top; color: var(--gn-testo); }
.gn-contenuto .wp-block-table tr:last-child > td, .gn-contenuto .wp-block-table tr:last-child > th { border-bottom: 0; }
.gn-contenuto .wp-block-table td + td, .gn-contenuto .wp-block-table th + th { border-left: 1px solid var(--gn-linea); }
.gn-contenuto .wp-block-table table.has-fixed-layout tr:first-child > td:first-child:not(:has(img)) { width: 26%; }
.gn-contenuto .wp-block-table td:first-child:not(:has(img)) { font-weight: 700; color: var(--gn-inchiostro); }
/* tabella di loghi (celle con solo un'immagine): loghi centrati in orizzontale e in verticale, tutti della stessa altezza massima */
.gn-contenuto .wp-block-table td:has(> img), .gn-contenuto .wp-block-table td:has(> a > img) { text-align: center; vertical-align: middle; padding: 24px; height: 150px; }
.gn-contenuto .wp-block-table td > img, .gn-contenuto .wp-block-table td > a > img { display: inline-block; width: auto; max-width: 100%; max-height: 96px; object-fit: contain; border-radius: 0; vertical-align: middle; }
@media (max-width: 767px) {
	.gn-contenuto .wp-block-table td, .gn-contenuto .wp-block-table th { padding: 14px 16px; font-size: 15px; }
	.gn-contenuto .wp-block-table td:has(> img) { padding: 14px; height: 96px; }
	.gn-contenuto .wp-block-table td > img { max-height: 56px; }
}

/* ---- Elenco numerato (righe con numero colorato) – «Cosa comprende» ---- */
ol.is-style-gn-numerata { list-style: none; margin-left: 0; padding: 0; counter-reset: gn-n; border-top: 1px solid var(--gn-linea); }
ol.is-style-gn-numerata > li { counter-increment: gn-n; display: flex; gap: 20px; align-items: baseline; margin: 0; padding: 20px 0; border-bottom: 1px solid var(--gn-linea); font-size: 18px; line-height: 1.5; color: var(--gn-inchiostro); }
ol.is-style-gn-numerata > li::before { content: counter(gn-n, decimal-leading-zero); font-family: var(--gn-titoli); font-weight: 800; color: var(--gn-colore, var(--gn-verde)); font-variant-numeric: tabular-nums; flex: none; }

/* ---- Aree di intervento (riquadri numerati) ---- */
ul.is-style-gn-aree { list-style: none; margin-left: 0; padding: 0; counter-reset: gn-a; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
ul.is-style-gn-aree > li { counter-increment: gn-a; margin: 0; padding: 22px 24px; border-radius: 16px; background: var(--gn-fondo2); display: flex; flex-direction: column; gap: 6px; font-weight: 700; font-size: 17px; line-height: 1.4; color: var(--gn-inchiostro); }
ul.is-style-gn-aree > li::before { content: counter(gn-a, decimal-leading-zero); font-family: var(--gn-titoli); font-weight: 800; color: var(--gn-colore, var(--gn-verde)); }

/* ---- Riquadri colorati (bordo sinistro nei 4 colori del marchio) ---- */
ul.is-style-gn-riquadri { list-style: none; margin-left: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
ul.is-style-gn-riquadri > li { margin: 0; padding: 18px 20px; border-radius: 14px; background: var(--gn-fondo2); font-size: 16px; font-weight: 700; color: var(--gn-inchiostro); border-left: 4px solid var(--gn-rosso); line-height: 1.4; }
ul.is-style-gn-riquadri > li:nth-child(4n+2) { border-left-color: var(--gn-blu); }
ul.is-style-gn-riquadri > li:nth-child(4n+3) { border-left-color: var(--gn-verde); }
ul.is-style-gn-riquadri > li:nth-child(4n+4) { border-left-color: var(--gn-giallo); }

/* ---- Citazione scura ---- */
.wp-block-quote.is-style-gn-citazione { margin: 48px 0 64px; padding: 36px 40px; background: var(--gn-inchiostro); color: #fff; border-radius: 24px; border: 0; font-family: var(--gn-titoli); font-size: 28px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; }
.wp-block-quote.is-style-gn-citazione p { margin: 0; color: inherit; font: inherit; }
.wp-block-quote.is-style-gn-citazione cite { display: block; margin-top: 14px; font-family: var(--gn-corpo); font-size: 15px; font-weight: 500; font-style: normal; color: #b5b5bb; }

/* ---- Loghi in riquadri (associazioni, partner). «:not(#gn-loghi)» pareggia il peso delle regole della galleria di WordPress. ---- */
.wp-block-gallery.is-style-gn-loghi.is-style-gn-loghi:not(#gn-loghi) { gap: 20px; justify-content: flex-start; }
.wp-block-gallery.has-nested-images.is-style-gn-loghi.is-style-gn-loghi figure.wp-block-image:not(#gn-loghi) { width: auto; flex: none; margin: 0; padding: 20px 28px; border: 1px solid var(--gn-linea); border-radius: 16px; background: #fff; display: flex; align-items: center; justify-content: center; }
.wp-block-gallery.has-nested-images.is-style-gn-loghi.is-style-gn-loghi figure.wp-block-image:not(#gn-loghi) a { width: auto; height: auto; flex: none; display: flex; }
.wp-block-gallery.has-nested-images.is-style-gn-loghi.is-style-gn-loghi figure.wp-block-image:not(#gn-loghi) img { height: 48px; width: auto; max-width: none; object-fit: contain; flex: none; border-radius: 0; }

/* ---- Scheda del libro ---- */
dl.gn-scheda { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 12px 28px; font-size: 15.5px; padding: 24px 0; border-top: 1px solid var(--gn-linea); border-bottom: 1px solid var(--gn-linea); }
dl.gn-scheda dt { margin: 0; color: var(--gn-grigio2); }
dl.gn-scheda dd { margin: 0; font-weight: 600; color: var(--gn-inchiostro); }

/* ---- Pulsante PayPal dei libri ---- */
form.gn-paypal { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 16px; }
.gn-paypal__campo { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--gn-grigio); }
form.gn-paypal .gn-paypal__campo select, form.gn-paypal .gn-paypal__campo input { border: 1px solid var(--gn-bordo); border-radius: 12px; padding: 11px 14px; font: 400 15px var(--gn-corpo); background: #fcfcfb; color: var(--gn-inchiostro); min-width: 200px; }
.gn-paypal__bottone { display: block; }
.gn-paypal-manca { font-size: 14px; color: var(--gn-rosso); border: 1px dashed var(--gn-rosso); border-radius: 12px; padding: 10px 14px; margin: 0; }

/* Pulsanti PayPal incollati com'erano nel sito vecchio (tabella con etichette, tendine, campo codice fiscale).
   Selettori con più elementi: il tema Hello dà bordi, fondi a righe e spazi a tutte le tabelle. */
/* campi affiancati (etichetta sopra, campo sotto) e pulsante «Paga adesso» sulla stessa riga se c'è posto */
div.gn-paypal--html form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; margin: 0; }
div.gn-paypal--html form table { flex: 1 1 300px; width: auto; margin: 0; border: 0; border-collapse: collapse; background: none; font-size: 14px; }
div.gn-paypal--html form table:has(tr:nth-child(5)) { flex-basis: 100%; }   /* tre campi (abbonamento): il pulsante va sotto */
div.gn-paypal--html form table tbody { display: grid; grid-auto-flow: column; grid-template-rows: auto auto; grid-auto-columns: minmax(0, 1fr); column-gap: 10px; }
div.gn-paypal--html form table tbody tr { display: contents; }
div.gn-paypal--html form table tbody tr td { padding: 0 0 4px; border: 0; background: none; line-height: 1.35; font-size: 12.5px; font-weight: 600; color: var(--gn-grigio); vertical-align: bottom; }
div.gn-paypal--html form select, div.gn-paypal--html form input[type="text"] { border: 1px solid var(--gn-bordo); border-radius: 12px; padding: 9px 12px; font: 400 14px var(--gn-corpo); background: #fcfcfb; color: var(--gn-inchiostro); width: 100%; min-width: 0; margin: 0; }
div.gn-paypal--html form input[type="image"] { display: block; flex: 0 0 auto; }
@media (max-width: 767px) {
	div.gn-paypal--html form table tbody { grid-auto-flow: row; grid-template-rows: none; grid-auto-columns: auto; }
}

/* ---- Testi del riquadro d'acquisto come nel sito vecchio (sopra e sotto il pulsante PayPal) ---- */
p.gn-acquisto__prima { margin: 0 0 8px; font-style: italic; font-size: 14px; line-height: 1.4; color: var(--gn-grigio); }
div.gn-acquisto__dopo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 10px; font-size: 15px; line-height: 1.4; color: var(--gn-grigio); }
div.gn-acquisto__dopo p { margin: 0; }
div.gn-acquisto__dopo p.gn-nota { flex-basis: 100%; font-size: 12.5px; font-style: italic; }
div.gn-acquisto__dopo a.gn-bonifico { display: inline-block; border: 1px solid var(--gn-inchiostro); color: var(--gn-inchiostro); padding: 8px 16px; border-radius: 999px; font-family: var(--gn-titoli); font-weight: 700; font-size: 14px; line-height: 1.2; text-decoration: none; }
div.gn-acquisto__dopo a.gn-bonifico:hover { background: var(--gn-inchiostro); color: #fff; }
div.gn-acquisto__dopo a.gn-promo { color: var(--gn-rosso); font-weight: 700; text-decoration: underline; }
p.gn-scheda-titolo { margin: 0 0 2px; font-family: var(--gn-titoli); font-weight: 700; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--gn-grigio2); }
/* scheda lunga (6 voci o più, es. eSports e Figurazione): più fitta, perché la colonna non superi l'altezza della copertina */
dl.gn-scheda:has(> dt:nth-of-type(6)) { font-size: 14px; line-height: 1.35; gap: 4px 16px; padding: 12px 0; }

/* ---- Menu della sezione nella barra laterale (stesse voci del menu in alto) ---- */
ul.gn-menu-sezione { list-style: none; margin: 0; padding: 0; }
ul.gn-menu-sezione li a { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 0; border-top: 1px solid var(--gn-linea); font: 600 16px/1.4 var(--gn-corpo); color: var(--gn-inchiostro); text-decoration: none; }
ul.gn-menu-sezione li a::after { content: "→"; flex: none; }
ul.gn-menu-sezione li.gn-figlia a { padding-left: 18px; font-weight: 400; font-size: 15px; color: var(--gn-grigio); }
ul.gn-menu-sezione li a:hover, ul.gn-menu-sezione li.gn-attiva a { color: var(--gn-rosso); }

/* ---- Finestra «Paga con bonifico» (testo della pagina del bonifico) ---- */
dialog.gn-dialog { width: calc(100% - 32px); max-width: 620px; max-height: calc(100vh - 48px); overflow: auto; border: 0; border-radius: 24px; padding: 36px 32px 32px; background: #fff; color: var(--gn-testo); font: 400 15.5px/1.6 var(--gn-corpo); box-shadow: 0 30px 80px rgba(27,27,31,.3); }
dialog.gn-dialog::backdrop { background: rgba(27,27,31,.55); }
dialog.gn-dialog .gn-dialog__titolo { margin: 0 36px 16px 0; font: 800 22px/1.2 var(--gn-titoli); letter-spacing: -.02em; color: var(--gn-inchiostro); }
dialog.gn-dialog .gn-dialog__testo > * { margin: 0 0 12px; }
dialog.gn-dialog .gn-dialog__testo h2, dialog.gn-dialog .gn-dialog__testo h3 { font: 700 17px/1.3 var(--gn-titoli); color: var(--gn-inchiostro); margin: 18px 0 8px; }
dialog.gn-dialog .gn-dialog__testo strong { color: var(--gn-inchiostro); }
dialog.gn-dialog button.gn-dialog__chiudi { position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 999px; background: var(--gn-fondo2); color: var(--gn-inchiostro); font-size: 24px; line-height: 40px; cursor: pointer; }
dialog.gn-dialog button.gn-dialog__chiudi:hover { background: var(--gn-inchiostro); color: #fff; }

/* ---- Pulsante «Leggi l'articolo su …» dei lavori (doppia classe: il colore dei link del kit non lo copre) ---- */
a.gn-link-esterno.gn-link-esterno { display: inline-block; background: var(--gn-inchiostro); color: #fff; padding: 15px 26px; border-radius: 999px; font-family: var(--gn-titoli); font-weight: 700; font-size: 15px; line-height: 1.2; text-decoration: none; }
a.gn-link-esterno.gn-link-esterno:hover { background: var(--gn-rosso); color: #fff; }

@media (max-width: 767px) {
	.gn-contenuto h2 { font-size: 28px; }
	ul.is-style-gn-aree, ul.is-style-gn-riquadri { grid-template-columns: 1fr; }
	.wp-block-quote.is-style-gn-citazione { padding: 28px 26px; font-size: 22px; }
}