/* hyp/submenu — protótipo linhas 60–94 / 530–580, spec 01. */

.hyp-submenu {
	position: sticky;
	top: var(--hyp-sticky-top, 0px);
	z-index: 50;
	background: rgba(255, 255, 255, 0.96);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	border-bottom: 1px solid var(--hyp-hair);
}

.hyp-submenu .hyp-submenu__inner {
	padding-top: 12px;
	padding-bottom: 12px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
	flex-wrap: wrap;
}

.hyp-submenu .hyp-submenu__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 26px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hyp-submenu .hyp-submenu__list li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.hyp-submenu .hyp-submenu__link {
	display: inline-block;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--hyp-navy);
	padding: 6px 0;
	border-bottom: 2px solid transparent;
	line-height: normal;
	transition: border-color 0.2s, color 0.2s;
}

.hyp-submenu .hyp-submenu__link:hover {
	border-bottom-color: var(--hyp-accent);
	color: var(--hyp-navy-deep);
}

.hyp-submenu .hyp-submenu__logo {
	order: 2;
	flex: none;
	display: block;
	height: 26px;
	width: auto;
}

.hyp-submenu .hyp-submenu__trigger {
	display: none;
}

/* ---------- < 768px: dropdown ---------- */
@media (max-width: 767.98px) {
	/* Sem JS a lista fica toda aberta: fixa no topo taparia o ecrã — fica no fluxo da página. */
	.hyp-submenu:not(.is-ready) {
		position: static;
	}

	.hyp-submenu .hyp-submenu__inner {
		display: block;
	}

	.hyp-submenu .hyp-submenu__logo {
		height: 22px;
		margin-bottom: 10px;
	}

	.hyp-submenu.is-ready .hyp-submenu__trigger {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		border: 1px solid var(--hyp-border-ctrl);
		--hyp-btn-radius: var(--hyp-r-row);
		background: #ffffff;
		padding: 14px 18px;
		min-height: 48px;
	}

	.hyp-submenu .hyp-submenu__trigger-text {
		font-size: 12px;
		font-weight: 600;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: var(--hyp-navy);
	}

	.hyp-submenu .hyp-submenu__chevron {
		font-size: 13px;
		color: var(--hyp-accent);
		transition: transform 0.2s;
	}

	.hyp-submenu .hyp-submenu__trigger[aria-expanded="true"] .hyp-submenu__chevron {
		transform: rotate(180deg);
	}

	.hyp-submenu .hyp-submenu__list {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		margin-top: 8px;
		border: 1px solid var(--hyp-border-card);
		border-radius: var(--hyp-r-row);
		overflow: hidden;
	}

	/* Aberta (com JS): nunca maior do que o ecrã por baixo do header + botão — com muitas secções, rola. */
	.hyp-submenu.is-ready .hyp-submenu__list.is-open {
		max-height: calc(100dvh - var(--hyp-sticky-top, 0px) - 96px);
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	/* Com JS: fechado por omissão. */
	.hyp-submenu.is-ready .hyp-submenu__list:not(.is-open) {
		display: none;
	}

	.hyp-submenu .hyp-submenu__link {
		display: flex;
		align-items: center;
		min-height: 48px;
		padding: 15px 18px;
		font-size: 13.5px;
		font-weight: 400;
		letter-spacing: normal;
		text-transform: none;
		color: var(--hyp-navy);
		border-bottom: 1px solid var(--hyp-hair-2);
	}

	.hyp-submenu .hyp-submenu__link:hover {
		background: var(--hyp-bg-alt);
		border-bottom-color: var(--hyp-hair-2);
		color: var(--hyp-navy);
	}

	.hyp-submenu .hyp-submenu__link:focus-visible {
		outline-offset: -2px;
	}
}