/* Header: white bar after the RUB web components (design/README.md) – the
   RUB logo with the institution on the left, the main menu, the logo of
   the University Alliance Ruhr on the right; the breadcrumb under it. The menu itself: menu*.css.
   Part of the RUB Chair theme. */

/* The header stays at the top while scrolling and gets lower then (menu.css,
   class rub-scrolled from header-scroll.js). Its outer box keeps the full
   height, so the page does not jump; the strip the bar frees is see-through
   and lets clicks pass. Its height is shared with the picture header
   (components-home.css), which starts under it on the front page. */
:root {
	--rub-header-height: 6rem;
}

.wp-site-blocks > header.wp-block-template-part {
	height: var(--rub-header-height);
	pointer-events: none;
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 100;
}

.rub-topbar {
	background-color: #fff;
	border-radius: 0 0 var(--rub-radius-bar) var(--rub-radius-bar);
	box-shadow: var(--rub-shadow);
	pointer-events: auto;
}

/* The RUB logo with faculty and site name, as one link to the home page. */
.rub-lockup {
	align-items: center;
	color: var(--rub-blue);
	display: flex;
	gap: 0.75rem;
	grid-area: rub;
	text-decoration: none;
}

.rub-lockup img {
	flex: none;
	height: 48px;
	transition: height 0.25s ease, width 0.25s ease;
	width: 48px;
}

.rub-lockup__text {
	display: flex;
	flex-direction: column;
	font-size: 0.9375rem;
	line-height: 1.25;
	transition: font-size 0.25s ease;
}

.rub-lockup__rub {
	font-weight: 800;
}

body.rub-scrolled .rub-lockup img {
	height: 36px;
	width: 36px;
}

body.rub-scrolled .rub-lockup__text {
	font-size: 0.8125rem;
}

/* On the right: search (if switched on) and the University Alliance Ruhr's logo. */
.rub-topbar__end {
	align-items: center;
	display: flex;
	gap: 1.25rem;
	grid-area: end;
}

/* The University Alliance Ruhr's logo, 48px high as the RUB cube. */
.rub-logo--ua-ruhr {
	line-height: 0;
}

.rub-logo--ua-ruhr img {
	height: 48px;
	transition: height 0.25s ease;
	width: auto;
}

body.rub-scrolled .rub-logo--ua-ruhr img {
	height: 36px;
}

/* Phones and tablets: the row holds only the RUB logo and the menu button. */
@media (max-width: 1099.98px) {
	.rub-topbar__end {
		display: none;
	}
}

/* The breadcrumb, a slim line under the header. Pages right under Home have
   none (blocks/breadcrumb/render.php); the line keeps its height there, so
   every page title starts at the same place. */
.rub-breadcrumb-bar {
	box-sizing: border-box;
	min-height: calc(var(--wp--preset--spacing--30) + 1.625rem);
	padding-top: var(--wp--preset--spacing--30);
}

.wp-site-blocks > .rub-subheader {
	margin-block-start: 0 !important;
}

/* Keep anchor targets and keyboard focus clear of the fixed header. */
html {
	scroll-padding-top: calc(var(--rub-header-height) + 0.5rem);
}

/* Smaller screens: logo and menu button only; no shrinking. */
@media (max-width: 1099.98px) {
	:root {
		--rub-header-height: 4.5rem;
	}

	.rub-lockup img,
	body.rub-scrolled .rub-lockup img {
		height: 40px;
		width: 40px;
	}

	.rub-lockup__text,
	body.rub-scrolled .rub-lockup__text {
		font-size: 0.8125rem;
	}
}

/* Below 600px WordPress stops fixing the admin bar, so neither is the offset. */
@media (max-width: 600px) {
	.wp-site-blocks > header.wp-block-template-part {
		top: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.rub-topbar,
	.rub-lockup img,
	.rub-lockup__text,
	.rub-logo--ua-ruhr img {
		transition: none;
	}
}