/* Let the sticky bar use the page-wide site wrapper as its containing block. */
.oqp-public-header-template-part,
.oqp-page-header,
header.wp-block-template-part:has(> .oqp-page-header) {
	display: contents;
}

.oqp-header-bar {
	position: sticky;
	top: 0;
	z-index: 100;
	inline-size: 100%;
	background: color-mix(in srgb, var(--wp--preset--color--surface) 94%, transparent);
	border-block-end: 1px solid var(--wp--preset--color--border);
	box-shadow: var(--wp--preset--shadow--soft);
	backdrop-filter: blur(0.75rem);
}

.admin-bar .oqp-header-bar {
	top: 32px;
}

.oqp-header-bar__inner,
.oqp-page-hero__content {
	inline-size: min(calc(100% - (2 * var(--wp--preset--spacing--40))), var(--wp--style--global--wide-size));
	margin-inline: auto;
}

.oqp-header-bar__inner {
	padding-block: var(--wp--preset--spacing--30);
}

.oqp-header-grid.wp-block-group {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: center;
	gap: var(--wp--preset--spacing--50);
	min-inline-size: 0;
}

.oqp-header-grid__brand,
.oqp-header-grid__languages,
.oqp-header-grid__navigation {
	min-inline-size: 0;
	margin-block: 0;
}

.oqp-header-grid__brand {
	display: flex;
	align-items: center;
	justify-self: start;
	gap: var(--wp--preset--spacing--30);
}

.oqp-header-grid__brand .wp-block-site-logo,
.oqp-header-grid__brand .wp-block-site-title,
.oqp-header-grid__brand .wp-block-site-tagline,
.oqp-header-brand__text {
	margin-block: 0;
}

.oqp-header-grid__brand .wp-block-site-logo img {
	display: block;
	inline-size: var(--wp--custom--site-chrome--logo-size);
	block-size: auto;
}

.oqp-header-brand__text {
	min-inline-size: 0;
	max-inline-size: 40ch;
	gap: var(--wp--preset--spacing--20);
	transition:
		max-inline-size var(--wp--custom--motion--standard) ease,
		opacity var(--wp--custom--motion--standard) ease;
}

.oqp-header-brand__text .wp-block-site-title {
	font-size: var(--wp--preset--font-size--m);
	line-height: 1.1;
}

.oqp-header-brand__text .wp-block-site-title a {
	display: inline-flex;
	align-items: center;
	min-block-size: var(--wp--custom--accessibility--minimum-target-size);
}

.oqp-header-brand__text .wp-block-site-tagline {
	font-size: var(--wp--preset--font-size--xs);
	line-height: 1.3;
}

.oqp-header-bar.is-condensed
.oqp-header-grid__brand:has(.wp-block-site-logo img)
.oqp-header-brand__text {
	max-inline-size: 0;
	overflow: hidden;
	opacity: 0;
	visibility: hidden;
}

.oqp-header-bar.is-style-oqp-header-compact .oqp-header-bar__inner {
	padding-block: var(--wp--preset--spacing--20);
}

.editor-styles-wrapper .oqp-header-bar {
	position: relative;
	z-index: auto;
	top: auto;
}

.editor-styles-wrapper .oqp-public-header-template-part,
.editor-styles-wrapper .oqp-page-header,
.editor-styles-wrapper header.wp-block-template-part:has(> .oqp-page-header) {
	display: block;
}

@media (max-width: 782px) {

	.admin-bar .oqp-header-bar {
		top: 46px;
	}

	.oqp-header-grid.wp-block-group {
		grid-template-columns: minmax(0, 1fr) auto auto;
		gap: var(--wp--preset--spacing--20);
	}

	.oqp-header-grid__brand:has(.wp-block-site-logo img) .oqp-header-brand__text {
		display: none;
	}

	.oqp-header-brand__text .wp-block-site-tagline {
		display: none;
	}

	.oqp-header-grid__brand .wp-block-site-logo img {
		inline-size: var(--wp--custom--site-chrome--logo-size-compact);
	}

}

@media (max-width: 600px) {

	/* The mobile admin bar scrolls with the document rather than staying fixed. */
	.admin-bar .oqp-header-bar {
		top: 0;
	}

}

@media (max-width: 400px) {

	.oqp-header-grid.wp-block-group {
		grid-template-areas:
			"brand languages"
			"navigation navigation";
		grid-template-columns: minmax(0, 1fr) auto;
	}

	.oqp-header-grid__brand {
		grid-area: brand;
	}

	.oqp-header-grid__languages {
		grid-area: languages;
	}

	.oqp-header-grid__navigation {
		grid-area: navigation;
	}

}

@media (prefers-reduced-motion: reduce) {

	.oqp-header-brand__text {
		transition: none;
	}
}