/* Interior header (spec, "Desktop header" and "Mobile header"; values from the reference pages). */

.pm-header {
	background: var(--wp--preset--color--tan);
	border-bottom: 2px solid var(--wp--preset--color--ink);
}

.pm-header__inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 18px 32px 16px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.pm-header__home {
	display: flex;
	align-items: center;
	align-self: stretch;
	gap: 32px;
	text-decoration: none;
}

.pm-header__logo {
	display: block;
	width: auto;
	height: 88px;
}

/*
 * The platypus peeks up from behind the bottom border: a 130px box aligned to
 * the bottom, clipping a 180px-wide drawing. margin-bottom: -16px cancels the
 * inner area's 16px bottom padding, so the clip lands exactly on the border.
 * That cuts him off just below the fist at his side, so both hands show.
 */
.pm-header__platypus {
	display: block;
	overflow: hidden;
	align-self: flex-end;
	height: 130px;
	margin-bottom: -16px;
}

.pm-header__platypus img {
	display: block;
	width: 180px;
	max-width: none;
	height: auto;
}

.pm-nav {
	display: flex;
	gap: 22px;
}

.pm-nav__link {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 0;
	font-size: var(--wp--preset--font-size--body);
	font-weight: 500;
	line-height: normal;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.pm-nav__link:hover {
	color: var(--wp--preset--color--ink-hover);
}

/* The current section is underlined in its color: 3px, 8px below the text. */
.pm-nav__link[aria-current="page"] .pm-nav__label {
	text-decoration: underline;
	text-decoration-color: var(--pm-section);
	text-decoration-thickness: 3px;
	text-underline-offset: 8px;
}

.pm-nav .pm-dot {
	width: 32px;
	height: 32px;
}

.pm-nav .pm-dot svg {
	width: 18px;
	height: 18px;
}

/*
 * Patreon's mark is a heavy blob, so it sits a little smaller than the section
 * glyphs to look the same size. A share of the circle, so it scales with every
 * header (the extra .pm-header outranks the phone and sticky glyph sizes).
 */
.pm-header .pm-nav .pm-nav__link--patreon .pm-dot svg {
	width: 46%;
	height: 46%;
}

/*
 * Logo, platypus and nav (with Patreon) need about 940px side by side; below
 * 1000 the platypus (decorative, and never shown on phones) steps out before
 * the nav can cover him.
 */
@media (max-width: 999px) {
	.pm-header__platypus {
		display: none;
	}
}

/* Phones: the same slim 62px header as the sticky bar, so the two always match. */
@media (max-width: 767px) {
	.pm-header__inner {
		padding: 8px 16px;
	}

	.pm-header__logo {
		height: 44px;
	}

	/* Never on phones (spec). */
	.pm-header__platypus {
		display: none;
	}

	.pm-nav {
		gap: 10px;
	}

	.pm-nav__link {
		padding: 0;
		border-radius: 50%;
	}

	.pm-nav .pm-dot {
		width: 36px;
		height: 36px;
	}

	.pm-nav .pm-dot svg {
		width: 19px;
		height: 19px;
	}

	/* Labels stay for screen readers; the circles are the whole visible menu. */
	.pm-nav__label {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	/* The current section gets a ring instead of an underline. */
	.pm-nav__link[aria-current="page"] .pm-dot {
		box-shadow: 0 0 0 3px #FFFFFF, 0 0 0 5px var(--pm-section);
	}
}

/*
 * The sticky header (sticky attribute): the phone header, slimmer, at
 * every width, fixed under the admin bar and slid up out of sight until view.js shows it.
 * Fixed, so it never takes space or moves the page; --pm-sticky-h (base.css)
 * is its height, which anchors use to land below it.
 */
.pm-header--sticky {
	position: fixed;
	top: var(--wp-admin--admin-bar--height, 0px);
	right: 0;
	left: 0;
	z-index: 100;
	visibility: hidden;
	transform: translateY(-100%);
	transition: transform 0.2s ease, visibility 0s linear 0.2s;
}

.pm-header--sticky.is-shown {
	visibility: visible;
	transform: none;
	transition: transform 0.2s ease, visibility 0s;
}

.pm-header--sticky .pm-header__inner {
	padding: 8px 32px;
}

.pm-header--sticky .pm-header__logo {
	height: 44px;
}

.pm-header--sticky .pm-nav {
	gap: 10px;
}

.pm-header--sticky .pm-nav__link {
	padding: 0;
	border-radius: 50%;
}

.pm-header--sticky .pm-nav .pm-dot {
	width: 36px;
	height: 36px;
}

.pm-header--sticky .pm-nav .pm-dot svg {
	width: 19px;
	height: 19px;
}

.pm-header--sticky .pm-nav__label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.pm-header--sticky .pm-nav__link[aria-current="page"] .pm-dot {
	box-shadow: 0 0 0 3px #FFFFFF, 0 0 0 5px var(--pm-section);
}

@media (max-width: 767px) {
	.pm-header--sticky .pm-header__inner {
		padding: 8px 16px;
	}
}

/*
 * The smallest phones (320px): five circles beside the logo since the Shop
 * circle (2026-11-05). At 36px they'd squeeze the logo, so they're 32px with
 * 6px gaps here: 184px of circles beside the full 105px logo in 294px.
 */
@media (max-width: 359px) {
	.pm-header__inner,
	.pm-header--sticky .pm-header__inner {
		padding-right: 10px;
	}

	.pm-nav,
	.pm-header--sticky .pm-nav {
		gap: 6px;
	}

	.pm-nav .pm-dot,
	.pm-header--sticky .pm-nav .pm-dot {
		width: 32px;
		height: 32px;
	}

	.pm-nav .pm-dot svg,
	.pm-header--sticky .pm-nav .pm-dot svg {
		width: 17px;
		height: 17px;
	}
}

/*
 * The page's title in the sticky bar (view.js), after the logo with a short
 * rule between: it fades in once the page's own title has scrolled up under
 * the bar, and links back to the top. Wide windows only; long titles like
 * "Anticipatory Pacific Seahorse" don't fit beside the circles on narrower ones.
 */
.pm-header__page-title {
	display: none;
}

@media (min-width: 960px) {
	.pm-header__page-title {
		display: block;
		flex: 1 1 auto;
		min-width: 0;
		margin: 0 32px 0 24px;
		padding-left: 24px;
		overflow: hidden;
		font-size: var(--wp--preset--font-size--body-large);
		font-weight: 600;
		line-height: 44px;
		color: var(--wp--preset--color--ink);
		white-space: nowrap;
		text-overflow: ellipsis;
		text-decoration: none;
		border-left: 2px solid var(--wp--preset--color--ink);
		visibility: hidden;
		opacity: 0;
		transition: opacity 0.2s ease, visibility 0s linear 0.2s;
	}

	.pm-header__page-title.is-shown {
		visibility: visible;
		opacity: 1;
		transition: opacity 0.2s ease, visibility 0s;
	}

	.pm-header__page-title:hover {
		color: var(--wp--preset--color--ink-hover);
	}
}

/*
 * Phones: an interior page's header is already the slim one, so it just
 * stays pinned to the top (its template-part wrapper is the sticky box, since
 * sticky only works inside a taller parent), and the sliding bar isn't used.
 * Home's masthead is tall, so Home keeps the bar.
 */
@media (max-width: 767px) {
	header.wp-block-template-part:has(> .pm-header:not(.pm-header--sticky)) {
		position: sticky;
		top: var(--wp-admin--admin-bar--height, 0px);
		z-index: 100;
	}

	header.wp-block-template-part:has(> .pm-header:not(.pm-header--sticky)) .pm-header--sticky {
		display: none;
	}

	/* The pinned header is the header here: never hand it off. */
	.pm-arrive-anchor header.wp-block-template-part > .pm-header:not(.pm-header--sticky) {
		opacity: 1;
	}
}

/* Below 600px WordPress's admin bar scrolls away with the page. */
@media (max-width: 600px) {
	.pm-header--sticky,
	header.wp-block-template-part:has(> .pm-header:not(.pm-header--sticky)) {
		top: 0;
	}
}

/*
 * While the sticky bar is in, what's left of the page's own header (or the
 * Home masthead) fades out behind it, in step with the slide.
 */
.pm-header:not(.pm-header--sticky),
.pm-masthead {
	transition: opacity 0.2s ease;
}

.pm-is-handed-off {
	opacity: 0;
}

/*
 * Arriving at an anchor: the inline script in render.php sets
 * pm-arrive-anchor before the first paint, so the bar is already in and the
 * page's header already gone; view.js confirms the real state, then clears it.
 */
.pm-arrive-anchor .pm-header--sticky {
	visibility: visible;
	transform: none;
	transition: none;
}

.pm-arrive-anchor .pm-masthead,
.pm-arrive-anchor .pm-header:not(.pm-header--sticky) {
	opacity: 0;
	transition: none;
}

/* view.js: arriving at an anchor hands off at once. */
.pm-sticky-instant .pm-header--sticky,
.pm-sticky-instant .pm-header,
.pm-sticky-instant .pm-masthead {
	transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
	.pm-header__page-title,
	.pm-header__page-title.is-shown,
	.pm-header--sticky,
	.pm-header--sticky.is-shown,
	.pm-header:not(.pm-header--sticky),
	.pm-masthead {
		transition: none;
	}
}