/*
 * Header CSS: minimal white header, dropdowns, mobile drawer, and search overlay.
 */

.sl-site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 900;
	background: rgba(255, 255, 255, 0.95);
	border-bottom: 1px solid transparent;
	transition: border-color 180ms ease, box-shadow 180ms ease;
}

.sl-site-header.is-scrolled {
	border-color: var(--sl-line);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
}

.sl-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: min(calc(100% - 56px), 1440px);
	height: var(--sl-header);
	margin-inline: auto;
}

.sl-brand {
	position: relative;
	z-index: 2;
}

.sl-brand img {
	max-height: 52px;
	width: auto;
}

.sl-brand__text {
	font-size: 18px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.sl-main-nav {
	display: flex;
	align-items: center;
}

.sl-menu,
.sl-menu ul,
.sl-mobile-menu,
.sl-footer-menu {
	padding: 0;
	margin: 0;
	list-style: none;
}

.sl-menu {
	display: flex;
	align-items: center;
	gap: 34px;
}

.sl-menu > li {
	position: relative;
}

.sl-menu a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--sl-ink);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.sl-menu > li > a::after {
	content: "";
	width: 0;
	height: 1px;
	margin-left: 8px;
	background: currentColor;
	transition: width 180ms ease;
}

.sl-menu > li:hover > a::after,
.sl-menu > li:focus-within > a::after {
	width: 24px;
}

.sl-menu .sub-menu {
	position: absolute;
	top: calc(100% + 18px);
	left: -24px;
	min-width: 240px;
	padding: 18px 0;
	background: #fff;
	border: 1px solid var(--sl-line);
	box-shadow: 0 22px 60px rgba(0, 0, 0, 0.08);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity 180ms ease, transform 180ms ease, visibility 180ms ease;
}

.sl-menu .menu-item-has-children:hover > .sub-menu,
.sl-menu .menu-item-has-children:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.sl-menu .sub-menu a {
	width: 100%;
	min-height: 38px;
	padding: 0 24px;
	font-size: 11px;
	letter-spacing: 0.14em;
}

.sl-header-actions {
	display: flex;
	align-items: center;
	gap: 18px;
}

.sl-contact-link,
.sl-menu-toggle,
.sl-search-overlay__close {
	border: 0;
	background: transparent;
	color: var(--sl-ink);
}

.sl-contact-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 38px;
	padding: 0 18px;
	border: 1px solid var(--sl-ink);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	transition: background 180ms ease, color 180ms ease;
}

.sl-contact-link:hover,
.sl-contact-link:focus-visible {
	background: var(--sl-ink);
	color: #fff;
}

.sl-menu-toggle,
.sl-search-overlay__close {
	cursor: pointer;
}

.sl-menu-toggle {
	display: none;
	width: 36px;
	height: 36px;
	padding: 0;
}

.sl-menu-toggle span {
	display: block;
	width: 28px;
	height: 1px;
	margin: 7px auto;
	background: var(--sl-ink);
	transition: transform 180ms ease;
}

body.is-menu-open .sl-menu-toggle span:first-child {
	transform: translateY(4px) rotate(35deg);
}

body.is-menu-open .sl-menu-toggle span:last-child {
	transform: translateY(-4px) rotate(-35deg);
}

.sl-mobile-nav {
	display: none;
}

.sl-search-overlay {
	position: fixed;
	inset: 0;
	z-index: 1200;
	display: grid;
	place-items: center;
	background: rgba(255, 255, 255, 0.98);
}

/* Keep the search overlay truly closed until the Search button opens it. */
.sl-search-overlay[hidden] {
	display: none !important;
}

.sl-search-overlay__inner {
	width: min(720px, calc(100% - 48px));
}

.sl-search-overlay__close {
	position: absolute;
	top: 28px;
	right: 28px;
	font-size: 40px;
	line-height: 1;
}

.sl-search-overlay form {
	display: flex;
	gap: 12px;
}

.sl-search-overlay input[type="search"] {
	flex: 1;
	min-height: 58px;
	padding: 0 18px;
	border: 0;
	border-bottom: 1px solid var(--sl-ink);
	outline: 0;
}

.sl-search-overlay input[type="submit"],
.sl-search-overlay button[type="submit"] {
	min-height: 58px;
	padding: 0 22px;
	border: 1px solid var(--sl-ink);
	background: var(--sl-ink);
	color: #fff;
	cursor: pointer;
}