/* Main menu on wide screens (from 1100px). Base: menu.css. Part of the RUB Chair theme. */

/* -------------------------------------------------------------------------
 * Wide screens: entries in the bar, sections open a panel below it
 * ---------------------------------------------------------------------- */

@media (min-width: 1100px) {
	/* Across the whole window, as the RUB's header (design/README.md): the
	   logo 32px from the left edge, the UA Ruhr logo 16px from the right. */
	.rub-topbar {
		--rub-edge: 1rem;
		padding-inline: 2rem 1rem;
	}

	.rub-menu__toggle,
	.rub-menu__icon,
	.rub-menu__back {
		display: none;
	}

	.rub-menu__root {
		display: flex;
		height: 100%;
	}

	.rub-menu__item {
		display: flex;
	}

	.rub-menu__link {
		align-items: center;
		color: var(--rub-blue);
		display: flex;
		/* UI H4 18/24 semi-bold, as the RUB's navigation links. */
		font-size: 1.125rem;
		font-weight: 600;
		letter-spacing: 0;
		padding: 0 var(--rub-menu-pad);
		position: relative;
		text-transform: none;
		white-space: nowrap;
	}

	/* No accent line: as the navigation links of the RUB web components
	   (design/README.md), an entry gets a light tint under the mouse
	   (state/secondary/hover), a stronger one while its section is open
	   (state/secondary/active); the section the visitor is in keeps the
	   quiet tint of selected items (overlay/interaction/selected). */
	.rub-menu__item {
		align-items: center;
	}

	.rub-menu__link {
		border-radius: 4px;
		height: 2.5rem;
		transition: background-color var(--rub-transition);
	}

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

	.rub-menu__link:hover {
		background-color: rgb(0 53 96 / 8%);
	}

	.is-open > .rub-menu__link {
		background-color: rgb(0 53 96 / 20%);
	}

	.rub-menu__heading {
		margin-bottom: 0.75rem;
		padding-right: 3rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.rub-menu__link {
		transition: none;
	}
}