/*
 * AI SEO Agent - impaginazione articoli generati.
 * Stile leggero e non invasivo: eredita font e colori dal tema, migliora
 * solo spaziatura, leggibilità ed elementi (titoli, liste, citazioni,
 * immagini, tabelle) dei contenuti creati/gestiti dal plugin.
 */

.ai-seo-agent-article-content {
	/* Se il tema è un block theme con una palette definita, ne eredita il
	   colore principale; altrimenti usa un blu neutro di riserva. Così gli
	   accenti (link, indice, numerazione, citazioni) si intonano al sito
	   invece di imporre un colore fisso che potrebbe stonare. */
	--ai-seo-agent-accent: var(--wp--preset--color--primary, var(--wp--preset--color--accent-1, var(--wp--preset--color--accent, #2563eb)));
	line-height: 1.75;
	font-size: 1.05em;
	counter-reset: ai-seo-agent-section;
}

/* Paragrafi: respiro maggiore tra un blocco e l'altro, per evitare il
   classico "muro di testo" dei contenuti generati via AI. */
.ai-seo-agent-article-content > p,
.ai-seo-agent-article-content p {
	margin: 0 0 1.4em;
	max-width: 74ch;
}

/* Il primo paragrafo dell'articolo, leggermente più risaltato, con
   capolettera in stile editoriale per dare un punto di ingresso più
   invitante alla lettura. */
.ai-seo-agent-article-content > p:first-of-type {
	font-size: 1.12em;
	line-height: 1.7;
}

.ai-seo-agent-article-content > p:first-of-type::first-letter {
	float: left;
	font-size: 3.1em;
	line-height: 0.82;
	font-weight: 700;
	padding: 0.05em 0.09em 0 0;
	color: var(--ai-seo-agent-accent);
}

/* Indice "In questo articolo", generato automaticamente quando ci sono
   almeno 3 sottotitoli H2. */
.ai-seo-agent-article-content .ai-seo-agent-toc {
	margin: 1.6em 0 2em;
	padding: 1.1em 1.4em;
	border: 1px solid rgba(127, 127, 127, 0.25);
	border-left: 4px solid var(--ai-seo-agent-accent);
	border-radius: 0 8px 8px 0;
	background: rgba(127, 127, 127, 0.05);
}

.ai-seo-agent-article-content .ai-seo-agent-toc-title {
	margin: 0 0 0.6em;
	font-weight: 700;
	text-transform: uppercase;
	font-size: 0.78em;
	letter-spacing: 0.04em;
	opacity: 0.8;
}

.ai-seo-agent-article-content .ai-seo-agent-toc-title .ai-seo-agent-reading-time {
	font-weight: 400;
	text-transform: none;
	letter-spacing: normal;
}

.ai-seo-agent-article-content .ai-seo-agent-toc ol {
	margin: 0;
	padding-left: 1.3em;
	columns: 1;
}

.ai-seo-agent-article-content .ai-seo-agent-toc li {
	margin-bottom: 0.35em;
}

.ai-seo-agent-article-content .ai-seo-agent-toc a {
	text-decoration: none;
	font-weight: 600;
}

.ai-seo-agent-article-content .ai-seo-agent-toc a:hover {
	text-decoration: underline;
}

.ai-seo-agent-article-content h2,
.ai-seo-agent-article-content h3,
.ai-seo-agent-article-content h4 {
	margin: 1.8em 0 0.7em;
	line-height: 1.3;
	font-weight: 700;
	clear: both;
	scroll-margin-top: 1.5em;
}

.ai-seo-agent-article-content h2 {
	font-size: 1.55em;
	padding-top: 0.3em;
	border-top: 1px solid rgba(127, 127, 127, 0.25);
	counter-increment: ai-seo-agent-section;
}

/* Numerazione automatica delle sezioni principali (1., 2., 3., ...), utile
   soprattutto per guide e articoli "come fare": aiuta il lettore a
   orientarsi senza che l'AI debba occuparsene nel testo. */
.ai-seo-agent-article-content h2::before {
	content: counter(ai-seo-agent-section) ". ";
	color: var(--ai-seo-agent-accent);
}

.ai-seo-agent-article-content > h2:first-child {
	border-top: none;
	padding-top: 0;
}

.ai-seo-agent-article-content h3 {
	font-size: 1.25em;
}

.ai-seo-agent-article-content h4 {
	font-size: 1.1em;
}

.ai-seo-agent-article-content strong {
	font-weight: 700;
}

/* Elenchi: più staccati dal testo, con respiro tra le voci e marcatori nel
   colore di accento invece del solito pallino nero. */
.ai-seo-agent-article-content ul,
.ai-seo-agent-article-content ol {
	margin: 0 0 1.4em;
	padding-left: 1.6em;
}

.ai-seo-agent-article-content li {
	margin-bottom: 0.5em;
	line-height: 1.65;
}

.ai-seo-agent-article-content li::marker {
	color: var(--ai-seo-agent-accent);
	font-weight: 700;
}

.ai-seo-agent-article-content li > ul,
.ai-seo-agent-article-content li > ol {
	margin-top: 0.5em;
	margin-bottom: 0;
}

/* Citazioni / box in evidenza per consigli pratici o dati salienti, con una
   virgoletta decorativa per distinguerle a colpo d'occhio dal testo normale. */
.ai-seo-agent-article-content blockquote {
	position: relative;
	margin: 1.8em 0;
	padding: 0.9em 1.3em 0.9em 2.6em;
	border-left: 4px solid var(--ai-seo-agent-accent);
	background: rgba(127, 127, 127, 0.08);
	border-radius: 0 6px 6px 0;
	font-style: italic;
}

.ai-seo-agent-article-content blockquote::before {
	content: "\201C";
	position: absolute;
	left: 0.35em;
	top: 0.05em;
	font-size: 2.2em;
	line-height: 1;
	font-style: normal;
	font-weight: 700;
	color: var(--ai-seo-agent-accent);
	opacity: 0.55;
}

.ai-seo-agent-article-content blockquote p:last-child {
	margin-bottom: 0;
}

/* Immagini e figure generate/inserite dal plugin. */
.ai-seo-agent-article-content img {
	max-width: 100%;
	height: auto;
	border-radius: 8px;
}

.ai-seo-agent-article-content figure {
	margin: 1.8em auto;
	text-align: center;
}

.ai-seo-agent-article-content figcaption {
	margin-top: 0.6em;
	font-size: 0.85em;
	opacity: 0.75;
	text-align: center;
}

/* Tabelle, quando presenti nel contenuto. */
.ai-seo-agent-article-content table {
	width: 100%;
	border-collapse: collapse;
	margin: 1.6em 0;
	font-size: 0.95em;
}

.ai-seo-agent-article-content th,
.ai-seo-agent-article-content td {
	padding: 0.6em 0.8em;
	border: 1px solid rgba(127, 127, 127, 0.3);
	text-align: left;
}

.ai-seo-agent-article-content th {
	font-weight: 700;
	background: rgba(127, 127, 127, 0.08);
}

.ai-seo-agent-article-content tbody tr:nth-child(even) td {
	background: rgba(127, 127, 127, 0.035);
}

/* Link interni/esterni: eredita il colore di accento del tema quando
   disponibile (vedi --ai-seo-agent-accent sopra), con solo un accenno di
   sottolineatura leggibile. */
.ai-seo-agent-article-content a {
	color: var(--ai-seo-agent-accent);
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

@media (max-width: 600px) {
	.ai-seo-agent-article-content {
		font-size: 1em;
	}

	.ai-seo-agent-article-content h2 {
		font-size: 1.35em;
	}

	.ai-seo-agent-article-content h3 {
		font-size: 1.15em;
	}

	.ai-seo-agent-article-content > p:first-of-type::first-letter {
		font-size: 2.4em;
	}
}