/*
Theme Name: Studio Crescere
Author: Studio Crescere
Description: Tema block per il sito vetrina dello Studio Crescere — Centro di Psicologia e Psicoterapia.
Version: 1.7.0
Requires at least: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: studio-crescere
*/

/* ====== Interazioni di base ====== */

a,
button,
.wp-element-button,
.wp-block-button__link {
	transition: color 0.2s ease-out, background-color 0.2s ease-out,
		border-color 0.2s ease-out, box-shadow 0.2s ease-out,
		transform 0.15s ease-out;
}

.wp-element-button:hover,
.wp-block-button__link:hover {
	transform: scale(1.02);
}

.wp-element-button:active,
.wp-block-button__link:active {
	transform: scale(0.98);
}

:focus-visible {
	outline: 3px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

.skip-link.screen-reader-text:focus {
	background-color: var(--wp--preset--color--base-2);
	color: var(--wp--preset--color--contrast);
}

/* Underline animata sui link di navigazione */
.wp-block-navigation .wp-block-navigation-item__content {
	position: relative;
}

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

.wp-block-navigation .wp-block-navigation-item__content:hover::after,
.wp-block-navigation .wp-block-navigation-item__content:focus-visible::after,
.wp-block-navigation a[aria-current="page"]::after {
	transform: scaleX(1);
}

/* Sottomenu a comparsa del menu principale (aree della pagina Servizi) */
.wp-block-navigation .wp-block-navigation__submenu-container {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--base-2);
	border-radius: 14px;
	box-shadow: 0 14px 34px rgba(43, 52, 43, 0.14);
	padding: 0.5rem 0.35rem;
	min-width: 230px;
}

.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 0.45rem 0.85rem;
	border-radius: 10px;
}

/* Nel sottomenu l'evidenza è lo sfondo, non l'underline animata */
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content::after {
	content: none;
}

.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible {
	background: var(--wp--preset--color--base-2);
}

/* Overlay del menu mobile: tipografia grande e voci ariose */
.wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--base);
	padding: 5rem 1.5rem 2rem;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.5rem;
	color: var(--wp--preset--color--contrast);
	padding: 0.35rem 0;
}

/* nell'overlay il sottomenu è una lista piatta indentata, non una card */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	background: transparent;
	border: none;
	box-shadow: none;
	padding: 0.2rem 0 0.4rem 1.1rem;
	min-width: 0;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--body);
	font-size: 1.05rem;
	color: var(--wp--preset--color--text-muted);
	padding: 0.3rem 0;
}

/* Le ancore delle aree non devono finire sotto l'header sticky */
[id] {
	scroll-margin-top: 96px;
}

/* Freccia sola nelle card-aree della pagina Servizi */
.sa-area-arrow a {
	display: inline-block;
	font-size: 1.5rem;
	line-height: 1;
	text-decoration: none;
	/* niente transform: creerebbe un containing block e collasserebbe il link esteso ::before */
	transition: margin-left 0.2s ease-out;
}

.sa-area-arrow a:hover,
.sa-area-arrow a:focus-visible {
	margin-left: 4px;
}

/* ...e il link si estende su tutta la card: l'intero riquadro è cliccabile */
.sa-area-arrow a::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 24px;
}

/* focus da tastiera: l'anello di focus abbraccia la card, non la sola freccia */
.sa-area-arrow a:focus-visible {
	outline: none;
}

.sa-area-arrow a:focus-visible::before {
	outline: 3px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

/* Freccia decorativa nei link "Scopri di più" e simili */
.sa-arrow-link a::after,
a.sa-arrow-link::after {
	content: "\2192";
	display: inline-block;
	margin-left: 0.35em;
	transition: transform 0.2s ease-out;
}

.sa-arrow-link a:hover::after,
a.sa-arrow-link:hover::after {
	transform: translateX(3px);
}

.sa-arrow-back a::before {
	content: "\2190";
	display: inline-block;
	margin-right: 0.35em;
	transition: transform 0.2s ease-out;
}

.sa-arrow-back a:hover::before {
	transform: translateX(-3px);
}

.sa-form-note {
	font-size: var(--wp--preset--font-size--small);
	margin-bottom: 1rem;
}

/* ====== Componenti ====== */

.sa-logo {
	margin: 0;
}

.sa-logo img {
	display: block;
}

.sa-card {
	position: relative;
	background: var(--wp--preset--color--white);
	border-radius: 24px;
	padding: var(--wp--preset--spacing--40);
	box-shadow: 0 1px 2px rgba(65, 55, 46, 0.05), 0 12px 32px -8px rgba(65, 55, 46, 0.1);
	height: 100%;
	transition: box-shadow 0.2s ease-out, transform 0.2s ease-out;
}

@media (hover: hover) {
	.sa-card:hover {
		box-shadow: 0 2px 4px rgba(65, 55, 46, 0.05), 0 20px 44px -10px rgba(65, 55, 46, 0.16);
		transform: translateY(-4px);
	}
}

.sa-icon {
	margin: 0 0 0.85rem;
	width: 60px;
	height: 60px;
	border-radius: 20px;
	background: var(--wp--preset--color--primary-light);
	display: flex;
	align-items: center;
	justify-content: center;
}

.sa-icon img {
	width: 32px;
	height: 32px;
}

/* Su una card colorata (es. tinte "Velo" delle aree) il fondo dell'icona si schiarisce */
.sa-card.has-background .sa-icon {
	background: rgba(255, 255, 255, 0.7);
}

.sa-notice {
	background: #fbefe7;
	border-left: 4px solid var(--wp--preset--color--accent);
	border-radius: 8px;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
}

.sa-avatar img {
	border-radius: 50%;
}

/* Colonne card che passano a 2×2 su schermi medi (il core le impila solo a 781px) */
@media (min-width: 782px) and (max-width: 1023px) {
	.sa-cols-wrap {
		flex-wrap: wrap !important;
	}

	.sa-cols-wrap > .wp-block-column {
		flex-basis: calc(50% - var(--wp--style--block-gap, 1.25rem) / 2) !important;
	}
}

/* Card-aree della pagina Servizi: griglia 2 colonne su mobile
   (le card compatte icona+titolo+freccia non hanno bisogno di tutta la riga) */
@media (max-width: 781px) {
	.sa-area-grid {
		display: grid !important;
		grid-template-columns: 1fr 1fr;
		gap: 0.75rem;
	}

	.sa-area-grid > .wp-block-column {
		width: auto !important;
		flex-basis: auto !important;
		margin: 0 !important;
	}

	/* con un numero dispari di card l'ultima occupa tutta la riga */
	.sa-area-grid > .wp-block-column:last-child:nth-child(odd) {
		grid-column: 1 / -1;
	}

	.sa-area-grid .sa-card {
		padding: var(--wp--preset--spacing--30);
	}

	.sa-area-grid h3 {
		font-size: 1.05rem;
	}
}

/* Cinque o sei colonne card (aree servizi): 3+2 / 3+3 su desktop */
@media (min-width: 1024px) {
	.sa-cols-5,
	.sa-cols-6 {
		flex-wrap: wrap !important;
	}

	.sa-cols-5 > .wp-block-column,
	.sa-cols-6 > .wp-block-column {
		flex-basis: calc(33.333% - var(--wp--style--block-gap, 1.25rem) * 2 / 3) !important;
	}
}

/* Riga di card centrata (es. card singola nel team) */
.sa-cols-center {
	justify-content: center;
}

/* Miniature degli eventi (immagine in evidenza nelle card) */
.sa-event-thumb {
	margin: 0 0 1rem;
	border-radius: 16px;
	overflow: hidden;
	background: var(--wp--preset--color--base-2);
}

.sa-event-thumb img {
	object-fit: cover;
	object-position: top;
}

/* Locandina nell'articolo evento */
.sa-locandina img {
	border-radius: 16px;
	box-shadow: 0 1px 2px rgba(65, 55, 46, 0.05), 0 12px 32px -8px rgba(65, 55, 46, 0.14);
}

/* Come raggiungerci: galleria e video verticale */
.sa-gallery img {
	border-radius: 12px;
}

.sa-gallery figure.wp-block-image {
	align-items: stretch;
}

/* didascalie sotto le foto invece che sovrapposte (override del core) */
.wp-block-gallery.has-nested-images.sa-gallery figure.wp-block-image figcaption {
	position: static;
	background: none;
	color: var(--wp--preset--color--contrast);
	padding: 0.5rem 0.15rem 0;
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	text-align: center;
	line-height: 1.35;
	flex: 0 0 auto;
	overflow: visible;
}

.sa-video {
	margin: var(--wp--preset--spacing--40) auto 0;
	max-width: 360px;
}

.sa-video video {
	display: block;
	width: 100%;
	border-radius: 16px;
	background: var(--wp--preset--color--base-2);
}

/* ====== FAQ (blocco Details) ====== */

.wp-block-details {
	background: var(--wp--preset--color--white);
	border-radius: 16px;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	box-shadow: 0 1px 2px rgba(65, 55, 46, 0.05), 0 12px 32px -8px rgba(65, 55, 46, 0.1);
}

.wp-block-details summary {
	cursor: pointer;
	font-weight: 600;
	padding: 0.25rem 2rem 0.25rem 0;
	position: relative;
	list-style: none;
}

.wp-block-details summary::-webkit-details-marker {
	display: none;
}

.wp-block-details summary::after {
	content: "";
	position: absolute;
	right: 0.35rem;
	top: 50%;
	width: 0.55rem;
	height: 0.55rem;
	border-right: 2px solid var(--wp--preset--color--primary);
	border-bottom: 2px solid var(--wp--preset--color--primary);
	transform: translateY(-70%) rotate(45deg);
	transition: transform 0.2s ease-out;
}

.wp-block-details[open] summary::after {
	transform: translateY(-30%) rotate(225deg);
}

.wp-block-details summary:hover {
	color: var(--wp--preset--color--primary);
}

.wp-block-details[open] summary {
	margin-bottom: 0.5rem;
}

/* ====== Mappa dietro consenso ====== */

.sa-map-consent {
	background: var(--wp--preset--color--primary-light);
	border-radius: 16px;
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
	text-align: center;
}

.sa-map-consent button {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
	border: 0;
	border-radius: 999px;
	padding: 0.75rem 1.75rem;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.2s ease-out;
}

.sa-map-consent button:hover {
	background: var(--wp--preset--color--accent-strong);
}

.sa-map-consent iframe {
	border-radius: 16px;
	display: block;
	width: 100%;
	height: 400px;
	border: 0;
}

@media (max-width: 599px) {
	.sa-map-consent iframe {
		height: 300px;
	}
}

/* ====== Form Contact Form 7 ====== */

.wpcf7-form p {
	margin: 0;
}

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form textarea {
	box-sizing: border-box;
	width: 100%;
	padding: 0.75rem 1rem;
	border: 1px solid #d8cfc2;
	border-radius: 10px;
	background: var(--wp--preset--color--white);
	font: inherit;
	margin-top: 0.35rem;
	transition: border-color 0.2s ease-out, box-shadow 0.2s ease-out;
}

.wpcf7-form input:focus-visible,
.wpcf7-form textarea:focus-visible {
	outline: 3px solid var(--wp--preset--color--primary);
	outline-offset: 1px;
	border-color: var(--wp--preset--color--primary);
	box-shadow: 0 0 0 5px rgba(78, 107, 85, 0.14);
}

.wpcf7-form > div {
	margin-bottom: 1.1rem;
}

/* Bottone di invio allineato ai bottoni del tema */
.wpcf7-form .wpcf7-submit {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
	border: 0;
	border-radius: 999px;
	padding: 0.85rem 2rem;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	min-height: 44px;
	transition: background-color 0.2s ease-out;
}

.wpcf7-form .wpcf7-submit:hover {
	background: var(--wp--preset--color--accent-strong);
}

.wpcf7-form .wpcf7-submit:disabled {
	opacity: 0.5;
	cursor: default;
}

/* Casella consenso privacy: target tattile adeguato */
.wpcf7-form .wpcf7-acceptance input[type="checkbox"] {
	width: 1.4rem;
	height: 1.4rem;
	accent-color: var(--wp--preset--color--primary);
	margin-right: 0.5rem;
	vertical-align: -0.3rem;
	cursor: pointer;
}

.wpcf7-form .wpcf7-list-item {
	margin: 0;
}

/* Campi obbligatori */
.sa-required {
	color: var(--wp--preset--color--accent-strong);
}

/* Errori e messaggi di esito nella palette del sito */
.wpcf7-form .wpcf7-not-valid {
	border: 2px solid var(--wp--preset--color--accent-strong);
}

.wpcf7-form .wpcf7-not-valid-tip {
	color: var(--wp--preset--color--accent-strong);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	margin-top: 0.3rem;
	display: block;
}

.wpcf7 .wpcf7-response-output {
	border-radius: 8px;
	margin: 1.5rem 0 0;
	padding: 0.9rem 1.25rem;
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output {
	border: 2px solid var(--wp--preset--color--accent-strong);
	background: #fbefe7;
}

.wpcf7 form.sent .wpcf7-response-output {
	border: 2px solid var(--wp--preset--color--primary);
	background: var(--wp--preset--color--primary-light);
}

/* ====== Header: translucido con blur, pieno allo scroll ====== */

header.wp-block-group.has-base-background-color {
	background-color: color-mix(in srgb, var(--wp--preset--color--base) 80%, transparent);
	transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

/* Il blur sta su un pseudo-elemento: applicato all'header creerebbe un
   containing block che intrappola l'overlay position:fixed del menu mobile */
header.wp-block-group.has-base-background-color::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
}

html.sa-scrolled header.wp-block-group.has-base-background-color {
	background-color: var(--wp--preset--color--base);
	box-shadow: 0 2px 24px rgba(65, 55, 46, 0.09);
}

/* Header compatto su una riga negli schermi piccoli */
@media (max-width: 599px) {
	header.wp-block-group.has-base-background-color {
		padding-top: 0.6rem !important;
		padding-bottom: 0.6rem !important;
	}

	header .sa-logo img {
		width: 36px !important;
		height: auto !important;
	}

	header .wp-block-site-title {
		font-size: 1.05rem;
	}

	/* la CTA è già nell'hero, nelle sezioni CTA e nel footer:
	   nell'header mobile lascia spazio a logo e hamburger */
	header .wp-block-buttons {
		display: none;
	}

	/* tap target comodo per l'hamburger */
	header .wp-block-navigation__responsive-container-open {
		padding: 8px;
	}
}

/* ====== Hero organico ====== */

.sa-hero {
	position: relative;
	overflow: hidden;
}

.sa-hero > * {
	position: relative;
	z-index: 1;
}

.sa-hero::before,
.sa-hero::after {
	content: "";
	position: absolute;
	z-index: 0;
	pointer-events: none;
	filter: blur(48px);
	opacity: 0.6;
}

.sa-hero::before {
	width: 460px;
	height: 460px;
	right: -140px;
	top: -160px;
	background: radial-gradient(circle at 32% 32%, var(--wp--preset--color--accent-soft), transparent 70%);
	border-radius: 58% 42% 55% 45% / 55% 48% 52% 45%;
	animation: sa-breathe 9s ease-in-out infinite alternate;
}

.sa-hero::after {
	width: 560px;
	height: 560px;
	left: -200px;
	bottom: -260px;
	background: radial-gradient(circle at 60% 40%, var(--wp--preset--color--primary-light), transparent 72%);
	border-radius: 45% 55% 48% 52% / 52% 45% 55% 48%;
	animation: sa-breathe 11s ease-in-out infinite alternate-reverse;
}

@keyframes sa-breathe {
	from {
		border-radius: 58% 42% 55% 45% / 55% 48% 52% 45%;
		transform: translateY(0) scale(1);
	}
	to {
		border-radius: 45% 55% 42% 58% / 48% 55% 45% 52%;
		transform: translateY(-16px) scale(1.06);
	}
}

/* Logo in apertura (hero): logomark grande, nome e sottotitolo */
.sa-hero-logo {
	text-align: center;
}

.sa-hero-logomark {
	margin: 0 auto;
}

.sa-hero-logomark img {
	display: block;
	margin: 0 auto;
	width: clamp(150px, 22vw, 220px) !important;
	height: auto;
}

.sa-hero-brand {
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(2rem, 4.5vw, 2.75rem);
	font-weight: 400;
	line-height: 1.05;
	color: var(--wp--preset--color--primary);
	margin: 0.9rem 0 0.35rem;
}

.sa-hero-logo .sa-eyebrow {
	margin: 0;
	text-wrap: balance;
}

@media (max-width: 781px) {
	.sa-hero-logo {
		margin-bottom: 0.25rem;
	}

	.sa-hero-logomark img {
		width: 130px !important;
	}

	.sa-hero-brand {
		font-size: 1.85rem;
	}
}

/* Immagini con maschera organica */
.sa-organic img {
	border-radius: 58% 42% 52% 48% / 52% 46% 54% 48%;
}

/* Etichetta sopra i titoli (eyebrow) */
.sa-eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-weight: 500;
	font-size: 0.8125rem;
	color: var(--wp--preset--color--primary);
}

/* ====== Reveal allo scroll (attivato da reveal.js) ====== */

html.sa-motion .sa-reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.5s ease-out, transform 0.5s ease-out;
	transition-delay: var(--sa-delay, 0ms);
}

html.sa-motion .sa-reveal.is-visible {
	opacity: 1;
	transform: none;
}

/* ====== Movimento ridotto ====== */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
	}

	.sa-card:hover {
		transform: none;
	}

	.sa-hero::before,
	.sa-hero::after {
		animation: none;
	}

	html.sa-motion .sa-reveal {
		opacity: 1;
		transform: none;
	}
}