/**
 * Barra de busca e filtros da grade de salesianos.
 *
 * Arquivo próprio, carregado só por page-padres-salesianos.php. Fica fora do
 * modern.css porque é a única página do portal com grade de pessoas, e porque
 * assim a folha comum não precisa de bump de versão a cada ajuste daqui.
 *
 * Paleta herdada do modern.css, escrita em hexadecimal porque o tema ainda não
 * tem variáveis de cor: #0A2E63 azul escuro, #0B4DAD azul primário, #E23A2E
 * vermelho de acento, #5b6779 texto apagado, #e8edf5 fundo de campo.
 */

/* O cartão não declara display, então o hidden do navegador já bastaria. A regra
   fica explícita mesmo assim: é ela que segura o filtro de pé se um dia alguém
   der display ao .dbm-padre e derrubar o padrão do navegador sem perceber. */
.dbm-padre[hidden] {
	display: none;
}

/* ---------------------------------------------------------------- a barra */

.dbm-pbar {
	background: #fff;
	border: 1px solid rgba(11, 33, 57, .1);
	border-radius: 18px;
	padding: 1.15rem 1.25rem;
	margin: 2rem 0 1.2rem;
	box-shadow: 0 10px 26px rgba(18, 41, 74, .06);
}

.dbm-pbar__rotulo {
	display: block;
	font-weight: 800;
	font-size: .88rem;
	color: #0A2E63;
	margin: 0 0 .3rem;
}

.dbm-pbar__dica {
	margin: 0 0 .5rem;
	font-size: .82rem;
	color: #5b6779;
}

.dbm-pbar__linha {
	display: flex;
	gap: .7rem;
	align-items: stretch;
}

.dbm-pbar__campo {
	position: relative;
	display: flex;
	align-items: center;
	flex: 1 1 auto;
	min-width: 0;
	background: #f4f7fb;
	border: 2px solid #dce4ef;
	border-radius: 999px;
	transition: border-color .18s ease, background .18s ease;
}

.dbm-pbar__campo:focus-within {
	background: #fff;
	border-color: #0B4DAD;
}

.dbm-pbar__lupa {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	margin-left: 1.05rem;
	color: #5b6779;
}

.dbm-pbar__input {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 44px;
	padding: .55rem .8rem;
	border: 0;
	background: transparent;
	font: inherit;
	font-size: 1rem;
	color: #16233c;
	-webkit-appearance: none;
	appearance: none;
}

.dbm-pbar__input::placeholder {
	color: #8a94a6;
}

/* O foco fica no invólucro, que é quem tem a borda. Tirar o contorno do campo
   sem esse par seria apagar o foco de quem navega por teclado. */
.dbm-pbar__input:focus {
	outline: 0;
}

/* O X de apagar tem 44 por 44 de área de toque mesmo desenhando um risco de
   14px, que é o mínimo para o dedo no celular. */
.dbm-pbar__x {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-right: .2rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: #5b6779;
	cursor: pointer;
}

.dbm-pbar__x svg {
	width: 14px;
	height: 14px;
}

.dbm-pbar__x:hover {
	color: #C12811;
	background: rgba(193, 40, 17, .08);
}

.dbm-pbar__enviar {
	flex: 0 0 auto;
	min-height: 44px;
	padding: .55rem 1.4rem;
	border: 0;
	border-radius: 999px;
	background: #0B4DAD;
	color: #fff;
	font: inherit;
	font-weight: 800;
	font-size: .92rem;
	cursor: pointer;
}

.dbm-pbar__enviar:hover {
	background: #0A2E63;
}

/* Com JavaScript a lista já muda enquanto se digita, e o botão só recarregaria a
   mesma tela. A classe entra por script no topo do corpo, antes de a barra
   pintar, para o botão não aparecer e sumir na frente de quem olha. */
.dbm-js .dbm-pbar__enviar {
	display: none;
}

/* --------------------------------------------------------- os dois grupos */

.dbm-pbar__grupos {
	display: flex;
	flex-wrap: wrap;
	gap: 1.1rem 2.2rem;
	margin-top: 1rem;
	padding-top: 1rem;
	border-top: 1px solid #eef2f8;
}

.dbm-pgrupo__nome {
	display: block;
	font-size: .72rem;
	font-weight: 800;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: #8a94a6;
	margin-bottom: .5rem;
}

.dbm-pgrupo__pills {
	display: flex;
	flex-wrap: wrap;
	gap: .45rem;
}

.dbm-pfil {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	min-height: 44px;
	padding: .4rem .95rem;
	border: 1px solid #dce4ef;
	border-radius: 999px;
	background: #fff;
	color: #2b3445;
	font-size: .87rem;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	transition: border-color .18s ease, background .18s ease, color .18s ease;
}

.dbm-pfil:hover {
	border-color: #0B4DAD;
	color: #0B4DAD;
	text-decoration: none;
}

.dbm-pfil__n {
	display: inline-block;
	min-width: 1.5em;
	padding: .1rem .4rem;
	border-radius: 999px;
	background: #eef2f8;
	color: #5b6779;
	font-size: .74rem;
	font-weight: 800;
	text-align: center;
}

.dbm-pfil.esta-ativa {
	background: #0A2E63;
	border-color: #0A2E63;
	color: #fff;
}

.dbm-pfil.esta-ativa .dbm-pfil__n {
	background: rgba(255, 255, 255, .2);
	color: #fff;
}

/* Filtro que devolveria lista vazia continua clicável e continua no teclado, só
   fica apagado. Sumir com ele faria a barra dançar a cada tecla digitada.

   APAGADO POR COR DEFINIDA, E NÃO POR `opacity`. A regra era `opacity: .45` e
   isso derrubava o texto de 12,5:1 para 2,5:1 e o número de 5,11:1 para 1,83:1,
   medido pela mistura com o fundo. Controle apagado só fica de fora da regra de
   contraste quando ele está de fato desligado, e este continua clicável: quem
   quer trocar de recorte clica nele. Com cor no lugar da opacidade, o par mede
   5,44:1 e 5,11:1, e a pílula continua visivelmente mais fraca que as outras. */
.dbm-pfil.esta-vazia {
	background: #f7f9fc;
	border-color: #e7ecf4;
	color: #5b6779;
}

/* Foco visível. O modern.css não tem uma única regra de :focus-visible, então
   estes controles trazem a sua, senão quem navega por teclado se perde. */
.dbm-pbar__campo:focus-within,
.dbm-pfil:focus-visible,
.dbm-pbar__x:focus-visible,
.dbm-pbar__enviar:focus-visible,
.dbm-pconta__limpar:focus-visible,
.dbm-pvazio .dbm-btn:focus-visible {
	outline: 3px solid #E23A2E;
	outline-offset: 2px;
}

/* --------------------------------------------------- contagem e o vazio */

.dbm-pconta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .5rem 1rem;
	margin: 0 0 1.1rem;
}

.dbm-pconta__texto {
	margin: 0;
	font-size: .95rem;
	font-weight: 700;
	color: #0A2E63;
}

.dbm-pconta__limpar {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: #C12811;
	font-size: .88rem;
	font-weight: 700;
	text-decoration: underline;
}

.dbm-pconta__limpar:hover {
	color: #0A2E63;
}

.dbm-pvazio {
	margin: 2rem 0 1rem;
	padding: 2.2rem 1.4rem;
	border: 1px dashed #cfd9e8;
	border-radius: 18px;
	background: #f8fafd;
	text-align: center;
	color: #5b6779;
}

.dbm-pvazio__titulo {
	margin: 0 0 .4rem;
	font-size: 1.15rem;
	font-weight: 800;
	color: #0A2E63;
}

.dbm-pvazio p {
	margin: 0 0 1rem;
}

.dbm-pvazio .dbm-btn {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
}

/* Texto só para leitor de tela. Vai aqui e não herdado do núcleo do WordPress
   porque a classe do núcleo vem da folha de blocos, que qualquer plugin de
   desempenho pode desenfileirar, e aí o aviso apareceria escrito na tela. */
.dbm-pbar__so-leitor {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ------------------------------------------------------------- celular */

@media (max-width: 760px) {
	.dbm-pbar {
		padding: 1rem;
		margin-top: 1.2rem;
		border-radius: 14px;
	}

	/* Aperta o texto da pílula, não a altura: a área de toque continua nos 44px
	   e o que se ganha é uma linha a menos de barra antes do primeiro cartão. */
	.dbm-pfil {
		gap: .3rem;
		padding: .4rem .7rem;
		font-size: .8rem;
	}

	.dbm-pgrupo__pills {
		gap: .4rem;
	}

	/* Empilha e faz o botão ocupar a largura toda, senão em 390px ele espreme o
	   campo de busca a ponto de o texto digitado não caber. */
	.dbm-pbar__linha {
		flex-wrap: wrap;
	}

	.dbm-pbar__enviar {
		width: 100%;
	}

	.dbm-pbar__grupos {
		gap: 1rem 1.4rem;
	}

	.dbm-pgrupo {
		width: 100%;
	}
}