/* DVT Users & Challenges Addon – Menu Button block
 *
 * Valores retirados do painel de código do Figma (node 232:7123,
 * Menu-Panel): fundo #222627, rounded-32, ícone circular 48px com borda
 * subtil, título maiúsculas + subtítulo a 50% de opacidade, separador
 * antes da última entrada. Mesma fonte de marca já usada no resto do
 * plugin (GoodDogNewW00-Regular) — ver points-block.css.
 */

@font-face {
	font-family: 'GoodDogNewW00-Regular';
	src: url( '../fonts/GoodDogNewW00-Regular.ttf' ) format( 'truetype' );
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

.dvtuca-menu-block {
		position: relative;
		display: flex;
		justify-content: flex-start;
}

.dvtuca-menu-block--align-left {
		justify-content: flex-start;
}

.dvtuca-menu-block--align-center {
		justify-content: center;
}

.dvtuca-menu-block--align-right {
		justify-content: flex-end;
}

.dvtuca-menu-block__trigger {
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 20px;
	border: none;
	border-radius: 999px;
	background: #222627;
	color: #ffffff;
	font-family: 'GoodDogNewW00-Regular', sans-serif;
	font-size: 16px;
	text-transform: uppercase;
	cursor: pointer;
}

.dvtuca-menu-block__trigger-icon {
	position: relative;
	display: inline-flex;
}

.dvtuca-menu-block__badge {
	position: absolute;
	top: -2px;
	right: -2px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
}

.dvtuca-menu-block__icon-svg,
.dvtuca-menu-block__icon-img {
	width: 24px;
	height: 24px;
	flex: 0 0 auto;
}

.dvtuca-menu-block__panel {
		position: absolute;
		top: calc( 100% + 8px );
		z-index: 100;
	display: flex;
	flex-direction: column;
	gap: 16px;
	width: 279px;
	max-width: calc( 100vw - 32px );
	padding: 24px;
	border-radius: 32px;
	background: #222627;
		box-shadow: 0 10px 15px rgba( 34, 38, 39, 0.4 );
}

.dvtuca-menu-block--align-left .dvtuca-menu-block__panel {
		left: 0;
}

.dvtuca-menu-block--align-center .dvtuca-menu-block__panel {
		left: 50%;
		transform: translateX( -50% );
}

.dvtuca-menu-block--align-right .dvtuca-menu-block__panel {
		right: 0;
}

.dvtuca-menu-block__panel[hidden] {
	display: none;
}

.dvtuca-menu-block__item {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 0;
	border: none;
	background: none;
	color: #ffffff;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
}

.dvtuca-menu-block__item-icon {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	flex: 0 0 auto;
	border: 1px solid rgba( 255, 255, 255, 0.1 );
	border-radius: 40px;
}

.dvtuca-menu-block__item-badge {
	position: absolute;
	top: 2px;
	right: 2px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
}

.dvtuca-menu-block__item-text {
	display: flex;
	flex-direction: column;
}

.dvtuca-menu-block__item-title {
	font-family: 'GoodDogNewW00-Regular', sans-serif;
	font-size: 16px;
	line-height: 28px;
	text-transform: uppercase;
}

.dvtuca-menu-block__item-subtitle {
	font-size: 14px;
	line-height: 24px;
	opacity: 0.5;
}

.dvtuca-menu-block__separator {
	height: 1px;
	/* Espaço extra acima do gap uniforme de 16px do painel (respiro visual
	   antes do último item, a condizer com o Menu-Panel do Figma — lá o
	   efeito vem de um painel de altura fixa com flex-grow, que não temos
	   aqui por o nosso painel crescer com o conteúdo). */
	margin-top: 24px;
	background: rgba( 255, 255, 255, 0.3 );
}

.dvtuca-menu-block__item--profile .dvtuca-menu-block__item-icon {
	width: 44px;
	height: 44px;
}

.dvtuca-menu-block__item--profile .dvtuca-menu-block__icon-img {
	width: 32px;
	height: 32px;
	border-radius: 40px;
	object-fit: cover;
}

/* Mobile (dentro do cabeçalho): o botão fica só com o ícone (a palavra "Menu" desaparece e ganha-se
 * espaço no cabeçalho). O texto continua no DOM, só escondido à vista, para os
 * leitores de ecrã continuarem a anunciar o botão. */
@media ( max-width: 1024px ) {
	.dt-hf-header .dvtuca-menu-block__trigger {
		gap: 0;
		padding: 12px;
	}

	.dt-hf-header .dvtuca-menu-block__trigger-text {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip-path: inset( 50% );
		white-space: nowrap;
	}
}