/*
Theme Name:		Festa da Uva 2025
Theme URI:		https://festadauva.jundiai.sp.gov.br/
Author:			CIJUN
Author URI:		https://cijun.sp.gov.br/
Description:	Site da Festa da Uva 2025
Template:		jundiai-tema-base
Version:		1.0
*/

/* ----- TABELA DE CORES DA FESTA DA UVA --------------------------------------------- */

:root {

	--roxo-escuro: #2F0F24;
	--roxo-medio: #5E0E3D;
	--roxo-claro: #901849;
	--verde-claro: #A3B138;
	--verde-medio: #628833;
	--verde-escuro: #215F2D;
}

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

body,
input,
textarea,
select,
button {
	background: #fff;
	color: #333;
	font-family: 'Montserrat', sans-serif;
	font-size: 16px;
}

body {
	line-height: 1.5;
}

a:link,
a:visited {
	color: var(--verde-medio);
}

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

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

	body,
	input,
	textarea,
	select,
	button {
		font-size: 18px;
	}

}

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

#contraste,
#header .brasao,
#conteudo-busca,
#barra-plataforma,
#breadcrumb {
	display: none;
}

#header {
    background: var(--roxo-medio);
}

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

#header a:hover {
	color: var(--roxo-medio);
}

#header .container {
	gap: 0;
}

#site-titulo {
	background-image: url(images/festadauva.png);
	background-size: 100% auto;
	background-repeat: no-repeat;
	background-position: center center;
	aspect-ratio: 410 / 237;
	width: 200px;
	height: auto;
	margin: 0 auto 20px;
	display: block;
	text-indent: -10000px;
}

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

	#header {
		background: #f5f5f5;
		box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.2);
	}

	#header .container {
		grid-template-columns: 1fr;
		grid-template-areas: "titulo" "menu";
		gap: 0;
	}

}

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

#menu-botao {
	color: #fff;
}

#menu-header {
	background: var(--roxo-medio);
	border-bottom: 5px solid var(--verde-claro);
	top: 55px;
}

#menu-principal li,
#menu-principal .sub-menu {
    border-color: var(--verde-limao);
}

#menu-header a:link,
#menu-header a:visited {
	color: #fff;
}

#menu-header a:hover {
	background: var(--roxo-claro);
}

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

	#menu-header {
		background: #f5f5f5;
		border: none;
		width: fit-content;
		max-width: 1320px;
		margin-left: auto;
		margin-right: auto;
		padding: 20px 0 10px;
		line-height: 1;
		text-align: center;
	}
	
	#menu-principal > li {
		float: none;
	}

	#menu-header a:link,
	#menu-header a:visited {
		color: var(--roxo-medio);
		margin-bottom: 5px;
		font-weight: bold;
		font-size: 16px;
	}

	#menu-header a:hover {
		background: var(--roxo-medio);
		color: #fff;
	}

}

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

#botoes {
    gap: 20px;
}

#botoes .has-background {
    border-radius: 5px;
	margin-bottom: 0;
}

#botoes .has-background:hover {
    background-color: #931849 !important;
}

#botoes .has-background a:link,
#botoes .has-background a:visited {
    color: #fff;
    text-decoration: none;
}

@media (min-width: 782px) {

	#botoes {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
	}

}

@media (min-width: 1300px) {

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

	#botoes .has-background {
		font-size: 22px;
	}

	/* os 4 botões na mesma altura */
	#botoes .wp-block-column:nth-of-type(2) .has-background,
	#botoes .wp-block-column:nth-of-type(3) .has-background {
		padding-top: 2em;
		padding-bottom: 2em;
	}
	
}


/* ----- LISTA DE NOTÍCIAS ----------------------------------------------------------- */

#noticias-portal {
	margin-top: 3em;	
}

#noticias-portal .titulo-home {
	color: var(--roxo-claro);
}

.noticias-lista a:link,
.noticias-lista a:visited {
	color: var(--roxo-claro);
}

.noticias-lista a:hover {
	color: var(--roxo-claro);
}

/* ----- CONTEÚDO --------------------------------------------------------------------- */

.pagina-capa {
	margin-top: 6em;
}

.pagina a {
	font-weight: bold;
}

.pagina-titulo {
	color: var(--roxo-claro);
	border-bottom: 2px solid var(--verde-claro);
	width: fit-content;
	margin: 0 auto 2em;
	text-align: center;
	text-transform: uppercase;
}

/* ----- PROGRAMACAO ----------------------------------------------------------------- */

h2.programacao-realizada {
	border-top: 1px solid var(--verde-claro);
	margin-top: 6em;
	padding-top: 2em;
	text-align: center;
}

.sub-paginas-grid {
	margin-top: 60px;
	display: grid;
	gap: 40px;
}

.sub-paginas-grid a {
	color: var(--roxo-medio);
}

.sub-paginas-grid a:hover {
	color: var(--roxo-claro);
}

.sub-paginas-grid .item {
	display: block;
	font-weight: bold;
	text-align: center;
	text-decoration: none;
}

.sub-paginas-grid .item .imagem {
	background-color: #eee;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	border-radius: 5px;
	width: 100%;
	aspect-ratio: 350 / 240;
	margin: 0 auto 10px;
}

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

	.sub-paginas-grid {
		grid-template-columns: repeat(2, 1fr);
	}

}

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

	.sub-paginas-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.sub-paginas-grid div {
		display: block;
	}

}


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

#rodape {
	background: #fff;
	color: #666;
}

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

#menu-social a {
	filter: invert(1) opacity(50%);
}

#menu-social a:hover {
	filter: invert(1) opacity(80%);
}

#botao-topo {
	background: var(--roxo-claro);
}

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