/*
Theme Name: Centro da Gente
Theme URI: https://jundiai.sp.br/centrodagente
Author: CIJUN
Author URI: https://cijun.sp.gov.br/
Description: Hotsite do programa Centro da Gente
Version: 1.0
*/

/* ----- TABELA DE CORES ----------------------------------------------------------------------- */

:root {
	--verde1:		#01B85C;
	--verde2:		#00A852;
	--verde3:		#017B3D;

	--azul1:		#7ECBF1;
	--azul2:		#5EBFEC;
	--azul3:		#1174A5;

	--laranja1:		#FF9147;
	--laranja2:		#FF8635;
	--laranja3:		#CC5200;

	--amarelo1:		#FFDA47;
	--amarelo2:		#F2CC35;
	--amarelo3:		#CCA301;

	--cinza1:		#F2F1EF;
	--cinza2:		#333333;

	--azul-escuro:	#072380;
}


/* ----- ELEMENTOS BÁSICOS --------------------------------------------------------------------- */

body {
	background-color: #fff;
	color: #000;
	font-family: "Montserrat", sans-serif;
	font-size: 18px;
	font-weight: 500;
}

h2 {
	margin-top: 1em;
	font-size: 28px;
	font-weight: 800;
}

h3 {
	font-size: 24px;
	font-weight: 700;	
}

a:link,
a:visited {
	color: var(--azul-claro);
}

a:hover {
	color: var(--azul-escuro);
}

b, strong {
	font-weight: 700;
}

.brasao {
	aspect-ratio: 700/187;
	height: auto;
}

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



}

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

	h2 {
		font-size: 46px;
	}

}


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

#header {
	padding: 20px;
}

#header .container {
	position: relative;
	display: grid;
	gap: 20px;
	grid-template-areas: "logo menu";
	grid-template-columns: 1fr 80px;
	align-content: center;
	align-items: center;
	justify-content: stretch;
	justify-items: stretch;	
}

#brasao {
	display: none;
	grid-area: brasao;
}

#site-titulo {
	background-image: url(images/centro-da-gente-horizontal.png);
	background-repeat: no-repeat;
	background-size: 100% auto;
	background-position: center center;
	aspect-ratio: 600 / 113;
	width: 100%;
	max-width: 200px;
	height: auto;
	margin: 0;
	display: block;
	grid-area: logo;
	text-indent: -100000000px;
}

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

	#header .container {
		border-radius: 40px;
		padding: 0 30px;
		gap: 0;
		grid-template-areas: "logo menu brasao";
		grid-template-columns: 200px 1fr 200px;
	}

	#brasao {
		display: block;
	}

}


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

#container-menu-header {
	grid-area: menu;
	align-self: self-end;
	justify-self: center;
}

#menu-botao {
	border: 1px solid #ccc;
	border-radius: 5px;
	color: #333;
}

#menu-popover {
	background: #fff;
	border: 1px solid #ccc;
	border-radius: 5px;
	width: calc(100% - 70px);
	position: absolute;
	top: 120px;
	left: 25px;
}

#menu-popover::backdrop {
	background-color: rgba(0, 0, 0, 0.3);
}

#menu-popover a {
	color: #000;
	padding: 5px;
	display: block;
	font-weight: 500;
	font-size: 16px;
	text-decoration: none;
}

#menu-popover a:hover {
	background: var(--amarelo1);
}

.menu-header {
	list-style: none;
	margin: 20px;
}

.menu-header li {
	border-bottom: 1px solid #eee;
	padding: 0;
}

.menu-header li:last-of-type {
	border: none;
	padding-boottom: 0;
}

/* itens do menu pra esconder */
.menu-header li.menu-item-foto,
.menu-header li.menu-item-iniciativa,
.menu-header li.menu-item-eixos,
.menu-header li.menu-item-gestao,
.menu-header li.menu-item-contato {
	display: none !important;
}

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

	#menu-popover {
		border: none;
		width: 100%;
		margin: 0;
		display: block;
		position: static;
		text-align: center;
	}

	#menu-popover li {
		border: none;
		padding: 0 5px;
		display: inline-block;
	}

	#menu-popover a {
		padding: 5px;
	}

}


/* ----- BLOCOS -------------------------------------------------------------------------------- */

#conteudo .bloco-home {
	padding: 30px 0 60px;
	text-align: center;
}

#conteudo .container {
}

#conteudo a:link,
#conteudo a:visited {
	color: #000;
}

.wp-block-button__link {
	background-color: var(--amarelo1);
	border-radius: 0;
	padding: 10px 20px;
	font-weight: 800;
	text-transform: uppercase;
}

.wp-block-button__link,
.wp-block-button__link:link,
.wp-block-button__link:active,
.wp-block-button__link:hover,
.wp-block-button__link:visited {
	color: var(--azul-escuro) !important;
}

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

	#conteudo .container {
	}

}

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

	#conteudo .container {
	}

	#conteudo .texto-home {
	}

}

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

	#conteudo .container {
	}

	#conteudo .texto-home {
	}

}


/* ----- O CORAÇÃO DE JUNDIAÍ BATENDO FORTE NOVAMENTE (FOTO) ----------------------------------- */

#foto {
	background-color: var(--azul-escuro);
	background-image: url(images/background.jpg);
	background-position: center center;
	background-size: cover;
	color: #fff;
}

#foto .wp-element-button {
	cursor: default;
}


/* ----- INICIATIVA ---------------------------------------------------------------------------- */

#iniciativa {}

#iniciativa .titulo-home {
	display: none;
}


/* ----- OS QUATRO EIXOS DO PROGRAMA ----------------------------------------------------------- */

#eixos {
	background-color: var(--cinza1);
	color: #333;
}

#eixos .wp-block-columns {
	gap: 20px;
}

#eixos .wp-block-column {
	background: #fff;
	border-top: 10px solid #333;
	padding: 20px 20px 0;
	box-shadow: 0px 4px 6px 0px rgba(0,0,0,0.1);
}

#eixos h3 {
	font-weight: 800;
}

#eixos h3:before {
	content: '\000020';
	mask-position: center center;
	mask-repeat: no-repeat;
	mask-size: auto 100%;
	width: 50px;
	height: 50px;
	margin: 0 auto 10px;
	display: block;
	text-align: center;
}

/* cores e ícones */
#eixos .wp-block-column.zeladoria {
	border-color: var(--verde2);
}

#eixos .wp-block-column.zeladoria h3 {
	color: var(--verde2);
}

#eixos .wp-block-column.zeladoria h3:before {
    background-color: var(--verde2);
    mask-image: url(images/zeladoria.svg);
}

#eixos .wp-block-column.habitacao {
	border-color: var(--azul2);
}

#eixos .wp-block-column.habitacao h3 {
	color: var(--azul2);
}

#eixos .wp-block-column.habitacao h3:before {
    background-color: var(--azul2);
    mask-image: url(images/habitacao.svg);
}

#eixos .wp-block-column.requalificacao {
	border-color: var(--laranja2);
}

#eixos .wp-block-column.requalificacao h3 {
	color: var(--laranja2);
}

#eixos .wp-block-column.requalificacao h3:before {
    background-color: var(--laranja2);
    mask-image: url(images/requalificacao.svg);
}

#eixos .wp-block-column.mobilidade {
	border-color: var(--amarelo2);
}

#eixos .wp-block-column.mobilidade h3 {
	color: var(--amarelo2);
}

#eixos .wp-block-column.mobilidade h3:before {
    background-color: var(--amarelo2);
    mask-image: url(images/mobilidade.svg);
}


/* ----- ESTILO DOS EIXOS ---------------------------------------------------------------------- */

.quatro-eixos {
	color: #fff;
	position: relative;
	z-index: 0;
}

.quatro-eixos::before {
	content: "";
	mask-repeat: no-repeat;
	mask-position: -50% center;
	mask-size: auto 130%;
	display: block;
	inset: 0;
	position: absolute;
	pointer-events: none;
	z-index: -1;
}

.quatro-eixos .texto-home {
	text-align: left;
	text-shadow: 1px 1px 0 rgba(0,0,0,0.3);
}

.quatro-eixos .titulo-home {
}

.quatro-eixos .titulo-icon {
	background: rgba(0,0,0,0.5);
	width: 80px;
	height: 80px;
	padding: 10px;
	margin: 0 auto 10px;
	display: block;
	text-align: center;
}

.quatro-eixos .titulo-icon img {
	filter: invert(1);
}

.quatro-eixos .wp-block-column {
	background: #fff;
	color: #666;
	border-left: 10px solid #666;
	padding: 20px 20px 0 40px;
	box-shadow: 0px 4px 6px 0px rgba(0,0,0,0.1);
	text-shadow: none;
}

.quatro-eixos .wp-block-column strong {
	font-size: 20px;
	font-weight: 800;
}

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

	.quatro-eixos .titulo-home {
		vertical-align: middle;
		text-align: left;
	}

	.quatro-eixos .titulo-icon {
		margin: 0 15px 0 0;
		display: inline-block;
		vertical-align: middle;
	}

}

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

	.quatro-eixos .titulo-icon {
		width: 120px;
		height: 120px;
	}

}

 /* cores */
#zeladoria.quatro-eixos .wp-block-column {
	border-color: var(--verde3);
}

#zeladoria.quatro-eixos .wp-block-column strong {
	color: var(--verde3);
}

#habitacao.quatro-eixos .wp-block-column {
	border-color: var(--azul3);
}

#habitacao.quatro-eixos .wp-block-column strong {
	color: var(--azul3);
}

#requalificacao.quatro-eixos .wp-block-column {
	border-color: var(--laranja3);
}

#requalificacao.quatro-eixos .wp-block-column strong {
	color: var(--laranja3);
}

#mobilidade.quatro-eixos .wp-block-column {
	border-color: var(--amarelo3);
}

#mobilidade.quatro-eixos .wp-block-column strong {
	color: var(--amarelo3);
}


/* ----- ZELADORIA URBANA ---------------------------------------------------------------------- */

#zeladoria {
	background-color: var(--verde1);
}

#zeladoria::before {
	background-color: var(--verde2);
	mask-image: url('images/zeladoria.svg');
}

#zeladoria .titulo-icon {
	background: var(--verde3);
}


/* ----- HABITAÇÃO E INCLUSÃO SOCIAL ----------------------------------------------------------- */

#habitacao {
	background-color: var(--azul1);
}

#habitacao::before {
	background-color: var(--azul2);
	mask-image: url('images/habitacao.svg');
	mask-position: calc(100% + 400px) center;
}

#habitacao .titulo-icon {
	background: var(--azul3);
}


/* ----- REQUALIFICAÇÃO URBANA ----------------------------------------------------------------- */

#requalificacao {
	background-color: var(--laranja1);
}

#requalificacao::before {
	background-color: var(--laranja2);
	mask-image: url('images/requalificacao.svg');
}

#requalificacao .titulo-icon {
	background: var(--laranja3);
}


/* ----- MOBILIDADE URBANA --------------------------------------------------------------------- */

#mobilidade {
	background-color: var(--amarelo1);
}

#mobilidade::before {
	background-color: var(--amarelo2);
	mask-image: url('images/mobilidade.svg');
	mask-position: calc(100% + 400px) center;
}

#mobilidade .titulo-icon {
	background: var(--amarelo3);
}


/* ----- GESTÃO PARTICIPATIVA ------------------------------------------------------------------ */

#gestao {
	background-color: var(--azul-escuro);
	background-image: url(images/background.jpg);
	background-position: center center;
	background-size: cover;
	color: #fff;
}


/* ----- CANAIS DE CONTATO --------------------------------------------------------------------- */

#contato {
	background-color: var(--cinza2);
	color: #fff;
}

#contato a:link,
#contato a:visited {
	color: #fff;
}


/* ----- MENU SOCIAL --------------------------------------------------------------------------- */

#menu-social a {
	background-image: url(//src.cijun.sp.gov.br/img/icones-sociais/icone-preto-web.svg);
}

#menu-social a[href*="/feed/"] {
	background-image: url(//src.cijun.sp.gov.br/img/icones-sociais/icone-preto-feed.svg);
}

#menu-social a[href*="facebook.com"],
#menu-social a[href*="fb.com"] {
	background-image: url(//src.cijun.sp.gov.br/img/icones-sociais/icone-preto-facebook.svg);
}

#menu-social a[href*="instagram.com"] {
	background-image: url(//src.cijun.sp.gov.br/img/icones-sociais/icone-preto-instagram.svg);
}

#menu-social a[href*="youtube.com"],
#menu-social a[href*="yt.be"] {
	background-image: url(//src.cijun.sp.gov.br/img/icones-sociais/icone-preto-youtube.svg);
}

#menu-social a[href*="flickr.com"] {
	background-image: url(//src.cijun.sp.gov.br/img/icones-sociais/icone-preto-flickr.svg);
}

#menu-social a[href*="twitter.com"],
#menu-social a[href*="x.com"] {
	background-image: url(//src.cijun.sp.gov.br/img/icones-sociais/icone-preto-x.svg);
}

#menu-social a[href*="tiktok.com"] {
	background-image: url(//src.cijun.sp.gov.br/img/icones-sociais/icone-preto-tiktok.svg);
}


/* ----- RODAPÉ -------------------------------------------------------------------------------- */

#rodape {
	background-color: #fff;
	background-image: url(images/onda-cinza.png);
	background-repeat: no-repeat;
	background-position: calc(100% + 300px) center;
	background-size: 700px auto;
	color: #333;
	margin-top: 0;
	padding: 60px 20px;
}

#rodape a:link,
#rodape a:visited {
	color: #333;
}

#rodape .logos {
	max-width: 200px;
	margin: 0 auto 40px;
	display: grid;
	gap: 40px;
	grid-template-columns: 1fr;
	align-items: center;
	justify-content: stretch;
	justify-items: stretch;
}

#rodape .logos .logotipo {
	background-repeat: no-repeat;
	background-size: 100% auto;
	background-position: center center;
	width: 100%;
	height: auto;
	display: block;
	text-indent: -100000000px;
	cursor: default;
}

#rodape .centro-da-gente {
	background-image: url(images/centro-da-gente-vertical.png);
	aspect-ratio: 600 / 548;
}

#rodape .jundiai-da-gente {
	background-image: url(//src.cijun.sp.gov.br/img/gestao-2025-2028/slogan/slogan-amarelo-rosa.png);
	aspect-ratio: 1253 / 1033;
}

#botao-topo {
	background: var(--azul-escuro);
	position: fixed;
}

#botao-topo img {
	filter: invert(1);
}

#aviso-lgpd {
	color: #333;
}

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

	#rodape .logos {
		max-width: 450px;
		grid-template-columns: 1fr 2fr 1fr;
	}

}

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

	#rodape {
		background-size: 1000px auto;
	}

	#rodape .logos {
		max-width: 600px;
	}

}