/*
 * header.css — the site header.
 *
 * Sibling of css/content.css and css/footer.css: theme chrome has no block.json
 * to hang a per-block stylesheet on, so it gets its own sheet enqueued from
 * sws_theme_scripts(). Front end only — there is no header inside the editor
 * canvas.
 *
 * Written mobile-first. Media queries are correct here (unlike in blocks): the
 * header spans the viewport, so the viewport is what it should measure. The
 * 992px threshold is inherited from the reference layout, and the extra
 * 992-1199px tier keeps the row from crowding on small laptops.
 */

/*
 * Border-box is declared here rather than globally: theme block rails size as
 * content-box, and a global override would narrow every one of them by their
 * own padding (sws-kit/docs/core-blocks.md).
 */
.sws-header,
.sws-header *,
.sws-header *::before,
.sws-header *::after {
	box-sizing: border-box;
}

/*--------------------------------------------------------------
# Shell
--------------------------------------------------------------*/

/*
 * Scroll marker read by IntersectionObserver. Absolutely positioned against the
 * initial containing block, so it sits at the top of the document and occupies
 * no space in the flow.
 */
.sws-header__sentinel {
	position: absolute;
	top: 0;
	left: 0;
	width: 1px;
	height: 1px;
}

.sws-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background-color: var(--wp--preset--color--surface, #ffffff);
	border-bottom: 1px solid #eeeeee;
	transition:
		background-color var(--sws-transition),
		box-shadow var(--sws-transition);
}

.sws-header--stuck {
	border-bottom-color: transparent;
	box-shadow: var(--sws-shadow-header);
}

/* The admin bar is fixed from 601px up; below that it scrolls with the page. */
body.admin-bar .sws-header {
	top: var(--wp-admin--admin-bar--height, 32px);
}

@media screen and (max-width: 600px) {

	body.admin-bar .sws-header {
		top: 0;
	}
}

.sws-header__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	max-width: min(var(--sws-content, 1116px), 100% - 2 * var(--sws-gutter, 0.75rem));
	margin-inline: auto;
	padding-block: 0.9375rem;
}

/*--------------------------------------------------------------
# Brand
--------------------------------------------------------------*/

.sws-header__brand {
	margin-inline-end: auto;
	min-width: 0;
}

.sws-header__title {
	margin: 0;
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.01em;
}

.sws-header__title a {
	color: var(--wp--preset--color--heading, #0e314c);
	text-decoration: none;
	transition: color var(--sws-transition);
}

.sws-header__title a:hover,
.sws-header__title a:focus {
	color: var(--wp--preset--color--accent, #44ce6f);
}

.sws-header__brand .custom-logo-link {
	display: block;
}

.sws-header__brand .custom-logo {
	display: block;
	width: auto;
	max-height: 2.5rem;
}

/*
 * The tagline is not part of this design, but the node stays in the DOM so the
 * customizer selective refresh for blogdescription keeps working.
 */
.sws-header__brand .site-description {
	display: none;
}

/*--------------------------------------------------------------
# Burger
--------------------------------------------------------------*/

.sws-header__burger {
	position: relative;
	display: none;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 0;
	background: none;
	color: var(--wp--preset--color--heading, #0e314c);
	cursor: pointer;
}

/* A control that cannot be operated should not be painted. */
.sws-header--js .sws-header__burger {
	display: flex;
}

.sws-header__burger-icon,
.sws-header__burger-icon::before,
.sws-header__burger-icon::after {
	width: 1.5625rem;
	height: 3px;
	border-radius: 3px;
	background-color: currentColor;
	transition:
		background-color var(--sws-transition),
		transform var(--sws-transition),
		top var(--sws-transition);
}

.sws-header__burger-icon::before,
.sws-header__burger-icon::after {
	content: "";
	position: absolute;
	left: 50%;
	margin-inline-start: -0.78125rem;
}

.sws-header__burger-icon::before {
	top: 0.9375rem;
}

.sws-header__burger-icon::after {
	top: 1.8125rem;
}

/* Open state: the three bars fold into a cross. */
.sws-header--open .sws-header__burger-icon {
	background-color: transparent;
}

.sws-header--open .sws-header__burger-icon::before {
	top: 1.375rem;
	transform: rotate(45deg);
}

.sws-header--open .sws-header__burger-icon::after {
	top: 1.375rem;
	transform: rotate(-45deg);
}

/*--------------------------------------------------------------
# Collapse: the mobile panel, the desktop row
--------------------------------------------------------------*/

/*
 * Without JavaScript the menu stays in the flow on its own row: it pushes the
 * page down instead of covering it, and every level is reachable. The script
 * turns it into an overlay that the burger can dismiss.
 */
.sws-header__collapse {
	flex: 1 0 100%;
	background-color: var(--wp--preset--color--surface, #ffffff);
}

.sws-header--js .sws-header__collapse {
	position: absolute;
	top: 100%;
	right: 0;
	left: 0;
	display: none;
	max-height: 70vh;
	max-height: 70dvh;
	overflow-y: auto;
	overscroll-behavior: contain;
	box-shadow: var(--sws-shadow-panel);
}

.sws-header--js.sws-header--open .sws-header__collapse {
	display: block;
}

/*--------------------------------------------------------------
# Navigation
--------------------------------------------------------------*/

.sws-nav__list,
.sws-nav__submenu {
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * Each row is its own flex line: link and expander share the row height with no
 * magic numbers, and the submenu wraps onto a full-width line below them.
 */
.sws-nav__item {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	border-top: 1px solid var(--wp--preset--color--line, #dbeefd);
}

.sws-nav__link {
	flex: 1 1 auto;
	min-width: 0;
	padding: 0.875rem var(--sws-gutter);
	color: var(--wp--preset--color--text, #4a6f8a);
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.5;
	text-decoration: none;
	transition: color var(--sws-transition);
}

.sws-nav__link:hover,
.sws-nav__link:focus,
.sws-nav__item--current > .sws-nav__link {
	color: var(--wp--preset--color--accent, #44ce6f);
}

/* Indentation stands in for the nesting the dropdown shows on desktop. */
.sws-nav__item--depth-1 > .sws-nav__link {
	padding-inline-start: calc(var(--sws-gutter) + 1.25rem);
}

.sws-nav__item--depth-2 > .sws-nav__link {
	padding-inline-start: calc(var(--sws-gutter) + 2.5rem);
}

/* The chevron belongs to the expander on mobile and to the link on desktop. */
.sws-nav__link .sws-nav__chevron {
	display: none;
}

.sws-nav__chevron {
	flex: 0 0 auto;
	transition: transform var(--sws-transition);
}

/*
 * Like the burger: without the script every submenu is already open, so the
 * control that would toggle it has nothing to do and is not rendered.
 */
.sws-nav__expander {
	display: none;
	flex: 0 0 3rem;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	background: none;
	color: var(--wp--preset--color--text, #4a6f8a);
	cursor: pointer;
	transition: color var(--sws-transition);
}

.sws-header--js .sws-nav__expander {
	display: flex;
}

.sws-nav__expander:hover,
.sws-nav__expander:focus {
	color: var(--wp--preset--color--accent, #44ce6f);
}

.sws-nav__expander[aria-expanded="true"] .sws-nav__chevron {
	transform: rotate(180deg);
}

.sws-nav__submenu {
	flex: 1 0 100%;
}

.sws-header--js .sws-nav__submenu {
	display: none;
}

.sws-header--js .sws-nav__item--open > .sws-nav__submenu {
	display: block;
}

/*--------------------------------------------------------------
# Language switcher
--------------------------------------------------------------*/

/*
 * Shaped like a navigation row on mobile and like a dropdown on desktop, so it
 * reads as part of the menu rather than as something bolted on beside it.
 *
 * Same progressive enhancement as the submenus: every collapsing rule hangs off
 * .sws-header--js, so without the script the list is simply open and the toggle
 * that could not have closed it is never rendered.
 */
.sws-langs {
	border-top: 1px solid var(--wp--preset--color--line, #dbeefd);
}

.sws-langs__toggle {
	display: none;
	align-items: center;
	gap: 0.375rem;
	width: 100%;
	padding: 0.875rem var(--sws-gutter);
	border: 0;
	background: none;
	color: var(--wp--preset--color--text, #4a6f8a);
	font-family: inherit;
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.5;
	text-align: start;
	cursor: pointer;
	transition: color var(--sws-transition);
}

.sws-header--js .sws-langs__toggle {
	display: flex;
}

.sws-langs__toggle:hover,
.sws-langs__toggle:focus {
	color: var(--wp--preset--color--accent, #44ce6f);
}

.sws-langs__toggle[aria-expanded="true"] .sws-nav__chevron {
	transform: rotate(180deg);
}

/* The code is the whole visible label, so it takes the row and the chevron follows. */
.sws-langs__code {
	flex: 1 1 auto;
}

.sws-langs__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.sws-header--js .sws-langs__list {
	display: none;
}

.sws-header--js .sws-langs--open .sws-langs__list {
	display: block;
}

/* Indented like a submenu row, for the same reason: it is one level down. */
.sws-langs__link {
	display: block;
	padding: 0.5625rem var(--sws-gutter);
	padding-inline-start: calc(var(--sws-gutter) + 1.25rem);
	color: var(--wp--preset--color--text, #4a6f8a);
	font-size: 0.875rem;
	text-decoration: none;
	transition: color var(--sws-transition);
}

.sws-langs__link:hover,
.sws-langs__link:focus,
.sws-langs__item--current > .sws-langs__link {
	color: var(--wp--preset--color--accent, #44ce6f);
}

/*--------------------------------------------------------------
# Actions
--------------------------------------------------------------*/

.sws-header__actions {
	padding: 1.25rem var(--sws-gutter);
	border-top: 1px solid var(--wp--preset--color--line, #dbeefd);
}

.sws-button {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	overflow: hidden;
	padding: 0.9375rem 2.5rem;
	border: 0;
	border-radius: var(--sws-radius);
	font-family: inherit;
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.5;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	cursor: pointer;
	transition:
		box-shadow var(--sws-transition),
		transform var(--sws-transition);
}

/*
 * Explicit size, not optional: the icons ship with a viewBox and no width or
 * height, and an unsized inline SVG falls back to 300x150. flex-shrink stays
 * off so a longer label in another language cannot squeeze the cup.
 */
.sws-button__icon {
	flex: 0 0 auto;
	width: 1.125rem;
	height: 1.125rem;
}

.sws-button--primary {
	background-color: var(--wp--preset--color--secondary, #c679e3);
	color: #ffffff;
	box-shadow: var(--sws-shadow-button);
}

/*
 * Hover wipe: two halves grow in from both edges. A negative z-index paints
 * them over the button's own background but under its label.
 */
.sws-button--primary::before,
.sws-button--primary::after {
	content: "";
	position: absolute;
	top: 0;
	z-index: -1;
	width: 0;
	height: 100%;
	background-color: var(--wp--preset--color--accent, #44ce6f);
	transition: width var(--sws-transition);
}

.sws-button--primary::after {
	left: 0;
}

.sws-button--primary::before {
	right: 0;
}

.sws-button--primary:hover,
.sws-button--primary:focus {
	color: #ffffff;
	box-shadow: var(--sws-shadow-button-hover);
	transform: translateY(-5px);
}

.sws-button--primary:hover::before,
.sws-button--primary:hover::after,
.sws-button--primary:focus::before,
.sws-button--primary:focus::after {
	width: 51%;
}

/*--------------------------------------------------------------
# Desktop
--------------------------------------------------------------*/

@media (min-width: 992px) {

	.sws-header {
		border-bottom: 0;
	}

	.sws-header__inner {
		flex-wrap: nowrap;
	}

	.sws-header__burger,
	.sws-header--js .sws-header__burger {
		display: none;
	}

	.sws-header__collapse,
	.sws-header--js .sws-header__collapse,
	.sws-header--js.sws-header--open .sws-header__collapse {
		position: static;
		display: flex;
		flex: 0 1 auto;
		align-items: center;
		max-height: none;
		overflow: visible;
		background: none;
		box-shadow: none;
	}

	.sws-nav__list {
		display: flex;
		align-items: center;
	}

	.sws-nav__item {
		position: relative;
		display: block;
		border-top: 0;
	}

	.sws-nav__link {
		display: inline-flex;
		align-items: center;
		gap: 0.25rem;
		padding: 0.9375rem 0;
		margin-inline: 0.875rem;
		font-size: 0.9375rem;
	}

	.sws-nav__link .sws-nav__chevron {
		display: block;
	}

	.sws-nav__expander,
	.sws-header--js .sws-nav__expander {
		display: none;
	}

	/* Dropdown panel. */
	.sws-nav__submenu,
	.sws-header--js .sws-nav__submenu,
	.sws-header--js .sws-nav__item--open > .sws-nav__submenu {
		position: absolute;
		top: 100%;
		left: 0;
		z-index: 10;
		display: block;
		min-width: 15.625rem;
		padding-block: 1.25rem;
		padding-inline: 0.3125rem;
		background-color: var(--wp--preset--color--surface, #ffffff);
		border-radius: var(--sws-radius-lg);
		box-shadow: var(--sws-shadow-dropdown);
		opacity: 0;
		visibility: hidden;
		transform: translateY(0.625rem);
		transition:
			opacity var(--sws-transition),
			transform var(--sws-transition),
			visibility var(--sws-transition);
	}

	/* Opens under the pointer and, unlike the reference, under the keyboard. */
	.sws-nav__item:hover > .sws-nav__submenu,
	.sws-nav__item:focus-within > .sws-nav__submenu {
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	.sws-nav__submenu .sws-nav__link {
		display: flex;
		justify-content: space-between;
		padding: 0.5625rem 0.9375rem;
		margin-inline: 0;
		font-size: 0.875rem;
	}

	/*
	 * Deeper levels fly out to the left, overlapping the panel they came from.
	 *
	 * Leftward, not rightward as the reference does it: the menu is right-
	 * aligned inside the rail, so a rightward flyout runs past the viewport and
	 * widens the document's scroll area even while it is hidden.
	 */
	.sws-nav__submenu .sws-nav__submenu {
		top: -1.25rem;
		right: calc(100% - 1.875rem);
		left: auto;
	}

	.sws-nav__submenu .sws-nav__chevron {
		transform: rotate(90deg);
	}

	/* Same reason one level up: the last dropdown aligns on its own right edge. */
	.sws-nav__list > .sws-nav__item:last-child > .sws-nav__submenu {
		left: auto;
		right: 0;
	}

	/*
	 * Flex, not block: an inline-block button in a block box would carry the
	 * line box's descender space and make the whole header ~8px taller.
	 */
	.sws-header__actions {
		display: flex;
		flex: 0 0 auto;
		align-items: center;
		padding: 0;
		margin-inline-start: 1.25rem;
		border-top: 0;
	}

	.sws-button {
		display: inline-flex;
	}

	/*
	 * The switcher becomes a dropdown like the menu items, opened on hover and
	 * on focus. The panel is right-aligned for the same reason the last menu
	 * dropdown is: the header sits at the right edge of the rail, and a
	 * left-aligned panel would push the document's scroll width out.
	 */
	.sws-langs {
		position: relative;
		flex: 0 0 auto;
		margin-inline-start: 0.875rem;
		border-top: 0;
	}

	.sws-langs__toggle,
	.sws-header--js .sws-langs__toggle {
		display: inline-flex;
		width: auto;
		padding: 0.9375rem 0;
		font-size: 0.9375rem;
	}

	.sws-langs__code {
		flex: 0 0 auto;
	}

	.sws-langs__list,
	.sws-header--js .sws-langs__list,
	.sws-header--js .sws-langs--open .sws-langs__list {
		position: absolute;
		top: 100%;
		right: 0;
		z-index: 10;
		display: block;
		min-width: 11.25rem;
		padding-block: 1.25rem;
		padding-inline: 0.3125rem;
		background-color: var(--wp--preset--color--surface, #ffffff);
		border-radius: var(--sws-radius-lg);
		box-shadow: var(--sws-shadow-dropdown);
		opacity: 0;
		visibility: hidden;
		transform: translateY(0.625rem);
		transition:
			opacity var(--sws-transition),
			transform var(--sws-transition),
			visibility var(--sws-transition);
	}

	.sws-langs:hover .sws-langs__list,
	.sws-langs:focus-within .sws-langs__list {
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	.sws-langs__link {
		padding: 0.5625rem 0.9375rem;
	}
}

/* Small laptops: reclaim the gaps before the row crowds. */
@media (min-width: 992px) and (max-width: 1199px) {

	.sws-nav__link {
		margin-inline: 0.625rem;
	}

	.sws-button {
		padding-inline: 1.75rem;
	}

	.sws-header__actions {
		margin-inline-start: 0.75rem;
	}
}

/*--------------------------------------------------------------
# Overlay variant
--------------------------------------------------------------*/

/*
 * Reserved for pages that open with a hero: the header floats over it and only
 * paints itself once the page scrolls. A template using this modifier has to
 * offset its first section by the header height, because a fixed header takes
 * no space in the flow.
 */
.sws-header--overlay {
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	background-color: transparent;
	/*
	 * The bottom hairline is deliberately not reset here. Below the desktop
	 * threshold it still separates the transparent bar from the section behind
	 * it; from 992px up the base rule has already dropped it.
	 */
}

.sws-header--overlay.sws-header--stuck {
	background-color: var(--wp--preset--color--surface, #ffffff);
	box-shadow: var(--sws-shadow-header);
}