/*
Theme Name:		Campus Jundiaí 2.1
Theme URI:		https://campus.jundiai.sp.gov.br/
Author:			CIJUN
Author URI:		https://cijun.sp.gov.br/
Description:	Site do Ecossistema de Inovação
Template:		jundiai-tema-base
Version:		2.1
*/

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

:root {
	--azulzinho:	#f7f8ff;
	--azul:			#1dadf3;
	--ocre:			#2482b1;
	--azulmarinho:	#072380;
	--cinza:		#EDEFEB;
}

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

html {
	scroll-behavior: smooth;
}

body,
input,
textarea {
	font-family: "Roboto Flex", serif;
}

body:not(.home) {
	background: var(--cinza);
}

ul, ol {
	margin-left: 1em;
}

ul {
	list-style: square;
}

/* ----- BLOCOS DO WORDPRESS ------------------------------------------------------------------- */

.wp-block-media-text img {
	margin-bottom: 1.5em;
}


/* ----- HEADER -------------------------------------------------------------------------------- */

#header {
	background: transparent;
	width: calc( 100% - 20px );
	position: fixed;
	top: 10px;
	left: 10px;
	z-index: 99998;
}

#header .container {
	background: #fff;
	color: #222;
	border-radius: 40px;
	padding: 10px 15px;
	gap: 20px;
	grid-template-areas: "titulo fatec menu";
	grid-template-columns: 1fr auto auto;
	align-items: center;
	filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.1));
	box-shadow: 0 30px 60px 0 rgba(27, 31, 10, 0.08);
	
}

#site-titulo {
	background: url(images/Logo.png) no-repeat center center/100% auto;
	aspect-ratio: 432/225;
	width: 100px;
	margin-top: 0;
	text-align: left;
	text-indent: -10000000px;
}

#logotipo-fatec {
	grid-area: fatec;
	background: url(images/fatec-jundiai.png) no-repeat center center/100% auto;
	aspect-ratio: 400/127;
	width: 100px;
	margin-top: 0;
	text-align: left;
	text-indent: -10000000px;
}

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

	#site-titulo {
		width: 130px;
	}

	#logotipo-fatec {
		width: 130px;
	}

}

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

	#header .container {
		padding: 0 20px;
		border-radius: 50px;
		grid-template-areas: "titulo menu fatec";
		grid-template-columns: auto 1fr auto;
		gap: 0;
	}

	#site-titulo {
		width: 110px;
	}

	#logotipo-fatec {
		width: 110px;
	}

}


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

#conteudo-menu {
	align-self: center;
	justify-self: center;
}

#menu-botao {
	color: #222;
}

#menu-botao .hamburguer {
	font-size: 36px;
}

#menu-header {
	background-color: #fff;
	border-radius: 40px;
	padding: 20px;
	top: 80px;
	font-size: 18px;
}

#menu-principal a:link,
#menu-principal a:visited {
	display: inline-block;
	color: #222;
}

#menu-principal a:hover {
	background-color: #eee;
	color: #222;
	border-radius: 10px;
}

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

	#menu-botao .hamburguer {
		font-size: 48px;
	}

	#menu-header {
		top: 100px;
	}


}

@media only screen and (min-width: 1024px) {
	
	#menu-header {
		background-color: transparent;
		text-align: center;
		display: grid;
		grid-template-columns: 1fr auto;
		gap: 0;
		align-content: center;
		align-items: center;
		justify-content: center;
		text-align: center;
	}

	#menu-principal {
		align-self: center;
		justify-self: center;
	}

}


/* ----- BOTÃO DE LOGIN ------------------------------------------------------------------------ */

#login {
	background: #fff;
	border: 2px solid var(--ocre);
	border-radius: 30px;
	display: block;
	width: fit-content;
	margin-top: 2em;
	padding: 10px 30px;
	font-size: 16px;
	font-weight: 600;
	text-transform: uppercase;
	transition: all 0.3s ease-in-out;
}

#login:link,
#login:visited {
	color: var(--ocre) !important;
}

#login:hover {
	color: var(--azulmarinho) !important;
	border-color: var(--azulmarinho);
}

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

	#login {
		font-size: 18px;
		margin-top: 0;
		padding: 15px 20px;
	}

}

/* ----- PÁGINA INICIAL ------------------------------------------------------------------------ */

.pagina-inicial .bloco-home {
	padding-bottom: 60px;
	font-size: 18px;
}

.pagina-inicial .titulo-home {
	margin: 0.3em 0;
	font-size: 36px;
	font-weight: 700;
}

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

	.pagina-inicial .bloco-home {
		font-size: 20px;
	}

	.pagina-inicial .titulo-home {
		margin: 0.5em 0;
		font-size: 48px;
	}

}

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

	.pagina-inicial .titulo-home {
		margin: 1em 0;
	}

}


/* ----- IMAGEM DA HOME ------------------------------------------------------------------------ */

/*

#imagem-capa {
	background-position: center center;
	background-size: cover;
	aspect-ratio: 1/2;
	display: grid;
	align-content: center;
	justify-content: center;
}

#imagem-capa div {
	color: #fff;
	margin-bottom: 0.5em;
	font-size: 32px;
	font-weight: 600;
	line-height: 1;
	text-align: center;
	text-shadow: 2px 2px 3px #000000, -1px -1px 3px rgba(0,0,0,0.3);
}

#imagem-capa .titulo {
	font-size: 46px;
	font-weight: 700;
}

#imagem-capa .campus-saiba-mais {
	background: rgba(0,0,0,0.4);
	color: #fff;
	border: 2px solid #fff;	
	border-radius: 30px;
	display: block;
	width: fit-content;
	margin: auto;
	padding: 20px 30px;
	font-size: 20px;
	font-weight: 600;
	text-transform: uppercase;
	text-decoration: none;
	filter: drop-shadow(2px 2px 3px #000000);
	transition: all 0.3s ease-in-out;
}

#imagem-capa .campus-saiba-mais:hover {
	background: rgba(0,0,0,0.5);
}

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

	#imagem-capa {
		aspect-ratio: 1/1;
	}

}

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

	#imagem-capa {
		aspect-ratio: 2/1;
	}

}
*/

/* ----- IMAGEM DA CAPA ------------------------------------------------------------------------ */

#bloco-imagem-capa .wp-block-cover.has-parallax {
	aspect-ratio: 1 / 2;
}

#bloco-imagem-capa .wp-block-cover p {
	color: #fff;
	margin-bottom: 0.5em;
	font-size: 32px;
	font-weight: 600;
	line-height: 1;
	text-align: center;
	text-shadow: 2px 2px 3px #000000, -1px -1px 3px rgba(0,0,0,0.3);
}

#bloco-imagem-capa .wp-block-cover .titulo {
	font-size: 46px;
	font-weight: 700;
}

#bloco-imagem-capa .wp-element-button {
	background: rgba(0,0,0,0.4);
	color: #fff;
	border: 2px solid #fff;	
	border-radius: 40px;
	display: block;
	width: fit-content;
	margin: auto;
	padding: 20px 30px;
	font-size: 20px;
	font-weight: 600;
	text-transform: uppercase;
	text-decoration: none;
	filter: drop-shadow(2px 2px 3px #000000);
	transition: all 0.3s ease-in-out;
}

#bloco-imagem-capa .wp-element-button:hover {
	background: rgba(0,0,0,0.5);
}

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

	#bloco-imagem-capa .wp-block-cover.has-parallax {
		aspect-ratio: 1/1;
	}

}

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

	#bloco-imagem-capa .wp-block-cover.has-parallax {
		aspect-ratio: 2/1;
	}

}




/* ----- O CAMPUS ------------------------------------------------------------------------------ */

#campus {
	background-color: var(--azulzinho);
	padding-top: 40px;
	padding-left: 20px;
	padding-right: 20px;
}

#campus .container {
	background-color: #fff;
	border-radius: 30px;
	padding: 20px;
}

#campus img {
	border-radius: 20px;
}


/* ----- CONHEÇA NOSSOS HUBS DE INOVAÇÃO ------------------------------------------------------- */

#hubs {
	background-color: var(--cinza);
}

#hubs-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 40px;
	align-content: stretch;
	justify-content: stretch;
	align-items: start;
	justify-items: center;
}

#hubs-grid a:link,
#hubs-grid a:visited {
	color: #222;
	text-decoration: none;
}

#hubs-grid .hub {
	width: 100%;
	text-align: center;
}

#hubs-grid .hub-imagem {
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	border-radius: 20px;
	aspect-ratio: 3/2;
	width: 100%;
	margin-bottom: 1em;
}

#hubs .hub p {
	margin-bottom: 1em;
}

#hubs .hub-saiba-mais {
	background: transparent;
	border: 2px solid var(--azul);
	border-radius: 10px;
	padding: 10px 20px;
	font-size: 16px;
	font-weight: 600;
	transition: all 0.3s ease-in-out;
}

#hubs .hub-saiba-mais:link,
#hubs .hub-saiba-mais:visited {
	color: #666;
}

#hubs .hub-saiba-mais:hover {
	background-color: var(--azul);
	color: #444;
}

#hubs-grid .bloco-subtitulo {
	margin-bottom: 0.3em;
}

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

	#hubs-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 60px 40px;
	}

}

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

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

}

/* ----- POPOVER DOS HUBS ---------------------------------------------------------------------- */

.popover {
	border-radius: 30px;
	margin-top: 40px;
	margin-bottom: 40px;
	padding: 30px;
	width: calc(100% - 20px);
	max-height: calc(100% - 120px);
	left: 10px;
    top: 50%;
	text-align: left;
    transform: translateY(-50%);
	filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.1));
}

.popover .popover-close {
	background: transparent;
	border: none;
	font-size: 40px;
	position: absolute;
	top: 10px;
	right: 20px;
}

.popover-subtitulo {
	font-size: 22px;
	text-align: center;
}

.popover:-internal-popover-in-top-layer::backdrop {
	background-color: rgba(0,0,0,0.5);
}

/* barra de rolagem invisível */

.popover::-webkit-scrollbar {
	height: 1px;
	width: 1px;
}
.popover::-webkit-scrollbar-track {
	border-radius: 1px;
}

.popover::-webkit-scrollbar-track,
.popover::-webkit-scrollbar-track:hover,
.popover::-webkit-scrollbar-track:active,
.popover::-webkit-scrollbar-thumb,
.popover::-webkit-scrollbar-thumb:hover,
.popover::-webkit-scrollbar-thumb:active {
	background-color: transparent;
}

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

	#hubs-grid .popover .hub-imagem {
		width: 400px;
		margin-left: 20px;
		float: right;
	}

}

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

	.popover {
		max-width: 1200px;
		left: 50%;
		transform: translateX(0) translateX(-50%);
		top: 100px;
		
	}

}

/* ----- QUERO SER INCUBADO -------------------------------------------------------------------- */

#incubado {
	background-color: var(--azul);
}

#incubado .wp-block-group.has-background {
	border-radius: 30px;
}


/* ----- EVENTOS ------------------------------------------------------------------------------- */

#eventos {
	background-color: var(--cinza);
}


/* ----- NOTÍCIAS ------------------------------------------------------------------------------ */

.noticias-lista .noticia-foto {
	border-radius: 20px;
}

.noticias-lista .noticia-titulo {
	font-size: 22px;
}

.noticias-lista .noticia-data {
	color: #AAA;
}

.noticias-lista .noticia-resumo {
	display: none;
}

.pagina-inicial #noticias .saiba-mais {
	background: linear-gradient(to bottom, var(--azul) 0%, var(--ocre) 100%);
	color: #fff;
	border-radius: 3px;
	border-radius: 30px;
	margin-left: auto;
	margin-right: auto;
	padding: 20px 30px;
	display: block;
	float: none;
	font-size: 20px;
	transition: all 0.3s ease-in-out;
}

.pagina-inicial #noticias .saiba-mais:hover {
	background: linear-gradient(to bottom, var(--ocre) 0%, var(--azul) 100%);
	transition: all 0.3s ease-in-out;
}


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

	.pagina-inicial .noticias-lista {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

}

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

	.pagina-inicial .noticias-lista {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

}


/* ----- FALE CONOSCO -------------------------------------------------------------------------- */

#fale-conosco {
	background-color: var(--cinza);
}

#fale-conosco h3.wp-block-heading {
	margin-top: 0;
}

#fale-conosco input[type="text"],
#fale-conosco input[type="tel"],
#fale-conosco input[type="email"],
#fale-conosco textarea {
	border: 1px solid #ddd;
	border-radius: 30px;
	padding: 20px;
	font-size: 18px;
	filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.1));
}

#fale-conosco input[type="submit"] {
	background: linear-gradient(to bottom, var(--azul) 0%, var(--ocre) 100%);
	color: #fff;
	border: none;
	border-radius: 30px;
	padding: 20px 30px;
	font-size: 20px;
	font-weight: 600;
	transition: all .5s ease;
}

#fale-conosco input[type="submit"]:hover {
	background: linear-gradient(to bottom, var(--ocre) 0%, var(--azul) 100%);
	transition: all .5s ease;
}

#fale-conosco .wp-block-group.has-background {
	border-radius: 30px;
	padding: 30px;
	filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.1));
}

/* ----- PÁGINAS INTERNAS ---------------------------------------------------------------------- */

.pagina-interna {
	background: #fff;
	border-radius: 30px;
	margin-top: 6em;
	margin-left: 10px;
	margin-right: 10px;
	margin-bottom: 4em;
	padding: 20px;
	font-size: 18px;
	filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.1));
}

.pagina-interna #sidebar {
	display: none;
}

.pagina-interna #conteudo {
	width: 100%;
	float: none;
}

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

	.pagina-interna {
		border-radius: 40px;
		margin-top: 12em;
		padding: 30px;
	}

}

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

	.pagina-interna {
		margin-top: 9em;
		margin-left: auto;
		margin-right: auto;
	}

} 


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

#rodape {
	background: #222;
	margin-top: 0;
}

#botao-topo {
	position: fixed;
}