/**
 * FAQ Search & Filter + FAQ list-only — chrome bridge (ADR-0006, design v1.4.0).
 *
 * Deroga documentata a SPEC §13.1/§13.7/§17/§34, che assegnano gli asset FAQ ad ATTFH: qui c'è **solo**
 * ciò che ATTFH non possiede — toolbar, chip, griglia, righe — più la *vestizione* del corpo FAQ
 * attraverso il contratto DOM **pubblico** dell'owner (`data-attfh-accordion|trigger|question|answer`,
 * `aria-expanded`, `.attfh-faq-cta`; SPEC §29 eccezione ADR-0006). Non si riscrive il markup owner né si
 * parsano i suoi ID: si dipinge sopra i suoi hook pubblici.
 *
 * Design: Figma `D_2.3_FAQ` (pagina FAQ) + caso d'uso `D_1.1_KESS3` (solo elenco). Valori trascritti dal
 * file, non arrotondati. Tutti i colori/spazi/raggi passano dai token `--attelbrg-*`
 * (assets/css/attelbrg-tokens.css) con **fallback literale** così il foglio regge anche isolato.
 *
 * Due widget, un foglio:
 *   • FAQ Search & Filter → `.attelbrg-faq-search` CON `.attelbrg-faq-search__toolbar`.
 *   • FAQ list-only (KESS3) → identica struttura gruppi/griglia SENZA toolbar (il PHP salta `renderToolbar`).
 * Entrambi restano `[data-attelbrg-faq]` così il motore righe (attelbrg-faq.js) ricompone la griglia e
 * gestisce l'espansione in-place; le regole visive sono scopate sotto `.attelbrg-faq-search`, quindi i
 * 4 widget FAQ storici (owner-rendered puri) non vengono toccati.
 */

/* ================================================================ foundation */

/*
 * Il breakpoint guarda il COMPONENTE, non il viewport.
 *
 * Con una media query, una sidebar Elementor che stringe il widget da 900 a 500px a viewport invariato
 * non cambierebbe `--attelbrg-faq-cols`: il ResizeObserver scatterebbe, rileggerebbe `3`, e le righe
 * andrebbero in overflow. La container query è ciò che rende il JS capace di reagire.
 */
.attelbrg-faq-search {
	container: attelbrg-faq / inline-size;

	/* Accento connessione della card (default: blu Info, come nel Figma). Canali separati così la stessa
	   variabile serve tinta piena e glow con alpha. Sovrascrivibile per-card/per-topic se un domani si
	   vuole il set connessioni (OBD verde, BOOT viola…). */
	--attelbrg-faq-accent: 29 134 218;

	font-family: var(--attelbrg-font-body, "Lato", -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
	color: var(--attelbrg-color-text, rgb(245, 245, 244));
	text-align: left;
}

.attelbrg-faq-search *,
.attelbrg-faq-search *::before,
.attelbrg-faq-search *::after {
	box-sizing: border-box;
}

/* ================================================================ toolbar */

/*
 * Layout del Figma: barra di ricerca a piena larghezza, poi le righe di chip centrate, poi il reset.
 * Il markup PHP emette in ordine [field, chip prodotto, chip scope, reset] come fratelli: una colonna
 * li impila senza toccare l'ordine sorgente.
 */
.attelbrg-faq-search__toolbar {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--attelbrg-space-md, 16px);
	margin: 0 0 var(--attelbrg-space-xl, 40px);
}

.attelbrg-faq-search__field {
	position: relative;
	width: 100%;
}

/*
 * Campo di ricerca: pillola bianca del Figma (radius 8, bordo grigio, icona + placeholder corsivo grigio).
 * L'icona non è nel markup: la disegna il background (lente Material a stroke, tinta placeholder-grey).
 */
/* `!important` su padding/border-radius: l'Elementor Kit stila TUTTI gli input
   (`.elementor-kit-6 input:not([type="button"]):not([type="submit"])`, 0,3,1 → batte qualsiasi mia
   classe) con `padding:10px 16px` → il testo/caret finirebbe sotto l'icona lente. Le regole kit non sono
   `!important`. `padding-left` ampio (56px) per staccare bene il testo dall'icona (a 16px, 22px larga). */
.attelbrg-faq-search .attelbrg-faq-search__input {
	width: 100%;
	min-height: 48px; /* Figma; supera il minimo touch 44 (AC30). */
	padding: var(--attelbrg-space-sm, 8px) var(--attelbrg-space-md, 16px) var(--attelbrg-space-sm, 8px) 3.5rem !important;
	border: var(--attelbrg-border-width-hairline, 1px) solid var(--attelbrg-color-text-disabled, rgb(149, 152, 150));
	border-radius: var(--attelbrg-radius-lg, 8px) !important;
	background-color: var(--attelbrg-color-on-white-bg, rgb(255, 255, 255));
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23959896' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.4-3.4'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: left var(--attelbrg-space-md, 16px) center;
	background-size: 22px 22px;
	color: var(--attelbrg-color-on-white-text, rgb(38, 38, 38));
	font: inherit;
	font-size: var(--attelbrg-font-body-m, 16px);
	line-height: 22px;
	appearance: none;
}

.attelbrg-faq-search__input::placeholder {
	color: var(--attelbrg-color-text-disabled, rgb(149, 152, 150));
	font-style: italic;
	opacity: 1; /* Firefox smorza i placeholder di default. */
}

/* Cancella la crocetta nativa di type=search (WebKit): il reset è la nostra affordance. */
.attelbrg-faq-search__input::-webkit-search-decoration,
.attelbrg-faq-search__input::-webkit-search-cancel-button {
	appearance: none;
}

/* --------------------------------------------------------- chip */

.attelbrg-faq-search__chips {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--attelbrg-space-sm, 8px);
}

/*
 * Chip di default: trasparente, bordo giallo 2px, testo giallo bold, radius 8 (Figma `Button_text`
 * Size=XL). Il bordo è un `box-shadow: inset` così non ruba spazio al testo e non sfarfalla quando
 * l'attivo passa a 2px pieno.
 */
/* `!important` su sfondo/testo/bordo/padding: l'Elementor Kit stila TUTTI i `button`
   (`.elementor-kit-6 button`, 0,1,1) con sfondo giallo pieno + bordo. Le regole kit non sono
   `!important`, quindi basta questo per riprendere il controllo dello stato idle (trasparente). */
.attelbrg-faq-search__chip {
	display: inline-flex;
	align-items: center;
	gap: var(--attelbrg-space-sm, 8px);
	min-height: 44px; /* touch target (AC30) */
	margin: 0;
	padding: var(--attelbrg-space-sm, 8px) var(--attelbrg-space-md, 16px) !important;
	border: 0 !important;
	border-radius: var(--attelbrg-radius-lg, 8px);
	background-color: transparent !important;
	box-shadow: inset 0 0 0 var(--attelbrg-border-width-emphasis, 2px) var(--attelbrg-color-accent, rgb(255, 238, 0));
	color: var(--attelbrg-color-accent, rgb(255, 238, 0)) !important;
	font: inherit;
	font-size: var(--attelbrg-font-body-m, 16px);
	font-weight: var(--attelbrg-weight-body-bold, 700);
	line-height: 22px;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.15s ease-out, color 0.15s ease-out, box-shadow 0.15s ease-out;
}

/*
 * Hover = stato pieno (come l'attivo, ma senza la X): sfondo giallo, testo grigio scuro, bordo giallo.
 * Anticipa visivamente l'attivazione al passaggio del mouse.
 */
.attelbrg-faq-search__chip:hover {
	background-color: var(--attelbrg-color-accent, rgb(255, 238, 0)) !important;
	box-shadow: inset 0 0 0 var(--attelbrg-border-width-emphasis, 2px) var(--attelbrg-color-accent-border-focus, rgb(173, 162, 0));
	color: var(--attelbrg-color-accent-text, rgb(63, 68, 67)) !important;
}

/*
 * Stato attivo: MAI il solo colore (AC47). Oltre al riempimento giallo + testo scuro, compare una X
 * DOPO il testo (affordance "rimuovi filtro", come nel mockup) — leggibile anche senza percezione
 * cromatica, e `aria-pressed` lo espone comunque all'AT.
 */
.attelbrg-faq-search__chip[aria-pressed="true"] {
	background-color: var(--attelbrg-color-accent, rgb(255, 238, 0)) !important;
	box-shadow: inset 0 0 0 var(--attelbrg-border-width-emphasis, 2px) var(--attelbrg-color-accent-border-focus, rgb(173, 162, 0));
	color: var(--attelbrg-color-accent-text, rgb(63, 68, 67)) !important;
}

.attelbrg-faq-search__chip[aria-pressed="true"]::after {
	content: "";
	width: 16px;
	height: 16px;
	margin-right: -2px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center / contain no-repeat;
}

.attelbrg-faq-search__chip[aria-pressed="true"]:hover {
	background-color: var(--attelbrg-color-accent-hover, rgb(255, 243, 82)) !important;
}

/* --------------------------------------------------------- reset */

/* Anche il reset è un `<button>`: senza `!important` l'Elementor Kit lo renderebbe giallo pieno quando
   appare. `!important` su sfondo/bordo ne preserva l'aspetto a link (testo sottolineato). */
.attelbrg-faq-search__reset {
	align-self: center;
	min-height: 44px;
	margin: 0;
	padding: var(--attelbrg-space-sm, 8px) var(--attelbrg-space-md, 16px);
	border: 0 !important;
	background: none !important;
	color: var(--attelbrg-color-text-muted, rgb(192, 193, 192)) !important;
	font: inherit;
	font-size: var(--attelbrg-font-body-s, 14px);
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
	transition: color 0.15s ease-out;
}

.attelbrg-faq-search__reset:hover {
	color: var(--attelbrg-color-text, rgb(245, 245, 244)) !important;
}

/* ================================================================ gruppi (topic) */

.attelbrg-faq-search__group + .attelbrg-faq-search__group {
	margin-top: var(--attelbrg-space-xl, 40px);
}

/*
 * Titolo del topic + separatore firma: filetto 1px verde→blu→viola (colori connessione OBD/BENCH/BOOT).
 * Il gradiente è disegnato come background in fondo all'heading, così resta 1px netto a qualsiasi
 * larghezza.
 */
.attelbrg-faq-search__group-title {
	margin: 0 0 var(--attelbrg-space-md, 16px);
	padding-bottom: var(--attelbrg-space-sm, 8px);
	background-image: linear-gradient(90deg, rgb(0, 194, 135) 27%, rgb(29, 134, 218) 49%, rgb(149, 48, 192) 69%);
	background-repeat: no-repeat;
	background-position: bottom left;
	background-size: 100% 1px;
	color: var(--attelbrg-color-accent, rgb(255, 238, 0));
	font-family: var(--attelbrg-font-heading, "N27", "Archivo", "Helvetica Neue", Arial, sans-serif);
	font-size: 24px;
	font-weight: 500;
	line-height: 32px;
	letter-spacing: -0.2px;
}

/* ================================================================ griglia + righe (reflow) */

.attelbrg-faq-search__grid {
	--attelbrg-faq-cols: 3;
	--attelbrg-faq-expanded-grow: 4;
	--attelbrg-faq-gap: var(--attelbrg-space-md, 16px);

	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: var(--attelbrg-faq-gap);
}

@container attelbrg-faq (width <= 800px) {
	.attelbrg-faq-search__grid {
		/* Le due custom property si ridefiniscono INSIEME: con `grow: 4` su 2 colonne il rapporto
		   sarebbe 80/20 invece di 66/33. */
		--attelbrg-faq-cols: 2;
		--attelbrg-faq-expanded-grow: 2;
	}
}

@container attelbrg-faq (width <= 520px) {
	.attelbrg-faq-search__grid {
		--attelbrg-faq-cols: 1;
		--attelbrg-faq-expanded-grow: 1;
	}
}

/*
 * `[hidden]` è NORMATIVO, non una verifica manuale.
 *
 * `.grid`/`.row` sono flex container: impongono `display` ai figli e **battono l'UA stylesheet**. Senza
 * questa regola il JS scrive `hidden` e l'item **resta visibile** — il filtro sembrerebbe rotto, e la
 * colpa cadrebbe sul JS. Vale anche per la risposta collassata (`[data-attfh-answer][hidden]`).
 */
[data-attelbrg-faq] [hidden] {
	display: none !important;
}

/* Senza JS: griglia statica a colonne (`.grid > .item`), tutte le risposte leggibili. */
.attelbrg-faq-search__item {
	flex: 0 1 calc((100% - (var(--attelbrg-faq-cols) - 1) * var(--attelbrg-faq-gap)) / var(--attelbrg-faq-cols));
	min-width: 0;
}

/*
 * Con JS: `.grid > .row > .item`. La riga è `nowrap` a larghezza piena — senza `width: 100%` non si
 * estende, e il calcolo delle basi flex salta.
 */
.attelbrg-faq-search__row {
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
	width: 100%;
	gap: var(--attelbrg-faq-gap);
}

/*
 * Dentro una riga `nowrap` lo shrink funziona davvero: l'item aperto cresce e i vicini si COMPRIMONO,
 * invece di essere espulsi. È l'unico modo di ottenere il layout del design — `flex-wrap` decide le
 * righe sui `flex-basis`, prima dello shrink.
 *
 * Il `max-width` serve a non far esplodere un item rimasto SOLO nella sua riga (ultima riga, o filtro):
 * con `flex: 1 1 0` occuperebbe il 100%. È calcolato al netto dei gap, altrimenti l'ultima riga
 * risulterebbe più larga delle precedenti e non si allineerebbe.
 */
[data-attelbrg-faq-enhanced] .attelbrg-faq-search__row > .attelbrg-faq-search__item {
	flex: 1 1 0;
	min-width: 0;
	max-width: calc((100% - (var(--attelbrg-faq-cols) - 1) * var(--attelbrg-faq-gap)) / var(--attelbrg-faq-cols));
	transition: flex-grow 0.2s ease, max-width 0.2s ease;
}

[data-attelbrg-faq-enhanced] .attelbrg-faq-search__row > .attelbrg-faq-search__item--expanded {
	flex-grow: var(--attelbrg-faq-expanded-grow, 4);
	max-width: 100%;
}

/* ================================================================ card FAQ (vestizione owner ATTFH) */

/*
 * La card È il markup owner: `[data-attfh-accordion]`. Il bridge la dipinge tramite gli hook pubblici,
 * scopata sotto `.attelbrg-faq-search` per non invadere i 4 widget FAQ storici (owner-styled puri).
 * `min-width:0` sul wrapper permette allo shrink della riga di comprimere davvero.
 */
.attelbrg-faq-search__item > [data-attfh-accordion],
.attelbrg-faq-search__item > * {
	height: 100%;
	min-width: 0;
}

.attelbrg-faq-search [data-attfh-accordion] {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: var(--attelbrg-radius-xl, 12px);
	/* Sfondo card = grigio SCURO: da chiuso copre l'intera card (a qualsiasi risoluzione, anche
	   quando la riga la stira più alta del trigger). Il chiaro vive sul pannello risposta (sotto). */
	background-color: var(--attelbrg-color-surface-muted, rgb(63, 68, 67));
	/* Bordo connessione = border REALE, non inset box-shadow. Un inset è dipinto sotto i figli: il
	   pannello risposta (chiaro, opaco) lo coprirebbe lungo la risposta → bordo blu assente da aperto.
	   Il border vive nel border-box, fuori dal padding-box in cui `overflow:hidden` clippa i figli →
	   incornicia sempre l'intera card (domanda E risposta). Il glow resta box-shadow, spento (alpha 0). */
	border: 1px solid rgb(var(--attelbrg-faq-accent) / 1);
	box-shadow: 0 0 16px 4px rgb(var(--attelbrg-faq-accent) / 0);
	transition: box-shadow 0.2s ease-out;
}

/*
 * Reset dei wrapper owner NON semantici (`.attfh-accordion-item`, l'`<h3>` `.attfh-accordion-heading`,
 * `.attfh-accordion-panel`): senza questo, il margine UA dell'`<h3>` spinge giù il trigger e lascia
 * affiorare in cima una striscia dello sfondo card. Azzerare margini/padding rende il trigger a filo.
 * L'item è la colonna interna (trigger + pannello) e riempie la card; il pannello porta il grigio
 * CHIARO (stacco a due toni del Figma) e cresce fino in fondo alla card.
 */
.attelbrg-faq-search .attfh-accordion-item,
.attelbrg-faq-search .attfh-accordion-heading,
.attelbrg-faq-search .attfh-accordion-panel {
	margin: 0;
	padding: 0;
	background: none;
	font: inherit;
}

.attelbrg-faq-search .attfh-accordion-item {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-width: 0;
}

.attelbrg-faq-search .attfh-accordion-panel {
	flex: 1 1 auto;
	background-color: var(--attelbrg-color-surface-raised, rgb(85, 89, 88));
}

/*
 * L'"angolo": triangolino in alto a sinistra nel colore connessione (Figma `angolo`,
 * path M0,24 L24,0 L0,0). Decorativo → fuori dal flusso, non annunciato.
 */
.attelbrg-faq-search [data-attfh-accordion]::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 24px;
	height: 24px;
	background-color: rgb(var(--attelbrg-faq-accent) / 1);
	clip-path: polygon(0 0, 100% 0, 0 100%);
	z-index: 2;
	pointer-events: none;
}

/*
 * Header = il trigger owner. Sfondo grigio-muted, testo a sinistra, toggle tondo a destra (::after).
 * Reset degli stili nativi del <button> owner senza toccarne il markup.
 */
.attelbrg-faq-search [data-attfh-trigger] {
	display: flex;
	flex: 0 0 auto; /* la domanda non si comprime: resta a filo in cima, il pannello cresce sotto */
	align-items: center;
	gap: var(--attelbrg-space-md, 16px);
	width: 100%;
	min-height: 96px; /* card collassata "piena" del Figma (~105) anche con domanda su una riga */
	margin: 0;
	padding: var(--attelbrg-space-lg, 24px);
	border: 0;
	background-color: var(--attelbrg-color-surface-muted, rgb(63, 68, 67));
	color: var(--attelbrg-color-text, rgb(245, 245, 244));
	font: inherit;
	text-align: left;
	cursor: pointer;
}

/* Neutralizza l'hover/focus nativo del <button> del tema (nessun cambio di sfondo/colore/bordo). */
.attelbrg-faq-search [data-attfh-trigger]:hover,
.attelbrg-faq-search [data-attfh-trigger]:focus {
	background-color: var(--attelbrg-color-surface-muted, rgb(63, 68, 67));
	color: var(--attelbrg-color-text, rgb(245, 245, 244));
	border: 0;
}

.attelbrg-faq-search [data-attfh-question] {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	font-family: var(--attelbrg-font-body, "Lato", sans-serif);
	font-size: var(--attelbrg-font-body-m, 16px);
	font-weight: var(--attelbrg-weight-body, 400);
	line-height: 22px;
	color: inherit;
	/* La domanda DEVE andare a capo. Il trigger owner è un <button>, e l'Elementor Kit / il tema Hello
	   stilano i button con `white-space: nowrap` (property EREDITARIA → colpisce anche questo span). In
	   Chromium `text-wrap: pretty` imposta `text-wrap-mode: wrap` e ne annulla l'effetto; Firefox NON
	   supporta `text-wrap: pretty` (inerte fino a 150) → l'ereditato `nowrap` vince e la domanda resta su
	   una riga, tagliata dall'`overflow: hidden` della card. `white-space: normal` esplicito (indipendente
	   dall'engine) riporta il wrapping; `overflow-wrap: break-word` spezza le parole più larghe di una card
	   stretta invece di farle debordare. `text-wrap: pretty` resta ULTIMO così, dove supportato, ne
	   conserva lo stile senza essere azzerato da `white-space`. */
	white-space: normal;
	overflow-wrap: break-word;
	text-wrap: pretty;
}

/* Toggle tondo nel colore connessione (Figma `Button_Round`). Mask → la tinta segue la variabile.
   Il "+" ruota di 45° (→ "×") all'apertura. */
.attelbrg-faq-search [data-attfh-trigger]::after {
	content: "";
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	background-color: rgb(var(--attelbrg-faq-accent) / 1);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='11'/%3E%3Cpath d='M12 7v10M7 12h10'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='11'/%3E%3Cpath d='M12 7v10M7 12h10'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform 0.2s ease-out;
}

/*
 * Risposta = corpo owner. Sfondo card (più chiaro dell'header → stacco a due toni del Figma), testo
 * chiaro. La collassabilità la possiede ATTFH (attributo `hidden` / la sua transizione): qui si veste
 * solo l'aspetto, senza forzare visibilità.
 */
.attelbrg-faq-search [data-attfh-answer] {
	padding: var(--attelbrg-space-md, 16px) var(--attelbrg-space-md, 16px);
	color: var(--attelbrg-color-text, rgb(245, 245, 244));
	font-family: var(--attelbrg-font-body, "Lato", sans-serif);
	font-size: var(--attelbrg-font-body-m, 16px);
	font-weight: var(--attelbrg-weight-body, 400);
	line-height: 22px;
}

.attelbrg-faq-search [data-attfh-answer] > *:first-child {
	margin-top: 0;
}

.attelbrg-faq-search [data-attfh-answer] > *:last-child {
	margin-bottom: 0;
}

/* CTA opzionale (`.attfh-faq-cta`, fratello della risposta): link giallo con freccia. */
.attelbrg-faq-search .attfh-faq-cta {
	display: inline-flex;
	align-items: center;
	gap: var(--attelbrg-space-xs, 4px);
	margin: 0 var(--attelbrg-space-lg, 24px) var(--attelbrg-space-lg, 24px);
	color: var(--attelbrg-color-accent, rgb(255, 238, 0));
	font-weight: var(--attelbrg-weight-body-bold, 700);
	text-decoration: none;
}

.attelbrg-faq-search .attfh-faq-cta:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* --------------------------------------------------------- stato aperto */

/*
 * Aperto = funzione dello STATO owner (`aria-expanded="true"` sul trigger), non del click. `:has()` fa
 * reagire la card senza JS del bridge: glow acceso, domanda in bold, "+" ruotato in "×".
 */
.attelbrg-faq-search [data-attfh-accordion]:has([data-attfh-trigger][aria-expanded="true"]) {
	box-shadow: 0 0 16px 4px rgb(var(--attelbrg-faq-accent) / 0.5);
}

.attelbrg-faq-search [data-attfh-trigger][aria-expanded="true"] [data-attfh-question] {
	font-weight: var(--attelbrg-weight-body-bold, 700);
}

.attelbrg-faq-search [data-attfh-trigger][aria-expanded="true"]::after {
	transform: rotate(45deg);
}

/* ================================================================ a11y */

/* Live region visibile solo agli screen reader: annuncia i risultati senza aggiungere un contatore. */
.attelbrg-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.attelbrg-faq-search__chip:focus-visible,
.attelbrg-faq-search__reset:focus-visible,
.attelbrg-faq-search__input:focus-visible,
.attelbrg-faq-search [data-attfh-trigger]:focus-visible {
	outline: var(--attelbrg-border-width-emphasis, 2px) solid var(--attelbrg-color-accent-border-focus, rgb(173, 162, 0));
	outline-offset: 2px;
}

/* Il campo bianco vive su fondo scuro: l'offset da solo si perde, un alone giallo lo stacca. */
.attelbrg-faq-search__input:focus-visible {
	outline-offset: 0;
	box-shadow: 0 0 0 3px rgb(255 238 0 / 0.35);
}

@media (prefers-reduced-motion: reduce) {
	.attelbrg-faq-search *,
	.attelbrg-faq-search *::before,
	.attelbrg-faq-search *::after {
		transition: none !important;
	}
}

/* ================================================================ editor notice */

/* Empty-state / troncamento (solo in editor): unico markup bridge oltre al chrome. */
.attelbrg-faq-notice {
	padding: var(--attelbrg-space-md, 16px);
	border: var(--attelbrg-border-width-hairline, 1px) dashed var(--attelbrg-color-border, rgb(85, 89, 88));
	border-radius: var(--attelbrg-radius-md, 4px);
	color: var(--attelbrg-color-text-muted, rgb(192, 193, 192));
	font-family: var(--attelbrg-font-body, "Lato", sans-serif);
}