/**
 * Subnav de seção — segunda barra de navegação do header.
 * Renderizada por inc/subnav-secao.php, posicionada por js/subnav-secao.js.
 */

/*
 * #meu-header-personalizado já é flex-direction: column, então a barra entra
 * empilhada abaixo do .glow. O gap de 20px é zerado para as duas barras ficarem
 * grudadas, lendo como um bloco único.
 */
#meu-header-personalizado:has(.dg-subnav) {
	align-items: stretch;
	gap: 0;
}

/* Barra principal arredondada só no topo; a subnav fecha o bloco embaixo. */
#meu-header-personalizado:has(.dg-subnav) > .glow {
	border-radius: 8px 8px 0 0 !important;
}

/* O auto-hide do scroll usa top: -200px; com duas barras isso não basta. */
#meu-header-personalizado:has(.dg-subnav).header-escondido {
	top: -320px !important;
}

.dg-subnav {
	width: 100%;
}

/* .glow (style.css) traz o backdrop-filter e a borda translúcida do header. */
.dg-subnav__inner {
	display: flex;
	align-items: center;
	gap: 20px;
	min-height: 44px;
	padding: 5px 20px;
	border-radius: 0 0 8px 8px;
	background-color: rgba(255, 255, 255, 0.50);
	/* .glow já traz border: 1px solid rgba(255,255,255,.1); aqui só a divisória. */
	border-top-color: rgba(2, 2, 2, 0.07);
}

.dg-subnav__section {
	font-family: "DM Sans", sans-serif;
	font-size: 16px;
	font-weight: 700;
	color: #020202;
	text-decoration: none;
	white-space: nowrap;
}

.dg-subnav__list {
	display: flex;
	align-items: center;
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.dg-subnav__list::-webkit-scrollbar {
	display: none;
}

.dg-subnav__item {
	flex: 0 0 auto;
}

.dg-subnav__item a {
	position: relative;
	display: inline-block;
	padding: 6px 0;
	font-family: "DM Sans", sans-serif;
	font-size: 15px;
	font-weight: 500;
	color: #020202;
	text-decoration: none;
	white-space: nowrap;
}

/* Sublinhado animado — mesmo padrão de .line li span::after em style.css. */
.dg-subnav__item a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 0;
	height: 1px;
	background-color: #020202;
	transition: width 0.4s ease-in-out;
}

.dg-subnav__item a:hover::after,
.dg-subnav__item a:focus-visible::after,
.dg-subnav__item.is-active a::after {
	width: 100%;
}

.dg-subnav__item.is-active a {
	font-weight: 700;
}

/* Tablet e mobile: rolagem horizontal com máscara nas bordas. */
@media (max-width: 1024px) {
	.dg-subnav__inner {
		gap: 12px;
		padding: 5px 12px;
	}

	.dg-subnav__list {
		gap: 18px;
		-webkit-mask-image: linear-gradient(to right, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
		mask-image: linear-gradient(to right, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
	}

	.dg-subnav__item a {
		font-size: 14px;
	}
}