/* ==========================================================================
   FORMULÁRIOS — campos de texto e formulário de busca
   ==========================================================================

   O QUE CONTROLA
   - Campos de texto, e-mail, área de texto (ex.: comentários).
   - BUSCA: o formulário "campo + botão Buscar" usado no topo, no menu do
     celular, na página de busca e na página 404 (searchform.php).

   Os campos têm 16 px de fonte no celular: menos que isso faz o iPhone
   aplicar zoom automático ao tocar no campo.
   ========================================================================== */

input[type="text"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="password"],
textarea {
	width: 100%;
	min-height: 48px;
	padding: 0.75rem 1rem;
	border: 1.5px solid var(--cor-linha);
	border-radius: var(--raio-medio);
	background: var(--cor-branco);
	font-size: 1rem;
	color: var(--cor-texto);
	transition: border-color var(--transicao);
}

input:hover,
textarea:hover {
	border-color: #CFCABE;
}

input:focus,
textarea:focus {
	outline: none;
	border-color: var(--cor-primaria);
	box-shadow: 0 0 0 3px var(--cor-verde-claro);
}

label {
	font-weight: var(--peso-medio);
}

/* --------------------------------------------------------------------------
   BUSCA
   -------------------------------------------------------------------------- */
.formulario-busca {
	display: flex;
	align-items: stretch;
	gap: var(--espaco-2);
	width: 100%;
}

.formulario-busca__campo {
	flex: 1 1 auto;
	min-width: 0;
	border-radius: var(--raio-pilula) !important; /* Sobrepõe estilos de campos de alguns plugins. */
	padding-inline: 1.125rem;
}

.formulario-busca__campo::-webkit-search-cancel-button {
	cursor: pointer;
}

.formulario-busca__botao {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--espaco-2);
	flex: 0 0 auto;
	min-width: 48px;
	min-height: 48px;
	padding: 0 1rem;
	border: 0;
	border-radius: var(--raio-pilula);
	background: var(--cor-primaria);
	color: var(--cor-sobre-primaria);
	font-weight: var(--peso-semi);
	transition: background-color var(--transicao);
}

.formulario-busca__botao:hover {
	background: var(--cor-primaria-hover);
}

/* No celular, o botão mostra só a lupa (o texto continua para leitores de tela). */
@media (max-width: 479px) {
	.formulario-busca__texto {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.formulario-busca__botao {
		padding: 0;
	}
}