/**
 * HydroFyn Header - desktop (>= 1025 px)
 *
 * Tre raekker som i ejerens mockup: toplinje med USP'er, anmeldelsesbadges og
 * sprog; hovedraekke med logo, soegefelt, konto og kurv-chip; navigation med
 * "Tilbud" til hoejre. Under 1025 px vises Elementors egen mobil-header, og
 * denne er skjult.
 */

.hf-header,
.hf-nav {
	display: none;
}

.hf-header *,
.hf-nav * {
	box-sizing: border-box;
}

.hf-raekke {
	display: flex;
	align-items: center;
	width: 100%;
	max-width: var(--hf-header-bredde, 1425px);
	margin: 0 auto;
	padding: 0 20px;
}

/* ---- Sikkerhedsnet mod Elementors cache ----
   Datafilteret fjerner/skjuler skabelonens desktop-sektioner, men cachen kan
   servere en gammel rendering (CH-236). Body-klassen saettes af PHP paa hvert
   request. cd78bed findes kun paa desktop; bf0ab5a og afbdd95 vises ogsaa paa
   tablet/mobil og skjules derfor kun fra 1025 px. */
body.hf-header-aktiv .elementor-location-header .elementor-element-cd78bed {
	display: none !important;
}

@media (min-width: 1025px) {
	body.hf-header-aktiv .elementor-location-header .elementor-element-bf0ab5a,
	body.hf-header-aktiv .elementor-location-header .elementor-element-afbdd95,
	body.hf-header-aktiv .elementor-location-header .elementor-element-2aa6ffc,
	body.hf-header-aktiv .elementor-location-header .elementor-element-8795a5b,
	body.hf-header-aktiv .elementor-location-header .elementor-element-93d14a6 {
		display: none !important;
	}

	body.hf-header-aktiv .elementor-location-header {
		min-height: 0;
		padding: 0;
	}

	.hf-header {
		display: block;
		font-family: "Libre Franklin", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
		color: #fff;
	}

	.hf-nav {
		display: block;
		position: sticky;
		top: var(--wp-admin--admin-bar--height, 0px);
		z-index: 1000;
		font-family: "Libre Franklin", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	}
}

/* ---- Toplinje ---- */

.hf-top {
	background-color: var(--hf-primaer-dyb, #19232D);
	font-size: 13px;
	line-height: 1;
}

.hf-top .hf-raekke {
	justify-content: space-between;
	min-height: 34px;
	gap: 16px;
}

.hf-usp-linje {
	display: flex;
	align-items: center;
	gap: 22px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hf-usp-linje__punkt {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin: 0;
	padding: 0;
	list-style: none;
	color: #fff;
	white-space: nowrap;
}

.hf-usp-linje__punkt.is-fremhaevet {
	color: var(--hf-guld, #D1AD66);
	font-weight: 600;
}

/* Fluebenet tegnes med kant - ingen ikonfont. */
.hf-usp-linje__ok {
	display: inline-block;
	width: 6px;
	height: 10px;
	margin-top: -3px;
	border-right: 2px solid var(--hf-orangebrun, #C17443);
	border-bottom: 2px solid var(--hf-orangebrun, #C17443);
	transform: rotate(45deg);
}

.hf-top__hoejre {
	display: flex;
	align-items: center;
	gap: 18px;
}

.hf-badge {
	display: inline-flex;
	align-items: center;
	height: 26px;
	line-height: 0;
}

/* Temaets img-regler (height:auto, max-width) slaar en enkelt klasse; maalt
   2026-09-11: Google 69 px, Trustpilot 300 px. Derfor !important. */
.hf-badge__billede {
	height: 26px !important;
	max-height: 26px !important;
	width: auto !important;
	max-width: 120px !important;
	object-fit: contain;
}

.hf-sprog {
	position: relative;
	margin: 0;
	color: #fff;
}

.hf-sprog__knap {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 4px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	cursor: pointer;
	list-style: none;
	user-select: none;
}

.hf-sprog__knap::-webkit-details-marker {
	display: none;
}

.hf-sprog__knap::after {
	content: '';
	width: 5px;
	height: 5px;
	margin-left: 2px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg) translate(-1px, -1px);
}

.hf-sprog__panel {
	position: absolute;
	right: 0;
	top: 100%;
	z-index: 1100;
	min-width: 160px;
	margin-top: 4px;
	padding: 8px 0;
	border: 1px solid var(--hf-kant, #e7ecf1);
	border-radius: 10px;
	background-color: #fff;
	box-shadow: 0 10px 30px rgba(var(--hf-primaer-rgb, 27, 41, 57), .18);
	color: var(--hf-tekst, #16212F);
}

.hf-sprog__panel ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.hf-sprog__panel li {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* TranslatePress: det aktuelle sprog er forael, de andre ligger i .sub-menu.
   Panelet viser dem som een flad liste. */
.hf-sprog__panel .sub-menu {
	display: block;
	position: static;
	margin: 0;
	padding: 0;
	border: 0;
	box-shadow: none;
	list-style: none;
}

.hf-sprog__panel a {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	font-size: 13px;
	color: var(--hf-tekst, #16212F) !important;
	text-decoration: none !important;
	white-space: nowrap;
}

.hf-sprog__panel .current-language-menu-item > a {
	font-weight: 600;
}

.hf-sprog__panel a:hover,
.hf-sprog__panel a:focus {
	background-color: var(--hf-flade, #F4F5F6);
}

.hf-sprog__panel img {
	width: 18px;
	height: auto;
}

/* ---- Hovedraekke ---- */

.hf-hoved {
	background-color: var(--hf-primaer, #1B2939);
}

.hf-hoved .hf-raekke {
	min-height: 84px;
	gap: 28px;
}

.hf-logo {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
	flex: 0 0 auto;
}

.hf-logo a {
	display: block;
	line-height: 0;
}

/* Uden undertekst kan logoet fylde raekken: 72 px i en 84 px raekke. */
.hf-logo img {
	display: block;
	width: auto !important;
	height: 72px !important;
	max-height: 72px !important;
}

.hf-logo__tekst {
	font-size: 26px;
	font-weight: 900;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #fff;
	text-decoration: none;
}

/* Logotype-undertekst i orangebrun; 4,1:1 paa moerkeblaa er nok til et
   logo, ikke til loebende tekst. */
.hf-logo__under {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--hf-orangebrun, #C17443);
}

.hf-soeg-form {
	position: relative;
	display: flex;
	align-items: center;
	flex: 1 1 auto;
	/* 520, ikke 620: ejeren fandt feltet lidt for bredt (2026-09-11). */
	max-width: 520px;
	margin: 0;
}

/* Pillen i hoejre side af feltet - visuel, som i mockuppet. */
.hf-soeg-form__badge {
	position: absolute;
	right: 7px;
	top: 50%;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 34px;
	margin-top: -17px;
	padding: 0 12px;
	border-radius: 9px;
	background-color: var(--hf-flade, #F4F5F6);
	color: var(--hf-tekst, #16212F);
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
	pointer-events: none;
}

.hf-soeg-form__badge::after {
	content: '';
	width: 5px;
	height: 5px;
	margin-top: -3px;
	border-right: 1.5px solid var(--hf-tekst-svag, #5b6b7a);
	border-bottom: 1.5px solid var(--hf-tekst-svag, #5b6b7a);
	transform: rotate(45deg);
}

.hf-soeg-form__ikon {
	position: absolute;
	left: 16px;
	top: 50%;
	width: 16px;
	height: 16px;
	margin-top: -8px;
	pointer-events: none;
	background-color: var(--hf-tekst-svag, #5b6b7a);
	-webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

body.hf-header-aktiv .hf-soeg-form__felt {
	width: 100%;
	height: 48px;
	margin: 0;
	/* Plads til pillen i hoejre side. */
	padding: 0 170px 0 44px;
	border: 1px solid transparent;
	border-radius: 10px;
	background-color: #fff;
	color: var(--hf-tekst, #16212F);
	font-family: inherit;
	font-size: 15px;
	line-height: 1.2;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
}

body.hf-header-aktiv .hf-soeg-form__felt::placeholder {
	color: var(--hf-tekst-svag, #5b6b7a);
}

body.hf-header-aktiv .hf-soeg-form__felt:focus {
	outline: none;
	border-color: var(--hf-guld, #D1AD66);
	box-shadow: 0 0 0 3px rgba(209, 173, 102, .28);
}

/* Enter sender formularen; knappen findes for tastatur og skaermlaesere. */
body.hf-header-aktiv .hf-soeg-form__knap {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.hf-hoved__hoejre {
	display: flex;
	align-items: center;
	gap: 18px;
	margin-left: auto;
	flex: 0 0 auto;
}

.hf-konto {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 2px;
	color: #fff;
	text-decoration: none;
	text-align: right;
}

.hf-konto:hover .hf-konto__titel,
.hf-konto:focus .hf-konto__titel {
	text-decoration: underline;
}

.hf-konto__titel {
	font-size: 14px;
	font-weight: 600;
	color: #fff;
}

.hf-konto__under {
	font-size: 12px;
	color: rgba(255, 255, 255, .72);
}

.hf-kurv {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	min-height: 52px;
	padding: 8px 16px 8px 14px;
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: 12px;
	background-color: var(--hf-primaer-lys, #26374A);
	color: #fff;
	text-decoration: none;
	transition: background-color .15s ease;
}

.hf-kurv:hover,
.hf-kurv:focus {
	background-color: #2f4259;
	color: #fff;
	text-decoration: none;
}

.hf-kurv__ikon {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	color: #fff;
}

.hf-kurv__antal {
	position: absolute;
	top: -8px;
	right: -10px;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 999px;
	background-color: var(--hf-guld, #D1AD66);
	color: var(--hf-primaer, #1B2939);
	font-size: 11px;
	font-weight: 700;
	line-height: 18px;
	text-align: center;
}

.hf-kurv__tekst {
	display: flex;
	flex-direction: column;
	gap: 1px;
}

.hf-kurv__total {
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
	color: #fff;
}

.hf-kurv__total .woocommerce-Price-amount,
.hf-kurv__total .woocommerce-Price-currencySymbol {
	color: #fff;
	font-weight: 700;
}

.hf-kurv__note {
	font-size: 11px;
	line-height: 1.2;
	color: var(--hf-guld, #D1AD66);
}

/* ---- Navigation ---- */

.hf-nav {
	background-color: var(--hf-primaer-moerk, #11171F);
}

.hf-nav .hf-raekke {
	min-height: 50px;
	gap: 24px;
}

.hf-nav__liste {
	display: flex;
	align-items: center;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hf-nav__liste li {
	position: relative;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hf-nav__liste > li > a {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 16px 12px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #fff !important;
	text-decoration: none !important;
	white-space: nowrap;
}

.hf-nav__liste > li > a:hover,
.hf-nav__liste > li > a:focus,
.hf-nav__liste > li.current-menu-item > a,
.hf-nav__liste > li.current-menu-ancestor > a {
	color: var(--hf-guld, #D1AD66) !important;
}

.hf-nav__liste > li.menu-item-has-children > a::after {
	content: '';
	width: 5px;
	height: 5px;
	margin-top: -3px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg);
	opacity: .8;
}

.hf-nav__liste .sub-menu {
	position: absolute;
	left: 0;
	top: 100%;
	z-index: 1100;
	display: none;
	min-width: 230px;
	margin: 0;
	padding: 8px 0;
	border: 1px solid var(--hf-kant, #e7ecf1);
	border-radius: 0 0 10px 10px;
	background-color: #fff;
	box-shadow: 0 12px 30px rgba(var(--hf-primaer-rgb, 27, 41, 57), .18);
	list-style: none;
}

.hf-nav__liste > li:hover > .sub-menu,
.hf-nav__liste > li:focus-within > .sub-menu {
	display: block;
}

.hf-nav__liste .sub-menu a {
	display: block;
	padding: 9px 18px;
	font-size: 14px;
	font-weight: 500;
	color: var(--hf-tekst, #16212F);
	text-decoration: none;
	white-space: nowrap;
}

.hf-nav__liste .sub-menu a:hover,
.hf-nav__liste .sub-menu a:focus {
	background-color: var(--hf-flade, #F4F5F6);
	color: var(--hf-primaer, #1B2939);
}

/* Kittets globale a-farve slaar klassen (maalt: lyseblaa "Tilbud"). */
.hf-nav__tilbud {
	margin-left: auto;
	padding: 16px 4px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--hf-guld, #D1AD66) !important;
	text-decoration: none !important;
	white-space: nowrap;
}

.hf-nav__tilbud:hover,
.hf-nav__tilbud:focus {
	color: #fff !important;
}

/* Sprogvaelgerens menu-item fra TranslatePress kan dukke op i hovedmenuen,
   hvis ejeren har lagt den der; den hoerer til toplinjen. */
.hf-nav__liste > li.trp-language-switcher-container {
	display: none;
}