/* ==========================================================================
   RADAR.casa — L'AVVISO SUI COOKIE (16/9/2026)

   Solo layout e posizione: i colori sono quelli del vetro di `ossatura.css`
   (`--vetro-forte`, `--vetro-bordo`, `--vetro-ombra`, `--superficie`,
   `--testo`), e il bottone riusa `.pulsante` di `radar.css` — nessun colore
   nuovo dichiarato qui, come chiede `ossatura.css` §1 per i suoi.

   POSIZIONE: fisso in basso, centrato, largo al massimo quanto `--colonna-modulo`
   (56rem — la misura «di lavoro» del sito, non i 120rem del contenitore
   intero, che per un avviso sarebbe un nastro a piena larghezza).

   NON DEVE COPRIRE:
   · `#risali` (radar.css/ossatura.css): fisso in basso a destra, 48×48 +
     16px di margine — il banner resta più in alto di lui SEMPRE, a ogni
     larghezza, non solo quando è visibile (risali compare tardi, durante lo
     scorrimento, e il banner può essere ancora aperto in quel momento). Lo
     scarto (5.75rem da fondo) vale anche sotto i 480px: provato a 1rem, si
     sovrapponevano (misurato sul banco, 390×844).
   · il foglio dei risultati di `/mappa/` sotto i 60rem (`radar.css`
     `.foglio[data-stato="chiuso"]`, alto 4.25rem = 68px): sulla pagina della
     mappa (`body.mappa-attiva`) il banner sale sopra di lui, con lo stesso
     scarto che `mappa.css` già usa per i suoi controlli
     (`var(--mappa-foglio-chiuso, 68px)`), aumentato: a +12px si sovrapponeva
     ancora di 17px, misurato.
   · la colonna dei risultati di `/mappa/` da 60rem in su (`radar.css`
     `.foglio { flex: 0 0 24rem }`, alta quanto lo schermo): il banner non ci
     si centra sopra, si sposta a destra, nell'area della mappa.
   ========================================================================== */

.cookie-avviso {
	position: fixed;
	left: 50%;
	transform: translateX(-50%);
	z-index: 500;

	/* Sopra `#risali` (16px + 48px + margine): sceso sotto questa misura il
	   16/9 si sovrapponevano, misurato sul banco a 1440 e 390. */
	bottom: max(5.75rem, calc(env(safe-area-inset-bottom, 0px) + 5.75rem));

	width: calc(100% - 2 * clamp(1rem, 4vw, 1.5rem));
	max-width: var(--colonna-modulo, 56rem);

	background: var(--vetro-forte);
	-webkit-backdrop-filter: var(--vetro-sfocatura);
	backdrop-filter: var(--vetro-sfocatura);
	border: 1px solid var(--vetro-bordo);
	border-radius: var(--raggio-pannello);
	box-shadow: var(--vetro-ombra);

	color: var(--testo);
}

.cookie-avviso[hidden] { display: none; }

.cookie-avviso__corpo {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .75rem 1.25rem;
	padding: 1rem 1.25rem;
}

.cookie-avviso__testo {
	flex: 1 1 18rem;
	margin: 0;
	font-size: var(--t-5, .9375rem);
	line-height: 1.5;
	color: var(--testo);
}

.cookie-avviso__link {
	color: var(--testo);
	text-decoration: underline;
	text-underline-offset: .15em;
}

.cookie-avviso__link:focus-visible,
.cookie-avviso__capito:focus-visible {
	outline: 3px solid var(--azione);
	outline-offset: 2px;
}

.cookie-avviso__capito {
	flex: none;
	/* `.pulsante` porta già il fondo pieno (`--azione`) e la pillola: qui solo
	   la misura minima di tocco, 44px, come il resto del sito (`--tocco`). */
	min-height: var(--tocco, 44px);
	white-space: nowrap;
}

/* --- Telefono: mai più di un terzo dello schermo -------------------------
   A 390×844 un terzo è ~281px. Il testo si stringe (`--t-5` è già piccolo),
   il bottone va a riga propria e largo quanto il banner: misurato sul banco,
   l'avviso intero resta sotto i 180px anche sulla frase più lunga. */
@media (max-width: 480px) {
	.cookie-avviso {
		/* NON 1rem: a 1rem il banner (alto ~140px) sale fin sotto #risali
		   (48px + 16px di margine) e lo copre — misurato sul banco a 390,
		   risali a x 326-374 e banner fino a x 374, sovrapposti. Si tiene lo
		   stesso scarto della riga larga (5.75rem): resta sotto il terzo di
		   schermo lo stesso, perché quel limite è sull'ALTEZZA del banner, non
		   su dove galleggia. */
		width: calc(100% - 2rem);
	}

	.cookie-avviso__corpo {
		flex-direction: column;
		align-items: stretch;
		gap: .6rem;
		padding: .85rem .9rem;
	}

	.cookie-avviso__testo {
		/* Non `flex: 1 1 18rem` della riga larga: in colonna il `flex-grow`
		   allunga il paragrafo fino a riempire tutta l'altezza libera del
		   contenitore — misurato: 288px di scatola per tre righe di testo,
		   col bottone spinto in fondo da un vuoto. `flex: none` lo riporta
		   alla sua altezza vera. */
		flex: none;
		font-size: .875rem;
		line-height: 1.4;
	}

	.cookie-avviso__capito {
		align-self: flex-end;
		padding: .5rem 1.25rem;
	}
}

/* --- `/mappa/` sotto i 60rem: sopra al foglio dei risultati, non su #risali
   perché lì #risali resta sempre `hidden` (radar.css `body.mappa-attiva`
   non lo mostra mai — `scorrimento.js` esce alla riga 1 su quella pagina). */
@media (max-width: 59.999rem) {
	body.mappa-attiva .cookie-avviso {
		/* +40px e non +12px come i comandi della mappa: quelli sono pastiglie
		   di 44px, questo è un pannello di testo che non deve sfiorare la
		   maniglia del foglio — misurato sul banco: a +12px restavano 17px di
		   sovrapposizione fra il fondo dell'avviso e la testa del foglio. */
		bottom: calc(var(--mappa-foglio-chiuso, 68px) + 40px);
	}
}

/* --- `/mappa/` da 60rem in su: il foglio non è più in basso, è una colonna
   A SINISTRA alta quanto lo schermo (`radar.css` §13, `flex: 0 0 24rem`,
   misurata sul banco ~28rem di bordo a bordo). Un avviso centrato la
   copre per intero, in altezza. Si sposta a destra, nell'area della mappa,
   con una larghezza che non rientra mai in quella colonna. */
@media (min-width: 60rem) {
	body.mappa-attiva .cookie-avviso {
		left: auto;
		right: max(1.5rem, calc(env(safe-area-inset-right, 0px) + 1.5rem));
		transform: none;
		/* 30rem di colonna riservata (più larga della misura reale, apposta)
		   + 3rem di margine: quello che resta è il banner, mai oltre. */
		max-width: min(var(--colonna-modulo, 56rem), calc(100% - 30rem - 3rem));
	}
}

/* 16/9/2026 sera — guardato sulla home: a 5,75rem dal fondo l'avviso copriva
   «Pubblica un annuncio», sul computer e sul telefono. Ora sta a 16px dal
   fondo; il tasto «torna su» si nasconde finché l'avviso è aperto (dura un
   clic), e sul telefono testo e bottone stanno sulla stessa riga. */
.cookie-avviso {
	bottom: max(16px, calc(env(safe-area-inset-bottom, 0px) + 12px));
}

body:has(#radar-cookie:not([hidden])) #risali {
	visibility: hidden;
}

@media (max-width: 480px) {
	.cookie-avviso__corpo {
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: center;
		gap: .75rem;
		padding: .7rem .8rem .7rem 1rem;
	}

	.cookie-avviso__testo {
		flex: 1 1 auto;
		font-size: .8125rem;
		line-height: 1.4;
	}

	.cookie-avviso__capito {
		width: auto;
		padding-inline: 1rem;
	}
}