/*
 * Colapso responsivo: abaixo de 768px a sidebar sai do grid e vira um
 * painel off-canvas, acionado pelo botão "Iniciar" (start-menu.php).
 */

@media (max-width: 768px) {
	.site-wrapper {
		grid-template-columns: 1fr;
		grid-template-areas:
			'header'
			'content'
			'footer';
	}

	.start-button {
		display: inline-flex;
		align-items: center;
		font-family: var(--mariombn-font-pixel);
		font-size: 0.7rem;
		color: var(--mariombn-color-chrome-text);
		background: var(--mariombn-color-panel-raised);
		border: 2px solid;
		border-color: #8a5ac0 #1a0530 #1a0530 #8a5ac0;
		padding: 0.5rem 0.9rem;
	}

	.start-button:active,
	.start-button[aria-expanded='true'] {
		border-color: #1a0530 #8a5ac0 #8a5ac0 #1a0530;
	}

	.site-sidebar {
		position: fixed;
		top: 0;
		bottom: 0;
		right: 0;
		width: min(80vw, 320px);
		z-index: 100;
		overflow-y: auto;
		transform: translateX(100%);
		transition: transform 0.25s ease-out;
		box-shadow: -4px 0 0 var(--mariombn-color-accent-magenta);
		/* No desktop o fundo "starfield" do body mostra entre os widgets de
		   propósito (faz parte do caos); como painel off-canvas isso deixaria
		   o conteúdo da página (escurecido pelo scrim) vazar pelos vãos —
		   por isso só aqui o painel ganha um fundo opaco. */
		background: var(--mariombn-color-bg);
	}

	.site-sidebar.is-open {
		transform: translateX(0);
	}

	body.retro-menu-open {
		overflow: hidden;
	}

	/* Scrim puramente visual — o fechamento por clique-fora é tratado via
	   listener no document (mobile-menu.js), então pointer-events:none
	   aqui não impede nada. */
	body.retro-menu-open::before {
		content: '';
		position: fixed;
		inset: 0;
		background: rgba(10, 0, 16, 0.6);
		z-index: 99;
		pointer-events: none;
	}

	@media (prefers-reduced-motion: reduce) {
		.site-sidebar {
			transition: none;
		}
	}
}

@media (min-width: 769px) {
	.site-sidebar {
		transform: none;
	}
}