/**
 * Header component.
 */

.rc-header {
	backdrop-filter: blur(1rem);
	border-block-end: 1px solid var(--line, var(--rc-border-color));
	padding-block: 0.7rem;
	position: sticky;
	inset-block-start: 0;
	z-index: 30;
}

.rc-header--style-surface {
	background: color-mix(in srgb, var(--paper, var(--rc-color-background)) 92%, transparent);
}

.rc-header__inner {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--rc-space-s) var(--rc-space-l);
}

.rc-header__brand {
	min-inline-size: 0;
}

.rc-header__brand-link {
	align-items: center;
	color: var(--rc-color-text);
	display: inline-flex;
	max-inline-size: 100%;
	min-block-size: var(--rc-button-min-height);
	text-decoration: none;
}

.rc-header__logo-image {
	--rc-header-logo-max-height: 3rem;

	display: block;
	inline-size: auto;
	max-block-size: var(--rc-header-logo-max-height);
	max-inline-size: 100%;
}

.rc-header__site-name {
	font-size: clamp(1.15rem, 1rem + 0.5vw, 1.35rem);
	font-weight: 850;
	letter-spacing: -0.02em;
	overflow-wrap: anywhere;
}

.rc-header__nav {
	flex: 1 1 auto;
	min-inline-size: 0;
}

.rc-header__menu,
.rc-header__menu .sub-menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

.rc-header__menu {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--rc-space-xs) var(--rc-space-s);
}

.rc-header__menu .sub-menu {
	padding-inline-start: var(--rc-space-m);
}

.rc-header__menu li {
	min-inline-size: 0;
}

.rc-header__menu a {
	align-items: center;
	display: inline-flex;
	min-block-size: var(--rc-button-min-height);
	overflow-wrap: anywhere;
	padding-inline: var(--rc-space-s);
	text-decoration: none;
	text-underline-offset: 0.35em;
}

.rc-header__menu a:hover,
.rc-header__menu a:focus-visible {
	text-decoration: underline;
}

.rc-header__actions {
	margin-inline-start: auto;
	max-inline-size: 100%;
}

.rc-header__actions .rc-button {
	overflow-wrap: anywhere;
}

@media (max-width: 48rem) {
	.rc-header__nav {
		display: none;
	}

	.rc-header__inner {
		flex-wrap: wrap;
		gap: var(--rc-space-xs) var(--rc-space-s);
	}

	.rc-header__actions .rc-button {
		font-size: 0.84rem;
		inline-size: auto;
		min-block-size: 3rem;
		padding-inline: 0.85rem;
	}

	.rc-header__actions .rc-button[data-rc-line-action="true"]::before {
		display: none;
	}
}