/*
Theme Name: Ministério da Magia
Template: twentytwentyfive
Description: Tema filho escuro do Ministério da Magia.
Version: 1.0.8
Text Domain: ministerio
*/

/* Página inicial (templates/front-page.html): logo grande e chamada para o cadastro, centralizados na tela. */
.ministerio-inicio {
	min-height: 100vh;
	min-height: 100dvh;
	box-sizing: border-box;
}

/* Barra do topo (M à esquerda, menu hambúrguer à direita) sobreposta, para não empurrar a logo grande para baixo. */
.ministerio-inicio__menu {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	z-index: 10;
	box-sizing: border-box;
	align-items: center;
}

/* O arquivo do M também é quadrado com margem preta; o recorte deixa só a letra. */
.ministerio-inicio__m {
	margin: 0;
}

.ministerio-inicio__m img {
	display: block;
	width: 64px;
	height: auto;
	aspect-ratio: 8 / 5;
	object-fit: cover;
}

/* O arquivo da logo é quadrado com muita margem preta em cima e embaixo; o recorte tira essa sobra. */
.ministerio-inicio__logo img {
	width: min(480px, 80vw);
	height: auto;
	aspect-ratio: 10 / 7;
	object-fit: cover;
}

.ministerio-inicio__descricao {
	max-width: 36rem;
	color: var(--wp--preset--color--contrast);
}

/* Menu hambúrguer aberto: painel branco com letra preta, sobreposto no canto em vez de tela cheia. */
.wp-block-navigation__responsive-container.is-menu-open {
	top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--wp--preset--spacing--30));
	right: var(--wp--preset--spacing--30);
	bottom: auto;
	left: auto;
	width: max-content;
	max-width: calc(100vw - 2 * var(--wp--preset--spacing--30));
	padding: var(--wp--preset--spacing--30) !important;
	border-radius: 8px;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
	background-color: #fff !important;
	color: #000 !important;
}

.wp-block-navigation__responsive-container.is-menu-open a,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	color: #000 !important;
}

/* O WordPress trava a rolagem com o menu aberto; isso some com a barra de rolagem e faz o site pular. */
html.has-modal-open {
	overflow: visible;
}

/* Logo horizontal no cabeçalho das páginas internas (parts/header.html). */
.ministerio-logo-horizontal {
	margin: 0;
}

.ministerio-logo-horizontal img {
	display: block;
	width: auto;
	height: 40px;
	max-width: 60vw;
	object-fit: contain;
}

/* O link em volta da logo criava uma sobra embaixo e o menu ficava 3px abaixo do centro dela. */
.ministerio-inicio__m a,
.ministerio-logo-horizontal a {
	display: block;
}

/* Traços do ícone do menu (3 linhas) mais grossos: o contorno engrossa as barras do SVG do WordPress. */
.wp-block-navigation__responsive-container-open svg path {
	stroke: currentColor;
	stroke-width: 0.75;
}