/* ==========================================================================
   Girolomoni Magazine — corpo degli articoli (sito + editor Gutenberg)
   Valori presi dalla sezione articolo di girolomoni-mockup.css, che usa le
   stesse variabili di Automatic.css (--primary, --base, --space-*, --text-*, --h*).
   Ambito: sul sito il contenuto dell'articolo (elemento Contenuto di Bricks),
   nell'editor il canvas di Gutenberg.
   ========================================================================== */

:root {
	--gm-reading-width: 52rem;
	--gm-rule: #e8e2d5;
	--gm-radius: 14px;
}

/* ---------- Tipografia del corpo ---------- */

/* Solo margini verticali: quelli orizzontali restano al tema / all'editor (centratura dei blocchi) */
:is(body.single-post .brxe-post-content, .editor-styles-wrapper) p {
	margin-block: 0 var(--space-s);
}
/* Nel corpo gli H2 hanno l'aspetto degli H3 del sito (Edo Pro, peso normale), come nel mockup;
   il tema di Bricks li farebbe in Barlow maiuscolo */
:is(body.single-post .brxe-post-content, .editor-styles-wrapper) :is(h2, h3, h4) {
	font-family: "Edo Pro", "Barlow SemiCondensed", cursive;
	font-weight: 400;
	text-transform: none;
	letter-spacing: normal;
}
:is(body.single-post .brxe-post-content, .editor-styles-wrapper) h2 {
	font-size: var(--h3);
	line-height: 1.1;
	margin-block: var(--space-xl) var(--space-s);
	scroll-margin-top: 140px;
}
:is(body.single-post .brxe-post-content, .editor-styles-wrapper) h3 {
	font-size: var(--h3);
	line-height: 1.1;
	margin-block: var(--space-l) var(--space-xs);
}
:is(body.single-post .brxe-post-content, .editor-styles-wrapper) h4 {
	font-size: var(--h4);
	line-height: 1.15;
	color: var(--neutral);
}
:is(body.single-post .brxe-post-content, .editor-styles-wrapper) :is(ul, ol) {
	margin-block: 0 var(--space-s);
	padding-left: 1.15em;
}
:is(body.single-post .brxe-post-content, .editor-styles-wrapper) li {
	margin-bottom: .45em;
}
:is(body.single-post .brxe-post-content, .editor-styles-wrapper) strong {
	font-weight: 600;
}
/* Link nel testo (nel mockup: a.inline) */
:is(body.single-post .brxe-post-content, .editor-styles-wrapper) :is(p, li) a {
	color: var(--primary);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
	font-weight: 600;
}

/* ---------- Immagini ---------- */

:is(body.single-post .brxe-post-content, .editor-styles-wrapper) .wp-block-image {
	margin-block: var(--space-l);
}
:is(body.single-post .brxe-post-content, .editor-styles-wrapper) .wp-block-image img {
	width: 100%;
	height: auto;
	border-radius: var(--gm-radius);
	object-fit: cover;
}

/* ---------- Stile "Citazione Gino" (core/quote) ---------- */

/* Font del testo, non quello delle citazioni del tema (Georgia, maiuscoletto) */
.wp-block-quote.is-style-gino {
	margin-block: var(--space-l);
	padding: 0 0 0 var(--space-s);
	border: 0;
	border-left: 4px solid var(--primary);
	background: none;
	font-family: "Barlow SemiCondensed", system-ui, sans-serif;
}
.wp-block-quote.is-style-gino p {
	font-family: inherit;
	font-size: var(--text-l);
	line-height: 1.4;
	font-style: italic;
	margin: 0 0 10px;
}
.wp-block-quote.is-style-gino cite {
	display: block;
	font-family: inherit;
	font-style: normal;
	font-size: var(--text-m);
	text-transform: none;
	letter-spacing: normal;
	color: #6d6d6d;
}

/* ---------- Stile "Box prodotti" (core/media-text) ---------- */

/* !important sulle colonne: nell'editor la larghezza della colonna immagine è scritta inline */
.wp-block-media-text.is-style-box-prodotti {
	grid-template-columns: 230px 1fr !important;
	gap: var(--space-m);
	align-items: center;
	background: var(--base);
	border-radius: var(--gm-radius);
	padding: var(--space-m);
	margin-block: var(--space-l);
}
.wp-block-media-text.is-style-box-prodotti > .wp-block-media-text__media {
	align-self: start;
}
.wp-block-media-text.is-style-box-prodotti > .wp-block-media-text__media img {
	width: 100%;
	height: auto;
	border-radius: 10px;
}
.wp-block-media-text.is-style-box-prodotti > .wp-block-media-text__content {
	padding: 0;
}
.wp-block-media-text.is-style-box-prodotti h4 {
	margin: 0 0 8px;
}
.wp-block-media-text.is-style-box-prodotti p {
	font-size: var(--text-m);
	color: #3a3a3a;
	margin: 0 0 var(--space-s);
}
.wp-block-media-text.is-style-box-prodotti .wp-block-buttons {
	margin: 0;
}
.wp-block-media-text.is-style-box-prodotti .wp-block-button__link {
	display: inline-block;
	background: var(--primary);
	color: #fff;
	text-decoration: none;
	font-weight: 600;
	font-size: var(--text-m);
	padding: 12px 28px;
	border-radius: 4px;
}
.wp-block-media-text.is-style-box-prodotti .wp-block-button__link:hover {
	background: var(--primary-hover);
}
/* Su mobile il blocco va in colonna: immagine a 230px, testo sotto (come il mockup) */
@media (max-width: 600px) {
	.wp-block-media-text.is-style-box-prodotti.is-stacked-on-mobile {
		grid-template-columns: 100% !important;
	}
	.wp-block-media-text.is-style-box-prodotti.is-stacked-on-mobile > .wp-block-media-text__media {
		max-width: 230px;
	}
	.wp-block-media-text.is-style-box-prodotti.is-stacked-on-mobile > .wp-block-media-text__content {
		padding: 0;
	}
}

/* ---------- Stile "Domande frequenti" (core/group + core/details) ---------- */

.wp-block-group.is-style-domande-frequenti > .wp-block-details,
.wp-block-group.is-style-domande-frequenti .wp-block-details {
	border-bottom: 1px solid var(--gm-rule);
	padding: var(--space-s) 0;
	margin: 0;
}
.wp-block-group.is-style-domande-frequenti summary {
	list-style: none;
	cursor: pointer;
	font-weight: 600;
	font-size: var(--text-l);
	position: relative;
	padding-right: 40px;
}
.wp-block-group.is-style-domande-frequenti summary::-webkit-details-marker {
	display: none;
}
.wp-block-group.is-style-domande-frequenti summary::after {
	content: "+";
	position: absolute;
	right: 4px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--primary);
	font-size: 30px;
	font-weight: 400;
	line-height: 1;
}
.wp-block-group.is-style-domande-frequenti details[open] > summary::after {
	content: "\2013";
}
.wp-block-group.is-style-domande-frequenti .wp-block-details p {
	margin: 12px 0 0;
	color: #2b2b2b;
}

/* ---------- Solo editor ---------- */

/* Font del testo come sul sito (i @font-face li aggiunge il plugin, dagli stessi file di Bricks) */
.editor-styles-wrapper {
	font-family: "Barlow SemiCondensed", system-ui, sans-serif;
}
/* Colonna di lettura come sul sito */
.editor-styles-wrapper .is-root-container > :where(:not(.alignwide):not(.alignfull)) {
	max-width: var(--gm-reading-width);
}