.mobile-identity,
.site-menu {
	display: none;
}

@media screen and (max-width: 768px) {
	nav.hello-navigation {
		display: none;
	}

	nav.collapsible-navigation {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: start;
		gap: 1rem;
		padding: 0.5rem 0 1rem;
		border-bottom: 1px solid var(--pico-muted-border-color);
	}

	.collapsible-navigation .desktop-navigation {
		display: none;
	}

	.mobile-identity {
		display: block;
		grid-column: 1;
		grid-row: 1;
		color: var(--pico-h1-color);
		text-decoration: none;
		line-height: 1.4;
	}

	.mobile-identity strong {
		display: block;
		font-size: 1rem;
		white-space: normal;
	}

	.mobile-identity span {
		display: block;
		margin-top: 0.25rem;
		color: var(--pico-muted-color);
		font-size: 0.65rem;
	}

	.site-menu {
		position: relative;
		display: block;
		grid-column: 2;
		grid-row: 1;
		margin: 0;
	}

	.site-menu > summary,
	.site-menu[open] > summary {
		display: flex;
		align-items: center;
		gap: 0.5rem;
		min-height: 2.25rem;
		margin: 0;
		padding: 0.45rem 0.9rem;
		border: 1px solid var(--pico-muted-border-color);
		border-radius: 2rem;
		color: var(--pico-color);
		font-size: 0.85rem;
		font-weight: 600;
		line-height: 1.3;
	}

	.site-menu > summary::after {
		display: none;
	}

	.site-menu > summary:hover,
	.site-menu[open] > summary {
		background: var(--pico-dropdown-hover-background-color);
	}

	.site-menu > ul {
		position: absolute;
		top: calc(100% + 0.5rem);
		right: 0;
		z-index: 10;
		display: flex;
		flex-direction: column;
		align-items: stretch;
		min-width: 11rem;
		margin: 0;
		padding: 0.35rem;
		border: 1px solid var(--pico-muted-border-color);
		border-radius: var(--pico-border-radius);
		background: var(--pico-dropdown-background-color);
		box-shadow: var(--pico-dropdown-box-shadow);
	}

	.site-menu li {
		display: block;
		padding: 0;
		font-size: 0.9rem;
	}

	.site-menu li a {
		display: block;
		margin: 0;
		padding: 0.65rem 0.85rem;
		color: var(--pico-color);
	}

	.site-menu li a:is(:hover, :focus-visible, [aria-current="page"]) {
		background: var(--pico-dropdown-hover-background-color);
	}
}