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

.HoverNavigation {
	--color-link: var(--color-text);
}

.HoverNavigation a {
	display: flex;
	padding: .5rem 1rem;
	text-decoration: none;
	transition-duration: var(--transition-fast);
	text-align: left;
}

.HoverNavigation > ul > li > a {
	align-items: center;
	border-radius: var(--border-radius);
	font-weight: bold;
	padding: 1rem;
}

.HoverNavigation > ul > li:hover > a,
.HoverNavigation > ul > li:focus-within > a {
	background-color: var(--background-color-shade-1);
}

.HoverNavigation ul {
	list-style: none;
	margin: 0 -1rem;
	padding: 0;
}

.NavigationBar .HoverNavigation ul {
	text-align: center;
}

.HoverNavigation li {
	align-items: center;
	display: inline-flex;
	position: relative;
}

.HoverNavigation li ul {
	background-color: var(--background-color);
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius);
	min-width: 160px;
	max-width: 210px;
	margin: 0;
	opacity: 0;
	position: absolute;
	top: 100%;
	transition-duration: var(--transition-fast);
	visibility: hidden;
	z-index: 1000;
}

.HoverNavigation li li {
	display: flex;
}

.HoverNavigation li li ul {
	box-shadow: -2px 0 4px rgba(0,0,0, .05);
	left: calc(100% - .5rem);
	position: absolute;
	top: -1px;
	width: fit-content;
}

.HoverNavigation li:hover > ul {
	opacity: 1;
	visibility: visible;
}

.HoverNavigation-Right ul ul {
	left: auto;
	right: 0;
}

.HoverNavigation li li a {
	align-items: baseline;
	display: flex;
	flex: 1;
	gap: 1rem;
	justify-content: space-between;
}

.HoverNavigation li li:first-child > a {
	border-top-left-radius: var(--border-radius);
	border-top-right-radius: var(--border-radius);
}

.HoverNavigation li li:last-child > a {
	border-bottom-left-radius: var(--border-radius);
	border-bottom-right-radius: var(--border-radius);
}

.HoverNavigation li li:not(:last-child) > a {
	border-bottom: 1px solid var(--border-color);
}

.HoverNavigation .Current > a {
	color: var(--color-text-accent);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 5px;
}

.HoverNavigation li li.Current > a {
	text-decoration: none
}

.HoverNavigation li .HasSubCategories > a:after {
	font-family: var(--fa-style-family);
	font-size: var(--font-size-small);
	content: "\f105";
	display: flex;
	text-align: right;
}

.HoverNavigation li.HasSubCategories:not(:has(> ul)) > a:after {
	content: none; /* hide arrow when no dropdown is rendered (e.g. level limit) */
}

@media screen and (max-width: 1280px) {
	.HoverNavigation > ul > li > a {
		padding-block: .5rem;
	}
}

/*------------------------------------------------------------------------------*/
/* Keyboard Navigation Support
/*------------------------------------------------------------------------------*/

.CategoryShowAll {
	text-decoration: underline;
}

[data-navigation-hover-kb-support] li:not(.Open:focus-within) .CategoryShowAll {
	display: none;
}

.HoverNavigation [data-navigation-hover-kb-support] li.Open:focus-within > ul {
	opacity: 1;
	visibility: visible;
}
/*------------------------------------------------------------------------------*/
/* Meganavigaatio Lisävarusteet-kategorialle – tasajaolla */
/*------------------------------------------------------------------------------*/

.HoverNavigation li.CategoryID-382 {
  position: static !important;
}

#Categories {
  --nav-height: calc(29.41px + 2rem);
}

@media screen and (max-width: 1280px) {
  #Categories {
    --nav-height: 40px;
  }
}

.HoverNavigation li.CategoryID-382 > ul {
  position: absolute !important;
  top: var(--nav-height) !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 600px !important;
  min-width: unset !important;
  max-width: unset !important;

  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0 !important;
  z-index: 2000 !important;
}

/* Tasan jaetut sarakkeet */
.HoverNavigation li.CategoryID-382 > ul > li {
  flex: 0 0 50% !important;  /* kaksi saraketta, 50% leveys */
  box-sizing: border-box;
}

/* Näytä hoverilla */
.HoverNavigation li.CategoryID-382:hover > ul {
  opacity: 1 !important;
  visibility: visible !important;
}

/*------------------------------------------------------------------------------*/
/* Alavalikoiden avautumissuunta Lisävarusteiden megavalikossa */
/*------------------------------------------------------------------------------*/

/* Valitaan vain Lisävarusteet (ID 382) > megavalikon <ul> sisällä olevat <li> */
/* Ensimmäinen sarake: avautuminen vasemmalle */
.HoverNavigation li.CategoryID-382 > ul > li:nth-child(even) > ul {
  left: auto !important;
  right: 100% !important;  /* avautuu vasemmalle */
}

/* Toinen sarake ja muut parilliset: avautuminen oikealle (oletus) */
.HoverNavigation li.CategoryID-382 > ul > li:nth-child(odd) > ul {
  left: 100% !important;
  right: auto !important; /* avautuu oikealle */
}