/* CSS escrito a mao, para o que nao passa pelo Tailwind.
 *
 * O bloco do menu principal e PORTADO SEM ALTERACAO do site institucional
 * (/Library/www/novo_site_redecredauto/assets/css/styles.css). Mesmos
 * seletores, mesma mecanica, mesmo comportamento: o painel abre em :hover e em
 * :focus-within, e o item acende borda inferior de 4px na cor da marca.
 *
 * Ele nao cabe no @layer components do input.css: depende de
 * `display: flex !important` em estado de ancestral, que nao se expressa como
 * classe utilitaria.
 *
 * As cores saem de --rca-* (definidas no :root do input.css), entao o arquivo
 * e o mesmo nos dois sites e so a marca muda.
 */

/* Item do menu principal. */
.menu-item {
	cursor: default;
}

.menu-item:hover {
	border-bottom: 4px;
	border-style: solid;
	border-color: var(--rca-brand);
}

.menu-item:hover .menu-opts,
.menu-item:focus-within .menu-opts {
	display: flex !important;
}

/* Marca posta pelo JS quando o item clicado abre um modal: sem isto o painel
 * continuava aberto (o ponteiro segue sobre ele) por cima do dialogo. */
.menu-item[data-menu-fechado] .menu-opts {
	display: none !important;
}

/* O item de menu virou alvo de teclado (role=button, tabindex=0): o foco
 * precisa ser visivel, senao quem navega por Tab nao sabe onde esta. */
.menu-item:focus-visible {
	outline: 2px solid var(--rca-brand);
	outline-offset: -2px;
}

.menu-opts:hover {
	display: flex !important;
}

.swal2-modal {
	border-radius: 20px;
}