.primary-menu,
.primary-menu .sub-menu,
.mobile-menu-list,
.mobile-menu-list .sub-menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

.primary-menu { display: flex; align-items: center; justify-content: center; gap: clamp(0.15rem, 0.7vw, 0.65rem); }
.primary-menu > li { position: relative; display: flex; align-items: center; }
.primary-menu .menu-link { display: inline-flex; min-height: 2.75rem; align-items: center; padding: 0.45rem 0.5rem; color: var(--rhino-color-ink); font-size: clamp(0.76rem, 0.85vw, 0.9rem); font-weight: 800; line-height: 1.2; text-decoration: none; white-space: nowrap; }
.primary-menu .menu-link:hover,
.primary-menu .current-menu-item > .menu-link,
.primary-menu .current-menu-ancestor > .menu-link { color: var(--rhino-color-brand); }
.primary-menu .current-menu-item > .menu-link { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.4rem; }

.submenu-toggle {
	display: inline-flex;
	width: 2rem;
	min-height: 2.75rem;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--rhino-color-ink);
}

.submenu-toggle > span[aria-hidden="true"] { width: 0.5rem; height: 0.5rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-0.15rem); transition: transform 120ms ease; }
.submenu-toggle[aria-expanded="true"] > span[aria-hidden="true"] { transform: rotate(225deg) translate(-0.1rem, -0.1rem); }

.primary-menu .sub-menu {
	position: absolute;
	top: calc(100% + 0.35rem);
	left: 0;
	z-index: 20;
	min-width: 14rem;
	padding: var(--rhino-space-2);
	border: 1px solid var(--rhino-color-border);
	border-radius: var(--rhino-radius-sm);
	background: #fff;
	box-shadow: var(--rhino-shadow-card);
}

.primary-menu .sub-menu .menu-link { width: 100%; white-space: normal; }
.primary-menu .sub-menu li { position: relative; display: flex; }

.mobile-menu-layer { position: fixed; inset: 0; z-index: 10000; display: grid; grid-template-columns: minmax(0, 1fr) min(88vw, 28rem); }
.admin-bar .mobile-menu-layer { top: 32px; }
.mobile-menu-backdrop { width: 100%; min-height: 100%; border: 0; border-radius: 0; background: rgb(23 23 23 / 58%); }
.mobile-menu { grid-column: 2; min-width: 0; overflow-y: auto; background: #fff; color: var(--rhino-color-ink); box-shadow: -16px 0 40px rgb(23 23 23 / 25%); }
.mobile-menu__header { position: sticky; top: 0; z-index: 2; display: flex; min-height: 4.5rem; align-items: center; justify-content: space-between; gap: var(--rhino-space-3); padding: var(--rhino-space-3) var(--rhino-space-4); border-bottom: 1px solid var(--rhino-color-border); background: #fff; }
.mobile-menu__branding { min-width: 0; }
.mobile-menu__branding .custom-logo-link { display: inline-flex; align-items: center; }
.mobile-menu__branding .custom-logo { width: auto; max-width: 6rem; max-height: 3.5rem; object-fit: contain; }
.mobile-menu__brand { color: var(--rhino-color-ink); font-size: 0.95rem; font-weight: 850; line-height: 1.2; text-decoration: none; }
.mobile-menu__close { width: auto; min-height: 2.75rem; padding-inline: 0.75rem; }
.mobile-menu__content { display: grid; gap: var(--rhino-space-5); padding: var(--rhino-space-5) var(--rhino-space-4) var(--rhino-space-6); }

.mobile-menu-list { border-top: 1px solid var(--rhino-color-border); }
.mobile-menu-list li { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; border-bottom: 1px solid var(--rhino-color-border); }
.mobile-menu-list .menu-link { display: flex; min-height: 3.25rem; align-items: center; padding: 0.65rem 0.25rem; color: var(--rhino-color-ink); font-weight: 800; text-decoration: none; }
.mobile-menu-list .current-menu-item > .menu-link { color: var(--rhino-color-brand); }
.mobile-menu-list .submenu-toggle { min-height: 3.25rem; }
.mobile-menu-list .sub-menu { grid-column: 1 / -1; padding-left: var(--rhino-space-4); border-top: 1px solid var(--rhino-color-border); }
.mobile-menu-open { overflow: hidden; }
[hidden] { display: none !important; }

@media (min-width: 60rem) {
	.mobile-menu-layer { display: none !important; }
}

@media (max-width: 782px) {
	.admin-bar .mobile-menu-layer { top: 46px; }
}

@media (max-width: 23rem) {
	.mobile-menu-layer { grid-template-columns: 1fr; }
	.mobile-menu { grid-column: 1; }
	.mobile-menu-backdrop { display: none; }
}