/*
 * Deuton-X UI 0.8.8
 * Fixed reading header, stronger desktop navigation and scroll progress.
 * The approved white header height, logo size and mobile drawer stay intact.
 */

:root {
	--dx-admin-offset: 0px;
	--dx-review-offset: 0px;
	--dx-sticky-header-height: 0px;
	--dx-scroll-progress: 0;
}

html.deuton-x-sticky-header-ready {
	scroll-padding-top: calc(
		var(--dx-admin-offset) +
		var(--dx-review-offset) +
		var(--dx-sticky-header-height) +
		16px
	);
}

html.deuton-x-sticky-header-ready .deuton-x-design-v2 #header.ct-header {
	isolation: isolate;
	left: 0;
	position: fixed;
	right: 0;
	top: calc(var(--dx-admin-offset) + var(--dx-review-offset));
	width: 100%;
	z-index: 99990;
}

html.deuton-x-sticky-header-ready .deuton-x-header-spacer {
	display: block;
	flex: 0 0 var(--dx-sticky-header-height);
	height: var(--dx-sticky-header-height);
	pointer-events: none;
	visibility: hidden;
	width: 100%;
}

html.deuton-x-sticky-header-ready .deuton-x-design-v2 .deuton-x-public-review {
	top: var(--dx-admin-offset);
}

.deuton-x-design-v2 #header.ct-header .deuton-x-scroll-progress {
	background: linear-gradient(
		90deg,
		rgba(8, 125, 50, 0.08),
		rgba(30, 219, 20, 0.13)
	);
	bottom: 0;
	height: 3px;
	left: 0;
	overflow: hidden;
	pointer-events: none;
	position: absolute;
	right: 0;
	z-index: 20;
}

.deuton-x-design-v2 #header.ct-header .deuton-x-scroll-progress__value {
	background: linear-gradient(
		90deg,
		var(--dx-green-700) 0%,
		var(--dx-green-600) 60%,
		var(--dx-lime-400) 100%
	);
	display: block;
	height: 100%;
	opacity: 0.78;
	transform: scaleX(var(--dx-scroll-progress));
	transform-origin: left center;
	width: 100%;
	will-change: transform;
}

@media (min-width: 981px) {
	.deuton-x-design-v2 #header-menu-1 > ul > li > a {
		color: #203a43;
		font-size: 14px;
		font-weight: 700;
		letter-spacing: 0.006em;
	}
}

@media (min-width: 1200px) {
	.deuton-x-design-v2 #header-menu-1 > ul > li > a {
		font-size: 15px;
	}
}

/* Keep the long navigation labels on one line on smaller laptops. */
@media (min-width: 981px) and (max-width: 1080px) {
	.deuton-x-design-v2 #header-menu-1 > ul > li > a {
		font-size: 13px;
		font-weight: 650;
		padding-inline: 0.4rem;
	}
}

@media (max-width: 980px) {
	.deuton-x-design-v2 #header.ct-header .deuton-x-scroll-progress {
		height: 2px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.deuton-x-design-v2 #header.ct-header .deuton-x-scroll-progress__value {
		transition: none;
	}
}