.dk-mobile-navigation {
	display: none;
}

@media (max-width: 991.98px) {
	html {
		scroll-padding-bottom: calc(5rem + env(safe-area-inset-bottom));
	}

	body {
		padding-bottom: calc(5rem + env(safe-area-inset-bottom));
	}

	.dk-mobile-navigation {
		position: fixed;
		z-index: 1020;
		right: 0;
		bottom: 0;
		left: 0;
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: minmax(0, 1fr);
		gap: .15rem;
		padding: .35rem max(.3rem, env(safe-area-inset-right)) calc(.35rem + env(safe-area-inset-bottom)) max(.3rem, env(safe-area-inset-left));
		border-top: 1px solid var(--ws-border-color);
		background: var(--ws-navbar-bg);
		box-shadow: 0 -8px 24px rgba(0, 0, 0, .15);
	}

	.dk-mobile-navigation a,
	.dk-mobile-navigation button {
		display: grid;
		min-width: 0;
		min-height: 48px;
		align-content: center;
		justify-items: center;
		gap: .15rem;
		padding: .2rem;
		border: 0;
		border-radius: .55rem;
		background: transparent;
		color: var(--ws-body-color);
		font: inherit;
		text-decoration: none;
	}

	.dk-mobile-navigation [aria-current="page"],
	.dk-mobile-navigation a:hover,
	.dk-mobile-navigation button:hover {
		background: var(--ws-primary-subtle);
		color: var(--ws-primary-text);
	}

	.dk-mobile-navigation a:focus-visible,
	.dk-mobile-navigation button:focus-visible {
		outline: 2px solid var(--ws-primary-text);
		outline-offset: -2px;
	}

	.dk-mobile-navigation i {
		font-size: 1.05rem;
	}

	.dk-mobile-navigation span {
		max-width: 100%;
		font-size: .65rem;
		line-height: 1.2;
		text-align: center;
		overflow-wrap: anywhere;
	}
}