/*
 * Azioni dell'header (2026-10-08): accesso all'area clienti (.ar-accesso) e catenella del
 * tema (.ar-catenella). Prototipo: docs/prototipi/interruttore-tema/catenella.html.
 * Il tema lo decide data-brx-theme su <html>, come il Toggle mode di Bricks che sostituisce.
 * Il cambio è istantaneo: una transizione su tutti gli elementi rallentava le pagine lunghe.
 */

/* ---------- accesso all'area clienti ---------- */
.ar-accesso { position: relative; z-index: 1001; }
.ar-accesso__icona {
	position: relative;
	display: grid; place-items: center;
	width: 4.4rem; height: 4.4rem; padding: 0;
	color: var(--color-on-surface); background: none; border: 0; border-radius: 50%;
	font: inherit; cursor: pointer; text-decoration: none;
}
.ar-accesso__icona > svg, .ar-accesso__simbolo > svg { width: 3rem; height: 3rem; transition: transform var(--motion-fast) var(--motion-ease); }
.ar-accesso__icona:hover > svg { transform: rotate(-8deg) scale(1.06); }

/* con accesso: simbolo (foto o iniziali) + "Ciao, Nome" in una pillola; da telefono solo il simbolo */
.ar-accesso__icona--dentro {
	display: flex; align-items: center; gap: .6rem;
	width: auto; padding: 0 1.2rem 0 .4rem;
	font-size: var(--text-s); font-weight: 600;
	border-radius: var(--radius-pill);
}
.ar-accesso__icona--dentro:hover, .ar-accesso__icona--dentro[aria-expanded="true"] {
	background: var(--color-fill-yellow); color: var(--color-on-fill);
}
.ar-accesso__simbolo { position: relative; display: grid; place-items: center; width: 3.6rem; height: 4.4rem; }
.ar-accesso__foto, .ar-accesso__iniziali {
	width: 3.2rem; height: 3.2rem; border-radius: 50%;
	border: var(--stroke) solid var(--color-on-surface);
}
.ar-accesso__foto { object-fit: cover; }
.ar-accesso__iniziali {
	display: grid; place-items: center;
	font-size: 1.25rem; font-weight: 700; font-stretch: 85%; letter-spacing: .02em; line-height: 1;
	color: var(--color-on-fill); background: var(--color-fill-lilac); border-color: var(--color-on-fill);
}
:root[data-brx-theme="dark"] .ar-accesso__iniziali { border-color: var(--color-on-surface); }
.ar-accesso__iniziali[data-colore="mint"] { background: var(--color-fill-mint); }
.ar-accesso__iniziali[data-colore="peach"] { background: var(--color-fill-peach); }
.ar-accesso__iniziali[data-colore="sky"] { background: var(--color-fill-sky); }
.ar-accesso__iniziali[data-colore="yellow"] { background: var(--color-fill-yellow); }
/* pallino "sei dentro" */
.ar-accesso__pallino {
	position: absolute; right: 0; bottom: .6rem;
	width: 1.3rem; height: 1.3rem; border-radius: 50%;
	background: var(--color-fill-mint);
	border: var(--stroke) solid var(--color-on-surface);
}
@media (max-width: 991px) {
	.ar-accesso__nome { display: none; }
	/* da telefono resta solo il simbolo: pulsante tondo, non una pillola stretta (ovale) */
	.ar-accesso__icona--dentro { width: 4.4rem; padding: 0; justify-content: center; border-radius: 50%; }
}

.ar-accesso__pannello {
	position: absolute; right: 0; top: calc(100% + var(--space-xs)); z-index: 1002;
	min-width: 22rem; padding: var(--space-xs);
	background: var(--color-surface-50); color: var(--color-on-surface);
	border: var(--stroke) solid var(--color-border-strong); border-radius: var(--radius-m);
	box-shadow: var(--shadow-hard);
}
.ar-accesso__pannello[hidden] { display: none; }
.ar-accesso__saluto {
	margin: 0 0 var(--space-2xs); padding: var(--space-2xs) var(--space-s) var(--space-xs);
	font-size: var(--text-s); color: var(--color-on-surface-soft);
	border-bottom: 1px solid var(--color-border);
}
.ar-accesso__saluto strong { color: var(--color-on-surface); }
@media (min-width: 992px) { .ar-accesso__saluto { display: none; } }
.ar-accesso__voce {
	display: flex; align-items: center; gap: var(--space-xs);
	padding: var(--space-xs) var(--space-s);
	font-size: var(--text-s); font-weight: 600; text-decoration: none; color: inherit;
	border-radius: var(--radius-s);
}
.ar-accesso__voce:hover, .ar-accesso__voce:focus-visible { background: var(--color-fill-yellow); color: var(--color-on-fill); }
.ar-accesso__voce svg { width: 2rem; height: 2rem; flex: none; }

/* suggerimento al passaggio del mouse (solo dove c'è il mouse) */
.ar-accesso__suggerimento, .ar-catenella__suggerimento {
	position: absolute; z-index: 1003; pointer-events: none;
	padding: .3rem 1rem;
	font-size: var(--text-xs); font-weight: 600; white-space: nowrap;
	background: var(--color-fill-yellow); color: var(--color-on-fill);
	border: 1px solid var(--color-on-fill); border-radius: var(--radius-pill);
	opacity: 0; transform: translateY(.3rem);
	transition: opacity var(--motion-fast) var(--motion-ease), transform var(--motion-fast) var(--motion-ease);
}
.ar-accesso__suggerimento { top: calc(100% + .4rem); right: 0; }
:is(.ar-accesso__icona, .ar-catenella):is(:hover, :focus-visible) :is(.ar-accesso__suggerimento, .ar-catenella__suggerimento) { opacity: 1; transform: none; }
@media (hover: none) { .ar-accesso__suggerimento, .ar-catenella__suggerimento { display: none; } }

/* ---------- catenella della lampada ---------- */
.ar-catenella {
	--visibile: 5.2rem;   /* catena sotto l'header, a riposo */
	--nascosta: 16rem;    /* catena dentro l'header: esce quando si tira */
	position: static;     /* il pezzo appeso si posiziona sull'header */
	flex: none;
	width: 2.4rem; height: 4.8rem; padding: 0;
	color: var(--color-on-surface); background: none; border: 0;
	cursor: grab;
}
.ar-catenella:focus-visible { outline: none; }
.ar-catenella:active { cursor: grabbing; }
.ar-catenella__appeso {
	position: absolute; top: 100%;   /* left automatico: resta sotto il suo posto nella riga */
	z-index: 50;
	width: 2.4rem; height: calc(var(--visibile) + 6rem);
	clip-path: inset(0 -30rem -8rem -30rem); /* taglia solo sopra: la catena esce dall'header */
	touch-action: none;
}
.ar-catenella__rosone {
	position: absolute; z-index: 2; top: -1px; left: 50%;
	width: 2.6rem; height: 1.2rem; transform: translateX(-50%);
	background: var(--color-surface-100);
	border: var(--stroke) solid currentColor; border-top: 0;
	border-radius: 0 0 1.3rem 1.3rem;
}
.ar-catenella__oscilla {
	position: absolute; top: 0; left: 50%;
	transform-origin: 0 0; transform: rotate(var(--angolo, 0deg));
}
.ar-catenella__tira {
	position: absolute; top: calc(-1 * var(--nascosta)); left: 0;
	display: flex; flex-direction: column; align-items: center;
	transform: translate(-50%, var(--tirata, 0px));
}
.ar-catenella__filo { display: block; width: 12px; height: calc(var(--nascosta) + var(--visibile)); overflow: visible; }
.ar-catenella__pomello { display: block; width: 3.4rem; height: 4.8rem; margin-top: -2px; border-radius: 1.4rem; color: var(--color-on-fill); }
.ar-catenella__pomello .corpo { fill: var(--color-fill-yellow); }
:root[data-brx-theme="dark"] .ar-catenella__pomello { filter: drop-shadow(0 0 .7rem rgb(251 240 180 / .55)); }
.ar-catenella:focus-visible .ar-catenella__pomello { outline: 2px solid var(--focus-color, currentColor); outline-offset: 3px; }

/* "tirami!": solo finché non l'hai usata la prima volta */
.ar-catenella__nota {
	position: absolute; z-index: 3; pointer-events: none;
	right: calc(50% + 2.4rem); top: calc(var(--visibile) + .6rem);
	display: flex; align-items: flex-end; gap: .2rem;
	font-weight: 700; font-size: var(--text-s); font-stretch: 85%; white-space: nowrap;
	transform: rotate(-7deg); transform-origin: right center;
}
.ar-catenella__nota svg { width: 3.2rem; height: 2rem; overflow: visible; }
.ar-catenella.is-usata .ar-catenella__nota { display: none; }
@media (prefers-reduced-motion: no-preference) {
	.ar-catenella__nota { animation: ar-catenella-nota 2.4s ease-in-out infinite; }
	@keyframes ar-catenella-nota { 0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(-3deg) translateX(.3rem); } }
}
.ar-catenella__suggerimento { right: calc(50% + 2.4rem); top: calc(var(--visibile) + 1.6rem); }
.ar-catenella:not(.is-usata) .ar-catenella__suggerimento { display: none; }

@media (max-width: 991px) {
	/* da telefono la catenella pende a sinistra dell'hamburger: hamburger e icona utente
	   restano allineati al bordo destro */
	.ar-catenella { --visibile: 3rem; order: -1; }
}

/* menu mobile aperto: la catenella non deve passare sopra il pannello */
.ar-header:has(.show-mobile-menu) .ar-catenella__appeso { visibility: hidden; }