/* ==========================================================================
   Acessibilidade - eMAG 3.1 / WCAG 2.1 AA
   Prefeitura Municipal de Para de Minas

   Carregado DEPOIS de my.css: precisa vencer os !important de la
   (padding do page-header, opacity do overlay).
   Nao editar theme.css / theme-elements.css - sao do template Porto.
   ========================================================================== */


/* 1. ATALHOS DE NAVEGACAO (eMAG 1.5)
   Fora da tela ate receberem foco. Nao usar display:none nem
   visibility:hidden - os dois removem o elemento da ordem de tabulacao.
   -------------------------------------------------------------------------- */
.a11y-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 2000;
	background: #000;
	color: #FFF;
	padding: .6rem 1.2rem;
	font-size: 1rem;
	text-decoration: underline;
}

.a11y-skip:focus,
.a11y-skip:active {
	left: 0;
	color: #FFF;
	outline: 3px solid #FFEB3B;
	outline-offset: -3px;
}


/* 2. BARRA FIXA DE ACESSIBILIDADE
   Acima do cabecalho, acompanhando a rolagem. Fica fora do menu do topo:
   com os 5 links do cliente mais os icones sociais, os controles quebravam
   a linha e se separavam.

   O header do tema e sticky via JS, que escreve "top" inline em .header-body
   (theme.js:9886, stickySetTop = -15px). As regras abaixo compensam a altura
   da barra para os dois nao se sobreporem.
   -------------------------------------------------------------------------- */
:root {
	--a11y-barra-altura: 38px;
}

.pmpm-a11y-barra {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1041;
	height: var(--a11y-barra-altura);
	background: #212529;
	border-bottom: 1px solid rgba(255, 255, 255, .15);
}

.pmpm-a11y-barra .container {
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Empurra o site inteiro para baixo da barra */
body {
	padding-top: var(--a11y-barra-altura);
}

/* Cabecalho grudado encosta logo abaixo da barra.
   O tema usa stickySetTop -15px para esconder a faixa superior do header;
   com a barra fixa esse recuo faria o header invadi-la, entao e anulado. */
html.sticky-header-active #header .header-body {
	top: var(--a11y-barra-altura) !important;
}

/* Ancoras dos atalhos nao podem parar atras da barra */
html {
	scroll-padding-top: var(--a11y-barra-altura);
}


/* Controles dentro da barra
   -------------------------------------------------------------------------- */
.pmpm-a11y-grupo {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	white-space: nowrap;
}

.pmpm-a11y-grupo a,
.pmpm-a11y-grupo button {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	color: #FFF;
	background: transparent;
	border: 0;
	border-radius: 3px;
	font-family: inherit;
	font-size: .8rem;
	line-height: 1.4;
	padding: 4px 8px;
	cursor: pointer;
	white-space: nowrap;
	text-decoration: none;
}

.pmpm-a11y-grupo a:hover,
.pmpm-a11y-grupo button:hover {
	color: #FFF;
	background: rgba(255, 255, 255, .18);
	text-decoration: underline;
}

.pmpm-a11y-grupo a:focus,
.pmpm-a11y-grupo button:focus {
	outline: 2px solid #FFEB3B;
	outline-offset: 1px;
}

.pmpm-a11y-grupo button[aria-pressed="true"] {
	background: #FFEB3B;
	color: #212529;
}

/* A+ / A- / A: trio colado, sem icone - as letras ja dizem o que fazem */
.pmpm-a11y-fonte {
	display: inline-flex;
	margin-left: 6px;
	border: 1px solid rgba(255, 255, 255, .45);
	border-radius: 3px;
	overflow: hidden;
}

.pmpm-a11y-fonte button {
	gap: 0;
	border-radius: 0;
	border-left: 1px solid rgba(255, 255, 255, .45);
	padding: 4px 9px;
	font-weight: 600;
	min-width: 32px;
	justify-content: center;
}

.pmpm-a11y-fonte button:first-child {
	border-left: 0;
}

/* Demais links da barra superior do site: #999 sobre branco reprova em contraste */
#header .header-nav-top .nav > li > a {
	color: #5a5a5a;
}

/* No celular os rotulos nao cabem. Ficam so os icones - o texto continua
   disponivel para leitor de tela (clip, nunca display:none, que removeria
   do foco e da leitura). */
@media (max-width: 767px) {
	.pmpm-a11y-rotulo {
		position: absolute !important;
		width: 1px;
		height: 1px;
		padding: 0;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}

	.pmpm-a11y-grupo {
		flex-wrap: wrap;
		justify-content: center;
	}

	.pmpm-a11y-grupo a,
	.pmpm-a11y-grupo button {
		padding: 4px 9px;
		font-size: .9rem;
	}
}


/* 3. REDIMENSIONAMENTO DE TEXTO (A+ / A-)
   O tema ancora 135 regras em "em" no body (font-size:14px fixo) e 28 em
   "rem" no <html>. Converter o body para rem cria uma alavanca unica: mexer
   no font-size do <html> passa a mover os dois conjuntos.
   0.875rem x 16px = 14px -> identico ao visual atual no fator 1.
   -------------------------------------------------------------------------- */
body {
	font-size: .875rem !important;
	line-height: 1.857 !important;
}

/* Valores em px fixo do tema, convertidos para escalarem junto */
li {
	line-height: 1.714;
}

.page-header h1 {
	font-size: 1.875rem;
}

.page-header.page-header-modern h1 {
	font-size: 1.75rem;
}

.page-header.page-header-modern.page-header-background.page-header-background-md {
	padding: 6.25rem 0 !important;
}

/* Com fonte ampliada o menu horizontal aperta: reduz o respiro lateral */
html[data-fonte] #header .header-nav-main nav > ul > li > a {
	padding-left: .45rem;
	padding-right: .45rem;
}


/* 4. BREADCRUMB
   my.css zera o overlay escuro do page-header, entao o texto fica sobre a
   foto crua. A pilula opaca garante o contraste minimo de 4,5:1.
   -------------------------------------------------------------------------- */
.page-header .breadcrumb.breadcrumb-block {
	background: rgba(0, 0, 0, .72);
	padding: .5rem 1rem;
}

.page-header .breadcrumb.breadcrumb-light a {
	color: #FFF;
	text-decoration: underline;
}

.page-header .breadcrumb.breadcrumb-light .active {
	opacity: 1;
	font-weight: 600;
}


/* 5. FOCO VISIVEL EM TODO O SITE (WCAG 2.4.7)
   -------------------------------------------------------------------------- */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus,
[tabindex]:focus {
	outline: 2px solid #005fcc;
	outline-offset: 2px;
}

/* O salto dos atalhos manda foco para <div>/<nav>: nao desenhar contorno neles */
#conteudo:focus,
#menu:focus,
#footer:focus {
	outline: none;
}


/* 6. ALTO CONTRASTE (padrao gov.br: preto / branco / amarelo)
   Tudo escopado em html.contraste. O curinga com !important e o que permite
   vencer os style="" inline que o tema e o JS do Porto injetam.
   Nao usar filter:invert() no ancestral: filter cria containing block e
   descola o header sticky, alem de deixar as fotos em negativo.
   -------------------------------------------------------------------------- */
html.contraste,
html.contraste * {
	background-image: none !important;
	background-color: #000 !important;
	color: #FFF !important;
	border-color: #FFF !important;
	text-shadow: none !important;
	box-shadow: none !important;
}

html.contraste *::before,
html.contraste *::after {
	background: transparent !important;
	color: #FFF !important;
}

html.contraste a,
html.contraste a * {
	color: #FFFF00 !important;
	text-decoration: underline !important;
}

html.contraste a:hover,
html.contraste a:focus,
html.contraste a:hover *,
html.contraste a:focus * {
	color: #000 !important;
	background-color: #FFFF00 !important;
}

html.contraste button,
html.contraste .btn,
html.contraste input,
html.contraste select,
html.contraste textarea {
	background-color: #000 !important;
	color: #FFFF00 !important;
	border: 1px solid #FFFF00 !important;
}

html.contraste ::placeholder {
	color: #FFFF00 !important;
	opacity: 1 !important;
}

/* Imagens de conteudo continuam visiveis, sem inverter cores */
html.contraste img,
html.contraste video {
	filter: grayscale(100%) contrast(115%);
}

/* Logo precisa de fundo claro para nao sumir no preto */
html.contraste .header-logo img,
html.contraste .footer-logo img {
	background: #FFF !important;
	padding: 4px;
	filter: none;
}

/* Elementos puramente decorativos saem de cena */
html.contraste .parallax-background,
html.contraste .custom-circle,
html.contraste .custom-dots-rect-1,
html.contraste .custom-section-curved-top-1,
html.contraste .overlay:before {
	display: none !important;
}

html.contraste *:focus {
	outline: 3px solid #FFFF00 !important;
	outline-offset: 2px !important;
}

/* Botao de contraste ativo precisa se distinguir dentro do proprio modo */
html.contraste .pmpm-a11y-barra {
	border-bottom: 1px solid #FFFF00 !important;
}

html.contraste .pmpm-a11y-grupo button[aria-pressed="true"] {
	background: #FFFF00 !important;
	color: #000 !important;
}

html.contraste .pmpm-a11y-fonte,
html.contraste .pmpm-a11y-fonte button {
	border-color: #FFFF00 !important;
}