/* ==========================================================================
   Site header
   ==========================================================================
   Global, plain CSS, loaded from includes/scripts-and-styles.php. Kept out of
   the Tailwind bundle so a header change never needs a build step.

   Behaviour lives in assets/js/site-header.js. Without it the header is still
   a usable header: the links work, the bar is sticky, and the menu button is
   the only thing missing, so it is rendered only when scripting is present.
   ========================================================================== */

/* On the root, not on .tcw-header: the spacer that reserves the bar's height sits outside it and
   has to read the same number. --hd-h is derived rather than typed, so the bar and the space kept
   for it can never disagree. */
:root {
	--hd-bar: 54px;
	--hd-gap: 8px;
	--hd-side: 14px;
	--hd-clear: 102px;
	--hd-h: calc(var(--hd-bar) + (var(--hd-gap) * 2));

	--hd-ink: #26344a;
	--hd-ink-strong: #0f2544;
	--hd-ink-soft: #5f6d86;
	--hd-blue: #46659b;
	--hd-blue-hover: #38517d;
	--hd-blue-soft: #e9eef7;
	--hd-line: rgba(15, 37, 68, 0.09);
	--hd-line-strong: rgba(15, 37, 68, 0.14);
	--hd-t: 220ms;
	--hd-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (min-width: 1024px) {

	:root {
		--hd-bar: 62px;
		--hd-gap: 10px;
		--hd-side: 22px;
		--hd-clear: 150px;
	}
}

/*
 * The header itself holds no colour. What you see is the bar inside it, a card that floats over the
 * page with the page's own ground showing around it, which is why the drafting grid runs up to the
 * top of the window rather than stopping under a band.
 */
.tcw-header {
	position: fixed;
	inset: 0 0 auto;
	z-index: 800;
	padding: var(--hd-gap) var(--hd-side);
	font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Lato", Helvetica, Arial, sans-serif;
}

.tcw-header *,
.tcw-header *::before,
.tcw-header *::after {
	box-sizing: border-box;
}

/* Once the page has moved the card lifts a little further off it. At rest it barely casts. */
.tcw-header.is-scrolled .tcw-header__bar {
	border-color: var(--hd-line-strong);
	box-shadow: 0 2px 4px rgba(15, 37, 68, 0.05), 0 18px 38px -22px rgba(15, 37, 68, 0.38);
}

/*
 * Keeping the page clear of the fixed card.
 *
 * The room is made on <main> rather than by a spacer element, so that a page whose first section
 * should run behind the card can take it back: see the bleed rules below. A page that does not opt
 * in is unaffected, and starts exactly where it always did.
 */
#main {
	padding-top: var(--hd-h);
}

/*
 * The top of a page runs up behind the card, so its own ground continues to the top of the window
 * instead of stopping at a strip of plain colour. The element is pulled up by the height the card
 * reserved and takes that height back as padding, so its content stays where it was while its box,
 * and with it its ground, now reaches the top of the window.
 *
 * Padding rather than a transparent border, and this is the part that is easy to get wrong. A
 * background is laid out against the padding box, and so is everything positioned absolutely
 * inside the element: an overlay with inset:0, a pseudo-element carrying a texture, a glow placed
 * from the top. Room taken as a border sits outside that box, so every such layer starts below the
 * card and draws a hard line across the page exactly where the card ends, with only the flat
 * background above it. Room taken as padding is inside the box, and the layers reach the top with
 * the element. No overlay needs stretching, no overflow needs unclipping, no hero needs its own
 * exception.
 *
 * :nth-child(1 of ...) picks the first child that actually renders, whatever its tag, skipping the
 * meta, link and script elements plugins print inside <main>. Where a browser does not know that
 * selector nothing matches and the page simply starts below the card, which is where it started
 * before any of this.
 *
 * The padding is set rather than added to: one measure of air under the card, everywhere. Every
 * page used to bring its own, anything from nothing at all to 380px, which read as a different
 * amount of header on every page. It is !important because this theme's Tailwind ships its padding
 * utilities that way and pt-8 would otherwise win.
 */
#main > :nth-child(1 of :not(meta):not(script):not(link):not(style):not(title)) {
	margin-top: calc(-1 * var(--hd-h));
	padding-top: calc(var(--hd-h) + var(--hd-clear)) !important;
}

/*
 * Some pages open with a bare wrapper and carry the ground one level in. Bleeding the inner element
 * as well costs nothing where it is not needed, because a pull of exactly the height that is given
 * back leaves everything inside it where it was; it only changes where the ground starts.
 *
 * Pulled up past the clearance as well as the card, because the element above it is holding both
 * and this one has to reach the top of the window to be worth doing. The class owns the element's
 * top padding, so spacing of the page's own belongs on a child of it.
 *
 * Add the class to a page's ground when it turns out to sit deeper than the rule above can see.
 */
.tcw-bleed-top {
	margin-top: calc(-1 * (var(--hd-h) + var(--hd-clear)));
	padding-top: calc(var(--hd-h) + var(--hd-clear)) !important;
}

/*
 * With the air above the hero set once, on the section, any top padding the page also put on the
 * first thing inside it is a second helping of the same thing. Two levels are enough: past that the
 * padding belongs to the layout rather than to the space under the header. A bled element is left
 * alone: its padding is the room it took back, not a second helping.
 */
#main > :nth-child(1 of :not(meta):not(script):not(link):not(style):not(title)) > :first-child:not(.tcw-bleed-top),
#main > :nth-child(1 of :not(meta):not(script):not(link):not(style):not(title)) > :first-child > :first-child:not(.tcw-bleed-top) {
	padding-top: 0 !important;
}

.tcw-header__bar {
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
	max-width: 1400px;
	height: var(--hd-bar);
	margin-inline: auto;
	padding-inline: 14px;
	background: #fff;
	border: 1px solid var(--hd-line);
	border-radius: 16px;
	box-shadow: 0 1px 2px rgba(15, 37, 68, 0.04), 0 10px 24px -18px rgba(15, 37, 68, 0.3);
	transition: border-color var(--hd-t) var(--hd-ease), box-shadow var(--hd-t) var(--hd-ease);
}

@media (min-width: 1024px) {

	.tcw-header__bar {
		gap: 18px;
		padding-inline: 18px;
		border-radius: 18px;
	}
}

/* Brand: the mark, a rule, and what the studio does ------------------------- */

.tcw-header__brand {
	display: flex;
	align-items: center;
	gap: 14px;
	flex: none;
}

.tcw-header__rule {
	flex: none;
	width: 1px;
	height: 22px;
	background: var(--hd-line-strong);
}

/* Both rules are furniture between things that are already legible on their own, so they go
   whenever the row needs the room back. */
.tcw-header__rule,
.tcw-header__tagline {
	display: none;
}

@media (min-width: 1280px) {

	.tcw-header__rule,
	.tcw-header__tagline {
		display: block;
	}
}

.tcw-header__tagline {
	margin: 0;
	font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.14em;
	line-height: 1;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--hd-ink-soft);
}

.tcw-header__logo {
	display: flex;
	align-items: center;
	flex: none;
	border-radius: 4px;
}

.tcw-header__logo img {
	display: block;
	width: auto;
	height: 28px;
}

@media (min-width: 1024px) {
	.tcw-header__logo img {
		height: 34px;
	}
}

/* Navigation --------------------------------------------------------------- */

.tcw-header__nav {
	display: none;
}

@media (min-width: 1024px) {

	/* Centred by the space left over rather than by absolute positioning, so a long set of labels
	   crowds the row instead of sliding underneath the mark or the button. */
	.tcw-header__nav {
		display: flex;
		flex: 1;
		justify-content: center;
		min-width: 0;
	}
}

.tcw-header__list {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tcw-header__link {
	position: relative;
	display: inline-flex;
	align-items: center;
	height: 36px;
	padding: 0 13px;
	border-radius: 9px;
	font-size: 14.5px;
	font-weight: 600;
	letter-spacing: -0.005em;
	color: var(--hd-ink-strong);
	text-decoration: none;
	white-space: nowrap;
	transition: color var(--hd-t) var(--hd-ease), background var(--hd-t) var(--hd-ease);
}

.tcw-header__link:hover {
	background: #f3f5f9;
	color: var(--hd-blue);
}

@media (min-width: 1024px) and (max-width: 1279px) {

	.tcw-header__bar { gap: 12px; }
	.tcw-header__list { gap: 2px; }

	.tcw-header__link {
		padding: 0 9px;
		font-size: 14px;
	}
}

.tcw-header__item[aria-current="page"] .tcw-header__link {
	background: var(--hd-blue-soft);
	color: var(--hd-blue);
}

/* Actions ------------------------------------------------------------------ */

.tcw-header__actions {
	display: flex;
	align-items: center;
	gap: 14px;
	flex: none;
	margin-left: auto;
}

@media (min-width: 1024px) {
	.tcw-header__actions {
		margin-left: 0;
	}
}

/* The quiet half of the pair: same weight of intent, a tenth of the ink. */
.tcw-header__talk {
	display: none;
	font-size: 14px;
	font-weight: 500;
	color: var(--hd-ink);
	text-decoration: none;
	white-space: nowrap;
	transition: color var(--hd-t) var(--hd-ease);
}

.tcw-header__talk:hover {
	color: var(--hd-blue);
}

@media (min-width: 1024px) {
	.tcw-header__talk { display: inline-flex; }
}

.tcw-header__rule--actions {
	margin-left: auto;
}

@media (max-width: 1279px) {
	.tcw-header__rule--actions { display: none; }
}

.tcw-header__cta {
	display: inline-flex;
	align-items: stretch;
	height: 42px;
	padding: 0;
	overflow: hidden;
	background: var(--hd-blue);
	border-radius: 10px;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1;
	color: #fff;
	text-decoration: none;
	white-space: nowrap;
	transition: background var(--hd-t) var(--hd-ease), transform var(--hd-t) var(--hd-ease),
		box-shadow var(--hd-t) var(--hd-ease);
}

.tcw-header__cta-label {
	display: inline-flex;
	align-items: center;
	padding: 0 16px;
}

/* The arrow sits in its own darker block, so the button reads as an action with a direction
   rather than as a label with a decoration after it. */
.tcw-header__cta-arrow {
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	background: var(--hd-blue-hover);
	color: #fff;
	transition: background var(--hd-t) var(--hd-ease);
}

@media (min-width: 1024px) {
	.tcw-header__cta-arrow { display: inline-flex; }
}

.tcw-header__cta:hover {
	background: var(--hd-blue-hover);
	color: #fff;
	transform: translateY(-1px);
	box-shadow: 0 8px 18px -10px rgba(70, 101, 155, 0.8);
}

.tcw-header__cta:hover .tcw-header__cta-arrow {
	background: #2d4164;
}

/* Menu button -------------------------------------------------------------- */

.tcw-header__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	background: transparent;
	border: 1px solid var(--hd-line);
	border-radius: 8px;
	color: var(--hd-ink-strong);
	cursor: pointer;
	transition: border-color var(--hd-t) var(--hd-ease), background var(--hd-t) var(--hd-ease);
}

.tcw-header__toggle:hover {
	border-color: rgba(15, 37, 68, 0.24);
}

@media (min-width: 1024px) {
	.tcw-header__toggle {
		display: none;
	}
}

.tcw-header__toggle svg {
	display: block;
}

.tcw-header__toggle .tcw-header__icon-close,
.tcw-header__toggle[aria-expanded="true"] .tcw-header__icon-open {
	display: none;
}

.tcw-header__toggle[aria-expanded="true"] .tcw-header__icon-close {
	display: block;
}

/* Mobile menu -------------------------------------------------------------- */

.tcw-header__menu {
	position: fixed;
	inset: var(--hd-h) var(--hd-side) auto;
	max-height: calc(100dvh - var(--hd-h) - var(--hd-gap));
	display: flex;
	flex-direction: column;
	padding: 6px 18px 20px;
	background: #fff;
	border: 1px solid var(--hd-line);
	border-radius: 16px;
	box-shadow: 0 2px 4px rgba(15, 37, 68, 0.05), 0 22px 44px -24px rgba(15, 37, 68, 0.4);
	overflow-y: auto;
	overscroll-behavior: contain;
	visibility: hidden;
	opacity: 0;
	transform: translateY(-8px);
	transition: opacity var(--hd-t) var(--hd-ease), transform var(--hd-t) var(--hd-ease),
		visibility 0s linear var(--hd-t);
}

.tcw-header__menu.is-open {
	visibility: visible;
	opacity: 1;
	transform: none;
	transition-delay: 0s;
}

@media (min-width: 1024px) {
	.tcw-header__menu {
		display: none;
	}
}

.tcw-header__menu-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.tcw-header__menu-link {
	display: flex;
	align-items: center;
	min-height: 52px;
	padding: 0 4px;
	border-bottom: 1px solid var(--hd-line);
	font-size: 16px;
	font-weight: 500;
	color: var(--hd-ink-strong);
	text-decoration: none;
}

.tcw-header__menu-item[aria-current="page"] .tcw-header__menu-link {
	color: var(--hd-blue);
	font-weight: 600;
}

.tcw-header__menu .tcw-header__cta {
	margin-top: 22px;
	min-height: 50px;
	font-size: 15px;
}

/* The page behind a menu does not scroll. */
body.tcw-menu-open {
	overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {

	.tcw-header,
	.tcw-header__menu,
	.tcw-header__link::after,
	.tcw-header__cta,
	.tcw-header__toggle {
		transition-duration: 0.001ms;
	}

	.tcw-header__cta:hover {
		transform: none;
	}
}

/* Skip link ---------------------------------------------------------------- */

/* Out of the way until it is focused, then the first thing on the page. */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.screen-reader-text:focus {
	position: fixed;
	top: 10px;
	left: 10px;
	z-index: 900;
	width: auto;
	height: auto;
	margin: 0;
	padding: 12px 18px;
	clip: auto;
	clip-path: none;
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 8px 24px -8px rgba(15, 37, 68, 0.45);
	font-size: 14px;
	font-weight: 600;
	color: var(--hd-blue, #46659b);
	text-decoration: none;
}


.tcw-header__menu-talk {
	display: flex;
	align-items: center;
	min-height: 52px;
	padding: 0 4px;
	border-bottom: 1px solid var(--hd-line);
	font-size: 16px;
	font-weight: 500;
	color: var(--hd-ink);
	text-decoration: none;
}

.tcw-header__menu .tcw-header__cta {
	margin-top: 16px;
	height: 48px;
	justify-content: center;
}

.tcw-header__menu .tcw-header__cta-label {
	justify-content: center;
	width: 100%;
}