/* --------------------------------------------------------------
   Syncro — Theme modes (dark/light).
   Modello prototipo:
   - Default = "dark". Sezioni con .syncro-adapt-dark restano nere.
   - [data-theme="light"] → SOLO .syncro-adapt-dark diventa cream-soft
     con testo scuro e bordi neri.
   - Sezioni non marcate (hero, marquee, manifesto, method, services,
     plugins, portfolio, contact) NON cambiano mai.
   - Body/global bg NON cambia mai (resta cream).
-------------------------------------------------------------- */

/* Stato default: nessun override. Contract explicit. */
html[data-theme="dark"] { }

/* -----------------------------------------------------------
   LIGHT — inversione locale sole sezioni .syncro-adapt-dark
   ----------------------------------------------------------- */

html[data-theme="light"] .syncro-adapt-dark {
	background-color: var(--wp--preset--color--cream-soft) !important;
	color: var(--wp--preset--color--black) !important;
	border-color: var(--wp--preset--color--black) !important;
}

/* Testi discendenti bianchi → neri (esclusi elementi accento). */
html[data-theme="light"] .syncro-adapt-dark :where(h1, h2, h3, h4, h5, h6, p, li, span, small, strong, em, blockquote, cite, figcaption, time, dt, dd, address) {
	color: var(--wp--preset--color--black);
}

/* Bordi bianchi/40 → neri. */
html[data-theme="light"] .syncro-adapt-dark :where([class*="border"], [class*="__inner"], [class*="__row"], [class*="__grid"], [class*="__list"], [class*="__cell"], [class*="__card"], [class*="__member"]) {
	border-color: var(--wp--preset--color--black);
}

/* Bottoni ghost (bianco su nero) → scuri su cream. */
html[data-theme="light"] .syncro-adapt-dark .syncro-btn--ghost {
	color: var(--wp--preset--color--black);
	border-color: var(--wp--preset--color--black);
}

html[data-theme="light"] .syncro-adapt-dark .syncro-btn--ghost:hover,
html[data-theme="light"] .syncro-adapt-dark .syncro-btn--ghost:focus-visible {
	background-color: var(--wp--preset--color--lime);
	color: var(--wp--preset--color--black);
}

/* Visual-break: mask overlay più chiaro. */
html[data-theme="light"] .syncro-adapt-dark .syncro-visual__mask {
	background:
		linear-gradient(90deg, rgba(250,247,239,.92) 0%, rgba(250,247,239,.72) 52%, rgba(250,247,239,.12) 100%) !important;
}

/* Filtro immagini attenuato in light. */
html[data-theme="light"] .syncro-adapt-dark img,
html[data-theme="light"] .syncro-adapt-dark .photo-desat {
	filter: grayscale(.18) contrast(.96) brightness(1.12);
}

/* Team card interne: bianche in light per contrasto sul cream. */
html[data-theme="light"] .syncro-adapt-dark .syncro-team__card,
html[data-theme="light"] .syncro-adapt-dark .syncro-team__member {
	background-color: var(--wp--preset--color--white) !important;
	color: var(--wp--preset--color--black) !important;
}

/* Team banner: testo bianco/75 → nero/75, border bianco/25 → nero/28. */
html[data-theme="light"] .syncro-team__banner {
	color: rgba(0, 0, 0, 0.75) !important;
	border-color: rgba(0, 0, 0, 0.28) !important;
}

/* Pagina /servizi: foto card in light passano da grayscale(1) a filter
   quasi neutro (match prototipo: grayscale(.12) contrast(.98) brightness(1.06)). */
html[data-theme="light"] .syncro-services-detail__img {
	filter: grayscale(0.12) contrast(0.98) brightness(1.06);
}

/* Team CTA "Apri il team": bg-white/testo-black → invariato in light
   (già bianco anche in dark, non necessita override). */

/* -----------------------------------------------------------
   HERO — la sezione resta bg-black in entrambi i mode, ma il
   gradient del mask cambia (nero in dark, cream-soft in light).
   Effetto: la foto emerge di più in light + i testi diventano
   neri perché la mask cream copre lo sfondo dietro. Match prototipo.
   ----------------------------------------------------------- */

html[data-theme="light"] .syncro-hero__mask {
	background-image:
		linear-gradient(90deg,
			rgba(250, 247, 239, 0.94) 0%,
			rgba(250, 247, 239, 0.76) 46%,
			rgba(250, 247, 239, 0.20) 100%),
		linear-gradient(0deg,
			rgba(250, 247, 239, 0.82) 0%,
			rgba(0, 0, 0, 0) 42%) !important;
}

/* Testi hero in light: titolo bianco → nero, subtitle lime → nero,
   quote/eyebrow → nero. Le tag glass e la CTA restano leggibili. */
html[data-theme="light"] .syncro-hero__title,
html[data-theme="light"] .syncro-hero__subtitle,
html[data-theme="light"] .syncro-hero__quote {
	color: var(--wp--preset--color--black);
}

html[data-theme="light"] .syncro-hero__eyebrow-row {
	border-bottom-color: rgba(0, 0, 0, 0.4);
}

html[data-theme="light"] .syncro-hero__tags {
	border-color: rgba(0, 0, 0, 0.5);
	background-color: rgba(255, 255, 255, 0.55);
	color: var(--wp--preset--color--black);
}
html[data-theme="light"] .syncro-hero__tag {
	border-color: rgba(0, 0, 0, 0.3);
}

/* Ghost CTA nella hero: testo bianco → nero in light. Border resta
   bianco (praticamente invisibile su mask cream, come nel prototipo). */
html[data-theme="light"] .syncro-hero .syncro-btn--ghost {
	color: var(--wp--preset--color--black);
}

/* -----------------------------------------------------------
   FOOTER — nel prototipo il footer si inverte in light:
   bg da nero → cream-soft, testo bianco → nero. I bordi
   bianco/30 diventano neri/40.
   ----------------------------------------------------------- */

html[data-theme="light"] .site-footer {
	background-color: var(--wp--preset--color--cream-soft) !important;
	color: var(--wp--preset--color--black) !important;
	border-top-color: var(--wp--preset--color--black);
}

html[data-theme="light"] .site-footer :where(h1, h2, h3, h4, h5, h6, p, span, div, a) {
	color: var(--wp--preset--color--black);
}

html[data-theme="light"] .site-footer .site-footer__brand,
html[data-theme="light"] .site-footer .site-footer__logo {
	color: var(--wp--preset--color--black);
}

html[data-theme="light"] .site-footer .site-footer__title,
html[data-theme="light"] .site-footer .site-footer__lead {
	color: var(--wp--preset--color--black) !important;
}

/* CTA "Sistemiamola" resta invariata (bg-white con testo nero). */

/* Colonne: in light il bordo passa a nero/15 (visibile su cream,
   coerente col design brutalist — il bianco/30 su cream era invisibile). */
html[data-theme="light"] .site-footer .site-footer__col {
	border-color: rgba(0, 0, 0, 0.15);
}

html[data-theme="light"] .site-footer .site-footer__links a,
html[data-theme="light"] .site-footer .site-footer__meta {
	color: rgba(0, 0, 0, 0.75);
}

html[data-theme="light"] .site-footer .site-footer__links a:hover,
html[data-theme="light"] .site-footer .site-footer__links a:focus-visible {
	color: var(--wp--preset--color--magenta);
}

/* CTA "Sistemiamola" in light: inversione (bg nero, testo bianco). */
html[data-theme="light"] .site-footer .site-footer__cta {
	background-color: var(--wp--preset--color--black);
	color: var(--wp--preset--color--white);
	border-color: var(--wp--preset--color--black);
}

/* Badge "Facciamo" (--white) in light: bg bianco → nero, testo nero → bianco. */
html[data-theme="light"] .site-footer .syncro-badge--white {
	background-color: var(--wp--preset--color--black);
	color: var(--wp--preset--color--white);
}
/* Badge "Vai" (--magenta) resta invariato. */

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	html[data-theme="light"] .syncro-adapt-dark,
	html[data-theme="light"] .site-footer {
		transition: none !important;
	}
}