/**
 * Lugnalandet – diskret jultema på julbordsfliken i huvudmenyn.
 *
 * Egen CSS: temats style.css är en kompilerad Tailwind-bundle och innehåller
 * inga röda toner. Färgerna är dämpade med flit – fliken ska läsas som en
 * säsongsmarkering, inte som en knapp som konkurrerar med "Skicka förfrågan".
 */

.nav-link.nav-jul,
.mobile-nav-link.nav-jul {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	border-radius: 999px;
	border: 1px solid hsl(0 52% 44% / 0.30);
	background: hsl(0 62% 48% / 0.07);
	color: hsl(0 58% 40%);
}

.nav-link.nav-jul:hover,
.nav-link.nav-jul:focus-visible,
.mobile-nav-link.nav-jul:hover,
.mobile-nav-link.nav-jul:focus-visible {
	background: hsl(0 62% 48% / 0.13);
	border-color: hsl(0 52% 46% / 0.5);
	color: hsl(0 60% 34%);
}

.nav-link.nav-jul.active,
.mobile-nav-link.nav-jul.active {
	background: hsl(0 62% 48% / 0.15);
	border-color: hsl(0 52% 46% / 0.55);
	color: hsl(0 60% 34%);
}

/* Mörkt läge: samma dämpning, ljusare rött mot den mörka listen. */
.dark .nav-link.nav-jul,
.dark .mobile-nav-link.nav-jul {
	border-color: hsl(0 50% 58% / 0.32);
	background: hsl(0 60% 55% / 0.10);
	color: hsl(0 58% 74%);
}

.dark .nav-link.nav-jul:hover,
.dark .nav-link.nav-jul:focus-visible,
.dark .nav-link.nav-jul.active,
.dark .mobile-nav-link.nav-jul:hover,
.dark .mobile-nav-link.nav-jul:focus-visible,
.dark .mobile-nav-link.nav-jul.active {
	background: hsl(0 60% 55% / 0.18);
	border-color: hsl(0 50% 60% / 0.5);
	color: hsl(0 60% 82%);
}

.mobile-nav-link.nav-jul {
	width: auto;
}