/* ============================================================
   Zency Header — zency-header.css
   BEM-prefix: .zh-
   Ingen Elementor-klasser eller -afhængigheder.
   Brug altid var(--e-global-color-*) frem for hardcodede hex.
   ============================================================ */

:root {
	--zh-color-top-bar-start: #2D6A5A;
	--zh-color-top-bar-end:   #7EC8A0;
	--zh-color-nav-bar:       var(--e-global-color-85d83db, #ffffff);
	--zh-color-cta-bg:        var(--e-global-color-c91a498, #877847);
	--zh-color-cta-bg-hover:  var(--e-global-color-5bfe8c5, #6E6138);
	--zh-color-cta-text:      var(--e-global-color-85d83db, #ffffff);
	--zh-color-nav-text:      var(--e-global-color-primary, #222222);
	--zh-color-border:        var(--e-global-color-5dc02a7, #E4E4E4);
	--zh-color-brand:         var(--e-global-color-secondary, #59736E);
	--zh-font-body:           var(--e-global-typography-f089df3-font-family, "Source Sans Pro"), system-ui, sans-serif;
	--zh-font-cta:            var(--e-global-typography-7eee398-font-family, "Dosis"), system-ui, sans-serif;
	--zh-transition-ease:     cubic-bezier(0.4, 0, 0.6, 1);
	--zh-top-bar-height:       72px;
	--zh-nav-bar-height:       48px;
	--zh-mobile-bar-height:    72px;
	--zh-mobile-trust-height:  44px;
}

/* ========================
   Reset
   ======================== */
.zh-header *,
.zh-header *::before,
.zh-header *::after,
#zh-overlay,
#zh-mobile-menu,
#zh-mobile-curtain {
	box-sizing: border-box;
}

.zh-header ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.zh-header a,
.zh-header a:hover,
.zh-header a:focus,
.zh-header a:active,
.zh-header a:visited {
	color: inherit;
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	font-style: inherit;
	line-height: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	text-decoration: none;
}

/* Forhindrer display:flex fra at overskrive [hidden]-attributten */
#zh-mobile-menu[hidden] {
	display: none !important;
}

.zh-header button {
	cursor: pointer;
}

/* ========================
   Sticky wrapper
   ======================== */
#zh-header {
	position: sticky;
	top: 0;
	z-index: 1000;
	width: 100%;
}

/* ========================
   Top bar
   ======================== */
.zh-top-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: var(--zh-top-bar-height);
	padding: 0 40px;
	background: linear-gradient(135deg, var(--zh-color-top-bar-start), var(--zh-color-top-bar-end));
}

/* ========================
   Logo
   ======================== */
.zh-logo {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
}

.zh-logo__img {
	width: auto;
	height: 140px;
	max-height: calc(var(--zh-top-bar-height) - 8px);
	object-fit: contain;
	display: block;
}

/* ========================
   CTA-knap
   ======================== */
.zh-header .zh-cta-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background-color: var(--e-global-color-c91a498);
	color: var(--e-global-color-85d83db, #ffffff);
	fill: var(--e-global-color-85d83db, #ffffff);
	font-family: var(--e-global-typography-7eee398-font-family, "Dosis"), Sans-serif;
	font-size: var(--e-global-typography-7eee398-font-size, 1rem);
	font-weight: var(--e-global-typography-7eee398-font-weight, 500);
	text-transform: var(--e-global-typography-7eee398-text-transform, uppercase);
	line-height: var(--e-global-typography-7eee398-line-height, 1);
	letter-spacing: var(--e-global-typography-7eee398-letter-spacing, 1px);
	border-radius: 50px;
	padding: 4px 6px 5px 22px;
	box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 0.5);
	transition: background-color 0.2s var(--zh-transition-ease),
	            box-shadow 0.2s;
	white-space: nowrap;
}

.zh-header .zh-cta-btn:hover {
	background-color: var(--e-global-color-5bfe8c5);
	box-shadow: none;
	color: var(--e-global-color-85d83db, #ffffff);
}

.zh-header .zh-cta-btn--mobile {
	padding: 4px 6px 5px 14px;
	font-size: var(--e-global-typography-7eee398-font-size, 0.875rem);
}

/* ========================
   Nav bar
   ======================== */
.zh-nav-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: var(--zh-nav-bar-height);
	padding: 0 40px;
	background: var(--zh-color-nav-bar);
	border-bottom: 1px solid var(--zh-color-border);
}

/* ========================
   Trustpilot
   ======================== */
.zh-trustpilot {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
}

.zh-trustpilot__stars {
	height: 24px;
	width: auto;
	display: block;
	flex-shrink: 0;
}

.zh-trustpilot__text {
	font-family: var(--zh-font-body);
	font-size: 0.8125rem;
	color: var(--zh-color-nav-text);
	white-space: nowrap;
}

/* ========================
   Navigation
   ======================== */
.zh-nav__list {
	display: flex;
	align-items: center;
}

.zh-header .zh-nav__link {
	display: block;
	padding: 0 16px;
	line-height: var(--zh-nav-bar-height);
	font-family: var(--e-global-typography-058cb46-font-family, "Source Sans Pro"), system-ui, sans-serif;
	font-size: var(--e-global-typography-058cb46-font-size, 0.9375rem);
	font-weight: var(--e-global-typography-058cb46-font-weight, 400);
	letter-spacing: var(--e-global-typography-058cb46-letter-spacing, normal);
	text-transform: var(--e-global-typography-058cb46-text-transform, none);
	color: var(--zh-color-nav-text);
	text-decoration: none;
	transition: text-decoration-color 0.15s;
	text-decoration-color: transparent;
	text-decoration-thickness: 5px;
	text-underline-offset: 3px;
}

.zh-header .zh-nav__link:hover,
.zh-header .zh-nav__link:focus,
.zh-header .zh-nav__link:active {
	font-family: var(--e-global-typography-058cb46-font-family, "Source Sans Pro"), system-ui, sans-serif;
	font-size: var(--e-global-typography-058cb46-font-size, 0.9375rem);
	font-weight: var(--e-global-typography-058cb46-font-weight, 400);
	font-style: normal;
	letter-spacing: var(--e-global-typography-058cb46-letter-spacing, normal);
	text-transform: var(--e-global-typography-058cb46-text-transform, none);
	color: var(--zh-color-nav-text);
	text-decoration: underline;
	text-decoration-color: var(--zh-color-brand);
	text-decoration-thickness: 5px;
	text-underline-offset: 3px;
}

.zh-header .zh-nav__dropdown-trigger {
	display: inline-flex;
	align-items: center;
	padding: 0 16px;
	height: var(--zh-nav-bar-height);
	font-family: var(--e-global-typography-058cb46-font-family, "Source Sans Pro"), system-ui, sans-serif;
	font-size: var(--e-global-typography-058cb46-font-size, 0.9375rem);
	font-weight: var(--e-global-typography-058cb46-font-weight, 400);
	letter-spacing: var(--e-global-typography-058cb46-letter-spacing, normal);
	text-transform: var(--e-global-typography-058cb46-text-transform, none);
	color: var(--zh-color-nav-text);
	background: none;
	border: none;
	text-decoration: none;
	text-decoration-thickness: 5px;
	text-underline-offset: 3px;
	text-decoration-color: transparent;
	transition: text-decoration-color 0.15s;
}

.zh-header .zh-nav__dropdown-trigger:hover,
.zh-header .zh-nav__dropdown-trigger[aria-expanded="true"] {
	text-decoration: underline;
	text-decoration-color: var(--e-global-color-293588f, #4a90d9);
	text-decoration-thickness: 5px;
	text-underline-offset: 3px;
}

.zh-chevron {
	transition: transform 0.2s var(--zh-transition-ease);
	flex-shrink: 0;
}

.zh-nav__dropdown-trigger[aria-expanded="true"] .zh-chevron {
	transform: rotate(180deg);
}

/* ========================
   Dropdown
   ======================== */
.zh-dropdown {
	position: absolute;
	left: 0;
	right: 0;
	background: var(--e-global-color-85d83db, #ffffff);
	border-top: 1px solid var(--zh-color-border);
	border-bottom: 1px solid var(--zh-color-border);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
	z-index: 999;
}

.zh-dropdown__inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 24px 40px;
}

/* Tabs */
.zh-tabs {
	display: flex;
	border-bottom: 2px solid var(--zh-color-border);
	margin-bottom: 20px;
}

.zh-tabs [role="tab"] {
	padding: 8px 20px;
	font-family: var(--zh-font-body);
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--zh-color-nav-text);
	background-color: var(--e-global-color-85d83db, #ffffff);
	border: none;
	border-bottom: 2px solid transparent;
	margin-bottom: -2px;
	transition: color 0.15s, border-color 0.15s;
}

.zh-tabs [role="tab"][aria-selected="true"] {
	color: var(--zh-color-brand);
	border-bottom-color: var(--zh-color-brand);
}

.zh-tabs [role="tab"]:hover {
	color: var(--zh-color-brand);
}

/* City columns */
.zh-city-columns {
	display: flex;
	flex-wrap: wrap;
	gap: 0 40px;
}

.zh-city-col {
	min-width: 140px;
}

.zh-city-col__header {
	display: block;
	font-family: var(--zh-font-body);
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.8px;
	color: var(--zh-color-brand);
	margin-bottom: 6px;
	padding-bottom: 4px;
	border-bottom: 1px solid var(--zh-color-border);
}

.zh-city-col ul {
	display: flex;
	flex-direction: column;
	gap: 2px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.zh-header .zh-city-col li a,
.zh-header .zh-city-list--flat li a {
	font-family: var(--zh-font-body);
	font-size: 0.9375rem;
	color: var(--zh-color-nav-text);
	transition: color 0.15s;
	padding: 2px 0;
	display: block;
}

.zh-header .zh-city-col li a:hover,
.zh-header .zh-city-list--flat li a:hover {
	color: var(--zh-color-brand);
}

.zh-city-list--flat {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 40px;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Location filter i dropdown */
.zh-dropdown__location-filter {
	margin-top: 20px;
	padding-top: 16px;
	border-top: 1px solid var(--zh-color-border);
}

/* ========================
   Overlay (desktop dropdown)
   ======================== */
#zh-overlay {
	position: fixed;
	inset: 0;
	top: calc(var(--zh-top-bar-height) + var(--zh-nav-bar-height));
	background: rgba(0, 0, 0, 0.3);
	z-index: 998;
}

/* ========================
   Mobile bar (skjult på desktop)
   ======================== */
.zh-mobile-bar {
	display: none;
	align-items: center;
	justify-content: space-between;
	height: var(--zh-mobile-bar-height);
	padding: 0 16px;
	background: linear-gradient(135deg, var(--zh-color-top-bar-start), var(--zh-color-top-bar-end));
}

.zh-logo__img--mobile {
	height: 66px;
	max-height: calc(var(--zh-mobile-bar-height) - 8px);
}



/* ========================
   Mobile trustpilot-bar
   ======================== */
.zh-mobile-trust-bar {
	display: none;
	align-items: center;
	justify-content: center;
	height: var(--zh-mobile-trust-height);
	padding: 0 16px;
	background: var(--zh-color-nav-bar);
	border-bottom: 1px solid var(--zh-color-border);
}

.zh-hamburger,
.zh-header .zh-hamburger,
.zh-header .zh-hamburger:hover,
.zh-header .zh-hamburger:active,
.zh-header .zh-hamburger:focus,
.zh-header .zh-hamburger:focus-visible {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background-color: var(--e-global-color-dae154f, transparent);
	border: none;
	border-color: var(--e-global-color-dae154f, transparent);
	color: #fff;
	padding: 4px;
	border-radius: 4px;
	flex-shrink: 0;
	outline: none;
	box-shadow: none;
}

/* ========================
   Mobile menu overlay
   ======================== */
#zh-mobile-menu {
	position: fixed;
	inset: 0;
	top: calc(var(--zh-mobile-bar-height, 72px) + var(--zh-mobile-trust-height, 44px));
	background: var(--e-global-color-0ce50db, #f8f8f8);
	overflow: hidden;
	height: calc(100dvh - var(--zh-mobile-bar-height, 72px) - var(--zh-mobile-trust-height, 44px));
	z-index: 999;
	display: flex;
	flex-direction: column;
	clip-path: inset(0 0 100% 0);
	transition: clip-path 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

#zh-mobile-menu.zh-mobile-menu--open {
	clip-path: inset(0 0 0% 0);
}

.zh-mobile-menu__content {
	flex: 1;
	overflow-y: auto;
	overflow-x: hidden;
	padding: 16px 20px;
	max-width: 600px;
	margin: 0 auto;
	width: 100%;
}

.zh-mobile-back {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: none;
	border: none;
	font-family: var(--zh-font-body);
	font-size: 0.9375rem;
	color: var(--zh-color-nav-text);
	padding: 8px 0;
	margin-bottom: 8px;
}

/* Stagger-animation på listeelementer */
.zh-mobile-lvl1 li,
.zh-mobile-lvl2 li,
.zh-mobile-lvl3 li {
	opacity: 0;
	transform: translateY(-8px);
	transition-property: opacity, transform;
	transition-duration: 0.24s;
	transition-timing-function: var(--zh-transition-ease);
	transition-delay: calc(0.2s + var(--flyout-item-number, 0) * 20ms);
	border-bottom: 1px solid var(--zh-color-border);
}

.zh-mobile-lvl1.zh-mobile-menu--visible li,
.zh-mobile-lvl2.zh-mobile-menu--visible li,
.zh-mobile-lvl3.zh-mobile-menu--visible li {
	opacity: 1;
	transform: translateY(0);
}

.zh-header .zh-mobile-lvl1 li a,
.zh-header .zh-mobile-lvl2 li a,
.zh-header .zh-mobile-lvl3 li a {
	display: block;
	padding: 14px 0;
	font-family: var(--zh-font-body);
	font-size: 1rem;
	color: var(--zh-color-nav-text);
}

.zh-header .zh-mobile-lvl1 li a:hover,
.zh-header .zh-mobile-lvl2 li a:hover,
.zh-header .zh-mobile-lvl3 li a:hover {
	color: var(--zh-color-brand);
}

.zh-has-submenu {
	display: flex;
	align-items: center;
	justify-content: space-between;
	cursor: pointer;
}

.zh-header .zh-has-submenu > span {
	flex: 1;
	padding: 14px 0;
	font-family: var(--zh-font-body);
	font-size: 1rem;
	color: var(--zh-color-nav-text);
}

.zh-has-submenu > svg {
	flex-shrink: 0;
	color: var(--zh-color-nav-text);
}

/* Mobile curtain */
#zh-mobile-curtain {
	position: fixed;
	inset: 0;
	top: calc(var(--zh-mobile-bar-height, 72px) + var(--zh-mobile-trust-height, 44px));
	background: rgba(232, 232, 237, 0.4);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	z-index: 998;
}

/* Location filter i mobilmenu */
.zh-mobile-location-filter {
	margin-top: 24px;
	padding-top: 16px;
	border-top: 1px solid var(--zh-color-border);
}

.zh-mobile-location-filter > p {
	font-family: var(--zh-font-body);
	font-size: 0.875rem;
	color: var(--zh-color-nav-text);
	margin: 0 0 8px;
}

/* ========================
   Mobile trust footer
   ======================== */
.zh-mobile-trust-footer {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 12px 20px;
	background: var(--zh-color-nav-bar);
	border-top: 1px solid var(--zh-color-border);
}

/* ========================
   Breakpoints
   ======================== */

/* ≤1024px: mobilmenu */
@media (max-width: 1024px) {
	.zh-top-bar,
	.zh-nav-bar {
		display: none !important;
	}

	#zh-findklinik-panel,
	#zh-overlay {
		display: none !important;
	}

	.zh-mobile-bar {
		display: flex;
	}

	.zh-mobile-trust-bar {
		display: flex;
	}
}

/* ≥1025px: desktop */
@media (min-width: 1025px) {
	.zh-mobile-bar,
	.zh-mobile-trust-bar,
	#zh-mobile-menu,
	#zh-mobile-curtain {
		display: none !important;
	}
}

/* Widescreen: max header-bredde */
@media (min-width: 2400px) {
	.zh-top-bar,
	.zh-nav-bar {
		padding-left: max(40px, calc((100% - 2360px) / 2));
		padding-right: max(40px, calc((100% - 2360px) / 2));
	}
}

/* ========================
   Reduced motion
   ======================== */
@media (prefers-reduced-motion: reduce) {
	.zh-mobile-lvl1 li,
	.zh-mobile-lvl2 li,
	.zh-mobile-lvl3 li {
		transition: none;
		opacity: 1;
		transform: none;
	}

	.zh-chevron {
		transition: none;
	}

	#zh-mobile-menu {
		transition: none;
		clip-path: inset(0 0 0% 0);
	}
}