/*
 * Header (redesign POC, soft editorial). Paper on every page: logo mark and serif wordmark on the left, the
 * menu in small spaced capitals (Inter), "( Support our work )" in brackets on the right. Below 782px: logo,
 * wordmark and a crimson two-line menu button; the menu opens full screen on paper with large serif links.
 */
.sr-header {
	position: relative;
	z-index: 20;
	gap: 2rem;
	padding: 22px 3vw;
	background: var(--wp--preset--color--paper) var(--sr-grain);
	color: var(--wp--preset--color--ink);
}

.sr-header a {
	color: inherit;
	text-decoration: none;
}

.sr-header__brand {
	gap: 12px;
	align-items: center;
	flex-shrink: 0;
}

.sr-header__logo,
.sr-header__logo a,
.sr-header__logo img {
	display: block;
	margin: 0;
}

.sr-header__logo img {
	aspect-ratio: 240 / 433;
	object-fit: contain;
}

.sr-header__wordmark,
.sr-header__wordmark a,
.sr-header__wordmark img {
	display: block;
	margin: 0;
}

.sr-header__wordmark img {
	aspect-ratio: 2333 / 1126;
}

/* Menu: small spaced capitals; the current page and hover get a thin crimson line under the word. */
.sr-header__nav {
	margin-inline-start: auto;
	font-family: var(--wp--preset--font-family--label);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.sr-header__nav .wp-block-navigation__container {
	gap: 2.2rem;
}

.sr-header__nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item__content {
	position: relative;
	padding-block: 4px;
}

.sr-header__nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: -2px;
	height: 1px;
	background: var(--wp--preset--color--accent-1);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.25s ease;
}

.sr-header__nav .wp-block-navigation__responsive-container:not(.is-menu-open) .current-menu-item > .wp-block-navigation-item__content::after,
.sr-header__nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item__content:is(:hover, :focus-visible)::after {
	transform: scaleX(1);
}

/* Donate link, social links and the donate menu item only show in the open phone menu. */
.sr-header__nav .wp-block-navigation__responsive-container:not(.is-menu-open) .sr-nav-overlay-only,
.sr-header__nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item:has(> .sr-nav-overlay-only) {
	display: none !important;
}

.sr-header__donate {
	margin: 0;
	flex-shrink: 0;
	font-family: var(--wp--preset--font-family--label);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* Menu button: two crimson lines, like 2819's. */
.sr-header__nav .wp-block-navigation__responsive-container-open,
.sr-header__nav .wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--accent-1);
}

.sr-header__nav .wp-block-navigation__responsive-container-open svg,
.sr-header__nav .wp-block-navigation__responsive-container-close svg {
	width: 30px;
	height: 30px;
}

/* Open phone menu: paper, large serif links, a crimson rule on the left. */
.sr-header__nav .wp-block-navigation__responsive-container.is-menu-open {
	padding: 22px 6vw 40px;
	background-image: var(--sr-grain);
}

.sr-header__nav .is-menu-open .wp-block-navigation__responsive-container-content {
	align-items: flex-start !important;
	padding-top: 72px !important;
	padding-left: 22px;
	border-left: 1px solid var(--wp--preset--color--accent-1);
}

.sr-header__nav .is-menu-open .wp-block-navigation__container {
	gap: 0.45rem !important;
	align-items: flex-start !important;
}

.sr-header__nav .is-menu-open .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 2.5rem;
	font-weight: 300;
	letter-spacing: 0;
	line-height: 1.08;
	text-transform: uppercase;
}

.sr-header__nav .is-menu-open .current-menu-item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--accent-1);
	font-style: italic;
	font-weight: 400;
	text-transform: lowercase;
}

.sr-header__nav .is-menu-open .sr-nav-overlay-donate .wp-block-navigation-item__content {
	margin-top: 1.4rem;
	font-family: var(--wp--preset--font-family--label);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.sr-header__nav .is-menu-open .sr-nav-overlay-donate .wp-block-navigation-item__content::before,
.sr-header__nav .is-menu-open .sr-nav-overlay-donate .wp-block-navigation-item__content::after {
	color: var(--wp--preset--color--accent-1);
	font-weight: 400;
}

.sr-header__nav .is-menu-open .sr-nav-overlay-donate .wp-block-navigation-item__content::before {
	content: "(";
}

.sr-header__nav .is-menu-open .sr-nav-overlay-donate .wp-block-navigation-item__content::after {
	content: ")";
}

.sr-header__nav .is-menu-open .sr-nav-overlay-social {
	margin-top: 1.4rem;
	font-size: 22px;
	gap: 18px;
}

.sr-header__nav .sr-nav-overlay-social .wp-social-link {
	background: none !important;
	color: var(--wp--preset--color--ink) !important;
}

@media (max-width: 781px) {
	.sr-header {
		padding: 16px 20px;
	}

	.sr-header__wordmark img {
		width: 68px !important;
	}

	.sr-header__donate {
		display: none;
	}
}

@media (min-width: 782px) and (max-width: 1100px) {
	.sr-header__nav .wp-block-navigation__container {
		gap: 1.2rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sr-header__nav .wp-block-navigation-item__content::after {
		transition: none;
	}
}