/*
 * Menu de Cabeçalho Dinâmico — estilos base (mobile first).
 *
 * As regras a partir do ponto de quebra ficam em frontend-desktop.css, carregado com
 * media="(min-width: <breakpoint>px)". As variáveis (cores, alturas, duração, z-index)
 * são emitidas inline por MCD_Assets::inline_css().
 */

:root {
	--mcd-height: var(--mcd-h-m, 60px);
}

.mcd-header,
.mcd-header *,
.mcd-header *::before,
.mcd-header *::after {
	box-sizing: border-box;
}

.mcd-header {
	--mcd-dir: 1;
	--mcd-ease: cubic-bezier(0.22, 0.8, 0.3, 1);
	--mcd-line: rgba(15, 23, 42, 0.12);
	--mcd-wash: rgba(15, 23, 42, 0.05);

	position: relative;
	z-index: var(--mcd-z, 9990);
	width: 100%;
	height: var(--mcd-height);
	background: var(--mcd-bg, #fff);
	color: var(--mcd-text, #1b2330);
	margin: 0;
	padding: 0;
	border: 0;
	font: inherit;
	line-height: 1.4;
}

@supports (color: color-mix(in srgb, red, blue)) {
	.mcd-header {
		--mcd-line: color-mix(in srgb, var(--mcd-text, #1b2330) 14%, transparent);
		--mcd-wash: color-mix(in srgb, var(--mcd-accent, #0a58ca) 7%, transparent);
	}
}

html[dir="rtl"] .mcd-header {
	--mcd-dir: -1;
}

/* Cabeçalho fixo: a posição vertical respeita a barra administrativa (o JS refina em telas pequenas). */
.mcd-header.mcd-is-sticky {
	position: fixed;
	top: var(--mcd-top, 0px);
	left: 0;
	right: 0;
	transition: transform var(--mcd-dur, 300ms) var(--mcd-ease), box-shadow var(--mcd-dur, 300ms) var(--mcd-ease);
}

body.admin-bar .mcd-header {
	--mcd-top: 32px;
}

@media (max-width: 782px) {
	body.admin-bar .mcd-header {
		--mcd-top: 46px;
	}
}

/* Estados: .is-visible (padrão), .is-hidden, .is-menu-open, .is-scrolled */
.mcd-header.mcd-is-sticky.is-hidden {
	transform: translate3d(0, calc(-100% - var(--mcd-top, 0px) - 8px), 0);
	box-shadow: none;
}

.mcd-header.is-scrolled:not(.is-hidden) {
	box-shadow: 0 1px 0 var(--mcd-line), 0 12px 32px -14px rgba(15, 23, 42, 0.28);
}

.mcd-header.is-menu-open {
	/* transform diferente de "none" criaria um bloco de contenção para o painel fixo */
	transform: none !important;
}

.mcd-header.mcd-no-anim,
.mcd-header.mcd-no-anim * {
	transition: none !important;
}

.mcd-spacer {
	display: block;
	width: 100%;
	height: var(--mcd-height);
	pointer-events: none;
}

/* Link "pular para o conteúdo" (o JS descobre o destino e remove [hidden]). */
.mcd-skip-link {
	position: absolute;
	top: -4rem;
	inset-inline-start: 1rem;
	z-index: 5;
	padding: 0.65rem 1rem;
	border-radius: 0 0 0.5rem 0.5rem;
	background: var(--mcd-text);
	color: var(--mcd-bg);
	font-weight: 600;
	text-decoration: none;
}

.mcd-skip-link:focus {
	top: 0;
}

.mcd-skip-link[hidden] {
	display: none;
}

.mcd-header :where(a, button):focus-visible {
	outline: 3px solid var(--mcd-accent);
	outline-offset: 2px;
}

/* O contorno de foco do tema (ex.: pontilhado em button:focus) não vaza para os controles do plugin. */
#mcd-header :is(.mcd-toggle, .mcd-close, .mcd-submenu-toggle, .mcd-link, .mcd-brand a):focus:not(:focus-visible) {
	outline: 0;
}

.mcd-menu :where(a, button):focus-visible {
	outline-offset: -3px;
}

/* Barra */
.mcd-header__inner {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	height: 100%;
	max-width: var(--mcd-max, none);
	margin-inline: auto;
	padding-inline: clamp(1rem, 4vw, 2rem);
}

.mcd-brand {
	display: flex;
	flex: 0 1 auto;
	align-items: center;
	min-width: 0;
}

.mcd-brand a {
	display: inline-flex;
	align-items: center;
	color: var(--mcd-text);
	text-decoration: none;
}

.mcd-brand a:hover,
.mcd-brand a:focus,
.mcd-brand a:active {
	background: transparent;
	color: var(--mcd-text);
	text-decoration: none;
}

.mcd-brand__text {
	overflow: hidden;
	font-size: 1.125rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mcd-brand .custom-logo {
	display: block;
	width: auto;
	height: auto;
	max-width: min(200px, 48vw);
	max-height: calc(var(--mcd-height) - 20px);
}

/*
 * Botões do plugin: seletores com #mcd-header (o ID é fixo e único na página) e reset das
 * propriedades que temas costumam impor a <button> (ex.: button:not(:hover):not(:active), 0,3,1).
 */

/* Menu Toggle (hambúrguer → X) */
#mcd-header .mcd-toggle {
	position: relative;
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	min-width: 0;
	min-height: 0;
	margin: 0;
	margin-inline-end: -0.5rem;
	padding: 0;
	border: 0;
	border-radius: 0.625rem;
	background: transparent;
	box-shadow: none;
	color: var(--mcd-text);
	font: inherit;
	line-height: 1;
	letter-spacing: normal;
	text-shadow: none;
	text-transform: none;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: background-color 0.2s ease;
}

#mcd-header .mcd-toggle:hover {
	background: var(--mcd-wash);
	color: var(--mcd-text);
}

.mcd-toggle__bars {
	position: relative;
	display: block;
	width: 22px;
	height: 16px;
}

.mcd-toggle__bars span {
	position: absolute;
	inset-inline: 0;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
	transition: transform 0.3s var(--mcd-ease), opacity 0.2s ease, top 0.3s var(--mcd-ease);
}

.mcd-toggle__bars span:nth-child(1) {
	top: 0;
}

.mcd-toggle__bars span:nth-child(2) {
	top: 7px;
}

.mcd-toggle__bars span:nth-child(3) {
	top: 14px;
}

.is-menu-open .mcd-toggle__bars span:nth-child(1) {
	top: 7px;
	transform: rotate(45deg);
}

.is-menu-open .mcd-toggle__bars span:nth-child(2) {
	opacity: 0;
	transform: scaleX(0.2);
}

.is-menu-open .mcd-toggle__bars span:nth-child(3) {
	top: 7px;
	transform: rotate(-45deg);
}

/* Fundo escurecido atrás do painel */
.mcd-overlay {
	position: fixed;
	inset: var(--mcd-top, 0px) 0 0 0;
	z-index: 2;
	background: rgba(8, 12, 20, 0.5);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--mcd-dur, 300ms) ease, visibility 0s linear var(--mcd-dur, 300ms);
}

.mcd-header.is-menu-open .mcd-overlay {
	opacity: 1;
	visibility: visible;
	transition-delay: 0s;
}

.mcd-mobile-dropdown .mcd-overlay {
	top: calc(var(--mcd-top, 0px) + var(--mcd-height));
}

/* Painel de navegação (mobile): fechado = visibility:hidden (fora da ordem de tabulação). */
.mcd-panel {
	position: fixed;
	z-index: 3;
	display: flex;
	flex-direction: column;
	overflow-y: auto;
	background: var(--mcd-sub-bg);
	color: var(--mcd-text);
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	visibility: hidden;
	transition: transform var(--mcd-dur, 300ms) var(--mcd-ease), opacity var(--mcd-dur, 300ms) ease, visibility 0s linear var(--mcd-dur, 300ms);
}

.mcd-header.is-menu-open .mcd-panel {
	visibility: visible;
	transition-delay: 0s;
}

/* Estilo 1: painel lateral */
.mcd-mobile-drawer .mcd-panel {
	top: var(--mcd-top, 0px);
	inset-inline-end: 0;
	width: min(88vw, 23.75rem);
	height: calc(100vh - var(--mcd-top, 0px));
	height: calc(100dvh - var(--mcd-top, 0px));
	transform: translateX(calc(100% * var(--mcd-dir)));
}

.mcd-mobile-drawer.mcd-drawer-left .mcd-panel {
	inset-inline-end: auto;
	inset-inline-start: 0;
	transform: translateX(calc(-100% * var(--mcd-dir)));
}

.mcd-mobile-drawer.is-menu-open .mcd-panel {
	transform: none;
	box-shadow: -16px 0 48px -12px rgba(8, 12, 20, 0.35);
}

.mcd-mobile-drawer.mcd-drawer-left.is-menu-open .mcd-panel {
	box-shadow: 16px 0 48px -12px rgba(8, 12, 20, 0.35);
}

/* Estilo 2: dropdown sob o cabeçalho */
.mcd-mobile-dropdown .mcd-panel {
	position: absolute;
	top: 100%;
	inset-inline: 0;
	max-height: calc(100vh - var(--mcd-height) - var(--mcd-top, 0px));
	max-height: calc(100dvh - var(--mcd-height) - var(--mcd-top, 0px));
	border-top: 1px solid var(--mcd-line);
	opacity: 0;
	transform: translateY(-10px);
}

.mcd-mobile-dropdown.is-menu-open .mcd-panel {
	opacity: 1;
	transform: none;
	box-shadow: 0 24px 40px -20px rgba(8, 12, 20, 0.4);
}

.mcd-mobile-dropdown .mcd-panel__head {
	display: none;
}

/* Estilo 3: menu vertical em tela cheia */
.mcd-mobile-fullscreen .mcd-panel {
	inset: var(--mcd-top, 0px) 0 0 0;
	opacity: 0;
	transform: translateY(14px);
}

.mcd-mobile-fullscreen.is-menu-open .mcd-panel {
	opacity: 1;
	transform: none;
}

.mcd-panel__head {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: space-between;
	min-height: var(--mcd-height);
	padding-inline: 1.25rem 0.75rem;
	border-bottom: 1px solid var(--mcd-line);
}

.mcd-panel__title {
	font-size: 1rem;
	font-weight: 600;
}

#mcd-header .mcd-close {
	position: relative;
	width: 44px;
	height: 44px;
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0.625rem;
	background: transparent;
	box-shadow: none;
	color: var(--mcd-text);
	font: inherit;
	line-height: 1;
	text-shadow: none;
	text-transform: none;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

#mcd-header .mcd-close:hover {
	background: var(--mcd-wash);
	color: var(--mcd-text);
}

.mcd-close__x::before,
.mcd-close__x::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 20px;
	height: 2px;
	margin: -1px 0 0 -10px;
	border-radius: 2px;
	background: currentColor;
	transform: rotate(45deg);
}

.mcd-close__x::after {
	transform: rotate(-45deg);
}

/* Lista do menu (mobile: coluna; submenus em acordeão) */
.mcd-menu,
.mcd-menu ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.mcd-menu {
	display: flex;
	flex-direction: column;
	padding-block: 0.25rem 2rem;
}

.mcd-menu li {
	position: relative;
	margin: 0;
	padding: 0;
}

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

.mcd-menu > li:last-child {
	border-bottom: 0;
}

.mcd-link {
	display: flex;
	align-items: center;
	min-height: 3rem;
	padding: 0.75rem 1.25rem;
	border-inline-start: 3px solid transparent;
	color: var(--mcd-link);
	font-weight: 500;
	text-decoration: none;
	transition: color 0.2s ease, background-color 0.2s ease;
}

.mcd-link:visited {
	color: var(--mcd-link);
}

/* Temas costumam dar cor/fundo/sublinhado a a:focus e a:hover: o plugin define os seus estados. */
.mcd-link:focus {
	background: transparent;
	color: var(--mcd-link);
	text-decoration: none;
}

.mcd-link:active {
	text-decoration: none;
}

.mcd-link:hover {
	background: var(--mcd-wash);
	color: var(--mcd-hover);
	text-decoration: none;
}

.mcd-link:focus-visible {
	background: var(--mcd-wash);
}

.mcd-menu .current-menu-item > .mcd-link,
.mcd-menu .current-menu-ancestor > .mcd-link,
.mcd-menu .current-menu-parent > .mcd-link,
.mcd-menu .current_page_item > .mcd-link {
	border-inline-start-color: var(--mcd-accent);
	color: var(--mcd-accent);
	font-weight: 600;
}

/* Item pai: link + botão de expansão lado a lado; o submenu ocupa a linha de baixo. */
.mcd-menu li.menu-item-has-children {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
}

.mcd-menu li.menu-item-has-children > .mcd-sub-wrap {
	grid-column: 1 / -1;
}

#mcd-header .mcd-submenu-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3.25rem;
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-inline-start: 1px solid var(--mcd-line);
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: var(--mcd-link);
	font: inherit;
	line-height: 1;
	text-shadow: none;
	text-transform: none;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

#mcd-header .mcd-submenu-toggle:hover {
	background: var(--mcd-wash);
	color: var(--mcd-hover);
}

.mcd-caret {
	display: block;
	width: 0.5rem;
	height: 0.5rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform 0.3s var(--mcd-ease);
}

.mcd-menu li.is-open > .mcd-submenu-toggle .mcd-caret {
	transform: translateY(2px) rotate(-135deg);
}

/* Submenu em acordeão (altura animada via grid 0fr → 1fr; fechado = visibility:hidden). */
.mcd-sub-wrap {
	display: grid;
	grid-template-rows: 0fr;
	visibility: hidden;
	transition: grid-template-rows var(--mcd-dur, 300ms) var(--mcd-ease), visibility 0s linear var(--mcd-dur, 300ms);
}

.mcd-sub-wrap > .mcd-submenu {
	min-height: 0;
	overflow: hidden;
	background: var(--mcd-wash);
}

.mcd-menu li.is-open > .mcd-sub-wrap {
	grid-template-rows: 1fr;
	visibility: visible;
	transition-delay: 0s;
}

.mcd-submenu > li {
	border-top: 1px solid var(--mcd-line);
}

.mcd-submenu .mcd-link {
	min-height: 2.75rem;
	padding-block: 0.6rem;
	font-weight: 400;
}

.mcd-submenu--level-1 .mcd-link {
	padding-inline-start: 2.25rem;
}

.mcd-submenu--level-2 .mcd-link {
	padding-inline-start: 3.25rem;
}

.mcd-submenu--level-3 .mcd-link {
	padding-inline-start: 4.25rem;
}

.mcd-submenu--level-4 .mcd-link {
	padding-inline-start: 5.25rem;
}

.mcd-submenu--level-5 .mcd-link {
	padding-inline-start: 6.25rem;
}

/* Rolagem da página travada enquanto o painel mobile está aberto (a rolagem do painel continua). */
html.mcd-scroll-locked,
html.mcd-scroll-locked body {
	overflow: hidden !important;
}

html.mcd-scroll-locked body,
html.mcd-scroll-locked .mcd-header.mcd-is-sticky {
	padding-inline-end: var(--mcd-sbw, 0px);
}

@media (prefers-reduced-motion: reduce) {
	.mcd-header,
	.mcd-header *,
	.mcd-header *::before,
	.mcd-header *::after {
		transition-duration: 0.01ms !important;
		transition-delay: 0s !important;
		animation: none !important;
	}
}

@media print {
	.mcd-header,
	.mcd-spacer {
		display: none !important;
	}
}

@media (forced-colors: active) {
	#mcd-header .mcd-toggle,
	#mcd-header .mcd-close,
	#mcd-header .mcd-submenu-toggle {
		border: 1px solid ButtonText;
	}

	.mcd-toggle__bars span,
	.mcd-close__x::before,
	.mcd-close__x::after {
		background: ButtonText;
	}
}