/**
 * Facet Pattern — stile di default dei filtri.
 *
 * Filosofia:
 * - Tutto è pilotato da VARIABILI CSS (--fc-*): per ri-temizzare basta ridefinirle
 *   nel tuo :root (o in ACSS), senza toccare questo file.
 * - I selettori usano :where() → specificità 0: qualsiasi regola del tuo progetto
 *   vince automaticamente, questo è solo un default sensato.
 * - Il focus NON viene mai rimosso (WCAG 2.4.7). Rispetta prefers-reduced-motion.
 *
 * Per DISATTIVARLO del tutto: filtro PHP `add_filter('fc_load_default_css','__return_false');`
 */

:root {
	/* Colori */
	--fc-bg:            #ffffff;
	--fc-text:          #1a1a1a;
	--fc-muted:         #5c5c5c;
	--fc-border-color:  #c4c4c4;
	--fc-accent:        #0075ff;
	--fc-accent-text:   #ffffff;
	--fc-accent-soft:   #eaf3ff;
	--fc-focus:         var(--fc-accent);

	/* Forma / spaziatura */
	--fc-radius:            6px;
	--fc-field-min-width:   12rem;   /* larghezza minima assoluta di una colonna (layout orizzontale) */
	--fc-field-max-columns: 3;       /* tetto colonne: con meno filtri si riducono da sole, 100% larghezza */
	--fc-gap:               1.25rem; /* tra campi */
	--fc-field-gap:       0.5rem;    /* tra label e controllo */
	--fc-option-gap:      0.4rem;    /* tra le opzioni */
	--fc-control-pad-y:   0.5rem;
	--fc-control-pad-x:   0.75rem;

	/* Effetti */
	--fc-popup-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
	--fc-transition:   120ms ease;
	--fc-focus-width:  2px;
}

/* ---------------------------------------------------------------- Form */

:where(.fc-filters) {
	display: flex;
	flex-direction: column;
	gap: var(--fc-gap);
	color: var(--fc-text);
	inline-size: 100%; /* un flex container non si allarga da solo: senza questo resta stretto quanto il contenuto */
}

/* Orientamento (Settings → Style, o override per-set): orizzontale = griglia CSS, non
   flexbox — con flex-wrap ogni filtro prende la larghezza del proprio contenuto e con
   tanti filtri (o uno largo come un date range) il risultato è disordinato. La grid
   auto-fit crea colonne di larghezza minima uniforme (--fc-field-min-width) che si
   ridistribuiscono da sole in base allo spazio; Applica/Azzera restano su una riga a
   sé (grid-column: 1/-1) sotto tutti i filtri.
   auto-fit, non auto-fill: con auto-fill, se i filtri sono meno delle colonne che
   entrerebbero nella larghezza disponibile, le colonne "fantasma" in eccesso restano
   comunque riservate (vuote) e i filtri reali non si allargano oltre --fc-field-min-width
   — con pochi filtri lo spazio a destra resta vuoto anche se ce ne sarebbe in abbondanza.
   auto-fit collassa le colonne vuote e lascia che quelle coi filtri reali si allarghino
   a riempire lo spazio libero (la parte 1fr della minmax). Per forzare UN filtro
   specifico su più colonne (es. un date range largo), usa la sua classe dedicata fuori
   da questo file: .fc-field--key-{chiave}{ grid-column: 1/-1; }
   La larghezza minima di ogni colonna non è solo --fc-field-min-width fisso: è il PIÙ
   GRANDE tra quello e "100% diviso --fc-field-max-columns" (tetto colonne, default 3).
   Così con 1-2 filtri le colonne si riducono da sole (mai una griglia a 3 con caselle
   vuote), con esattamente --fc-field-max-columns filtri riempiono tutta la riga, e con
   di più vanno a capo. Cambiare il layout (es. 4 colonne invece di 3) è una riga sola,
   senza toccare grid-template-columns: .fc-filters{ --fc-field-max-columns: 4; } */
:where(.fc-filters[data-fc-layout="horizontal"]) {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(max(var(--fc-field-min-width), calc((100% - (var(--fc-field-max-columns) - 1) * var(--fc-gap)) / var(--fc-field-max-columns))), 1fr));
	align-items: start;
}
:where(.fc-filters[data-fc-layout="horizontal"] .fc-filters__actions) {
	grid-column: 1 / -1;
	display: flex;
	gap: 0.5rem;
	align-items: center;
}

:where(.fc-field) {
	display: flex;
	flex-direction: column;
	gap: var(--fc-field-gap);
	border: 0;          /* reset fieldset */
	margin: 0;
	padding: 0;
	min-inline-size: 0; /* evita l'overflow dei fieldset */
}

:where(.fc-field__label, .fc-field__legend) {
	font-weight: 600;
	padding: 0;
}

/* Etichetta nascosta visivamente (toggle "Nascondi etichetta" per-filtro nell'admin):
   resta nel DOM e leggibile dallo screen reader (label/legend nativi, associazione
   intatta) — NON usare display:none/visibility:hidden, toglierebbero anche l'accesso
   assistivo. */
:where([data-fc-hide-label] > .fc-field__label, [data-fc-hide-label] > .fc-field__legend) {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

:where(.fc-field__help) {
	margin: 0;
	font-size: 0.85em;
	color: var(--fc-muted);
}

/* ---------------------------------------------------- Input / select base */

:where(
	.fc-field input[type="search"],
	.fc-field input[type="number"],
	.fc-field input[type="date"],
	.fc-field input[type="text"],
	.fc-field select
) {
	inline-size: 100%;
	padding: var(--fc-control-pad-y) var(--fc-control-pad-x);
	border: 1px solid var(--fc-border-color);
	border-radius: var(--fc-radius);
	background: var(--fc-bg);
	color: var(--fc-text);
	font: inherit;
	line-height: 1.4;
}

/* Focus visibile e coerente su TUTTI i controlli (mai rimosso) */
:where(.fc-filters) :is(input, select, button, a, [role="option"]):focus-visible {
	outline: var(--fc-focus-width) solid var(--fc-focus);
	outline-offset: 1px;
}

/* ---------------------------------------------------- Opzioni checkbox/radio */

:where(.fc-field__options) {
	display: flex;
	flex-direction: column;
	gap: var(--fc-option-gap);
}

:where(.fc-option) {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

:where(.fc-option label) {
	cursor: pointer;
}

/* ------------------------------------------------------- Conteggi (facet counts) */

:where(.fc-count) {
	color: var(--fc-muted);
	font-variant-numeric: tabular-nums;
	font-size: 0.9em;
}

/* Opzione con conteggio 0 (dipendente): input disabilitato ma VISIBILE — non
   nascondiamo nulla, così chi naviga a tastiera/SR non perde punti di riferimento. */
:where(.fc-option--disabled label) {
	color: var(--fc-muted);
	cursor: not-allowed;
}

:where(.fc-option input:disabled) {
	cursor: not-allowed;
}

/* ------------------------------------------------------------ Button group */

:where(.fc-field--buttons .fc-field__options) {
	flex-direction: row;
	flex-wrap: wrap;
}

/* la checkbox/radio resta nel DOM (accessibile) ma visivamente nascosta */
:where(.fc-field--buttons .fc-option input) {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

:where(.fc-field--buttons .fc-option label) {
	display: inline-block;
	padding: 0.4rem 0.85rem;
	border: 1px solid var(--fc-border-color);
	border-radius: var(--fc-radius);
	transition: background var(--fc-transition), border-color var(--fc-transition);
}

:where(.fc-field--buttons .fc-option input:checked + label) {
	background: var(--fc-accent);
	color: var(--fc-accent-text);
	border-color: var(--fc-accent);
}

/* focus sulla checkbox nascosta → evidenzia la label (che è ciò che si vede) */
:where(.fc-field--buttons .fc-option input:focus-visible + label) {
	outline: var(--fc-focus-width) solid var(--fc-focus);
	outline-offset: 2px;
}

/* ------------------------------------------------ Layout opzioni per-filtro */
/* Override esplicito da admin (Data → "Options layout" su checkbox/radio/buttons).
   Dichiarato per ultimo tra le regole su .fc-field__options: stessa specificità
   :where() (0) di tutte le altre, quindi vince sempre sul default per-tipo sopra
   (colonna per checkbox/radio, riga per i button group), qualunque sia il tipo. */

:where([data-fc-options-layout="horizontal"] .fc-field__options) {
	flex-direction: row;
	flex-wrap: wrap;
}

:where([data-fc-options-layout="vertical"] .fc-field__options) {
	flex-direction: column;
	flex-wrap: nowrap;
}

/* ------------------------------------------------------ Tassonomia ad albero */

:where(.fc-tree) {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--fc-option-gap);
}

:where(.fc-tree .fc-tree) {
	margin-inline-start: 1.25rem;
	margin-block-start: var(--fc-option-gap);
}

/* --------------------------------------------------------------- Combobox */

/* position:relative va sul wrapper INTERNO (.fc-combobox__ui: solo input/X/listbox),
   non su [data-fc-combobox] che include anche la <label> sopra il campo — altrimenti
   la X (position:absolute, centrata al 50% del block-size) si centra su label+input
   insieme invece che sul solo input, e finisce visibilmente troppo in alto. Stesso
   discorso per la tendina delle opzioni sotto, che si apre offset dall'altezza label. */
:where(.fc-combobox__ui) {
	position: relative;
}

:where([data-fc-combobox] input[role="combobox"]) {
	inline-size: 100%;
	padding: var(--fc-control-pad-y) 2.25rem var(--fc-control-pad-y) var(--fc-control-pad-x);
	border: 1px solid var(--fc-border-color);
	border-radius: var(--fc-radius);
	background: var(--fc-bg);
	color: var(--fc-text);
	font: inherit;
}

:where(.fc-combobox__clear) {
	position: absolute;
	inset-inline-end: 1px;
	inset-block-start: 50%;
	transform: translateY(-50%);
	inline-size: 2rem;
	block-size: calc(100% - 2px);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	background: transparent;
	color: var(--fc-muted);
	cursor: pointer;
}

:where(.fc-combobox__clear:hover) {
	color: var(--fc-text);
}

:where(.fc-combobox__clear[hidden]) {
	display: none;
}

/* La tendina delle opzioni */
:where([data-fc-combobox] ul[role="listbox"]) {
	position: absolute;
	inset-inline: 0;
	inset-block-start: calc(100% + 4px);
	z-index: 50;
	margin: 0;
	padding: 4px;
	list-style: none;
	max-block-size: 260px;
	overflow-y: auto;
	background: var(--fc-bg);
	border: 1px solid var(--fc-border-color);
	border-radius: var(--fc-radius);
	box-shadow: var(--fc-popup-shadow);
}

:where([data-fc-combobox] ul[role="listbox"][hidden]) {
	display: none;
}

:where([data-fc-combobox] [role="option"]) {
	padding: 0.5rem 0.75rem;
	border-radius: calc(var(--fc-radius) - 2px);
	cursor: pointer;
	color: var(--fc-text);
}

:where([data-fc-combobox] [role="option"]:hover) {
	background: var(--fc-accent-soft);
}

/* Opzione ATTIVA (navigazione a frecce): OBBLIGATORIA per WCAG 2.4.7.
   Contrasto ≥ 3:1 e non basata sul solo colore (usa anche il testo invertito). */
:where([data-fc-combobox] [role="option"][aria-selected="true"]) {
	background: var(--fc-accent);
	color: var(--fc-accent-text);
}

/* ------------------------------------------------------------ Range + slider */

:where(.fc-field__range) {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	gap: 0.5rem 0.75rem;
}

:where(.fc-range-slider) {
	grid-column: 1 / -1;
	inline-size: 100%;
	accent-color: var(--fc-accent);
}

/* ------------------------------------------------------------------- Date */

:where(.fc-field__date) {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	gap: 0.5rem 0.75rem;
}

/* --------------------------------------------------------------- Ricerca */

:where(.fc-search__row) {
	display: flex;
	gap: 0.5rem;
}

:where(.fc-search__input-wrap) {
	position: relative;
	flex: 1 1 auto;
	display: block;
}

:where(.fc-search__input-wrap input) {
	inline-size: 100%;
	/* spazio per il bottone X sovrapposto, non sotto il testo digitato */
	padding-inline-end: 2rem;
}

/* Il cerchietto X nativo del browser va nascosto: non è raggiungibile da tastiera in
   nessun browser (limite della UA shadow DOM), lo sostituisce .fc-search__clear sotto. */
:where(.fc-search__input-wrap input[type="search"])::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
}

:where(.fc-search__clear) {
	position: absolute;
	inset-inline-end: 1px;
	inset-block-start: 50%;
	transform: translateY(-50%);
	inline-size: 1.75rem;
	block-size: calc(100% - 2px);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	background: transparent;
	color: var(--fc-muted);
	cursor: pointer;
	font-size: 1.1em;
	line-height: 1;
}

:where(.fc-search__clear:hover) {
	color: var(--fc-text);
}

:where(.fc-search__clear[hidden]) {
	display: none;
}

/* ------------------------------------------------------------------ Bottoni */

:where(.fc-filters__submit, .fc-filter__submit, .fc-field__apply, .fc-search__btn, .fc-load-more) {
	padding: var(--fc-control-pad-y) 1rem;
	border: 1px solid var(--fc-accent);
	border-radius: var(--fc-radius);
	background: var(--fc-accent);
	color: var(--fc-accent-text);
	font: inherit;
	cursor: pointer;
}

/* Bottone "Apply" dentro un range/date-range (fc-field__apply): la causa reale della
   larghezza piena NON era un display:block sul bottone (rimosso invano nel fix precedente)
   — è che .fc-field è flex column SENZA align-items, quindi eredita lo stretch di default
   e allarga qualunque figlio diretto alla larghezza intera. align-self la disattiva SOLO
   per questo bottone, lasciando invariato lo stretch per gli altri figli del fieldset. */
:where(.fc-field__apply) {
	align-self: flex-start;
	margin-block-start: .5rem;
}

:where(.fc-filters__reset) {
	color: var(--fc-accent);
	text-decoration: underline;
}

:where([hidden]) {
	display: none !important;
}

/* -------------------------------------------------------- Filtri attivi (chip) */

:where(.fc-active) {
	list-style: none;
	margin: 0 0 1rem;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

:where(.fc-active__remove) {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.25rem 0.6rem;
	border: 1px solid var(--fc-border-color);
	border-radius: 999px;
	background: var(--fc-accent-soft);
	color: var(--fc-text);
	text-decoration: none;
	font-size: 0.9em;
}

:where(.fc-active__x) {
	font-weight: 700;
	line-height: 1;
}

/* ----------------------------------------------------------- Paginazione */

:where(.fc-pagination__list) {
	list-style: none;
	margin: 1.25rem 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
}

:where(.fc-pagination__link) {
	display: inline-flex;
	min-inline-size: 2.25rem;
	padding: 0.4rem 0.6rem;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--fc-border-color);
	border-radius: var(--fc-radius);
	text-decoration: none;
	color: var(--fc-text);
}

:where(.fc-pagination__link--current) {
	background: var(--fc-accent);
	color: var(--fc-accent-text);
	border-color: var(--fc-accent);
}

/* ----------------------------------------------------- Stato / caricamento */

/* La regione risultati durante il fetch (aria-busy="true"): leggero fade. */
:where([data-fc-results][aria-busy="true"]) {
	opacity: 0.6;
	transition: opacity var(--fc-transition);
}

@media (prefers-reduced-motion: reduce) {
	:where(.fc-field--buttons .fc-option label),
	:where([data-fc-results]) {
		transition: none;
	}
}