/*
 * AgriKompas – stili dei contenuti (blocchi Gutenberg).
 * Caricato sia sul sito sia nell'editor, così l'editor è identico al sito.
 */

/* ---------- Tipografia di base ---------- */
:is(.ak-content, .editor-styles-wrapper) h1, :is(.ak-content, .editor-styles-wrapper) :is(.is-layout-constrained, .is-layout-flow) > h1 { margin: 20px 0; }
:is(.ak-content, .editor-styles-wrapper) h2, :is(.ak-content, .editor-styles-wrapper) :is(.is-layout-constrained, .is-layout-flow) > h2 { margin: .94em 0; }
:is(.ak-content, .editor-styles-wrapper) h3, :is(.ak-content, .editor-styles-wrapper) :is(.is-layout-constrained, .is-layout-flow) > h3 { margin: 1em 0; }
:is(.ak-content, .editor-styles-wrapper) h4, :is(.ak-content, .editor-styles-wrapper) :is(.is-layout-constrained, .is-layout-flow) > h4 { margin: 1.33em 0; }
:is(.ak-content, .editor-styles-wrapper) p,  :is(.ak-content, .editor-styles-wrapper) .is-layout-constrained > p  { margin: 0 0 20px; text-align: justify; }
:is(.ak-content, .editor-styles-wrapper) p.has-text-align-center { text-align: center; }
:is(.ak-content, .editor-styles-wrapper) p.has-text-align-left   { text-align: left; }
:is(.ak-content, .editor-styles-wrapper) p.has-text-align-right  { text-align: right; }
:is(.ak-content, .editor-styles-wrapper) img { max-width: 100%; height: auto; }

/* Titoli "responsive" come sul sito originale (Avada) */
@media (max-width: 1100px) {
	:is(.ak-content, .editor-styles-wrapper) h1 { font-size: clamp(34.1px, calc(34.1px + (100vw - 800px) * .02265), 40px); }
	:is(.ak-content, .editor-styles-wrapper) h2 { font-size: clamp(27px, calc(27px + (100vw - 800px) * .0099), 30px); }
}
@media (max-width: 800px) {
	:is(.ak-content, .editor-styles-wrapper) h1 { font-size: clamp(27.7px, calc(27.7px + (100vw - 390px) * .01561), 34.1px); }
	:is(.ak-content, .editor-styles-wrapper) h2 { font-size: 27px; }
}

/* ---------- Sezioni a tutta larghezza ---------- */
.wp-block-group.ak-section { position: relative; }

/* Bordo a "nuvola" in cima alla sezione (classe: ak-cloud). Il colore è quello di sfondo della sezione. */
.wp-block-group.ak-cloud::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -100px;
	height: 100px;
	background-color: inherit;
	-webkit-mask: url(../images/cloud.svg) center bottom / 100% 100% no-repeat;
	mask: url(../images/cloud.svg) center bottom / 100% 100% no-repeat;
	pointer-events: none;
}

/* ---------- Immagini ---------- */
:is(.ak-content, .editor-styles-wrapper) .wp-block-image { margin: 0 0 20px; }
:is(.ak-content, .editor-styles-wrapper) .wp-block-image.ban { margin-bottom: 0; }
:is(.ak-content, .editor-styles-wrapper) .wp-block-image.aligncenter { text-align: center; }
:is(.ak-content, .editor-styles-wrapper) .wp-block-image img { display: block; margin-left: auto; margin-right: auto; }
.ak-hero-image { margin: 0; }

/* ---------- Soluzioni: griglia 4 colonne ---------- */
:is(.ak-content, .editor-styles-wrapper) .wp-block-columns.ak-tiles { gap: 0 4%; margin: 0; padding-top: 50px; }
:is(.ak-content, .editor-styles-wrapper) .ak-tiles .wp-block-image { margin: 0; }
.ak-tiles h3 { text-align: center; }

/* Colonne: impilate sotto i 1000px (come Avada) */
@media (max-width: 1000px) {
	.wp-block-columns { flex-wrap: wrap !important; }
	:is(.ak-content, .editor-styles-wrapper) .wp-block-columns.ak-tiles { row-gap: 50px; }
	.wp-block-columns > .wp-block-column { flex-basis: 100% !important; flex-grow: 0 !important; }
}

/* Telefoni: le immagini tonde vanno 2 per riga */
@media (max-width: 640px) {
	.ak-tiles.wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column { flex-basis: calc(50% - 2%) !important; flex-grow: 0 !important; min-width: 0; }
	:is(.ak-content, .editor-styles-wrapper) .wp-block-columns.ak-tiles { row-gap: 0; }
	:is(.ak-content, .editor-styles-wrapper) .ak-tiles .wp-block-column { margin-bottom: 0; }
	:is(.ak-content, .editor-styles-wrapper) .ak-tiles h3 { font-size: 16px; letter-spacing: -.5px; margin-bottom: 40px; }
	:is(.ak-content, .editor-styles-wrapper) .wp-block-columns.ak-tiles { padding-top: 0; }
	:is(.ak-content, .editor-styles-wrapper) h2 + .wp-block-columns.ak-tiles { padding-top: 50px; }
	:is(.ak-content, .editor-styles-wrapper) .wp-block-columns.ak-tiles:last-child { margin-bottom: -25px; }
}

/* ---------- Pulsanti ---------- */
.wp-block-buttons > .wp-block-button .wp-block-button__link {
	font-family: var(--wp--preset--font-family--poppins);
	font-size: 14px;
	font-weight: 600;
	line-height: 17px;
	letter-spacing: 0;
	text-transform: uppercase;
	text-decoration: none;
	padding: 13px 29px;
	border: 1px solid #fff;
	border-radius: 2px;
	transition: background-color .2s, color .2s, border-color .2s;
}
.wp-block-button__link.has-verde-background-color:hover   { background-color: #fff !important; color: var(--wp--preset--color--verde) !important; }
.wp-block-button__link.has-marrone-background-color:hover { background-color: #fff !important; color: var(--wp--preset--color--marrone) !important; border-color: var(--wp--preset--color--marrone); }
.wp-block-button__link.has-azzurro-background-color:hover { background-color: #fff !important; color: var(--wp--preset--color--azzurro) !important; border-color: var(--wp--preset--color--azzurro); }

/* Icona "mi piace" (classe: ak-icon-thumbs-up) */
.wp-block-button.ak-icon-thumbs-up .wp-block-button__link::before {
	content: "";
	display: inline-block;
	width: 14px;
	height: 14px;
	margin-right: 10px;
	vertical-align: -1px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M466.27 286.69C475.04 271.84 480 256 480 236.85c0-44.015-37.218-85.58-85.82-85.58H357.7c4.92-12.81 8.85-28.13 8.85-46.54C366.55 31.936 328.86 0 271.28 0c-61.607 0-58.093 94.933-71.76 108.6-22.747 22.747-49.615 66.447-68.76 83.4H32c-17.673 0-32 14.327-32 32v240c0 17.673 14.327 32 32 32h64c14.893 0 27.408-10.174 30.978-23.95 44.509 1.001 75.06 39.94 177.802 39.94 7.22 0 15.22.01 22.22.01 77.117 0 111.986-39.423 112.94-95.33 13.319-18.425 20.299-43.122 17.34-66.99 9.854-18.452 13.664-40.343 8.99-62.99zm-61.75 53.83c12.56 21.13 1.26 49.41-13.94 57.57 7.7 48.78-17.608 65.9-53.12 65.9h-37.82c-71.639 0-118.029-37.82-171.64-37.82V240h10.92c28.36 0 67.98-70.89 94.54-97.46 28.36-28.36 18.91-75.63 37.82-94.54 47.27 0 47.27 32.98 47.27 56.73 0 39.17-28.36 56.72-28.36 94.54h160c8.84 0 16 7.16 16 16 0 17.71-12.26 31.55-27.44 36.99 17.04 10.45 25.44 29.44 15.17 45.15-4.01 6.12-14.99 11.16-21.55 15.37zM88 440c0 13.255-10.745 24-24 24s-24-10.745-24-24 10.745-24 24-24 24 10.745 24 24z'/%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 512 512'%3E%3Cpath d='M466.27 286.69C475.04 271.84 480 256 480 236.85c0-44.015-37.218-85.58-85.82-85.58H357.7c4.92-12.81 8.85-28.13 8.85-46.54C366.55 31.936 328.86 0 271.28 0c-61.607 0-58.093 94.933-71.76 108.6-22.747 22.747-49.615 66.447-68.76 83.4H32c-17.673 0-32 14.327-32 32v240c0 17.673 14.327 32 32 32h64c14.893 0 27.408-10.174 30.978-23.95 44.509 1.001 75.06 39.94 177.802 39.94 7.22 0 15.22.01 22.22.01 77.117 0 111.986-39.423 112.94-95.33 13.319-18.425 20.299-43.122 17.34-66.99 9.854-18.452 13.664-40.343 8.99-62.99zm-61.75 53.83c12.56 21.13 1.26 49.41-13.94 57.57 7.7 48.78-17.608 65.9-53.12 65.9h-37.82c-71.639 0-118.029-37.82-171.64-37.82V240h10.92c28.36 0 67.98-70.89 94.54-97.46 28.36-28.36 18.91-75.63 37.82-94.54 47.27 0 47.27 32.98 47.27 56.73 0 39.17-28.36 56.72-28.36 94.54h160c8.84 0 16 7.16 16 16 0 17.71-12.26 31.55-27.44 36.99 17.04 10.45 25.44 29.44 15.17 45.15-4.01 6.12-14.99 11.16-21.55 15.37zM88 440c0 13.255-10.745 24-24 24s-24-10.745-24-24 10.745-24 24-24 24 10.745 24 24z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------- Sezione contatti ---------- */
.ak-contact { padding-top: 25px; padding-bottom: 25px; }
.ak-contact p { font-size: 24px; color: #fff; text-align: center; }
@media (max-width: 800px) { .ak-contact p { font-size: 18px; } }
.ak-contact .ak-show-small { display: none; }
@media (max-width: 640px) {
	.ak-contact .ak-hide-small { display: none; }
	.ak-contact .ak-show-small { display: block; }
}
/* nell'editor mostra entrambe le versioni (desktop e mobile) */
.editor-styles-wrapper .ak-contact .ak-hide-small,
.editor-styles-wrapper .ak-contact .ak-show-small { display: block; }