/* Granbel Menu
 * Verde #89AFA7  |  Verde escuro #013F3E  |  Fonte: Montserrat
 * Para ajustar: mude as variáveis --gm-* abaixo.
 */

/* Altura da barra: usada também como espaço reservado no topo da página (menu fixo) */
:root {
	--gm-altura: 48px;
}

.granbel-menu {
	--gm-verde: #89afa7;
	--gm-escuro: #013f3e;
	--gm-fundo: #ffffff;

	--gm-fs: 20px;
	--gm-fw: 700;
	--gm-sub-fs: 18px;
	--gm-sub-fw: 500;
	--gm-seta: 6px;

	position: sticky;
	top: 0;
	z-index: 99999;
	box-sizing: border-box;
	width: 100%;
	margin: 0;
	padding: 0;
	background: var(--gm-fundo);
	font-family: 'Montserrat', sans-serif;
}

.granbel-menu *,
.granbel-menu *::before,
.granbel-menu *::after {
	box-sizing: border-box;
}

.granbel-menu ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.granbel-menu li {
	margin: 0;
	padding: 0;
}

.granbel-menu a {
	text-decoration: none;
	transition: background-color .25s ease, color .25s ease;
}

.granbel-menu .granbel-menu__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.granbel-menu .granbel-menu__toggle {
	display: none;
}

/* Barra: itens com a mesma largura, texto centralizado */
.granbel-menu .granbel-menu__list {
	display: flex;
	width: 100%;
}

.granbel-menu .granbel-menu__item {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
}

.granbel-menu .granbel-menu__link {
	position: relative;
	z-index: 2; /* a setinha fica por cima do submenu */
	display: flex;
	align-items: center;
	justify-content: center;
	height: var(--gm-altura);
	padding: 0 12px;
	font-size: var(--gm-fs);
	font-weight: var(--gm-fw);
	line-height: 1.2;
	text-align: center;
	color: var(--gm-verde) !important;
	background: transparent !important;
	text-decoration: none !important;
}

.granbel-menu .granbel-menu__link:visited {
	color: var(--gm-verde) !important;
}

/* Página atual: fundo verde, texto branco e um pequeno entalhe na base */
.granbel-menu .granbel-menu__item.is-current > .granbel-menu__link {
	color: #fff !important;
	background: var(--gm-verde) !important;
}

.granbel-menu .granbel-menu__item.is-current > .granbel-menu__link::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	width: 0;
	height: 0;
	border-left: calc(var(--gm-seta) + 1px) solid transparent;
	border-right: calc(var(--gm-seta) + 1px) solid transparent;
	border-bottom: var(--gm-seta) solid var(--gm-fundo);
}

/* Mouse: fundo verde escuro e texto branco */
.granbel-menu .granbel-menu__item:hover > .granbel-menu__link,
.granbel-menu .granbel-menu__item.is-current:hover > .granbel-menu__link,
.granbel-menu .granbel-menu__item > .granbel-menu__link:focus-visible {
	color: #fff !important;
	background: var(--gm-escuro) !important;
}

/* Hover simples: só o quadrado escuro, sem seta (some também o entalhe da página atual) */
.granbel-menu .granbel-menu__item:not(.has-sub):hover > .granbel-menu__link::after,
.granbel-menu .granbel-menu__item:not(.has-sub) > .granbel-menu__link:focus-visible::after {
	display: none;
}

/* Seta para baixo: somente nos itens com submenu (Notícias) */
.granbel-menu .granbel-menu__item.has-sub:hover > .granbel-menu__link::after,
.granbel-menu .granbel-menu__item.has-sub > .granbel-menu__link:focus-visible::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 100%;
	bottom: auto;
	transform: translateX(-50%);
	width: 0;
	height: 0;
	border-left: calc(var(--gm-seta) + 1px) solid transparent;
	border-right: calc(var(--gm-seta) + 1px) solid transparent;
	border-bottom: 0;
	border-top: var(--gm-seta) solid var(--gm-escuro);
}

.granbel-menu .granbel-menu__link:focus-visible {
	outline: 0;
}

/* Submenu (aparece ao passar o mouse ou focar com o teclado) */
.granbel-menu .granbel-menu__sub {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 1;
	padding: 14px 0 20px;
	background: var(--gm-verde);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
}

.granbel-menu .granbel-menu__item.has-sub:hover > .granbel-menu__sub {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition-delay: 0s;
}

/* teclado: abre o submenu e deixa o item escuro enquanto o foco estiver dentro dele */
.granbel-menu .granbel-menu__item.has-sub:has(:focus-visible) > .granbel-menu__sub {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition-delay: 0s;
}

.granbel-menu .granbel-menu__item.has-sub:has(:focus-visible) > .granbel-menu__link {
	color: #fff !important;
	background: var(--gm-escuro) !important;
}

.granbel-menu .granbel-menu__sub a {
	display: block;
	padding: 12px 12px;
	font-size: var(--gm-sub-fs);
	font-weight: var(--gm-sub-fw);
	line-height: 1.3;
	text-align: center;
	color: #fff !important;
	text-decoration: none !important;
}

.granbel-menu .granbel-menu__sub a:visited {
	color: #fff !important;
}

.granbel-menu .granbel-menu__sub a:hover,
.granbel-menu .granbel-menu__sub a:focus-visible,
.granbel-menu .granbel-menu__sub a.is-current {
	color: var(--gm-escuro) !important;
	outline: 0;
}

/* Celular / tablet: botão de menu e lista vertical */
@media (max-width: 900px) {
	.granbel-menu .granbel-menu__toggle {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: var(--gm-altura);
		margin: 0;
		padding: 0;
		cursor: pointer;
		background: var(--gm-verde);
		border: 0;
		border-radius: 0;
	}

	.granbel-menu .granbel-menu__bars,
	.granbel-menu .granbel-menu__bars::before,
	.granbel-menu .granbel-menu__bars::after {
		display: block;
		width: 26px;
		height: 3px;
		background: #fff;
		border-radius: 2px;
		content: "";
		transition: transform .25s ease, opacity .25s ease;
	}

	.granbel-menu .granbel-menu__bars {
		position: relative;
	}

	.granbel-menu .granbel-menu__bars::before {
		position: absolute;
		top: -8px;
		left: 0;
	}

	.granbel-menu .granbel-menu__bars::after {
		position: absolute;
		top: 8px;
		left: 0;
	}

	.granbel-menu.is-open .granbel-menu__bars {
		background: transparent;
	}

	.granbel-menu.is-open .granbel-menu__bars::before {
		transform: translateY(8px) rotate(45deg);
	}

	.granbel-menu.is-open .granbel-menu__bars::after {
		transform: translateY(-8px) rotate(-45deg);
	}

	.granbel-menu .granbel-menu__list {
		display: none;
		flex-direction: column;
	}

	.granbel-menu.is-open .granbel-menu__list {
		display: flex;
	}

	.granbel-menu .granbel-menu__item {
		flex: none;
	}

	/* sem setinhas no celular */
	.granbel-menu .granbel-menu__item > .granbel-menu__link::after,
	.granbel-menu .granbel-menu__item:hover > .granbel-menu__link::after,
	.granbel-menu .granbel-menu__item > .granbel-menu__link:focus-visible::after {
		display: none;
	}

	/* submenu sempre visível, logo abaixo do item */
	.granbel-menu .granbel-menu__sub {
		position: static;
		padding: 0 0 8px;
		opacity: 1;
		visibility: visible;
		transform: none;
		transition: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.granbel-menu a,
	.granbel-menu .granbel-menu__sub,
	.granbel-menu .granbel-menu__bars,
	.granbel-menu .granbel-menu__bars::before,
	.granbel-menu .granbel-menu__bars::after {
		transition: none;
	}
}

/* Menu fixo no topo (modo automático): fica parado enquanto a página rola */
.granbel-menu.granbel-menu--auto {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
}

/* espaço no topo da página para o menu fixo não cobrir o conteúdo */
body.granbel-menu-fixed {
	padding-top: var(--gm-altura);
}

/* barra de administração do WordPress (quando logado) */
body.admin-bar .granbel-menu.granbel-menu--auto {
	top: 32px;
}

@media (max-width: 782px) {
	body.admin-bar .granbel-menu.granbel-menu--auto {
		top: 46px;
	}
}