/*
 * Fontinha — Contactos, o formulário.
 *
 * ============================================================
 * ESTA BANDA NÃO ESTÁ NO FRAME
 * ============================================================
 *
 * Nem o `Contacto` (4005:37256) nem o `Contacto - mob` (4005:37692) têm
 * formulário — lidos os nós dos dois. O que está desenhado é o BOTÃO que lhe
 * aponta.
 *
 * Por isso os valores daqui não são medições: são os do formulário dos eventos,
 * que esse está desenhado (nó 4005:35150). Mesmo petrol, mesmo campo com o
 * rótulo por dentro, mesmo botão dourado. Assim a peça é a mesma em todo o site
 * e não se inventou uma segunda linguagem para a mesma coisa.
 *
 * Mobile first, com o desktop aos 1200.
 */

.contacto-form.section {
	padding-block: var(--sp-16) var(--sp-12);

	background: var(--s-bg-petrol-mid);
}

.contacto-form__titulo {
	margin: 0 0 var(--sp-6);

	color: var(--s-text-on-media);
	font-family: var(--font-body);
	font-size: 22.012px; /* o mesmo do "RESERVATION FORM" em telemóvel */
	font-weight: 500;
	line-height: 1.227;
	text-transform: uppercase;
}

.contacto-form__aviso {
	margin: 0 0 var(--sp-4);
	padding: var(--sp-3) var(--sp-4);

	color: var(--s-text);
	font-size: var(--fs-small);
}

.contacto-form__aviso--ok {
	background: var(--s-bg-petrol-pale);
}

.contacto-form__aviso--erro {
	background: var(--s-bg-cream-text);
}

/* ---------- Os campos ---------- */

.contacto-form__campo {
	position: relative;

	margin: 0 0 16.2px;
}

/*
 * O rótulo por cima da caixa, não acima dela — é o que o formulário dos eventos
 * faz em telemóvel. Continua a ser um `<label>` a sério, associado ao controlo.
 */
.contacto-form__rotulo {
	position: absolute;
	top: 6.29px;
	left: 11.91px;

	/* Branco puro pela mesma razão do aviso de privacidade: sobre o petrol-mid
	   o `--s-text-paper` dá 3.88:1 e o branco 4.09, que é o tecto. */
	color: var(--s-text-on-media);
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 300;
	line-height: 1.214;
	pointer-events: none;
}

.contacto-form__entrada {
	display: block;
	width: 100%;
	height: 33.52px;
	padding: 6.29px 11.91px 0;

	border: 0;
	border-radius: 0;
	background: var(--s-bg-petrol-soft);
	color: var(--s-text);
	font-family: var(--font-body);
	font-size: var(--fs-small);
}

.contacto-form__entrada--area {
	height: 182.37px;
	padding-top: 22px;

	resize: vertical;
}

.contacto-form__entrada:focus {
	outline: 2px solid var(--s-text-paper);
	outline-offset: 2px;
}

/*
 * **Os campos levam `placeholder=" "` por causa desta regra.** O
 * `:placeholder-shown` só casa com um controlo que TENHA placeholder e esteja
 * vazio; sem o atributo o `:not()` é sempre verdadeiro e o rótulo ficava
 * invisível desde o carregamento. Foi o que aconteceu no dos eventos.
 */
.contacto-form__entrada:focus + .contacto-form__rotulo,
.contacto-form__campo:has(.contacto-form__entrada:not(:placeholder-shown)) .contacto-form__rotulo {
	opacity: 0;
}

/* A armadilha dos robôs: fora do ecrã, nunca `display: none`. */
.contacto-form__armadilha {
	position: absolute;
	left: -9999px;

	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ---------- Submeter ---------- */

.contacto-form__submeter {
	margin: var(--sp-4) 0 0;
}

.contacto-form__botao {
	display: block;
	width: 100%;
	padding: 10px;

	border: 0;
	background: var(--g-gold);
	color: var(--s-text);
	cursor: pointer;
	font-family: var(--font-display);
	font-size: 14px;
	font-weight: var(--fw-display);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.contacto-form__botao:hover,
.contacto-form__botao:focus-visible {
	filter: brightness(1.08);
}

.contacto-form__privacidade {
	margin-top: 4px;

	/* Branco puro e sem esbater: é o tecto do contraste sobre o petrol-mid.
	   O `--s-text-paper` a 85% dava 3.28:1 e a 100% dá 3.88; o branco dá
	   **4.09:1**, que é o máximo possível — para 4.5 fazia falta uma cor com
	   luminância 1.106 e o branco tem 1.000. O que falta é a cor da banda, e
	   isso é do desenho: ver a lista da designer. */
	color: var(--s-text-on-media);
}

/* ============================================================
   Desktop (1200px e acima)
   ============================================================ */

@media (min-width: 1200px) {

	/*
	 * A coluna tem os 576.31 do formulário dos eventos, centrada. Sem frame que
	 * mande, é o valor da peça irmã.
	 */
	.contacto-form__palco {
		max-width: 576.31px;
	}

	.contacto-form__titulo {
		margin-bottom: var(--sp-8);

		font-size: 32.86px;
		font-family: var(--font-title);
		font-weight: var(--fw-display);
		line-height: 0.7;
		color: var(--s-text-paper);
	}

	.contacto-form__campo {
		margin-bottom: 30.61px;
	}

	.contacto-form__entrada {
		height: 59.2px;
		padding: 22px 16px 0;
	}

	.contacto-form__entrada--area {
		height: 182.37px;
	}

	.contacto-form__rotulo {
		top: 14px;
		left: 16px;
	}
}