/*
 * Header and skip link. Layout, colours and spacing are block settings in
 * patterns/site-header.php; this sheet holds only what blocks cannot set.
 *
 * Z-index scale (theme.json custom.zIndex): raised 1, step bar 15, header 20,
 * popover 25, scrim 30, modal 40, skip link 100000.
 */

.pst-skip-link {
	position: absolute;
	top: var(--wp--preset--spacing--20);
	left: var(--wp--preset--spacing--20);
	z-index: var(--wp--custom--z-index--skip-link);
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	border-radius: var(--wp--preset--border-radius--sm);
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	font-weight: 700;
	transform: translateY(-200%);
}

.pst-skip-link:focus {
	transform: none;
}

main:focus {
	outline: none;
}

.pst-header .pst-header__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	margin-block: 0 !important;
}

.pst-header__logo {
	justify-self: start;
}

.pst-header__actions {
	justify-self: end;
	min-width: 0;
}

.pst-header__logo,
.pst-header__logo a,
.pst-header__logo img {
	display: block;
	flex: none;
}

/*
 * Equal outer columns centre the links in the whole header, regardless of
 * the logo/search widths. Block settings own the link look and underline.
 */
.pst-header__sections {
	justify-self: center;
}

.pst-header__sections .wp-block-plainplugins-nav-tab {
	min-height: 88px;
}

/*
 * Core Search's wrapper needs its own fill and radius. The submit button
 * remains a real button, with a visible focus state from the shared styles.
 */
.pst-header .pst-header__search .wp-block-search__inside-wrapper {
	min-height: 38px;
	padding: 0 10px 0 2px;
	border-color: transparent;
	border-radius: var(--wp--preset--border-radius--md);
	background-color: var(--pst-header-search-background, var(--wp--preset--color--surface));
}

.pst-header .pst-header__search .wp-block-search__inside-wrapper:focus-within {
	border-color: var(--wp--preset--color--action);
}

.pst-header .pst-header__search .wp-block-search__input {
	font-size: 0.75rem;
	color: inherit;
}

.pst-header .pst-header__search .wp-block-search__input::placeholder {
	color: inherit;
	opacity: 1;
}

.pst-header .pst-header__search .wp-block-search__button {
	order: -1;
	flex: none;
	border-radius: var(--wp--preset--border-radius--sm);
	color: inherit;
}

.pst-header .pst-header__search .wp-block-search__button:hover {
	background-color: var(--pst-header-search-hover, var(--wp--preset--color--line));
}

.pst-header__search-toggle {
	display: none;
}

/*
 * On smaller desktops the full search field gives way first, leaving the
 * links centred. The 156px logo also clears the links at the 783px boundary.
 */
@media (max-width: 999px) {

	.pst-header__search {
		display: none;
	}

	.pst-header .pst-header__row {
		column-gap: var(--wp--preset--spacing--40);
	}

	.pst-header__logo img {
		width: 156px !important;
	}
}

/* CSS offsets remain useful before hydration and with JavaScript disabled. */
:root {
	--pst-header-row-height: 89px;
	--pst-reader-row-height: 47px;
	--pst-reader-height: 0px;
	--pst-header-offset: calc(var(--pst-header-row-height) + var(--pst-reader-height));
}

:root:has(.pst-site-chrome .wp-block-pst-step-bar:not([hidden])) {
	--pst-reader-height: var(--pst-reader-row-height);
}

.pst-site-chrome .wp-block-pst-step-bar[hidden] {
	display: none;
}

.pst-site-chrome.is-position-sticky {
	z-index: var(--wp--custom--z-index--header);
}

/* Core's navigation overlay lives inside the sticky stacking context. */
.pst-site-chrome:has(.wp-block-navigation__responsive-container.is-menu-open) {
	z-index: var(--wp--custom--z-index--modal);
}

.pst-site-chrome > * {
	margin-block: 0;
}

/* The same native sticky Group remains outside main and its Cover landmark. */
.pst-site-chrome.is-style-over-cover {
	--pst-header-background: var(--wp--preset--color--base);
	--pst-header-text: var(--wp--preset--color--contrast);
	--pst-header-link: var(--wp--preset--color--muted);
	--pst-header-border: var(--wp--preset--color--line);
	--pst-header-search-background: var(--wp--preset--color--surface);
	--pst-header-search-hover: var(--wp--preset--color--line);
}

.pst-site-chrome.is-style-over-cover:has(~ main .pst-tutorial-cover) {
	--pst-header-overlap: var(--pst-header-offset);
}

.pst-site-chrome.is-style-over-cover.is-at-top:has(~ main .pst-tutorial-cover),
.editor-styles-wrapper .pst-site-chrome.is-style-over-cover:has(~ main .pst-tutorial-cover) {
	--pst-header-background: transparent;
	--pst-header-text: var(--wp--preset--color--white);
	--pst-header-link: var(--wp--preset--color--white);
	--pst-header-border: rgb(255 255 255 / 18%);
	--pst-header-search-background: rgb(255 255 255 / 8%);
	--pst-header-search-hover: rgb(255 255 255 / 16%);
}

/* Capture only this native Group; the rest of the document keeps scrolling. */
:root[data-pst-header-transition] {
	view-transition-name: none;
}

:root[data-pst-header-transition] .pst-site-chrome.is-style-over-cover .pst-header {
	view-transition-name: pst-site-header;
}

:root[data-pst-header-transition]::view-transition {
	pointer-events: none;
}

::view-transition-group(pst-site-header) {
	animation: none;
}

::view-transition-image-pair(pst-site-header) {
	isolation: auto;
}

::view-transition-old(pst-site-header),
::view-transition-new(pst-site-header) {
	height: 100%;
	animation: none;
	mix-blend-mode: normal;
}

:root[data-pst-header-transition="enter"]::view-transition-old(pst-site-header),
:root[data-pst-header-transition="leave"]::view-transition-new(pst-site-header) {
	z-index: 1;
}

:root[data-pst-header-transition="enter"]::view-transition-new(pst-site-header),
:root[data-pst-header-transition="leave"]::view-transition-old(pst-site-header) {
	z-index: 2;
	animation: pst-header-top-sheet var(--wp--custom--motion--header-reveal, 240ms) var(--wp--custom--motion--easing) both;
}

:root[data-pst-header-transition="leave"]::view-transition-old(pst-site-header) {
	animation-name: pst-header-top-sheet-out;
}

@keyframes pst-header-top-sheet {

	from {
		clip-path: inset(0 0 100%);
	}

	to {
		clip-path: inset(0);
	}
}

@keyframes pst-header-top-sheet-out {

	from {
		clip-path: inset(0);
	}

	to {
		clip-path: inset(0 0 100%);
	}
}

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

	::view-transition-old(pst-site-header),
	::view-transition-new(pst-site-header) {
		animation: none !important;
	}
}

/* Without scripting the transparent header scrolls away with the artwork. */
@media (scripting: none) {

	.pst-site-chrome.is-style-over-cover.is-position-sticky {
		position: relative;
		top: auto;
	}
}

/* The skip-link target also clears the entire sticky Group. */
main[id],
.wp-block-post-content [id],
.pst-comments-section [id] {
	scroll-margin-top: calc(var(--pst-header-offset) + var(--wp-admin--admin-bar--position-offset, 0px) + 16px);
}

/* A step jump reserves the reader row before its visibility changes. */
.wp-block-post-content .pst-step[id] {
	scroll-margin-top: calc(var(--pst-header-offset) + var(--pst-reader-row-height) - var(--pst-reader-height) + var(--wp-admin--admin-bar--position-offset, 0px) + 16px);
}

/*
 * Phones and tablets (782px and below, the theme's tablet viewport): tabs
 * and full search hide through block visibility. Search reuses the existing
 * sheet; Menu opens the Phone menu template part (core Navigation overlay).
 */
.pst-header__menu .wp-block-navigation__responsive-container-open,
.pst-header__search-toggle {

	/* Touch target. */
	width: 44px;
	height: 44px;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: var(--wp--preset--border-radius--md);
	color: inherit;
}

.pst-header__menu .wp-block-navigation__responsive-container-open {
	display: inline-flex;
}

.pst-header__search-toggle:hover,
.pst-header__menu .wp-block-navigation__responsive-container-open:hover {
	background-color: var(--pst-header-search-background, var(--wp--preset--color--surface));
}

@media (max-width: 782px) {

	:root {
		--pst-header-row-height: 77px;
	}

	.pst-header .pst-header__row {
		grid-template-columns: minmax(0, 1fr) auto;
		min-height: 76px !important;
		gap: var(--wp--preset--spacing--30) !important;
	}

	.pst-header__search-toggle {
		display: inline-flex;
	}

	.pst-header__logo img {
		width: 144px !important;
		height: auto !important;
	}
}