/*
Theme Name: Desenvolve+
Theme URI: https://jundiai.sp.br/desenvolve-mais
Author: CIJUN
Author URI: https://cijun.sp.gov.br/
Description: Hotsite do programa Desenvolve+
Version: 1.0
*/

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

:root {
	--azul-escuro:	#011551;
	--azul-claro:	#0142FE;
	--roxo:			#9900CC;
	--verde:		#519F00;
	--laranja:		#FF6600;
}

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

body {
	/* direita esquerda */
	background-color: var(--azul-escuro);
	background-image: url(images/onda-azul-escuro.png),
					  url(images/onda-azul-escuro.png);
	background-repeat: no-repeat, no-repeat;
	background-position: -250px 20px, calc(100% + 300px) 600px;
	background-size: 600px auto, 800px auto;
	color: #fff;
	font-family: "Inter", sans-serif;
	font-size: 18px;
	font-weight: 400;
}

h2 {
	margin-top: 1em;
	font-size: 48px;
	font-weight: 700;
}

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) {

	body {
		background-position: -300px -200px, calc(100% + 300px) 300px;
		background-size: 700px auto, 800px auto;
	}

}

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

	body {
		background-position: -450px 100px, calc(100% + 400px) -250px;
		background-size: 900px auto, 1000px auto;
	}

	h2 {
		margin-top: 0.8em;
		margin-bottom: 0.5em;
		font-size: 68px;
	}

}


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

#header {
	padding: 20px;
}

#header .container {
	border: 1px solid var(--azul-claro);
	border-radius: 20px;
	box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.5);
	padding: 20px;
	position: relative;
	display: grid;
	gap: 20px;
	grid-template-areas: "desenvolve 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/desenvolve-mais-verde.png);
	background-repeat: no-repeat;
	background-size: 100% auto;
	background-position: center center;
	aspect-ratio: 412 / 59;
	width: 100%;
	max-width: 250px;
	height: auto;
	margin: 0;
	display: block;
	grid-area: desenvolve;
	text-indent: -100000000px;
}

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

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

	#brasao {
		display: block;
	}

}


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

#container-menu-header {
	grid-area: menu;
}

#menu-botao {
	color: #fff;
}

#menu-popover {
	background: var(--azul-escuro);
	border: 1px solid var(--azul-claro);
	border-top: none;
	border-radius: 0 0 20px 20px;
	width: calc(100% - 40px);
	position: absolute;
	top: 78px;
	left: 20px;
}

#menu-popover a {
	color: #fff;
	display: block;
	text-decoration: none;
}

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

.menu-header li {
	border-bottom: 1px solid var(--azul-claro);
	padding: 10px 0;
}

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

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

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

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

}


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

#conteudo .bloco-home {
	padding: 10px 0 0;
}

#conteudo .container {
	background-position: bottom right;
	background-size: 420px auto;
	background-repeat: no-repeat;
	padding-bottom: 320px;
}

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

#conteudo ul.quadros {
	margin: 0 0 1.5em;
	list-style: none;
}

#conteudo ul.quadros li {
	border: 2px solid #fff;
	border-radius: 20px;
	padding: 15px;
	margin-bottom: 20px;
	position: relative;
	font-size: 16px;
}

#conteudo ul.quadros li:before {
	content: '\002713';
	background: #fff;
	color: #000;
	border-radius: 50%;
	aspect-ratio: 1/1;
	width: 40px;
	display: block;
	position: absolute;
	top: -15px;
	right: -15px;
	line-height: 40px;
	font-size: 28px;
	font-weight: 800;
	text-align: center;
}

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

	#conteudo .container {
		padding-bottom: 420px;
		background-size: 520px auto;
	}

}

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

	#conteudo .container {
		padding-bottom: 100px;
		background-size: 450px auto;
	}

	#conteudo .texto-home {
		width: 60%;
	}

}

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

	#conteudo .container {
		background-size: 550px auto;
		padding-bottom: 150px;
	}

	#conteudo .texto-home {
		width: 70%;
	}

	#conteudo ul.quadros {
		display: flex;
		gap: 20px;
		flex-flow: row nowrap;
	}

	#conteudo ul.quadros li {
		margin-bottom: 0;
		flex: 1;
		align-self: normal;
		align-items: center;
		justify-self: stretch;
		display: flex;
		font-size: 14px;
	}

}


/* ----- DESENVOLVE+ --------------------------------------------------------------------------- */

#desenvolve-mais {}

#desenvolve-mais .titulo-home {
	color: #fff;
}

#desenvolve-mais .titulo-home span {
	color: var(--azul-claro);
}

#desenvolve-mais .desenvolve {
	display: grid;
	gap: 40px;
	grid-template-columns: 1fr;
}

#desenvolve-mais .lista-topicos {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 24px;
	font-weight: 700;
}

#desenvolve-mais .lista-topicos li {
	background-image: url(images/mais-azul.png);
	background-position: left center;
	background-size: auto 100%;
	background-repeat: no-repeat;
	margin-bottom: 30px;
	padding-left: 45px;
}

#desenvolve-mais .lista-topicos li:nth-child(2) {
	margin-left: 50px;
}

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

	#desenvolve-mais .texto-home {
		width: 50%;
	}
}


/* ----- EIXOS --------------------------------------------------------------------------------- */

#eixos {
	background-color: #fff;
	background-image: url(images/onda-azul-escuro.png);
	background-repeat: no-repeat;
	background-position: calc(100% + 200px) center;
	background-size: 400px auto;
	color: var(--azul-escuro);
}

#eixos .container {
	padding-bottom: 1.5em;
}

#eixos .titulo-home {
	color: var(--azul-claro);
}

#eixos .texto-home {
	width: 60%;
}

#eixos a:link,
#eixos a:visited {
	color: var(--azul-escuro);
}

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

	#eixos .texto-home {
		width: 80%;
	}

}

@media only screen and (min-width: 1024px) {
	
	#eixos {
		background-size: 500px auto;
		background-position-x: calc(100% + 250px);
	}

	#eixos .container {
		padding: 40px 20px 60px;
	}

	#eixos .texto-home {
		width: 80%;
	}

}

/* ----- EMPREGA+ ------------------------------------------------------------------------------ */

#emprega {
	/* direita esquerda degradê */
	background-color: var(--roxo);
	background-image: url(images/onda-roxo.png),
					  url(images/onda-roxo.png),
					  url(images/fundo-roxo.png);
	background-repeat: no-repeat, no-repeat, repeat-x;
	background-position: -400px -400px, calc(100% + 250px) calc(100% + 300px), top center;
	background-size: 900px auto, 800px auto, auto 100%;
}

#emprega .titulo-home {
	background: url(images/emprega-mais.png) no-repeat center center/100% auto;
	aspect-ratio: 628/130;
	width: auto;
	height: 60px;
	text-indent: -10000000px;
}

#emprega ul.quadros li:before {
	color: var(--roxo);
}

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

	#emprega {
		background-position: -400px -400px, calc(100% + 250px) calc(100% + 300px), top center;
		background-size: 900px auto, 900px auto, auto 100%;
	}

}

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

	#emprega .titulo-home {
		height: 90px;
	}

}


/* ----- +NEGOCIOS ----------------------------------------------------------------------------- */

#negocios {
	/* direita esquerda degradê */
	background-color: var(--verde);
	background-image: url(images/onda-verde.png),
					  url(images/onda-verde.png),
					  url(images/fundo-verde.png);
	background-repeat: no-repeat, no-repeat, repeat-x;
	background-position: -400px -400px, calc(100% + 250px) calc(100% + 300px), top center;
	background-size: 900px auto, 800px auto, auto 100%;
}

#negocios .titulo-home {
	background: url(images/mais-negocios.png) no-repeat center center/100% auto;
	aspect-ratio: 663/130;
	width: auto;
	height: 60px;
	text-indent: -10000000px;
}

#negocios ul.quadros li:before {
	color: var(--verde);
}

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

	#negocios .container {
		background-position: 0 bottom;
	}

}

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

	#negocios .container {
		padding-bottom: 350px;
	}

	#negocios .texto-home {
		width: 100%;
	}

}

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

	#negocios {
		background-position: -400px -400px, calc(100% + 400px) calc(100% + 450px), top center;
		background-size: 900px auto, 1100px auto, auto 100%;
	}

	#negocios .container {
		padding-bottom: 450px;
	}

	#negocios .titulo-home {
		height: 90px;
	}

}


/* ----- INOVA+ -------------------------------------------------------------------------------- */

#inova {
	/* direita esquerda degradê */
	background-color: var(--azul-claro);
	background-image: url(images/onda-azul-claro.png),
					  url(images/onda-azul-claro.png),
					  url(images/fundo-azul-claro.png);
	background-repeat: no-repeat, no-repeat, repeat-x;
	background-position: calc(100% + 100px) calc(100% + 150px), -300px -300px, top center;
	background-size: 600px auto, 800px auto, auto 100%;
}

#inova .titulo-home {
	background: url(images/inova-mais.png) no-repeat center center/100% auto;
	aspect-ratio: 429/113;
	width: auto;
	height: 60px;
	text-indent: -10000000px;
}

#inova ul.quadros li:before {
	color: var(--azul-claro);
}

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

	#inova .titulo-home {
		height: 90px;
	}

}


/* ----- INVEST+JUNDIAI ------------------------------------------------------------------------ */

#invest-jundiai {
	/* esquerda direita degradê */
	background-color: var(--laranja);
	background-image: url(images/onda-laranja.png),
					  url(images/onda-laranja.png),
					  url(images/fundo-laranja.png);
	background-repeat: no-repeat, no-repeat, repeat-x;
	background-position: calc(100% + 100px) -200px, calc(100% + 200px) calc(100% + 250px), top center;
	background-size: 600px auto, 800px auto, auto 100%;
}

#invest-jundiai .titulo-home {
	background: url(images/invest-mais-jundiai.png) no-repeat center center/100% auto;
	aspect-ratio: 854/112;
	width: auto;
	max-width: 100%;
	height: 60px;
	text-indent: -10000000px;
}

#invest-jundiai ul.quadros li:before {
	color: var(--laranja);
}

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

	#invest-jundiai {
		background-position: calc(100% + 250px) -200px, calc(100% + 200px) calc(100% + 250px), top center;
	}

	#invest-jundiai .container {
		background-position: 0 bottom;
	}

}

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

	#invest-jundiai {
		background-position: calc(100% + 250px) -200px, -250px calc(100% + 250px), top center;
	}

	#invest-jundiai .texto-home {
		width: 100%;
	}

	#invest-jundiai .texto-home > :nth-child(4),
	#invest-jundiai .texto-home > :nth-child(5),
	#invest-jundiai .texto-home > :nth-child(6) {
		padding-left: 400px;
	}

}

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

	#invest-jundiai .titulo-home {
		height: 90px;
	}

	#invest-jundiai .texto-home > :nth-child(1),
	#invest-jundiai .texto-home > :nth-child(2),
	#invest-jundiai .texto-home > :nth-child(3) {
		padding-left: 350px;
	}

	#invest-jundiai .texto-home > :nth-child(4),
	#invest-jundiai .texto-home > :nth-child(5),
	#invest-jundiai .texto-home > :nth-child(6) {
		padding-left: 500px;
	}

}


/* ----- 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: var(--azul-escuro);
	margin-top: 0;
	padding: 60px 20px;
}

#rodape a:link,
#rodape a:visited {
	color: var(--azul-escuro);
}

#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 .desenvolve {
	background-image: url(images/desenvolve-mais-azul.png);
	background-repeat: no-repeat;
	background-size: 100% auto;
	background-position: center center;
	aspect-ratio: 412 / 59;
	width: 100%;
	height: auto;
	display: block;
	text-indent: -100000000px;
}

#botao-topo {
	background: #fff2;
	color: #000;
	position: fixed;
}

#aviso-lgpd {
	color: #333;
}

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

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

}

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

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

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

}