/**
 * 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;
	}

	/* 320px erano pochi: con un fumetto aperto (267x170) ne restava coperto
	   il 45%, e dei sette espositori se ne potevano premere due. Piu' alta,
	   il fumetto copre un terzo e attorno resta mappa su cui toccare.
	   `vh` con un minimo: su uno schermo corto non deve schiacciarsi sotto
	   la misura da cui siamo partiti.

	   E prende tutta la larghezza dello schermo, uscendo dai margini della
	   pagina. Non e' un vezzo grafico: il fumetto e' largo 267px e in un
	   riquadro da 303 restano 36px di gioco, troppo pochi perche' ci stia
	   quando il segnaposto e' vicino a un bordo — e il riquadro ha
	   `overflow: hidden`, quindi la parte che esce non e' storta, e'
	   TAGLIATA, con dentro un pulsante che non si puo' premere. A tutta
	   larghezza il gioco passa da 36 a oltre 120px.

	   ⚠️ Gli angoli arrotondati vanno via di conseguenza: a filo di schermo
	   non avrebbero senso. */
	.ap-partner-mappa {
		height: 60vh;
		min-height: 380px;
		width: 100vw;
		margin-left: calc( 50% - 50vw );
		margin-right: calc( 50% - 50vw );
		border-radius: 0;
		border-left: 0;
		border-right: 0;
	}
}

/* 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. */