/*
 * Menu de Cabeçalho Dinâmico — regras de desktop.
 *
 * Carregado com media="(min-width: <breakpoint>px)" (veja MCD_Assets::register()),
 * portanto o ponto de quebra é configurável sem gerar CSS em tempo de execução.
 * Sobrescreve o layout mobile-first de frontend.css.
 */

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

body .mcd-header .mcd-toggle,
body .mcd-header .mcd-overlay,
body .mcd-header .mcd-panel__head {
	display: none !important;
}

.mcd-header__inner {
	gap: 2rem;
}

.mcd-brand .custom-logo {
	max-height: calc(var(--mcd-height) - 24px);
}

/* O painel deixa de ser "gaveta" e vira a navegação em linha. */
body .mcd-header.mcd-header .mcd-panel {
	position: static;
	inset: auto;
	z-index: auto;
	display: block;
	flex: 1 1 auto;
	width: auto;
	min-width: 0;
	height: auto;
	max-height: none;
	border: 0;
	background: transparent;
	box-shadow: none;
	opacity: 1;
	overflow: visible;
	transform: none;
	transition: none;
	visibility: visible;
}

body .mcd-header .mcd-menu {
	flex-direction: row;
	align-items: stretch;
	justify-content: flex-end;
	gap: 0.125rem;
	height: var(--mcd-height);
	padding: 0;
}

/* Alinhamento dos itens */
.mcd-align-left .mcd-menu {
	justify-content: flex-start;
	margin-inline-start: clamp(1rem, 3vw, 2.5rem);
}

.mcd-align-center .mcd-header__inner {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
}

.mcd-align-center .mcd-brand {
	grid-column: 1;
	justify-self: start;
}

.mcd-align-center .mcd-panel {
	grid-column: 2;
}

.mcd-align-center .mcd-menu {
	justify-content: center;
}

/* Itens de primeiro nível */
body .mcd-header .mcd-menu > li {
	display: flex;
	align-items: stretch;
	border: 0;
}

body .mcd-header .mcd-menu li.menu-item-has-children {
	display: flex;
	align-items: stretch;
}

body .mcd-header .mcd-menu > li > .mcd-link {
	position: relative;
	align-items: center;
	min-height: 0;
	padding: 0 0.9rem;
	border: 0;
	background: transparent;
	font-size: 0.95rem;
}

.mcd-menu > li > .mcd-link::after {
	content: "";
	position: absolute;
	inset-inline: 0.9rem;
	bottom: calc(var(--mcd-height) * 0.24);
	height: 2px;
	border-radius: 2px;
	background: var(--mcd-accent);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.28s var(--mcd-ease);
}

html[dir="rtl"] .mcd-menu > li > .mcd-link::after {
	transform-origin: right center;
}

body .mcd-header .mcd-menu > li:hover > .mcd-link,
body .mcd-header .mcd-menu > li.is-open > .mcd-link,
body .mcd-header .mcd-menu > li > .mcd-link:focus-visible {
	background: transparent;
	color: var(--mcd-hover);
}

.mcd-menu > li:hover > .mcd-link::after,
.mcd-menu > li.is-open > .mcd-link::after,
.mcd-menu > li > .mcd-link:focus-visible::after,
.mcd-menu > .current-menu-item > .mcd-link::after,
.mcd-menu > .current-menu-ancestor > .mcd-link::after,
.mcd-menu > .current-menu-parent > .mcd-link::after,
.mcd-menu > .current_page_item > .mcd-link::after {
	transform: scaleX(1);
}

/* Botão de expansão: seta discreta ao lado do link (e seta lateral nos flyouts). */
#mcd-header .mcd-submenu-toggle {
	width: 1.75rem;
	margin-inline-start: -0.65rem;
	border: 0;
	background: transparent;
	color: var(--mcd-link);
}

#mcd-header .mcd-menu > li > .mcd-submenu-toggle {
	align-self: center;
	height: 2rem;
	border-radius: 0.5rem;
}

#mcd-header .mcd-menu > li:hover > .mcd-submenu-toggle,
#mcd-header .mcd-menu > li.is-open > .mcd-submenu-toggle {
	color: var(--mcd-hover);
}

/* Submenu de 1º nível: dropdown logo abaixo da barra. */
body .mcd-header .mcd-sub-wrap {
	position: absolute;
	top: 100%;
	inset-inline-start: 0;
	z-index: 10;
	display: block;
	min-width: 15rem;
	max-width: min(24rem, calc(100vw - 1rem));
	border: 1px solid var(--mcd-line);
	border-radius: 0 0 0.875rem 0.875rem;
	background: var(--mcd-sub-bg);
	box-shadow: 0 28px 56px -20px rgba(8, 12, 20, 0.35);
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 0.22s ease, transform 0.28s var(--mcd-ease), visibility 0s linear 0.28s;
	visibility: hidden;
}

body .mcd-header li.is-open > .mcd-sub-wrap {
	opacity: 1;
	transform: none;
	transition-delay: 0s;
	visibility: visible;
}

body .mcd-header .mcd-sub-wrap > .mcd-submenu {
	min-height: auto;
	padding: 0.5rem;
	background: transparent;
	overflow: visible;
}

body .mcd-header .mcd-submenu > li {
	border: 0;
}

body .mcd-header .mcd-submenu .mcd-link {
	min-height: 0;
	padding: 0.6rem 0.85rem;
	border: 0;
	border-radius: 0.5rem;
	font-size: 0.925rem;
	font-weight: 400;
}

body .mcd-header .mcd-submenu .mcd-link:hover,
body .mcd-header .mcd-submenu .mcd-link:focus-visible,
body .mcd-header .mcd-submenu li.is-open > .mcd-link {
	background: var(--mcd-wash);
	color: var(--mcd-hover);
}

body .mcd-header .mcd-submenu .current-menu-item > .mcd-link,
body .mcd-header .mcd-submenu .current-menu-ancestor > .mcd-link {
	color: var(--mcd-accent);
	font-weight: 600;
}

body .mcd-header .mcd-submenu li.menu-item-has-children > .mcd-link {
	flex: 1 1 auto;
}

#mcd-header .mcd-submenu .mcd-submenu-toggle {
	width: 2rem;
	margin: 0;
	border-radius: 0.5rem;
}

/* Níveis 2+: flyout lateral; a seta aponta para o lado em que o submenu abre. */
body .mcd-header .mcd-submenu .mcd-caret,
body .mcd-header .mcd-submenu li.is-open > .mcd-submenu-toggle .mcd-caret {
	transform: rotate(-45deg);
}

html[dir="rtl"] body .mcd-header .mcd-submenu .mcd-caret,
html[dir="rtl"] body .mcd-header .mcd-submenu li.is-open > .mcd-submenu-toggle .mcd-caret {
	transform: rotate(135deg);
}

/* O <li> fica recuado (padding .5rem + borda 1px) em relação ao cartão pai: compensa para sobrepor só ~4px. */
body .mcd-header .mcd-sub-wrap .mcd-sub-wrap {
	top: -0.5rem;
	inset-inline-start: calc(100% + 0.5rem + 1px - 0.25rem);
	border-radius: 0.875rem;
}

/* Classes aplicadas pelo JS quando o submenu ultrapassaria a janela. */
body .mcd-header .mcd-sub-wrap.mcd-align-end {
	inset-inline-start: auto;
	inset-inline-end: 0;
}

body .mcd-header .mcd-sub-wrap .mcd-sub-wrap.mcd-flip {
	inset-inline-start: auto;
	inset-inline-end: calc(100% + 0.5rem + 1px - 0.25rem);
}

/* Flyout invertido: a seta do item pai aponta para o lado em que o submenu abre. */
#mcd-header .mcd-submenu li.mcd-flipped > .mcd-submenu-toggle .mcd-caret,
#mcd-header .mcd-submenu li.mcd-flipped.is-open > .mcd-submenu-toggle .mcd-caret {
	transform: rotate(135deg);
}

html[dir="rtl"] #mcd-header .mcd-submenu li.mcd-flipped > .mcd-submenu-toggle .mcd-caret,
html[dir="rtl"] #mcd-header .mcd-submenu li.mcd-flipped.is-open > .mcd-submenu-toggle .mcd-caret {
	transform: rotate(-45deg);
}