/*
 * Tartufai Senesi: stili che theme.json non copre.
 * Colori, font e misure stanno in theme.json (variabili --wp--preset--*).
 */

/* ---------- Struttura: gli strati si toccano, senza spazi tra testata, contenuto e piè di pagina ---------- */

:where(.wp-site-blocks) > * {
	margin-block-start: 0;
}

/* Pagine corte: il contenuto si allunga e il piè di pagina arriva in fondo allo schermo,
   senza lasciare una striscia avorio sotto */
.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
	min-height: calc(100svh - var(--wp-admin--admin-bar--height, 0px));
}

.wp-site-blocks > main {
	flex: 1 0 auto;
}

.wp-block-post-content > .alignfull + .alignfull,
main > .alignfull + .alignfull {
	margin-block-start: 0;
}

/* ---------- Onde tra uno strato e l'altro ---------- */
/* Lo stile "Onda: sopra c'è X" disegna in alto il bordo ondulato dello strato precedente (colore X)
   con le linee sottili del logo. La forma cambia con il colore di sfondo dello strato. */

[class*="is-style-onda-da-"] {
	--onda-forma: url(../images/onde/forma-1.svg);
	--onda-linee: url(../images/onde/linee-1.svg);
	position: relative;
	padding-top: calc(var(--wp--custom--onda--altezza) + var(--wp--preset--spacing--40));
}

[class*="is-style-onda-da-"]::before,
[class*="is-style-onda-da-"]::after {
	content: "";
	position: absolute;
	top: -1px; /* evita la riga chiara tra due strati con alcuni zoom */
	left: 0;
	right: 0;
	height: calc(var(--wp--custom--onda--altezza) + 1px);
	pointer-events: none;
}

[class*="is-style-onda-da-"]::before {
	background-color: var(--onda-sopra);
	-webkit-mask: var(--onda-forma) 0 0 / 100% 100% no-repeat;
	mask: var(--onda-forma) 0 0 / 100% 100% no-repeat;
}

[class*="is-style-onda-da-"]::after {
	background: var(--onda-linee) 0 0 / 100% 100% no-repeat;
}

.is-style-onda-da-avorio { --onda-sopra: var(--wp--preset--color--avorio); }
.is-style-onda-da-azzurro { --onda-sopra: var(--wp--preset--color--azzurro); }
.is-style-onda-da-verde { --onda-sopra: var(--wp--preset--color--verde); }
.is-style-onda-da-grigio { --onda-sopra: var(--wp--preset--color--grigio); }
.is-style-onda-da-marrone { --onda-sopra: var(--wp--preset--color--marrone); }

.has-verde-background-color[class*="is-style-onda-da-"] {
	--onda-forma: url(../images/onde/forma-2.svg);
	--onda-linee: url(../images/onde/linee-2.svg);
}
.has-grigio-background-color[class*="is-style-onda-da-"] {
	--onda-forma: url(../images/onde/forma-3.svg);
	--onda-linee: url(../images/onde/linee-3.svg);
}
.has-marrone-background-color[class*="is-style-onda-da-"] {
	--onda-forma: url(../images/onde/forma-4.svg);
	--onda-linee: url(../images/onde/linee-4.svg);
}

/* ---------- Link e pulsanti negli strati colorati ---------- */
/* L'oro scuro va bene solo su avorio: sugli strati colorati i link prendono il colore del testo. */

.has-background:not(.has-avorio-background-color):not(.has-segnaposto-background-color) a:where(:not(.wp-element-button)) {
	color: inherit;
}

.has-background:not(.has-avorio-background-color):not(.has-segnaposto-background-color) a:where(:not(.wp-element-button)):hover {
	text-decoration-thickness: 2px;
}

.has-marrone-background-color a:where(:not(.wp-element-button)) {
	color: var(--wp--preset--color--oro);
}

.has-marrone-background-color a:where(:not(.wp-element-button)):hover,
.has-marrone-background-color a:where(:not(.wp-element-button)):focus {
	color: var(--wp--preset--color--avorio);
}

/* Sul marrone il pulsante scuro non si vede: oro su marrone (6,2:1). */
.has-marrone-background-color .wp-element-button {
	background-color: var(--wp--preset--color--oro);
	color: var(--wp--preset--color--marrone);
}

.has-marrone-background-color .wp-element-button:hover,
.has-marrone-background-color .wp-element-button:focus {
	background-color: var(--wp--preset--color--avorio);
	color: var(--wp--preset--color--marrone);
}

/* ---------- Focus visibile ---------- */

a:focus-visible,
button:focus-visible,
.wp-element-button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 3px solid var(--wp--preset--color--testo);
	outline-offset: 3px;
	border-radius: 4px;
}

.has-grigio-background-color :focus-visible,
.has-marrone-background-color :focus-visible {
	outline-color: var(--wp--preset--color--avorio);
}

a {
	text-underline-offset: 0.18em;
}

/* ---------- Testata ---------- */

.testata .wp-block-site-title {
	max-width: 9.5em; /* "Associazione / Tartufai Senesi" su due righe */
}

.testata .wp-block-site-title a {
	color: var(--wp--preset--color--testo);
	text-decoration: none;
}

.testata .wp-block-navigation a {
	text-decoration: none;
	padding-block: 10px;
}

.testata .wp-block-navigation a:hover,
.testata .wp-block-navigation .current-menu-item > a,
.testata .wp-block-navigation a[aria-current="page"] {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 6px;
}

/* ---------- Elenco di link con righe ---------- */

.is-style-elenco-link {
	list-style: none;
	padding-left: 0;
	margin-block: 0;
}

.is-style-elenco-link > li {
	border-top: 1.5px solid currentColor;
	padding: 12px 0;
	margin: 0;
}

.is-style-elenco-link > li:last-child {
	border-bottom: 1.5px solid currentColor;
}

/* Riga = link in grassetto + eventuale descrizione (dopo un a capo) in corpo minore */
.is-style-elenco-link > li {
	font-size: var(--wp--preset--font-size--small);
}

.is-style-elenco-link > li > a:first-child {
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	color: inherit;
}

/* ---------- Date evento: riquadri avorio con il numero grande ---------- */

.is-style-date-evento {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.is-style-date-evento > li {
	flex: 1 1 96px;
	margin: 0;
	padding: 16px 14px;
	border-radius: 6px;
	background: var(--wp--preset--color--segnaposto);
	color: var(--wp--preset--color--testo);
	text-align: center;
	font-size: 15px;
	line-height: 1.3;
}

.is-style-date-evento > li strong {
	display: block;
	font-family: var(--wp--preset--font-family--josefin);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--data);
	line-height: 1;
	padding-top: 4px;
}

/* ---------- Riquadro (dati in evidenza, "In breve") ---------- */

.is-style-riquadro {
	border-radius: 6px;
	padding: 16px 20px;
}

/* Su avorio i riquadri sono avorio scuro; dentro uno strato colorato sono avorio, come nel mockup. */
.is-style-riquadro:not(.has-background) {
	background: var(--wp--preset--color--segnaposto);
}

.has-background:not(.has-avorio-background-color) .is-style-riquadro:not(.has-background),
.has-background:not(.has-avorio-background-color) .is-style-date-evento > li {
	background: var(--wp--preset--color--avorio);
}

/* ---------- Elenco notizie a righe (anno + titolo) ---------- */

.is-style-righe > li {
	border-top: 1.5px solid currentColor;
	padding: 18px 0;
	margin: 0;
}

.is-style-righe > li:last-child {
	border-bottom: 1.5px solid currentColor;
}

.wp-block-post-template.is-style-righe {
	gap: 0;
}

/* Data a sinistra, titolo accanto anche se lungo; su schermi stretti va sotto */
.is-style-righe > li > .is-layout-flex {
	flex-wrap: nowrap;
	align-items: baseline;
}

.is-style-righe > li > .is-layout-flex > :first-child {
	white-space: nowrap;
}

.is-style-righe > li > .is-layout-flex > :last-child {
	flex: 1 1 0;
	min-width: 0;
}

@media (max-width: 600px) {
	.is-style-righe > li > .is-layout-flex {
		flex-wrap: wrap;
	}

	.is-style-righe > li > .is-layout-flex > :last-child {
		flex-basis: 100%;
	}
}

/* Titoli degli elenchi nel colore del testo, sottolineati al passaggio */
.wp-block-post-title a {
	color: inherit;
	text-decoration: none;
}

.wp-block-post-title a:hover,
.wp-block-post-title a:focus {
	text-decoration: underline;
	text-decoration-thickness: 2px;
}

/* ---------- Bordo superiore delle colonne laterali ---------- */

.bordo-oro {
	border-top: 6px solid var(--wp--preset--color--oro);
	padding-top: 20px;
}

.bordo-verde {
	border-top: 6px solid var(--wp--preset--color--verde);
	padding-top: 20px;
}

.bordo-testo {
	border-top: 1.5px solid currentColor;
	padding-top: 16px;
}

/* ---------- Loghi dei tartufi in cerchio ---------- */
/* Il cerchio è sul contenitore: un border-radius sull'immagine ritaglierebbe anche gli angoli del marchio quadrato. */

.wp-block-image.cerchio-logo {
	width: 150px;
	height: 150px;
	margin: 0;
	border-radius: 50%;
	background: var(--wp--preset--color--avorio);
	display: flex;
	align-items: center;
	justify-content: center;
}

.wp-block-image.cerchio-logo img {
	width: 122px;
	height: 122px;
	object-fit: contain;
}

/* Il marchio del bianco è quadrato: più piccolo, così gli angoli restano dentro il cerchio */
.wp-block-image.cerchio-logo img[src*="logo-tartufo-bianco"] {
	width: 96px;
	height: 96px;
}

/* ---------- Piè di pagina ---------- */

.pie-di-pagina {
	font-size: var(--wp--preset--font-size--small);
}

.pie-di-pagina p {
	margin-block: 0;
}

/* ---------- Varie ---------- */

.wp-block-image:not(.cerchio-logo):not(.logo-testata) img {
	border-radius: 6px;
}

.screen-reader-text:focus {
	background: var(--wp--preset--color--avorio);
	color: var(--wp--preset--color--testo);
}

@media (prefers-reduced-motion: reduce) {
	* {
		scroll-behavior: auto !important;
	}
}

/* ---------- Testo delle pagine: più aria sopra i titoli ---------- */

.wp-block-post-content > :is(h2, h3, h4) {
	margin-block-start: var(--wp--preset--spacing--50);
}

.wp-block-post-content > :is(h2, h3, h4):first-child {
	margin-block-start: 0;
}