/**
 * URI Energy header logo and menu refresh.
 *
 * Scope:
 * - Elementor header 4627: 국민에너지 전국회의
 * - Elementor header 5221: 국민솔라(주)
 *
 * The existing Elementor/HFE markup and menu behaviour remain unchanged.
 */

#masthead :is(.elementor-4627, .elementor-5221) {
	--uri-header-font: "Pretendard Variable", Pretendard, "Noto Sans KR", "Apple SD Gothic Neo", Inter, sans-serif;
	--uri-header-text: #17332f;
	--uri-header-muted: #526762;
	--uri-header-accent: #145c56;
	--uri-header-accent-soft: #e8f3f0;
	--uri-header-border: #d8e4e1;
	--uri-header-surface: #ffffff;
	--uri-header-focus: #0b7269;
	--uri-header-shadow: 0 14px 34px rgb(13 54 49 / 14%);
}

#masthead .elementor-5221 {
	--uri-header-text: #12304a;
	--uri-header-muted: #526878;
	--uri-header-accent: #d99000;
	--uri-header-accent-soft: #fff4d6;
	--uri-header-border: #dce5eb;
	--uri-header-focus: #9b6500;
	--uri-header-shadow: 0 14px 34px rgb(18 48 74 / 16%);
}

/* Logo sizing and optical alignment. */
#masthead .elementor-4627 .elementor-element-6b21c82,
#masthead .elementor-5221 .elementor-element-35e1aeb {
	display: flex;
	align-items: center;
	min-width: 0;
}

#masthead .elementor-4627 .elementor-element-6b21c82 .elementor-widget-container,
#masthead .elementor-5221 .elementor-element-35e1aeb .elementor-widget-container {
	width: 100%;
}

#masthead .elementor-4627 .elementor-element-6b21c82 img,
#masthead .elementor-5221 .elementor-element-35e1aeb img {
	display: block;
	max-width: 100%;
	height: auto;
	object-fit: contain;
}

#masthead .elementor-4627 .elementor-element-6b21c82 img {
	width: 250px;
}

#masthead .elementor-5221 .elementor-element-35e1aeb img {
	width: 218px;
}

@media (min-width: 1025px) {
	#masthead .elementor-5221 .elementor-element-353377a {
		--gap: 0;
	}

	#masthead .elementor-5221 .elementor-element-32164cd {
		--width: 22%;
		--justify-content: flex-start;
	}

	#masthead .elementor-5221 .elementor-element-dfb87c5 {
		--width: 78%;
	}
}

/* Primary navigation. */
#masthead :is(.elementor-4627 .elementor-element-e9285d7, .elementor-5221 .elementor-element-b2fd588) {
	font-family: var(--uri-header-font);
}

#masthead :is(.elementor-4627 .elementor-element-e9285d7, .elementor-5221 .elementor-element-b2fd588)
	.hfe-nav-menu__layout-horizontal > .hfe-nav-menu {
	align-items: stretch;
	column-gap: clamp(2px, 0.35vw, 6px);
	flex-wrap: nowrap;
}

@media (min-width: 1025px) {
	#masthead :is(.elementor-4627 .elementor-element-e9285d7, .elementor-5221 .elementor-element-b2fd588)
		nav.hfe-nav-menu__layout-horizontal {
		padding: 4px;
		background: rgb(255 255 255 / 94%);
		border: 1px solid rgb(255 255 255 / 78%);
		border-radius: 10px;
		box-shadow: 0 7px 22px rgb(0 35 64 / 14%);
		backdrop-filter: blur(10px);
	}
}

#masthead :is(.elementor-4627 .elementor-element-e9285d7, .elementor-5221 .elementor-element-b2fd588)
	.hfe-nav-menu > li > a.hfe-menu-item {
	position: relative;
	min-height: 48px;
	padding: 0 clamp(10px, 1vw, 16px);
	color: var(--uri-header-text);
	background: transparent;
	font-family: var(--uri-header-font);
	font-size: clamp(14px, 1.05vw, 16px);
	font-weight: 650;
	line-height: 1.3;
	letter-spacing: -0.025em;
	white-space: nowrap;
	transition: color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

#masthead :is(.elementor-4627 .elementor-element-e9285d7, .elementor-5221 .elementor-element-b2fd588)
	.hfe-nav-menu > li > a.hfe-menu-item:hover {
	color: var(--uri-header-accent);
	background: var(--uri-header-accent-soft);
	box-shadow: inset 0 -3px 0 var(--uri-header-accent);
}

#masthead :is(.elementor-4627 .elementor-element-e9285d7, .elementor-5221 .elementor-element-b2fd588)
	.hfe-nav-menu > :is(.current-menu-item, .current-menu-ancestor, .current_page_item) > a.hfe-menu-item {
	color: var(--uri-header-accent);
	background: color-mix(in srgb, var(--uri-header-accent-soft) 74%, transparent);
	box-shadow: inset 0 -3px 0 var(--uri-header-accent);
}

#masthead :is(.elementor-4627 .elementor-element-e9285d7, .elementor-5221 .elementor-element-b2fd588)
	:is(a.hfe-menu-item, a.hfe-sub-menu-item, .hfe-nav-menu__toggle):focus-visible {
	outline: 3px solid var(--uri-header-focus);
	outline-offset: 3px;
}

#masthead :is(.elementor-4627 .elementor-element-e9285d7, .elementor-5221 .elementor-element-b2fd588)
	.hfe-nav-menu .sub-arrow {
	margin-inline-start: 7px;
	color: var(--uri-header-muted);
	font-size: 0.72em;
	transition: color 160ms ease, transform 160ms ease;
}

#masthead :is(.elementor-4627 .elementor-element-e9285d7, .elementor-5221 .elementor-element-b2fd588)
	.hfe-nav-menu > li:hover > .hfe-has-submenu-container .sub-arrow {
	color: var(--uri-header-accent);
	transform: translateY(1px);
}

/* Desktop dropdowns. */
#masthead :is(.elementor-4627 .elementor-element-e9285d7, .elementor-5221 .elementor-element-b2fd588)
	.hfe-nav-menu__layout-horizontal .hfe-nav-menu .sub-menu {
	min-width: 224px;
	padding: 8px;
	background: var(--uri-header-surface);
	border: 1px solid var(--uri-header-border);
	border-radius: 8px;
	box-shadow: var(--uri-header-shadow);
	transform: translateY(6px);
}

#masthead :is(.elementor-4627 .elementor-element-e9285d7, .elementor-5221 .elementor-element-b2fd588)
	.hfe-nav-menu__layout-horizontal .hfe-nav-menu .sub-menu a.hfe-sub-menu-item {
	min-height: 42px;
	padding: 10px 12px;
	border: 0;
	border-radius: 6px;
	color: var(--uri-header-text);
	font-family: var(--uri-header-font);
	font-size: 14px;
	font-weight: 550;
	line-height: 1.45;
	letter-spacing: -0.02em;
	transition: color 160ms ease, background-color 160ms ease;
}

#masthead :is(.elementor-4627 .elementor-element-e9285d7, .elementor-5221 .elementor-element-b2fd588)
	.hfe-nav-menu__layout-horizontal .hfe-nav-menu .sub-menu a.hfe-sub-menu-item:hover,
#masthead :is(.elementor-4627 .elementor-element-e9285d7, .elementor-5221 .elementor-element-b2fd588)
	.hfe-nav-menu__layout-horizontal .hfe-nav-menu .sub-menu .current-menu-item > a.hfe-sub-menu-item {
	color: var(--uri-header-accent);
	background: var(--uri-header-accent-soft);
}

/* Tablet and mobile use the builder's existing open/close behaviour. */
@media (max-width: 1024px) {
	#masthead .elementor-4627 .elementor-element-ab5585e,
	#masthead .elementor-5221 .elementor-element-dfb87c5 {
		--justify-content: flex-end;
	}

	#masthead .elementor-5221 .elementor-element-353377a {
		--gap: 0;
	}

	#masthead :is(.elementor-4627 .elementor-element-e9285d7, .elementor-5221 .elementor-element-b2fd588) {
		width: auto;
		margin-inline-start: auto;
	}

	#masthead .elementor-4627 .elementor-element-6b21c82 img {
		width: clamp(180px, 31vw, 224px);
	}

	#masthead .elementor-5221 .elementor-element-35e1aeb img {
		width: clamp(164px, 27vw, 196px);
	}

	#masthead .elementor-5221 .elementor-element-32164cd {
		--width: 35%;
		--justify-content: flex-start;
	}

	#masthead .elementor-5221 .elementor-element-dfb87c5 {
		--width: 65%;
		padding-inline-end: 24px;
	}

	#masthead :is(.elementor-4627 .elementor-element-e9285d7, .elementor-5221 .elementor-element-b2fd588)
		.hfe-nav-menu__toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		margin-inline: auto 0;
		padding: 0;
		color: var(--uri-header-text);
		background: color-mix(in srgb, var(--uri-header-surface) 88%, transparent);
		border: 1px solid var(--uri-header-border);
		border-radius: 10px;
		box-shadow: 0 4px 14px rgb(18 48 74 / 9%);
		transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease;
	}

	#masthead :is(.elementor-4627 .elementor-element-e9285d7, .elementor-5221 .elementor-element-b2fd588)
		.hfe-nav-menu__toggle:hover,
	#masthead :is(.elementor-4627 .elementor-element-e9285d7, .elementor-5221 .elementor-element-b2fd588)
		.hfe-nav-menu__toggle.hfe-active-menu {
		color: var(--uri-header-accent);
		background: var(--uri-header-accent-soft);
		border-color: var(--uri-header-accent);
	}

	#masthead :is(.elementor-4627 .elementor-element-e9285d7, .elementor-5221 .elementor-element-b2fd588)
		.hfe-nav-menu__toggle .hfe-nav-menu-icon {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		padding: 0;
		border: 0;
	}

	#masthead :is(.elementor-4627 .elementor-element-e9285d7, .elementor-5221 .elementor-element-b2fd588)
		.hfe-active-menu + .hfe-nav-menu__layout-horizontal {
		inset-inline: auto 0;
		width: min(360px, calc(100vw - 32px));
		margin-top: 10px;
		padding: 8px;
		background: var(--uri-header-surface);
		border: 1px solid var(--uri-header-border);
		border-radius: 10px;
		box-shadow: var(--uri-header-shadow);
		overflow-x: hidden;
	}

	#masthead :is(.elementor-4627 .elementor-element-e9285d7, .elementor-5221 .elementor-element-b2fd588)
		.hfe-nav-menu__layout-horizontal > .hfe-nav-menu {
		column-gap: 0;
		flex-wrap: wrap;
	}

	#masthead :is(.elementor-4627 .elementor-element-e9285d7, .elementor-5221 .elementor-element-b2fd588)
		.hfe-nav-menu > li:not(:last-child) {
		border-bottom: 1px solid var(--uri-header-border);
	}

	#masthead :is(.elementor-4627 .elementor-element-e9285d7, .elementor-5221 .elementor-element-b2fd588)
		.hfe-nav-menu > li > a.hfe-menu-item {
		min-height: 48px;
		padding: 0 14px;
		font-size: 15px;
		white-space: normal;
	}

	#masthead :is(.elementor-4627 .elementor-element-e9285d7, .elementor-5221 .elementor-element-b2fd588)
		.hfe-nav-menu > :is(.current-menu-item, .current-menu-ancestor, .current_page_item) > a.hfe-menu-item {
		box-shadow: inset 4px 0 0 var(--uri-header-accent);
	}

	#masthead :is(.elementor-4627 .elementor-element-e9285d7, .elementor-5221 .elementor-element-b2fd588)
		.hfe-nav-menu__layout-horizontal .hfe-nav-menu .sub-menu {
		padding: 4px 0 8px 14px;
		background: color-mix(in srgb, var(--uri-header-accent-soft) 42%, white);
		border: 0;
		border-radius: 0;
		box-shadow: none;
		transform: none;
	}

	#masthead :is(.elementor-4627 .elementor-element-e9285d7, .elementor-5221 .elementor-element-b2fd588)
		.hfe-nav-menu__layout-horizontal .hfe-nav-menu .sub-menu a.hfe-sub-menu-item {
		min-height: 44px;
		padding: 10px 14px;
	}
}

@media (max-width: 767px) {
	#masthead .elementor-4627 .elementor-element-f967ca6 {
		--width: 60%;
		--justify-content: flex-start;
		padding-inline-start: 10px;
	}

	#masthead .elementor-4627 .elementor-element-ab5585e {
		--width: 40%;
		--content-width: 100%;
		--justify-content: flex-end;
		padding-inline-end: 10px;
	}

	#masthead .elementor-5221 .elementor-element-353377a {
		--justify-content: space-between;
	}

	#masthead .elementor-5221 .elementor-element-32164cd {
		--width: 70%;
		--justify-content: flex-start;
	}

	#masthead .elementor-5221 .elementor-element-dfb87c5 {
		--width: 30%;
		--justify-content: flex-end;
		padding-inline-end: 10px;
	}

	#masthead .elementor-4627 .elementor-element-6b21c82 img {
		width: clamp(164px, 54vw, 192px);
	}

	#masthead .elementor-5221 .elementor-element-35e1aeb img {
		width: clamp(150px, 48vw, 176px);
	}
}

@media (max-width: 359px) {
	#masthead .elementor-4627 .elementor-element-6b21c82 img {
		width: min(156px, 50vw);
	}

	#masthead .elementor-5221 .elementor-element-35e1aeb img {
		width: min(144px, 46vw);
	}
}

@media (prefers-reduced-motion: reduce) {
	#masthead :is(.elementor-4627, .elementor-5221) *,
	#masthead :is(.elementor-4627, .elementor-5221) *::before,
	#masthead :is(.elementor-4627, .elementor-5221) *::after {
		scroll-behavior: auto;
		transition-duration: 0.01ms;
		animation-duration: 0.01ms;
		animation-iteration-count: 1;
	}
}