/*
 * ============================================================
 * Arquivo: public/assets/gbl-menu-mobile-front.css
 * Projeto: Law Thesis
 * Pasta:   public/assets
 * Módulo:  Menu Mobile (estilos do front)
 * ============================================================
 * Descrição:
 *   Bottom nav fixo no rodapé, estilo app. Visível apenas no mobile
 *   (≤1024px); escondido no desktop. Cada item recebe cor de fundo,
 *   cor e tamanho de fonte via style inline (definidos no admin);
 *   aqui fica só o layout. Sem !important, unidades em px.
 *
 * Prefixo CSS: gbl-mm-
 * ============================================================
 */

.gbl-mm-bar {
	display: none;
}

/* Só aparece no mobile/tablet. Ajuste o breakpoint se necessário. */
@media screen and (max-width: 1024px) {
	.gbl-mm-bar {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 9999;
		display: flex;
		align-items: stretch;
		justify-content: space-around;
		width: 100%;
		box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.12);
	}

	.gbl-mm-item {
		flex: 1 1 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 3px;
		padding: 8px 4px;
		text-decoration: none;
		line-height: 1.1;
		text-align: center;
		min-width: 0;
	}

	.gbl-mm-item:hover,
	.gbl-mm-item:focus {
		text-decoration: none;
		opacity: 0.9;
	}

	.gbl-mm-icon {
		width: 24px;
		height: 24px;
		object-fit: contain;
		display: block;
	}

	.gbl-mm-label {
		display: block;
		max-width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		color: inherit;
	}

	/* Evita o bottom nav cobrir o conteúdo/rodapé do site. */
	body {
		padding-bottom: 64px;
	}
}