/* Mobile navigation overlay (Figma 2:2259). Motion per DT HANDOFF — Menu overlay motion. */

.dt-menu-toggle {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	color: var(--e-global-color-warmwhite);
}

.dt-menu-toggle svg {
	width: 24px;
	height: 24px;
}

/* <dialog> is a full-viewport transparent layer holding our own backdrop + panel. */
.dt-menu {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--e-global-color-warmwhite);
	overflow: hidden;
}

.dt-menu::backdrop {
	background: transparent;
}

.dt-menu .dt-menu__backdrop {
	position: absolute;
	inset: 0;
	background: color-mix(in srgb, var(--e-global-color-obsidian) 72%, transparent);
	opacity: 0;
	transition: opacity var(--dt-dur-micro) linear;
}

.dt-menu .dt-menu__panel {
	/* Figma 2:2259 is a full-width 390px panel, natural height (taller than the viewport → scrolls).
	   24px / 32px padding measured from the frame edge, so subtract the 1px border. */
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	gap: 32px;
	padding: calc(23px + env(safe-area-inset-top, 0px)) calc(23px + env(safe-area-inset-right, 0px)) calc(31px + env(safe-area-inset-bottom, 0px)) calc(23px + env(safe-area-inset-left, 0px));
	background: var(--e-global-color-obsidian);
	border: 1px solid var(--e-global-color-border);
	border-radius: 24px;
	overflow-y: auto;
	overscroll-behavior: contain;
	transform: translateX(100%);
	transition: transform var(--dt-dur-overlay) var(--dt-ease-entrance);
}

/* Tablet: keep the drawn 390px panel width and let the backdrop show beside it. */
@media (min-width: 768px) {
	.dt-menu .dt-menu__panel {
		left: auto;
		width: 390px;
	}
}

.dt-menu.is-open .dt-menu__backdrop {
	opacity: 1;
}

.dt-menu.is-open .dt-menu__panel {
	transform: none;
}

/* Close reverses over 240ms with UI easing. */
.dt-menu.is-closing .dt-menu__backdrop {
	transition-duration: var(--dt-dur-ui);
}

.dt-menu.is-closing .dt-menu__panel {
	transition: transform var(--dt-dur-ui) var(--dt-ease-ui);
}

/* No-JS fallback: the hamburger links to #id and :target shows the panel statically. */
html:not(.dt-js) .dt-menu:target {
	display: block;
	z-index: 1000;
}

html:not(.dt-js) .dt-menu:target .dt-menu__backdrop {
	opacity: 1;
}

html:not(.dt-js) .dt-menu:target .dt-menu__panel {
	transform: none;
}

html.dt-scroll-lock {
	overflow: hidden;
}

/* Top row: logo + 44px round close. */
.dt-menu .dt-menu__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.dt-menu .dt-menu__logo img {
	display: block;
	width: 40px;
	height: 30px;
	object-fit: cover;
}

.dt-menu .dt-menu__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 22px;
	background: var(--e-global-color-deepplum);
	border: 1px solid var(--e-global-color-border);
	color: var(--e-global-color-warmwhite);
	transition: border-color var(--dt-dur-micro) var(--dt-ease-ui);
}

.dt-menu .dt-menu__close:hover {
	border-color: var(--e-global-color-warmwhite);
}

.dt-menu .dt-menu__close svg {
	width: 16px;
	height: 16px;
}

/* Nav list: 28px Outfit 900,
full labels wrap. */
.dt-menu .dt-menu__list,
.dt-menu .dt-menu__utility {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dt-menu .dt-menu__list a {
	display: block;
	/* Figma 12px includes the 1px inside stroke. The end side also gives back the 1px
	   of trailing tracking CSS adds after the last letter (Figma doesn't), so labels
	   break where Figma breaks them. */
	padding: 11px;
	padding-inline-end: calc(11px - var(--e-global-typography-dt_menu_xl-letter-spacing, 0px));
	border: 1px solid var(--e-global-color-border);
	border-radius: 16px;
	background: var(--e-global-color-obsidian);
	color: var(--e-global-color-warmwhite);
	font-family: var(--e-global-typography-dt_menu_xl-font-family), sans-serif;
	font-size: var(--e-global-typography-dt_menu_xl-font-size);
	font-weight: var(--e-global-typography-dt_menu_xl-font-weight);
	text-transform: var(--e-global-typography-dt_menu_xl-text-transform);
	letter-spacing: var(--e-global-typography-dt_menu_xl-letter-spacing);
	line-height: 1.26;
	text-decoration: none;
	overflow-wrap: anywhere;
	transition: color var(--dt-dur-micro) var(--dt-ease-ui), border-color var(--dt-dur-micro) var(--dt-ease-ui), background-color var(--dt-dur-micro) var(--dt-ease-ui);
}

.dt-menu .dt-menu__list a:hover,
.dt-menu .dt-menu__list .current-menu-item > a,
.dt-menu .dt-menu__list .current-menu-ancestor > a {
	color: var(--e-global-color-secondary);
	border-color: var(--e-global-color-secondary);
	background: var(--e-global-color-deepplum);
}

.dt-menu .dt-menu__divider {
	/* Hello's reset sets hr {height:0}; draw the 1px line as a border instead. */
	height: 0;
	margin: 0;
	border: 0;
	border-top: 1px solid var(--e-global-color-border);
}


.dt-menu .dt-menu__utility a {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 11px; /* Figma 12px includes the 1px inside stroke. */
	border: 1px solid var(--e-global-color-border);
	border-radius: 16px;
	background: var(--e-global-color-obsidian);
	color: var(--e-global-color-text);
	font-family: var(--e-global-typography-dt_menu_util-font-family), sans-serif;
	font-size: var(--e-global-typography-dt_menu_util-font-size);
	font-weight: var(--e-global-typography-dt_menu_util-font-weight);
	text-transform: var(--e-global-typography-dt_menu_util-text-transform);
	line-height: 1.26;
	text-decoration: none;
	transition: color var(--dt-dur-micro) var(--dt-ease-ui), border-color var(--dt-dur-micro) var(--dt-ease-ui);
}

.dt-menu .dt-menu__utility a:hover {
	color: var(--e-global-color-warmwhite);
	border-color: var(--e-global-color-warmwhite);
}

.dt-menu .dt-menu__utility svg {
	flex: none;
	width: 20px;
	height: 20px;
}

/* Footer notice + acknowledgement. */
.dt-menu .dt-menu__notice {
	display: flex;
	flex-direction: column;
	gap: 12px;
	color: var(--e-global-color-text);
	font-family: var(--e-global-typography-text-font-family), sans-serif;
}

.dt-menu .dt-menu__notice p {
	margin: 0;
}

.dt-menu .dt-menu__notice-text {
	font-size: 14px;
	line-height: 1.5;
}

.dt-menu .dt-menu__ack {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 11px;
	line-height: 1.4;
}

.dt-menu .dt-menu__flag {
	flex: none;
	width: 24px;
	height: 16px;
	border-radius: 2px;
	object-fit: cover;
}

/* The overlay never shows on desktop. */
@media (min-width: 1025px) {
	.dt-menu-toggle {
		display: none;
	}
}