/*
Theme Name:		FUMAS 5.2
Theme URI:		https://fumas.jundiai.sp.gov.br/
Author:			CIJUN
Author URI:		https://cijun.sp.gov.br/
Description:	Site da Fundação Municipal de Ação Social.
Template:		jundiai-tema-base
Version:		5.2
*/

/* ----- TABELA DE CORES ------------------------------------------------------------- */

:root {
	--verde-logo: #00AA52;
	--azul-logo: #0061A9;
	--magenta: #d135a4;
}


/* ----- CABEÇALHO ------------------------------------------------------------------- */

#barra-plataforma {
	background: var(--magenta);
}

#site-titulo {
	background: url(images/fumas.png) no-repeat center center/100% 100%;
	width: 150px;
	aspect-ratio: 430 / 255;
	display: block;
	text-indent: -10000px;
}

@media only screen and (max-width: 1023px) {

	#header .container {
		gap: 20px 0;
	}

	#site-titulo {
		margin: auto;
	}

}

@media only screen and (min-width: 1024px) {

	#header .container {
		grid-template-areas:
		"titulo titulo titulo brasao"
        "titulo titulo titulo busca"
        "menu menu menu menu";
	}

	#site-titulo {
		width: 210px;
	}

}


/* ----- MENU PRINCIPAL -------------------------------------------------------------- */

/* temporariamente o menu terá três níveis, apenas no desktop */

@media only screen and (min-width: 1024px) {

	#menu-principal .sub-menu .sub-menu {
		display: block;
		margin: -20px 0 0 300px !important;
	}

}

/* mas quatro não */
#menu-principal .sub-menu .sub-menu .sub-menu {
	display: none;
}


/* ----- PÁGINA INICIAL -------------------------------------------------------------- */

#conteudo-home {
	margin-top: 40px;
	display: grid;
	gap: 40px;
	grid-template-columns: 1fr;
	grid-template-areas: "menu" "noticias" "social";
}

.pagina-capa {
	margin-top: 100px;
	margin-bottom: 100px;
}

#widget-home {
	grid-area: social;
}

@media only screen and (min-width: 1024px) {

	#conteudo-home {
		margin-top: 80px;
		gap: 80px 60px;
		grid-template-columns: 1fr 300px;
		grid-template-areas: "menu social" "noticias social";
	}

	.reurb-sub-menu ul.sub-menu {
   		max-width: 300px !important;
	}
	
}


/* ----- MENU DA CAPA (BOTÕES) ------------------------------------------------------- */

#menu-home {
	margin: 40px auto 0;
	list-style: none;
	grid-area: menu;
}

#menu-home .sub-menu {
	display: none;
}

#menu-home:not(#conteudo-capa #menu-home) {
	width: fit-content;
}

#menu-home li {
	margin: 0;
}

#menu-home li a {
	background: #061e6d;
	color: #fff;
	border-radius: 20px;
	margin: 30px 0;
	padding: 20px;
	display: block;
	font-size: 22px;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
}

#menu-home li:nth-child(2n) a {
	background: var(--verde-logo);
}

#menu-home li:nth-child(3n) a {
	background: var(--azul-logo);
}

#menu-home li:nth-child(4n) a {
	background: var(--magenta);
}

@media only screen and (min-width: 600px) {

	#menu-home {
		display: grid;
		gap: 20px;
		grid-auto-flow: column;
		grid-auto-columns: 1fr;
		align-items: center;
		align-content: stretch;
	}

	#menu-home li a {
		height: 100%;
		margin: 0;
		padding-left: 30px;
		padding-right: 30px;
	}

}

@media only screen and (min-width: 1024px) {

	#menu-home {
		margin-top: 80px;
		gap: 40px;
	}
	
	#conteudo-home #menu-home {
		margin-top: 0;
	}

}

/* ----- NOTÍCIAS DA CAPA ------------------------------------------------------------ */

#noticias-home {
	grid-area: noticias;
}

#noticias-home .noticia-resumo {
	display: none;
}

#noticias-home .saiba-mais {
	display: none;
}

@media only screen and (min-width: 1024px) {

	#noticias-home .noticias-lista {
		grid-template-columns: 1fr 1fr 1fr;
		gap: 40px;
		grid-template-areas:
			"a a a"
			"b c d";
	}

	#noticias-home .noticias-lista .noticia-item:nth-child(1) {
		min-height: 250px;
		position: relative;
		grid-area: a;
	}

	#noticias-home .noticias-lista .noticia-item:nth-child(1) .noticia-data {
		position: absolute;
		top: 0;
		left: 0;
	}

	#noticias-home .noticias-lista .noticia-item:nth-child(1) .noticia-titulo {
		background: var(--magenta);
		color: #fff;
		padding: 10px 15px;
		position: absolute;
		left: 300px;
		top: 40px;
		font-size: 110%;
		text-decoration: none;
	}

	#noticias-home .noticias-lista .noticia-item .noticia-foto {
		aspect-ratio: 3 / 2;
		height: auto;
	}

	#noticias-home .noticias-lista .noticia-item:nth-child(1) .noticia-foto {
		width: 350px;
		position: absolute;
		top: 20px;
		left: 0;
	}

	#noticias-home .noticias-lista .noticia-item:nth-child(1) .noticia-resumo {
		max-height: 110px;
		overflow: hidden;
		display: block;
		position: absolute;
		left: 380px;
		top: 120px;
		
	}

	#noticias-home .noticias-lista .noticia-item:nth-child(2) {
		grid-area: b;
	}

	#noticias-home .noticias-lista .noticia-item:nth-child(3) {
		grid-area: c;
	}

	#noticias-home .noticias-lista .noticia-item:nth-child(4) {
		grid-area: d;
	}

	#noticias-home .noticias-lista .noticia-item:nth-child(2) .noticia-resumo,
	#noticias-home .noticias-lista .noticia-item:nth-child(3) .noticia-resumo,
	#noticias-home .noticias-lista .noticia-item:nth-child(4) .noticia-resumo {
		display: none;
	}

	#noticias-home .noticias-lista p {
		margin-bottom: 1em;
	}

}

@media only screen and (min-width: 1220px) {

	#noticias-home .noticias-lista .noticia-item:nth-child(1) {
		min-height: 420px;
	}

	#noticias-home .noticias-lista .noticia-item:nth-child(1) .noticia-titulo {
		left: 550px;
		top: 60px;
		font-size: 160%;
	}

	#noticias-home .noticias-lista .noticia-item:nth-child(1) .noticia-foto {
		width: 600px;
	}

	#noticias-home .noticias-lista .noticia-item:nth-child(1) .noticia-resumo {
		left: 640px;
		top: 230px;
	}
	
}

/* ----- BOTÃO DO WHATSAPP ----------------------------------------------------------- */

#link-whatsapp img {
	width: 80px;
	height: 80px;
	position: fixed;
	bottom: 20px;
	right: 20px;
	z-index: 99999;
	transition: all .2s ease-in-out;
}

#link-whatsapp img:hover {
	width: 84px;
	height: 84px;
	bottom: 18px;
	right: 18px;
}
