/**
 * Content-sized dropdowns for opted-in Blocksy desktop menu items.
 * Keep this breakpoint aligned with Blocksy's desktop header (1000px).
 */
@media (min-width: 1000px) {
	/* Blocksy's positioned header row anchors the panel instead of its trigger. */
	#header [data-device="desktop"] .menu > li.yenkur-mega-menu {
		--yenkur-mega-bg: #2b2b2b;
		--yenkur-mega-padding-top: 38px;
		--yenkur-mega-padding-right: 32px;
		--yenkur-mega-padding-bottom: 42px;
		--yenkur-mega-padding-left: 32px;
		--yenkur-mega-column-min: 210px;
		--yenkur-mega-column-max: 245px;
		--yenkur-mega-column-gap: 40px;
		--yenkur-mega-max-columns: 4;
		--yenkur-mega-row-gap: 36px;
		--yenkur-mega-heading-size: 18px;
		--yenkur-mega-heading-weight: 600;
		--yenkur-mega-heading-color: #d8b98f;
		--yenkur-mega-link-size: 17px;
		--yenkur-mega-link-weight: 400;
		--yenkur-mega-link-color: #ffffff;
		--yenkur-mega-link-hover-color: #ffffff;
		--yenkur-mega-link-line-height: 1.5;
		--yenkur-mega-link-spacing: 13px;
		--yenkur-mega-hover-line-width: 20px;
		--yenkur-mega-hover-line-height: 0.5px;
		--yenkur-mega-hover-line-color: #d8b98f;
		--yenkur-mega-hover-shift: 14px;
		--yenkur-mega-open-offset: 8px;
		--yenkur-mega-open-duration: 240ms;
		--yenkur-mega-hover-duration: 220ms;

		position: static;
	}

	#header [data-device="desktop"] .menu > li.yenkur-mega-menu > .sub-menu {
		display: flex;
		flex-wrap: wrap;
		gap: var(--yenkur-mega-row-gap) var(--yenkur-mega-column-gap);
		justify-content: flex-start;
		align-items: flex-start;
		align-content: flex-start;
		position: absolute;
		top: 100%;
		right: 0;
		bottom: auto;
		left: 0;
		z-index: 20;
		box-sizing: border-box;
		width: max-content;
		min-width: 0;
		max-width: min(
			calc(100vw - 40px),
			calc(var(--yenkur-mega-max-columns) * var(--yenkur-mega-column-max) + (var(--yenkur-mega-max-columns) - 1) * var(--yenkur-mega-column-gap) + var(--yenkur-mega-padding-left) + var(--yenkur-mega-padding-right))
		);
		max-height: calc(100vh - var(--header-height, 100px) - var(--admin-bar, 0px) - 24px);
		margin: 0 auto;
		padding: var(--yenkur-mega-padding-top) var(--yenkur-mega-padding-right) var(--yenkur-mega-padding-bottom) var(--yenkur-mega-padding-left);
		/* Keep wrapped rows reachable on shorter desktop viewports. */
		overflow: auto;
		border: 0;
		border-radius: 0;
		background: var(--yenkur-mega-bg);
		box-shadow: 0 12px 28px rgba(0, 0, 0, 0.16);
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transform: translateY(var(--yenkur-mega-open-offset));
		transition: opacity var(--yenkur-mega-open-duration) ease-out, transform var(--yenkur-mega-open-duration) ease-out, visibility var(--yenkur-mega-open-duration) ease-out;
	}

	#header [data-device="desktop"] .menu > li.yenkur-mega-menu:hover > .sub-menu,
	#header [data-device="desktop"] .menu > li.yenkur-mega-menu:focus-within > .sub-menu,
	#header [data-device="desktop"] .menu > li.yenkur-mega-menu.ct-active > .sub-menu {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: translateY(0);
	}

	/* Bridge the moving panel's gap without changing its scrollable overflow. */
	#header [data-device="desktop"] .menu > li.yenkur-mega-menu:hover::after,
	#header [data-device="desktop"] .menu > li.yenkur-mega-menu:focus-within::after,
	#header [data-device="desktop"] .menu > li.yenkur-mega-menu.ct-active::after {
		content: "";
		position: absolute;
		top: 100%;
		right: 0;
		left: 0;
		z-index: 21;
		width: calc(100% - 40px);
		max-width: calc(100vw - 40px);
		height: var(--yenkur-mega-open-offset);
		margin: 0 auto;
	}

	/* Reset flex items and Blocksy's inner-reveal animation inside each column. */
	#header [data-device="desktop"] .menu > li.yenkur-mega-menu > .sub-menu li {
		display: block;
		position: static;
		width: auto;
		min-width: 0;
		margin: 0;
		padding: 0;
		border: 0;
		opacity: 1;
		transform: none;
		transition: none;
	}

	#header [data-device="desktop"] .menu > li.yenkur-mega-menu > .sub-menu > li {
		flex: 0 0 var(--yenkur-mega-column-max);
		width: var(--yenkur-mega-column-max);
		min-width: min(var(--yenkur-mega-column-min), 100%);
		max-width: var(--yenkur-mega-column-max);
	}

	/* Four or more items share each row, including the space left by a scrollbar. */
	#header [data-device="desktop"] .menu > li.yenkur-mega-menu > .sub-menu > li:first-child:nth-last-child(n + 4),
	#header [data-device="desktop"] .menu > li.yenkur-mega-menu > .sub-menu > li:first-child:nth-last-child(n + 4) ~ li {
		flex-basis: calc((100% - (var(--yenkur-mega-max-columns) - 1) * var(--yenkur-mega-column-gap)) / var(--yenkur-mega-max-columns));
		/* Allow narrower columns when necessary to keep four within the viewport. */
		min-width: 0;
	}

	/* Inherit visibility so links cannot receive focus while the panel is closed. */
	#header [data-device="desktop"] .menu > li.yenkur-mega-menu > .sub-menu .sub-menu {
		display: block;
		position: static;
		inset: auto;
		width: 100%;
		min-width: 0;
		max-width: none;
		height: auto;
		max-height: none;
		margin: 0;
		padding: 0;
		overflow: visible;
		border: 0;
		border-radius: 0;
		background: transparent;
		box-shadow: none;
		opacity: 1;
		visibility: inherit;
		pointer-events: inherit;
		transform: none;
		transition: none;
	}

	#header [data-device="desktop"] .menu > li.yenkur-mega-menu .sub-menu::before,
	#header [data-device="desktop"] .menu > li.yenkur-mega-menu .sub-menu::after,
	#header [data-device="desktop"] .menu > li.yenkur-mega-menu > .sub-menu .ct-toggle-dropdown-desktop,
	#header [data-device="desktop"] .menu > li.yenkur-mega-menu > .sub-menu .ct-toggle-dropdown-desktop-ghost {
		display: none;
	}

	#header [data-device="desktop"] .menu > li.yenkur-mega-menu > .sub-menu .ct-menu-link {
		justify-content: flex-start;
		min-width: 0;
		height: auto;
		padding: 0;
		border: 0;
		border-radius: 0;
		background: transparent;
		color: var(--yenkur-mega-link-color);
		font-size: var(--yenkur-mega-link-size);
		font-weight: var(--yenkur-mega-link-weight);
		line-height: var(--yenkur-mega-link-line-height);
		letter-spacing: normal;
		text-align: start;
		text-transform: none;
		white-space: normal;
		overflow-wrap: anywhere;
		transition: color var(--yenkur-mega-hover-duration) ease;
	}

	#header [data-device="desktop"] .menu > li.yenkur-mega-menu > .sub-menu > li > .ct-menu-link {
		margin-bottom: var(--yenkur-mega-link-spacing);
		color: var(--yenkur-mega-heading-color);
		font-size: var(--yenkur-mega-heading-size);
		font-weight: var(--yenkur-mega-heading-weight);
	}

	#header [data-device="desktop"] .menu > li.yenkur-mega-menu > .sub-menu > li > .ct-menu-link,
	#header [data-device="desktop"] .menu > li.yenkur-mega-menu > .sub-menu > li > .ct-menu-link:hover,
	#header [data-device="desktop"] .menu > li.yenkur-mega-menu > .sub-menu > li > .ct-menu-link:focus-visible {
		text-decoration: none;
		transform: none;
	}

	#header [data-device="desktop"] .menu > li.yenkur-mega-menu > .sub-menu > li > .ct-menu-link::before,
	#header [data-device="desktop"] .menu > li.yenkur-mega-menu > .sub-menu > li > .ct-menu-link::after {
		content: none;
		display: none;
	}

	#header [data-device="desktop"] .menu > li.yenkur-mega-menu > .sub-menu .sub-menu > li + li {
		margin-top: var(--yenkur-mega-link-spacing);
	}

	#header [data-device="desktop"] .menu > li.yenkur-mega-menu > .sub-menu .sub-menu > li > .ct-menu-link {
		transform: translateX(0);
		transition: color var(--yenkur-mega-hover-duration) ease, transform var(--yenkur-mega-hover-duration) ease;
	}

	#header [data-device="desktop"] .menu > li.yenkur-mega-menu > .sub-menu .sub-menu > li > .ct-menu-link::before {
		content: "";
		position: absolute;
		top: 50%;
		left: calc(0px - var(--yenkur-mega-hover-line-width) - 8px);
		width: 0;
		height: var(--yenkur-mega-hover-line-height);
		background: var(--yenkur-mega-hover-line-color);
		opacity: 0;
		pointer-events: none;
		transform: translateY(-50%);
		transition: width var(--yenkur-mega-hover-duration) ease, opacity var(--yenkur-mega-hover-duration) ease;
	}

	/* The stationary list item keeps hover stable while its link moves. */
	#header [data-device="desktop"] .menu > li.yenkur-mega-menu > .sub-menu .sub-menu > li:hover > .ct-menu-link,
	#header [data-device="desktop"] .menu > li.yenkur-mega-menu > .sub-menu .sub-menu > li > .ct-menu-link:focus-visible {
		color: var(--yenkur-mega-link-hover-color);
		text-decoration: none;
		transform: translateX(var(--yenkur-mega-hover-shift));
	}

	#header [data-device="desktop"] .menu > li.yenkur-mega-menu > .sub-menu .sub-menu > li:hover > .ct-menu-link::before,
	#header [data-device="desktop"] .menu > li.yenkur-mega-menu > .sub-menu .sub-menu > li > .ct-menu-link:focus-visible::before {
		width: var(--yenkur-mega-hover-line-width);
		opacity: 1;
	}

	#header [data-device="desktop"] .menu > li.yenkur-mega-menu > .sub-menu .ct-menu-link:focus-visible {
		outline: 2px solid var(--yenkur-mega-hover-line-color);
		outline-offset: 3px;
	}
}

@media (min-width: 1000px) and (prefers-reduced-motion: reduce) {
	#header [data-device="desktop"] .menu > li.yenkur-mega-menu {
		--yenkur-mega-open-offset: 0px;
		--yenkur-mega-hover-shift: 0px;
		--yenkur-mega-open-duration: 0ms;
		--yenkur-mega-hover-duration: 0ms;
	}
}