/*
Theme Name: LR Motorsport
Theme URI: https://lrmotorsport.it
Author: GTech Group
Author URI: https://gtechgroup.it
Description: Tema a blocchi custom per L.R. Motorsport di Luvisotto Rudi, autofficina e centro revisioni a Ponte nelle Alpi (BL). Nessuna dipendenza front-end, font self-hosted, immagini AVIF.
Version: 1.0.0
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: lrms
Tags: block-theme, one-column, custom-colors, custom-menu, editor-style, full-site-editing
*/

/* Il design vive in theme.json. Qui solo ciò che theme.json non esprime. */

/* Focus visibile e coerente: theme.json non ha un token per :focus-visible. */
:where(a, button, input, select, textarea):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

/* ------------------------------------------------------------------
   Slider foto officina — pattern lrms/slider-officina

   Nessun JavaScript. È una galleria core resa scorrevole con scroll-snap:
   swipe, trackpad, scrollbar e frecce della tastiera sono già comportamenti
   nativi di un contenitore con overflow.

   Sulla specificità: le regole di core in wp-includes/blocks/gallery/
   style.min.css usano il trucco :not(#individual-image), che porta un ID nel
   conteggio → (1,3,1) la regola base, (1,4,1) le .columns-N. Qui ripetiamo lo
   stesso :not() e aggiungiamo .lrms-slider: siamo a (1,4,1) e a parità decide
   l'ordine di sorgente. lrms-css è l'ultimo foglio della head, dopo tutti gli
   stili dei blocchi.

   Il pattern impone columns-1 apposta: è l'unica regola di larghezza di core
   che resta in gioco, ed è fuori dalle media query.
   ------------------------------------------------------------------ */
.wp-block-gallery.lrms-slider {
	--lrms-slider-gap: var(--wp--preset--spacing--30);

	display: flex;
	flex-wrap: nowrap;
	gap: var(--lrms-slider-gap);
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	/* Su desktop la scrollbar è l'indizio che si scorre: invece di
	   nasconderla le lasciamo spazio sotto le foto. */
	padding-bottom: var(--wp--preset--spacing--20);
	scrollbar-width: thin;
	scrollbar-color: var(--wp--preset--color--accent) var(--wp--preset--color--surface);
	/* Lo scroll orizzontale non deve innescare il "torna indietro" del browser. */
	overscroll-behavior-x: contain;
}

/* Il contenitore è focusabile (tabindex="0" da functions.php). La regola
   :focus-visible in cima al file copre solo a/button/input/select/textarea:
   una <figure> va indicata a parte. */
.wp-block-gallery.lrms-slider:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 4px;
}

/* Le slide. A 360px una foto piena più il taglio della successiva: è il
   taglio a dire "qui si scorre". */
.wp-block-gallery.lrms-slider.has-nested-images figure.wp-block-image:not(#individual-image) {
	flex: 0 0 auto;
	width: 82%;
	margin: 0;
	aspect-ratio: 3 / 2;
	scroll-snap-align: start;
}

/* aspect-ratio sulla figure + object-fit sull'img = altezza nota prima del
   download: nessun salto. Serve davvero, 52 delle 163 foto in libreria sono
   verticali. Il ritaglio lo farebbe già .is-cropped di core, ma lo ripetiamo
   perché "Ritaglia le immagini" è a un clic dal cliente. */
.wp-block-gallery.lrms-slider.has-nested-images figure.wp-block-image:not(#individual-image) img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 6px;
}

/* Da 600px: due foto affiancate. Stesso breakpoint di core per le gallerie. */
@media (width >= 600px) {
	.wp-block-gallery.lrms-slider.has-nested-images figure.wp-block-image:not(#individual-image) {
		width: calc((100% - var(--lrms-slider-gap)) / 2);
	}
}

/* Da 1024px: tre foto che riempiono la riga del contenitore alignwide. */
@media (width >= 1024px) {
	.wp-block-gallery.lrms-slider.has-nested-images figure.wp-block-image:not(#individual-image) {
		width: calc((100% - 2 * var(--lrms-slider-gap)) / 3);
	}
}

/* Pallini di navigazione nativi (CSS Overflow 5).
   Chrome/Edge 135+ li disegnano da soli: sono veri pulsanti, già focusabili e
   con lo stato "slide corrente" gestito dal browser. Dove non sono supportati
   non compaiono, e restano swipe, scrollbar e tastiera: non c'è fallback da
   scrivere perché la base è già completa. */
@supports selector(::scroll-marker) {
	.wp-block-gallery.lrms-slider {
		scroll-marker-group: after;
		scroll-behavior: smooth;
	}

	.wp-block-gallery.lrms-slider::scroll-marker-group {
		display: flex;
		justify-content: center;
		gap: var(--wp--preset--spacing--20);
		padding-top: var(--wp--preset--spacing--30);
	}

	/* 24x24 è il minimo di WCAG 2.2 SC 2.5.8 per un bersaglio: il pallino
	   visibile è più piccolo, l'area cliccabile no. */
	.wp-block-gallery.lrms-slider.has-nested-images figure.wp-block-image:not(#individual-image)::scroll-marker {
		content: "";
		inline-size: 24px;
		block-size: 24px;
		border-radius: 50%;
		background: radial-gradient(circle at center, var(--wp--preset--color--muted) 0 5px, transparent 5px);
	}

	.wp-block-gallery.lrms-slider.has-nested-images figure.wp-block-image:not(#individual-image)::scroll-marker:target-current {
		background: radial-gradient(circle at center, var(--wp--preset--color--accent) 0 6px, transparent 6px);
	}

	/* Il blocco reduced-motion in fondo al file agisce su animation/transition,
	   non su scroll-behavior: va disattivato qui. */
	@media (prefers-reduced-motion: reduce) {
		.wp-block-gallery.lrms-slider {
			scroll-behavior: auto;
		}
	}
}

/* ------------------------------------------------------------------
   Pulsante WhatsApp flottante

   Sfondo #075E54, il verde scuro del brand WhatsApp, non il #25D366
   dell'icona: bianco su #25D366 dà 1.98:1, che fallisce sia il 4.5:1 di
   WCAG 1.4.3 per il testo sia il 3:1 di 1.4.11 per l'icona. Su #075E54 il
   bianco sale a 7.67:1. A riconoscere il pulsante è la forma dell'icona,
   non la tonalità esatta di verde.
   (#128C7E, la scelta ovvia per l'hover, si ferma a 4.14:1: non basta.)
   ------------------------------------------------------------------ */
.lrms-wa {
	position: fixed;
	right: 1rem;
	bottom: 1rem;
	z-index: 100;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.85rem 1.1rem;
	border-radius: 999px;
	background: #075e54;
	color: #fff;
	font-weight: 700;
	font-size: 1.05rem;
	line-height: 1;
	text-decoration: none;
	box-shadow: 0 4px 16px rgb(0 0 0 / 25%);
	transition: transform 0.15s ease, background-color 0.15s ease;
}

.lrms-wa:hover,
.lrms-wa:focus-visible {
	background: #043f38;
	color: #fff;
	transform: translateY(-2px);
	text-decoration: none;
}

.lrms-wa__icon {
	flex: none;
}

/* Su mobile solo l'icona: l'etichetta ruberebbe spazio al contenuto.
   aria-label sull'ancora garantisce comunque il testo per gli screen reader. */
@media (width <= 600px) {
	.lrms-wa {
		padding: 0.9rem;
		right: 0.75rem;
		bottom: 0.75rem;
	}

	.lrms-wa__text {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
}

/* Rispetta chi ha chiesto meno animazioni a livello di sistema. */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}