/* Main menu on phones and tablets (below 1100px). Base: menu.css. Part of the RUB Chair theme. */

/* -------------------------------------------------------------------------
 * Phones and tablets: menu button; the menu drops down as a white sheet
 * joined to the bar, the page behind dimmed (mobile menu of the RUB web
 * components, design/README.md)
 * ---------------------------------------------------------------------- */

@media (max-width: 1099.98px) {
	.rub-topbar,
	body.rub-scrolled .rub-topbar {
		--rub-bar-height: 4.5rem;
		--rub-gutter: 1rem;

		grid-template-areas: "rub menu";
		grid-template-rows: auto;
	}

	.rub-menu {
		align-self: center;
	}

	.rub-menu__toggle {
		color: var(--rub-blue);
		display: grid;
		height: 2.75rem;
		margin-right: -0.5rem;
		place-items: center;
		width: 2.75rem;
	}

	.rub-menu__toggle svg {
		height: 1.75rem;
		width: 1.75rem;
	}

	.rub-menu__toggle .rub-menu__toggle-close,
	.rub-menu.is-open .rub-menu__toggle-open,
	.rub-menu__close {
		display: none;
	}

	.rub-menu.is-open .rub-menu__toggle .rub-menu__toggle-close {
		display: block;
	}

	.rub-menu.is-enhanced .rub-menu__root {
		display: none;
	}

	.rub-menu.is-open .rub-menu__root {
		background-color: #fff;
		border-radius: 0 0 var(--rub-radius-bar) var(--rub-radius-bar);
		border-top: 1px solid var(--rub-frame);
		display: block;
		left: 0;
		max-height: calc(100dvh - var(--rub-bar-height) - var(--wp-admin--admin-bar--height, 0px));
		overflow-y: auto;
		padding: 1rem var(--rub-edge) 2rem;
		position: absolute;
		right: 0;
		top: 100%;
	}

	/* While the menu is open the bar's lower corners belong to the sheet. */
	.rub-topbar:has(.rub-menu.is-open) {
		border-radius: 0;
		box-shadow: none;
	}

	/* The page behind, dimmed (token overlay/media/scrim, #000D17 at 25 %). */
	.rub-topbar:has(.rub-menu.is-open)::before {
		background-color: rgb(0 13 23 / 25%);
		content: "";
		inset: 0;
		pointer-events: none;
		position: fixed;
		z-index: -1;
	}

	.rub-topbar .rub-menu__root :where(a, button):focus-visible {
		outline-color: var(--rub-accent-text);
	}

	/* Entries large and regular, the arrow on the right; the section the
	   visitor is in quietly tinted (overlay/interaction/selected). */
	.rub-menu__link,
	.rub-menu__sublink {
		align-items: center;
		border-radius: 4px;
		color: var(--rub-blue);
		display: flex;
		font-size: 1.25rem;
		font-weight: 400;
		gap: 1rem;
		justify-content: space-between;
		margin-inline: -0.5rem;
		padding: 0.6rem 0.5rem;
		text-transform: none;
	}

	.rub-menu__link[aria-current],
	.is-ancestor > .rub-menu__link,
	.rub-menu__sublink[aria-current] {
		background-color: rgb(0 13 23 / 8%);
		border-bottom: 0;
	}

	.rub-menu__icon {
		height: 1.5rem;
		width: 1.5rem;
	}

	/* An open section replaces the list: back button, heading, sub-items. */
	.rub-menu.has-open-section .rub-menu__item:not(.is-open),
	.rub-menu.has-open-section .is-open > .rub-menu__link {
		display: none;
	}

	/* The open section: “‹ Research” in bold, then its entries. */
	.rub-menu__panel-head {
		align-items: center;
		display: flex;
		gap: 0.25rem;
		margin: 0 0 0.5rem -0.75rem;
	}

	.rub-menu__panel-head .rub-menu__heading {
		font-size: 1.25rem;
		font-weight: 700;
	}

	.rub-menu__back {
		color: var(--rub-blue);
		height: 2.75rem;
		padding: 0.625rem;
		width: 2.75rem;
	}

	.rub-menu__list {
		padding-left: 0;
	}
}