/**
 * core/search — icona nell'header, overlay a schermo pieno, form dei risultati.
 *
 * Il blocco ha due modi nel tema: «solo bottone, espandi al clic» nell'header
 * (Melinda: .search-form-popup-w) e form in linea nella vista di ricerca.
 *
 * Ogni valore viene dai computed style della produzione in docs/baseline/
 * (Melinda attivo), non dai sorgenti del tema legacy.
 */

/* La lente è allineata alle voci del menu: 13px sul blocco più 7 del bottone portano il glifo a
   y=35 come in produzione. */
.skuola-search {
	margin: 0;
	padding-top: 13px;
}

/* Chiuso, il campo resta nel DOM: se conserva la sua altezza (48.6px) alza la barra oltre i
   90.19 misurati. */
.skuola-search.wp-block-search__searchfield-hidden .wp-block-search__input {
	height: 0;
	padding: 0;
	border: 0;
}

/* -------------------------------------------------------------------------- */
/*  Ricerca — icona nell'header, overlay a schermo pieno                      */
/*  Melinda (.search-form-popup-w .search-form): overlay fixed blu con form   */
/*  da 810px e input alto 80px. Qui è core/search in modalità "solo bottone,  */
/*  espandi al clic": il core toglie .wp-block-search__searchfield-hidden.    */
/* -------------------------------------------------------------------------- */
.skuola-search .wp-block-search__inside-wrapper {
	border: 0;
}

.skuola-search:not(.wp-block-search__searchfield-hidden) .wp-block-search__inside-wrapper {
	position: fixed;
	inset: 0;
	z-index: 30;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0;
	padding: 30px;
	background-color: var(--wp--custom--veil--search);
	box-sizing: border-box;
}

.skuola-search:not(.wp-block-search__searchfield-hidden) .wp-block-search__input {
	flex: 0 1 750px;
	min-width: 0;
	height: 80px;
	padding: 0 0 3px 20px;
	border: 0;
	background: transparent;
	box-shadow: inset 0 -3px 0 var(--wp--custom--rule--field);
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--90);
	font-weight: 700;
	letter-spacing: -0.02em;
	outline: none;
	appearance: none;
	-webkit-appearance: none;
}

.skuola-search .wp-block-search__input::-webkit-search-cancel-button {
	display: none;
}

.skuola-search .wp-block-search__input::placeholder {
	color: var(--wp--preset--color--white);
	opacity: 1;
}

/* Lo stesso nodo dell'icona nell'header: dentro l'overlay diventa il «cerca» a destra del campo. */
/* Il bottone si sovrappone all'ultimo tratto del campo, come in produzione (absolute a 30px dal
   bordo destro). */
.skuola-search:not(.wp-block-search__searchfield-hidden) .wp-block-search__button {
	flex: 0 0 60px;
	margin-left: -60px;
	height: 80px;
	padding: 0;
	color: var(--wp--preset--color--white);
	opacity: 0.5;
	transition: opacity 0.4s;
}

.skuola-search:not(.wp-block-search__searchfield-hidden) .wp-block-search__button:hover {
	opacity: 1;
}

.skuola-search:not(.wp-block-search__searchfield-hidden) .wp-block-search__button svg {
	width: 30px;
	height: 30px;
}

@media (max-width: 767px) {
	.skuola-search:not(.wp-block-search__searchfield-hidden) .wp-block-search__input {
		height: 60px;
		font-size: var(--wp--preset--font-size--70);
	}
	.skuola-search:not(.wp-block-search__searchfield-hidden) .wp-block-search__button {
		flex-basis: 44px;
		height: 60px;
	}
	.skuola-search:not(.wp-block-search__searchfield-hidden) .wp-block-search__button svg {
		width: 22px;
		height: 22px;
	}
}

.skuola-search-intro {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--60);
	line-height: 38.5px;
	letter-spacing: -0.44px;
}

/* Form: input pill bianco 600px + bottone blu, blocco centrato come in prod */
.skuola-search-form {
	margin-bottom: 60px;
}

.skuola-search-form .wp-block-search__inside-wrapper {
	justify-content: center;
}

.skuola-search-form .wp-block-search__input {
	flex: 0 1 600px;
	height: 48px;
	padding: 0 30px;
	border: 1px solid var(--wp--preset--color--faded);
	border-radius: 45px;
	background: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--50);
	color: var(--wp--preset--color--body);
}

.skuola-search-form .wp-block-search__input::placeholder {
	color: var(--wp--preset--color--body);
	opacity: 1;
}

.skuola-search-form .wp-block-search__button {
	margin-left: 10px;
	padding: 16px 28px;
	border: 0;
	border-radius: 35px;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--30);
	font-weight: 700;
	line-height: 16px;
	cursor: pointer;
}

@media (max-width: 991px) {
	/* Bottone icona sovrapposto a destra dentro il campo, come in prod */
	.skuola-search-form {
		position: relative;
	}
	.skuola-search-form .wp-block-search__input {
		flex: 1 1 auto;
		padding-right: 66px;
	}
	/* Glifo come maschera e non come immagine: dentro un data URI il colore sarebbe un hex fuori dai
	   token. */
	.skuola-search-form .wp-block-search__button {
		position: absolute;
		top: 0;
		right: 0;
		width: 56px;
		height: 48px;
		margin: 0;
		padding: 0;
		background: transparent;
		background-color: var(--wp--preset--color--heading);
		-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='10.5' cy='10.5' r='7.5'/%3E%3Cpath d='M16 16l5 5'/%3E%3C/svg%3E") no-repeat center / 20px 20px;
		mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='10.5' cy='10.5' r='7.5'/%3E%3Cpath d='M16 16l5 5'/%3E%3C/svg%3E") no-repeat center / 20px 20px;
		font-size: 0;
	}
}