/*
Theme Name: LabP2
Theme URI: https://labp2.direito.ufmg.br
Author: Laboratório de Tecnologias Públicas para o Setor Público - UFMG
Description: Tema filho do Twenty Twenty-Five para o site do LabP2, com a identidade visual institucional da UFMG. Mantém as customizações do laboratório separadas do tema pai, de modo que atualizações do Twenty Twenty-Five não as sobrescrevam.
Template: twentytwentyfive
Version: 1.1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: labp2
*/

/* ==========================================================================
   Acessibilidade — base
   ========================================================================== */

/* O tema pai aplica o contorno em :focus, o que também atinge quem clica com
   o mouse. Aqui o anel aparece só na navegação por teclado. */
:where(.wp-site-blocks *:focus:not(:focus-visible)) {
	outline: none;
}

:where(.wp-site-blocks *:focus-visible) {
	outline: 3px solid var(--wp--preset--color--brand);
	outline-offset: 2px;
}

/* Sobre fundo escuro o azul não contrasta o bastante; usa a cor do próprio texto. */
:where( .has-contrast-background-color, .has-brand-dark-background-color )
	:where( *:focus-visible ) {
	outline-color: currentColor;
}

/* Evita o atraso de 300ms e o zoom por toque duplo em controles. */
a,
button,
.wp-block-button__link,
.wp-block-navigation-item__content {
	touch-action: manipulation;
}

@media ( prefers-reduced-motion: reduce ) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ==========================================================================
   Cabeçalho institucional
   --------------------------------------------------------------------------
   Reproduz a estrutura do padrão da UFMG: uma barra escura com marca, atalhos
   de acessibilidade e busca, e abaixo dela a barra de menu. As duas usam o
   mesmo azul, separadas por um filete mais escuro.
   ========================================================================== */

.labp2-cabecalho {
	--labp2-navy: #131e30;
	--labp2-navy-escuro: #0b121c;
	--labp2-navy-claro: #1d2c44;
	--labp2-largura: 1480px;
	background-color: var( --labp2-navy );
	color: #fff;
}

.labp2-topo {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 24px 32px;
	max-width: var( --labp2-largura );
	margin: 0 auto;
	padding: 14px 24px;
}

.labp2-topo__interno {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 24px 48px;
}

/* --- marca ---------------------------------------------------------------- */

.labp2-marca {
	display: flex;
	align-items: center;
	gap: 16px;
	color: #fff;
	text-decoration: none;
}

/* O nome do laboratório aparece em texto ao lado, então o símbolo é
   decorativo e entra por CSS, sem alt redundante para leitores de tela. */
.labp2-marca__simbolo {
	flex: none;
	width: 109px;
	height: 44px;
	background: url( assets/img/labp2-branco.png ) no-repeat center / contain;
}

.labp2-marca__nome {
	font-family: var( --wp--preset--font-family--corpo );
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.3;
}

.labp2-marca__sep {
	font-weight: 400;
	opacity: 0.55;
}

.labp2-marca:hover .labp2-marca__nome {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* --- atalhos de acessibilidade -------------------------------------------- */

.labp2-acessibilidade__lista {
	display: flex;
	align-items: flex-start;
	gap: 32px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.labp2-acesso {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	min-width: 44px;
	min-height: 44px;
	padding: 2px 4px;
	background: none;
	border: 0;
	color: #fff;
	font-family: var( --wp--preset--font-family--corpo );
	font-size: 0.8125rem;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}

.labp2-acesso--somente-texto {
	justify-content: center;
}

.labp2-acesso:hover .labp2-acesso__rotulo {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.labp2-contraste[aria-pressed='true'] .labp2-acesso__rotulo::after {
	content: ' (ativo)';
}

/* --- busca ---------------------------------------------------------------- */

.labp2-busca {
	flex: 1 1 260px;
	max-width: 420px;
}

.labp2-busca .wp-block-search__inside-wrapper {
	background: #fff;
	border: 0;
	border-radius: 999px;
	padding: 4px 6px 4px 20px;
}

.labp2-busca .wp-block-search__input {
	background: transparent;
	border: 0;
	color: #1a1e29;
	font-size: 1rem;
	padding: 8px 0;
}

.labp2-busca .wp-block-search__input::placeholder {
	color: #6b7280;
	opacity: 1;
}

.labp2-busca .wp-block-search__button {
	background: transparent;
	border: 0;
	color: #131e30;
	min-width: 44px;
	min-height: 44px;
	padding: 0;
}

/* --- barra de menu -------------------------------------------------------- */

.labp2-menu {
	border-top: 1px solid var( --labp2-navy-escuro );
}

.labp2-menu .wp-block-navigation {
	max-width: var( --labp2-largura );
	margin: 0 auto;
	padding: 0 24px;
}

.labp2-menu .wp-block-navigation-item__content {
	display: flex;
	align-items: center;
	min-height: 48px;
	padding: 0 18px;
	color: #fff;
	font-size: 0.9375rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
}

.labp2-menu .wp-block-navigation-item:hover > .wp-block-navigation-item__content,
.labp2-menu .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content {
	background-color: var( --labp2-navy-claro );
}

/* Em telas estreitas o bloco de navegação vira sobreposição; a barra some. */
@media ( max-width: 781px ) {
	.labp2-menu {
		border-top: 0;
		padding: 4px 12px;
	}

	.labp2-topo {
		justify-content: center;
		text-align: center;
	}

	.labp2-topo__interno {
		flex-direction: column;
		gap: 16px;
	}

	.labp2-busca {
		max-width: none;
		width: 100%;
	}
}

/* ==========================================================================
   Rodapé institucional
   ========================================================================== */

.labp2-realizacao {
	background: #fff;
	padding: 40px 24px 48px;
	text-align: center;
}

.labp2-realizacao__titulo {
	margin: 0 0 32px;
	color: #1a1e29;
	font-family: var( --wp--preset--font-family--corpo );
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.labp2-realizacao__logos {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 32px 64px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.labp2-realizacao__logos img {
	display: block;
	width: auto;
	height: 56px;
}

.labp2-rodape__creditos {
	background: var( --wp--preset--color--contrast );
	color: #fff;
	padding: 40px 24px 48px;
	text-align: center;
}

.labp2-rodape__nome {
	margin: 0 0 12px;
	font-size: 0.9375rem;
	font-weight: 700;
}

.labp2-rodape__linha {
	margin: 0 0 6px;
	font-size: 0.875rem;
	opacity: 0.85;
}

/* ==========================================================================
   Alto contraste
   --------------------------------------------------------------------------
   Preto e branco a 21:1, links em amarelo a 19,6:1. Imagens de fundo saem de
   cena: elas carregam texto por cima e, sem removê-las, o contraste do texto
   volta a depender da foto.
   ========================================================================== */

:root[data-contraste='alto'] {
	color-scheme: dark;
}

:root[data-contraste='alto'] body,
:root[data-contraste='alto'] .wp-site-blocks *:not( svg ):not( path ):not( img ) {
	background-color: #000 !important;
	background-image: none !important;
	color: #fff !important;
	border-color: #fff !important;
	box-shadow: none !important;
}

:root[data-contraste='alto'] a,
:root[data-contraste='alto'] a * {
	color: #ff0 !important;
	text-decoration: underline !important;
}

:root[data-contraste='alto'] button,
:root[data-contraste='alto'] .wp-block-button__link,
:root[data-contraste='alto'] input,
:root[data-contraste='alto'] select {
	color: #ff0 !important;
	border: 2px solid #ff0 !important;
}

:root[data-contraste='alto'] .wp-block-cover__image-background,
:root[data-contraste='alto'] .wp-block-cover__background,
:root[data-contraste='alto'] .wp-block-cover video.wp-block-cover__video-background {
	display: none !important;
}

:root[data-contraste='alto'] .wp-block-cover {
	min-height: 0 !important;
}

:root[data-contraste='alto'] :where( *:focus-visible ) {
	outline: 3px solid #ff0 !important;
	outline-offset: 2px;
}

:root[data-contraste='alto'] img {
	filter: grayscale( 1 ) contrast( 1.15 );
}

/* ==========================================================================
   Atalhos de teclado
   --------------------------------------------------------------------------
   Ficam fora da tela até receberem foco. Não usam display:none nem
   visibility:hidden, que os retirariam da ordem de tabulação e os tornariam
   inalcançáveis justamente por quem depende deles.
   ========================================================================== */

.labp2-atalho {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100000;
	padding: 12px 20px;
	background: #fff;
	color: #131e30;
	font-family: var( --wp--preset--font-family--corpo );
	font-size: 0.9375rem;
	font-weight: 600;
	text-decoration: underline;
}

.labp2-atalho:focus {
	left: 0;
}

/* O alvo de um atalho recebe foco por script do navegador, não por tabulação:
   o contorno aqui só poluiria a tela. */
.labp2-busca:focus,
.labp2-rodape:focus,
#labp2-menu:focus {
	outline: none;
}

/* --------------------------------------------------------------------------
   Menu: itens agrupados à esquerda, alinhados com a marca.
   O bloco de navegação distribui os itens com space-between por padrão, o que
   abria um vão no meio da barra.
   -------------------------------------------------------------------------- */

.labp2-menu .wp-block-navigation__container {
	justify-content: flex-start;
	gap: 0;
}

.labp2-menu .wp-block-navigation {
	justify-content: flex-start;
}

/* Os ícones de redes sociais herdados do menu ficam agrupados no fim da barra,
   separados dos itens de conteúdo. */
.labp2-menu .wp-block-navigation-item.wp-block-social-links,
.labp2-menu .wp-block-social-links {
	margin-left: auto;
}

/* Ícones sociais dentro da barra de menu: monocromáticos em branco. Nas cores
   de marca o do GitHub, quase preto, some sobre o azul-escuro da barra.
   O seletor precisa de quatro classes para superar a regra do próprio bloco
   (.wp-block-social-links.is-style-logos-only .wp-social-link-<serviço>). */
.labp2-menu .wp-block-social-links.is-style-logos-only .wp-social-link,
.labp2-menu .wp-block-social-links .wp-social-link {
	color: #fff;
	background-color: transparent;
}

/* O brasão da FDUFMG é quadrado e cheio de texto miúdo; na mesma altura dos
   outros dois fica ilegível. */
.labp2-realizacao__logos img[alt*='Faculdade'] {
	height: 84px;
}

/* ==========================================================================
   Banner da capa
   --------------------------------------------------------------------------
   A aquarela do banner é clara, mas cheia de manchas de meio-tom: o texto
   escuro do bloco de capa passa por cima de morro, nuvem e galho, e o subtítulo
   e o botão vazado ficam com contraste irregular. Em vez de escurecer a imagem
   inteira — que apagaria a aquarela — o texto ganha um véu branco difuso atrás
   de si, sem borda visível, e o botão vazado passa a ter fundo próprio.
   ========================================================================== */

.wp-block-cover.is-light:has( .wp-block-cover__image-background )
	.wp-block-cover__inner-container {
	position: relative;
	/* O bloco de capa só dá z-index ao contêiner interno quando não há camada
	   de sobreposição; aqui há, então o contexto de empilhamento é criado à
	   mão — sem ele o véu, com z-index negativo, cairia atrás da imagem. */
	isolation: isolate;
}

.wp-block-cover.is-light:has( .wp-block-cover__image-background )
	.wp-block-cover__inner-container::before {
	content: '';
	position: absolute;
	inset: -6% -4%;
	z-index: -1;
	background: radial-gradient(
		ellipse at center,
		rgba( 255, 255, 255, 0.94 ) 0%,
		rgba( 255, 255, 255, 0.9 ) 45%,
		rgba( 255, 255, 255, 0 ) 78%
	);
	pointer-events: none;
}

/* O subtítulo vem em corpo médio e cinza-escuro por herança; sobre a imagem
   ele precisa do azul-marinho cheio para separar-se do fundo. */
.wp-block-cover.is-light:has( .wp-block-cover__image-background )
	.wp-block-cover__inner-container p {
	color: var( --wp--preset--color--contrast );
}

/* Botão vazado: o filete preto sobre a aquarela quase desaparece. Ganha fundo
   branco e traço na cor de marca, mantendo a hierarquia em relação ao botão
   preenchido ao lado. */
.wp-block-cover.is-light:has( .wp-block-cover__image-background )
	.wp-block-button.is-style-outline .wp-block-button__link {
	background-color: rgba( 255, 255, 255, 0.92 );
	border-color: var( --wp--preset--color--brand-strong );
	border-width: 2px;
	color: var( --wp--preset--color--brand-strong );
}

.wp-block-cover.is-light:has( .wp-block-cover__image-background )
	.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-cover.is-light:has( .wp-block-cover__image-background )
	.wp-block-button.is-style-outline .wp-block-button__link:focus-visible {
	background-color: var( --wp--preset--color--brand-strong );
	color: #fff;
}

/* --------------------------------------------------------------------------
   Legenda da imagem do banner
   Crédito discreto logo abaixo da capa. Fora da imagem o texto tem fundo
   branco firme, então dispensa halo e pode ser um grafite claro — a 7,5:1
   sobre branco, acima do mínimo da WCAG AA para texto pequeno.
   -------------------------------------------------------------------------- */

.labp2-legenda-banner {
	margin: 8px 0 0;
	padding-inline: var( --wp--style--root--padding-right, 24px );
	color: #4f555b;
	font-size: 0.75rem;
	line-height: 1.4;
	letter-spacing: 0.01em;
	text-align: right;
}

:root[data-contraste='alto'] .labp2-legenda-banner {
	text-align: center;
}