/* Linéage Header. Mobile below 981px (Divi's breakpoint). */
.lh {
	--lh-primary: 62px;
	--lh-secondary: 48px;
	--lh-gutter: 20px;
	--lh-max: 1392px;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 99999;
	color: #fff;
	font-family: var(--lh-font);
	font-size: 16px;
	font-weight: 400;
	line-height: normal;
	-webkit-font-smoothing: antialiased;
}
.admin-bar .lh { top: 32px; }

.lh *, .lh *::before, .lh *::after { box-sizing: border-box; }
/* Divi and module styles must not replace the header font. */
.lh, .lh a, .lh button, .lh li, .lh span { font-family: var(--lh-font) !important; }
.lh ul { list-style: none; margin: 0; padding: 0; }
.lh a { color: inherit; text-decoration: none; }
.lh a:hover { color: inherit; opacity: .7; }
.lh button {
	appearance: none;
	background: none;
	border: 0;
	border-radius: 0;
	color: inherit;
	cursor: pointer;
	font: inherit;
	margin: 0;
	padding: 0;
}
.lh a:focus-visible, .lh button:focus-visible { outline: 1px solid #fff; outline-offset: 3px; }

.lh-bar { background: var(--lh-bg); transition: background-color .2s ease; }
.lh.is-scrolled .lh-bar,
.lh.lh--solid .lh-bar { background: var(--lh-bg-scrolled); }

/* Above the menu bar and mobile panel: the open language list hangs over both. */
.lh-bar--primary { position: relative; z-index: 2; }

.lh-inner {
	margin: 0 auto;
	max-width: var(--lh-max);
	position: relative;
	width: calc(100% - 2 * var(--lh-gutter));
}

.lh-chevron { display: block; flex: none; height: 16px; transition: transform .2s ease; width: 16px; }

/* Primary bar */
.lh-bar--primary .lh-inner {
	align-items: center;
	display: grid;
	gap: 16px;
	grid-template-columns: 1fr auto 1fr;
	height: var(--lh-primary);
	padding-top: 1px; /* Keeps the logo on whole pixels: 10px from the top as in Figma. */
}
.lh-logo { display: block; width: 112px; }
.lh-logo__img { display: block; height: auto; max-height: 43px; object-fit: contain; width: 112px; }
.lh-logo__text { display: block; font-size: 20px; text-align: center; white-space: nowrap; }
.lh-end { display: flex; justify-content: flex-end; min-width: 0; }

/* Language switcher: the list hangs below the toggle without moving the layout. */
.lh-lang { position: relative; }
.lh-lang__toggle { align-items: center; display: flex; gap: 3px; height: 23px; white-space: nowrap; }
.lh-lang__toggle[aria-expanded="true"] .lh-chevron { transform: rotate(180deg); }
.lh-lang__list { left: 0; min-width: 100%; position: absolute; top: 100%; }
.lh-lang__list[hidden] { display: none; }
.lh-lang__list a { display: block; line-height: 23px; white-space: nowrap; }
.lh-lang__code { display: none; }

/* Burger: two 20px lines 6px apart, turning into a 15px cross. */
.lh .lh-burger { display: none; height: 43px; margin-left: -12px; position: relative; width: 44px; }
.lh-burger span {
	background: #fff;
	height: 1px;
	left: 12px;
	position: absolute;
	top: 21px;
	transition: transform .2s ease, width .2s ease;
	width: 20px;
}
.lh-burger span:nth-child(1) { transform: translateY(-3px); }
.lh-burger span:nth-child(2) { transform: translateY(3px); }
.lh-burger[aria-expanded="true"] span { left: 10px; width: 21px; }
.lh-burger[aria-expanded="true"] span:nth-child(1) { transform: rotate(45deg); }
.lh-burger[aria-expanded="true"] span:nth-child(2) { transform: rotate(-45deg); }

/* Desktop */
@media (min-width: 981px) {
	.lh-panel { display: none !important; }

	.lh-bar--secondary .lh-inner { align-items: center; display: flex; height: var(--lh-secondary); justify-content: center; padding-bottom: 1px; }
	.lh-bar--secondary .lh-menu { display: flex; gap: 40px; }
	.lh-bar--secondary .lh-item { line-height: 23px; position: relative; }
	.lh-bar--secondary .lh-item--parent { align-items: center; display: flex; gap: 3px; }
	.lh-bar--secondary .lh-link { white-space: nowrap; }

	/* Invisible bridge so the pointer can cross from the item to the box. */
	.lh-bar--secondary .lh-item--parent::after {
		content: "";
		height: 13px;
		left: 0;
		position: absolute;
		right: 0;
		top: 100%;
	}

	.lh-bar--secondary .lh-sub {
		background: #000;
		display: none;
		left: -20px;
		padding: 10px 20px;
		position: absolute;
		top: calc(100% + 13px);
		white-space: nowrap;
		z-index: 2;
	}
	.lh-bar--secondary .lh-sub .lh-item + .lh-item { margin-top: 10px; }

	.lh-bar--secondary .lh-item--parent:hover > .lh-sub,
	.lh-bar--secondary .lh-item--parent:focus-within > .lh-sub,
	.lh-bar--secondary .lh-item--parent.is-open > .lh-sub { display: block; }

	.lh-bar--secondary .lh-item--parent:hover .lh-chevron,
	.lh-bar--secondary .lh-item--parent:focus-within .lh-chevron,
	.lh-bar--secondary .lh-item--parent.is-open .lh-chevron { transform: rotate(180deg); }
}

/* Mobile */
@media (max-width: 980px) {
	.lh-bar--secondary { display: none; }
	.lh .lh-burger { display: block; }

	.lh-lang { display: none; }
	.lh.is-menu-open .lh-lang { display: block; }
	.lh-lang__toggle { font-size: 16px; }
	.lh-lang__name { display: none; }
	.lh-lang__code { display: inline; }

	.lh .lh-bar--primary { background: var(--lh-bg-scrolled); }
	.lh.is-menu-open .lh-bar--primary { background: #000; }

	.lh-panel {
		-webkit-overflow-scrolling: touch;
		background: #000;
		bottom: 0;
		left: 0;
		overflow-y: auto;
		overscroll-behavior: contain;
		padding: 19px var(--lh-gutter) 40px;
		position: fixed;
		right: 0;
		top: var(--lh-primary);
	}
	.admin-bar .lh-panel { top: calc(var(--lh-primary) + 32px); }
	.lh-panel[hidden] { display: none; }

	.lh-panel .lh-menu { display: flex; flex-direction: column; gap: 24px; }
	.lh-panel .lh-item { font-size: 20px; line-height: 1; }
	.lh-panel .lh-item--parent { align-items: center; display: flex; flex-wrap: wrap; justify-content: space-between; }
	.lh-panel .lh-link { display: block; flex: 1 1 0; min-width: 0; }

	/* 20px chevron with a 44px touch area. */
	.lh-panel .lh-sub-toggle { align-items: center; display: flex; height: 44px; justify-content: flex-end; margin: -12px 0; width: 44px; }
	.lh-panel .lh-chevron { height: 20px; width: 20px; }
	.lh-panel .lh-item--parent.is-open .lh-chevron { transform: rotate(180deg); }

	.lh-panel .lh-sub { display: none; flex-basis: 100%; padding: 20px 0 0 10px; }
	.lh-panel .lh-item--parent.is-open > .lh-sub { display: block; }
	.lh-panel .lh-sub .lh-item { font-size: 18px; font-weight: 300; }
	.lh-panel .lh-sub .lh-item + .lh-item { margin-top: 16px; }

	.lh-cta {
		align-items: center;
		border: 1px solid #fff;
		display: flex;
		font-size: 18px;
		justify-content: center;
		margin-top: 40px;
		min-height: 41px;
		padding: 8px 24px;
		text-align: center;
		text-transform: uppercase;
	}

	html.lh-locked, html.lh-locked body { overflow: hidden; }
}

/* The WordPress admin bar is taller and scrolls away on small screens. */
@media (max-width: 782px) {
	.admin-bar .lh { top: 46px; }
	.admin-bar .lh-panel { top: calc(var(--lh-primary) + 46px); }
}
@media (max-width: 600px) {
	.admin-bar .lh.is-scrolled, .admin-bar .lh.is-menu-open { top: 0; }
	.admin-bar .lh.is-menu-open .lh-panel { top: var(--lh-primary); }
}

@media (prefers-reduced-motion: reduce) {
	.lh *, .lh *::before, .lh *::after { transition: none !important; }
}
