/* =========================================================================
   UniKlinger — Header & Footer Styles
   Matches Figma: top nav with logo center-ish, search, language, Contact CTA;
   Footer with logo + tagline + pink curve + nav columns.
   ========================================================================= */

/* =========================================================================
   HEADER
   ========================================================================= */
.ukl-header {
	position: sticky;
	top: 0;
	left: 0;
	width: 100%;
	z-index: var(--ukl-z-header);
	background: var(--ukl-white);
	border-bottom: 1px solid var(--ukl-border-soft);
	transition: box-shadow var(--ukl-duration) var(--ukl-ease);
}
.ukl-header.is-scrolled { box-shadow: var(--ukl-shadow-sm); }

.ukl-header__inner {
	max-width: var(--ukl-container-wide);
	margin: 0 auto;
	padding: 0 var(--ukl-space-5);
	min-height: var(--ukl-header-height);
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: var(--ukl-space-5);
}

/* --- Left side: primary navigation --- */
.ukl-nav { justify-self: start; }
.ukl-nav__list {
	display: flex;
	align-items: center;
	gap: var(--ukl-space-6);
	margin: 0;
	padding: 0;
	list-style: none;
}
.ukl-nav__item { position: relative; }
.ukl-nav__link {
	font-family: var(--ukl-font-body);
	font-size: 1rem;
	font-weight: 600;
	color: var(--ukl-text-dark);
	padding: 0.5rem 0;
	position: relative;
	transition: color var(--ukl-duration) var(--ukl-ease);
}
.ukl-nav__link::after {
	content: '';
	position: absolute;
	left: 0; right: 100%;
	bottom: -4px;
	height: 2px;
	background: var(--ukl-gradient);
	transition: right var(--ukl-duration) var(--ukl-ease);
}
.ukl-nav__link:hover { color: var(--ukl-blue); }
.ukl-nav__link:hover::after,
.ukl-nav__item.current-menu-item > .ukl-nav__link::after { right: 0; }

/* Submenu */
.ukl-nav__submenu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 240px;
	background: var(--ukl-white);
	border: 1px solid var(--ukl-border-soft);
	border-radius: var(--ukl-radius);
	box-shadow: var(--ukl-shadow-md);
	padding: var(--ukl-space-2);
	margin: 0;
	list-style: none;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity var(--ukl-duration) var(--ukl-ease),
				transform var(--ukl-duration) var(--ukl-ease),
				visibility var(--ukl-duration) var(--ukl-ease);
}
.ukl-nav__item:hover > .ukl-nav__submenu,
.ukl-nav__item:focus-within > .ukl-nav__submenu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.ukl-nav__submenu li a {
	display: block;
	padding: 0.625rem 0.875rem;
	font-size: 0.9375rem;
	color: var(--ukl-text-body);
	border-radius: var(--ukl-radius-sm);
}
.ukl-nav__submenu li a:hover { background: var(--ukl-bg-light); color: var(--ukl-pink); }

/* --- Center: logo --- */
.ukl-header__logo { justify-self: center; }
.ukl-header__logo img,
.ukl-header__logo .custom-logo {
	max-height: 56px;
	width: auto;
	display: block;
}

/* Text logo fallback (only when no image logo set) */
.ukl-logo-text {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	font-family: var(--ukl-font-heading);
	font-weight: 800;
	font-size: 1.75rem;
	letter-spacing: 0.04em;
	line-height: 1;
	color: var(--ukl-blue);
}
.ukl-logo-text small {
	font-family: var(--ukl-font-body);
	font-size: 0.5625rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	color: var(--ukl-text-muted);
	margin-top: 4px;
}
.ukl-logo-u, .ukl-logo-l { color: var(--ukl-blue); }
.ukl-logo-k { color: var(--ukl-pink); }

/* --- Right side: actions --- */
.ukl-header__actions {
	justify-self: end;
	display: flex;
	align-items: center;
	gap: var(--ukl-space-4);
}

/* Search */
.ukl-search {
	position: relative;
	width: 280px;
}
.ukl-search__input {
	width: 100%;
	height: 44px;
	padding: 0 44px 0 16px;
	background: var(--ukl-bg-light);
	border: 1px solid transparent;
	border-radius: var(--ukl-radius-pill);
	font-family: var(--ukl-font-body);
	font-size: 0.9375rem;
	color: var(--ukl-text-dark);
	transition: border-color var(--ukl-duration) var(--ukl-ease),
				background var(--ukl-duration) var(--ukl-ease);
}
.ukl-search__input::placeholder { color: var(--ukl-text-muted); }
.ukl-search__input:focus {
	outline: none;
	background: var(--ukl-white);
	border-color: var(--ukl-pink);
}
.ukl-search__btn {
	position: absolute;
	right: 4px; top: 50%;
	transform: translateY(-50%);
	width: 36px; height: 36px;
	border-radius: 50%;
	background: transparent;
	color: var(--ukl-text-dark);
	border: none;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background var(--ukl-duration) var(--ukl-ease), color var(--ukl-duration) var(--ukl-ease);
}
.ukl-search__btn:hover { background: var(--ukl-gradient); color: var(--ukl-white); }
.ukl-search__clear {
	position: absolute;
	right: 44px; top: 50%;
	transform: translateY(-50%);
	width: 24px; height: 24px;
	border-radius: 50%;
	background: var(--ukl-text-light);
	color: var(--ukl-white);
	border: none;
	cursor: pointer;
	display: none;
	align-items: center;
	justify-content: center;
	font-size: 0.7rem;
}
.ukl-search.has-value .ukl-search__clear { display: inline-flex; }

/* Search dropdown — live autocomplete (per screenshot) */
.ukl-search__dropdown {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	right: 0;
	background: var(--ukl-white);
	border-radius: var(--ukl-radius-md);
	box-shadow: var(--ukl-shadow-md);
	border: 1px solid var(--ukl-border-soft);
	max-height: 420px;
	overflow-y: auto;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity var(--ukl-duration) var(--ukl-ease),
				transform var(--ukl-duration) var(--ukl-ease),
				visibility var(--ukl-duration) var(--ukl-ease);
	z-index: var(--ukl-z-dropdown);
}
.ukl-search.is-open .ukl-search__dropdown {
	opacity: 1; visibility: visible; transform: translateY(0);
}
/* Custom scrollbar in dropdown (matches Figma where right edge has a thin pink line) */
.ukl-search__dropdown::-webkit-scrollbar { width: 4px; }
.ukl-search__dropdown::-webkit-scrollbar-thumb {
	background: var(--ukl-gradient);
	border-radius: 999px;
}
.ukl-search__results { list-style: none; margin: 0; padding: 0.5rem 0; }
.ukl-search__results li a {
	display: block;
	padding: 0.75rem 1rem;
	font-size: 0.9375rem;
	color: var(--ukl-text-body);
	transition: background var(--ukl-duration) var(--ukl-ease), color var(--ukl-duration) var(--ukl-ease);
}
.ukl-search__results li a:hover { background: var(--ukl-bg-light); color: var(--ukl-pink); }
.ukl-search__empty {
	padding: var(--ukl-space-4);
	text-align: center;
	color: var(--ukl-text-muted);
	font-size: var(--ukl-fs-small);
}

/* Language switcher (static, English only — kept as visual element) */
.ukl-lang {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-family: var(--ukl-font-body);
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--ukl-text-dark);
	cursor: default;
	user-select: none;
}
.ukl-lang svg { width: 12px; height: 12px; }

/* Contact CTA — inline arrow style with underline */
.ukl-header__cta {
	font-family: var(--ukl-font-body);
	font-size: 1rem;
	font-weight: 600;
	color: var(--ukl-text-dark);
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 0;
	position: relative;
}
.ukl-header__cta::after {
	content: '';
	position: absolute;
	left: 0; right: 0;
	bottom: 0;
	height: 2px;
	background: var(--ukl-gradient);
}
.ukl-header__cta:hover { color: var(--ukl-pink); }

/* Hamburger toggle (mobile) */
.ukl-hamburger {
	display: none;
	width: 44px; height: 44px;
	background: transparent;
	border: none;
	cursor: pointer;
	align-items: center;
	justify-content: center;
	padding: 0;
}
.ukl-hamburger__icon {
	width: 26px;
	height: 2px;
	background: var(--ukl-text-dark);
	position: relative;
	transition: background var(--ukl-duration) var(--ukl-ease);
}
.ukl-hamburger__icon::before,
.ukl-hamburger__icon::after {
	content: '';
	position: absolute;
	left: 0; right: 0;
	height: 2px;
	background: var(--ukl-text-dark);
	transition: transform var(--ukl-duration) var(--ukl-ease), top var(--ukl-duration) var(--ukl-ease);
}
.ukl-hamburger__icon::before { top: -8px; }
.ukl-hamburger__icon::after  { top:  8px; }
.ukl-hamburger.is-active .ukl-hamburger__icon { background: transparent; }
.ukl-hamburger.is-active .ukl-hamburger__icon::before { top: 0; transform: rotate(45deg); }
.ukl-hamburger.is-active .ukl-hamburger__icon::after  { top: 0; transform: rotate(-45deg); }

/* =========================================================================
   MOBILE MENU PANEL (overlay with pink curve, per Figma)
   ========================================================================= */
.ukl-mobile-menu {
	position: fixed;
	top: 0; left: 0;
	width: 100%; height: 100vh;
	background: var(--ukl-white);
	z-index: calc(var(--ukl-z-header) - 1);
	padding: calc(var(--ukl-header-height-mobile) + 16px) var(--ukl-space-5) var(--ukl-space-5);
	overflow-y: auto;
	overflow-x: hidden;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-12px);
	transition: opacity var(--ukl-duration-slow) var(--ukl-ease),
				transform var(--ukl-duration-slow) var(--ukl-ease),
				visibility var(--ukl-duration-slow) var(--ukl-ease);
}
.ukl-mobile-menu.is-open { opacity: 1; visibility: visible; transform: translateY(0); }

/* Decorative pink curve from Figma */
.ukl-mobile-menu::before {
	content: '';
	position: absolute;
	right: -200px; bottom: -200px;
	width: 700px; height: 700px;
	border-radius: 50%;
	background: var(--ukl-curve-pink);
	pointer-events: none;
	filter: blur(8px);
	z-index: 0;
}
.ukl-mobile-menu > * { position: relative; z-index: 1; }

.ukl-mobile-menu__list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.ukl-mobile-menu__list li {
	border-bottom: 1px solid var(--ukl-border);
}
.ukl-mobile-menu__list li a {
	display: block;
	padding: 1.25rem 0;
	font-family: var(--ukl-font-heading);
	font-size: 1.25rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ukl-text-dark);
}

.ukl-mobile-menu__cta {
	position: absolute;
	bottom: var(--ukl-space-7);
	left: var(--ukl-space-5);
	z-index: 2;
}

/* =========================================================================
   FOOTER
   ========================================================================= */
.ukl-footer {
	position: relative;
	background: var(--ukl-white);
	padding: var(--ukl-space-10) 0 var(--ukl-space-5);
	overflow: hidden;
	margin-top: var(--ukl-space-9);
}

/* The signature pink curve from Figma — radial pink glow swooping under footer */
.ukl-footer::before {
	content: '';
	position: absolute;
	left: 50%;
	top: 30%;
	transform: translateX(-50%);
	width: 1200px;
	height: 700px;
	border-radius: 50%;
	background: var(--ukl-curve-pink);
	filter: blur(20px);
	pointer-events: none;
	z-index: 0;
}

.ukl-footer__inner {
	position: relative;
	z-index: 1;
	max-width: var(--ukl-container-wide);
	margin: 0 auto;
	padding: 0 var(--ukl-space-5);
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr;
	gap: var(--ukl-space-7);
	align-items: flex-start;
}

.ukl-footer__brand {
	max-width: 320px;
}
.ukl-footer__logo img,
.ukl-footer__logo .custom-logo {
	max-height: 56px;
	width: auto;
	display: block;
	margin-bottom: var(--ukl-space-4);
}
.ukl-footer__tagline {
	font-family: var(--ukl-font-body);
	font-size: 1rem;
	color: var(--ukl-text-dark);
	margin: 0 0 var(--ukl-space-6);
	font-weight: 500;
}
.ukl-footer__social-label {
	font-size: 0.9375rem;
	font-weight: 500;
	color: var(--ukl-text-body);
	display: inline-flex;
	align-items: center;
	gap: var(--ukl-space-3);
	margin-top: var(--ukl-space-7);
}
.ukl-footer__social a {
	display: inline-flex;
	width: 36px; height: 36px;
	border: 1.5px solid var(--ukl-text-dark);
	border-radius: 6px;
	align-items: center;
	justify-content: center;
	color: var(--ukl-text-dark);
	transition: background var(--ukl-duration) var(--ukl-ease),
				color var(--ukl-duration) var(--ukl-ease),
				border-color var(--ukl-duration) var(--ukl-ease);
}
.ukl-footer__social a:hover {
	background: var(--ukl-gradient);
	color: var(--ukl-white);
	border-color: transparent;
}

.ukl-footer__col ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--ukl-space-4);
}
.ukl-footer__col li a {
	color: var(--ukl-text-dark);
	font-size: 1rem;
	font-weight: 500;
	transition: color var(--ukl-duration) var(--ukl-ease), padding-left var(--ukl-duration) var(--ukl-ease);
}
.ukl-footer__col li a:hover {
	color: var(--ukl-pink);
	padding-left: 4px;
}

.ukl-footer__bottom {
	position: relative;
	z-index: 1;
	max-width: var(--ukl-container-wide);
	margin: var(--ukl-space-9) auto 0;
	padding: var(--ukl-space-4) var(--ukl-space-5) 0;
	border-top: 1px solid var(--ukl-border);
	text-align: center;
	font-size: var(--ukl-fs-small);
	color: var(--ukl-text-muted);
}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 1199px) {
	.ukl-search { width: 200px; }
	.ukl-header__inner { gap: var(--ukl-space-3); }
	.ukl-nav__list { gap: var(--ukl-space-4); }
}

@media (max-width: 1024px) {
	.ukl-header__inner {
		grid-template-columns: auto 1fr auto;
		min-height: var(--ukl-header-height-mobile);
	}
	.ukl-nav, .ukl-search, .ukl-lang, .ukl-header__cta { display: none; }
	.ukl-hamburger { display: inline-flex; }
	.ukl-header__logo { justify-self: center; }
	.ukl-header__logo img { max-height: 44px; }
	.ukl-header__actions { gap: var(--ukl-space-2); }

	.ukl-footer__inner {
		grid-template-columns: 1fr 1fr;
		gap: var(--ukl-space-6);
	}
	.ukl-footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 600px) {
	.ukl-footer__inner { grid-template-columns: 1fr; }
	.ukl-footer__col ul { gap: var(--ukl-space-3); }
}