/* =========================================================
   Codecasa – CSS legato agli script del plugin
   (i ritocchi grafici restano in Editor > Stili > CSS aggiuntivo)
   ========================================================= */

/* ---------- Testo che si colora con lo scroll ----------
   Uso: dai la classe "testo-reveal" a un paragrafo o titolo.
   Lo script divide il testo in lettere (.rw) e aggiunge .on man mano che scorri. */
.testo-reveal .rw {
	color: #4d4d4d;
	transition: color .15s ease;
}
.testo-reveal .rw.on {
	color: #fff;
}
@media (prefers-reduced-motion: reduce) {
	.testo-reveal .rw {
		color: inherit;
		transition: none;
	}
}

/* ---------- Contatori numerici ----------
   cifre a larghezza fissa: il numero non "balla" mentre conta */
.cc-counter {
	font-variant-numeric: tabular-nums;
}

/* ---------- Overlay menu su mobile ----------
   indicatore "+" sulle voci con sottovoci, "−" quando sono aperte */
@media (max-width: 781px) {
	.cc-overlay-nav li.cc-has-sub > .wp-block-navigation-item__content::after {
		content: "+";
		margin-left: .45em;
		font-size: .7em;
		align-self: center;
	}
	.cc-overlay-nav li.cc-has-sub.is-active > .wp-block-navigation-item__content::after {
		content: "\2212";
	}
}

/* ---------- Pagina "in lavorazione" ---------- */
.cc-wip {
	min-height: 60vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 6rem 1.5rem;
	box-sizing: border-box;
}
.cc-wip__titolo {
	margin: 0 0 1.5rem;
	font-size: clamp(2rem, 5vw, 4rem);
	font-weight: 600;
	text-transform: uppercase;
	line-height: 1.1;
}
.cc-wip__linea {
	width: min(92vw, 1800px);
	border: 0;
	border-top: 1px solid #999;
	margin: 0 0 3rem;
}
.cc-wip__testo {
	margin: 0;
	font-size: 1.15rem;
	letter-spacing: .04em;
	color: #555;
}
.cc-wip__home {
	display: inline-block;
	margin-top: 2.5rem;
	border: 1px solid #333;
	border-radius: 999px;
	padding: .6em 1.4em;
	font-size: .8rem;
	text-transform: uppercase;
	color: #333;
	text-decoration: none;
}
.cc-wip__home:hover { background: #000; color: #fff; }
/* avviso visibile solo agli amministratori sulle pagine in lavorazione */
.cc-wip-avviso {
	position: fixed;
	left: 1rem;
	bottom: 1rem;
	z-index: 99999;
	background: #000;
	color: #fff;
	font-size: .8rem;
	padding: .6em 1em;
	border-radius: 6px;
	box-shadow: 0 2px 10px rgba(0,0,0,.25);
}

/* ---------- Fade in allo scroll (come Squarespace) ----------
   Attivo solo se <html> ha la classe "cc-fade-on" (messa da codecasa_custom.php nell'<head>).
   Gli elementi partono invisibili; codecasa.js aggiunge .cc-in quando entrano nello schermo
   e .cc-done a dissolvenza finita (da lì l'elemento torna normale).
   !! L'elenco degli elementi deve restare uguale a FADE_SEL in codecasa.js !! */
html.cc-fade-on .wp-site-blocks :is(h1, h2, h3, h4, h5, h6, p, .wp-block-buttons, .wp-block-image, .wp-block-post-featured-image, .wp-block-cover, .wp-block-gallery, .wp-block-separator, .wp-block-list, .wp-block-quote, .wp-block-table, .wp-block-embed, .wp-block-video, .wp-block-post-date, li.wp-block-post):not(.wp-block-template-part *, .wp-block-navigation *, li.wp-block-post *, .wp-block-cover *, .wp-block-gallery *, .wp-block-quote *, .wp-block-buttons *, .metaslider, .metaslider *, [class*="cb-carousel"] *, [class*="mapp"], [class*="mapp"] *, .wp-block-ab-animate, .wp-block-ab-animate *, .testo-reveal, .testo-reveal *, .cc-counter, .cc-counter *, .cc-eb *, .wp-block-query-pagination *, .cc-wip, .cc-wip *, .cc-done) {
	opacity: 0;
	transition: opacity .9s ease;
}
html.cc-fade-on .cc-in:not(.cc-done) {
	opacity: 1 !important;
}

/* ---------- "Leggi di più" negli articoli yacht ----------
   codecasa.js (initReadMore) mette il testo in .cc-rm-body e aggiunge il bottone .cc-rm-btn.
   L'altezza massima (20 righe, 12 su mobile) la calcola lo script. */
.cc-rm-body {
	position: relative;
	overflow: hidden;
	transition: max-height .5s ease;
}
.cc-rm-body.is-clamped::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 4.5em;
	background: linear-gradient(to bottom, rgba(255,255,255,0), #fff);
	pointer-events: none;
}
.cc-rm-btns {
	margin-top: 1.5rem;
}
.cc-rm-btns[hidden] {
	display: none;
}
/* stesso stile dei bottoni "Scopri di più" */
.cc-rm-btn {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	display: inline-flex;
	align-items: center;
	gap: .6em;
	background: #fff;
	color: #000;
	border: 1px solid #000;
	border-radius: 999px;
	padding: .75em 1.5em;
	font: inherit;
	font-size: .8rem;
	line-height: 1;
	letter-spacing: .04em;
	text-transform: uppercase;
	cursor: pointer;
	transition: color .35s ease;
}
.cc-rm-btn::before {
	content: "";
	display: block;
	width: 1.6em;
	height: .7em;
	flex: none;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 10'%3E%3Cpath d='M0 5h22M18 1l4 4-4 4' fill='none' stroke='black' stroke-width='1.3'/%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 24 10'%3E%3Cpath d='M0 5h22M18 1l4 4-4 4' fill='none' stroke='black' stroke-width='1.3'/%3E%3C/svg%3E") center/contain no-repeat;
	transform: rotate(90deg);
	transition: transform .35s ease;
}
.cc-rm-btn[aria-expanded="true"]::before {
	transform: rotate(-90deg);
}
.cc-rm-btn::after {
	content: "";
	position: absolute;
	inset: 0;
	background: #000;
	transform: translateY(-101%);
	transition: transform .35s ease;
	z-index: -1;
}
.cc-rm-btn:hover,
.cc-rm-btn:focus-visible {
	color: #fff;
}
.cc-rm-btn:hover::after,
.cc-rm-btn:focus-visible::after {
	transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
	.cc-rm-body { transition: none; }
}