/* Tab Whatsapp / Invia una mail / Apri un Ticket nella pagina Contatti
   (shortcode [nsn_contact_tabs] in mu-plugins/nsn-shop-core.php).
   CSS-only: tre <input type="radio"> nascosti pilotano quale
   .nsn-contact-tab-panel è visibile, nessun JS. */

/* La piena larghezza (niente colonna stretta a 760px) e il bleed edge-to-edge
   sono gestiti dal componente condiviso ".nsn-split-hero" in
   page-content.css (stessa tecnica di Chi Sono: width:100vw + left:50% +
   transform, non max-width), che qui avvolge tutto il contenuto di questo
   shortcode. Non serve piu' un override qui: prima di questo componente
   .nsn-contact-tabs era il figlio diretto di .entry-content e veniva
   ristretto dallo stile globale del tema sui figli di ".is-layout-constrained";
   ora e' innestato dentro ".nsn-split-hero-text", non piu' figlio diretto. */

.nsn-contact-tab-radio {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.nsn-contact-tab-nav {
	display: flex;
	gap: 0.5rem;
	margin-bottom: 2rem;
	border-bottom: 1px solid var(--wp--preset--color--border, #ebebeb);
	/* Su schermi stretti le tre etichette possono superare la larghezza
	   disponibile: meglio uno scroll orizzontale contenuto (bug reale
	   segnalato dall'utente 2026-08-10, "il mobile è rotto") che andare a
	   capo (spezzerebbe il bordo sottostante) o restringersi fino a
	   sovrapporsi. */
	overflow-x: auto;
	/* Senza questo, la spec CSS trasforma "overflow-y: visible" (il default)
	   in "overflow-y: auto" solo perche' overflow-x non e' "visible": crea
	   una barra di scroll verticale fantasma con le freccette su/giu', anche
	   se il contenuto non sfora affatto in verticale (bug reale segnalato
	   dall'utente 2026-08-10, screenshot con le freccette cerchiate). */
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
}

.nsn-contact-tab-nav label {
	cursor: pointer;
	padding: 0.75rem 1.25rem;
	font-weight: 600;
	color: var(--nsn-text-muted);
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	white-space: nowrap;
}

/* Le tre .nsn-contact-tab-panel stanno tutte sulla stessa cella grid
   (sovrapposte, una sola visibile alla volta con "visibility"): cosi'
   l'altezza di .nsn-contact-tab-panels e' sempre quella del pannello piu'
   alto (di solito "Apri un Ticket", che ha piu' campi), e passare da un
   tab all'altro non fa piu' "saltare" in alto/basso il resto della pagina
   (bug reale segnalato dall'utente 2026-08-10: con "display:none/block" il
   contenitore si adattava al pannello attivo, il layout sotto si spostava
   ogni volta). "visibility:hidden" invece di "display:none" mantiene lo
   spazio occupato ma lo rende invisibile e non interattivo/non
   focalizzabile, esattamente quello che serve qui. */
.nsn-contact-tab-panels {
	display: grid;
}

.nsn-contact-tab-panel {
	grid-area: 1 / 1;
	visibility: hidden;
}

#nsn-tab-whatsapp:checked ~ .nsn-contact-tab-nav label[for="nsn-tab-whatsapp"],
#nsn-tab-mail:checked ~ .nsn-contact-tab-nav label[for="nsn-tab-mail"],
#nsn-tab-ticket:checked ~ .nsn-contact-tab-nav label[for="nsn-tab-ticket"] {
	color: var(--wp--preset--color--contrast, #23282d);
	border-bottom-color: var(--wp--preset--color--contrast, #23282d);
}

#nsn-tab-whatsapp:checked ~ .nsn-contact-tab-panels .nsn-contact-tab-panel[data-tab="whatsapp"],
#nsn-tab-mail:checked ~ .nsn-contact-tab-panels .nsn-contact-tab-panel[data-tab="mail"],
#nsn-tab-ticket:checked ~ .nsn-contact-tab-panels .nsn-contact-tab-panel[data-tab="ticket"] {
	visibility: visible;
}

.nsn-contact-tab-panel h3 {
	margin-top: 0;
	margin-bottom: 0.5rem;
}

.nsn-contact-whatsapp-cta {
	display: inline-flex;
	align-items: center;
	/* "content-box" (il default) fa sommare il padding sopra il
	   "width:100%" mobile qui sotto, sforando lo schermo di 64px (bug
	   reale segnalato dall'utente 2026-08-10, "il mobile è di nuovo
	   rotto": stessa causa del campo "Oggetto" corretta in precedenza). */
	box-sizing: border-box;
	/* width/align-self espliciti: dentro a un contenitore flex in colonna
	   (es. .nsn-split-hero-text) "align-items:stretch" di default stira
	   qualsiasi figlio, incluso un inline-flex, a piena larghezza. Senza
	   questo il pulsante perdeva la sua forma "a pillola" e diventava
	   largo quanto la colonna (bug reale segnalato dall'utente 2026-08-10). */
	width: fit-content;
	min-width: 420px;
	justify-content: center;
	align-self: flex-start;
	gap: 1rem;
	background: var(--wp--preset--color--contrast, #23282d);
	color: var(--nsn-white);
	text-decoration: none;
	padding: 1.25rem 2rem;
	border-radius: 0;
	margin-top: 1rem;
}

.nsn-contact-whatsapp-cta small {
	font-weight: 400;
	opacity: 0.8;
}

.nsn-contact-form p {
	margin-bottom: 1rem;
}

/* Solo per screen reader: niente etichetta visibile sopra i campi, il nome
   del campo si legge dal placeholder (richiesta esplicita 2026-08-10, per
   avvicinarsi al riferimento visivo mandato dall'utente). ".screen-reader-text"
   e' la classe utility standard di WordPress (nel CSS di ogni tema a blocchi),
   non serve ridefinirla qui. */

.nsn-contact-form-row {
	display: flex;
	gap: 1rem;
	margin-bottom: 1rem;
}

.nsn-contact-form-row input {
	margin-bottom: 0;
}

.nsn-contact-form input,
.nsn-contact-form textarea {
	display: block;
	/* "content-box" (il default) fa si' che "width:100%" ignori il proprio
	   padding/bordo, sforando il contenitore del form di quei pixel in piu'
	   (bug reale segnalato dall'utente 2026-08-10: il campo "Oggetto"
	   usciva di 34px dal form dopo aver dato a .nsn-contact-form un
	   max-width). "border-box" fa si' che padding e bordo restino dentro
	   al 100%. */
	box-sizing: border-box;
	width: 100%;
	padding: 0.9rem 1rem;
	margin-bottom: 1rem;
	border: 1px solid var(--wp--preset--color--border, #ebebeb);
	background: var(--wp--preset--color--subtle, #ebebeb);
	font: inherit;
}

.nsn-contact-form input::placeholder,
.nsn-contact-form textarea::placeholder {
	color: var(--nsn-text-muted);
}

.nsn-contact-form button {
	background: var(--wp--preset--color--contrast, #23282d);
	color: var(--nsn-white);
	border: none;
	padding: 0.75rem 2rem;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.nsn-contact-success {
	color: #2e7d32;
}

.nsn-contact-error {
	color: #c62828;
}

/* Sotto i 782px (stessa soglia usata dal resto del tema) l'hero passa da
   due colonne affiancate a un'unica colonna impilata (vedi page-content.css,
   ".nsn-split-hero" nel media query): li' non ha piu' senso riservare
   sempre l'altezza del pannello piu' alto ("Apri un Ticket"), perche' non
   c'e' una foto a fianco che debba restare alla stessa altezza del testo.
   Il risultato sarebbe solo un vuoto enorme sotto ai tab piu' corti (es.
   Whatsapp), segnalato dall'utente 2026-08-10 con screenshot. Si torna
   quindi ad altezza naturale per pannello, il "salto" nel passare da un tab
   all'altro qui non e' un problema (niente colonna foto da tenere allineata,
   e su mobile lo scroll è comunque normale). */
@media (max-width: 782px) {
	.nsn-contact-tab-panels {
		display: block;
	}

	.nsn-contact-tab-panel {
		display: none;
		visibility: visible;
	}

	#nsn-tab-whatsapp:checked ~ .nsn-contact-tab-panels .nsn-contact-tab-panel[data-tab="whatsapp"],
	#nsn-tab-mail:checked ~ .nsn-contact-tab-panels .nsn-contact-tab-panel[data-tab="mail"],
	#nsn-tab-ticket:checked ~ .nsn-contact-tab-panels .nsn-contact-tab-panel[data-tab="ticket"] {
		display: block;
	}

	/* Il "min-width:420px" del pulsante Whatsapp sforerebbe la larghezza
	   disponibile sugli schermi piccoli (padding 2rem per lato della
	   colonna testo su mobile, vedi page-content.css): qui diventa a piena
	   larghezza invece che avere una soglia fissa. */
	.nsn-contact-whatsapp-cta {
		min-width: 0;
		width: 100%;
	}

	.nsn-contact-tab-nav label {
		padding: 0.75rem 0.65rem;
	}
}