/**
 * Pagina «Diventa Partner».
 *
 * I colori erano scritti a mano, non presi dai token: per questo la revisione
 * grafica di agosto le è passata accanto e la pagina è rimasta l'unica con i
 * bottoni verdi e i titoli in grazie, in mezzo a un sito diventato arancio.
 * Adesso legge la tavolozza come tutti gli altri.
 *
 * @package AdverTrieste
 */

.ap-partner {
	max-width: 1080px;
	margin: 0 auto;
	padding: 28px 20px 56px;
	color: var(--ap-testo);
}

.ap-partner-testa h1 {
	font-family: var(--ap-serif);
	font-size: 34px;
	line-height: 1.15;
	margin: 0 0 8px;
}

.ap-partner-occhiello {
	color: var(--ap-grigio);
	font-size: 16px;
	max-width: 62ch;
	margin: 0 0 22px;
}

.ap-esito {
	border-radius: 10px;
	padding: 12px 16px;
	margin-bottom: 20px;
	font-size: 15px;
	border: 1px solid var(--ap-evidenza-bordo);
	background: var(--ap-evidenza-fondo);
	color: var(--ap-testo);
}

.ap-esito.errore {
	/* L'unico rosso del sito pubblico. Resta: è l'unico colore che chi legge
	   interpreta senza doverlo imparare, e qui dice «la richiesta non è
	   partita» — che è la cosa peggiore che possa succedere su questa pagina. */
	border-color: #f0d2cc;
	background: #fdf1ef;
	color: #8c2f22;
}

/* Due strade affiancate, che diventano una colonna sul telefono: devono
   leggersi come alternative, non come un percorso in due passi. */
.ap-partner-strade {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 320px, 1fr ) );
	gap: 20px;
}

.ap-partner-strada {
	background: #fff;
	border: 1px solid var(--ap-bordo);
	border-radius: 14px;
	padding: 22px 24px 20px;
}

.ap-partner-eti {
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	/* Non arancione: arancione su crema sta sotto 2.5:1 ed è maiuscoletto
	   piccolo, la combinazione peggiore. Il blocco si riconosce dal fondo. */
	color: var(--ap-testo);
	background: var(--ap-evidenza-fondo);
	border-radius: 999px;
	padding: 4px 10px;
	margin-bottom: 10px;
}

.ap-partner-strada h2 {
	font-family: var(--ap-serif);
	font-size: 23px;
	margin: 0 0 8px;
}

.ap-partner-strada p {
	color: var(--ap-grigio);
	margin: 0 0 12px;
}

.ap-partner-strada ul {
	margin: 0 0 18px;
	padding-left: 18px;
	color: var(--ap-testo);
}

.ap-partner-strada li {
	margin-bottom: 5px;
}

/* «GRATUITO»: la risposta alla prima obiezione di chi legge la scheda del
   B&B, ed è quello che chi legge deve portarsi via anche solo scorrendo.
   Arancione e maiuscolo su richiesta di Gian.

   ⚠️ L'arancione del marchio su bianco sta a 2.15:1. Sopra il testo normale
   ci sono 4.5:1 di soglia, quindi questa parola è FUORI: si vede che c'è ma
   si legge peggio del resto della riga, e in pieno sole peggio ancora. Il
   grassetto e il maiuscolo tengono in piedi la forma della parola, che è
   quello che resta.

   Se un giorno si volesse recuperare il contrasto senza perdere l'arancione,
   la strada è quella già usata ovunque nel sito: nero su arancione pieno
   (9.1:1), cioè una pillola invece che una parola colorata. È il motivo per
   cui `.ap-partner-eti` qui accanto ha il fondo colorato e il testo scuro. */

.ap-partner-gratis {
	color: var(--ap-marchio);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.ap-partner-modulo summary {
	cursor: pointer;
	display: inline-block;
	background: var(--ap-azione);
	color: var(--ap-azione-testo);
	border-radius: 9px;
	padding: 11px 18px;
	font-weight: 600;
	list-style: none;
}

.ap-partner-modulo summary::-webkit-details-marker {
	display: none;
}

.ap-partner-modulo[open] summary {
	background: var(--ap-azione-premuta);
	margin-bottom: 14px;
}

.ap-form label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	margin: 10px 0 4px;
}

.ap-form input[type="text"],
.ap-form input[type="email"],
.ap-form textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 9px 11px;
	border: 1px solid var(--ap-bordo);
	border-radius: 8px;
	font-size: 15px;
	background: #fff;
	color: var(--ap-testo);
	font-family: inherit;
}

.ap-form-riga {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 160px, 1fr ) );
	gap: 0 14px;
}

.ap-aiuto {
	font-size: 12.5px;
	color: var(--ap-grigio);
	margin: 6px 0 0;
}

.ap-consenso {
	display: flex;
	gap: 8px;
	align-items: flex-start;
	font-weight: 400;
	font-size: 13px;
	color: var(--ap-testo);
	margin: 16px 0 4px;
}

.ap-consenso input {
	margin-top: 3px;
	flex: none;
}

/* La spunta mancante: l'avviso che il browser non riesce a dare.
   Stessi colori dell'esito in errore in cima alla pagina — è l'unico rosso del
   sito pubblico, e chi lo vede lì lo riconosce qui. */
.ap-consenso-avviso {
	margin: 6px 0 0;
	padding: 8px 12px;
	border: 1px solid #f0d2cc;
	border-radius: 8px;
	background: #fdf1ef;
	color: #8c2f22;
	font-size: 13px;
	font-weight: 600;
}

/* E la riga della spunta si segna, se no l'avviso dice «qui sopra» e sopra non
   c'è niente di diverso da prima. */
.ap-consenso.manca-spunta {
	color: #8c2f22;
}

.ap-consenso.manca-spunta input {
	outline: 2px solid #8c2f22;
	outline-offset: 2px;
}

/* Il campo-trappola: fuori dallo schermo, non `display:none` — alcuni robot
   saltano proprio i campi nascosti, e allora la trappola non scatta. */
.ap-esca {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.ap-partner-rete {
	margin-top: 40px;
}

.ap-partner-rete h2 {
	font-family: var(--ap-serif);
	font-size: 24px;
	margin: 0 0 6px;
}

.ap-partner-mappa {
	height: 420px;
	border-radius: 14px;
	overflow: hidden;
	border: 1px solid var(--ap-bordo);
}

@media (max-width: 640px) {

	.ap-partner-testa h1 {
		font-size: 27px;
	}

	.ap-partner-mappa {
		height: 320px;
	}
}

/* Il segnaposto della rete: lo stesso disegno della mappa riservata in
   console, con i colori di questa pelle. Il viola di là è della console e qui
   sarebbe un colore che non vuol dire niente. */
.ap-qr-punto {
	display: block;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	border: 2px solid var(--ap-carta, #fff);
	box-shadow: 0 0 0 1px rgba( 12, 14, 11, 0.35 );
	background: var(--ap-marchio);
}

/* Il fumetto è quello della mappa riservata (`.advtr-popup-*`, in map.css):
   dal 20 agosto 2026 le due mappe mostrano le stesse cose e il foglio è uno
   solo — pulsanti compresi, che i colori se li portano da soli. Qui non serve
   più niente. */

/* La fila di chi ospita l'espositore. Righe che si riempiono da sole: i loghi
   sono di misure diverse e una griglia rigida li farebbe ballare. */
.ap-partner-loghi-titolo {
	font-family: var(--ap-serif);
	font-size: 19px;
	margin: 28px 0 4px;
}

.ap-qr-loghi {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	list-style: none;
	margin: 14px 0 0;
	padding: 0;
}

.ap-qr-loghi li {
	margin: 0;
}

/* Il riquadro bianco non è decorazione: quasi tutti i loghi degli esercenti
   sono scuri su trasparente, e sul grigio del fondo pagina si perdono. È la
   stessa scelta della piastrella nella testata della scheda. */
.ap-qr-riquadro {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 148px;
	height: 84px;
	padding: 10px;
	background: var(--ap-carta);
	border: 1px solid var(--ap-bordo);
	border-radius: 12px;
}

.ap-qr-loghi img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

.ap-partner-rete a.ap-qr-riquadro:hover,
.ap-partner-rete a.ap-qr-riquadro:focus-visible {
	border-color: var(--ap-marchio);
}

.ap-partner-rete a.ap-qr-riquadro:focus-visible {
	outline: 3px solid var(--ap-fuoco);
	outline-offset: 2px;
}

@media (max-width: 480px) {

	/* Due per riga anche sul telefono: una colonna sola di loghi diventa un
	   elenco lunghissimo di riquadri quasi vuoti. */
	.ap-qr-riquadro {
		width: calc( 50vw - 32px );
		max-width: 148px;
		height: 76px;
	}
}