/*
Theme Name: Studio 7x7 — MayBeDesign
Theme URI: https://maybedesign.it
Author: Francesca Timpano
Author URI: https://maybedesign.it
Description: Tema child di Twenty Twenty-Five per Studio 7x7 — brand, marketing e lead generation per piccole e medie imprese. Design moderno, testi oversize (Bricolage Grotesque + Inter), header sticky scuro, animazioni allo scroll, niente bordi. Palette Grigio luminoso.
Version: 2.11.0
Template: twentytwentyfive
Text Domain: maybedesign
*/

/* =========================================================
   Studio 7x7 — design system
   Tipografia oversize, niente righe/bordi, animazioni allo
   scroll in CSS puro (progressive enhancement + reduced motion).
   ========================================================= */

:root {
	--s7-ease: cubic-bezier(0.16, 0.84, 0.24, 1);
}

/* ---------- Header sticky, scuro (in contrasto) ---------- */
/* Lo sticky va sul wrapper del template-part: è alto quanto la pagina,
   mentre l'header interno da solo non avrebbe spazio per restare in alto. */
header.wp-block-template-part:has(.s7-header) {
	position: sticky;
	top: 0;
	z-index: 100;
}
.s7-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	transition: box-shadow 0.3s ease;
}
/* Niente overflow orizzontale dalle entrate laterali, senza toccare il body
   (overflow sul body disattiverebbe lo sticky). */
.wp-site-blocks > main {
	overflow-x: clip;
}
.s7-header a {
	color: var(--wp--preset--color--base);
	text-decoration: none;
	transition: opacity 0.2s ease;
}
.s7-header a:hover,
.s7-header a:focus {
	opacity: 0.6;
	text-decoration: none;
}
/* Icona burger ben visibile sull'header scuro */
.s7-header .wp-block-navigation__responsive-container-open,
.s7-header .wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--base);
}

/* Ombra quando si scrolla — CSS puro dove supportato */
@supports (animation-timeline: scroll()) {
	.s7-header {
		animation: s7-header-scrolled linear both;
		animation-timeline: scroll(root);
		animation-range: 0 120px;
	}
	@keyframes s7-header-scrolled {
		to {
			box-shadow: 0 10px 30px -20px rgba(0, 0, 0, 0.6);
		}
	}
}

/* ---------- Footer ---------- */
/* Link sempre visibili sul fondo scuro, senza underline */
.s7-footer a {
	color: inherit;
	text-decoration: none;
	transition: opacity 0.2s ease;
}
.s7-footer a:hover,
.s7-footer a:focus {
	opacity: 0.6;
	text-decoration: none;
}
/* Menu del footer: niente elenchi puntati */
.s7-footer .wp-block-list,
.s7-footnav {
	list-style: none;
	margin: 0;
	padding: 0;
}
.s7-footer .wp-block-list li {
	margin: 0;
}

/* Menu mobile (burger): overlay scuro a tutto schermo, item ben visibili */
.wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--contrast);
	padding: var(--wp--preset--spacing--40);
}
.wp-block-navigation__responsive-container.is-menu-open,
.wp-block-navigation__responsive-container.is-menu-open a {
	color: var(--wp--preset--color--base);
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	font-size: 1.4rem;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	margin: 0.25rem 0;
}
/* Pulsante di chiusura visibile sul fondo scuro */
.wp-block-navigation__responsive-container.is-menu-open ~ .wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--base);
}

/* ---------- Carousel servizi (scroll-snap, senza JS) ---------- */
.s7-carousel {
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--wp--preset--spacing--30);
	-webkit-overflow-scrolling: touch;
	padding-bottom: 1rem;
	scrollbar-width: thin;
	scrollbar-color: var(--wp--preset--color--accent) transparent;
}
.s7-carousel::-webkit-scrollbar { height: 6px; }
.s7-carousel::-webkit-scrollbar-thumb {
	background: var(--wp--preset--color--accent);
	border-radius: 100px;
}
.s7-carousel::-webkit-scrollbar-track { background: transparent; }
.s7-carousel > .wp-block-group {
	flex: 0 0 auto;
	width: min(82vw, 340px);
	scroll-snap-align: start;
	transition: background-color 0.5s var(--s7-ease), color 0.5s var(--s7-ease),
		transform 0.5s var(--s7-ease), box-shadow 0.5s var(--s7-ease);
}
/* Card attiva (autoplay): passa alla colorazione focus */
.s7-carousel > .wp-block-group.is-active {
	background-color: var(--wp--preset--color--accent) !important;
	transform: translateY(-8px);
	box-shadow: 0 24px 60px -28px rgba(30, 33, 38, 0.45);
}
.s7-carousel > .wp-block-group.is-active :is(h3, p, .s7-index) {
	color: var(--wp--preset--color--white) !important;
	transition: color 0.5s var(--s7-ease);
}
.s7-carousel-hint {
	letter-spacing: 0.04em;
	text-transform: uppercase;
	font-weight: 600;
}

/* ---------- Focus: niente outline su link e bottone burger ---------- */
a:focus,
a:focus-visible,
.wp-block-navigation__responsive-container-open:focus,
.wp-block-navigation__responsive-container-open:focus-visible,
.wp-block-navigation__responsive-container-close:focus,
.wp-block-navigation__responsive-container-close:focus-visible,
.wp-block-navigation__toggle:focus,
.wp-block-navigation__toggle:focus-visible {
	outline: none;
	box-shadow: none;
}

/* Nome dello studio: sempre nel font Keep Calm, per farlo risaltare */
.s7-name {
	font-family: var(--wp--preset--font-family--keep-calm) !important;
	letter-spacing: 0.02em;
}

/* ---------- Menu mobile: più aria dai bordi + nome studio e social ---------- */
.wp-block-navigation__responsive-container.is-menu-open {
	box-sizing: border-box;
	max-width: 100vw;
	overflow-x: hidden;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	padding: clamp(4.5rem, 14vh, 7rem) clamp(1.6rem, 8vw, 3rem) clamp(2rem, 8vh, 4rem);
	row-gap: 0.5rem;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	width: 100%;
	max-width: 100%;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	margin: 0.6rem 0.6rem 0 0;
}
/* Nome studio: solo dentro l'overlay aperto */
.s7-menu-title { display: none !important; }
.wp-block-navigation__responsive-container.is-menu-open .s7-menu-title {
	display: block !important;
	font-family: var(--wp--preset--font-family--keep-calm);
	font-weight: 600;
	font-size: clamp(2rem, 8vw, 3rem);
	letter-spacing: -0.02em;
	margin-bottom: 1rem;
}
/* Social: solo nell'overlay, separati dal menu */
.s7-menu-social { display: none !important; }
.wp-block-navigation__responsive-container.is-menu-open .s7-menu-social {
	display: flex !important;
	margin-top: 1.6rem;
	padding-top: 1.6rem;
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--base) 25%, transparent);
}

/* ---------- Form lead (Jetpack) ---------- */
.s7-form input[type="text"],
.s7-form input[type="email"],
.s7-form input[type="url"],
.s7-form input[type="tel"],
.s7-form input[type="number"],
.s7-form select,
.s7-form textarea {
	width: 100%;
	box-sizing: border-box;
	font: inherit;
	color: var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--base);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 16%, transparent);
	border-radius: 12px;
	padding: 0.85em 1em;
	margin-top: 0.35rem;
}
.s7-form textarea {
	min-height: 130px;
	resize: vertical;
}
/* Spaziatura campi: 2rem sotto ogni campo (input, select, checkbox, textarea) */
.s7-form .jetpack-contact-form-container,
.s7-form .wp-block-jetpack-contact-form-is-layout-flex {
	gap: 0 !important;
	row-gap: 0 !important;
}
.s7-form .jetpack-contact-form-container > *,
.s7-form .wp-block-jetpack-contact-form-is-layout-flex > *,
.s7-form .grunion-field-wrap {
	margin-bottom: 2rem;
}
/* Stacco netto della label dal campo */
.s7-form .grunion-field-label {
	display: block;
	margin-top: 0.4rem;
	margin-bottom: 0.45rem;
}
.s7-form .wp-block-jetpack-button {
	margin-top: 0;
	margin-bottom: 0;
}
.s7-form input:focus,
.s7-form select:focus,
.s7-form textarea:focus {
	outline: none;
	border-color: var(--wp--preset--color--accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--accent) 18%, transparent);
}
.s7-form label {
	display: block;
	font-weight: 500;
	margin-bottom: 0.2rem;
}
.s7-form .grunion-field-multiple-checkbox-wrapper label,
.s7-form .grunion-field-multiple-radio-wrapper label {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: 400;
	margin: 0.25rem 0;
}
.s7-form input[type="checkbox"],
.s7-form input[type="radio"] {
	width: auto;
	margin: 0;
	accent-color: var(--wp--preset--color--accent);
}
.s7-form .wp-block-jetpack-button .wp-block-button__link,
.s7-form button[type="submit"] {
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--white);
	border: 0;
	border-radius: 100px;
	padding: 1em 2em;
	font: inherit;
	font-weight: 500;
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.2s ease;
}
.s7-form .wp-block-jetpack-button .wp-block-button__link:hover,
.s7-form button[type="submit"]:hover {
	background-color: var(--wp--preset--color--contrast);
	transform: translateY(-2px);
}

/* Niente bordi: rimuove righe/separatori di default del parent */
hr.wp-block-separator {
	border: 0;
	height: 1px;
	background: transparent;
}

/* Immagini/cover morbide */
.s7-rounded img,
.s7-rounded .wp-block-cover__image-background,
.wp-block-cover.s7-rounded {
	border-radius: 22px;
}

/* Occhiello */
.s7-eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.16em;
	font-size: 0.82rem;
	font-weight: 600;
}

/* Testo oversize: titoli enormi, leggibili, senza righe */
.s7-display {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	line-height: 0.98;
	letter-spacing: -0.025em;
	font-size: clamp(3.2rem, 0.5rem + 11vw, 10rem);
}

/* Card SENZA bordo: solo fondo e leggera ombra all'hover */
.s7-card {
	border: 0 !important;
	border-radius: 22px;
	transition: transform 0.45s var(--s7-ease), box-shadow 0.45s var(--s7-ease);
	will-change: transform;
}
.s7-card:hover {
	transform: translateY(-8px);
	box-shadow: 0 24px 60px -28px rgba(30, 33, 38, 0.4);
}

/* Indice grande coral */
.s7-index {
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(2rem, 1rem + 3vw, 3.4rem);
	font-weight: 600;
	color: var(--wp--preset--color--accent);
	line-height: 1;
	letter-spacing: -0.03em;
}

/* Link con freccia */
.s7-arrow a {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	font-weight: 500;
}
.s7-arrow a::after {
	content: "\2192";
	transition: transform 0.3s var(--s7-ease);
}
.s7-arrow a:hover::after {
	transform: translateX(7px);
}

/* Hover zoom su immagini/cover */
.s7-zoom {
	overflow: hidden;
}
.s7-zoom img,
.s7-zoom .wp-block-cover__image-background {
	transition: transform 0.8s var(--s7-ease);
}
.s7-zoom:hover img,
.s7-zoom:hover .wp-block-cover__image-background {
	transform: scale(1.07);
}

/* Marquee parole chiave */
.s7-marquee {
	overflow: hidden;
	white-space: nowrap;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.s7-marquee__track {
	display: inline-block;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	letter-spacing: -0.02em;
	font-size: clamp(1.6rem, 1rem + 3vw, 3rem);
}
.s7-marquee__track span {
	color: var(--wp--preset--color--accent);
	margin: 0 0.4em;
}

/* ---------- Animazioni ---------- */
@media (prefers-reduced-motion: no-preference) {
	/* Entrata in scena al load (hero) */
	.s7-animate-in > * {
		animation: s7-rise 1s var(--s7-ease) both;
	}
	.s7-animate-in > *:nth-child(1) { animation-delay: 0.05s; }
	.s7-animate-in > *:nth-child(2) { animation-delay: 0.16s; }
	.s7-animate-in > *:nth-child(3) { animation-delay: 0.27s; }
	.s7-animate-in > *:nth-child(4) { animation-delay: 0.38s; }
	.s7-animate-in > *:nth-child(5) { animation-delay: 0.49s; }

	.s7-marquee__track {
		animation: s7-marquee 26s linear infinite;
	}

	/* Animazioni allo scroll — CSS puro, dove supportato */
	@supports (animation-timeline: view()) {
		.s7-reveal {
			animation: s7-rise linear both;
			animation-timeline: view();
			animation-range: entry 2% cover 26%;
		}
		.s7-reveal-scale {
			animation: s7-scale linear both;
			animation-timeline: view();
			animation-range: entry 0% cover 32%;
		}
		/* Parallax leggero su elementi marcati */
		.s7-parallax {
			animation: s7-parallax linear both;
			animation-timeline: view();
			animation-range: entry 0% exit 100%;
		}
		/* Titoli oversize: salgono e si scoprono in base allo scroll */
		.s7-reveal-display {
			animation: s7-rise-lg linear both;
			animation-timeline: view();
			animation-range: entry 0% cover 35%;
		}
		/* Entrata da fuori schermo, legata allo scroll */
		.s7-from-left {
			animation: s7-in-left linear both;
			animation-timeline: view();
			animation-range: entry 0% cover 40%;
		}
		.s7-from-right {
			animation: s7-in-right linear both;
			animation-timeline: view();
			animation-range: entry 0% cover 40%;
		}
		/* Parallax più marcato su immagini */
		.s7-parallax-img {
			animation: s7-parallax-img linear both;
			animation-timeline: view();
			animation-range: entry 0% exit 100%;
		}
	}

	@keyframes s7-rise {
		from { opacity: 0; transform: translateY(32px); }
		to { opacity: 1; transform: translateY(0); }
	}
	@keyframes s7-rise-lg {
		from { opacity: 0; transform: translateY(70px); }
		to { opacity: 1; transform: translateY(0); }
	}
	@keyframes s7-scale {
		from { opacity: 0; transform: scale(0.92); }
		to { opacity: 1; transform: scale(1); }
	}
	@keyframes s7-parallax {
		from { transform: translateY(40px); }
		to { transform: translateY(-40px); }
	}
	@keyframes s7-marquee {
		from { transform: translateX(0); }
		to { transform: translateX(-50%); }
	}
	@keyframes s7-parallax-img {
			from { transform: translateY(-6%) scale(1.1); }
			to { transform: translateY(6%) scale(1.1); }
		}
		@keyframes s7-in-left {
			from { opacity: 0; transform: translateX(-14vw); }
			to { opacity: 1; transform: translateX(0); }
		}
		@keyframes s7-in-right {
			from { opacity: 0; transform: translateX(14vw); }
			to { opacity: 1; transform: translateX(0); }
		}
		@keyframes s7-float {
		0%, 100% { transform: translateY(0) rotate(0deg); }
		50% { transform: translateY(-20px) rotate(5deg); }
	}
	.s7-float { animation: s7-float 10s ease-in-out infinite; }
}