/* ==================================================== */
/* ACESSIBILIDADE - Câmara Municipal de Santa Fé do Sul */
/* ==================================================== */


/* ==================================== */
/* BOTÃO FLUTUANTE (lateral direita)    */
/* ==================================== */

.acessibilidade-fixed{
	position:fixed;
	right:15px;
	top:50%;
	transform:translateY(-50%);
	-webkit-transform:translateY(-50%);
	z-index:99999;
	width:48px;
}

.acessibilidade-fixed ul{
	list-style:none;
	margin:0;
	padding:0;
	display:block;
}

.acessibilidade-fixed li{
	position:relative;
	margin:0 0 12px;
}

.acessibilidade-fixed .acess-opcoes li:last-child{
	margin-bottom:0;
}

/* Botão principal e opções compartilham o formato redondo */
.acessibilidade-fixed .acess-btn{
	width:48px;
	height:48px;
	padding:0;
	background:#fff;
	border:0;
	border-radius:50%;
	display:block;
	position:relative;
	overflow:hidden;
	color:#27303f;
	box-shadow:0 3px 12px rgba(0,0,0,0.15);
	transition:all .3s ease;
	cursor:pointer;
	text-align:center;
	line-height:48px;
	font-size:16px;
	font-weight:700;
	font-family:'Open Sans', Arial, sans-serif;
}

.acessibilidade-fixed .acess-btn svg{
	width:24px;
	height:24px;
	fill:currentColor;
	vertical-align:middle;
	position:relative;
	z-index:2;
}

.acessibilidade-fixed .acess-btn span.rotulo{
	position:relative;
	z-index:2;
}

/* Preenchimento animado, no mesmo padrão dos ícones sociais */
.acessibilidade-fixed .acess-btn .filled{
	position:absolute;
	left:0;
	bottom:0;
	width:100%;
	height:0;
	background:#3D6589;
	transition:all .3s ease;
	z-index:1;
}

.acessibilidade-fixed .acess-btn:hover,
.acessibilidade-fixed .acess-btn:focus{
	color:#fff;
	outline:none;
}

.acessibilidade-fixed .acess-btn:hover .filled,
.acessibilidade-fixed .acess-btn:focus .filled{
	height:100%;
}

/* Botão que abre/fecha o menu */
.acessibilidade-fixed .acess-toggle{
	background:#3D6589;
	color:#fff;
	margin-bottom:0;
}

.acessibilidade-fixed .acess-toggle .filled{
	background:#27303f;
}

.acessibilidade-fixed.aberto .acess-toggle{
	background:#27303f;
}

/* Lista de opções: escondida até abrir.
   Fica em absolute e cresce para cima, assim o botão principal não sai
   de debaixo do cursor quando o menu abre. */
.acessibilidade-fixed .acess-opcoes{
	position:absolute;
	bottom:100%;
	right:0;
	width:48px;
	margin-bottom:12px;
	max-height:0;
	overflow:hidden;
	opacity:0;
	visibility:hidden;
	transition:max-height .35s ease, opacity .25s ease, visibility .25s;
}

.acessibilidade-fixed.aberto .acess-opcoes{
	max-height:400px;
	opacity:1;
	visibility:visible;
	overflow:visible;
}

.acessibilidade-fixed .acess-opcoes li{
	transform:translateX(20px);
	opacity:0;
	transition:all .3s ease;
}

.acessibilidade-fixed.aberto .acess-opcoes li{
	transform:translateX(0);
	opacity:1;
}

.acessibilidade-fixed.aberto .acess-opcoes li:nth-child(1){ transition-delay:.05s; }
.acessibilidade-fixed.aberto .acess-opcoes li:nth-child(2){ transition-delay:.10s; }
.acessibilidade-fixed.aberto .acess-opcoes li:nth-child(3){ transition-delay:.15s; }
.acessibilidade-fixed.aberto .acess-opcoes li:nth-child(4){ transition-delay:.20s; }
.acessibilidade-fixed.aberto .acess-opcoes li:nth-child(5){ transition-delay:.25s; }

/* Estado ativo (contraste ligado) */
.acessibilidade-fixed .acess-btn.ativo{
	background:#3D6589;
	color:#fff;
}

/* Tooltip à esquerda do botão */
.acessibilidade-fixed .tooltip-acess{
	position:absolute;
	right:60px;
	top:50%;
	transform:translateY(-50%);
	background:#000;
	color:#fff;
	padding:5px 10px;
	font-size:12px;
	font-weight:400;
	border-radius:4px;
	opacity:0;
	pointer-events:none;
	transition:all .3s;
	white-space:nowrap;
}

.acessibilidade-fixed li:hover .tooltip-acess{
	opacity:1;
}

/* Indicador do nível atual da fonte */
.acessibilidade-fixed .nivel-fonte{
	position:absolute;
	top:-2px;
	right:-2px;
	background:#c0392b;
	color:#fff;
	font-size:10px;
	font-weight:700;
	line-height:16px;
	min-width:16px;
	height:16px;
	border-radius:8px;
	padding:0 3px;
	z-index:3;
	display:none;
}

.acessibilidade-fixed .nivel-fonte.visivel{
	display:block;
}

@media (max-width:768px){
	.acessibilidade-fixed{
		right:10px;
		width:42px;
	}
	.acessibilidade-fixed .acess-opcoes{
		width:42px;
	}
	.acessibilidade-fixed .acess-btn{
		width:42px;
		height:42px;
		line-height:42px;
		font-size:14px;
	}
	.acessibilidade-fixed .acess-btn svg{
		width:20px;
		height:20px;
	}
	.acessibilidade-fixed li{
		margin-bottom:8px;
	}
	.acessibilidade-fixed .tooltip-acess{
		display:none;
	}
}

/* Telas baixas: o menu aberto ocupa ~300px acima do botão e sairia da tela */
@media (max-height:700px){
	.acessibilidade-fixed .acess-btn{
		width:42px;
		height:42px;
		line-height:42px;
		font-size:14px;
	}
	.acessibilidade-fixed .acess-btn svg{
		width:20px;
		height:20px;
	}
	.acessibilidade-fixed,
	.acessibilidade-fixed .acess-opcoes{
		width:42px;
	}
	.acessibilidade-fixed li{
		margin-bottom:8px;
	}
}

/* Muito baixas (celular deitado): abre para baixo a partir do topo */
@media (max-height:560px){
	.acessibilidade-fixed{
		top:70px;
		transform:none;
		-webkit-transform:none;
	}
	.acessibilidade-fixed .acess-opcoes{
		bottom:auto;
		top:100%;
		margin-bottom:0;
		margin-top:12px;
	}
}


/* ==================================== */
/* BOTÃO DE CONTRASTE NO CABEÇALHO      */
/* ==================================== */

/* A coluna da busca vira a referência do posicionamento */
#main-header #col-busca{
	position:relative;
}

/* Absoluto de propósito: fora do fluxo, o botão não aumenta
   a altura do cabeçalho nem empurra a logo. */
#btn-contraste-header{
	position:absolute;
	right:100%;
	top:50%;
	margin-top:-19px;
	margin-right:5px;
	white-space:nowrap;
	background:#27303f;
	border:1px solid #27303f;
	border-radius:19px;
	color:#fff;
	font-family:'Open Sans', Arial, sans-serif;
	font-size:13px;
	font-weight:600;
	line-height:20px;
	padding:8px 16px;
	cursor:pointer;
	transition:all .3s ease;
	z-index:10;
}

#btn-contraste-header svg{
	width:18px;
	height:18px;
	fill:currentColor;
	vertical-align:-4px;
	margin-right:6px;
}

#btn-contraste-header:hover,
#btn-contraste-header:focus{
	background:#3D6589;
	border-color:#3D6589;
	color:#fff;
	outline:none;
}

#btn-contraste-header.ativo{
	background:#ffd200;
	border-color:#ffd200;
	color:#27303f;
}

@media (max-width:991px){
	/* Sem espaço para o rótulo: vira um botão redondo só com o ícone */
	#btn-contraste-header{
		width:38px;
		height:38px;
		padding:0;
		line-height:36px;
		text-align:center;
		border-radius:50%;
	}
	#btn-contraste-header .rotulo{
		display:none;
	}
	#btn-contraste-header svg{
		margin-right:0;
		vertical-align:middle;
	}
}

@media (max-width:767px){
	#btn-contraste-header{
		display:none;
	}
}


/* ==================================== */
/* AJUSTE DE FONTE - PROTEÇÕES DE LAYOUT */
/* ==================================== */

/* Só entra em ação quando o usuário alterou o tamanho padrão */
html.fonte-ajustada body{
	overflow-x:hidden;
}

/* --- CABEÇALHO --- */

/* Altura fixa de 130px vira mínima, para o cabeçalho crescer com o texto */
html.fonte-ajustada #main-header{
	height:auto !important;
	min-height:130px;
}

/* ...sem perder o recolhimento do header fixo ao rolar a página */
html.fonte-ajustada .sticky-header-on .animate-header #main-header{
	height:0 !important;
	min-height:0;
	overflow:hidden;
}

/* --- MENU PRINCIPAL ---
   Os itens são células de tabela: não quebram para uma segunda linha, o
   texto é que quebra dentro da célula. Reduzir o respiro lateral e
   centralizar na vertical mantém a barra alinhada nesse caso. */
html.fonte-ajustada #navigation>li{
	vertical-align:middle;
}

html.fonte-ajustada #navigation>li>a,
html.fonte-ajustada #navigation>li>span{
	padding-left:6px;
	padding-right:6px;
	line-height:1.3;
}

html.fonte-ajustada #navigation>li.donate-button>a{
	white-space:normal;
}

/* Submenus: largura livre para o item não ser cortado */
html.fonte-ajustada #navigation li ul{
	min-width:220px;
	max-width:360px;
}

html.fonte-ajustada #navigation li ul li>a,
html.fonte-ajustada #navigation li ul li>span{
	white-space:normal;
	line-height:1.35;
}

/* --- BUSCA DO CABEÇALHO ---
   Campo, botão e o ícone sobreposto têm 35px casados entre si (o ícone é
   puxado por cima do input com top:-35px). Todos crescem juntos, senão
   desalinham. */
html.fonte-ajustada .newsletter-form>*,
html.fonte-ajustada .newsletter-form input[type="text"],
html.fonte-ajustada .newsletter-form input[type="submit"],
html.fonte-ajustada .newsletter-form .newsletter-submit .icons{
	height:44px;
	height:calc(21px + 23px * var(--fator-fonte, 1));
}

html.fonte-ajustada .newsletter-form input[type="submit"],
html.fonte-ajustada .newsletter-form .newsletter-submit .icons{
	width:46px;
	width:calc(18px + 22px * var(--fator-fonte, 1));
}

html.fonte-ajustada .newsletter-form .newsletter-submit .icons{
	top:-44px;
	top:calc(0px - (21px + 23px * var(--fator-fonte, 1)));
	margin-bottom:-44px;
	margin-bottom:calc(0px - (21px + 23px * var(--fator-fonte, 1)));
	padding-top:0;
	padding-left:0;
	text-align:center;
	line-height:44px;
	line-height:calc(21px + 23px * var(--fator-fonte, 1));
}

html.fonte-ajustada #content p,
html.fonte-ajustada #content li,
html.fonte-ajustada #content h1,
html.fonte-ajustada #content h2,
html.fonte-ajustada #content h3,
html.fonte-ajustada #content h4,
html.fonte-ajustada #content h5,
html.fonte-ajustada #content a,
html.fonte-ajustada #content td,
html.fonte-ajustada #footer p,
html.fonte-ajustada #footer li,
html.fonte-ajustada #footer a{
	word-wrap:break-word;
	overflow-wrap:break-word;
}

/* --- BOTÕES/BANNERS ABAIXO DO SLIDE ---
   Têm height:100px fixo. Se virassem height:auto puro, cada um ficaria de
   um tamanho e a grade perderia o alinhamento. Então a altura acompanha o
   fator escolhido (30px de respiro fixo + 70px de conteúdo que escala):
   continua uniforme em qualquer nível e o texto nunca é cortado.
   O height:auto fica como rede de segurança para textos maiores, e o
   min-height sem calc atende navegadores sem variáveis CSS. */
html.fonte-ajustada .banner-wrapper .banner{
	height:auto !important;
	min-height:100px;
	min-height:calc(30px + 70px * var(--fator-fonte, 1));
}

@media (max-width:768px){
	html.fonte-ajustada .banner-wrapper .banner{
		min-height:90px;
		min-height:calc(28px + 62px * var(--fator-fonte, 1));
	}
}

/* O h4 dentro do banner traz font-size inline; garante que quebre bem */
html.fonte-ajustada .banner-wrapper .banner h4{
	line-height:1.25;
	margin:0;
	width:100%;
}

/* Legenda sobre o slideshow da home */
html.fonte-ajustada #main_flex_3 .legenda,
html.fonte-ajustada #main_flex_4 .legenda{
	height:auto !important;
	min-height:75px;
	min-height:calc(15px + 60px * var(--fator-fonte, 1));
	padding-bottom:8px;
}

html.fonte-ajustada #main_flex_3 .legenda .texto,
html.fonte-ajustada #main_flex_4 .legenda .texto{
	width:auto !important;
	max-width:100%;
}

/* Selo de data das notícias/eventos */
html.fonte-ajustada .post-side-meta .date,
html.fonte-ajustada .event-info .date,
html.fonte-ajustada .event-meta-block{
	height:auto !important;
	min-height:60px;
	min-height:calc(20px + 40px * var(--fator-fonte, 1));
	padding-bottom:6px;
}

html.fonte-ajustada #content .btn,
html.fonte-ajustada #content .button,
html.fonte-ajustada #content .button-arrow{
	height:auto !important;
	white-space:normal;
}

html.fonte-ajustada #content .post-title,
html.fonte-ajustada #content .entry-title,
html.fonte-ajustada #content h4{
	line-height:1.35;
}

/* Tabelas largas ganham rolagem própria em vez de estourar a página */
html.fonte-ajustada #content table{
	max-width:100%;
}


/* ==================================== */
/* ALTO CONTRASTE                       */
/* ==================================== */

html.contraste-alto,
html.contraste-alto body{
	background:#000 !important;
	color:#fff !important;
}

html.contraste-alto body *{
	background-color:transparent !important;
	background-image:none !important;
	color:#fff !important;
	border-color:#ffd200 !important;
	box-shadow:none !important;
	text-shadow:none !important;
}

html.contraste-alto #main-header,
html.contraste-alto #lower-header,
html.contraste-alto #footer,
html.contraste-alto #main-footer,
html.contraste-alto #lower-footer,
html.contraste-alto .section,
html.contraste-alto .full-width-bg,
html.contraste-alto .gray-bg,
html.contraste-alto .sidebar,
html.contraste-alto .banner-wrapper{
	background:#000 !important;
}

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

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

html.contraste-alto h1,
html.contraste-alto h2,
html.contraste-alto h3,
html.contraste-alto h4,
html.contraste-alto h5,
html.contraste-alto h6{
	color:#ffd200 !important;
}

html.contraste-alto input,
html.contraste-alto textarea,
html.contraste-alto select{
	background:#000 !important;
	color:#fff !important;
	border:1px solid #ffd200 !important;
}

html.contraste-alto #navigation ul,
html.contraste-alto #navigation li ul{
	background:#000 !important;
	border:1px solid #ffd200 !important;
}

html.contraste-alto img,
html.contraste-alto iframe{
	filter:grayscale(100%) contrast(120%);
	-webkit-filter:grayscale(100%) contrast(120%);
}

/* O widget e o botão do header mantêm o próprio contraste */
html.contraste-alto .acessibilidade-fixed .acess-btn,
html.contraste-alto #btn-contraste-header{
	background:#ffd200 !important;
	color:#000 !important;
	border-color:#000 !important;
	text-decoration:none !important;
}

html.contraste-alto .acessibilidade-fixed .acess-btn *,
html.contraste-alto #btn-contraste-header *{
	color:#000 !important;
	fill:#000 !important;
}

html.contraste-alto .acessibilidade-fixed .acess-btn .filled{
	background:#000 !important;
}

html.contraste-alto .acessibilidade-fixed .acess-btn:hover,
html.contraste-alto .acessibilidade-fixed .acess-btn:focus,
html.contraste-alto #btn-contraste-header:hover,
html.contraste-alto #btn-contraste-header:focus{
	background:#000 !important;
	color:#ffd200 !important;
}

html.contraste-alto .acessibilidade-fixed .acess-btn:hover *,
html.contraste-alto .acessibilidade-fixed .acess-btn:focus *,
html.contraste-alto #btn-contraste-header:hover *,
html.contraste-alto #btn-contraste-header:focus *{
	color:#ffd200 !important;
	fill:#ffd200 !important;
}

html.contraste-alto .acessibilidade-fixed .tooltip-acess{
	background:#ffd200 !important;
	color:#000 !important;
}


/* ==================================== */
/* MAPA DO SITE                         */
/* ==================================== */

.mapa-do-site{
	padding-bottom:20px;
}

.mapa-do-site .mapa-bloco{
	margin-bottom:30px;
}

.mapa-do-site .mapa-bloco > h3{
	font-size:18px;
	color:#3D6589;
	border-bottom:2px solid #e3e6ec;
	padding-bottom:8px;
	margin:0 0 12px;
}

.mapa-do-site ul{
	list-style:none;
	margin:0;
	padding:0;
}

.mapa-do-site ul li{
	padding:4px 0 4px 18px;
	position:relative;
	font-size:14px;
	line-height:20px;
}

.mapa-do-site ul li:before{
	content:"\203A";
	position:absolute;
	left:4px;
	top:3px;
	color:#3D6589;
	font-size:16px;
	line-height:20px;
}

.mapa-do-site ul ul{
	margin-top:4px;
	border-left:1px dotted #c9cfda;
	margin-left:2px;
}

.mapa-do-site ul li a{
	color:#27303f;
}

.mapa-do-site ul li a:hover{
	color:#3D6589;
	text-decoration:underline;
}


/* ==================================== */
/* PERGUNTAS FREQUENTES (FAQs)          */
/* ==================================== */

.faqs-pagina{
	padding-bottom:20px;
}

.faqs-pagina > p{
	font-size:14px;
	line-height:22px;
}

.faqs-pagina .faqs-grupo{
	font-size:18px;
	color:#3D6589;
	border-bottom:2px solid #e3e6ec;
	padding-bottom:8px;
	margin:35px 0 15px;
}

.faqs-pagina .faqs-grupo:first-of-type{
	margin-top:20px;
}

.faqs-pagina .accordion-header h6{
	font-size:14px;
	line-height:20px;
	padding-right:5px;
}

.faqs-pagina .accordion-header:focus{
	outline:2px solid #ffd200;
	outline-offset:2px;
}

.faqs-pagina .accordion-content p{
	font-size:14px;
	line-height:22px;
	margin:0 0 10px;
}

.faqs-pagina .accordion-content p:last-child{
	margin-bottom:0;
}

.faqs-pagina .accordion-content a{
	color:#3D6589;
	text-decoration:underline;
}

/* Alto contraste: o accordion perde os fundos, entao usamos bordas */
html.contraste-alto .faqs-pagina .accordion-header{
	border:2px solid #ffd200 !important;
}

html.contraste-alto .faqs-pagina .accordion-content{
	border:1px dotted #ffd200 !important;
}


/* Link "pular para o conteúdo" - visível apenas ao receber foco */
.pular-link{
	position:absolute;
	left:-9999px;
	top:0;
	background:#ffd200;
	color:#27303f !important;
	padding:8px 15px;
	z-index:100000;
}

.pular-link:focus{
	left:0;
}