/*
Theme Name: Estate Cloud
Theme URI: https://estatecloud.it
Author: EXTARK S.R.L.
Author URI: https://extark.it
Description: Tema a blocchi (Full Site Editing) per la presentazione del gestionale Estate Cloud, il portale per la gestione dei centri estivi. Interamente modificabile dall'Editor del sito di WordPress: colori, testi, sezioni, menu, header e footer.
Requires at least: 6.2
Tested up to: 6.6
Requires PHP: 7.4
Version: 1.5.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: estate-cloud
Tags: full-site-editing, block-patterns, blog, business, one-column, two-columns, wide-blocks, block-styles, custom-colors, custom-logo, custom-menu, editor-style, featured-images, template-editing, translation-ready
*/

/* ==========================================================================
   Estate Cloud — stili di supporto
   La maggior parte dello stile è definita in theme.json ed è modificabile
   dall'Editor del sito (Aspetto > Editor > Stili).
   ========================================================================== */

/* --- Font di sistema con fallback: caricati da functions.php via Google Fonts locale opzionale --- */

/* Titolo del sito nell'header */
.wp-block-site-title a {
	text-decoration: none;
	font-weight: 800;
	letter-spacing: -0.02em;
}

/* Navigazione */
.wp-block-navigation .wp-block-navigation-item__content {
	text-decoration: none;
	font-weight: 600;
}

.wp-block-navigation .wp-block-navigation-item__content:hover {
	text-decoration: underline;
	text-underline-offset: 0.35em;
}

/* Menu mobile a schermo intero: sfondo coerente col brand */
.wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--crema) !important;
	color: var(--wp--preset--color--testo) !important;
}

/* --- Stile blocco: "Scheda gialla" (card arrotondata come nella presentazione) --- */
.is-style-ec-card-gialla {
	background-color: var(--wp--preset--color--giallo);
	border-radius: 28px;
	padding: clamp(1.75rem, 4vw, 2.75rem);
	color: var(--wp--preset--color--testo);
}

.is-style-ec-card-gialla :where(h1, h2, h3, h4, h5, h6) {
	color: var(--wp--preset--color--testo);
}

/* --- Stile blocco: "Scheda bianca" --- */
.is-style-ec-card-bianca {
	background-color: var(--wp--preset--color--bianco);
	border: 1px solid var(--wp--preset--color--bordo);
	border-radius: 22px;
	padding: clamp(1.5rem, 3vw, 2.25rem);
	box-shadow: 0 4px 20px rgba(52, 23, 23, 0.06);
}

/* --- Stile blocco: bottone contornato --- */
.wp-block-button.is-style-ec-outline > .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--testo);
	border: 2px solid var(--wp--preset--color--testo);
}

.wp-block-button.is-style-ec-outline > .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--testo);
	color: var(--wp--preset--color--crema-chiara);
}

/* --- Stile blocco: elenco con spunta --- */
.wp-block-list.is-style-ec-check {
	list-style: none;
	padding-left: 0;
}

.wp-block-list.is-style-ec-check > li {
	position: relative;
	padding-left: 2rem;
	margin-bottom: 0.75rem;
}

.wp-block-list.is-style-ec-check > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.45em;
	width: 1.15rem;
	height: 1.15rem;
	border-radius: 50%;
	background-color: var(--wp--preset--color--testo);
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFEEC2' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
	background-size: 70%;
	background-position: center;
	background-repeat: no-repeat;
}

/* --- Stile blocco: elenco numerato "passi" --- */
.wp-block-list.is-style-ec-passi {
	list-style: none;
	counter-reset: ec-step;
	padding-left: 0;
}

.wp-block-list.is-style-ec-passi > li {
	counter-increment: ec-step;
	position: relative;
	padding-left: 3rem;
	margin-bottom: 1.1rem;
	min-height: 2rem;
}

.wp-block-list.is-style-ec-passi > li::before {
	content: counter(ec-step);
	position: absolute;
	left: 0;
	top: 0;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	background-color: var(--wp--preset--color--giallo);
	color: var(--wp--preset--color--testo);
	font-weight: 800;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.95rem;
}

/* --- Stile blocco: gruppo "etichetta" (badge) ---
   display:table lo fa restringere al contenuto restando di livello blocco,
   così l'allineamento scelto nell'Editor viene rispettato. --- */
.is-style-ec-badge {
	display: table;
	margin-left: 0 !important;
	margin-right: auto !important;
	background-color: var(--wp--preset--color--giallo);
	color: var(--wp--preset--color--testo);
	border-radius: 999px;
	padding: 0.35rem 1rem;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.is-style-ec-badge.has-text-align-center {
	margin-left: auto !important;
	margin-right: auto !important;
}

.is-style-ec-badge.has-text-align-right {
	margin-left: auto !important;
	margin-right: 0 !important;
}

/* --- Tabelle leggibili sul crema --- */
.wp-block-table table {
	border-collapse: collapse;
	background-color: var(--wp--preset--color--bianco);
	border-radius: 14px;
	overflow: hidden;
}

.wp-block-table th,
.wp-block-table td {
	border: 1px solid var(--wp--preset--color--bordo);
	padding: 0.7rem 0.9rem;
}

.wp-block-table thead th {
	background-color: var(--wp--preset--color--giallo);
	color: var(--wp--preset--color--testo);
	font-weight: 800;
}

/* --- Dettagli / accordion (blocco core/details) --- */
.wp-block-details {
	background-color: var(--wp--preset--color--bianco);
	border: 1px solid var(--wp--preset--color--bordo);
	border-radius: 16px;
	padding: 1.1rem 1.35rem;
}

.wp-block-details summary {
	font-weight: 700;
	cursor: pointer;
	font-family: var(--wp--preset--font-family--titoli);
}

/* --- Immagini con angoli morbidi di default nelle schede --- */
.is-style-ec-card-gialla img,
.is-style-ec-card-bianca img {
	border-radius: 14px;
}

/* --- Accessibilità: focus visibile --- */
:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 3px solid var(--wp--preset--color--ruggine);
	outline-offset: 2px;
}

/* --- Solo per screen reader --- */
.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: var(--wp--preset--color--crema);
	clip-path: none;
	color: var(--wp--preset--color--testo);
	display: block;
	font-weight: 700;
	height: auto;
	left: 5px;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}


/* ==========================================================================
   Grafiche: icone, decorazioni e passi numerati
   ========================================================================== */

/* --- Sezioni a tutta larghezza --- */
.ec-section {
	position: relative;
	overflow: hidden;
}

.ec-section > * {
	position: relative;
	z-index: 1;
}

/* --- Decorazioni SVG di sfondo --- */
.ec-deco {
	position: absolute;
	pointer-events: none;
	z-index: 0;
	max-width: none !important;
	margin: 0 !important;
	line-height: 0;
}

.ec-deco svg {
	width: 100%;
	height: auto;
	display: block;
}

.ec-deco--sole {
	top: -170px;
	right: -150px;
	width: 460px;
	color: rgba(255, 184, 0, 0.38);
}

.ec-deco--sinistra {
	top: auto;
	right: auto;
	bottom: -220px;
	left: -180px;
	width: 460px;
	color: rgba(255, 184, 0, 0.10);
}

.ec-deco--cta {
	top: -200px;
	right: -170px;
	width: 520px;
	color: rgba(255, 255, 255, 0.22);
}

@media (max-width: 781px) {
	.ec-deco--sole,
	.ec-deco--cta {
		width: 300px;
		top: -110px;
		right: -110px;
	}

	.ec-deco--sinistra {
		width: 300px;
		bottom: -140px;
		left: -120px;
	}
}

/* --- Icone --- */
.ec-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 16px;
	background-color: var(--wp--preset--color--giallo);
	color: var(--wp--preset--color--testo);
	margin-bottom: 1.1rem;
	flex: 0 0 auto;
}

.ec-icon svg {
	width: 26px;
	height: 26px;
}

/* Icona scura su fondo giallo */
.ec-icon--scura {
	background-color: var(--wp--preset--color--testo);
	color: var(--wp--preset--color--giallo);
}

/* Icona a contorno, per le sezioni scure */
.ec-icon--contorno {
	background-color: transparent;
	border: 2px solid var(--wp--preset--color--giallo);
	color: var(--wp--preset--color--giallo);
}

.ec-icon--grande {
	width: 62px;
	height: 62px;
	border-radius: 20px;
}

.ec-icon--grande svg {
	width: 32px;
	height: 32px;
}

.ec-icon--centrata {
	display: flex;
	margin-left: auto;
	margin-right: auto;
}

.ec-icon--mini {
	width: 27px;
	height: 27px;
	border-radius: 10px;
	margin-bottom: 0;
	background-color: var(--wp--preset--color--testo);
	color: var(--wp--preset--color--giallo);
}

.ec-icon--mini svg {
	width: 16px;
	height: 16px;
}

/* --- Riga di rassicurazioni sotto ai pulsanti dell'hero --- */
.ec-trust {
	list-style: none;
	margin: 2rem 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.7rem 1.25rem;
}

.ec-trust li {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.9rem;
	font-weight: 700;
}

/* --- Card sollevata nell'hero --- */
.ec-card-flottante {
	box-shadow: 0 22px 50px rgba(52, 23, 23, 0.16);
}

/* --- Elenco a passi numerati --- */
.ec-passi {
	list-style: none;
	margin: var(--wp--preset--spacing--50) auto 0;
	padding: 0;
	max-width: 980px !important;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
	gap: 2.25rem 3.5rem;
}

.ec-passi > li {
	display: flex;
	gap: 1.15rem;
	align-items: flex-start;
}

.ec-passi h3 {
	font-family: var(--wp--preset--font-family--titoli);
	font-size: 1.15rem;
	font-weight: 800;
	margin: 0.2rem 0 0.5rem;
	line-height: 1.25;
}

.ec-passi p {
	margin: 0;
}

.ec-passo-num {
	flex: 0 0 auto;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background-color: var(--wp--preset--color--giallo);
	color: var(--wp--preset--color--testo);
	font-family: var(--wp--preset--font-family--titoli);
	font-weight: 800;
	font-size: 1.15rem;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 14px rgba(52, 23, 23, 0.12);
}

/* --- Marchio nell'intestazione --- */
.ec-logo-mark {
	display: inline-flex;
	width: 42px;
	height: 42px;
	flex: 0 0 auto;
}

.ec-logo-mark svg {
	width: 100%;
	height: 100%;
}

/* --- Separatore a onda --- */
.ec-wave {
	line-height: 0;
	margin: 0 !important;
	max-width: none !important;
}

.ec-wave svg {
	width: 100%;
	height: 60px;
	display: block;
}

/* --- L'icona non deve schiacciare il testo nelle schede strette --- */
.wp-block-column > .ec-icon,
.wp-block-group > .ec-icon {
	max-width: none;
}


/* ==========================================================================
   Immagini, mockup e fasce illustrate
   ========================================================================== */

/* --- Mockup delle schermate --- */
.ec-mockup {
	margin: 0;
}

.ec-mockup img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 0;
}

.ec-mockup--flottante img {
	filter: drop-shadow(0 24px 46px rgba(52, 23, 23, 0.18));
}

.ec-mockup--telefono img {
	max-width: 280px;
	margin-inline: auto;
	filter: drop-shadow(0 20px 40px rgba(52, 23, 23, 0.16));
}

/* --- Sezioni alternate immagine + testo --- */
@media (max-width: 781px) {
	.ec-showcase {
		display: flex;
		flex-direction: column;
	}

	/* Su schermo stretto l'immagine viene sempre prima del testo */
	.ec-showcase--inversa > .wp-block-column:first-child {
		order: 2;
	}

	.ec-showcase--inversa > .wp-block-column:last-child {
		order: 1;
	}
}

/* --- Fascia gialla dei punti chiave --- */
.ec-punti {
	list-style: none;
	margin: 0 auto;
	padding: 0;
	max-width: 1100px !important;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
	gap: 1.5rem 2.5rem;
}

.ec-punti > li {
	display: flex;
	align-items: center;
	gap: 1rem;
	font-size: 1.02rem;
	font-weight: 700;
	line-height: 1.4;
}

.ec-punti .ec-icon {
	margin-bottom: 0;
}

/* --- Fascia illustrata a tutta larghezza --- */
.ec-banda {
	line-height: 0;
	overflow: hidden;
}

.ec-banda-immagine {
	margin: 0;
}

.ec-banda-immagine img {
	width: 100%;
	height: clamp(180px, 26vw, 340px);
	object-fit: cover;
	object-position: center bottom;
	display: block;
	border-radius: 0;
}

/* --- Schede che si sollevano al passaggio del mouse --- */
.is-style-ec-card-bianca,
.is-style-ec-card-gialla {
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

@media (hover: hover) {
	.wp-block-column.is-style-ec-card-bianca:hover,
	.wp-block-column.is-style-ec-card-gialla:hover {
		transform: translateY(-5px);
		box-shadow: 0 18px 38px rgba(52, 23, 23, 0.14);
	}
}

/* --- Accordion: il triangolo diventa un pulsante tondo --- */
.wp-block-details {
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.wp-block-details[open],
.wp-block-details:hover {
	border-color: var(--wp--preset--color--giallo);
	box-shadow: 0 6px 20px rgba(52, 23, 23, 0.07);
}

/* --- Logo del brand nell'intestazione --- */
.ec-header .wp-block-site-logo img {
	border-radius: 0;
}

/* --- Immagini con angoli morbidi nei contenuti --- */
.wp-block-post-content .wp-block-image:not(.ec-mockup):not(.ec-banda-immagine) img {
	border-radius: 20px;
}


/* ==========================================================================
   Intestazione e piè di pagina
   ========================================================================== */

/* --- Intestazione appiccicata in alto --- */
.ec-header {
	position: sticky;
	top: 0;
	z-index: 100;
	backdrop-filter: saturate(140%) blur(6px);
}

/* Quando la barra di amministrazione è visibile, l'header si ferma sotto */
.admin-bar .ec-header {
	top: 32px;
}

@media screen and (max-width: 782px) {
	.admin-bar .ec-header {
		top: 46px;
	}
}

.ec-header-azioni {
	gap: var(--wp--preset--spacing--40);
}

/* --- Marchio --- */
.ec-brand-mark {
	display: inline-flex;
	width: 40px;
	height: 40px;
	flex: 0 0 auto;
	line-height: 0;
}

.ec-brand-mark svg {
	width: 100%;
	height: 100%;
}

/* Se è stato caricato un logo del sito, il marchio di riserva sparisce */
.ec-brand:has(.wp-block-site-logo img) .ec-brand-mark {
	display: none;
}

/* --- Voci del menu --- */
.wp-block-navigation .wp-block-navigation-item__content {
	text-decoration: none;
	font-weight: 600;
	padding: 0.35rem 0;
	position: relative;
}

.wp-block-navigation .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 3px;
	border-radius: 2px;
	background-color: var(--wp--preset--color--giallo);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.2s ease;
}

.wp-block-navigation .wp-block-navigation-item__content:hover::after,
.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content::after {
	transform: scaleX(1);
}

.wp-block-navigation .wp-block-navigation-item__content:hover {
	text-decoration: none;
}

/* Voce della pagina che stai guardando */
.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content {
	font-weight: 800;
}

/* --- Sottomenu a tendina --- */
.wp-block-navigation .wp-block-navigation__submenu-container {
	background-color: var(--wp--preset--color--bianco);
	border: 1px solid var(--wp--preset--color--bordo);
	border-radius: 14px;
	padding: 0.5rem;
	box-shadow: 0 12px 32px rgba(52, 23, 23, 0.14);
	min-width: 220px;
}

.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	border-radius: 8px;
	padding: 0.5rem 0.75rem;
}

.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content::after {
	display: none;
}

.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	background-color: var(--wp--preset--color--crema);
}

/* --- Menu su schermo stretto --- */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--testo);
}

.wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--crema) !important;
	color: var(--wp--preset--color--testo) !important;
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: 1.35rem;
	font-family: var(--wp--preset--font-family--titoli);
	font-weight: 800;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::after {
	display: none;
}

/* Su telefono il pulsante della demo lascia spazio al menu */
@media (max-width: 600px) {
	.ec-header-cta {
		display: none;
	}
}

/* ==========================================================================
   Piè di pagina
   ========================================================================== */

.ec-footer-marchio {
	display: flex;
	align-items: center;
	gap: 0.7rem;
}

.ec-footer-marchio .ec-logo-mark {
	width: 44px;
	height: 44px;
}

.ec-footer-nome {
	font-family: var(--wp--preset--font-family--titoli);
	font-size: 1.5rem;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--giallo);
}

.ec-footer .ec-footer-titolo {
	margin-bottom: 1.1rem;
}

.wp-block-list.ec-footer-lista {
	list-style: none;
	padding-left: 0;
	margin: 0;
}

.ec-footer-lista li {
	margin-bottom: 0.7rem;
}

/* Collegamenti del piè di pagina: chiari, sottolineati solo al passaggio */
.ec-footer a {
	color: var(--wp--preset--color--crema);
	text-decoration: none;
	transition: color 0.18s ease;
}

.ec-footer a:hover {
	color: var(--wp--preset--color--giallo);
	text-decoration: underline;
	text-underline-offset: 0.28em;
}

.ec-footer-azienda {
	color: var(--wp--preset--color--giallo);
}

.ec-footer-mail a {
	font-weight: 700;
}

.ec-footer-riga {
	border: 0;
	border-top: 1px solid rgba(255, 238, 194, 0.22);
	opacity: 1;
}

.ec-footer-legale {
	font-size: 0.875rem;
	opacity: 0.85;
}

.ec-footer-legale p {
	margin: 0;
}

/* Pulsante contornato sul fondo scuro */
.ec-footer .wp-block-button.is-style-ec-outline > .wp-block-button__link {
	color: var(--wp--preset--color--crema);
	border-color: rgba(255, 238, 194, 0.55);
}

.ec-footer .wp-block-button.is-style-ec-outline > .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--giallo);
	border-color: var(--wp--preset--color--giallo);
	color: var(--wp--preset--color--testo);
}

@media (max-width: 781px) {
	.ec-footer-legale {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.6rem;
	}
}