/*
Theme Name: Plano de Governo - Prefeitura de Jundiaí 5.0
Theme URI: https://jundiai.sp.gov.br/planodegoverno/
Author: CIJUN
Author URI: https://cijun.sp.gov.br/
Template: prefeituradejundiai-capa-5.0
Description: Prestação de contas do Plano de Governo da Prefeitura de Jundiaí;
Version: 5.0
*/

/* tabela de cores */
/*
azul gestão		#003371
turquesa		#00a898
verde			#70be43
amarelo			#ffdd00
laranja			#faa518
magenta			#b41d8d
ciano			#00b9f1
azul			#0474bc
*/

/* paleta original */
/*
azul 			#7fc5da
verde 			#A8D59D
vermelha 		#EA9999
amarela			#ffe9a7
*/

/* ----- PAGINAÇÃO -------------------------------------------------------------- */

.paginacao span,
.paginacao a {
    font-weight: 600;
}

.paginacao a:link,
.paginacao a:hover,
.paginacao a:visited,
.paginacao a:active {
	text-decoration: none !important;
}

.paginacao a:hover {
	background: #003371;
}

/* ----- MENU LATERAL ----------------------------------------------------------- */

#botao-menu-lateral,
.menu-lateral-container {
	background: #EEE;
}

#botao-menu-lateral {
	color: #000;
	border-bottom: 1px solid #DDD;
	width: 100%;
	padding: 10px;
	display: block;
	text-decoration: none;
}

#botao-menu-lateral .seta-menu-lateral {
	background-image: url('https://src.cijun.sp.gov.br/img/icones-setas/seta-menu-20x20-baixo.png');
	background-position: left right;
	background-repeat: no-repeat;
	padding-left: 25px;
}

.menu-lateral-container {
	width: 100%;
	clear: both;
	display: none;
}

#menu-lateral {
	height: auto;
	list-style: none;
    margin: 0;
}

#menu-lateral a {
	display: block;
	padding: 10px;
}

#menu-lateral a:link,
#menu-lateral a:visited {
	color: #000;
	border-bottom: 1px solid #DDD;
	text-decoration: none;
}

#menu-lateral a:hover,
#menu-lateral a:active {
	background-color: #555;
	color: #FFF;
	text-decoration: none;
}

#menu-lateral li {
	border-bottom: 1px solid #DDD;
	display: inline;
}

#menu-lateral li ul a { /* sub-item */
	padding-left: 20px;
}

#menu-lateral li ul ul a { /* sub do sub-item */
	display: none;
}

#menu-lateral .status {
	padding: 0 10px;
	border-radius: 3px;
}

@media only screen and (min-width: 960px) {

	#botao-menu-lateral {
		display: none;
	}

	.menu-lateral-container {
		display: block;
	}

	#menu-lateral li:first-child {
		display: block;
		border-bottom: none;
	}

	#menu-lateral li ul { /* segundo nivel */
		background: #EEE;
		width: 240px;
		margin: -40px 0 0 230px;
		position: absolute;
		left: -999em;
		z-index: 9999;

		-webkit-box-shadow: 0px 5px 5px rgba(0,0,0,0.2);
		-moz-box-shadow:    0px 5px 5px rgba(0,0,0,0.2);
		-ms-box-shadow:     0px 5px 5px rgba(0,0,0,0.2);
		-o-box-shadow:      0px 5px 5px rgba(0,0,0,0.2);
		box-shadow:         0px 5px 5px rgba(0,0,0,0.2);
	}

	/* nao alterar! */
	#menu-lateral li:hover ul ul, #menu-lateral li:hover ul ul ul, #menu-lateral li.sfhover ul ul, #menu-lateral li.sfhover ul ul ul {left: -999em;}
	#menu-lateral li:hover ul, #menu-lateral li li:hover ul, #menu-lateral li li li:hover ul, #menu-lateral li.sfhover ul, #menu-lateral li li.sfhover ul, #menu-lateral li li li.sfhover ul {left: auto;}
	#menu-lateral li:hover, #menu-lateral li.sfhover	{position: static;}
	
	#menu-lateral li ul a,
	#menu-lateral li ul ul a,
	#menu-lateral li ul ul ul a {
		padding-left: 10px;
	}

	/* setas para indicar que o item tem sub-itens */

	#menu-lateral li > a {
		background-image: url(images/seta-direita.png);
		background-position: center right;
		background-repeat: no-repeat;
		padding-right: 20px;
	}

	#menu-lateral li > a:only-child {
		background-image: none;
	}

}

@media only screen and (min-width: 1024px) {

	#menu-lateral li ul {
		margin-left: 240px;
	}

}

@media only screen and (min-width: 1280px) {

	#menu-lateral li ul {
		width: 260px;
		margin-left: 280px;
	}

	#menu-lateral li ul  ul{
		margin-left: 250px;
	}

}

/* ----- 404 -------------------------------------------------------------------- */

#pagina-404 {
	width: 100%;
	float: none;
}

/* ----- SIDEBAR ---------------------------------------------------------------- */

@media only screen and (min-width: 960px) {

	#sidebar {
		width: 25%;
		float: left;
	}

	.pagina {
		width: 70%;
		float: right;
	}

}

/* ----- INICIATIVA (SINGLE) ---------------------------------------------------- */

.home h2 {
	font-size: 26px;
}

.home-titulo {
	margin-top: 0 !important;
	margin-bottom: 1em !important;
	font-size: 38px;
	font-weight: 600;
	text-align: center;
	text-transform: uppercase;
}

.pagina-titulo {
	margin-top: 0 !important;
	margin-bottom: 1em !important;
	font-size: 24px;
}

.categoria-titulo {
	color: #555;
	border-bottom: 1px solid #aaa;
	margin-top: 2em !important;
	margin-bottom: 1em !important;
	padding-bottom: 0.3em;
	font-size: 18px;
	fontt-weight: bold;
}

.categoria-lista-single {
	margin-bottom: 2em !important;
}

.single #ju,
.single div[buttonsquantity] {
	display: none;
}

/* ----- LISTA DE ÁREAS --------------------------------------------------------- */

#botao-todas-as-iniciativas,
#botao-baixar-relatorio,
#lista-iniciativas-home li a {
	background: #003371;
	color: #fff;
	border-radius: 4px;
	width: auto;
	padding: 20px;
	display: block;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
}

#botao-todas-as-iniciativas,
#botao-baixar-relatorio {
	max-width: 540px;
	margin: 20px auto;
}

#lista-iniciativas-home {
	margin: 40px auto;
	list-style: none;
	display: grid;
	gap: 30px;
	grid-template-columns: repeat(1, 1fr);
}

#lista-iniciativas-home li {
	background: #003371;
	border-radius: 4px;
	padding-bottom: 20px;
	display: table;
	position: relative;
	overflow: hidden;
}

#lista-iniciativas-home li a {
	display: table-cell;
	width: 100%;
	height: 100%;
	vertical-align: middle;
}

.categoria-status {
	background: #003371;
	color: #fff;
	border-bottom-radius: 4px;
	width: 100%;
	height: 25px;
	position: absolute;
	bottom: 0;
	left: 0;
	overflow: hidden;
}

.categoria-label {
	color: #000;
	display: inline-block;
	margin: auto;
	height: 20px;
	font-size: 9px;
	text-align: center;
	width: 100%;
}

/* paleta original */
/*
verde 			#A8D59D
azul 			#7fc5da
amarela			#ffe9a7
vermelha 		#EA9999
*/

#lista-iniciativas-home .categoria-status-barra {
	display: inline-block;
}

#lista-iniciativas-home .categoria-entregue {
	background: #A8D59D;
}

#lista-iniciativas-home .categoria-emandamento {
	background: #7fc5da;
}

#lista-iniciativas-home .categoria-paralizada {
	background: #ffe9a7;
}

#lista-iniciativas-home .categoria-naoiniciada {
	background: #EA9999;
}

@media only screen and (min-width: 600px) {
	
	#lista-iniciativas-home {
		display: grid;
		gap: 30px;
		grid-template-columns: repeat(2, 1fr);
	}

	#lista-iniciativas-home li {
		width: 100%;
	}

}

@media only screen and (min-width: 800px) {

	#lista-iniciativas-home {
		grid-template-columns: repeat(3, 1fr);
	}

}

@media only screen and (min-width: 1024px) {

	#lista-iniciativas-home {
		grid-template-columns: repeat(4, 1fr);
	}

}

@media only screen and (min-width: 1280px) {

	.page-plano-de-governo-2017-2020 #lista-iniciativas-home {
		grid-template-columns: repeat(5, 1fr);
	}

}

@media only screen and (min-width: 1440px) {

	.page-plano-de-governo-2017-2020 #lista-iniciativas-home {
		grid-template-columns: repeat(6, 1fr);
	}

}

/* ----- LISTA DE INICIATIVAS ----------------------------------------------------- */

.categoria-lista {
	font-size: 14px;
	font-weight: 600;
}

.status-lista {
	margin: 0 0 0.3em;
}

.status-lista .status {
	background: #eee;
	border-radius: 3px;
	padding: 1px 3px;
	font-size: 11px;
}

.contraste .status-lista .status {
	color: #000;
}

.pagina .status-lista {
	margin-bottom: 20px;
}

/* imagens */

.categoria-imagem,
.aligncenter {
	max-width: 100%;
	height: auto;
	margin: auto;
	display: block;
}

/* ----- CORES DOS STATUS --------------------------------------------------------- */

#menu-lateral .menu-em-andamento .status,
.status-lista .status-em-andamento { /* azul*/
	background: #7fc5da;
}

#menu-lateral .menu-entregue .status,
.status-lista .status-entregue { /* verde */
	background: #A8D59D;
}

#menu-lateral .menu-nao-iniciada .status,
.status-lista .status-nao-iniciada { /*vermelho */
	background: #EA9999;
}

#menu-lateral .menu-paralisada .status,
.status-lista .status-paralisada { /* amarelo */
	background: #ffe9a7;
}

/* ----- LIGHTBOX ----------------------------------------------------------------- */

#fancybox-wrap {
	max-width: 870px;
	left: 50% !important;
	transform: translateX(-50%);
}

#fancybox-content {
	max-width: 850px;
	box-shadow: 0 0 20px #111;
}

.contraste #fancybox-content {
	background: #222 !important;
	border-color: #222 !important;
}

#fancybox-outer {
	background: transparent !important;
	box-shadow: none !important;
}

#fancybox-next {
	right: 0 !important;
}


/* ----- POSTS RELACIONADOS ----------------------------------------------------- */

.widget-titulo {
	color: #003371;
	border-bottom: 2px solid #003371;
	padding-bottom: 3px;
	margin-bottom: 0.5em;
	font-size: 18px;
	font-weight: 600;
	text-transform: uppercase;
}

.contraste .widget-titulo {
	color: #fff;
}

#posts-relacionados {
	margin-top: 80px;
	margin-bottom: 40px;
}

.posts-relacionados-lista {
	margin: 0;
	list-style: none;
}

.posts-relacionados-lista li {
	padding-right: 20px;
	margin-bottom: 0.5em;
}

.posts-relacionados-lista li:before {
	content: "" !important;
}

.posts-relacionados-lista .data-lista {
	color: #666;
	display: inline;
	font-size: 13px;
}

.contraste .posts-relacionados-lista .data-lista {
	color: #fff;
}

.posts-relacionados-lista .attachment-cijun-destaque {
	display: none;
}

#posts-relacionados .leia-mais {
	background: #003371;
	color: #fff;
	margin: 20px 0 60px;
	padding: 5px 8px;
	display: inline-block;
	float: right;
	clear: both;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	text-transform: uppercase;
}

.contraste #posts-relacionados .leia-mais {
	background: transparent;
	color: #E1FE0A;
	border: 1px solid #E1FE0A;
}

@media only screen and (min-width: 800px) {
	
	.posts-relacionados-lista li {
		width: 25%;
		margin-bottom: 0;
		display: block;
		float: left;
	}

}

@media only screen and (min-width: 960px) {

	.posts-relacionados-lista .attachment-cijun-destaque {
		width: 100%;
		height: auto;
		margin: 0 0 10px;
		display: block;
	}
}