/*
 * Visual-only migration of the existing header.
 * Do not add layout, dimensions, spacing or logo rules to this file.
 */
body.dir-app-body {
	line-height: 0;
}

body.dir-app-body > .dir-app {
	line-height: 1.5;
}

.dir-ui-site-header :where(.dir-nav__item > a, .dir-nav__submenu a, .dir-mobile-action) {
	font-family: var(--dir-ui-font-heading);
}

.dir-ui-site-header .dir-nav__item--cta > a,
.dir-ui-site-header .dir-mobile-action--primary {
	color: var(--dir-ui-color-text-inverse) !important;
	background: var(--dir-ui-color-brand-accessible);
	border-color: var(--dir-ui-color-brand-accessible);
	border-radius: var(--dir-ui-button-radius) !important;
	box-shadow: none;
	font-family: var(--dir-ui-font-heading);
	font-weight: var(--dir-ui-font-weight-bold);
	text-transform: none;
}

.dir-ui-site-header .dir-nav__item--cta:hover > a,
.dir-ui-site-header .dir-nav__item--cta:focus-within > a,
.dir-ui-site-header .dir-mobile-action--primary:hover,
.dir-ui-site-header .dir-mobile-action--primary:focus-visible {
	color: var(--dir-ui-color-text-inverse) !important;
	background: var(--dir-ui-color-brand-dark);
	border-color: var(--dir-ui-color-brand-dark);
}

.dir-ui-site-header .dir-submenu-toggle {
	display: none;
}

@media (max-width: 980px) {
	.dir-ui-site-header .dir-site-header__inner {
		position: relative;
		justify-content: space-between;
	}

	.dir-ui-site-header .dir-site-header__inner > .dir-site-logo {
		margin: 0;
		padding: 0;
	}

	.dir-ui-site-header .dir-site-header__inner > .dir-site-logo .custom-logo {
		width: min(50vw, 9.375rem);
		max-height: 3.5rem;
	}

	.dir-ui-site-header .dir-menu-toggle {
		position: absolute;
		right: 0;
		border-radius: var(--dir-ui-button-radius) !important;
		box-shadow: none;
	}

	.dir-ui-site-header .dir-main-nav {
		display: none;
		grid-template-rows: auto minmax(0, 1fr) auto;
		align-items: stretch;
		justify-content: stretch;
		gap: 0;
		padding:
			max(1rem, env(safe-area-inset-top))
			max(1.25rem, env(safe-area-inset-right))
			max(1rem, env(safe-area-inset-bottom))
			max(1.25rem, env(safe-area-inset-left));
		background: var(--dir-ui-color-neutral-50);
	}

	body.dir-menu-open .dir-ui-site-header .dir-main-nav,
	.dir-ui-site-header .dir-main-nav.is-open {
		display: grid;
	}

	.dir-ui-site-header .dir-mobile-menu-brand {
		display: flex;
		width: 100%;
		min-height: 4.5rem;
		align-items: center;
		justify-content: flex-start;
		padding: 0 3.5rem var(--dir-ui-space-3) 0;
		border-bottom: var(--dir-ui-border);
	}

	.dir-ui-site-header .dir-mobile-menu-brand .dir-site-logo {
		justify-content: flex-start;
		width: 100%;
		padding: 0;
	}

	.dir-ui-site-header .dir-mobile-menu-brand .custom-logo {
		width: min(9.375rem, 50vw);
		max-height: 3.5rem;
	}

	.dir-ui-site-header .dir-menu-close {
		top: max(1rem, env(safe-area-inset-top));
		right: max(1.25rem, env(safe-area-inset-right));
		z-index: 1002;
		color: var(--dir-ui-color-neutral-800);
		background: transparent;
		border-color: var(--dir-ui-color-neutral-300);
		border-radius: var(--dir-ui-button-radius) !important;
		box-shadow: none;
	}

	.dir-ui-site-header .dir-nav {
		display: flex;
		width: min(100%, 34rem);
		height: 100%;
		max-height: none;
		align-items: stretch;
		flex-direction: column;
		justify-self: center;
		overflow-x: hidden;
		overflow-y: auto;
		padding: var(--dir-ui-space-3) 0;
		background: transparent;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		scrollbar-gutter: stable;
	}

	.dir-ui-site-header .dir-nav__item {
		display: block;
		width: 100%;
		margin: 0;
		border-bottom: var(--dir-ui-border);
	}

	.dir-ui-site-header .dir-nav__item--has-submenu {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 3.25rem;
	}

	.dir-ui-site-header .dir-nav__item--cta {
		display: none;
	}

	.dir-ui-site-header .dir-nav__item > a {
		min-height: 3.5rem;
		justify-content: flex-start;
		padding: 0 var(--dir-ui-space-3);
		background: transparent;
		border-radius: var(--dir-ui-button-radius);
		font-size: var(--dir-ui-font-size-400);
		font-weight: var(--dir-ui-font-weight-semibold);
	}

	.dir-ui-site-header .dir-nav__item--has-submenu > a::after {
		display: none;
	}

	.dir-ui-site-header .dir-submenu-toggle {
		display: grid;
		width: 2.75rem;
		height: 2.75rem;
		align-self: center;
		justify-self: end;
		place-items: center;
		padding: 0;
		color: var(--dir-ui-color-neutral-700);
		background: transparent;
		border: 0;
		border-radius: var(--dir-ui-button-radius);
		cursor: pointer;
	}

	.dir-ui-site-header .dir-submenu-toggle:hover,
	.dir-ui-site-header .dir-submenu-toggle:focus-visible,
	.dir-ui-site-header .dir-nav__item.is-submenu-open > .dir-submenu-toggle {
		color: var(--dir-ui-color-brand-dark);
		background: var(--dir-ui-color-brand-soft);
	}

	.dir-ui-site-header .dir-submenu-toggle span {
		width: 0.55rem;
		height: 0.55rem;
		border-right: 2px solid currentcolor;
		border-bottom: 2px solid currentcolor;
		transform: rotate(45deg) translate(-1px, -1px);
		transition: transform var(--dir-ui-transition-fast);
	}

	.dir-ui-site-header .dir-nav__item.is-submenu-open > .dir-submenu-toggle span {
		transform: rotate(225deg) translate(-1px, -1px);
	}

	.dir-ui-site-header .dir-nav__item > a::before {
		display: none;
	}

	.dir-ui-site-header .dir-nav__item:hover > a,
	.dir-ui-site-header .dir-nav__item:focus-within > a,
	.dir-ui-site-header .dir-nav__item.is-active > a,
	.dir-ui-site-header .dir-nav__item.is-submenu-open > a {
		color: var(--dir-ui-color-brand-accessible);
		background: transparent;
	}

	.dir-ui-site-header .dir-nav__submenu {
		position: static;
		display: block;
		width: 100%;
		max-width: none;
		max-height: 0;
		grid-column: 1 / -1;
		overflow: hidden;
		padding: 0;
		background: transparent;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		opacity: 0;
		pointer-events: none;
		transform: none;
		transition:
			max-height var(--dir-ui-transition-normal),
			opacity var(--dir-ui-transition-fast),
			padding var(--dir-ui-transition-fast);
	}

	.dir-ui-site-header .dir-nav__item.is-submenu-open > .dir-nav__submenu {
		max-height: 80rem;
		padding: 0 0 var(--dir-ui-space-3) var(--dir-ui-space-4);
		opacity: 1;
		pointer-events: auto;
	}

	.dir-ui-site-header .dir-nav__submenu a {
		display: flex;
		min-height: 2.75rem;
		align-items: center;
		padding: var(--dir-ui-space-2) var(--dir-ui-space-3);
		color: var(--dir-ui-color-neutral-600);
		background: transparent;
		border: 0;
		border-radius: var(--dir-ui-button-radius);
		font-size: var(--dir-ui-font-size-300);
		font-weight: var(--dir-ui-font-weight-medium);
		line-height: var(--dir-ui-line-height-compact);
	}

	.dir-ui-site-header .dir-nav__submenu a:hover,
	.dir-ui-site-header .dir-nav__submenu a:focus-visible {
		color: var(--dir-ui-color-brand-dark);
		background: var(--dir-ui-color-brand-soft);
	}

	.dir-ui-site-header .dir-mobile-actions {
		width: min(100%, 34rem);
		justify-self: center;
		padding-top: var(--dir-ui-space-3);
		border-top: var(--dir-ui-border);
	}

	.dir-ui-site-header .dir-mobile-action--primary {
		width: 100%;
		border-radius: var(--dir-ui-button-radius);
	}
}

@media (prefers-reduced-motion: reduce) {
	.dir-ui-site-header .dir-submenu-toggle span,
	.dir-ui-site-header .dir-nav__submenu {
		transition: none;
	}
}