/**
 * The header — one section of the design, drawn by two widgets.
 *
 * Every measurement here was read from the design file. Colour and type that
 * the Style tab can carry are left to it, including the second set of colours
 * the changing bar wears before the page has moved.
 */

.custom-header {
	position: relative;
	width: 100%;
}

/* The bar is out of the flow: what it stands over reaches the top of the
   window, and the bar stays where it is as the page moves under it. */
.custom-header__bar {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 999;
	width: 100%;
	box-sizing: border-box;
}

/* Signed in, WordPress puts its own bar across the top of the window and pushes
   the page down by the height of it. A bar out of the flow is measured against
   the window, not the page, so it would sit under that bar and leave the height
   of it uncovered beneath. It starts below it instead. Nobody but the client
   ever sees this. */
body.admin-bar .custom-header__bar {
	top: 32px;
}

@media screen and ( max-width: 782px ) {
	body.admin-bar .custom-header__bar {
		top: 46px;
	}
}

.custom-header__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 48px;
	box-sizing: border-box;
}

.custom-header__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	height: 72px;
}

/* The height the bar took out of the flow, handed back — so the page under it
   starts where the design starts it, and no section carries the allowance. */
.custom-header__spacer {
	display: block;
	width: 100%;
	height: 72px;
}

/* The logo keeps its box whether or not a picture has been uploaded. */
.custom-header__logo {
	position: relative;
	flex: 0 0 auto;
	width: 233px;
	height: 72px;
	text-decoration: none;
}

.custom-header__logo-box {
	position: absolute;
	top: 50%;
	left: 0;
	display: block;
	width: 154px;
	height: 64px;
	overflow: hidden;
	transform: translateY( -50% );
}

.custom-header__logo-box img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* Two marks stand in the same place, and the state says which is seen. */
.custom-header__logo-box--scrolled,
.custom-header.is-scrolled .custom-header__logo-box--top {
	opacity: 0;
}

.custom-header.is-scrolled .custom-header__logo-box--scrolled {
	opacity: 1;
}

/* The menu takes what is left between the logo and the buttons. A menu with
   more in it than that can be pulled across — by hand or by wheel — and never
   pushes the buttons or stands over its own items; the bar shows no scrollbar
   for it. What fits stands in the middle, as the file draws it. */
.custom-header__menu {
	flex: 0 1 auto;
	min-width: 0;
	overflow-x: auto;
	overflow-y: hidden;
	-ms-overflow-style: none;
	scrollbar-width: none;
	touch-action: pan-y;
}

.custom-header__menu::-webkit-scrollbar {
	display: none;
}

.custom-header__menu.is-overflowing {
	cursor: grab;
}

.custom-header__menu.is-dragging {
	cursor: grabbing;
	user-select: none;
	-webkit-user-select: none;
}

/* The pages and, after them, the language switch stand together in the
   middle of what is left between the logo and the buttons, 36 apart like
   the pages themselves (6916:1720), 24 off either neighbour. The switch
   stands outside the pages' box, so what that box is told — its type, its
   ink, its scrolling — does not reach it. */
.custom-header__middle {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 36px;
	flex: 1 1 auto;
	min-width: 0;
	margin: 0 24px;
}

.custom-header__menu ul {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 36px;
	width: max-content;
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

/* The language switch (6916:1720, 11282:6582): a pill 24 deep with a 1
   edge, 7 in at either end, the globe, the language's code at 11 Roboto
   Medium and a chevron 5 apart; and beneath it, 4 down, the list: 126
   across, 12 inside, a 1 edge and corners of 8, each language on a row 10
   inside with corners of 4, at 16 Roboto Medium, the current one on its own
   ground. Colour is the controls'. The list stands out of the menu's box,
   which clips, so it is placed against the window by the script. */
.custom-header__language {
	position: relative;
	flex: 0 0 auto;
}

.custom-header__language-toggle,
.custom-header__language-toggle:hover,
.custom-header__language-toggle:focus,
.custom-header__language-toggle:active {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	height: 24px;
	margin: 0;
	padding: 0 7px;
	border: 1px solid currentColor;
	border-radius: 24px;
	background: none;
	color: inherit;
	font-family: Roboto, sans-serif;
	font-size: 11px;
	font-weight: 500;
	line-height: 1;
	text-transform: uppercase;
	white-space: nowrap;
	cursor: pointer;
	box-sizing: border-box;
}

.custom-header__language-toggle:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.custom-header__language-globe {
	display: block;
	width: 14px;
	height: 14px;
	flex: 0 0 auto;
}

.custom-header__language-chevron {
	display: block;
	width: 9px;
	height: 6px;
	flex: 0 0 auto;
	transition: transform 300ms ease-in-out;
}

.custom-header__language.is-open .custom-header__language-chevron {
	transform: scaleY( -1 );
}

.custom-header__language-menu {
	display: none;
	position: fixed;
	z-index: 1000;
	width: 126px;
	margin: 0;
	padding: 12px;
	border: 1px solid #ebe4ca;
	border-radius: 8px;
	list-style: none;
	box-sizing: border-box;
}

.custom-header__language.is-open .custom-header__language-menu {
	display: block;
}

.custom-header__language-menu li {
	margin: 0;
	padding: 0;
}

.custom-header__language-menu a,
.custom-header__language-menu a:hover,
.custom-header__language-menu a:focus,
.custom-header__language-menu a:active {
	display: block;
	padding: 10px;
	border-radius: 4px;
	font-family: Roboto, sans-serif;
	font-size: 16px;
	font-weight: 500;
	line-height: normal;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
}

@media ( prefers-reduced-motion: reduce ) {
	.custom-header__language-chevron {
		transition: none;
	}
}

.custom-header__menu li {
	margin: 0;
	padding: 0;
}

.custom-header__menu a {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding-top: 4px;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
}

.custom-header__actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
	flex: 0 0 auto;
}

.custom-header__button,
.custom-header__button:hover,
.custom-header__button:focus,
.custom-header__button:active {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 24px;
	border: 0;
	border-radius: 24px;
	text-decoration: none;
	white-space: nowrap;
	box-sizing: border-box;
}

/* The file draws the outline inside the button, so the two buttons stand the
   same height as each other. A border would add its width to one of them. */
.custom-header__button--outline,
.custom-header__button--outline:hover,
.custom-header__button--outline:focus,
.custom-header__button--outline:active {
	border: 1px solid currentColor;
}

/* Motion — the file gives every hover 300ms, ease in and out. The menu's
   underline is the line the design draws under each item, four below it. */
.custom-header__menu a::after {
	content: "";
	display: block;
	width: 100%;
	height: 1px;
	margin-top: 4px;
	background: currentColor;
	transform: scaleX( 0 );
	transform-origin: left center;
	transition: transform 300ms ease-in-out;
}

.custom-header__menu a:hover::after {
	transform: scaleX( 1 );
}

/* The bar turning into the design is the same change as a hover, and takes the
   same time. */
.custom-header__bar,
.custom-header__button,
.custom-header__menu a,
.custom-header__logo,
.custom-header__logo-box {
	transition:
		background-color 300ms ease-in-out,
		box-shadow 300ms ease-in-out,
		color 300ms ease-in-out,
		opacity 300ms ease-in-out;
}

.custom-header__logo:hover {
	opacity: 0.7;
}

@media ( prefers-reduced-motion: reduce ) {
	.custom-header__menu a::after,
	.custom-header__bar,
	.custom-header__button,
	.custom-header__menu a,
	.custom-header__logo,
	.custom-header__logo-box {
		transition: none;
	}
}

/* An anchor takes the browser's own colour unless it is told not to. */
.custom-header__logo,
.custom-header__menu a,
.custom-header__button {
	color: inherit;
}

/* The mark that opens the menu on the narrow tiers, and the one that shuts
   it. The wide tier does not show it. */
.custom-header__toggle,
.custom-header__toggle:hover,
.custom-header__toggle:focus,
.custom-header__toggle:active {
	display: none;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	cursor: pointer;
	/* The theme gives every button a change of everything, place in the row
	   among it; opened, the mark would travel across the row to its end. Only
	   its ink changes over time. */
	transition: color 300ms ease-in-out;
}

.custom-header__toggle:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.custom-header__toggle-open,
.custom-header__toggle-shut {
	display: block;
}

.custom-header__toggle svg {
	display: block;
	width: 24px;
	height: 24px;
}

.custom-header__toggle-shut,
.custom-header.is-open .custom-header__toggle-open {
	display: none;
}

.custom-header.is-open .custom-header__toggle-shut {
	display: block;
}

/* While the menu stands open the page under it holds still. */
html.custom-header-open,
html.custom-header-open body {
	overflow: hidden;
}

/* Tablet and mobile — the file draws one of them (11189:2792, 11190:2777):
   a bar 44 deep, 16 in from either edge, the mark 53 by 22 and the way into
   the menu 24 at the right. The menu and the two buttons are behind that
   mark until it is pressed. Tablet is not drawn and takes the same figures. */
@media ( max-width: 1024px ) {
	.custom-header__inner {
		padding: 0 16px;
	}

	.custom-header__row {
		height: 44px;
	}

	.custom-header__logo {
		width: 53px;
		height: 44px;
	}

	.custom-header__logo-box {
		width: 53px;
		height: 22px;
	}

	.custom-header__middle,
	.custom-header__menu,
	.custom-header__actions {
		display: none;
	}

	.custom-header__toggle,
	.custom-header__toggle:hover,
	.custom-header__toggle:focus,
	.custom-header__toggle:active {
		display: inline-flex;
	}

	/* Pressed, the bar becomes the menu (11282:5304): the whole screen, the
	   same row across the top now 49 deep and ruled beneath, the pages one
	   under another 44 deep each with a rule under the last, and the two
	   buttons 24 under them in the middle, 5 apart. The bar takes the colours
	   it has once the page has moved, which are the menu's. The pages and
	   the buttons are the row's own children, so the row wraps them under. */
	.custom-header.is-open .custom-header__bar {
		bottom: 0;
		overflow-y: auto;
	}

	/* Opening, the menu comes down from under the bar's own row, which never
	   moves: the mark and the button that shuts it stay where they are, and
	   what lies beneath is uncovered from the top down, the pages and the
	   buttons coming down with it. Shutting, it goes back up the same way.
	   The row is the depth the open bar gives it on this tier. */
	.custom-header {
		--custom-header-row: 49px;
	}

	.custom-header.is-open .custom-header__bar {
		animation: custom-header-down 300ms ease-in-out both;
	}

	.custom-header.is-open.is-closing .custom-header__bar {
		animation-name: custom-header-up;
	}

	.custom-header.is-open .custom-header__menu,
	.custom-header.is-open .custom-header__actions {
		animation: custom-header-in 300ms ease-in-out both;
	}

	/* The pages come down from inside their own room, never up into the row. */
	.custom-header.is-open .custom-header__middle {
		overflow: hidden;
	}

	.custom-header.is-open.is-closing .custom-header__menu,
	.custom-header.is-open.is-closing .custom-header__actions {
		animation-name: custom-header-out;
	}
	/* The bar's change of colour is for the page moving. Opening, the menu
	   comes down already in its own colours. */
	.custom-header.is-opening .custom-header__bar,
	.custom-header.is-opening .custom-header__bar * {
		transition: none;
	}

	/* Pressed to shut, the mark is the one that opens again at once. */
	.custom-header.is-open.is-closing .custom-header__toggle-open {
		display: block;
	}

	.custom-header.is-open.is-closing .custom-header__toggle-shut {
		display: none;
	}

	.custom-header.is-open .custom-header__row {
		flex-wrap: wrap;
		align-content: flex-start;
		height: auto;
	}

	.custom-header.is-open .custom-header__logo {
		order: 1;
		height: 49px;
	}

	.custom-header.is-open .custom-header__toggle {
		order: 2;
	}

	.custom-header.is-open .custom-header__menu {
		display: block;
		width: 100%;
		margin: 0;
		overflow: visible;
		border-top: 1px solid #e1d8b1;
		cursor: auto;
	}

	.custom-header.is-open .custom-header__middle {
		order: 3;
		display: block;
		width: 100%;
		margin: 0;
	}

	.custom-header.is-open .custom-header__menu ul {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		width: auto;
		margin: 0;
		border-bottom: 1px solid #e1d8b1;
	}

	/* The language switch stands at the foot of the open menu, 16 in and 26
	   up from the bottom of the screen (11282:5363), a pill 27 deep, 6 in at
	   either end, the globe 12, the code at 9 and the chevron 8 by 5, 5
	   apart. Its list opens upward, 4 above it: 89 across, 8 inside, corners
	   of 6, each row 7 inside with corners of 3, at 11. Until the menu is
	   opened it is not there. */
	.custom-header__language {
		display: none;
	}

	.custom-header.is-open .custom-header__language {
		display: block;
		position: absolute;
		left: 16px;
		bottom: 26px;
	}

	.custom-header__language-toggle,
	.custom-header__language-toggle:hover,
	.custom-header__language-toggle:focus,
	.custom-header__language-toggle:active {
		gap: 5px;
		height: 27px;
		padding: 0 6px;
		font-size: 9px;
	}

	.custom-header__language-globe {
		width: 12px;
		height: 12px;
	}

	.custom-header__language-chevron {
		width: 8px;
		height: 5px;
	}

	.custom-header__language-menu {
		position: absolute;
		left: 0;
		bottom: calc( 100% + 4px );
		width: 89px;
		padding: 8px;
		border-radius: 6px;
	}

	.custom-header__language-menu a,
	.custom-header__language-menu a:hover,
	.custom-header__language-menu a:focus,
	.custom-header__language-menu a:active {
		padding: 7px;
		border-radius: 3px;
		font-size: 11px;
	}

	.custom-header.is-open .custom-header__menu li {
		width: 100%;
	}

	.custom-header.is-open .custom-header__menu a {
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		height: 44px;
		padding: 10px;
		box-sizing: border-box;
	}

	.custom-header.is-open .custom-header__menu a::after {
		display: none;
	}

	.custom-header.is-open .custom-header__actions {
		order: 4;
		display: flex;
		justify-content: center;
		width: 100%;
		gap: 5px;
		margin-top: 24px;
	}

	.custom-header__button,
	.custom-header__button:hover,
	.custom-header__button:focus,
	.custom-header__button:active {
		padding: 8px 16px;
	}

	/* The file draws both buttons the one height here; the filled one takes
	   an edge it cannot be seen to have so that it stands as tall. */
	.custom-header__button--solid,
	.custom-header__button--solid:hover,
	.custom-header__button--solid:focus,
	.custom-header__button--solid:active {
		border: 1px solid transparent;
	}
}

/* Tablet — 768 to 1024 — is not drawn. It takes mobile's arrangement with the
   marks and buttons grown to sit between mobile's and the wide tier's: the bar
   56 (44 / 72), the logo 72 by 30 (53 by 22 / 154 by 64), the mark 32 (24),
   the pages 52 deep once open (44), the buttons 10 by 20 inside (8 by 16 /
   12 by 24) with their type at 12 on the control (9 / 14). A decision. */
@media ( min-width: 768px ) and ( max-width: 1024px ) {
	.custom-header__row {
		height: 56px;
	}

	.custom-header__logo {
		width: 72px;
		height: 56px;
	}

	.custom-header__logo-box {
		width: 72px;
		height: 30px;
	}

	.custom-header__toggle,
	.custom-header__toggle:hover,
	.custom-header__toggle:focus,
	.custom-header__toggle:active,
	.custom-header__toggle svg {
		width: 32px;
		height: 32px;
	}

	.custom-header {
		--custom-header-row: 61px;
	}

	.custom-header.is-open .custom-header__logo {
		height: 61px;
	}

	.custom-header.is-open .custom-header__menu a {
		height: 52px;
		padding: 12px 10px;
	}

	.custom-header.is-open .custom-header__actions {
		gap: 8px;
		margin-top: 28px;
	}

	.custom-header__button,
	.custom-header__button:hover,
	.custom-header__button:focus,
	.custom-header__button:active {
		padding: 10px 20px;
	}

	/* The language switch grown with the rest, a decision: the pill 32 deep,
	   8 in, the globe 14, the code at 11, the chevron 9 by 6; the list 100
	   across, 10 inside, corners of 8, rows 9 inside with corners of 4, at
	   13; standing 32 up from the bottom. */
	.custom-header.is-open .custom-header__language {
		bottom: 32px;
	}

	.custom-header__language-toggle,
	.custom-header__language-toggle:hover,
	.custom-header__language-toggle:focus,
	.custom-header__language-toggle:active {
		gap: 6px;
		height: 32px;
		padding: 0 8px;
		font-size: 11px;
	}

	.custom-header__language-globe {
		width: 14px;
		height: 14px;
	}

	.custom-header__language-chevron {
		width: 9px;
		height: 6px;
	}

	.custom-header__language-menu {
		width: 100px;
		padding: 10px;
		border-radius: 8px;
	}

	.custom-header__language-menu a,
	.custom-header__language-menu a:hover,
	.custom-header__language-menu a:focus,
	.custom-header__language-menu a:active {
		padding: 9px;
		border-radius: 4px;
		font-size: 13px;
	}
}

@keyframes custom-header-down {
	from {
		clip-path: inset( 0 0 calc( 100% - var( --custom-header-row ) ) 0 );
	}

	to {
		clip-path: inset( 0 );
	}
}

@keyframes custom-header-up {
	from {
		clip-path: inset( 0 );
	}

	to {
		clip-path: inset( 0 0 calc( 100% - var( --custom-header-row ) ) 0 );
	}
}

@keyframes custom-header-in {
	from {
		opacity: 0;
		transform: translateY( -24px );
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes custom-header-out {
	from {
		opacity: 1;
		transform: none;
	}

	to {
		opacity: 0;
		transform: translateY( -24px );
	}
}

/* A reader who has asked for less movement is shown the menu at once. */
@media ( prefers-reduced-motion: reduce ) {
	.custom-header.is-open .custom-header__bar,
	.custom-header.is-open .custom-header__menu,
	.custom-header.is-open .custom-header__actions {
		animation: none;
	}
}