/**
 * The v2 masthead.
 *
 * From DesktopApp in ph-apps.jsx: 66px tall, white, one hairline under it,
 * boxed to 1180. The active nav item is marked with a short pink underline
 * rather than a colour change, which is what the design does and what
 * survives being read at a glance.
 */

/* The old site header stands down on the rebuilt surfaces only. Two
   mastheads stacked is worse than either, and this is what kept the new
   pages reading as the old site: the page below had changed and the thing
   at the top of the window had not. */
body.ph-v2 > header:not(.ph-v2head),
body.ph-v2 .site-header:not(.ph-v2head),
body.ph-v2 [data-elementor-type="header"] {
	display: none;
}

.ph-v2head {
	background: var(--white);
	border-bottom: 1px solid var(--line);
}

.ph-v2head__inner {
	max-width: 1180px;
	margin-inline: auto;
	padding-inline: var(--s6);
	height: 66px;
	display: flex;
	align-items: center;
	gap: var(--s6);
}

.ph-v2head__brand {
	display: flex;
	align-items: center;
	gap: var(--s2);
	flex-shrink: 0;
	text-decoration: none;
	color: var(--ink);
}

.ph-v2head__mark {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: var(--r-sm);
	background: var(--pink);
	color: var(--white);
}

.ph-v2head__mark svg { width: 16px; height: 16px; }

.ph-v2head__word {
	font-size: var(--t-h3);
	font-weight: var(--w-heavy);
	letter-spacing: -0.4px;
	white-space: nowrap;
}

.ph-v2head__nav {
	display: flex;
	gap: var(--s3);
	min-width: 0;
	overflow-x: auto;
	scrollbar-width: none;
}

.ph-v2head__nav::-webkit-scrollbar { display: none; }

.ph-v2head__navlink {
	position: relative;
	display: inline-flex;
	align-items: center;
	min-height: var(--tap);
	padding-inline: var(--s2);
	font-size: var(--t-sm);
	font-weight: var(--w-bold);
	color: var(--ink-2);
	text-decoration: none;
	white-space: nowrap;
}

.ph-v2head__navlink:hover { color: var(--ink); }

.ph-v2head__navlink.is-on { color: var(--ink); }

.ph-v2head__navlink.is-on::after {
	content: "";
	position: absolute;
	left: var(--s2);
	right: var(--s2);
	bottom: 12px;
	height: 2.5px;
	border-radius: 2px;
	background: var(--pink);
}

.ph-v2head__right {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: var(--s2);
	flex-shrink: 0;
}

.ph-v2head__btn {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	min-height: 34px;
	padding-inline: var(--s3);
	border: 1px solid var(--line);
	border-radius: var(--r-pill);
	background: var(--white);
	color: var(--ink);
	font-size: var(--t-sm);
	font-weight: var(--w-bold);
	text-decoration: none;
	white-space: nowrap;
}

.ph-v2head__btn svg { width: 14px; height: 14px; }

a.ph-v2head__btn:hover { border-color: var(--pink); color: var(--pink-press); }

.ph-v2head__avatar {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	flex-shrink: 0;
	border-radius: var(--r-pill);
	background: var(--ink);
	color: var(--white);
	font-size: var(--t-xs);
	font-weight: var(--w-heavy);
	text-decoration: none;
}

/* Narrow: the wordmark and the secondary buttons go before the nav does,
   because the nav is the part that is actually doing a job up here. */
@media (max-width: 860px) {
	.ph-v2head__inner { gap: var(--s3); padding-inline: var(--s4); }
	.ph-v2head__word { display: none; }
	.ph-v2head__btn { display: none; }
}