/* ==========================================================================
   Unec Starkgen - Main Navigation
   Figma: UnecStarkgen 142:3663 (nav) / 142:4955 (dropdown)
          144:6333 (black on yellow) / 142:2712 (black on white, posts)
   v1.5.4

   Every rule is scoped to #top so it outweighs Enfold/Avia's own ID-scoped
   resets. Where Enfold styles a bare element (#top a, #top ul, #top img,
   #top input[type="search"], #top button ...) the selector here also names the
   element, so specificity stays ahead of those rules without !important.

   IMPORTANT: the nav must render INSIDE <div id="top"> for these rules to
   apply - i.e. call unec_main_navigation() in header.php after Enfold opens
   #top, not on wp_body_open (which fires before it).
   ========================================================================== */

:root {
	--unec_white: #ffffff;
	--unec_dark: #231f20;
	--unec_yellow: #ffc20e;

	--unec_font: "Pretendard", "Pretendard Variable", -apple-system, BlinkMacSystemFont,
		"Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	/* Figma frame: 1728 wide, 160px side padding, 32px top padding. */
	--unec_nav_max: 1728px;
	--unec_nav_pad_x: clamp(20px, 9.2593vw, 160px);
	--unec_nav_pad_t: 32px;
	--unec_nav_gap: 24px;

	--unec_nav_row1_h: 40px;
	--unec_nav_row2_h: 37px;
	--unec_nav_h: 161px; /* 32 + 40 + 32 + 37 + 20 */

	/* Colour scheme. The dark variant only re-points these four - every rule
	   below is shared between both variants. */
	--unec_nav_ink: var(--unec_white);      /* text, icons, rules */
	--unec_nav_solid: var(--unec_dark);     /* bar colour once scrolled */
	--unec_nav_rule: rgba(255, 255, 255, 0.2);
	--unec_nav_hairline: rgba(255, 255, 255, 0.08);
	/* Search glyph. Restated in full by EVERY scheme below - never written as
	   var(--unec_nav_ink). A custom property's value is substituted at the point
	   it is declared, so var(--unec_nav_ink) here resolves to #ffffff on :root and
	   inherits down as that literal; a scheme that re-points --unec_nav_ink would
	   NOT change it. That shipped a white glyph on the yellow bar in 1.5.0-1.5.2. */
	--unec_nav_accent: var(--unec_white);

	--unec_card: 180px;
	--unec_pointer: 12px;

	--unec_ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Helper for the first section under the fixed nav. */
#top .unec_nav_offset {
	padding-top: var(--unec_nav_h);
}

/* Scoped reset so the component does not inherit Enfold's box model or type.
   The font-family is restated here because Enfold sets it on bare elements
   (#top div, #top p ...), which would otherwise beat inheritance from .unec_nav.
   Safe to apply to * - every icon is inline SVG, no icon fonts. */
#top .unec_nav,
#top .unec_nav *,
#top .unec_nav *::before,
#top .unec_nav *::after {
	box-sizing: border-box;
	font-family: var(--unec_font);
}

/* Colour schemes. Each one only re-points custom properties - every rule
   below is shared by all three.
     (none)            white on dark, transparent over a hero - Figma 142:3663
     .unec_nav_yellow  black on yellow                        - Figma 144:6333
     .unec_nav_white   black on white, opaque (posts)         - Figma 142:2712
   .unec_nav_dark is the pre-1.5 name for .unec_nav_yellow, kept working. */
#top .unec_nav.unec_nav_yellow,
#top .unec_nav.unec_nav_dark {
	--unec_nav_ink: var(--unec_dark);
	--unec_nav_solid: var(--unec_yellow);
	--unec_nav_rule: rgba(35, 31, 32, 0.2);
	--unec_nav_hairline: rgba(35, 31, 32, 0.08);
	/* Glyph matches the text - Figma 144:6333 */
	--unec_nav_accent: var(--unec_dark);
}

#top .unec_nav.unec_nav_white {
	--unec_nav_ink: var(--unec_dark);
	--unec_nav_solid: var(--unec_white);
	--unec_nav_rule: rgba(35, 31, 32, 0.2);
	--unec_nav_hairline: rgba(35, 31, 32, 0.08);
	/* Only this scheme tints the search glyph - Figma 142:2712 */
	--unec_nav_accent: var(--unec_yellow);
	/* Opaque from the top: a post has no hero to sit over. */
	background-color: var(--unec_white);
}

/* --------------------------------------------------------------------------
   Shell - sticky, transparent, solid on scroll
   -------------------------------------------------------------------------- */

#top .unec_nav {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 999;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background-color: transparent;
	background-image: none;
	font-family: var(--unec_font);
	-webkit-font-smoothing: antialiased;
	transition: background-color 0.35s var(--unec_ease), box-shadow 0.35s var(--unec_ease);
}

#top .unec_nav.unec_scrolled,
#top .unec_nav.unec_dropdown_open,
#top .unec_nav.unec_mobile_open {
	background-color: var(--unec_nav_solid);
}

#top .unec_nav.unec_scrolled {
	box-shadow: 0 1px 0 var(--unec_nav_hairline);
}

#top .unec_nav .unec_nav_inner {
	max-width: var(--unec_nav_max);
	margin: 0 auto;
	padding: var(--unec_nav_pad_t) var(--unec_nav_pad_x) 20px;
}

/* Shared icon rule - size is set inline (Figma box), colour follows currentColor. */
#top .unec_nav svg.unec_icon {
	display: block;
	flex: none;
	max-width: none;
	vertical-align: baseline;
}

/* --------------------------------------------------------------------------
   Row 1 - logo + search
   -------------------------------------------------------------------------- */

#top .unec_nav .unec_nav_top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: var(--unec_nav_row1_h);
}

#top .unec_nav a.unec_nav_logo {
	display: block;
	flex: none;
	padding: 0;
	border: 0;
	line-height: 0;
	text-decoration: none;
}

#top .unec_nav img.unec_nav_logo_img {
	display: block;
	width: auto;
	height: var(--unec_nav_row1_h);
	max-width: none;
	margin: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

#top .unec_nav .unec_nav_tools {
	display: flex;
	align-items: center;
	gap: var(--unec_nav_gap);
}

/* Search - icon + 17/26 white @ 40% */
#top .unec_nav form.unec_nav_search {
	display: flex;
	align-items: center;
	gap: 6px;
	height: 20px;
	margin: 0;
	padding: 0;
}

#top .unec_nav button.unec_nav_search_btn,
#top .unec_nav button.unec_nav_burger {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	background-color: transparent;
	box-shadow: none;
	color: var(--unec_nav_ink);
	font-size: inherit;
	line-height: 1;
	text-shadow: none;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

#top .unec_nav button.unec_nav_search_btn:hover,
#top .unec_nav button.unec_nav_burger:hover,
#top .unec_nav button.unec_nav_search_btn:focus,
#top .unec_nav button.unec_nav_burger:focus {
	background: none;
	background-color: transparent;
	color: var(--unec_nav_ink);
}

/* Search glyph follows the accent, not the ink. Declared after the shared
   button rules so it wins the equal-specificity tie on :hover / :focus. */
#top .unec_nav button.unec_nav_search_btn,
#top .unec_nav button.unec_nav_search_btn:hover,
#top .unec_nav button.unec_nav_search_btn:focus {
	width: 20px;
	height: 20px;
	color: var(--unec_nav_accent);
}

#top .unec_nav input.unec_nav_search_input,
#top .unec_nav input[type="search"].unec_nav_search_input {
	width: 120px;
	height: 20px;
	min-height: 0;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 0;
	background: none;
	background-color: transparent;
	box-shadow: none;
	color: var(--unec_nav_ink);
	font-family: var(--unec_font);
	font-size: 17px;
	font-weight: 400;
	line-height: 20px;
	letter-spacing: 0;
	transition: width 0.3s var(--unec_ease);
	-webkit-appearance: none;
	appearance: none;
}

#top .unec_nav input.unec_nav_search_input::placeholder {
	color: var(--unec_nav_ink);
	opacity: 0.4;
}

#top .unec_nav input.unec_nav_search_input:focus {
	width: 240px;
	outline: none;
	background: none;
	background-color: transparent;
	border: 0;
	box-shadow: none;
	color: var(--unec_nav_ink);
}

#top .unec_nav input.unec_nav_search_input::-webkit-search-cancel-button {
	-webkit-appearance: none;
}

/* Burger - desktop hidden */
#top .unec_nav button.unec_nav_burger {
	display: none;
	width: 40px;
	height: 40px;
}

#top .unec_nav .unec_nav_burger_close {
	display: none;
}

#top .unec_nav.unec_mobile_open .unec_nav_burger_open {
	display: none;
}

#top .unec_nav.unec_mobile_open .unec_nav_burger_close {
	display: block;
}

/* --------------------------------------------------------------------------
   Row 2 - the menu columns
   -------------------------------------------------------------------------- */

#top .unec_nav .unec_nav_menu_wrap {
	margin-top: 32px;
}

#top .unec_nav ul.unec_nav_menu,
#top .unec_nav ul.unec_nav_sub {
	list-style: none;
	margin: 0;
	padding: 0;
	border: 0;
}

#top .unec_nav ul.unec_nav_menu {
	display: flex;
	align-items: flex-start;
	gap: var(--unec_nav_gap);
}

#top .unec_nav li.unec_nav_item,
#top .unec_nav li.unec_nav_card {
	margin: 0;
	padding: 0;
	border: 0;
	list-style: none;
	background-image: none;
}

#top .unec_nav li.unec_nav_item {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
	height: var(--unec_nav_row2_h);
}

/* 1px rule: 20% by default, full white on hover / current */
#top .unec_nav .unec_nav_line {
	display: block;
	width: 100%;
	height: 1px;
	background-color: var(--unec_nav_ink);
	opacity: 0.2;
	transition: opacity 0.25s var(--unec_ease);
}

#top .unec_nav li.unec_nav_item:hover > .unec_nav_line,
#top .unec_nav li.unec_nav_item:focus-within > .unec_nav_line,
#top .unec_nav li.unec_nav_item.unec_open > .unec_nav_line,
#top .unec_nav li.unec_nav_item.current-menu-item > .unec_nav_line,
#top .unec_nav li.unec_nav_item.current-menu-ancestor > .unec_nav_line,
/* WordPress marks the posts-page item with the underscore classes on a single
   post - that is what highlights "Blog" in Figma 142:2712. */
#top .unec_nav li.unec_nav_item.current-menu-parent > .unec_nav_line,
#top .unec_nav li.unec_nav_item.current_page_item > .unec_nav_line,
#top .unec_nav li.unec_nav_item.current_page_parent > .unec_nav_line,
#top .unec_nav li.unec_nav_item.current_page_ancestor > .unec_nav_line {
	opacity: 1;
}

#top .unec_nav a.unec_nav_link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	height: 24px;
	margin-top: 20px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--unec_nav_ink);
	text-decoration: none;
	text-shadow: none;
}

#top .unec_nav a.unec_nav_link:hover,
#top .unec_nav a.unec_nav_link:focus,
#top .unec_nav a.unec_nav_link:active {
	background: none;
	color: var(--unec_nav_ink);
	text-decoration: none;
}

/* Desktop/H6 - Pretendard Medium 20/30, tracking -0.2px (cap-height trimmed) */
#top .unec_nav .unec_nav_label {
	display: block;
	font-family: var(--unec_font);
	font-size: 20px;
	font-weight: 500;
	line-height: 24px;
	letter-spacing: -0.2px;
	text-transform: none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

#top .unec_nav .unec_nav_chevron {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 16px;
	height: 16px;
	opacity: 0.64;
	transform: rotate(90deg);
	transition: transform 0.3s var(--unec_ease), opacity 0.25s var(--unec_ease);
}

#top .unec_nav li.unec_nav_item.unec_open > a.unec_nav_link .unec_nav_chevron {
	opacity: 1;
	transform: rotate(-90deg);
}

#top .unec_nav .unec_nav_notice {
	margin: 0;
	color: var(--unec_nav_ink);
	font-size: 14px;
	opacity: 0.7;
}

/* --------------------------------------------------------------------------
   Dropdown - row of 180x180 cards, aligned to the parent column
   -------------------------------------------------------------------------- */

#top .unec_nav .unec_nav_dropdown {
	position: absolute;
	top: 100%;
	left: 0;
	/* Transparent bridge: keeps the panel touching the menu item so moving the
	   cursor down to the cards never leaves the item's subtree. */
	padding-top: 12px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity 0.25s var(--unec_ease), transform 0.25s var(--unec_ease),
		visibility 0s linear 0.25s;
	pointer-events: none;
}

#top .unec_nav li.unec_nav_item.unec_open > .unec_nav_dropdown {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transition-delay: 0s, 0s, 0s;
	pointer-events: auto;
}

/* 12px white pointer sitting above the card row, at the parent's left edge */
#top .unec_nav .unec_nav_pointer {
	display: block;
	width: var(--unec_pointer);
	height: var(--unec_pointer);
	background-color: var(--unec_white);
	-webkit-clip-path: polygon(0 100%, 100% 100%, 0% 0);
	clip-path: polygon(0 100%, 100% 100%, 0% 0);
}

#top .unec_nav ul.unec_nav_sub {
	display: flex;
	align-items: stretch;
}

#top .unec_nav li.unec_nav_card {
	position: relative;
	flex: none;
	width: var(--unec_card);
	height: var(--unec_card);
	background-color: var(--unec_white);
	transition: box-shadow 0.3s var(--unec_ease);
}

#top .unec_nav a.unec_nav_card_link {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-between;
	width: 100%;
	height: 100%;
	padding: 24px;
	border: 0;
	background: none;
	color: var(--unec_dark);
	text-decoration: none;
	text-shadow: none;
}

#top .unec_nav a.unec_nav_card_link:hover,
#top .unec_nav a.unec_nav_card_link:focus,
#top .unec_nav a.unec_nav_card_link:active {
	background: none;
	color: var(--unec_dark);
	text-decoration: none;
}

/* Desktop/Body_sm - Pretendard Regular 17, line-height 20 */
#top .unec_nav .unec_nav_card_label {
	display: block;
	width: 100%;
	overflow-wrap: break-word;
	font-family: var(--unec_font);
	font-size: 17px;
	font-weight: 400;
	line-height: 20px;
	letter-spacing: 0;
	text-transform: none;
}

#top .unec_nav .unec_nav_card_btn {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 32px;
	height: 32px;
	border-radius: 999px;
	background-color: var(--unec_dark);
	color: var(--unec_white);
	transition: background-color 0.25s var(--unec_ease), color 0.25s var(--unec_ease);
}

/* Hover card: raised + yellow pill with a dark arrow */
#top .unec_nav li.unec_nav_card:hover,
#top .unec_nav li.unec_nav_card:focus-within {
	z-index: 2;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08), 0 26px 28px rgba(0, 0, 0, 0.12),
		0 60px 51px rgba(0, 0, 0, 0.06);
}

#top .unec_nav li.unec_nav_card:hover .unec_nav_card_btn,
#top .unec_nav a.unec_nav_card_link:focus .unec_nav_card_btn {
	background-color: var(--unec_yellow);
	color: var(--unec_dark);
}

/* Keep the last columns' dropdowns inside the viewport. */
#top .unec_nav li.unec_nav_item:nth-last-child(-n + 3) > .unec_nav_dropdown {
	left: auto;
	right: 0;
	align-items: flex-end;
}

/* Panel is right-aligned to its own column, so pull the pointer back to the
   column's left edge (column width - pointer width). */
#top .unec_nav li.unec_nav_item:nth-last-child(-n + 3) > .unec_nav_dropdown .unec_nav_pointer {
	margin-right: calc(var(--unec_card) - var(--unec_pointer));
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media only screen and (max-width: 1440px) {
	#top .unec_nav .unec_nav_label {
		font-size: 18px;
	}
}

@media only screen and (max-width: 1200px) {
	:root {
		--unec_nav_gap: 16px;
		--unec_card: 170px;
	}

	#top .unec_nav .unec_nav_label {
		font-size: 17px;
	}
}

@media only screen and (max-width: 1024px) {
	:root {
		--unec_nav_pad_t: 20px;
		--unec_nav_h: 80px;
	}

	#top .unec_nav .unec_nav_inner {
		padding-bottom: 20px;
	}

	#top .unec_nav button.unec_nav_burger {
		display: flex;
	}

	/* Search is relocated into the burger panel by the js - full width, at the
	   bottom, under a divider matching the menu rules. */
	#top .unec_nav .unec_nav_menu_wrap form.unec_nav_search {
		width: 100%;
		height: auto;
		gap: 12px;
		margin-top: 8px;
		padding-top: 20px;
		border-top: 1px solid var(--unec_nav_rule);
	}

	#top .unec_nav .unec_nav_menu_wrap button.unec_nav_search_btn {
		width: 24px;
		height: 24px;
	}

	#top .unec_nav .unec_nav_menu_wrap input.unec_nav_search_input {
		flex: 1 1 auto;
		width: 100%;
		height: auto;
		font-size: 20px;
		line-height: 1.4;
	}

	/* Slide-down panel.
	   Height is measured against the DYNAMIC viewport. 100vh is the *large*
	   viewport - the height with the browser's url bar retracted - so on a phone
	   the panel is taller than what is actually on screen and the last items sit
	   under the browser chrome, unreachable however far you scroll. 100dvh is the
	   visible height and shrinks while the bar is showing; the vh line stays as
	   the fallback for anything without dvh support.
	   The reserve is the bar itself plus the inner's bottom padding. */
	#top .unec_nav .unec_nav_menu_wrap {
		display: none;
		margin-top: 20px;
		max-height: calc(100vh - var(--unec_nav_h) - 20px);
		max-height: calc(100dvh - var(--unec_nav_h) - 20px);
		padding-bottom: 24px;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;
	}

	#top .unec_nav.unec_mobile_open .unec_nav_menu_wrap {
		display: block;
	}

	#top .unec_nav ul.unec_nav_menu {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	#top .unec_nav li.unec_nav_item {
		height: auto;
	}

	#top .unec_nav a.unec_nav_link {
		height: auto;
		margin-top: 0;
		padding: 16px 0;
	}

	#top .unec_nav .unec_nav_label {
		font-size: 20px;
		line-height: 1.2;
		white-space: normal;
	}

	#top .unec_nav .unec_nav_chevron {
		transform: rotate(90deg);
	}

	/* Accordion instead of a floating panel */
	#top .unec_nav .unec_nav_dropdown {
		position: static;
		display: none;
		opacity: 1;
		visibility: visible;
		transform: none;
		pointer-events: auto;
		width: 100%;
		padding-top: 0;
		padding-bottom: 16px;
	}

	#top .unec_nav li.unec_nav_item.unec_open > .unec_nav_dropdown {
		display: block;
	}

	#top .unec_nav .unec_nav_pointer {
		display: none;
	}

	#top .unec_nav ul.unec_nav_sub {
		flex-direction: column;
		gap: 1px;
	}

	#top .unec_nav li.unec_nav_card {
		width: 100%;
		height: auto;
		box-shadow: none;
	}

	#top .unec_nav a.unec_nav_card_link {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding: 16px 20px;
	}

	#top .unec_nav li.unec_nav_item:nth-last-child(-n + 3) > .unec_nav_dropdown {
		left: 0;
		right: auto;
		align-items: stretch;
	}
}

@media only screen and (max-width: 600px) {
	#top .unec_nav img.unec_nav_logo_img {
		height: 32px;
	}
}

/* Motion preferences */
@media (prefers-reduced-motion: reduce) {
	#top .unec_nav,
	#top .unec_nav .unec_nav_line,
	#top .unec_nav .unec_nav_chevron,
	#top .unec_nav .unec_nav_dropdown,
	#top .unec_nav li.unec_nav_card,
	#top .unec_nav .unec_nav_card_btn,
	#top .unec_nav input.unec_nav_search_input {
		transition: none !important;
	}
}