/* The open section of the main menu on wide screens: a white panel under
   the bar, as the submenu of the RUB web components (design/README.md).
   The menu itself: menu.css, menu-desktop.css. Part of the RUB Chair theme. */

@media (min-width: 1100px) {
	/* A white panel floating 16px under the bar, at the right content edge,
	   as the submenu of the RUB web components (design/README.md); it stays
	   with the bar while scrolling. */
	.rub-menu__panel {
		background-color: #fff;
		border-radius: var(--rub-radius);
		box-shadow: var(--rub-shadow-hover);
		left: auto;
		max-height: calc(100vh - var(--rub-bar-height) - 2rem - var(--wp-admin--admin-bar--height, 0px));
		overflow-y: auto;
		position: absolute;
		right: var(--rub-edge);
		top: calc(100% + 1rem);
		width: min(49.75rem, calc(100% - 2 * var(--rub-edge)));
	}

	.rub-menu__panel-inner {
		padding: 2rem 2.5rem;
		position: relative;
	}

	/* The page behind is dimmed while a section is open. The veil lies under
	   the bar and its panel, lets clicks through (a click elsewhere closes the
	   panel, close.js) and is decoration only. */
	.rub-topbar:has(.rub-menu.has-open-section)::before {
		background-color: rgb(0 13 23 / 40%);
		content: "";
		inset: 0;
		pointer-events: none;
		position: fixed;
		z-index: -1;
	}

	/* Long sections spread over two columns. */
	.rub-menu__list.is-multi {
		column-count: 2;
		column-gap: 2.5rem;
	}

	/* Entries as in the library: semi-bold, a light tint under the mouse
	   (token overlay/interaction/selected) instead of an underline. */
	.rub-menu__sublink {
		border-bottom: 0;
		border-radius: 8px;
		display: block;
		font-size: 1rem;
		font-weight: 600;
		margin-inline: -0.75rem;
		padding: 0.5rem 0.75rem;
	}

	.rub-menu__sublink:hover {
		background-color: rgb(0 13 23 / 8%);
	}

	.rub-menu__sublink[aria-current] {
		background-color: var(--rub-light);
	}

	.rub-menu__list li {
		break-inside: avoid;
	}

	/* Close button: a small framed square, top right (as in the library). */
	.rub-menu__close {
		border: 1px solid var(--rub-line);
		border-radius: 8px;
		color: var(--rub-blue);
		height: 2.75rem;
		padding: 0.6rem;
		position: absolute;
		right: 1rem;
		top: 1rem;
		width: 2.75rem;
	}
}