/*
 * Product mega — PRIVATE draft 21975 only (enqueued by inc/ednc-cs-mega.php when 21975 is rendered).
 * Type, color, spacing and the banner dim/hover overlay live in Elementor on 21975.
 * This file holds layout/chrome that Elementor cannot express, and mirrors the
 * live-only (.elementor-15388) header rules under :is(.elementor-15388, .elementor-21975) so the draft
 * behaves like a real header in preview.
 */

:is(.elementor-15388, .elementor-21975) {
	/* EDNC common UI palette. No per-brand accents. */
	--ednc-bg: #191d20;
	--ednc-line: #383d40;
	--ednc-red: #c81020;
	--ednc-title: #f5f5f5;
	--ednc-icon: #d7dee2;
	--ednc-label: #aebcc6;
	--ednc-desc: #c2c8cc;
	--ednc-point: var(--ednc-icon);
	--ednc-accent: #ffffff;
	--ednc-fade: 25, 29, 32;
}

/* Header bar colour, height and the panel colour are Elementor container settings. */
:is(.elementor-15388, .elementor-21975) .elementor-element-594c18a5 {
	box-shadow: none !important;
}

:is(.elementor-15388, .elementor-21975) .elementor-element-594c18a5::before {
	content: none !important;
	background: none !important;
	opacity: 0 !important;
}

/* ---------- Mega panel open/close (same behavior as live 15388) ---------- */
:is(.elementor-15388, .elementor-21975) .elementor-element-48ddc495 .e-n-menu-heading {
	flex-wrap: nowrap;
}

@media (min-width: 1025px) {
	:is(.elementor-15388, .elementor-21975) .elementor-element-48ddc495 .e-n-menu-content {
		position: fixed;
		top: 62px;
		left: 0;
		right: 0;
		width: 100%;
		max-width: none;
		background-color: transparent;
		box-shadow: none;
	}

	:is(.elementor-15388, .elementor-21975) .ednc-pmega.e-con {
		width: min(1440px, 96%);
		margin: 0 auto;
	}

	:is(.elementor-15388, .elementor-21975) .elementor-element-48ddc495 .e-n-menu-content > .ednc-pmega.e-con:not(.e-active) {
		display: none !important;
	}

	:is(.elementor-15388, .elementor-21975) .elementor-element-48ddc495 .e-n-menu-item:hover > .e-n-menu-content > .ednc-pmega.e-con,
	:is(.elementor-15388, .elementor-21975) .elementor-element-48ddc495 .e-n-menu-content:hover > .ednc-pmega.e-con,
	:is(.elementor-15388, .elementor-21975) .elementor-element-48ddc495 .e-n-menu-content > .ednc-pmega.e-con.e-active,
	:is(.elementor-15388, .elementor-21975) .elementor-element-48ddc495 .e-n-menu-item:hover > .e-n-menu-content > .ednc-pmega.e-con > .e-con-inner,
	:is(.elementor-15388, .elementor-21975) .elementor-element-48ddc495 .e-n-menu-content:hover > .ednc-pmega.e-con > .e-con-inner,
	:is(.elementor-15388, .elementor-21975) .elementor-element-48ddc495 .e-n-menu-content > .ednc-pmega.e-con.e-active > .e-con-inner {
		display: flex !important;
		flex-direction: column !important;
	}
}

/* Panel, column and text colours are Elementor settings. CSS only draws the divider. */

:is(.elementor-15388, .elementor-21975) .ednc-pmega-col.e-con + .ednc-pmega-col.e-con {
	box-shadow: inset 1px 0 0 var(--ednc-line) !important;
}

:is(.elementor-15388, .elementor-21975) .ednc-pmega.e-con {
	border-top-color: var(--ednc-line) !important;
}

/* Product + description stay one tight pair: nothing inside a group may stretch. */
:is(.elementor-15388, .elementor-21975) .ednc-pmega-group.e-con {
	justify-content: flex-start;
}

:is(.elementor-15388, .elementor-21975) .ednc-pmega-group.e-con > .elementor-element {
	flex-grow: 0 !important;
}

:is(.elementor-15388, .elementor-21975) .ednc-pmega-label {
	white-space: nowrap;
}

/* Column padding and group gap are the Elementor container controls. */

/* Tablet / mobile drawer: one column. The live helper pins 4 columns above 1024px. */
@media (max-width: 1024px) {
	:is(.elementor-15388, .elementor-21975) .ednc-pmega-grid.e-con,
	:is(.elementor-15388, .elementor-21975) .ednc-pmega-groups.e-con {
		grid-template-columns: minmax(0, 1fr) !important;
	}

	:is(.elementor-15388, .elementor-21975) .ednc-pmega.e-con {
		width: 100%;
	}
}

/* ---------- Banners ---------- */
/* Left text-safe fade only. The 14% photo dim + hover lives in Elementor (background overlay). */
:is(.elementor-15388, .elementor-21975) .ednc-pmega-banner.e-con::after {
	background: linear-gradient(
		90deg,
		rgba(var(--ednc-fade), 0.92) 0%,
		rgba(var(--ednc-fade), 0.78) 36%,
		rgba(var(--ednc-fade), 0.48) 58%,
		rgba(var(--ednc-fade), 0.18) 76%,
		rgba(var(--ednc-fade), 0) 90%
	);
}

:is(.elementor-15388, .elementor-21975) .ednc-pmega-banner--lite.e-con::after {
	background: linear-gradient(
		90deg,
		rgba(var(--ednc-fade), 0.88) 0%,
		rgba(var(--ednc-fade), 0.62) 32%,
		rgba(var(--ednc-fade), 0.3) 52%,
		rgba(var(--ednc-fade), 0.06) 70%,
		rgba(var(--ednc-fade), 0) 82%
	);
}

/* Siemens wafer and Moldflow result are bright on the right. Keep copy in the fade. */
:is(.elementor-15388, .elementor-21975) .elementor-element-sicbannr.ednc-pmega-banner.e-con {
	background-position: 100% 42% !important;
}

:is(.elementor-15388, .elementor-21975) .elementor-element-8595be3.ednc-pmega-banner.e-con {
	background-position: 100% 48% !important;
}

:is(.elementor-15388, .elementor-21975) .elementor-element-sicbannr.ednc-pmega-banner.e-con::after,
:is(.elementor-15388, .elementor-21975) .elementor-element-8595be3.ednc-pmega-banner.e-con::after {
	background: linear-gradient(
		90deg,
		rgba(var(--ednc-fade), 0.94) 0%,
		rgba(var(--ednc-fade), 0.86) 42%,
		rgba(var(--ednc-fade), 0.55) 62%,
		rgba(var(--ednc-fade), 0.2) 78%,
		rgba(var(--ednc-fade), 0) 90%
	);
}

/* Wide enough for 23/14 type to stay on two lines, still inside the left fade. */
:is(.elementor-15388, .elementor-21975) .ednc-pmega-banner.e-con > .ednc-pmega-hero-title,
:is(.elementor-15388, .elementor-21975) .ednc-pmega-banner.e-con > .e-con-inner > .ednc-pmega-hero-title,
:is(.elementor-15388, .elementor-21975) .ednc-pmega-banner.e-con > .ednc-pmega-hero-desc,
:is(.elementor-15388, .elementor-21975) .ednc-pmega-banner.e-con > .e-con-inner > .ednc-pmega-hero-desc {
	max-width: 84% !important;
}

:is(.elementor-15388, .elementor-21975) .elementor-element-sicbannr.ednc-pmega-banner.e-con > .ednc-pmega-hero-title,
:is(.elementor-15388, .elementor-21975) .elementor-element-sicbannr.ednc-pmega-banner.e-con > .ednc-pmega-hero-desc,
:is(.elementor-15388, .elementor-21975) .elementor-element-sicbannr.ednc-pmega-banner.e-con > .e-con-inner > .ednc-pmega-hero-title,
:is(.elementor-15388, .elementor-21975) .elementor-element-sicbannr.ednc-pmega-banner.e-con > .e-con-inner > .ednc-pmega-hero-desc {
	max-width: 86% !important;
}

:is(.elementor-15388, .elementor-21975) .elementor-element-8595be3.ednc-pmega-banner.e-con > .ednc-pmega-hero-title,
:is(.elementor-15388, .elementor-21975) .elementor-element-8595be3.ednc-pmega-banner.e-con > .ednc-pmega-hero-desc,
:is(.elementor-15388, .elementor-21975) .elementor-element-8595be3.ednc-pmega-banner.e-con > .e-con-inner > .ednc-pmega-hero-title,
:is(.elementor-15388, .elementor-21975) .elementor-element-8595be3.ednc-pmega-banner.e-con > .e-con-inner > .ednc-pmega-hero-desc {
	max-width: 74% !important;
}

/* Moldflow brand label is long: wrap it so it never runs onto the bright result image. */
:is(.elementor-15388, .elementor-21975) .elementor-element-8595be3 .ednc-pmega-kicker,
:is(.elementor-15388, .elementor-21975) .elementor-element-8595be3 .ednc-pmega-kicker p {
	white-space: normal;
}

:is(.elementor-15388, .elementor-21975) .elementor-element-8595be3.ednc-pmega-banner.e-con > .ednc-pmega-kicker,
:is(.elementor-15388, .elementor-21975) .elementor-element-8595be3.ednc-pmega-banner.e-con > .e-con-inner > .ednc-pmega-kicker {
	max-width: 72% !important;
}

/* Korean copy breaks at word spaces, not mid-word. */
:is(.elementor-15388, .elementor-21975) .ednc-pmega-hero-desc,
:is(.elementor-15388, .elementor-21975) .ednc-pmega-hero-title,
:is(.elementor-15388, .elementor-21975) .ednc-pmega-desc {
	word-break: keep-all;
	overflow-wrap: break-word;
}

/* Product names break on spaces only, so "ModelSim/Questa" stays one token. */
:is(.elementor-15388, .elementor-21975) .ednc-pmega-item,
:is(.elementor-15388, .elementor-21975) .ednc-pmega-item p,
:is(.elementor-15388, .elementor-21975) .ednc-pmega-item a {
	word-break: keep-all;
	overflow-wrap: normal;
}

/* Whole card is the link: pointer + visible keyboard focus, no extra CTA. */
:is(.elementor-15388, .elementor-21975) a.ednc-pmega-banner {
	cursor: pointer;
	text-decoration: none;
}

:is(.elementor-15388, .elementor-21975) a.ednc-pmega-banner:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: -3px;
}

/* ---------- Interactions: cool grey (overrides the live helper's teal) ---------- */
/* Colours themselves come from Elementor (icon_color / icon_color_hover / text_color). CSS only sets the 200ms ease. */
/* Specificity matches Elementor's generated `… .elementor-element.elementor-element-ID .elementor-icon-list-icon svg` (+1). */
:is(.elementor-15388, .elementor-21975) .ednc-pmega .elementor-element.ednc-pmega-cat .elementor-icon-list-icon i,
:is(.elementor-15388, .elementor-21975) .ednc-pmega .elementor-element.ednc-pmega-cat .elementor-icon-list-icon svg {
	transition: color 200ms ease, fill 200ms ease;
}

:is(.elementor-15388, .elementor-21975) .ednc-pmega-label,
:is(.elementor-15388, .elementor-21975) .ednc-pmega-kicker {
	transition: color 200ms ease;
}

/* The hover arrow must not take layout space (an invisible arrow was wrapping to a blank 2nd line). */
:is(.elementor-15388, .elementor-21975) .ednc-pmega-item a {
	position: relative;
}

:is(.elementor-15388, .elementor-21975) .ednc-pmega-item a::after {
	position: absolute;
	left: 100%;
	top: 0;
	margin-left: 6px;
	white-space: nowrap;
}

:is(.elementor-15388, .elementor-21975) .ednc-pmega-col .ednc-pmega-item a::after {
	color: currentColor;
}

:is(.elementor-15388, .elementor-21975) .ednc-pmega a:focus-visible,
:is(.elementor-15388, .elementor-21975) .ednc-pmega [tabindex="0"]:focus-visible {
	outline-color: #ffffff;
}

/* Description lines are plain copy: never interactive. */
:is(.elementor-15388, .elementor-21975) .ednc-pmega-desc,
:is(.elementor-15388, .elementor-21975) .ednc-pmega-desc * {
	pointer-events: none;
}

@media (max-width: 1024px) {
	:is(.elementor-15388, .elementor-21975) .ednc-pmega-col .ednc-pmega-cat .elementor-icon-list-text::after {
		border-color: var(--ednc-point);
	}

	:is(.elementor-15388, .elementor-21975) .ednc-pmega-col.e-con + .ednc-pmega-col.e-con {
		box-shadow: none !important;
		border-top: 1px solid var(--ednc-line);
	}

	:is(.elementor-15388, .elementor-21975) .ednc-pmega-banner.e-con > .ednc-pmega-hero-title,
	:is(.elementor-15388, .elementor-21975) .ednc-pmega-banner.e-con > .ednc-pmega-hero-desc {
		max-width: 94% !important;
	}
}

/* ---------- GNB hover line: ED&C / ED&C Life / News / Product ---------- */
:is(.elementor-15388, .elementor-21975) .elementor-element-48ddc495 .e-n-menu-title-text {
	position: relative;
	display: inline-block;
}

:is(.elementor-15388, .elementor-21975) .elementor-element-48ddc495 .e-n-menu-title-text::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -7px;
	height: 2px;
	background: var(--ednc-red);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 190ms ease;
	pointer-events: none;
}

:is(.elementor-15388, .elementor-21975) .elementor-element-48ddc495 .e-n-menu-item:hover .e-n-menu-title-text::after,
:is(.elementor-15388, .elementor-21975) .elementor-element-48ddc495 .e-n-menu-item:focus-within .e-n-menu-title-text::after,
:is(.elementor-15388, .elementor-21975) .elementor-element-48ddc495 .e-n-menu-item[aria-expanded="true"] .e-n-menu-title-text::after,
:is(.elementor-15388, .elementor-21975) .elementor-element-48ddc495 .e-n-menu-title.e-current .e-n-menu-title-text::after,
:is(.elementor-15388, .elementor-21975) .elementor-element-48ddc495 .e-n-menu-item.e-active .e-n-menu-title-text::after {
	transform: scaleX(1);
}

:is(.elementor-15388, .elementor-21975) .elementor-element-48ddc495 .e-n-menu-title-container:focus-visible,
:is(.elementor-15388, .elementor-21975) .elementor-element-48ddc495 .e-n-menu-dropdown-icon:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 6px;
	border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
	:is(.elementor-15388, .elementor-21975) .elementor-element-48ddc495 .e-n-menu-title-text::after {
		transition: none;
	}
}

/* 1025–1366px: Moldflow brand label may use a little more width so it stays on two lines. */
@media (min-width: 1025px) and (max-width: 1366px) {
	:is(.elementor-15388, .elementor-21975) .elementor-element-8595be3.ednc-pmega-banner.e-con > .ednc-pmega-kicker,
	:is(.elementor-15388, .elementor-21975) .elementor-element-8595be3.ednc-pmega-banner.e-con > .e-con-inner > .ednc-pmega-kicker {
		max-width: 76% !important;
	}
}

/* Draft 21975 only. The open panel must clear the fixed header. Elementor's
 * own rule places it at top:100% of the menu row, which sits inside the header
 * and covers the main menu. Same rule for the live header and the draft. */
:is(.elementor-15388, .elementor-21975) .elementor-element-3e6f754a {
	anchor-name: --ednc-header;
}

:is(.elementor-15388, .elementor-21975) .elementor-element-48ddc495 .e-n-menu {
	anchor-name: --ednc-menu;
}

/* One gutter for header, panel and link bar.
 * --ednc-gutter is the header's own left-group padding (Elementor control on 4b53f02d,
 * currently 44px). The right group uses the same 44px on its right. The panel is a
 * descendant of that group, so it inherits the value and places the 4 columns so that
 * their content (column padding = --ednc-col-pad) lands on the same line. */
:is(.elementor-15388, .elementor-21975) {
	--ednc-col-pad: 24px; /* mirrors the Elementor padding on the 4 columns and the link bar */
}

:is(.elementor-15388, .elementor-21975) .elementor-element-4b53f02d {
	--ednc-gutter: var(--padding-left);
}

@media (min-width: 1025px) {
	:is(.elementor-15388, .elementor-21975) .elementor-element-4b53f02d {
		--ednc-header-pad-left: calc(var(--ednc-gutter) - var(--ednc-col-pad));
		--ednc-header-pad-right: calc(var(--ednc-gutter) - var(--ednc-col-pad));
	}

	/* Beat both the stretch rule and the .e-active { top:100% } rule.
	   The visible panel starts at the header's bottom edge, so it does not cover the menu. */
	:is(.elementor-15388, .elementor-21975) .elementor-element-48ddc495.elementor-widget-n-menu .e-n-menu:not([data-layout="dropdown"]):not(.content-above) .e-n-menu-content.e-active,
	:is(.elementor-15388, .elementor-21975) .elementor-element-48ddc495.elementor-widget-n-menu .e-n-menu:not([data-layout="dropdown"]) .e-n-menu-content {
		position: fixed;
		position-anchor: --ednc-header;
		top: 62px;
		top: anchor(bottom);
		left: 0;
		right: 0;
		width: 100%;
		max-width: none;
		padding-block-start: 0;
		background-color: transparent;
	}

	/* Bridge only while Product is the open item. A closed panel must not leave a
	   full-width hit target over the other menus. */
	:is(.elementor-15388, .elementor-21975) .elementor-element-48ddc495 .e-n-menu-item:hover > .e-n-menu-content::before,
	:is(.elementor-15388, .elementor-21975) .elementor-element-48ddc495 .e-n-menu-content.e-active::before {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: 100%;
		height: 40px;
	}

	/* 고객지원 panel: same start line as the Product panel (header bottom edge). */
	:is(.elementor-15388, .elementor-21975) .ednc-csmega-widget.elementor-widget-n-menu .e-n-menu:not([data-layout="dropdown"]):not(.content-above) .e-n-menu-content.e-active,
	:is(.elementor-15388, .elementor-21975) .ednc-csmega-widget.elementor-widget-n-menu .e-n-menu:not([data-layout="dropdown"]) .e-n-menu-content {
		position: fixed;
		position-anchor: --ednc-header;
		top: 62px;
		top: anchor(bottom);
		left: 0;
		right: 0;
		width: 100%;
		max-width: none;
		padding-block-start: 0;
	}

	/* Same bridge for 고객지원, and only while that item is open. */
	:is(.elementor-15388, .elementor-21975) .ednc-csmega-widget .e-n-menu-item:hover > .e-n-menu-content::before,
	:is(.elementor-15388, .elementor-21975) .ednc-csmega-widget .e-n-menu-content.e-active::before {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: 100%;
		height: 24px;
	}

	/* A closed panel is position:fixed across the viewport. Without this it catches
	   the pointer meant for the other menus and the :hover rule opens it. */
	:is(.elementor-15388, .elementor-21975) .elementor-element-48ddc495 .e-n-menu-content:not(.e-active),
	:is(.elementor-15388, .elementor-21975) .ednc-csmega-widget .e-n-menu-content:not(.e-active) {
		pointer-events: none;
	}

	:is(.elementor-15388, .elementor-21975) .elementor-element-48ddc495 .e-n-menu-item:hover > .e-n-menu-content,
	:is(.elementor-15388, .elementor-21975) .ednc-csmega-widget .e-n-menu-item:hover > .e-n-menu-content {
		pointer-events: auto;
	}

	/* Titles and the logo stay above an open panel. The right group itself must NOT
	   be raised: it contains the 고객지원 panel, and raising it paints that full-width
	   panel over the left menu. */
	:is(.elementor-15388, .elementor-21975) .elementor-element-61ec295a,
	:is(.elementor-15388, .elementor-21975) .e-n-menu-title,
	:is(.elementor-15388, .elementor-21975) .e-n-menu-dropdown-icon {
		position: relative;
		z-index: 2147483646;
	}

	:is(.elementor-15388, .elementor-21975) .elementor-element-48ddc495 .e-n-menu-content > .ednc-pmega.e-con {
		width: 100%;
		max-width: none;
		margin-inline: 0;
		padding-inline-start: var(--ednc-header-pad-left);
		padding-inline-end: var(--ednc-header-pad-right);
		box-sizing: border-box;
	}

	:is(.elementor-15388, .elementor-21975) .elementor-element-48ddc495 .e-n-menu-content > .ednc-pmega.e-con > .e-con-inner {
		width: 100%;
		max-width: none;
	}
}

/* Moldflow, draft only: keep the right-hand colour result, darken the copy side a little more. */
:is(.elementor-15388, .elementor-21975) .elementor-element-8595be3.ednc-pmega-banner.e-con::after {
	background: linear-gradient(
		90deg,
		rgba(var(--ednc-fade), 0.96) 0%,
		rgba(var(--ednc-fade), 0.9) 40%,
		rgba(var(--ednc-fade), 0.62) 58%,
		rgba(var(--ednc-fade), 0.22) 74%,
		rgba(var(--ednc-fade), 0) 88%
	);
}
