/*
 * GOYN — overlay della ricerca
 *
 * Fonte: `SearchOverlay` in src/components/SearchOverlay.jsx, con le classi
 * `.search*`, `.filter-tag` e `.drawer-close` di src/styles.css.
 *
 * ISOLAMENTO: nessun selettore globale. Prefisso `goyn-search`.
 *
 * DAL TEMA: `.goyn-wrap`, `.goyn-label`, `.goyn-accent`, `.goyn-link-sweep` +
 * `.goyn-arrow`, `.goyn-sr-only`.
 *
 * ⚠️ NON usa reveal.css. Le entrate qui non dipendono dallo scroll ma
 *    dall'apertura del pannello, e `data-goyn-scene` presume un
 *    IntersectionObserver su una sezione della pagina — un pannello nel livello
 *    superiore non "entra in vista", ci è già. Le due animazioni stanno quindi
 *    qui, appese a `[open]`.
 *
 * INDICE
 *   1. Il pannello
 *   2. Il campo
 *   3. Suggerimenti
 *   4. Risultati
 *   5. L'anteprima nel pannello di Elementor
 *   6. Responsive
 *   7. prefers-reduced-motion
 */

/* ============================================================
   1. Il pannello
   ------------------------------------------------------------
   ⚠️ Un `<dialog>` ha un foglio del BROWSER addosso, e va scavalcato con
      cognizione: `max-width`/`max-height` a `calc(100% - 6px)`, un bordo, un
      `padding` e `display: none` quando è chiuso. Qui il pannello è a tutto
      schermo, quindi si azzerano misure e bordo — ma NON si tocca il
      `display: none` di partenza: è quello che rende l'overlay inesistente
      quando JavaScript non c'è. Il perché è in testa a templates/search.php.
   ============================================================ */

.goyn-search {
	--goyn-se-bg: var(--goyn-cream, #e9e5d9);
	--goyn-se-line: var(--goyn-petrol, #1f535d);
	--goyn-se-accent: var(--goyn-rust, #c0603c);
	--goyn-se-muted: var(--goyn-muted, #5e6e6e);
	--goyn-se-ink: var(--goyn-petrol-deep, #163e46);
	--goyn-se-rule: var(--goyn-petrol-14, rgba(31, 83, 93, 0.14));

	/* Le misure del dialog nativo, azzerate. */
	width: 100%;
	max-width: none;
	height: 100%;
	max-height: none;
	margin: 0;
	border: 0;
	padding: clamp(80px, 12vh, 140px) var(--goyn-pad) 60px;

	/*
	 * `overflow-y: auto` sul pannello: i risultati possono essere più alti dello
	 * schermo. Lo scroll di fondo lo ferma `GOYN.lockScroll()`, che sa anche
	 * fermare Lenis — vedi search.js.
	 */
	overflow-y: auto;
	overscroll-behavior: contain;

	color: var(--goyn-se-ink);
	background-color: var(--goyn-se-bg);
}

/*
 * Il velo del dialog nativo. Il pannello è opaco e a tutto schermo, quindi non si
 * vede mai — ma nell'istante dell'apertura, mentre il pannello sfuma, si vedrebbe
 * il nero di serie del browser dietro. Trasparente.
 */
.goyn-search::backdrop {
	background-color: transparent;
}

/*
 * L'entrata: dissolvenza e 20px dall'alto, i valori dell'originale
 * (`initial={{ opacity: 0, y: -20 }}`, 0,45s).
 *
 * ⚠️ Sta su `[open]` e non su una classe scritta da JavaScript: `open` è
 *    l'attributo che mette `showModal()`, quindi lo stato iniziale non può
 *    esistere prima che il pannello sia aperto per davvero.
 */
.goyn-search[open] {
	animation: goyn-search-in 0.45s var(--goyn-ease, cubic-bezier(0.22, 1, 0.36, 1)) both;
}

@keyframes goyn-search-in {
	from {
		opacity: 0;
		transform: translateY(-20px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

.goyn-search__inner {
	display: flex;
	flex-direction: column;
	gap: clamp(24px, 3vw, 40px);
}

/* ============================================================
   2. Il campo
   ============================================================ */

.goyn-search__bar {
	display: flex;
	align-items: center;
	gap: 14px;
	padding-bottom: 14px;
	border-bottom: 1.5px solid var(--goyn-se-line);
	color: var(--goyn-se-line);
}

.goyn-search__ico {
	flex: none;
}

/*
 * ⚠️ Discendente e con `background: none` esplicito: `input` è un selettore di
 *    elemento, e i reset del tema e di Elementor lo colpiscono a (0,1,1) — una
 *    classe sola perderebbe. Stesso motivo per cui la tendina del catalogo aveva
 *    perso la propria misura. `appearance: none` toglie a `type="search"` la
 *    cornice e la crocetta di sistema di Safari, che qui non c'entrano niente.
 */
.goyn-search .goyn-search__field {
	flex: 1 1 0;
	min-width: 0;
	appearance: none;
	border: 0;
	/*
	 * ⚠️ `padding` esplicito, e non è pignoleria: il reset dei campi del tema dà a
	 *    ogni `input` dentro `.goyn-widget` un `padding: 8px 16px` — misura giusta
	 *    per un campo con cornice, sbagliata per questo, che di cornice non ne ha.
	 *    Misurato: la barra veniva alta 67px invece di 53, cioè 14px in più, e il
	 *    testo partiva 16px dentro invece che accanto alla lente.
	 *
	 *    `1px 2px` e non `0`: è il valore di serie del browser, quello che
	 *    l'originale si tiene non dichiarando niente.
	 */
	padding: 1px 2px;
	background: none;
	outline: none;
	font-family: var(--goyn-font-body);
	font-size: clamp(18px, 2.4vw, 30px);
	/*
	 * `normal`, come l'originale che non dichiara nulla: l'interlinea del carattere
	 * decide l'altezza del campo, e un valore nostro la cambierebbe.
	 */
	line-height: normal;
	color: var(--goyn-se-ink);
}

.goyn-search .goyn-search__field::placeholder {
	color: rgba(94, 110, 110, 0.6);
}

/* La crocetta di Chrome dentro `type="search"`: via, ce n'è già una nostra. */
.goyn-search .goyn-search__field::-webkit-search-cancel-button {
	appearance: none;
}

/*
 * ⚠️⚠️ IL FUOCO SI SPOSTA DAL CAMPO AL FILETTO, e non si toglie.
 *
 *      Il tema mette un anello di fuoco su tutto (`body.goyn-site :focus-visible`,
 *      2px ruggine con 3px di stacco) perché il cursore custom nasconde quello di
 *      sistema — è una scelta giusta e va rispettata. Ma su un campo senza cornice
 *      larga tutta la pagina quell'anello disegna un rettangolo arrotondato che
 *      sembra un errore, e nell'originale non c'è: misurato a schermo, la barra
 *      appariva incorniciata di ruggine.
 *
 *      Qui l'anello si toglie SOLO su questo campo e l'indicazione passa al
 *      filetto sotto, che cambia colore E raddoppia di spessore: due segnali, non
 *      solo il colore — un indicatore di fuoco che si distingue per la sola tinta
 *      non basta a chi non distingue quella tinta.
 *
 *      Lo spessore lo aggiunge un'`box-shadow` e non il bordo: cambiare
 *      `border-width` sposterebbe di 1px tutto il contenuto sotto ogni volta che
 *      il campo prende il fuoco.
 *
 * Specificità: due classi più una pseudo-classe (0,3,0) contro le due classi più
 * l'elemento della regola del tema (0,2,1) — le classi si contano prima, quindi
 * questa vince.
 */
.goyn-search .goyn-search__field:focus-visible {
	outline: none;
}

.goyn-search__bar:focus-within {
	border-bottom-color: var(--goyn-se-accent);
	box-shadow: 0 1.5px 0 var(--goyn-se-accent);
}

/*
 * La crocetta di chiusura: `.drawer-close` dell'originale, che gira di 90° in
 * hover. Il giro è una `transition` e non una variante di Motion.
 */
.goyn-search .goyn-search__close {
	flex: none;
	display: grid;
	place-items: center;
	/*
	 * `padding: 4px` e `line-height: 0` attorno a un'icona da 18px: sono i valori di
	 * `.drawer-close` dell'originale, che danno un bottone da 26px. Una misura fissa
	 * più grande (34px, provata prima) alzava la barra di 8px.
	 *
	 * ⚠️ 26px è sotto i 44px raccomandati per un bersaglio da dito. Resta così
	 *    perché è la misura dell'originale e perché su questo pannello il gesto
	 *    esiste in altre due forme — Escape e, sul telefono, il tasto indietro che
	 *    chiude il dialog. Se il cliente segnalasse difficoltà, qui basta allargare
	 *    il padding.
	 */
	padding: 4px;
	border: 0;
	background: none;
	line-height: 0;
	color: var(--goyn-se-line);
	cursor: pointer;
	transition: color var(--goyn-dur-fast, 0.35s) var(--goyn-ease),
		transform var(--goyn-dur-fast, 0.35s) var(--goyn-ease);
}

.goyn-search .goyn-search__close:hover,
.goyn-search .goyn-search__close:focus-visible {
	color: var(--goyn-se-accent);
	transform: rotate(90deg);
}

/* ============================================================
   3. Suggerimenti
   ============================================================ */

.goyn-search__hint[hidden] {
	display: none;
}

.goyn-search__hint-label {
	font-weight: 600;
	font-size: 11px;
	line-height: normal;
	letter-spacing: 2.2px;
	color: var(--goyn-se-accent);
}

.goyn-search__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 14px;
}

/*
 * Le pastiglie sono `.filter-tag` dell'originale. Sono collegamenti veri, quindi
 * il foglio deve rimettere quello che il reset del tema toglie ai link — e
 * `.goyn-widget a { color: inherit }` è (0,1,1), quindi il colore va su un
 * selettore discendente. È lo stesso inciampo dei bottoni, dove il colore è
 * finito sullo `<span>` dentro.
 */
.goyn-search .goyn-search__tag {
	padding: 7px 13px;
	border: 1px solid rgba(31, 83, 93, 0.22);
	border-radius: 100px;
	font-weight: 400;
	font-size: 11px;
	line-height: normal;
	letter-spacing: 1.2px;
	text-transform: none;
	color: var(--goyn-se-muted);
	cursor: pointer;
	transition: border-color var(--goyn-dur-fast, 0.35s) var(--goyn-ease),
		color var(--goyn-dur-fast, 0.35s) var(--goyn-ease);
}

.goyn-search .goyn-search__tag:hover,
.goyn-search .goyn-search__tag:focus-visible {
	border-color: var(--goyn-se-line);
	color: var(--goyn-se-line);
}

/* ============================================================
   4. Risultati
   ============================================================ */

.goyn-search__none {
	margin: 0;
	font-size: clamp(20px, 2vw, 28px);
	color: var(--goyn-se-accent);
}

.goyn-search__list {
	display: flex;
	flex-direction: column;
}

/*
 * Le righe entrano una dopo l'altra, 40ms l'una dall'altra come nell'originale.
 * L'animazione parte alla resa: lo script scrive `--goyn-delay` su ogni riga e
 * l'elemento è nuovo di zecca ogni volta, quindi non serve un interruttore.
 */
.goyn-search .goyn-search__hit {
	display: flex;
	align-items: center;
	gap: clamp(14px, 1.6vw, 24px);
	padding: 14px 0;
	border-bottom: 1px solid var(--goyn-se-rule);
	animation: goyn-search-hit 0.45s var(--goyn-ease, cubic-bezier(0.22, 1, 0.36, 1))
		var(--goyn-delay, 0ms) both;
}

@keyframes goyn-search-hit {
	from {
		opacity: 0;
		transform: translateY(14px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

.goyn-search__hit-photo {
	position: relative;
	flex: none;
	width: clamp(58px, 6vw, 82px);
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background-color: var(--goyn-petrol-deep, #163e46);
}

/* ⚠️ Discendente: `.elementor img` e `.goyn-widget img` del tema sono (0,1,1). */
.goyn-search .goyn-search__hit-photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.goyn-search__hit-copy {
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.goyn-search__hit-name {
	font-weight: 600;
	font-size: 12.5px;
	line-height: normal;
	letter-spacing: 2px;
	color: var(--goyn-se-ink);
	transition: color 0.3s var(--goyn-ease);
}

.goyn-search .goyn-search__hit:hover .goyn-search__hit-name,
.goyn-search .goyn-search__hit:focus-visible .goyn-search__hit-name {
	color: var(--goyn-se-accent);
}

.goyn-search__hit-sub {
	font-size: 13px;
	line-height: 1.4;
	color: var(--goyn-se-muted);
}

.goyn-search__hit-price {
	flex: none;
	font-size: 14.5px;
	color: var(--goyn-se-line);
}

/*
 * "Vedi tutti i risultati": non c'è nell'originale, e nasce dal fatto che qui i
 * risultati completi hanno una pagina vestita. `.goyn-link-sweep` del tema porta
 * il filetto che si allunga e la freccia.
 */
.goyn-search .goyn-search__all {
	align-self: flex-start;
	margin-top: 22px;
	font-family: var(--goyn-font-label);
	font-size: 11.5px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--goyn-se-line);
}

/* ============================================================
   5. L'anteprima nel pannello di Elementor
   ------------------------------------------------------------
   Là la radice è un `<div>` e non un `<dialog>`: senza queste righe sarebbe un
   blocco a tutta pagina con `position: static`, e il canvas diventerebbe
   inutilizzabile. Si mostra come un riquadro nel flusso.
   ============================================================ */

.goyn-search--preview {
	height: auto;
	min-height: 320px;
	padding: 40px var(--goyn-pad);
	animation: none;
}

/* ============================================================
   6. Responsive
   ============================================================ */

@media (max-width: 560px) {
	.goyn-search {
		padding-top: 84px;
	}

	/*
	 * La fotografia del risultato sparisce sotto i 560px: a quella larghezza il
	 * nome andrebbe a capo tre volte accanto a un quadretto da 58px. Il prezzo
	 * resta, che è l'altra informazione per cui si guarda un elenco.
	 */
	.goyn-search__hit-photo {
		display: none;
	}
}

/* ============================================================
   7. prefers-reduced-motion
   ------------------------------------------------------------
   ⚠️ Qui si annullano le ANIMAZIONI e non degli stati iniziali: entrambe hanno
      `fill: both` e partono da `opacity: 0`, quindi con una durata azzerata dal
      tema resterebbero invisibili per sempre. Vedi la nota in testa a reveal.css.
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
	.goyn-search[open],
	.goyn-search .goyn-search__hit {
		animation: none;
	}

	.goyn-search .goyn-search__close:hover,
	.goyn-search .goyn-search__close:focus-visible {
		transform: none;
	}
}