/* SyM Lab Site Pages 1.10.4: the shared header and footer on every page, and the English / 中文
   switch. One white header row: the site name with the PI line beside it, the navigation, and the
   switch at the right end. On wide screens the row stays pinned while scrolling. The footer is
   light: the logo, then the address. */

/* ---------- English / 中文 ---------- */

/* html[data-sym-lang-active] is set before the page paints (an inline script in the head) and by
   the switch. Only the chosen language shows. Without JavaScript nothing is set, so the page shows
   the stored content as it is, and none of the added translations. */
html[data-sym-lang-active="en"] [data-sym-lang="zh"],
html[data-sym-lang-active="zh"] [data-sym-lang="en"],
html[data-sym-lang-active] [data-sym-bilingual],
html:not([data-sym-lang-active]) [data-sym-added] {
	display: none !important;
}

/* Chinese is set without the tight tracking of the English headings. */
html[data-sym-lang-active="zh"] [data-sym-lang="zh"],
html[data-sym-lang-active="zh"] [data-sym-lang="zh"] :is(h1, h2, h3, h4, h5, h6, strong) {
	letter-spacing: 0 !important;
}

:root {
	/* 1.7.1: how long the header takes to slide away or back, shared with the sticky parts below it. */
	--sym-header-slide: 600ms cubic-bezier(0.4, 0, 0.2, 1);
	--sym-header-h: 116px;
	--sym-header-offset: calc(var(--wp-admin--admin-bar--height, 0px) + var(--sym-header-h));
}

html {
	scroll-padding-top: calc(var(--sym-header-offset) + 16px);
}

.sym-shell-header,
.sym-shell-footer {
	--sym-shell-ink: #000;
	--sym-shell-text: #000;
	--sym-shell-muted: #000;
	--sym-shell-blue: #1d4ed8;
	--sym-shell-rule: #d6dde2;
	--sym-shell-soft: #f5f7f9;
	--sym-shell-wide: var(--wp--style--global--wide-size, 1200px);
	--sym-shell-gutter: var(--wp--preset--spacing--50, 1.75rem);
}

.sym-shell-wrap {
	box-sizing: border-box;
	margin-left: auto;
	margin-right: auto;
	max-width: var(--sym-shell-wide);
	width: calc(100% - 2 * var(--sym-shell-gutter));
}

/* 1.4.0: readability on every page. The theme's text presets shrink body text to 13 px on phones
   and its foreground is a dark gray; body text now starts at 16 px and theme text is black. */
html:root {
	--wp--preset--color--foreground: #000;
	--wp--preset--font-size--x-small: 0.875rem;
	--wp--preset--font-size--small: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
}

/* ---------- Header ---------- */

/* 1.7.0: the header is pinned at every width, slides up out of view while the page scrolls down and
   comes back as soon as it scrolls up (site-shell.js sets .is-hidden). The transform is set only while
   hidden: a transform on the header would otherwise trap the phone menu (position: fixed) inside it. */
.sym-shell-header {
	margin: 0 !important;
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	transition: transform var(--sym-header-slide);
	z-index: 90;
}

.sym-shell-header.is-hidden {
	transform: translateY(-100%);
}

.sym-shell-header.is-hidden .sym-mainbar {
	box-shadow: none;
}

/* The frosted background sits on a pseudo-element: a backdrop-filter on the bar itself would become
   the containing block of the phone menu overlay (position: fixed) and trap it inside the bar. */
.sym-mainbar {
	border-bottom: 1px solid var(--sym-shell-rule);
	isolation: isolate;
	position: relative;
	transition: box-shadow 250ms ease;
}

.sym-mainbar::before {
	-webkit-backdrop-filter: saturate(1.5) blur(14px);
	backdrop-filter: saturate(1.5) blur(14px);
	background: rgba(255, 255, 255, 0.92);
	content: "";
	inset: 0;
	pointer-events: none;
	position: absolute;
	transition: background 250ms ease;
	z-index: -1;
}

.sym-shell-header.is-scrolled .sym-mainbar {
	box-shadow: 0 10px 28px rgba(17, 24, 31, 0.07);
}

.sym-shell-header.is-scrolled .sym-mainbar::before {
	background: rgba(255, 255, 255, 0.97);
}

.sym-mainbar__inner {
	align-items: center;
	display: flex;
	gap: 12px 28px;
	min-height: 76px;
}

/* Site name and tagline, with the PI line beside them behind a thin divider. */
.sym-brand {
	align-items: center;
	column-gap: 20px;
	display: grid;
	grid-template-areas: "title pi" "tagline pi";
	grid-template-columns: auto auto;
	margin-right: auto;
	min-width: 0;
	row-gap: 3px;
}

.sym-shell-header .sym-brand .wp-block-site-title {
	align-self: end;
	font-size: 1.5rem !important;
	font-weight: 800;
	grid-area: title;
	letter-spacing: -0.03em;
	line-height: 1.1;
	margin: 0 !important;
}

.sym-shell-header .sym-brand .wp-block-site-title a {
	color: var(--sym-shell-ink) !important;
	text-decoration: none !important;
}

.sym-shell-header .sym-brand .wp-block-site-tagline {
	align-self: start;
	color: var(--sym-shell-muted) !important;
	font-size: 0.875rem !important;
	grid-area: tagline;
	letter-spacing: 0.02em;
	line-height: 1.3;
	margin: 0 !important;
	max-width: none !important;
	text-align: left !important;
	white-space: nowrap;
}

/* 1.5.0: the site name writes itself in when a page opens: each letter rises into place while it
   fades in and its blur clears, one after another, over about two and a half seconds. Only the letters move
   (opacity, transform, filter), so nothing around them shifts. The stored name, visually hidden,
   is what screen readers read. */
.sym-shell-header .sym-wordmark__label {
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

.sym-shell-header .sym-wordmark {
	display: inline-block;
	white-space: pre;
}

.sym-shell-header .sym-wordmark__char {
	animation: sym-wordmark-in 1200ms cubic-bezier(0.22, 1, 0.36, 1) both;
	animation-delay: calc(300ms + var(--i, 0) * 170ms);
	display: inline-block;
}

@keyframes sym-wordmark-in {
	from {
		filter: blur(8px);
		opacity: 0;
		transform: translateY(0.7em);
	}

	to {
		filter: blur(0);
		opacity: 1;
		transform: none;
	}
}

/* 1.9.0: the lab logo in place of the site name (sym-logo.svg, without its tagline, which follows
   as text). It draws itself when a page opens: each strand grows along its path (a stroke along its
   centre line masks it), then the letters rise in, over about two seconds. Only parts inside the
   logo move. Times and lengths come from the SVG (build-logo-svg.py). */
.sym-shell-header {
	--sym-logo-h: 46px;
}

.sym-shell-header .sym-brand .wp-block-site-title.has-logo {
	line-height: 0;
}

.sym-shell-header .wp-block-site-title .sym-logo {
	display: block;
	height: var(--sym-logo-h);
	/* The lower strand's curve sits close above the tagline. */
	margin-bottom: 2px;
	overflow: visible;
	width: auto;
}

.sym-logo__word path {
	transform-box: fill-box;
}

@media (prefers-reduced-motion: no-preference) {
	.sym-logo__trace {
		animation: sym-logo-trace var(--dur) cubic-bezier(0.3, 0, 0.3, 1) var(--delay) both;
		stroke-dasharray: var(--len) var(--len);
	}

	.sym-logo__word path {
		animation: sym-logo-letter 900ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
		animation-delay: calc(var(--sym-logo-letters) + var(--i) * var(--sym-logo-stagger));
	}
}

@keyframes sym-logo-trace {
	from {
		stroke-dashoffset: var(--len);
	}

	to {
		stroke-dashoffset: 0;
	}
}

@keyframes sym-logo-letter {
	from {
		opacity: 0;
		/* In the logo's own units: about a seventh of its height. */
		transform: translateY(100px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

.sym-shell-header .sym-brand__pi {
	align-self: center;
	border-left: 1px solid var(--sym-shell-rule);
	font-size: 0.9375rem !important;
	grid-area: pi;
	line-height: 1.35;
	margin: 0 !important;
	padding: 2px 0 2px 20px;
}

.sym-shell-header .sym-brand__pi a {
	color: var(--sym-shell-ink) !important;
	display: flex;
	flex-direction: column;
	text-decoration: none !important;
	transition: color 200ms ease;
}

.sym-shell-header .sym-brand__pi strong {
	font-weight: 650;
}

.sym-shell-header .sym-brand__pi .sym-pipe {
	display: none;
}

.sym-shell-header .sym-brand__pi-zh {
	color: var(--sym-shell-muted);
	font-size: 0.875rem;
	margin-top: 1px;
	transition: color 200ms ease;
}

.sym-shell-header .sym-brand__pi-zh strong {
	font-weight: 500;
}

.sym-shell-header .sym-brand__pi a:hover,
.sym-shell-header .sym-brand__pi a:hover .sym-brand__pi-zh {
	color: var(--sym-shell-blue) !important;
}

/* 中文: the PI's Chinese name and title lead, the English name follows. */
html[data-sym-lang-active="zh"] .sym-shell-header .sym-brand__pi-zh {
	color: var(--sym-shell-ink);
	font-size: 0.9375rem;
	margin-top: 0;
	order: -1;
}

html[data-sym-lang-active="zh"] .sym-shell-header .sym-brand__pi-zh strong {
	font-weight: 650;
}

html[data-sym-lang-active="zh"] .sym-shell-header .sym-brand__pi a > strong {
	color: var(--sym-shell-muted);
	font-size: 0.875rem;
	font-weight: 500;
}

.sym-shell-header .sym-mainbar .wp-block-navigation {
	flex: 0 1 auto;
	margin: 0 !important;
}

.sym-shell-header .sym-mainbar .wp-block-navigation__container {
	gap: 2px !important;
}

.sym-shell-header .wp-block-navigation-item__content {
	border-radius: 999px;
	color: var(--sym-shell-text) !important;
	font-size: 1rem;
	font-weight: 600;
	padding: 9px 12px !important;
	position: relative;
	text-decoration: none !important;
	transition: background 200ms ease, color 200ms ease;
}

.sym-shell-header .wp-block-navigation-item__content strong {
	font-weight: inherit;
}

.sym-shell-header .wp-block-navigation-item__content:hover {
	color: var(--sym-shell-ink) !important;
}

.sym-shell-header :is(.current-menu-item, .is-current) > .wp-block-navigation-item__content {
	color: var(--sym-shell-blue) !important;
}

/* 1.7.0: pointing at a menu item, or focusing it from the keyboard, draws the blue line under it that
   marks the current page; there is no shape behind the text. */
.sym-shell-header .wp-block-navigation-item__content::after {
	background: var(--sym-shell-blue);
	border-radius: 2px;
	bottom: 3px;
	content: "";
	height: 2px;
	left: 12px;
	position: absolute;
	right: 12px;
	transform: scaleX(0);
	transition: transform 250ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.sym-shell-header .wp-block-navigation-item__content:is(:hover, :focus-visible)::after,
.sym-shell-header :is(.current-menu-item, .is-current) > .wp-block-navigation-item__content::after {
	transform: scaleX(1);
}

.sym-header-actions {
	align-items: center;
	display: flex;
	flex: 0 0 auto;
}

.sym-shell-header .sym-lang-switch {
	background: #eef2f5;
	border-radius: 999px;
	display: inline-flex;
	gap: 2px;
	padding: 3px;
}

.sym-shell-header .sym-lang-switch[hidden] {
	display: none;
}

.sym-shell-header .sym-lang-switch__option {
	background: transparent;
	border: 0;
	border-radius: 999px;
	color: var(--sym-shell-muted);
	cursor: pointer;
	font: inherit;
	font-size: 0.875rem;
	font-weight: 650;
	line-height: 1;
	min-height: 30px;
	padding: 7px 13px;
	transition: background 200ms ease, box-shadow 200ms ease, color 200ms ease;
}

.sym-shell-header .sym-lang-switch__option:hover {
	color: var(--sym-shell-ink);
}

.sym-shell-header .sym-lang-switch__option[aria-pressed="true"] {
	background: #fff;
	box-shadow: 0 1px 2px rgba(17, 24, 31, 0.08), 0 2px 8px rgba(17, 24, 31, 0.08);
	color: var(--sym-shell-ink);
}

.sym-shell-header .sym-lang-switch__option:focus-visible,
.sym-shell-header .sym-brand a:focus-visible {
	outline: 2px solid var(--sym-shell-blue);
	outline-offset: 2px;
}

/* No display value here: the theme decides when the menu buttons show (phones only). */
.sym-shell-header .wp-block-navigation__responsive-container-open,
.sym-shell-header .wp-block-navigation__responsive-container-close {
	align-items: center;
	border: 1px solid var(--sym-shell-rule);
	border-radius: 12px;
	color: var(--sym-shell-ink);
	height: 40px;
	justify-content: center;
	width: 40px;
}

.sym-shell-header .wp-block-navigation__responsive-container.is-menu-open {
	background: #fff !important;
	color: var(--sym-shell-ink) !important;
	padding: 20px var(--sym-shell-gutter) !important;
}

.sym-shell-header .is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: 56px !important;
}

.sym-shell-header .is-menu-open .wp-block-navigation__container {
	align-items: flex-start !important;
	gap: 4px !important;
	width: 100%;
}

.sym-shell-header .is-menu-open .wp-block-navigation-item {
	border-bottom: 1px solid var(--sym-shell-rule);
	width: 100%;
}

.sym-shell-header .is-menu-open .wp-block-navigation-item__content {
	border-radius: 0;
	display: block;
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	padding: 16px 0 !important;
	width: 100%;
}

.sym-shell-header .is-menu-open .wp-block-navigation-item__content::after {
	display: none;
}

.sym-header-extra {
	flex-basis: 100%;
}

/* ---------- Footer ---------- */

.sym-shell-footer {
	background: var(--sym-shell-soft);
	border-top: 1px solid var(--sym-shell-rule);
	color: var(--sym-shell-text);
	margin-top: 0 !important;
	padding: clamp(36px, 5vw, 56px) 0 24px;
}

.sym-shell-footer a {
	color: inherit;
}

.sym-footer__grid {
	align-items: center;
	display: grid;
	gap: 24px clamp(32px, 5vw, 64px);
	grid-template-columns: minmax(0, 1fr);
}

.sym-footer__grid.has-logo {
	grid-template-columns: auto minmax(0, 1fr);
}

.sym-shell-footer .sym-footer__logo figure {
	margin: 0 !important;
}

.sym-shell-footer .sym-footer__logo a {
	display: block;
}

.sym-shell-footer .sym-footer__logo img {
	display: block;
	height: auto !important;
	/* The logo is drawn on a white canvas; multiply lets it take the footer's colour. */
	mix-blend-mode: multiply;
	width: 128px !important;
}

/* 1.9.0: the logo as a large, faint background of the footer, in place of the small logo image
   (sym-logo-mark.svg; site-shell.php passes its URL in --sym-footer-mark). It is one colour, the
   link blue, drawn through the logo's shape as a mask, so the letters weigh no more than the strands.
   It sits in the lower right corner and runs past the right and lower edges by a share of its own
   size, so every width shows the same crop: the crossing strands over SYM, cut by the edges. */
.sym-shell-footer.has-mark {
	isolation: isolate;
	overflow: hidden;
	position: relative;
}

.sym-shell-footer.has-mark::before {
	-webkit-mask: var(--sym-footer-mark) no-repeat center / contain;
	mask: var(--sym-footer-mark) no-repeat center / contain;
	aspect-ratio: 2413 / 664;
	background: var(--sym-shell-blue);
	bottom: 0;
	content: "";
	opacity: 0.08;
	pointer-events: none;
	position: absolute;
	right: 0;
	transform: translate(23%, 18%);
	width: max(78%, 720px);
	z-index: -1;
}

.sym-shell-footer.has-mark .sym-footer__logo {
	display: none;
}

.sym-shell-footer.has-mark .sym-footer__grid.has-logo {
	grid-template-columns: minmax(0, 1fr);
}

.sym-shell-footer .sym-footer__address {
	display: grid;
	font-size: 1rem !important;
	gap: 4px clamp(24px, 4vw, 56px);
	grid-auto-flow: row dense;
	grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
	line-height: 1.6;
	list-style: none;
	margin: 0 !important;
	padding: 0 !important;
}

.sym-shell-footer .sym-footer__address li {
	color: var(--sym-shell-muted);
	grid-column: 1;
	margin: 0;
}

.sym-shell-footer .sym-footer__address li.is-zh {
	grid-column: 2;
}

.sym-shell-footer .sym-footer__address li.is-first {
	color: var(--sym-shell-ink);
	font-weight: 650;
}

/* With a language chosen, the address shows in that language only, as one column. */
html[data-sym-lang-active] .sym-shell-footer .sym-footer__address {
	grid-template-columns: minmax(0, 1fr);
}

html[data-sym-lang-active] .sym-shell-footer .sym-footer__address li.is-zh {
	grid-column: 1;
}

html[data-sym-lang-active] .sym-shell-footer .sym-footer__address li.is-zh.is-first {
	margin-top: 0;
}

.sym-footer__more {
	grid-column: 1 / -1;
}

.sym-footer__bottom {
	align-items: center;
	border-top: 1px solid var(--sym-shell-rule);
	color: var(--sym-shell-muted);
	display: flex;
	flex-wrap: wrap;
	font-size: 0.9375rem;
	gap: 12px 24px;
	justify-content: space-between;
	margin-top: clamp(28px, 4vw, 40px);
	padding-top: 18px;
}

.sym-shell-footer .sym-footer__copy {
	margin: 0 !important;
}

.sym-shell-footer .sym-to-top {
	align-items: center;
	color: var(--sym-shell-text) !important;
	display: inline-flex;
	font-weight: 600;
	gap: 10px;
	text-decoration: none !important;
	transition: color 200ms ease;
}

.sym-shell-footer .sym-to-top::after {
	background: #fff;
	border: 1px solid var(--sym-shell-rule);
	border-radius: 50%;
	content: "↑";
	display: inline-grid;
	font-size: 1rem;
	height: 28px;
	place-items: center;
	transition: border-color 200ms ease, transform 200ms ease;
	width: 28px;
}

.sym-shell-footer .sym-to-top:hover {
	color: var(--sym-shell-blue) !important;
}

.sym-shell-footer .sym-to-top:hover::after {
	border-color: var(--sym-shell-blue);
	transform: translateY(-2px);
}

.sym-shell-footer :is(a, button):focus-visible {
	border-radius: 6px;
	outline: 2px solid var(--sym-shell-blue);
	outline-offset: 3px;
}

/* ---------- Responsive ---------- */

/* The pinned header's height until site-shell.js measures it (sticky parts of a page sit below it). */
@media (min-width: 601px) {
	:root {
		--sym-header-h: 121px;
	}
}

/* 1.9.1: beside the PI line, the logo sits centred over its tagline. 1.9.3: the Chinese tagline is
   spread evenly to the width of the English one, so the lockup is the same in both languages and
   switching language moves nothing in the header. The English line stays in the layout, invisible
   and without height, to set that width in any font. On phones both start at the left edge, like
   the lines below them. */
@media (min-width: 601px) {
	.sym-shell-header .sym-brand .wp-block-site-title.has-logo {
		justify-self: center;
	}

	.sym-shell-header .sym-brand .wp-block-site-title.has-logo ~ .wp-block-site-tagline {
		justify-self: center;
		text-align: center !important;
	}

	html[data-sym-lang-active="zh"] .sym-shell-header .sym-brand .wp-block-site-title.has-logo ~ .wp-block-site-tagline [data-sym-lang="en"] {
		display: block !important;
		height: 0;
		overflow: hidden;
		visibility: hidden;
	}

	html[data-sym-lang-active="zh"] .sym-shell-header .sym-brand .wp-block-site-title.has-logo ~ .wp-block-site-tagline [data-sym-lang="zh"] {
		display: block;
		text-align: justify;
		text-align-last: justify;
	}
}

/* Wide screens: everything on one row. */
@media (min-width: 1200px) {
	:root {
		--sym-header-h: 83px;
	}
}

/* One row from 1200 px: the tagline and the PI lines never wrap, and the menu items keep tight
   padding. When the row does not fit (a narrower window, a wider font, a larger default text size),
   site-shell.js adds .is-stacked and the menu takes its own row, as on tablets, instead of squeezing
   or wrapping anything. */
@media (min-width: 1200px) {
	.sym-mainbar__inner {
		column-gap: 24px;
		/* 1.9.0: room above and below the logo and tagline. */
		padding-block: 8px;
	}

	.sym-brand {
		column-gap: 16px;
	}

	.sym-shell-header .sym-brand__pi {
		padding-left: 16px;
	}

	.sym-shell-header .sym-brand__pi a > * {
		white-space: nowrap;
	}

	.sym-shell-header .wp-block-navigation-item__content {
		padding-inline: 8px !important;
	}

	.sym-shell-header .wp-block-navigation-item__content::after {
		left: 8px;
		right: 8px;
	}

	.sym-shell-header.is-stacked .sym-mainbar__inner {
		flex-wrap: wrap;
		padding-block: 14px 6px;
		row-gap: 8px;
	}

	.sym-shell-header.is-stacked .sym-brand {
		order: 1;
	}

	.sym-shell-header.is-stacked .sym-header-actions {
		order: 2;
	}

	.sym-shell-header.is-stacked .sym-mainbar .wp-block-navigation {
		flex-basis: 100%;
		margin-left: -8px !important;
		order: 3;
	}

	.sym-shell-header.is-stacked .sym-header-extra {
		order: 4;
	}
}

/* Tablets: the site name and the switch on the first row, the navigation on its own row below. */
@media (min-width: 601px) and (max-width: 1199px) {
	.sym-mainbar__inner {
		flex-wrap: wrap;
		padding-block: 14px 6px;
		row-gap: 8px;
	}

	.sym-brand {
		order: 1;
	}

	.sym-header-actions {
		order: 2;
	}

	.sym-shell-header .sym-mainbar .wp-block-navigation {
		flex-basis: 100%;
		margin-left: -12px !important;
		order: 3;
		overflow-x: auto;
		scrollbar-width: none;
	}

	.sym-shell-header .sym-mainbar .wp-block-navigation::-webkit-scrollbar {
		display: none;
	}

	.sym-shell-header .sym-mainbar .wp-block-navigation__container {
		flex-wrap: nowrap !important;
	}

	.sym-shell-header .wp-block-navigation-item__content {
		white-space: nowrap;
	}

	.sym-header-extra {
		order: 4;
	}
}

@media (max-width: 700px) {
	.sym-footer__grid.has-logo,
	.sym-shell-footer .sym-footer__address {
		grid-template-columns: minmax(0, 1fr);
	}

	.sym-shell-footer .sym-footer__address li.is-zh {
		grid-column: 1;
	}

	.sym-shell-footer .sym-footer__address li.is-zh.is-first {
		margin-top: 10px;
	}

	.sym-shell-footer .sym-footer__logo img {
		width: 112px !important;
	}
}

/* Phones: site name, switch and menu button on the first line; tagline and PI line below. */
@media (max-width: 600px) {
	.sym-shell-header,
	.sym-shell-footer {
		--sym-shell-gutter: 20px;
	}

	.sym-mainbar__inner {
		align-items: center;
		column-gap: 10px;
		display: grid;
		grid-template-areas: "title actions nav" "tagline tagline tagline" "pi pi pi" "extra extra extra";
		grid-template-columns: minmax(0, 1fr) auto auto;
		min-height: 0;
		padding-block: 12px 14px;
		row-gap: 2px;
	}

	.sym-brand {
		display: contents;
	}

	.sym-shell-header .sym-brand .wp-block-site-title {
		align-self: center;
		font-size: 1.375rem !important;
	}

	.sym-shell-header {
		--sym-logo-h: 38px;
	}

	.sym-shell-header .sym-brand .wp-block-site-tagline {
		letter-spacing: 0;
	}

	.sym-shell-header .sym-brand__pi {
		border-left: 0;
		font-size: 0.875rem !important;
		margin-top: 6px !important;
		padding: 0;
	}

	.sym-shell-header .sym-brand__pi a {
		column-gap: 8px;
		flex-direction: row;
		flex-wrap: wrap;
	}

	.sym-shell-header .sym-brand__pi-zh {
		margin-top: 0;
	}

	.sym-header-actions {
		grid-area: actions;
	}

	.sym-shell-header .sym-mainbar .wp-block-navigation {
		grid-area: nav;
	}

	.sym-header-extra {
		grid-area: extra;
	}

	.sym-shell-header .sym-lang-switch__option {
		font-size: 0.875rem;
		min-height: 28px;
		padding: 6px 10px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sym-shell-header,
	.sym-shell-header *,
	.sym-shell-footer *,
	.sym-mainbar,
	.sym-mainbar::before {
		transition: none !important;
	}

	.sym-shell-header .sym-wordmark__char {
		animation: none;
	}
}

@media print {
	.sym-shell-header {
		position: static;
	}

	.sym-header-actions,
	.sym-to-top {
		display: none !important;
	}
}