/* =========================================================================
   UNEC Starkgen — Site Footer
   Figma: Footer/Yellow — node 88:3608 (file Q5ckGwby9XewAE51OXln5p)

   Every rule is scoped under #top — Enfold's body id — so the module wins
   specificity over the theme's own styles without !important. Keep new rules
   in the same form: `#top .unec_ftr_thing { … }`, never a bare class.
   The only deliberate exceptions are the two rules directly below.
   ========================================================================= */

/* -------------------------------------------------------------------------
   #top — also the Go Top target
   -------------------------------------------------------------------------
   The Go Top button is a real anchor: <a href="#top">. Two things make that
   work everywhere:

   1. If the theme has an element with id="top" (Enfold's page wrapper does),
      the browser scrolls to it and the scroll-margin below keeps it clear of
      the fixed navigation.
   2. If nothing has that id, "#top" is still valid — the HTML spec defines
      the bare fragment "top" as the top of the document — so the link works
      with no markup and no JS.

   scroll-behavior handles the animation natively; the JS is only a fallback
   for browsers without it. Deliberately not styled beyond scroll-margin:
   #top is a layout wrapper in some themes and must not be repositioned.
   ------------------------------------------------------------------------- */

#top {
	scroll-margin-top: var(--unec_nav_h, 0px);
}

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

#top .unec_ftr {
	--unec_ink: #231f20;
	--unec_yellow: #ffc20e;
	--unec_hairline: rgba(35, 31, 32, 0.2);
	--unec_muted: rgba(35, 31, 32, 0.64);
	--unec_ftr_font: "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--unec_ftr_bg: #ffffff;
	--unec_ftr_pad_top: 160px;
	--unec_ftr_pad_bottom: 48px;

	position: relative;
	box-sizing: border-box;
	padding: var(--unec_ftr_pad_top) 0 var(--unec_ftr_pad_bottom);
	background: var(--unec_ftr_bg);
	color: var(--unec_ink);
	font-family: var(--unec_ftr_font);
	-webkit-font-smoothing: antialiased;
}

#top .unec_ftr *,
#top .unec_ftr *::before,
#top .unec_ftr *::after {
	box-sizing: border-box;
}

#top .unec_ftr a {
	color: inherit;
	text-decoration: none;
}

#top .unec_ftr ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

#top .unec_ftr p {
	margin: 0;
}

#top .unec_ftr_container {
	width: min(100% - 40px, 1408px);
	margin-inline: auto;
}

/* ---------------------------------------------------------------- top block */

#top .unec_ftr_top {
	margin-bottom: 80px;
}

#top .unec_ftr_top_inner {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 64px;
}

#top .unec_ftr_logo {
	display: block;
	flex: 0 0 auto;
	line-height: 0;
}

#top .unec_ftr_logo img {
	display: block;
	width: 175.49px;
	height: 40px;
	object-fit: contain;
}

#top .unec_ftr_cols {
	display: flex;
	align-items: flex-start;
	gap: 64px;
}

#top .unec_ftr_col {
	flex: 0 0 auto;
	min-width: 0;
}

#top .unec_ftr_col_1,
#top .unec_ftr_col_socials {
	width: 225px;
}

/* Heading + hairline.
   Line-height 30 renders a 14px cap height with 8px of leading either side —
   the -8px top margin and 12px bottom gap reproduce Figma's trimmed text box
   (title cap top at 0, rule at y=34). */
#top .unec_ftr_col_title {
	margin: -8px 0 12px;
	font-size: 20px;
	font-weight: 500;
	line-height: 30px;
	letter-spacing: -0.2px;
	color: var(--unec_ink);
}

#top .unec_ftr_rule {
	display: block;
	width: 100%;
	height: 1px;
	margin-bottom: 20px;
	background: var(--unec_hairline);
}

/* ---------------------------------------------------------------- link lists */

#top .unec_ftr_list {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

#top .unec_ftr_item {
	display: flex;
}

#top .unec_ftr_link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 17px;
	font-weight: 400;
	line-height: 16px;
	color: var(--unec_ink);
	transition: color 0.18s ease;
}

#top .unec_ftr_chevron {
	flex: 0 0 16px;
	width: 16px;
	height: 16px;
	transition: transform 0.18s ease;
}

/* Reserve the medium-weight width so the hover state never reflows. */
#top .unec_ftr_label::after {
	content: attr(data-text);
	display: block;
	height: 0;
	overflow: hidden;
	font-weight: 500;
	visibility: hidden;
	pointer-events: none;
}

#top .unec_ftr_link:hover .unec_ftr_label,
#top .unec_ftr_link:focus-visible .unec_ftr_label,
#top .unec_ftr_item_current > .unec_ftr_link .unec_ftr_label {
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 3px;
}

#top .unec_ftr_link:hover .unec_ftr_chevron,
#top .unec_ftr_link:focus-visible .unec_ftr_chevron {
	transform: translateX(2px);
}

/* ---------------------------------------------------------------- socials */

#top .unec_ftr_socials {
	display: flex;
	align-items: center;
	gap: 4px;
	flex-wrap: wrap;
}

#top .unec_ftr_social {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 12px;
	background: var(--unec_yellow);
	color: var(--unec_ink);
	transition: background-color 0.18s ease, color 0.18s ease;
}

#top .unec_ftr_social svg {
	width: 20px;
	height: 20px;
}

#top .unec_ftr_social:hover,
#top .unec_ftr_social:focus-visible {
	background: var(--unec_ink);
	color: var(--unec_yellow);
}

/* ---------------------------------------------------------------- contact bar */

#top .unec_ftr_contact {
	position: relative;
	border-top: 1px solid var(--unec_hairline);
	border-bottom: 1px solid var(--unec_hairline);
}

#top .unec_ftr_contact_inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
	width: min(100% - 40px, 1257px);
	min-height: 147px; /* + the two 1px hairlines = the 149px band in Figma */
	margin-inline: auto;
	padding: 20px 0;
}

#top .unec_ftr_contact_item {
	display: flex;
	align-items: center;
	gap: 20px;
	min-width: 0;
}

#top .unec_ftr_contact_icon {
	display: flex;
	flex: 0 0 48px;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	color: var(--unec_ink);
}

/* The contact icons are drawn on a 48 grid with their own padding baked in,
   so the glyph fills the frame rather than sitting inside it. */
#top .unec_ftr_contact_icon svg {
	width: 48px;
	height: 48px;
}

#top .unec_ftr_contact_text {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
}

#top .unec_ftr_contact_label {
	font-size: 17px;
	font-weight: 400;
	line-height: 20px;
	color: var(--unec_muted);
}

#top .unec_ftr_contact_value {
	font-size: 20px;
	font-weight: 500;
	line-height: 24px;
	letter-spacing: -0.2px;
	color: var(--unec_ink);
	transition: color 0.18s ease;
}

#top a.unec_ftr_contact_value:hover,
#top a.unec_ftr_contact_value:focus-visible {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ---------------------------------------------------------------- go top */

#top .unec_ftr_gotop {
	position: absolute;
	top: -1px;
	right: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	width: 70px;
	height: calc(100% + 2px); /* cover the hairlines, like the Figma block */
	padding: 20px 20px 24px;
	background: var(--unec_yellow);
	color: var(--unec_ink);
	text-align: center;
	transition: background-color 0.18s ease, color 0.18s ease;
}

#top .unec_ftr_gotop svg {
	width: 24px;
	height: 24px;
	transition: transform 0.18s ease;
}

#top .unec_ftr_gotop_label {
	font-size: 17px;
	font-weight: 500;
	line-height: 17px;
}

#top .unec_ftr_gotop:hover,
#top .unec_ftr_gotop:focus-visible {
	background: var(--unec_ink);
	color: var(--unec_yellow);
}

#top .unec_ftr_gotop:hover svg,
#top .unec_ftr_gotop:focus-visible svg {
	transform: translateY(-3px);
}

/* ---------------------------------------------------------------- bottom bar */

#top .unec_ftr_bottom {
	margin-top: 48px;
}

#top .unec_ftr_bottom_inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

#top .unec_ftr_copy {
	font-size: 17px;
	font-weight: 400;
	line-height: 16px;
	color: var(--unec_muted);
}

#top .unec_ftr_brand {
	font-weight: 500;
	color: var(--unec_ink);
	text-decoration: underline;
	text-underline-offset: 3px;
}

#top .unec_ftr_legal {
	flex-direction: row;
	gap: 16px;
	flex-wrap: wrap;
}

/* ---------------------------------------------------------------- focus */

#top .unec_ftr a:focus-visible {
	outline: 2px solid var(--unec_ink);
	outline-offset: 3px;
}

/* =========================================================================
   Responsive
   ========================================================================= */

/* Keep the contact row clear of the Go Top block. */
@media (max-width: 1400px) {
	#top .unec_ftr_contact_inner {
		width: 100%;
		padding: 20px 100px 20px 40px;
	}
}

@media (max-width: 1280px) {
	#top .unec_ftr {
		--unec_ftr_pad_top: 112px;
	}

	#top .unec_ftr_top_inner {
		flex-direction: column;
		gap: 56px;
	}

	#top .unec_ftr_cols {
		width: 100%;
		justify-content: space-between;
		gap: 40px;
	}
}

@media (max-width: 1024px) {
	#top .unec_ftr {
		--unec_ftr_pad_top: 88px;
	}

	#top .unec_ftr_top {
		margin-bottom: 56px;
	}

	#top .unec_ftr_contact_inner {
		flex-wrap: wrap;
		gap: 32px 40px;
		padding: 32px 100px 32px 20px;
	}

	#top .unec_ftr_contact_item {
		flex: 1 1 260px;
	}
}

@media (max-width: 768px) {
	#top .unec_ftr {
		--unec_ftr_pad_top: 64px;
		--unec_ftr_pad_bottom: 40px;
	}

	#top .unec_ftr_cols {
		flex-direction: column;
		gap: 40px;
	}

	#top .unec_ftr_col,
	#top .unec_ftr_col_1,
	#top .unec_ftr_col_socials {
		width: 100%;
	}

	#top .unec_ftr_contact_inner {
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		gap: 28px;
		min-height: 0;
		padding: 32px 20px 96px;
	}

	#top .unec_ftr_contact_item {
		flex: 0 0 auto;
		width: 100%;
	}

	#top .unec_ftr_gotop {
		top: auto;
		bottom: 0;
		right: 0;
		left: 0;
		flex-direction: row;
		gap: 8px;
		width: 100%;
		height: 64px;
		padding: 0 20px;
	}

	#top .unec_ftr_gotop_label {
		line-height: 24px;
		white-space: nowrap;
	}

	#top .unec_ftr_bottom {
		margin-top: 32px;
	}

	#top .unec_ftr_bottom_inner {
		flex-direction: column;
		align-items: flex-start;
		gap: 20px;
	}

	#top .unec_ftr_copy {
        line-height: 22px;
        font-size: 15px;
    }
	
	#top .unec_ftr_link {
		font-size: 15px;
		line-height: 16px;
	}
	
	#top .unec_ftr_contact_value {
		font-size: 16px;
		line-height: 20px;
	}
	
	#top .unec_ftr_contact_label {
		font-size: 15px;
		line-height: 1;
	}
	
	#top .unec_ftr_contact_icon svg {
		width: 36px;
		height: 36px;
	}
	
	#top .unec_ftr_contact_item {
		gap: 10px;
	}
}

@media (prefers-reduced-motion: reduce) {
	#top .unec_ftr * {
		transition: none !important;
	}
}