/* Header bar and main menu (header of the RUB web components,
   design/README.md): the menu in RUB Blau on white; sections open a panel
   in Hellblau 50 with Hellblau edges, entries in mixed case. Markup:
   parts/header.html and blocks/menu/. Part of the RUB Chair theme. */

.rub-topbar {
	--rub-gutter: var(--wp--preset--spacing--30, 1.5rem);
	--rub-bar-height: 6rem;
	/* Fixed sizes, not tied to the window: logo, menu and UA Ruhr logo must
	   fit into the bar from 1100px on. */
	--rub-menu-pad: 0.625rem;
	--rub-panel: var(--rub-light);
	/* Distance of logo and menu from the window's edges; on wide screens the
	   bar spans the whole window as in the RUB's header (menu-desktop.css). */
	--rub-edge: var(--rub-gutter);

	/* One row: logo | menu | search and UA Ruhr logo. */
	align-items: center;
	column-gap: 2rem;
	display: grid;
	grid-template-areas: "rub menu end";
	grid-template-columns: auto minmax(0, 1fr) auto;
	height: var(--rub-bar-height);
	padding-block: 0;
	padding-inline: var(--rub-edge);
	position: relative;
	transition: height 0.25s ease;
}

/* Scrolled down: the bar gets lower (header-scroll.js sets the class). */
body.rub-scrolled .rub-topbar {
	--rub-bar-height: 4.5rem;
}

/* No block gap between the parts. */
.wp-block-group.rub-topbar > * {
	margin: 0;
}

.rub-menu {
	align-self: stretch;
	grid-area: menu;
	justify-self: end;
}

.rub-menu__root,
.rub-menu__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.rub-menu__link,
.rub-menu__sublink {
	text-decoration: none;
}

.rub-menu__icon,
.rub-menu__back svg,
.rub-menu__close svg,
.rub-menu__toggle svg {
	display: block;
	flex: none;
}

:where(.rub-menu) button {
	background: none;
	border: 0;
	cursor: pointer;
	padding: 0;
}


.rub-menu__heading {
	color: var(--rub-blue);
	font-size: 1.1875rem;
	font-weight: 600;
	margin: 0;
	text-transform: none;
}

.rub-menu__sublink {
	border-bottom: 2px solid transparent;
	color: var(--rub-blue);
	display: inline-block;
	font-size: 1.125rem;
	line-height: 1.4;
	padding: 0.375rem 0 0.25rem;
	transition: border-color var(--rub-transition);
}

.rub-menu__sublink:hover,
.rub-menu__sublink[aria-current] {
	border-bottom-color: var(--rub-accent);
}