/**
 * Desktop mega menu for the "Toate produsele" dropdown (Blocksy header item "menu", #header-menu-1).
 *
 * Structure (plain WordPress menu, no extra markup):
 *   root item > .sub-menu            = green category list ("rail")
 *   rail item > .sub-menu            = white panel with the subcategories ("pane")
 *   pane item > .sub-menu            = third level, always open, indented
 *   rail item with class dsfw-mega-card = red offer card at the right of the panel
 *
 * Blocksy opens a submenu by adding .ct-active to its parent item. We keep that
 * and only change where the panels sit and how they look.
 *
 * @since 1.32.0
 */
@media (min-width: 1000px) {

	/* ---------- rail ---------- */
	#header-menu-1 > .menu > .menu-item > .sub-menu {
		--dsfw-rail: 270px;
		--dsfw-pane: calc(min(1290px, 100vw - 150px) - var(--dsfw-rail));
		--dsfw-card: 0px;
		--dsfw-ink: #2c3e50;
		--dsfw-muted: #5a6a7a;
		--dsfw-line: #e2e7ed;
		--dsfw-green-dark: #588a31;
		--dropdown-width: var(--dsfw-rail);
		--dropdown-divider: none;
		--menu-item-padding: 10px 20px;
		--theme-border-radius: 0 0 0 10px;
		padding: 8px 0;
	}

	/* white ground behind the panes, so the panel never looks empty */
	#header-menu-1 > .menu > .menu-item > .sub-menu::after {
		content: "";
		position: absolute;
		top: 0;
		left: 100%;
		width: var(--dsfw-pane);
		height: 100%;
		background: #fff;
		border-radius: 0 0 10px 0;
		box-shadow: 0 14px 30px rgba(44, 62, 80, 0.16);
	}

	#header-menu-1 > .menu > .menu-item > .sub-menu > .menu-item {
		position: static;
	}

	#header-menu-1 > .menu > .menu-item > .sub-menu > .menu-item > .ct-menu-link {
		border-left: 3px solid transparent;
		font-size: 15px;
		line-height: 1.35;
	}

	/* the arrow always points to the panel */
	#header-menu-1 > .menu > .menu-item > .sub-menu > .menu-item > .ct-menu-link .ct-toggle-dropdown-desktop svg {
		transform: rotate(-90deg);
	}

	/* open rail item (hover, Blocksy .ct-active, or the first one when nothing is picked) */
	#header-menu-1 > .menu > .menu-item > .sub-menu > .menu-item:not(.dsfw-mega-card):hover > .ct-menu-link,
	#header-menu-1 > .menu > .menu-item > .sub-menu > .menu-item.ct-active > .ct-menu-link,
	#header-menu-1 > .menu > .menu-item > .sub-menu:not(:has(> .menu-item:not(.dsfw-mega-card):hover)):not(:has(> .menu-item.ct-active)) > .menu-item:first-child > .ct-menu-link {
		background: #fff;
		color: var(--dsfw-green-dark);
		border-left-color: var(--theme-palette-color-2);
		--theme-icon-color: var(--dsfw-green-dark);
	}

	/* ---------- pane ---------- */
	#header-menu-1 > .menu > .menu-item > .sub-menu > .menu-item > .sub-menu {
		--menu-item-padding: 5px 0;
		--dropdown-background-hover-color: transparent;
		top: 0;
		left: 100%;
		z-index: 2;
		width: var(--dsfw-pane);
		min-height: 100%;
		max-height: none;
		overflow: visible;
		margin: 0;
		padding: 18px calc(26px + var(--dsfw-card)) 22px 26px;
		background: #fff;
		border-radius: 0 0 10px 0;
		box-shadow: 0 14px 30px rgba(44, 62, 80, 0.16);
		clip-path: inset(0 -40px -50px 0);
		transform: none;
		columns: 3;
		column-gap: 28px;
	}

	#header-menu-1 > .menu > .menu-item > .sub-menu > .menu-item > .sub-menu::before {
		display: none;
	}

	/* first pane is open when the menu opens and nothing is picked yet */
	#header-menu-1 > .menu > .menu-item.ct-active > .sub-menu:not(:has(> .menu-item:not(.dsfw-mega-card):hover)):not(:has(> .menu-item.ct-active)) > .menu-item:first-child > .sub-menu {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
	}

	#header-menu-1 > .menu > .menu-item > .sub-menu > .menu-item > .sub-menu .menu-item {
		display: block;
		break-inside: avoid;
		border-top: 0;
		border-radius: 0;
	}

	#header-menu-1 > .menu > .menu-item > .sub-menu > .menu-item > .sub-menu .ct-menu-link {
		display: block;
		background: none;
		color: var(--dsfw-ink);
		font-size: 15px;
		font-weight: 400;
		line-height: 1.35;
	}

	#header-menu-1 > .menu > .menu-item > .sub-menu > .menu-item > .sub-menu .ct-menu-link:hover {
		color: var(--dsfw-green-dark);
		text-decoration: underline;
	}

	/* group labels (custom "#" items such as "BIBS si FRIGG") are not links */
	#header-menu-1 > .menu > .menu-item > .sub-menu > .menu-item > .sub-menu .ct-menu-link[href="#"] {
		font-weight: 600;
		cursor: default;
		text-decoration: none;
		color: var(--dsfw-ink);
	}

	#header-menu-1 > .menu > .menu-item > .sub-menu > .menu-item > .sub-menu .ct-toggle-dropdown-desktop,
	#header-menu-1 > .menu > .menu-item > .sub-menu > .menu-item > .sub-menu .ct-toggle-dropdown-desktop-ghost {
		display: none;
	}

	/* pane title row (added by the small script in Dirigent_Mega_Menu) */
	#header-menu-1 > .menu > .menu-item > .sub-menu > .menu-item > .sub-menu > .dsfw-mega-head {
		column-span: all;
		margin-bottom: 12px;
		padding-bottom: 10px;
		border-bottom: 1px solid var(--dsfw-line);
	}

	#header-menu-1 > .menu > .menu-item > .sub-menu > .menu-item > .sub-menu > .dsfw-mega-head > .ct-menu-link {
		display: flex;
		justify-content: space-between;
		align-items: baseline;
		gap: 16px;
		font-size: 20px;
		font-weight: 700;
		text-decoration: none;
		color: var(--dsfw-ink);
	}

	#header-menu-1 > .menu > .menu-item > .sub-menu > .menu-item > .sub-menu > .dsfw-mega-head > .ct-menu-link > span {
		color: var(--dsfw-green-dark);
		font-size: 14px;
		font-weight: 600;
		white-space: nowrap;
	}

	/* ---------- third level: always open, indented ---------- */
	#header-menu-1 > .menu > .menu-item > .sub-menu > .menu-item > .sub-menu .sub-menu {
		position: static;
		opacity: 1;
		visibility: inherit;
		pointer-events: inherit;
		transform: none;
		transition: none;
		width: auto;
		min-width: 0;
		max-height: none;
		overflow: visible;
		margin: 2px 0 6px;
		padding: 0 0 0 12px;
		background: none;
		border-left: 2px solid var(--dsfw-line);
		border-radius: 0;
		box-shadow: none;
		--menu-item-padding: 2px 0;
	}

	#header-menu-1 > .menu > .menu-item > .sub-menu > .menu-item > .sub-menu .sub-menu::before {
		display: none;
	}

	#header-menu-1 > .menu > .menu-item > .sub-menu > .menu-item > .sub-menu .sub-menu .ct-menu-link {
		color: var(--dsfw-muted);
		font-size: 13px;
	}

	/* ---------- offer card: hidden on small desktops ---------- */
	#header-menu-1 > .menu > .menu-item > .sub-menu > .menu-item.dsfw-mega-card {
		display: none;
	}
}

@media (min-width: 1400px) {

	#header-menu-1 > .menu > .menu-item > .sub-menu:has(> .dsfw-mega-card) {
		--dsfw-card: 224px;
	}

	#header-menu-1 > .menu > .menu-item > .sub-menu > .menu-item.dsfw-mega-card {
		display: block;
		position: absolute;
		top: 20px;
		left: calc(100% + var(--dsfw-pane) - 224px);
		z-index: 3;
		width: 200px;
		border-radius: 10px;
		background: var(--theme-palette-color-2);
	}

	#header-menu-1 > .menu > .menu-item > .sub-menu > .menu-item.dsfw-mega-card > .ct-menu-link {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 8px;
		padding: 16px;
		border: 0;
		border-radius: 10px;
		background: none;
		color: #fff;
		font-size: 13px;
		font-weight: 400;
		line-height: 1.35;
		text-transform: none;
		white-space: normal;
	}

	#header-menu-1 > .menu > .menu-item > .sub-menu > .menu-item.dsfw-mega-card > .ct-menu-link b {
		font-size: 18px;
		line-height: 1.2;
	}

	#header-menu-1 > .menu > .menu-item > .sub-menu > .menu-item.dsfw-mega-card > .ct-menu-link em {
		margin-top: 4px;
		padding: 7px 10px;
		border-radius: 6px;
		background: #fff;
		color: var(--theme-palette-color-2);
		font-style: normal;
		font-weight: 700;
		text-align: center;
	}
}