/*
 * O painel de Soluções (toca-mega) e o menu do celular (toca-menu-mobile) do
 * header (inc/cabecalho-e-rodape.php), refeitos para caber em qualquer tela.
 * A barra segue com as classes do Tailwind compilado.
 *
 * Os componentes ficam no @layer components, como o catalogo.css: uma
 * utilidade no mesmo elemento (o lg:hidden do menu, o invisible do painel)
 * ainda vence. Os estados (o painel aberto pelo toque e a página parada com o
 * menu aberto) ficam fora de camada, para vencer as utilidades.
 *
 * Todo texto com no mínimo 16px.
 */

@layer properties, theme, base, components, utilities;

@layer components {
	/* ------------------------------------------------- O painel de Soluções */

	/* Nunca mais alto que a tela: o que passar rola por dentro do painel. */
	.toca-mega {
		max-height: calc(100dvh - 3.5rem);
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	.toca-mega__painel {
		border-block: 1px solid var(--border);
		background: var(--background);
		box-shadow: 0 10px 15px -3px rgb(26 26 46 / 0.05), 0 4px 6px -4px rgb(26 26 46 / 0.05);
	}

	.toca-mega__grade {
		display: grid;
		grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.8fr) minmax(0, 1.3fr);
		gap: 2.5rem;
		padding-block: 1.75rem 2rem;
	}

	.toca-mega__rotulo {
		margin-bottom: 0.75rem;
		color: var(--muted-foreground);
		font-size: 1rem;
		font-weight: 600;
	}

	.toca-mega__areas {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.25rem 0.5rem;
	}

	.toca-mega__apps,
	.toca-mega__casos {
		display: flex;
		flex-direction: column;
		gap: 0.25rem;
	}

	.toca-mega__area,
	.toca-mega__app,
	.toca-mega__caso {
		display: flex;
		margin-inline: -0.5rem;
		padding: 0.5rem;
		border-radius: 0.5rem;
		color: var(--foreground);
		transition: background-color 0.15s ease;
	}

	.toca-mega__area:hover,
	.toca-mega__app:hover,
	.toca-mega__caso:hover {
		background: var(--secondary);
	}

	:is(.toca-mega__area, .toca-mega__app, .toca-mega__caso, .toca-mega__todos, .toca-mega__atalho):focus-visible {
		outline: 2px solid var(--ring);
		outline-offset: 2px;
	}

	.toca-mega__area {
		align-items: center;
		gap: 0.75rem;
	}

	.toca-mega__icone {
		display: flex;
		width: 2.25rem;
		height: 2.25rem;
		flex-shrink: 0;
		align-items: center;
		justify-content: center;
		border-radius: 0.5rem;
		background: var(--accent);
		color: var(--primary);
	}

	.toca-mega__icone svg {
		width: 1.125rem;
		height: 1.125rem;
	}

	.toca-mega__nome {
		color: var(--foreground);
		font-size: 1rem;
		font-weight: 600;
		line-height: 1.35;
	}

	.toca-mega__descricao {
		color: var(--muted-foreground);
		font-size: 1rem;
		font-weight: 400;
		line-height: 1.4;
	}

	.toca-mega__app {
		align-items: center;
		gap: 0.625rem;
		padding-block: 0.375rem;
		font-size: 1rem;
		font-weight: 500;
	}

	.toca-mega__selo {
		display: flex;
		width: 1.75rem;
		height: 1.75rem;
		flex-shrink: 0;
		align-items: center;
		justify-content: center;
	}

	.toca-mega__caso {
		flex-direction: column;
		gap: 0.125rem;
	}

	.toca-mega__caso .toca-mega__nome {
		display: -webkit-box;
		overflow: hidden;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.toca-mega__caso .toca-mega__descricao {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.toca-mega__todos {
		display: inline-flex;
		align-items: center;
		gap: 0.5rem;
		margin-top: 0.625rem;
		border-radius: 0.375rem;
		color: var(--primary);
		font-size: 1rem;
		font-weight: 600;
	}

	.toca-mega__todos:hover {
		text-decoration: underline;
		text-underline-offset: 3px;
	}

	.toca-mega__todos svg {
		width: 1.125rem;
		height: 1.125rem;
	}

	.toca-mega__pe {
		border-top: 1px solid var(--border);
	}

	.toca-mega__atalhos {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 0.5rem 2rem;
		padding-block: 0.875rem;
	}

	.toca-mega__atalho {
		display: inline-flex;
		align-items: center;
		gap: 0.5rem;
		border-radius: 0.375rem;
		color: var(--foreground);
		font-size: 1rem;
		font-weight: 600;
		transition: color 0.15s ease;
	}

	.toca-mega__atalho svg {
		width: 1.125rem;
		height: 1.125rem;
		color: var(--muted-foreground);
	}

	.toca-mega__atalho:hover,
	.toca-mega__atalho:hover svg {
		color: var(--primary);
	}

	/* A partir de 1280px, os apps cabem em duas colunas. */
	@media (min-width: 1280px) {
		.toca-mega__grade {
			grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1.2fr);
			gap: 3rem;
		}

		.toca-mega__apps {
			display: grid;
			grid-template-columns: repeat(2, minmax(0, 1fr));
			gap: 0.25rem 0.5rem;
		}
	}

	/* ---------------------------------------------------- O menu do celular */

	/*
	 * Uma tela fixa embaixo da barra (o topo vem do cabecalho.js), com rolagem
	 * própria: a lista cresce e o pé com o Entrar e o "Agende uma Demo" fica
	 * preso embaixo, sempre à vista.
	 */
	.toca-menu-mobile {
		position: fixed;
		z-index: 49;
		inset: var(--toca-topo-do-menu, 3.5625rem) 0 0;
		display: flex;
		flex-direction: column;
		background: var(--background);
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	.toca-menu-mobile__nav {
		display: flex;
		flex: 1 0 auto;
		flex-direction: column;
	}

	.toca-menu-mobile__lista {
		flex: 1 0 auto;
		padding-block: 0.5rem 1.5rem;
	}

	.toca-menu-mobile__lista > li {
		border-bottom: 1px solid var(--border);
	}

	.toca-menu-mobile__link {
		display: flex;
		min-height: 3.5rem;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
		color: var(--foreground);
		font-size: 1.125rem;
		font-weight: 600;
		list-style: none;
		cursor: pointer;
	}

	.toca-menu-mobile__link::-webkit-details-marker {
		display: none;
	}

	.toca-menu-mobile__link svg {
		width: 1rem;
		height: 1rem;
		flex-shrink: 0;
		color: var(--muted-foreground);
		transition: rotate 0.2s ease;
	}

	.toca-menu-mobile__grupo[open] > .toca-menu-mobile__link svg {
		rotate: 180deg;
	}

	.toca-menu-mobile__filhos {
		display: flex;
		flex-direction: column;
		margin: -0.25rem 0 0.75rem 0.25rem;
		padding-left: 0.75rem;
		border-left: 1px solid var(--border);
	}

	.toca-menu-mobile__filho {
		display: flex;
		min-height: 3rem;
		align-items: center;
		padding-inline: 0.75rem;
		border-radius: 0.5rem;
		color: #4b5563;
		font-size: 1rem;
		font-weight: 500;
	}

	.toca-menu-mobile__filho:hover {
		background: var(--accent);
		color: var(--foreground);
	}

	:is(.toca-menu-mobile__link, .toca-menu-mobile__filho, .toca-menu-mobile__entrar):focus-visible {
		outline: 2px solid var(--ring);
		outline-offset: 2px;
	}

	.toca-menu-mobile__acoes {
		position: sticky;
		bottom: 0;
		border-top: 1px solid var(--border);
		background: var(--background);
		padding-block: 1rem calc(1rem + env(safe-area-inset-bottom, 0px));
	}

	.toca-menu-mobile__botoes {
		display: grid;
		gap: 0.75rem;
	}

	.toca-menu-mobile__entrar {
		display: inline-flex;
		height: 2.75rem;
		align-items: center;
		justify-content: center;
		border-radius: var(--radius-lg, 0.5rem);
		box-shadow: inset 0 0 0 1px var(--border);
		color: var(--foreground);
		font-size: 1rem;
		font-weight: 600;
	}

	.toca-menu-mobile__entrar:hover {
		background: var(--accent);
	}

	@media (min-width: 480px) {
		.toca-menu-mobile__botoes {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}
	}

	@media (min-width: 640px) {
		.toca-menu-mobile__entrar {
			height: 2.5rem;
		}
	}
}

/* ---------------------------------------- Os estados (fora de camada) */

/*
 * Na tela de toque, o toque em "Soluções" abre o painel (o data-aberto do
 * cabecalho.js) e o 2º toque o fecha (o data-fechado vence o hover e o foco
 * que o toque deixa presos no item). A seta gira pelo rotate, como no Tailwind.
 */
.group[data-aberto] > :is(.toca-mega, .toca-submenu) {
	visibility: visible;
	opacity: 1;
}

.group[data-fechado] > :is(.toca-mega, .toca-submenu) {
	visibility: hidden;
	opacity: 0;
}

.group[data-aberto] > a svg {
	rotate: 180deg;
}

.group[data-fechado] > a svg {
	rotate: none;
}

/* Com o menu do celular aberto, a página fica parada atrás dele. */
html.toca-menu-aberto {
	overflow: hidden;
}