/* ==================================================
   HEADER MENU
   File: assets/css/header-menu.css
   Purpose: Main navigation, sticky menu row, dropdown arrows, submenu styling.
================================================== */

/* ==================================================
   1. MAIN MENU AREA
================================================== */

.ct-header [data-id="menu"] {
	flex: 1 1 auto;
	min-width: 0;
	width: 100%;
}

.ct-header [data-id="menu"] nav {
	width: 100%;
}

.ct-header [data-id="menu"] .menu {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: nowrap;
	gap: 42px;
	width: 100%;
}

.ct-header [data-id="menu"] .menu > li {
	position: relative;
	flex: 0 1 auto;
}

/* Invisible bridge between parent and submenu */
.ct-header [data-id="menu"] .menu > li::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	height: calc(14px + 18px);
}

/* ==================================================
   2. MAIN LINKS
================================================== */

.ct-header [data-id="menu"] .menu > li > a {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 8px !important;
	padding: 10px 0 !important;
	color: #ffffff !important;
	opacity: 1 !important;
	font-size: 16px !important;
	font-weight: 800 !important;
	letter-spacing: 0;
	line-height: 1.15;
	white-space: nowrap;
	text-transform: none;
	text-shadow: 0 1px 8px rgba(0, 0, 0, 0.65);
	border-radius: 8px;
	transition:
		color 0.18s ease,
		background-color 0.18s ease,
		box-shadow 0.18s ease,
		text-shadow 0.18s ease;
}

/* Disable default underline under main menu items */
.ct-header [data-id="menu"] .menu > li > a::after {
	display: none !important;
	content: none !important;
}

/* Hover state only - do not keep clicked dropdown visually active */
.ct-header [data-id="menu"] .menu > li:hover > a {
	color: #ffffff !important;
	background: rgba(255, 0, 0, 0.10) !important;
	box-shadow:
		0 0 14px rgba(255, 0, 0, 0.16),
		inset 0 0 0 1px rgba(255, 0, 0, 0.18);
	text-shadow:
		0 1px 8px rgba(0, 0, 0, 0.75),
		0 0 10px rgba(255, 0, 0, 0.25);
}

/* Active/current state - only exact current menu item */
.ct-header [data-id="menu"] .menu > li.current-menu-item > a,
.ct-header [data-id="menu"] .menu > li.current_page_item > a {
	color: #ffffff !important;
	background:
		linear-gradient(
			180deg,
			rgba(255, 0, 0, 0.95) 0%,
			rgba(190, 0, 0, 0.95) 100%
		) !important;
	padding: 10px 16px !important;
	border-radius: 8px;
	box-shadow:
		0 0 18px rgba(255, 0, 0, 0.24),
		inset 0 1px 0 rgba(255, 255, 255, 0.14);
	text-shadow: 0 1px 6px rgba(0, 0, 0, 0.65);
}

/* Prevent parent/ancestor categories from staying red */
.ct-header [data-id="menu"] .menu > li.current-menu-parent > a,
.ct-header [data-id="menu"] .menu > li.current-menu-ancestor > a,
.ct-header [data-id="menu"] .menu > li.current_page_parent > a,
.ct-header [data-id="menu"] .menu > li.current_page_ancestor > a {
	background: transparent !important;
	color: #ffffff !important;
	box-shadow: none !important;
	padding: 10px 0 !important;
}

/* ==================================================
   3. MAIN MENU DROPDOWN ARROWS
================================================== */

.ct-header [data-id="menu"] .ct-toggle-dropdown-desktop {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 14px !important;
	min-width: 14px !important;
	height: 14px !important;
	min-height: 14px !important;
	margin-left: 4px !important;
	padding: 0 !important;
	line-height: 1;
	vertical-align: middle;
	color: #ff0000 !important;
}

.ct-header [data-id="menu"] .ct-toggle-dropdown-desktop .ct-icon,
.ct-header [data-id="menu"] .ct-toggle-dropdown-desktop svg {
	width: 9px !important;
	min-width: 9px !important;
	height: 9px !important;
	min-height: 9px !important;
	color: #ff0000 !important;
	fill: #ff0000 !important;
	stroke: #ff0000 !important;
	stroke-width: 2.4px;
}

/* Extra fallback for Blocksy icons */
.ct-header [data-id="menu"] .menu > li > a .ct-icon,
.ct-header [data-id="menu"] .menu > li > a svg {
	color: #ff0000 !important;
	fill: #ff0000 !important;
	stroke: #ff0000 !important;
}

/* Keep arrow white only on exact active red item */
.ct-header [data-id="menu"] .menu > li.current-menu-item > a .ct-icon,
.ct-header [data-id="menu"] .menu > li.current_page_item > a .ct-icon,
.ct-header [data-id="menu"] .menu > li.current-menu-item > a svg,
.ct-header [data-id="menu"] .menu > li.current_page_item > a svg {
	color: #ffffff !important;
	fill: #ffffff !important;
	stroke: #ffffff !important;
}

/* Keep arrow red on parent/ancestor items */
.ct-header [data-id="menu"] .menu > li.current-menu-parent > a .ct-icon,
.ct-header [data-id="menu"] .menu > li.current-menu-ancestor > a .ct-icon,
.ct-header [data-id="menu"] .menu > li.current_page_parent > a .ct-icon,
.ct-header [data-id="menu"] .menu > li.current_page_ancestor > a .ct-icon,
.ct-header [data-id="menu"] .menu > li.current-menu-parent > a svg,
.ct-header [data-id="menu"] .menu > li.current-menu-ancestor > a svg,
.ct-header [data-id="menu"] .menu > li.current_page_parent > a svg,
.ct-header [data-id="menu"] .menu > li.current_page_ancestor > a svg {
	color: #ff0000 !important;
	fill: #ff0000 !important;
	stroke: #ff0000 !important;
}

/* ==================================================
   4. MENU ROW BACKGROUND
================================================== */

.ct-header [data-row="middle"],
.ct-header [data-row="bottom"] {
	min-height: 72px !important;
	background: linear-gradient(180deg, #0f1018 0%, #08090e 100%) !important;
	border-top: 1px solid rgba(255, 0, 0, 0.45) !important;
	border-bottom: 1px solid rgba(255, 0, 0, 0.65) !important;
	box-shadow: 0 10px 26px rgba(0, 0, 0, 0.32) !important;
}

.ct-header [data-row="middle"] .ct-container,
.ct-header [data-row="bottom"] .ct-container,
.ct-header [data-row="middle"] .ct-container-fluid,
.ct-header [data-row="bottom"] .ct-container-fluid {
	min-height: 72px !important;
}

/* ==================================================
   5. SUBMENU PANEL
================================================== */

.ct-header [data-id="menu"] .menu > li > .sub-menu {
	position: absolute;
	top: calc(100% + 14px);
	left: 50%;
	z-index: 99999;

	display: block;
	width: max-content;
	min-width: 620px;
	max-width: min(90vw, 860px);
	max-height: 70vh;

	padding: 12px 0;
	overflow-y: auto;
	overflow-x: auto;
	box-sizing: border-box;

	background: #08090e !important;
	border: 1px solid rgba(255, 0, 0, 0.50) !important;
	border-top: 2px solid #ff0000 !important;
	border-radius: 10px;
	box-shadow:
		0 18px 40px rgba(0, 0, 0, 0.58),
		0 0 22px rgba(255, 0, 0, 0.16);

	columns: 2;
	column-gap: 30px;

	opacity: 0;
	pointer-events: none;
	transform: translateX(-50%) translateY(6px);
	transition:
		opacity 0.18s ease,
		transform 0.18s ease,
		top 0.28s ease;
}

/* Normal centered show */
.ct-header [data-id="menu"] .menu > li:hover > .sub-menu,
.ct-header [data-id="menu"] .menu > li:focus-within > .sub-menu {
	opacity: 1;
	pointer-events: initial;
	transform: translateX(-50%) translateY(0);
}

/* ==================================================
   6. SUBMENU ITEMS
================================================== */

.ct-header [data-id="menu"] .menu .sub-menu li {
	break-inside: avoid;
	page-break-inside: avoid;
	border-color: rgba(255, 255, 255, 0.10);
}

.ct-header [data-id="menu"] .menu .sub-menu li > a {
	display: block;
	padding: 10px 18px;
	color: #ffffff !important;
	opacity: 1 !important;
	font-size: 15px !important;
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
	white-space: nowrap;
	word-break: normal;
	overflow-wrap: normal;
	transition:
		background-color 0.18s ease,
		color 0.18s ease;
}

.ct-header [data-id="menu"] .menu .sub-menu li > a:hover,
.ct-header [data-id="menu"] .menu .sub-menu li > a:focus {
	color: #ff2b2b !important;
	background: rgba(255, 0, 0, 0.12) !important;
}

.ct-header [data-id="menu"] .menu .sub-menu li.current-menu-item > a {
	color: #ff2b2b !important;
	background-color: rgba(255, 0, 0, 0.16) !important;
	font-weight: 700;
}

/* ==================================================
   7. SUBMENU POSITIONING
================================================== */

.ct-header [data-id="menu"] .menu > li:nth-child(1) > .sub-menu,
.ct-header [data-id="menu"] .menu > li:nth-child(2) > .sub-menu {
	left: 0;
	right: auto;
	transform: translateY(6px);
}

.ct-header [data-id="menu"] .menu > li:nth-child(1) > .sub-menu {
	left: 18px;
}

.ct-header [data-id="menu"] .menu > li:nth-child(2) > .sub-menu {
	left: 8px;
}

.ct-header [data-id="menu"] .menu > li:nth-child(1):hover > .sub-menu,
.ct-header [data-id="menu"] .menu > li:nth-child(2):hover > .sub-menu,
.ct-header [data-id="menu"] .menu > li:nth-child(1):focus-within > .sub-menu,
.ct-header [data-id="menu"] .menu > li:nth-child(2):focus-within > .sub-menu {
	transform: translateY(0);
}

.ct-header [data-id="menu"] .menu > li:nth-child(3) > .sub-menu,
.ct-header [data-id="menu"] .menu > li:nth-child(4) > .sub-menu,
.ct-header [data-id="menu"] .menu > li:nth-child(5) > .sub-menu {
	left: 50%;
	right: auto;
	transform: translateX(-50%) translateY(6px);
}

.ct-header [data-id="menu"] .menu > li:nth-child(3):hover > .sub-menu,
.ct-header [data-id="menu"] .menu > li:nth-child(4):hover > .sub-menu,
.ct-header [data-id="menu"] .menu > li:nth-child(5):hover > .sub-menu,
.ct-header [data-id="menu"] .menu > li:nth-child(3):focus-within > .sub-menu,
.ct-header [data-id="menu"] .menu > li:nth-child(4):focus-within > .sub-menu,
.ct-header [data-id="menu"] .menu > li:nth-child(5):focus-within > .sub-menu {
	transform: translateX(-50%) translateY(0);
}

.ct-header [data-id="menu"] .menu > li:nth-last-child(-n+3) > .sub-menu {
	left: auto;
	right: 0;
	min-width: 520px;
	max-width: min(90vw, 720px);
	transform: translateY(6px);
}

.ct-header [data-id="menu"] .menu > li:nth-last-child(-n+3):hover > .sub-menu,
.ct-header [data-id="menu"] .menu > li:nth-last-child(-n+3):focus-within > .sub-menu {
	transform: translateY(0);
}

/* ==================================================
   8. STICKY MENU ONLY
================================================== */

.ct-sticky-container {
	height: auto !important;
	background: transparent !important;
}

.ct-header[data-sticky*="yes"] [data-row="top"] {
	display: none !important;
}

.ct-header[data-sticky*="yes"] [data-row="middle"],
.ct-header[data-sticky*="yes"] [data-row="bottom"],
.ct-sticky-container [data-row="middle"],
.ct-sticky-container [data-row="bottom"] {
	min-height: 68px !important;
	background: linear-gradient(180deg, #0f1018 0%, #08090e 100%) !important;
	border-top: 0 !important;
	border-bottom: 1px solid rgba(255, 23, 23, 0.55) !important;
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.48) !important;
}

.ct-header[data-sticky*="yes"] [data-row="middle"] .ct-container,
.ct-header[data-sticky*="yes"] [data-row="bottom"] .ct-container,
.ct-header[data-sticky*="yes"] [data-row="middle"] .ct-container-fluid,
.ct-header[data-sticky*="yes"] [data-row="bottom"] .ct-container-fluid,
.ct-sticky-container [data-row="middle"] .ct-container,
.ct-sticky-container [data-row="bottom"] .ct-container,
.ct-sticky-container [data-row="middle"] .ct-container-fluid,
.ct-sticky-container [data-row="bottom"] .ct-container-fluid {
	min-height: 68px !important;
}

.ct-header[data-sticky*="yes"] .menu > li > a,
.ct-sticky-container [data-id="menu"] .menu > li > a {
	font-size: 16px !important;
	color: #ffffff !important;
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.75) !important;
	opacity: 1 !important;
}

/* Sticky submenu */
.ct-header[data-sticky*="yes"] [data-id="menu"] .menu > li > .sub-menu,
.ct-sticky-container [data-id="menu"] .menu > li > .sub-menu {
	background: #090a0e !important;
	border: 1px solid rgba(255, 23, 23, 0.55) !important;
	border-top: 2px solid #ff0000 !important;
	box-shadow: 0 24px 48px rgba(0, 0, 0, 0.75) !important;
	z-index: 99999 !important;
}

/* ==================================================
   9. RESPONSIVE
================================================== */

@media (max-width: 1360px) {
	.ct-header [data-id="menu"] .menu {
		gap: 36px;
	}

	.ct-header [data-id="menu"] .menu > li > a,
	.ct-header[data-sticky*="yes"] .menu > li > a,
	.ct-sticky-container [data-id="menu"] .menu > li > a {
		font-size: 16px !important;
	}

	.ct-header [data-id="menu"] .menu > li:nth-child(1) > .sub-menu {
		left: 12px;
		max-width: min(92vw, 820px);
	}

	.ct-header [data-id="menu"] .menu > li:nth-child(2) > .sub-menu {
		left: 6px;
		max-width: min(92vw, 820px);
	}
}

@media (max-width: 1200px) {
	.ct-header [data-id="menu"] .menu {
		gap: 28px;
	}

	.ct-header [data-id="menu"] .menu > li > a,
	.ct-header[data-sticky*="yes"] .menu > li > a,
	.ct-sticky-container [data-id="menu"] .menu > li > a {
		font-size: 16px !important;
	}
}

@media (max-width: 999px) {
	.ct-header [data-id="menu"] .menu {
		display: block;
	}

	.ct-header [data-id="menu"] .menu > li > a {
		font-size: 16px !important;
		padding-bottom: 14px !important;
	}

	.ct-header [data-id="menu"] .menu > li > a::after {
		display: none !important;
		content: none !important;
	}

	.ct-header [data-id="menu"] .menu > li > .sub-menu {
		position: static;
		min-width: 0;
		max-width: 100%;
		columns: 1;
		transform: none;
		opacity: 1;
		pointer-events: initial;
	}
}

/* ==================================================
   10. FINAL VISUAL CONSISTENCY FIX
   File: assets/css/header-menu.css
   Purpose: Keep all main menu items visually consistent and style only the real active item.
================================================== */

/* Force same visual base for all main menu items */
.ct-header [data-id="menu"] .menu > li > a,
.ct-header[data-sticky*="yes"] .menu > li > a,
.ct-sticky-container [data-id="menu"] .menu > li > a {
	font-size: 16px !important;
	font-weight: 800 !important;
	padding: 10px 0 !important;
	background: transparent !important;
	background-image: none !important;
	box-shadow: none !important;
	color: #ffffff !important;
	border-radius: 8px !important;
	text-shadow: 0 1px 8px rgba(0, 0, 0, 0.65) !important;
}

/* Remove Blocksy underline/top-line pseudo indicators from main menu links */
.ct-header [data-id="menu"] .menu > li > a::before,
.ct-header [data-id="menu"] .menu > li > a::after {
	display: none !important;
	content: none !important;
}

/* Do not style parent/ancestor categories as active */
.ct-header [data-id="menu"] .menu > li.current-menu-parent > a,
.ct-header [data-id="menu"] .menu > li.current-menu-ancestor > a,
.ct-header [data-id="menu"] .menu > li.current_page_parent > a,
.ct-header [data-id="menu"] .menu > li.current_page_ancestor > a {
	background: transparent !important;
	background-image: none !important;
	color: #ffffff !important;
	box-shadow: none !important;
	padding: 10px 0 !important;
}

/* Active category red box */
.ct-header [data-id="menu"] .menu > li.current-menu-item > a,
.ct-header [data-id="menu"] .menu > li.current_page_item > a {
	background:
		linear-gradient(
			180deg,
			rgba(255, 0, 0, 0.95) 0%,
			rgba(190, 0, 0, 0.95) 100%
		) !important;
	background-image:
		linear-gradient(
			180deg,
			rgba(255, 0, 0, 0.95) 0%,
			rgba(190, 0, 0, 0.95) 100%
		) !important;
	color: #ffffff !important;
	padding: 10px 16px !important;
	border-radius: 8px !important;
	box-shadow:
		0 0 18px rgba(255, 0, 0, 0.24),
		inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
}

/* Keep Anabolika Tabletten active only on its own category */
body.tax-product_cat.term-anabolika-tabletten .ct-header [data-id="menu"] .menu > li.menu-item-14324 > a {
	background:
		linear-gradient(
			180deg,
			rgba(255, 0, 0, 0.95) 0%,
			rgba(190, 0, 0, 0.95) 100%
		) !important;
	background-image:
		linear-gradient(
			180deg,
			rgba(255, 0, 0, 0.95) 0%,
			rgba(190, 0, 0, 0.95) 100%
		) !important;
	color: #ffffff !important;
	padding: 10px 16px !important;
	border-radius: 8px !important;
	box-shadow:
		0 0 18px rgba(255, 0, 0, 0.24),
		inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
}

/* Keep hover effect for non-active menu items - hover only */
.ct-header [data-id="menu"] .menu > li:not(.current-menu-item):not(.current_page_item):hover > a {
	background: rgba(255, 0, 0, 0.10) !important;
	background-image: none !important;
	color: #ffffff !important;
	box-shadow:
		0 0 14px rgba(255, 0, 0, 0.16),
		inset 0 0 0 1px rgba(255, 0, 0, 0.18) !important;
}


/* Remove stuck focus state after dropdown click */
.ct-header [data-id="menu"] .menu > li:not(.current-menu-item):not(.current_page_item):not(:hover):focus-within > a {
	background: transparent !important;
	background-image: none !important;
	color: #ffffff !important;
	box-shadow: none !important;
	padding: 10px 0 !important;
	border-radius: 8px !important;
	text-shadow: 0 1px 8px rgba(0, 0, 0, 0.65) !important;
}

/* Keep dropdown arrows red on normal/parent items */
.ct-header [data-id="menu"] .menu > li > a .ct-icon,
.ct-header [data-id="menu"] .menu > li > a svg {
	color: #ff0000 !important;
	fill: #ff0000 !important;
	stroke: #ff0000 !important;
}

/* Keep dropdown arrows white on exact active items */
.ct-header [data-id="menu"] .menu > li.current-menu-item > a .ct-icon,
.ct-header [data-id="menu"] .menu > li.current_page_item > a .ct-icon,
.ct-header [data-id="menu"] .menu > li.current-menu-item > a svg,
.ct-header [data-id="menu"] .menu > li.current_page_item > a svg {
	color: #ffffff !important;
	fill: #ffffff !important;
	stroke: #ffffff !important;
}


/* Safety reset: Anabolika Tabletten must look normal outside its own category */
body:not(.home):not(.term-anabolika-tabletten) .ct-header [data-id="menu"] .menu > li.menu-item-14324:not(:hover) > a {
	background: transparent !important;
	background-image: none !important;
	color: #ffffff !important;
	box-shadow: none !important;
	padding: 10px 0 !important;
	border-radius: 8px !important;
}