/* Proodeftiko Elaiourgeio Spilias
   Composition layer. Colour, type and spacing tokens come from theme.json. */

:root {
	--pr-grain-opacity: 0.03;
	--pr-header-h: 82px;
	--pr-hairline: 1px solid var(--wp--preset--color--line);
	--pr-hairline-dark: 1px solid rgba(237, 235, 224, 0.16);
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

:where(h1, h2, h3, h4, p, figure, ul, ol) {
	margin-block: 0;
}

:where(h1, h2, h3) em {
	display: inline-block;
	font-style: italic;
	line-height: 1.14;
	padding-block-end: 0.05em;
}

/* ---------- primitives ---------- */

.pr-label {
	color: var(--wp--preset--color--muted);
	display: block;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	margin-block-end: 1.5rem;
	text-transform: uppercase;
}

.pr-panel .pr-label,
.pr-hero .pr-label {
	color: var(--wp--preset--color--accent);
}

.pr-todo {
	border-block-end: 1px dashed var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent);
	font-style: normal;
}

.pr-panel {
	background: var(--wp--preset--color--olive-black);
	color: var(--wp--preset--color--on-dark);
}

.pr-panel :where(h1, h2, h3, p) {
	color: var(--wp--preset--color--on-dark);
}

.pr-panel a:not(.wp-element-button) {
	color: var(--wp--preset--color--on-dark);
}

.pr-statement {
	font-size: clamp(2rem, 4.2vw, 3.4rem);
	line-height: 1.06;
	max-width: 18ch;
}

.pr-lede {
	color: var(--wp--preset--color--muted);
	font-size: clamp(1.0625rem, 1.4vw, 1.25rem);
	line-height: 1.7;
	max-width: 58ch;
}

.pr-panel .pr-lede {
	color: rgba(237, 235, 224, 0.72);
}

.wp-element-button,
.wp-block-button__link {
	transition: transform 0.25s ease, background-color 0.25s ease;
}

.wp-block-button__link:hover {
	transform: translateY(-2px);
}

.wp-block-button.is-style-outline .wp-block-button__link {
	border: 1px solid rgba(237, 235, 224, 0.55);
	color: var(--wp--preset--color--on-dark);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--wp--preset--color--on-dark);
	border-color: var(--wp--preset--color--on-dark);
	color: var(--wp--preset--color--olive-black);
}

/* ---------- header ---------- */

.pr-header {
	background: var(--wp--preset--color--bone);
	border-block-end: var(--pr-hairline);
	position: sticky;
	top: 0;
	z-index: 50;
}

.pr-header__inner {
	align-items: center;
	display: flex;
	gap: clamp(16px, 3vw, 40px);
	justify-content: space-between;
	margin-inline: auto;
	max-width: none;
	min-height: var(--pr-header-h);
	padding-inline: clamp(20px, 2.5vw, 40px);
}

.pr-wordmark {
	display: block;
	line-height: 1.15;
	text-decoration: none;
}

.pr-wordmark b {
	display: block;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.9375rem;
	font-weight: 700;
	letter-spacing: 0.13em;
}

.pr-wordmark span {
	color: var(--wp--preset--color--muted);
	display: block;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.625rem;
	font-weight: 500;
	letter-spacing: 0.2em;
}

.pr-header .wp-block-navigation {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.875rem;
	font-weight: 500;
}

.pr-header .wp-block-navigation .wp-block-navigation-item__content {
	border-block-end: 1px solid transparent;
	display: inline-block;
	padding-block-end: 3px;
	text-decoration: none;
	transition: border-color 0.22s ease, transform 0.22s ease;
}

/* The colour never changes on hover: `inherit` resolved to the dark body text
   and made the label unreadable over the hero. The state is carried by an
   underline in the label's own colour plus a small scale instead. */
.pr-header .wp-block-navigation .wp-block-navigation-item__content:hover,
.pr-header .wp-block-navigation .wp-block-navigation-item__content:focus-visible {
	border-block-end-color: currentColor;
	transform: scale(1.07);
}

.pr-header .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content {
	border-block-end-color: currentColor;
}

.pr-header__phone {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.875rem;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

/* ---------- hero ---------- */

.pr-hero {
	min-height: min(86vh, 780px);
	position: relative;
}

.pr-hero__inner {
	max-width: 1280px;
	padding-inline: clamp(20px, 4vw, 48px);
	width: 100%;
}

/* The home hero title is sized in hero.css via .pr-hero__title. A rule for
   `.pr-hero h1` used to sit here and, being one specificity step higher,
   silently beat it at every breakpoint, which is why the mobile size never
   took effect. */

/* The second line is indented and tinted, the way the prototype had it,
   but it stays inside the same h1 so the page keeps one heading. */
.pr-hero__title em {
	color: var(--wp--preset--color--accent-light);
	display: inline-block;
	margin-inline-start: clamp(0px, 6vw, 104px);
}

.pr-hero .pr-lede {
	color: rgba(237, 235, 224, 0.8);
	max-width: 46ch;
}

.pr-hero .wp-block-buttons {
	margin-block-start: 2.5rem;
}

.pr-hero__since {
	border-inline-start: 2px solid var(--wp--preset--color--accent);
	margin-block-start: clamp(48px, 7vw, 88px);
	padding-inline-start: 20px;
}

.pr-hero__since b {
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.5rem;
	font-weight: 500;
	line-height: 1.1;
}

.pr-hero__since span {
	color: rgba(237, 235, 224, 0.6);
	font-size: 0.8125rem;
	letter-spacing: 0.06em;
}

/* ---------- process ---------- */

.pr-process {
	align-items: start;
	display: grid;
	gap: clamp(32px, 5vw, 96px);
	grid-template-columns: 0.8fr 1.2fr;
}

.pr-process__aside {
	position: sticky;
	top: calc(var(--pr-header-h) + 48px);
}

.pr-process__aside h2 {
	font-size: clamp(1.875rem, 3.4vw, 2.75rem);
	line-height: 1.06;
}

.pr-stage {
	border-block-start: var(--pr-hairline-dark);
	display: grid;
	gap: clamp(16px, 3vw, 36px);
	grid-template-columns: 64px 1fr;
	padding-block: clamp(28px, 3.6vw, 44px);
}

.pr-stage:last-child {
	border-block-end: var(--pr-hairline-dark);
}

.pr-stage__num {
	color: var(--wp--preset--color--accent);
	font-family: var(--wp--preset--font-family--display);
	font-size: 2.25rem;
	font-weight: 500;
	line-height: 0.9;
}

.pr-stage h3 {
	font-size: 1.375rem;
	margin-block-end: 0.5rem;
}

.pr-stage p {
	color: rgba(237, 235, 224, 0.66);
	font-size: 1rem;
	line-height: 1.65;
	max-width: 46ch;
}

/* ---------- photo strip ---------- */

.pr-strip {
	display: grid;
	gap: 2px;
	grid-template-columns: repeat(5, 1fr);
}

.pr-strip figure {
	margin: 0;
	overflow: hidden;
}

.pr-strip img {
	aspect-ratio: 3 / 4;
	display: block;
	filter: saturate(0.85);
	height: 100%;
	object-fit: cover;
	transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1), filter 0.5s ease;
	width: 100%;
}

.pr-strip figure:hover img {
	filter: saturate(1);
	transform: scale(1.04);
}

/* ---------- breakout ---------- */

.pr-breakout {
	align-items: center;
	display: grid;
	gap: clamp(28px, 5vw, 72px);
	grid-template-columns: 0.95fr 1.05fr;
}

.pr-breakout__media {
	margin-inline-start: calc(-1 * clamp(20px, 8vw, 140px));
}

.pr-breakout__media img {
	aspect-ratio: 4 / 5;
	border-radius: 4px;
	display: block;
	object-fit: cover;
	width: 100%;
}

/* ---------- reasons ---------- */

.pr-reasons {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
}

.pr-reason {
	border-block-start: var(--pr-hairline);
	padding-block: clamp(28px, 3.4vw, 40px);
	padding-inline-end: clamp(20px, 4vw, 56px);
}

.pr-reason:nth-child(even) {
	padding-inline-start: clamp(20px, 4vw, 56px);
}

.pr-reason:nth-child(odd) {
	border-inline-end: var(--pr-hairline);
}

.pr-reason h3 {
	font-size: 1.25rem;
	margin-block-end: 0.5rem;
}

.pr-reason p {
	color: var(--wp--preset--color--muted);
	font-size: 1rem;
	line-height: 1.65;
}

/* ---------- footer ---------- */

.pr-footer {
	background: var(--wp--preset--color--olive-black);
	color: rgba(237, 235, 224, 0.72);
	padding-block: clamp(56px, 7vw, 96px);
}

.pr-footer__inner {
	display: grid;
	gap: clamp(32px, 5vw, 64px);
	grid-template-columns: 1.2fr 1fr 1fr;
	margin-inline: auto;
	max-width: 1280px;
	padding-inline: clamp(20px, 4vw, 48px);
}

.pr-footer h2 {
	color: var(--wp--preset--color--on-dark);
	font-size: 1.375rem;
	margin-block-end: 0.75rem;
}

.pr-footer a {
	color: rgba(237, 235, 224, 0.72);
	text-decoration: none;
}

.pr-footer a:hover {
	color: var(--wp--preset--color--accent);
}

.pr-footer__col span {
	color: rgba(237, 235, 224, 0.42);
	display: block;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	margin-block-end: 0.875rem;
	text-transform: uppercase;
}

.pr-footer__col p,
.pr-footer__col li {
	font-size: 0.9375rem;
	line-height: 1.9;
	list-style: none;
}

.pr-footer__col ul {
	margin: 0;
	padding: 0;
}

.pr-footer__base {
	border-block-start: var(--pr-hairline-dark);
	color: rgba(237, 235, 224, 0.42);
	font-size: 0.8125rem;
	margin-block-start: clamp(40px, 5vw, 64px);
	margin-inline: auto;
	max-width: 1280px;
	padding-block-start: 24px;
	padding-inline: clamp(20px, 4vw, 48px);
}

/* ---------- inner page hero ---------- */

.pr-page-hero {
	border-block-end: var(--pr-hairline);
	padding-block: clamp(64px, 9vw, 128px);
}

.pr-page-hero h1 {
	font-size: clamp(2.25rem, 5vw, 4rem);
	line-height: 1.04;
	max-width: 16ch;
}

/* ---------- grain ---------- */

.pr-grain {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	inset: 0;
	opacity: var(--pr-grain-opacity);
	pointer-events: none;
	position: fixed;
	z-index: 45;
}

/* ---------- collapse ---------- */

@media (max-width: 900px) {
	.pr-process,
	.pr-breakout,
	.pr-reasons,
	.pr-footer__inner {
		grid-template-columns: 1fr;
	}

	.pr-process__aside {
		position: static;
	}

	.pr-breakout__media {
		margin-inline-start: 0;
	}

	.pr-reason:nth-child(odd) {
		border-inline-end: 0;
	}

	.pr-reason:nth-child(even) {
		padding-inline-start: 0;
	}

	.pr-strip {
		grid-template-columns: repeat(3, 1fr);
	}

	.pr-strip figure:nth-child(n + 4) {
		display: none;
	}

	.pr-header__phone {
		display: none;
	}
}

@media (max-width: 600px) {
	.pr-strip {
		grid-template-columns: repeat(2, 1fr);
	}

	.pr-strip figure:nth-child(n + 3) {
		display: none;
	}

	.pr-stage {
		grid-template-columns: 44px 1fr;
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}

	.pr-process__aside {
		position: static;
	}

	.pr-grain {
		display: none;
	}
}

/* ============================================================
   Gutenberg reconciliation.
   Core blocks bring their own wrappers and flow margins. These
   rules make the grid containers above work with real blocks.
   ============================================================ */

.pr-process > *,
.pr-process__stages > *,
.pr-stage > *,
.pr-breakout > *,
.pr-reasons > *,
.pr-strip > * {
	margin-block: 0;
}

.pr-label {
	margin-block: 0;
}

.pr-hero__inner > * + * {
	margin-block-start: 1.75rem;
}

.pr-hero__inner > .pr-label + * {
	margin-block-start: 1rem;
}

.pr-hero__since {
	margin-block-start: clamp(48px, 7vw, 88px) !important;
}

.pr-since__b {
	color: var(--wp--preset--color--on-dark);
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.5rem;
	font-weight: 500;
	line-height: 1.1;
	margin-block: 0;
}

.pr-since__s {
	color: rgba(237, 235, 224, 0.6);
	font-size: 0.8125rem;
	letter-spacing: 0.06em;
	margin-block: 0.25rem 0 !important;
}

.pr-process__aside > * + * {
	margin-block-start: 1.5rem;
}

.pr-stage__body > * + * {
	margin-block-start: 0.5rem;
}

.pr-breakout__text > * + * {
	margin-block-start: 1.5rem;
}

.pr-reason > * + * {
	margin-block-start: 0.5rem;
}

/* core/image ships its own figure margins. */
.pr-strip .wp-block-image,
.pr-breakout__media .wp-block-image {
	margin: 0;
}

.pr-strip .wp-block-image,
.pr-strip .wp-block-image img {
	height: 100%;
}

.pr-breakout__media .wp-block-image img {
	aspect-ratio: 4 / 5;
	border-radius: 4px;
	display: block;
	object-fit: cover;
	width: 100%;
}

/* The strip sits inside a constrained group; let it run edge to edge. */
.pr-strip {
	margin-inline: 0;
	max-width: none;
}

/* =========================================================
   Transparent header over the hero (front page only).
   Inner pages keep the solid bone header: white type on bone
   would be invisible.
   ========================================================= */

/* Full-bleed guarantee. main and post-content are both root-padding
   aware, so an alignfull child cancels only one of the two paddings
   and ends up inset. main carries no inline padding of its own. */
/* WordPress puts `margin-block-start: <blockGap>` on every .wp-site-blocks
   child after the first. With the header fixed on the front page, main is
   the second child and that margin renders as a bare bone strip above the
   hero. The footer picks up the same gap. We own this spacing. */
.pr-main,
.pr-footer {
	margin-block-start: 0 !important;
}

/* Same rule applies inside post-content: every top level section would get a
   32px bone gap above it. Sections carry their own padding, so the gap only
   shows up as a seam between two dark panels. */
.entry-content > * + * {
	margin-block-start: 0;
}

.pr-main {
	padding-inline: 0 !important;
}

.pr-main > .entry-content.alignfull {
	margin-inline: 0;
	max-width: none;
}

.pr-has-hero .pr-header {
	background: transparent;
	border-block-end: 0;
	left: 0;
	position: fixed;
	right: 0;
	top: 0;
	transition: background-color 0.3s ease, border-color 0.3s ease;
}

.admin-bar .pr-has-hero .pr-header,
.pr-has-hero.admin-bar .pr-header {
	top: 32px;
}

@media (max-width: 782px) {
	.pr-has-hero.admin-bar .pr-header {
		top: 46px;
	}
}

.pr-has-hero .pr-header .pr-wordmark b,
.pr-has-hero .pr-header .pr-header__phone,
.pr-has-hero .pr-header .wp-block-navigation a {
	color: var(--wp--preset--color--on-dark);
}

.pr-has-hero .pr-header .pr-wordmark span {
	color: rgba(237, 235, 224, 0.62);
}

.pr-has-hero .pr-header__phone {
	border: 1px solid rgba(237, 235, 224, 0.45);
	border-radius: 999px;
	padding: 10px 20px;
	transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.pr-has-hero .pr-header__phone:hover {
	background: var(--wp--preset--color--on-dark);
	border-color: var(--wp--preset--color--on-dark);
	color: var(--wp--preset--color--olive-black);
}

.pr-has-hero .pr-header .wp-block-navigation__responsive-container-open svg {
	fill: var(--wp--preset--color--on-dark);
}

/* Solid once the hero has scrolled past. Added by main.js. */
.pr-has-hero .pr-header.is-solid {
	background: var(--wp--preset--color--bone);
	border-block-end: var(--pr-hairline);
}

.pr-has-hero .pr-header.is-solid .pr-wordmark b,
.pr-has-hero .pr-header.is-solid .wp-block-navigation a {
	color: var(--wp--preset--color--ink);
}

.pr-has-hero .pr-header.is-solid .pr-wordmark span {
	color: var(--wp--preset--color--muted);
}

.pr-has-hero .pr-header.is-solid .pr-header__phone {
	border-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--ink);
}

.pr-has-hero .pr-header.is-solid .pr-header__phone:hover {
	background: var(--wp--preset--color--ink);
	border-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--bone);
}

.pr-has-hero .pr-header.is-solid .wp-block-navigation__responsive-container-open svg {
	fill: var(--wp--preset--color--ink);
}

/* The hero runs under the header, so it carries a top scrim that
   keeps the nav legible over a bright sky. */
.home .pr-hero {
	padding-block-start: var(--pr-header-h);
}

/* The flat dim stays on WordPress's own overlay span so dimRatio remains
   tunable from the editor. Our directional and top scrims live on a separate
   layer, otherwise lowering dimRatio also fades them and the nav loses
   contrast against a bright sky. */
.pr-hero::after {
	background:
		linear-gradient(180deg, rgba(21, 26, 18, 0.58) 0%, rgba(21, 26, 18, 0.20) 16%, rgba(21, 26, 18, 0) 34%),
		linear-gradient(92deg, rgba(21, 26, 18, 0.72) 0%, rgba(21, 26, 18, 0.48) 44%, rgba(21, 26, 18, 0.08) 100%);
	content: "";
	inset: 0;
	pointer-events: none;
	position: absolute;
	z-index: 1;
}

.pr-hero .wp-block-cover__inner-container {
	position: relative;
	z-index: 2;
}

@media (prefers-reduced-motion: reduce) {
	.pr-has-hero .pr-header,
	.pr-has-hero .pr-header__phone {
		transition: none;
	}
}

/* ============================================================
   Mobile navigation drawer.

   Core ships a full screen centred overlay for the responsive
   navigation. These rules turn it into a right hand drawer with
   the items stacked, and move the breakpoint from core's 600px
   up to 1000px, because eight Greek labels stop fitting on one
   line well before 600px.
   ============================================================ */

.pr-header .wp-block-navigation__responsive-container-open,
.pr-header .wp-block-navigation__responsive-container-close {
	background: transparent;
	border: 0;
	color: inherit;
	cursor: pointer;
	padding: 6px;
}

.pr-header .wp-block-navigation__responsive-container-open svg,
.pr-header .wp-block-navigation__responsive-container-close svg {
	fill: currentColor;
	height: 26px;
	width: 26px;
}

@media (max-width: 1000px) {
	.pr-header .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none;
	}

	.pr-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}
}

@media (min-width: 1001px) {
	.pr-header .wp-block-navigation__responsive-container-open {
		display: none;
	}
}

/* The phone is the main action for a producer, so it stays in the bar as
   long as there is room for it beside the wordmark. */
@media (max-width: 560px) {
	.pr-header__phone {
		display: none;
	}
}

/* ---------- open state ---------- */

/* Core's overlay rules sit at the same specificity as ours and its stylesheet
   can print after the theme's, so the geometry is pinned here. The panel is
   __responsive-close: that is the box core sizes and centres, not the
   -content element inside it. The container's white comes from core's
   `background-color: inherit`, which picks up the header's bone. */
.pr-header .wp-block-navigation__responsive-container.is-menu-open.is-menu-open {
	align-items: flex-end;
	background: transparent !important;
	justify-content: flex-start;
	padding: 0 !important;
	z-index: 200;
}

.pr-header .is-menu-open.is-menu-open .wp-block-navigation__responsive-close {
	background: var(--wp--preset--color--olive-black);
	border-inline-start: 1px solid rgba(237, 235, 224, 0.16);
	height: 100%;
	margin-inline: auto 0 !important;
	max-width: none !important;
	overflow-y: auto;
	padding: clamp(20px, 4vh, 34px) 26px 36px !important;
	width: min(84vw, 340px);
}

/* Logged-in views have the admin bar pinned over the top of the drawer. */
.admin-bar .pr-header .is-menu-open.is-menu-open .wp-block-navigation__responsive-close {
	padding-block-start: calc(clamp(20px, 4vh, 34px) + 46px) !important;
}

@media (min-width: 783px) {
	.admin-bar .pr-header .is-menu-open.is-menu-open .wp-block-navigation__responsive-close {
		padding-block-start: calc(clamp(20px, 4vh, 34px) + 32px) !important;
	}
}

/* The dialog becomes a plain column so the close button can sit in normal
   flow above the list. Absolute positioning kept pushing it off screen on
   short viewports and behind the admin bar. */
.pr-header .is-menu-open.is-menu-open .wp-block-navigation__responsive-dialog {
	display: flex;
	flex-direction: column;
	margin: 0 !important;
	position: static !important;
}

.pr-header .is-menu-open.is-menu-open .wp-block-navigation__responsive-container-content {
	align-items: flex-start !important;
	padding-top: 0 !important;
	width: 100%;
}

.pr-header .is-menu-open.is-menu-open .wp-block-navigation__container {
	align-items: flex-start;
	gap: 0;
	width: 100%;
}

.pr-header .is-menu-open.is-menu-open .wp-block-navigation-item {
	border-block-end: 1px solid rgba(237, 235, 224, 0.14);
	width: 100%;
}

.pr-header .is-menu-open.is-menu-open .wp-block-navigation-item:first-child {
	border-block-start: 1px solid rgba(237, 235, 224, 0.14);
}

.pr-header .is-menu-open.is-menu-open .wp-block-navigation-item__content {
	border: 0;
	color: var(--wp--preset--color--on-dark);
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.25rem;
	font-weight: 500;
	padding-block: 13px;
	/* The scale belongs to the desktop bar, not to full width drawer rows. */
	transform: none !important;
	width: 100%;
}

.pr-header .is-menu-open.is-menu-open .current-menu-item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--accent-light);
}

.pr-header .is-menu-open.is-menu-open .wp-block-navigation__responsive-container-close {
	align-self: flex-end;
	color: var(--wp--preset--color--on-dark);
	inset: auto !important;
	margin-block-end: 18px;
	position: static !important;
}

/* Once the page is scrolled the header carries .is-solid, whose colour rules
   (`.pr-has-hero .pr-header.is-solid .wp-block-navigation a`) outrank the
   drawer rules by one element selector and paint the items dark on the dark
   panel. Both states are stated explicitly here so the drawer keeps its own
   colours regardless of how far down the page the user opened it. */
.pr-header .wp-block-navigation__responsive-container.is-menu-open.is-menu-open .wp-block-navigation-item__content,
.pr-header.is-solid .wp-block-navigation__responsive-container.is-menu-open.is-menu-open .wp-block-navigation-item__content {
	color: var(--wp--preset--color--on-dark);
}

.pr-header .wp-block-navigation__responsive-container.is-menu-open.is-menu-open .current-menu-item > .wp-block-navigation-item__content,
.pr-header .wp-block-navigation__responsive-container.is-menu-open.is-menu-open .wp-block-navigation-item__content[aria-current="page"],
.pr-header.is-solid .wp-block-navigation__responsive-container.is-menu-open.is-menu-open .current-menu-item > .wp-block-navigation-item__content,
.pr-header.is-solid .wp-block-navigation__responsive-container.is-menu-open.is-menu-open .wp-block-navigation-item__content[aria-current="page"] {
	color: var(--wp--preset--color--accent-light);
}

/* Drawer rows are full width, so an outline reads as a selected row. An inset
   bar shows the keyboard position without competing with the active page. */
.pr-header .wp-block-navigation__responsive-container.is-menu-open.is-menu-open .wp-block-navigation-item__content:focus-visible {
	box-shadow: inset 3px 0 0 var(--wp--preset--color--accent-light);
	outline: none;
}

.pr-header .wp-block-navigation__responsive-container.is-menu-open.is-menu-open .wp-block-navigation__responsive-container-close,
.pr-header.is-solid .wp-block-navigation__responsive-container.is-menu-open.is-menu-open .wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--on-dark);
}

/* Active page. Both selectors are stated because core marks the item with a
   class and an aria attribute, and the class alone was silently absent while
   the links were `kind: custom`. */
.pr-header .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content,
.pr-header .wp-block-navigation .wp-block-navigation-item__content[aria-current="page"] {
	border-block-end-color: currentColor;
}

/* Core sets no outline on nav items, so the box was the browser default ring.
   It appears because the open drawer moves focus to the first item, and on
   touch Chrome gives `:focus` without `:focus-visible`. Suppress the ring on
   plain focus and keep a deliberate indicator for keyboard use only. */
.pr-header .wp-block-navigation .wp-block-navigation-item__content:focus,
.pr-header .wp-block-navigation__responsive-container.is-menu-open.is-menu-open .wp-block-navigation-item__content:focus {
	outline: none;
}

.pr-header .wp-block-navigation .wp-block-navigation-item__content:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent-light);
	outline-offset: 5px;
}

/* Reduced motion: the underline still carries the state. */
@media (prefers-reduced-motion: reduce) {
	.pr-header .wp-block-navigation .wp-block-navigation-item__content {
		transition: none;
	}

	.pr-header .wp-block-navigation .wp-block-navigation-item__content:hover,
	.pr-header .wp-block-navigation .wp-block-navigation-item__content:focus-visible {
		transform: none;
	}
}