/**
 * HydroFyn Filters
 *
 * Farverne er sitets egne: blaa #436987 og groen #2b7553. Udseendet er
 * bevidst mere nedtonet end BeRockets: ingen vandrette streger under hver
 * titel, ingen store plus- og minusikoner, og en nulstil-knap der ligner
 * resten af sitet. Ejeren bad om plads til stoerre produktbilleder, og den
 * plads skal komme fra venstre kolonne.
 */

.hf-filters {
	font-size: 14px;
	line-height: 1.4;
	color: #1f2d3a;
}

/* WordPress' egen klasse findes ikke i alle temaer. */
.hf-filters .screen-reader-text {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* ---- Gruppe ---- */

.hf-filters__gruppe {
	margin: 0;
	padding: 0;
	border: 0;
	border-bottom: 1px solid #e7ecf1;
}

.hf-filters__gruppe:last-of-type {
	border-bottom: 0;
}

.hf-filters__hoved {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 10px 2px;
	cursor: pointer;
	list-style: none;
	user-select: none;
}

/* Browserens egen trekant fjernes; vi tegner selv en diskret pil. */
.hf-filters__hoved::-webkit-details-marker {
	display: none;
}

.hf-filters__hoved::marker {
	content: '';
}

.hf-filters__hoved:hover .hf-filters__etiket {
	color: #436987;
}

.hf-filters__hoved:focus-visible {
	outline: 2px solid #436987;
	outline-offset: 2px;
}

.hf-filters__etiket {
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .01em;
}

/* Pilen er 7 px og tegnet med kant frem for et ikonfont-glyf. BeRocket
   indlaeste en komplet Font Awesome for at vise et plus og et minus. */
.hf-filters__pil {
	flex: 0 0 auto;
	width: 7px;
	height: 7px;
	margin-right: 3px;
	border-right: 1.5px solid #7d8b99;
	border-bottom: 1.5px solid #7d8b99;
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform .15s ease;
}

.hf-filters__gruppe[open] > .hf-filters__hoved .hf-filters__pil {
	transform: rotate(225deg) translate(-2px, -2px);
}

/* ---- Valgene ---- */

.hf-filters__liste {
	margin: 0 0 8px;
	padding: 0;
	list-style: none;
}

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

.hf-filters__opt {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 4px 2px;
	color: #1f2d3a !important;
	text-decoration: none !important;
	border-radius: 4px;
}

.hf-filters__opt:hover,
.hf-filters__opt:focus {
	background-color: #f1f5f8;
	color: #1f2d3a !important;
}

.hf-filters__opt:focus-visible {
	outline: 2px solid #436987;
	outline-offset: 1px;
}

/* Afkrydsningsfeltet er tegnet, ikke et rigtigt input: valget er et link, saa
   det ogsaa virker uden JavaScript og kan deles som en URL. */
.hf-filters__boks {
	flex: 0 0 auto;
	position: relative;
	width: 15px;
	height: 15px;
	border: 1.5px solid #c1ccd6;
	border-radius: 3px;
	background-color: #fff;
	transition: border-color .15s ease, background-color .15s ease;
}

.hf-filters__opt:hover .hf-filters__boks {
	border-color: #436987;
}

.hf-filters__navn {
	flex: 1 1 auto;
	min-width: 0;
}

.hf-filters__antal {
	flex: 0 0 auto;
	font-size: 12px;
	color: #7d8b99;
	font-variant-numeric: tabular-nums;
}

/* ---- Valgt ---- */

.hf-filters__opt.is-chosen {
	font-weight: 600;
}

.hf-filters__opt.is-chosen .hf-filters__boks {
	border-color: #436987;
	background-color: #436987;
}

.hf-filters__opt.is-chosen .hf-filters__boks::after {
	content: '';
	position: absolute;
	left: 4px;
	top: 1px;
	width: 4px;
	height: 8px;
	border-right: 2px solid #fff;
	border-bottom: 2px solid #fff;
	transform: rotate(45deg);
}

.hf-filters__opt.is-chosen .hf-filters__antal {
	color: #436987;
}

/* ---- Tomt valg ----
   Vises stadig, saa listen ikke hopper, men er tydeligt uden for raekkevidde. */

.hf-filters__opt.is-empty {
	opacity: .38;
	cursor: not-allowed;
}

.hf-filters__opt.is-empty:hover {
	background-color: transparent;
}

/* ---- Nulstil ---- */

.hf-filters__reset {
	display: inline-block;
	margin: 12px 0 0;
	padding: 7px 14px;
	border: 1px solid #c1ccd6;
	border-radius: 6px;
	background-color: #fff;
	color: #436987 !important;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none !important;
	transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}

.hf-filters__reset:hover,
.hf-filters__reset:focus {
	border-color: #436987;
	background-color: #436987;
	color: #fff !important;
}

/* ---- Mens der hentes ----
   Gitteret tones ned frem for at forsvinde, saa siden ikke hopper i hoejden. */

.hf-gitter--indlaeser {
	opacity: .35;
	pointer-events: none;
	transition: opacity .12s ease;
}

.hf-filters--indlaeser {
	pointer-events: none;
}

.hf-gitter-vaert {
	position: relative;
}

/* Overlejringen daekker hele gitteret, men selve kortet klaeber i
   viewporten. Gitteret er over 5.000 px hoejt, saa et centreret element ville
   ellers ligge uden for skaermen, naar kunden har rullet ned. */
.hf-loader {
	position: absolute;
	inset: 0;
	z-index: 5;
	display: flex;
	justify-content: center;
	pointer-events: none;
}

.hf-loader__indre {
	position: sticky;
	top: 38vh;
	align-self: flex-start;
	margin-top: 28px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 16px 24px 14px;
	border-radius: 14px;
	background-color: rgba(255, 255, 255, .94);
	box-shadow: 0 8px 28px rgba(31, 45, 58, .16);
}

.hf-loader__tekst {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .02em;
	color: #5b6b7a;
}

.hf-loader__ikon {
	width: 68px;
	height: 68px;
	overflow: visible;
}

/* ---- Froet der spirer ----
   Et loop paa 1,8 s: froet dukker op, stilken skyder i vejret, de to blade
   folder sig ud, og det hele trekker sig sammen igen. Bevidst blodt frem for
   hurtigt - det skal berolige, ikke stresse. */

.hf-loader__jord {
	fill: none;
	stroke: #c1ccd6;
	stroke-width: 2;
	stroke-linecap: round;
}

.hf-loader__fro {
	fill: #8a6a4a;
	transform-box: view-box;
	transform-origin: 32px 47px;
	animation: hf-spire-fro 1.8s ease-in-out infinite;
}

/* Stilken tegnes med en stiplet linje, hvis mellemrum er lige saa langt som
   selve stregen. Ved at flytte mellemrummet vokser stregen frem. */
.hf-loader__stilk {
	fill: none;
	stroke: #2b7553;
	stroke-width: 3;
	stroke-linecap: round;
	stroke-dasharray: 30;
	stroke-dashoffset: 30;
	animation: hf-spire-stilk 1.8s ease-in-out infinite;
}

.hf-loader__blad {
	fill: #2b7553;
	transform-box: view-box;
	transform-origin: 32px 33px;
	animation: hf-spire-blad 1.8s ease-in-out infinite;
}

.hf-loader__blad--venstre {
	transform-origin: 32px 34px;
	animation-delay: .1s;
}

.hf-loader__blad--hoejre {
	fill: #35906a;
	transform-origin: 32px 28px;
	animation-delay: .26s;
}

@keyframes hf-spire-fro {
	0%        { transform: scale(.7);  opacity: 0; }
	12%       { transform: scale(1);   opacity: 1; }
	78%       { transform: scale(1);   opacity: 1; }
	100%      { transform: scale(.7);  opacity: 0; }
}

@keyframes hf-spire-stilk {
	0%, 10%   { stroke-dashoffset: 30; }
	50%       { stroke-dashoffset: 0; }
	80%       { stroke-dashoffset: 0; }
	100%      { stroke-dashoffset: 30; }
}

@keyframes hf-spire-blad {
	0%, 34%   { transform: scale(0) rotate(-8deg); opacity: 0; }
	60%       { transform: scale(1) rotate(0deg);  opacity: 1; }
	80%       { transform: scale(1) rotate(0deg);  opacity: 1; }
	100%      { transform: scale(0) rotate(-8deg); opacity: 0; }
}

/* Uden bevaegelse skal der stadig vaere et tydeligt tegn paa, at der sker
   noget - blot uden noget der vokser og forsvinder. */
@media (prefers-reduced-motion: reduce) {
	.hf-filters__pil,
	.hf-filters__boks,
	.hf-filters__reset,
	.hf-gitter--indlaeser {
		transition: none;
	}

	.hf-loader__fro,
	.hf-loader__blad {
		animation: none;
		opacity: 1;
		transform: none;
	}

	.hf-loader__stilk {
		animation: none;
		stroke-dashoffset: 0;
	}

	.hf-loader__indre {
		animation: hf-loader-puls 1.4s ease-in-out infinite;
	}

	@keyframes hf-loader-puls {
		0%, 100% { opacity: 1; }
		50%      { opacity: .6; }
	}
}