.dimu-header {
	--dimu-header-gap: 60px;
	--dimu-header-link-gap: 32px;
	--dimu-header-pad-y: 18px;
	--dimu-header-pad-x: 28px;
	--dimu-header-bar-bg: transparent;

	--dimu-header-logo-height: 60px;
	--dimu-header-logo-height-m: 40px;

	--dimu-header-margin-y: 0px;
	--dimu-header-margin-y-m: 8px;
	--dimu-header-margin-x-m: 5px;

	--dimu-header-link-size: 14px;
	--dimu-header-link-color: #333;
	--dimu-header-link-hover: #000;

	--dimu-header-pill-bg: #fff;
	--dimu-header-pill-radius: 28px;
	--dimu-header-pill-inset: 24px;
	--dimu-header-pill-shadow: 0 8px 30px rgb(0 0 0 / 10%);

	--dimu-header-toggle-size: 46px;
	--dimu-header-toggle-bg: transparent;
	--dimu-header-toggle-radius: 50%;
	--dimu-header-toggle-color: #111;

	--dimu-header-panel-bg: #fff;
	--dimu-header-panel-link-size: 30px;

	--dimu-header-fade: .28s;
	--dimu-header-reveal: .55s;

	/* Origin of the circular reveal, written by the script from the button position */
	--dimu-header-origin-x: 50%;
	--dimu-header-origin-y: 50%;

	position: relative;
	z-index: 1;
}

.dimu-header.is-open {
	z-index: 1000;
}

.dimu-header__bar {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: var(--dimu-header-gap);
	padding: var(--dimu-header-pad-y) var(--dimu-header-pad-x);
	background: var(--dimu-header-bar-bg);
	border-radius: 0;
	box-shadow: none;
	margin-inline: 0;
	margin-block: var(--dimu-header-margin-y);
}

/* Keeps the logo and the button on top of the open panel */
.dimu-header.is-open .dimu-header__bar {
	position: relative;
	z-index: 2;
}

@media (prefers-reduced-motion: no-preference) {
	.dimu-header__bar {
		transition:
			background-color var(--dimu-header-fade) ease,
			border-radius var(--dimu-header-fade) ease,
			box-shadow var(--dimu-header-fade) ease,
			margin var(--dimu-header-fade) ease;
	}
}

/* Scrolling back up, and while the menu is open, the bar lifts off as a floating pill */
.dimu-header.is-peek .dimu-header__bar,
.dimu-header.is-open .dimu-header__bar {
	background: var(--dimu-header-pill-bg);
	border-radius: var(--dimu-header-pill-radius);
	box-shadow: var(--dimu-header-pill-shadow);
	margin-inline: var(--dimu-header-pill-inset);
}

/* Menus */
.dimu-header__menu ul {
	display: flex;
	align-items: center;
	gap: var(--dimu-header-link-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.dimu-header__menu--left ul { justify-content: flex-end; }
.dimu-header__menu--right ul { justify-content: flex-start; }

.dimu-header__menu a {
	display: inline-block;
	font-size: var(--dimu-header-link-size);
	color: var(--dimu-header-link-color);
	text-decoration: none;
	white-space: nowrap;
	transition: color .2s ease;
}

.dimu-header__menu a:hover,
.dimu-header__menu a:focus-visible {
	color: var(--dimu-header-link-hover);
}

/* Scrolling down. Grid columns keep their width, so nothing moves. */
.dimu-header__menu,
.dimu-header__logo,
.dimu-header__toggle {
	transition: opacity var(--dimu-header-fade) ease, visibility var(--dimu-header-fade);
}

.dimu-header.is-condensed:not(.is-open) .dimu-header__menu,
.dimu-header.is-condensed:not(.is-open) .dimu-header__toggle {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.dimu-header.is-condensed.condense-logo:not(.is-open) .dimu-header__logo {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.dimu-header__logo {
	display: flex;
	justify-content: center;
	align-items: center;
	grid-column: 2;
}

.dimu-header__logo img {
	display: block;
	width: auto;
	height: var(--dimu-header-logo-height);
	max-height: 100%;
}

/* Sticky is applied to the theme's header wrapper, not to this element, because
   position:sticky only travels as far as its own parent. */
.dimu-header-sticky {
	position: sticky;
	top: 0;
	z-index: 999;
}

body.admin-bar .dimu-header-sticky { top: 32px; }

@media (max-width: 782px) {
	/* Below this width the admin bar scrolls away with the page */
	body.admin-bar .dimu-header-sticky { top: 0; }
}

/* Toggle button */
.dimu-header__toggle {
	display: none;
	align-items: center;
	justify-content: center;
	grid-column: 3;
	justify-self: end;
	width: var(--dimu-header-toggle-size);
	height: var(--dimu-header-toggle-size);
	padding: 0;
	border: 0;
	border-radius: var(--dimu-header-toggle-radius);
	background: var(--dimu-header-toggle-bg);
	color: var(--dimu-header-toggle-color);
	cursor: pointer;
}

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

.dimu-header__toggle-icon {
	display: block;
	width: 55%;
	height: auto;
}

.dimu-header__bars {
	display: block;
	width: 22px;
}

.dimu-header__bars span {
	display: block;
	height: 2px;
	margin: 5px auto;
	background: currentColor;
	transition: transform .3s ease, opacity .3s ease;
}

.dimu-header.is-open .dimu-header__bars span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.dimu-header.is-open .dimu-header__bars span:nth-child(2) { opacity: 0; }
.dimu-header.is-open .dimu-header__bars span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* A custom icon has no bars to fold, so it swaps for a cross */
.dimu-header__toggle-close { display: none; width: 45%; height: auto; }
.dimu-header.is-open .dimu-header__toggle-icon { display: none; }
.dimu-header.is-open .dimu-header__toggle-close { display: block; }
.dimu-header__toggle-close line { stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

/* Full screen panel, revealed as a circle growing out of the button */
.dimu-header__panel {
	position: fixed;
	inset: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow-y: auto;
	padding: calc(var(--dimu-header-toggle-size) + var(--dimu-header-pad-y) * 2 + var(--dimu-header-margin-y-m) * 2) 24px 40px;
	background: var(--dimu-header-panel-bg);
	visibility: hidden;
	clip-path: circle(0 at var(--dimu-header-origin-x) var(--dimu-header-origin-y));
	transition:
		clip-path var(--dimu-header-reveal) cubic-bezier(.4, 0, .2, 1),
		visibility 0s var(--dimu-header-reveal);
}

.dimu-header.is-open .dimu-header__panel {
	visibility: visible;
	clip-path: circle(150% at var(--dimu-header-origin-x) var(--dimu-header-origin-y));
	transition:
		clip-path var(--dimu-header-reveal) cubic-bezier(.4, 0, .2, 1),
		visibility 0s;
}

.dimu-header__panel-inner {
	width: 100%;
	max-width: 480px;
	text-align: center;
}

.dimu-header__panel ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.dimu-header__panel a {
	display: block;
	padding: 14px 0;
	font-size: var(--dimu-header-panel-link-size);
	/* Same colour as the button icon, so the two always read as one control */
	color: var(--dimu-header-toggle-color);
	text-decoration: none;
	opacity: 0;
	transform: translateY(14px);
}

/* Links arrive just behind the reveal */
.dimu-header.is-open .dimu-header__panel a {
	opacity: 1;
	transform: none;
	transition: opacity .35s ease .18s, transform .35s ease .18s;
}

body.dimu-header-locked {
	overflow: hidden;
}

@media (max-width: 991px) {
	.dimu-header__menu { display: none; }

	/* Logo moves left, button takes the right edge */
	.dimu-header__logo {
		grid-column: 1;
		justify-self: start;
	}

	.dimu-header__logo img { height: var(--dimu-header-logo-height-m); }

	.dimu-header__toggle { display: inline-flex; }

	/* The inset is constant here, so the bar never touches the screen edge */
	.dimu-header__bar,
	.dimu-header.is-peek .dimu-header__bar,
	.dimu-header.is-open .dimu-header__bar {
		margin-inline: var(--dimu-header-margin-x-m);
		margin-block: var(--dimu-header-margin-y-m);
	}
}

@media (min-width: 992px) {
	.dimu-header__panel { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.dimu-header__panel,
	.dimu-header.is-open .dimu-header__panel {
		transition-duration: 0s;
	}

	.dimu-header__panel a { opacity: 1; transform: none; }
}