/*
 * Formulari públic de contribució.
 *
 * S'hereta la tipografia del tema: el formulari ha de semblar del web, no del
 * plugin. Aquí només hi ha estructura, estats i els colors dels quatre àmbits.
 */

.pipol-form {
	/* La marca ve de fora: la tipografia del tema i els colors de la paleta
	   global, que Pipol_Aparenca publica com a variables. Aquí només hi ha els
	   neutres, que no són marca de ningú. */
	--pipol-vora: #d6d6d6;
	--pipol-error: #b3261e;
	--pipol-fons-suau: #fafafa;

	max-width: 46rem;
	margin-inline: auto;
}

.pipol-form__titol {
	margin-bottom: 1rem;
}

/* `hidden` ha de guanyar sempre.
 *
 * L'atribut `hidden` amaga amb una regla `display: none` del navegador, i
 * qualsevol classe nostra que declari `display` la venç: l'element queda
 * amagat a l'HTML i pintat a la pantalla. Passava amb el distintiu de portada,
 * que sortia a totes les imatges, i amb la barra de passos, que es veia fins i
 * tot sense JavaScript. */
.pipol-form [hidden],
.pipol-form__galeria [hidden] {
	display: none !important;
}

/* Blocs ------------------------------------------------------------------ */

.pipol-form__bloc,
.pipol-form__categoria {
	border: 1px solid var(--pipol-vora);
	border-radius: 6px;
	padding: 1.25rem 1.5rem 1.5rem;
	margin: 0 0 1.5rem;
}

.pipol-form__categoria {
	background: var(--pipol-fons-suau);
	margin-bottom: 1rem;
}

.pipol-form__legend {
	font-weight: 700;
	padding-inline: 0.4rem;
	line-height: 1.3;
}

/* Sense el color de l'àmbit: aquí no és informació, és decoració, i el codi de
   colors és cosa del mapa. */
.pipol-form__accions {
	border: 1px solid var(--pipol-vora);
	border-radius: 6px;
	padding: 1.25rem 1.5rem 0.5rem;
	margin: 0 0 1.5rem;
}

.pipol-form__accions-titol {
	margin: 0 0 0.25rem;
}

/* Camps ------------------------------------------------------------------ */

.pipol-form__camp {
	margin-bottom: 1.1rem;
}

.pipol-form__camp:last-child {
	margin-bottom: 0;
}

.pipol-form__label,
.pipol-form__label-petit {
	display: block;
	font-weight: 600;
	margin-bottom: 0.3rem;
}

.pipol-form__label-petit {
	font-weight: 500;
	font-size: 0.9em;
	margin-top: 0.6rem;
}

.pipol-form input[type="text"],
.pipol-form input[type="email"],
.pipol-form input[type="number"],
.pipol-form input[type="file"],
.pipol-form select,
.pipol-form textarea {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	padding: 0.5rem 0.6rem;
	border: 1px solid var(--pipol-vora);
	border-radius: 4px;
	background: var(--pipol-clar);
	font: inherit;
	color: inherit;
}

.pipol-form textarea {
	resize: vertical;
}

.pipol-form input:focus-visible,
.pipol-form select:focus-visible,
.pipol-form textarea:focus-visible,
.pipol-form button:focus-visible {
	outline: 2px solid var(--pipol-tinta);
	outline-offset: 2px;
}

/* Camp que no s'omple a mà: surt d'un altre camp i es veu perquè es pugui
   comprovar, no perquè es pugui canviar. */
.pipol-form__derivat {
	background: var(--pipol-fons-suau) !important;
	color: #5c5c5c;
	cursor: default;
}

.pipol-form input[disabled] {
	background: #f0f0f0;
	color: #767676;
}

.pipol-form__obligatori {
	color: var(--pipol-error);
	font-weight: 700;
}

.pipol-form__ajuda {
	margin: 0.35rem 0 0;
	font-size: 0.9em;
	color: #5c5c5c;
}

.pipol-form__error {
	margin: 0.35rem 0 0;
	font-size: 0.9em;
	font-weight: 600;
	color: var(--pipol-error);
}

.pipol-form__camp--error input,
.pipol-form__camp--error select,
.pipol-form__camp--error textarea {
	border-color: var(--pipol-error);
}

/* Camps de costat: es desfan sols quan no hi caben. */
.pipol-form__fila {
	display: flex;
	flex-wrap: wrap;
	gap: 0 1.25rem;
}

/* El repartiment el mana l'esquema amb `parts`: amb 1 i 2 la fila queda a un
   terç i dos terços. La base a zero fa que la proporció sigui exacta, i el
   mínim és el que la fa trencar quan no hi cap. */
.pipol-form__fila > .pipol-form__camp {
	flex: var(--pipol-parts, 1) 1 0;
	min-width: 9rem;
}

/* Camps compostos -------------------------------------------------------- */

.pipol-form__unitat {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.pipol-form__sufix {
	white-space: nowrap;
	color: #5c5c5c;
}

.pipol-form__any-curs {
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
}

.pipol-form__any-curs input[type="number"] {
	width: 8rem;
}

.pipol-form__consent {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	font-weight: 400;
	cursor: pointer;
}

.pipol-form__consent input[type="checkbox"] {
	margin-top: 0.25rem;
	flex: 0 0 auto;
}

/* Cercador de municipis -------------------------------------------------- */

.pipol-form__combo {
	position: relative;
}

/* El desplegable original es queda al formulari, que és el que porta el valor
   i el que s'envia; només se'l treu de la vista. */
.pipol-form__select--darrere {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip-path: inset(50%);
}

.pipol-form__opcions {
	position: absolute;
	z-index: 500;
	left: 0;
	right: 0;
	max-height: 17rem;
	overflow-y: auto;
	margin: 0.2rem 0 0;
	padding: 0;
	list-style: none;
	background: var(--pipol-clar);
	border: 1px solid var(--pipol-vora);
	border-radius: 4px;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}

.pipol-form__opcio {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.45rem 0.7rem;
	cursor: pointer;
}

.pipol-form__opcio.is-actiu {
	background: var(--pipol-tinta);
	color: var(--pipol-clar);
}

.pipol-form__opcio--buida {
	color: #767676;
	cursor: default;
}

.pipol-form__opcio-comarca {
	flex: 0 0 auto;
	font-size: 0.85em;
	color: #767676;
}

.pipol-form__opcio.is-actiu .pipol-form__opcio-comarca {
	color: #d6d6d6;
}

/* Imatges ---------------------------------------------------------------- */

/* Una fila per imatge: en graella no hi cabia la descripció i tot quedava
   amuntegat. Nansa, miniatura, dades i el botó de treure-la. */
.pipol-form__galeria {
	list-style: none;
	margin: 0.75rem 0 0;
	padding: 0;
}

.pipol-form__imatge {
	display: grid;
	grid-template-columns: auto 4.5rem minmax(0, 1fr) auto;
	align-items: center;
	gap: 0.75rem;
	margin: 0 0 0.5rem;
	padding: 0.5rem;
	border: 1px solid var(--pipol-vora);
	border-radius: 4px;
	background: var(--pipol-clar);
}

/* La representativa és la primera autoritzada, no sempre la primera: es marca
   amb la vora esquerra, que en una llista vertical és on l'ull hi va. */
.pipol-form__imatge.is-portada {
	border-left: 4px solid var(--pipol-tinta);
}

.pipol-form__imatge.is-arrossegant {
	opacity: 0.45;
	outline: 2px dashed var(--pipol-tinta);
	outline-offset: 2px;
}

.pipol-form__imatge img {
	display: block;
	width: 4.5rem;
	height: 4.5rem;
	object-fit: cover;
	border-radius: 3px;
	background: var(--pipol-fons-suau);
}

/* La nansa: amb el dit només s'arrossega des d'aquí, perquè si tota la fila
   capturés el gest no es podria desplaçar la pàgina. Amb teclat, s'hi arriba
   tabulant i es mou amb les fletxes. */
.pipol-form__imatge-nansa {
	width: 1.9rem;
	height: 2.4rem;
	padding: 0;
	border: 0;
	background: none;
	color: #767676;
	font-size: 1.2rem;
	line-height: 1;
	cursor: grab;
	touch-action: none;
	user-select: none;
}

.pipol-form__imatge-nansa:active {
	cursor: grabbing;
}

.pipol-form__imatge-nansa:focus-visible {
	outline: 2px solid var(--pipol-tinta);
	outline-offset: 1px;
}

.pipol-form__imatge-dades {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	min-width: 0;
}

.pipol-form__imatge-nom {
	font-size: 0.8em;
	color: #5c5c5c;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pipol-form__imatge-descripcio {
	font-size: 0.9em;
	padding: 0.35rem 0.5rem;
}

.pipol-form__imatge-drets {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.85em;
	cursor: pointer;
}

.pipol-form__imatge-treu {
	width: 1.9rem;
	height: 1.9rem;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #f0f0f0;
	color: #5c5c5c;
	font-size: 1.1rem;
	line-height: 1;
	cursor: pointer;
}

.pipol-form__imatge-treu:hover {
	background: var(--pipol-tinta);
	color: var(--pipol-clar);
}

@media (max-width: 32rem) {
	.pipol-form__imatge {
		grid-template-columns: auto 3.5rem minmax(0, 1fr) auto;
		gap: 0.5rem;
	}

	.pipol-form__imatge img {
		width: 3.5rem;
		height: 3.5rem;
	}
}

/* Mapa ------------------------------------------------------------------- */

.pipol-form__mapa {
	height: 22rem;
	border: 1px solid var(--pipol-vora);
	border-radius: 4px;
	background: var(--pipol-fons-suau);
}

.pipol-form__mapa:empty::after {
	content: "";
}

.pipol-form__coords {
	display: grid;
	grid-template-columns: auto 1fr auto 1fr;
	align-items: center;
	gap: 0.4rem 0.6rem;
	margin-top: 0.6rem;
	font-size: 0.9em;
}

.pipol-form__coords label {
	font-weight: 600;
}

@media (max-width: 40rem) {
	.pipol-form__coords {
		grid-template-columns: auto 1fr;
	}
}

/* Accions ---------------------------------------------------------------- */

.pipol-form__accio {
	padding: 0.5rem 0;
	border-bottom: 1px solid #e8e8e8;
}

.pipol-form__accio:last-child {
	border-bottom: 0;
}

.pipol-form__accio-detall {
	margin: 0.4rem 0 0.6rem 1.6rem;
	padding-left: 0.8rem;
	border-left: 3px solid var(--pipol-vora);
}

.pipol-form__accio-detall .pipol-form__unitat input[type="number"] {
	max-width: 10rem;
}

/* Avisos ----------------------------------------------------------------- */

.pipol-form__avis {
	border: 1px solid var(--pipol-vora);
	border-left: 6px solid var(--pipol-vora);
	border-radius: 4px;
	padding: 1rem 1.25rem;
	margin-bottom: 1.5rem;
}

.pipol-form__avis--error {
	border-left-color: var(--pipol-error);
	background: #fdf3f2;
}

.pipol-form__avis--error ul {
	margin: 0.5rem 0 0 1.1rem;
}

.pipol-form__avis--ok {
	border-left-color: #96d796;
	background: #f4fbf4;
}

.pipol-form__imatges-avis {
	margin: 0.35rem 0 0;
	font-size: 0.9em;
	color: var(--pipol-error);
}

/* Passos ----------------------------------------------------------------- */

.pipol-form__pas {
	margin-bottom: 2rem;
}

.pipol-form__pas-titol {
	margin: 0 0 1rem;
	line-height: 1.25;
}

.pipol-form__pas-titol:focus-visible {
	outline: 2px solid var(--pipol-tinta);
	outline-offset: 4px;
}

.pipol-form__pas-compte {
	display: block;
	font-size: 0.75em;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #5c5c5c;
}

/* La barra de progrés només existeix quan hi ha passos de debò: sense
   JavaScript va amagada i el formulari és una pàgina llarga i seguida.

   És indicativa i no s'hi pot clicar: diu quins passos hi ha i en quin ets.
   Cada pas és una fletxa plena que encaixa amb la següent, i el color va del
   gris clar (encara no hi has arribat) al negre (hi ets). */
.pipol-form__indicador {
	display: flex;
	list-style: none;
	margin: 0 0 2rem;
	padding: 0;
	font-size: 0.85em;
	line-height: 1.2;
}

.pipol-form__indicador-pas {
	--pipol-fletxa: 0.9rem;

	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	/* Amplada segons el nom, no a parts iguals: «Imatges i contacte» necessita
	   més lloc que «Ubicació» i si es reparteix igual queda tallat. */
	flex: 1 1 auto;
	min-width: 0;
	/* Encavalca la fletxa anterior, però no del tot: els tres píxels que queden
	   són la separació entre passos. */
	margin: 0 0 0 calc(var(--pipol-fletxa) * -1 + 3px);
	padding: 0.65rem calc(var(--pipol-fletxa) + 0.4rem);
	background: #f0f0f0;
	color: #767676;
	clip-path: polygon(
		0 0,
		calc(100% - var(--pipol-fletxa)) 0,
		100% 50%,
		calc(100% - var(--pipol-fletxa)) 100%,
		0 100%,
		var(--pipol-fletxa) 50%
	);
}

/* La primera no té osca i l'última no té punta: la barra comença i acaba
   recta. */
.pipol-form__indicador-pas:first-child {
	margin-left: 0;
	padding-left: 0.9rem;
	clip-path: polygon(
		0 0,
		calc(100% - var(--pipol-fletxa)) 0,
		100% 50%,
		calc(100% - var(--pipol-fletxa)) 100%,
		0 100%
	);
}

.pipol-form__indicador-pas:last-child {
	padding-right: 0.9rem;
	clip-path: polygon( 0 0, 100% 0, 100% 100%, 0 100%, var(--pipol-fletxa) 50% );
}

.pipol-form__indicador-num {
	flex: 0 0 auto;
	font-weight: 700;
}

.pipol-form__indicador-nom {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pipol-form__indicador-pas.is-fet {
	background: #5c5c5c;
	color: var(--pipol-clar);
}

/* El pas on ets va del color de la marca; els que has passat, en gris fosc.
   El text hi va fosc: el blanc sobre el mostassa no es llegeix. */
.pipol-form__indicador-pas.is-actual {
	background: var(--pipol-marca);
	color: var(--pipol-tinta);
	font-weight: 700;
}

/* En pantalla estreta només es llegeix el nom del pas on ets; la resta es
   queden amb el número i deixen l'espai. */
@media (max-width: 48rem) {
	.pipol-form__indicador-pas {
		flex: 0 1 auto;
		padding-inline: calc(var(--pipol-fletxa) + 0.2rem);
	}

	.pipol-form__indicador-pas.is-actual {
		flex: 1 1 auto;
	}

	.pipol-form__indicador-pas:not(.is-actual) .pipol-form__indicador-nom {
		position: absolute;
		left: -9999px;
	}
}

/* Enviament -------------------------------------------------------------- */

/* Els botons segueixen el patró del web de pol·linitzadors: píndola fosca amb
   text clar que, en passar-hi el ratolí, es torna del color de la marca. Allà
   el text es queda clar; aquí es torna fosc, perquè sobre el mostassa el blanc
   es queda a 1,9:1 de contrast i en un botó d'enviar això no es pot llegir. */
.pipol-form__boto {
	font: inherit;
	/* Els seus botons van amb la tipografia primària del web, no amb la del
	   cos. No en fixem cap família: agafem la que el tema hagi declarat com a
	   primària, i si no n'hi ha cap, la declaració decau i queda l'heretada. */
	font-family: var(--e-global-typography-primary-font-family), sans-serif;
	font-weight: 600;
	letter-spacing: 1.6px;
	padding: 0.7rem 1.8rem;
	border: 0;
	border-radius: 50px;
	background: var(--pipol-tinta);
	color: var(--pipol-clar);
	cursor: pointer;
	transition: background-color 0.15s, color 0.15s;
}

.pipol-form__boto:hover,
.pipol-form__boto:focus-visible {
	background: var(--pipol-marca);
	color: var(--pipol-tinta);
}

.pipol-form__boto--secundari {
	background: none;
	color: var(--pipol-tinta);
	border: 1px solid var(--pipol-vora);
}

.pipol-form__boto--secundari:hover,
.pipol-form__boto--secundari:focus-visible {
	background: var(--pipol-fons-suau);
	color: var(--pipol-tinta);
}

.pipol-form__peu {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	margin-top: 1.5rem;
}

/* El botó que fa avançar mana visualment; el d'enrere acompanya. */
.pipol-form__peu [data-pipol-seguent],
.pipol-form__peu [type="submit"] {
	margin-left: auto;
}

.pipol-form__nota {
	font-size: 0.9em;
	color: #5c5c5c;
}

/* El camp trampa no l'ha de veure ningú: ni a la pantalla, ni el lector de
   pantalla, ni el tabulador. Només els robots que llegeixen l'HTML. */
.pipol-form__parany {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}