/**
 * Site header — from Figma node 27:502 "Header" (description):
 * container=Narrow(<960px): logo + hamburger menu button.
 * container=Medium(960-1279px): logo + 4-item nav + CTA. Phone/LINE hidden.
 * container=Wide(>=1280px): logo + nav + phone + LINE + CTA.
 *
 * Sourced via get_design_context on instances 27:503 (Narrow/390) and
 * 27:514 (Wide/1440). The Medium state is not a separate captured instance;
 * it is derived from the component description (Wide layout minus the
 * phone/LINE actions) — confirm against Figma if it looks off once the
 * 960-1279px range is actually viewed.
 */

.site-header {
	container-type: inline-size;
	container-name: header;
	border-bottom: 1px solid var(--color-border-base);
	background-color: var(--color-bg-base);
}

.site-header__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-block: 12px;
	max-width: 1280px;
	margin-inline: auto;
	padding-inline: var(--container-px);
}

/* -- Logo -- */

.site-header__logo {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	text-decoration: none;
}

.site-header__logo-img--wide {
	display: none;
}

.site-header__logo-sub {
	font: 500 11px/1.3 var(--font-sans);
	letter-spacing: 0.88px; /* 8% of 11px */
	color: var(--color-text-accent);
}

/* -- Menu toggle (Narrow only) -- */

.site-header__menu-toggle {
	display: flex;
	align-items: center;
	gap: 8px;
	height: 44px;
	padding: 14px 16px 14px 14px;
	background-color: var(--color-bg-base);
	border: 1.5px solid var(--color-brand-primary);
	border-radius: var(--radius-full);
}

.site-header__hamburger {
	position: relative;
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}

.site-header__hamburger span {
	position: absolute;
	left: 0;
	width: 18px;
	height: 2.5px;
	border-radius: 2px;
	background-color: var(--color-brand-primary);
	transition: transform 0.2s ease, opacity 0.2s ease, top 0.2s ease;
}

.site-header__hamburger span:nth-child(1) {
	top: 3px;
}

.site-header__hamburger span:nth-child(2) {
	top: 8px;
}

.site-header__hamburger span:nth-child(3) {
	top: 13px;
}

.site-header__close-icon {
	display: none;
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}

.site-header__menu-toggle[aria-expanded="true"] .site-header__hamburger {
	display: none;
}

.site-header__menu-toggle[aria-expanded="true"] .site-header__close-icon {
	display: block;
}

.site-header__menu-toggle-label {
	font: 700 14px/1.5 var(--font-sans);
	color: var(--color-text-accent);
}

.site-header__menu-toggle .is-open-label {
	display: none;
}

.site-header__menu-toggle[aria-expanded="true"] .is-closed-label {
	display: none;
}

.site-header__menu-toggle[aria-expanded="true"] .is-open-label {
	display: inline;
}

/* -- Nav + actions (Medium and up) -- */

.site-header__nav,
.site-header__actions {
	display: none;
}

.site-header__nav ul {
	display: flex;
	align-items: center;
	gap: 32px;
}

.site-header__nav a {
	font: 500 15px/1.5 var(--font-sans);
	color: var(--color-text-primary);
	text-decoration: none;
}

.site-header__actions {
	align-items: center;
	gap: 12px;
}

.site-header__tel {
	display: none; /* Wide only */
	align-items: center;
	gap: 6px;
	text-decoration: none;
}

.site-header__tel-number {
	display: block;
	font: 700 18px/1.2 var(--font-dm-sans);
	color: var(--color-text-accent);
}

.site-header__tel-label {
	display: block;
	font: 500 10px/1.3 var(--font-sans);
	color: var(--color-text-primary);
}

.site-header__line {
	display: none; /* Wide only */
	align-items: center;
	gap: 6px;
	height: 40px;
	padding: 0 16px 0 14px;
	background-color: var(--color-bg-base);
	border: 1.5px solid var(--color-brand-primary);
	border-radius: var(--radius-full);
	text-decoration: none;
	font: 700 14px/1 var(--font-sans);
	color: var(--color-text-accent);
}

.site-header__line .icon--external {
	width: 16px;
	height: 16px;
}

@container header (min-width: 960px) {
	.site-header__menu-toggle {
		display: none;
	}

	.site-header__logo-img--narrow {
		display: none;
	}

	.site-header__logo-img--wide {
		display: block;
	}

	.site-header__nav,
	.site-header__actions {
		display: flex;
	}
}

@container header (min-width: 1280px) {
	.site-header__tel,
	.site-header__line {
		display: flex;
	}
}

/* -- Mobile menu overlay (node 163:477 "SP Menu (open)") --
 * Narrow (<720): full-screen takeover, no backdrop.
 * Drawer (720-959): 400px panel pinned right, dimmed backdrop over the
 * page (rgba(10,12,30,.5)), tap-outside-to-close. Hidden entirely at
 * >=960 (header shows the full nav instead, see the rule at the bottom).
 */

.site-mobile-menu {
	position: fixed;
	inset: 0;
	z-index: 100;
}

.site-mobile-menu[hidden] {
	display: none;
}

.site-mobile-menu__panel {
	display: flex;
	flex-direction: column;
	height: 100%;
	background-color: var(--color-bg-base);
	overflow-y: auto;
}

.site-mobile-menu__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 20px;
	border-bottom: 1px solid var(--color-border-base);
}

.site-mobile-menu__logo {
	display: flex;
	flex-direction: column;
	gap: 4px;
	text-decoration: none;
}

.site-mobile-menu__logo-sub {
	font: 500 11px/1.3 var(--font-sans);
	letter-spacing: 0.88px; /* 8% of 11px */
	color: var(--color-text-accent);
}

.site-mobile-menu__close {
	display: flex;
	align-items: center;
	gap: 8px;
	height: 44px;
	padding: 14px 16px;
	background-color: var(--color-bg-base);
	border: 1.5px solid var(--color-brand-primary);
	border-radius: var(--radius-full);
	font: 700 14px/1.5 var(--font-sans);
	color: var(--color-text-accent);
}

.site-mobile-menu__close svg {
	width: 18px;
	height: 18px;
}

.site-mobile-menu__nav {
	padding: 8px 20px 0;
}

.site-mobile-menu__nav li {
	border-bottom: 1px solid var(--color-border-base);
}

.site-mobile-menu__nav a {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 56px;
	padding-block: 16px;
	text-decoration: none;
}

.site-mobile-menu__nav-text {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	min-width: 0;
}

.site-mobile-menu__nav-eyebrow {
	font: 700 11px/1.4 var(--font-dm-sans);
	letter-spacing: 0.66px; /* 6% of 11px */
	color: var(--color-text-accent);
}

.site-mobile-menu__nav-label {
	font: 700 18px/1.5 var(--font-sans);
	color: var(--color-text-primary);
}

.site-mobile-menu__nav-arrow {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
}

.site-mobile-menu__sublinks {
	padding: 14px 20px;
}

.site-mobile-menu__sublinks a {
	font: 400 13px/1.6 var(--font-sans);
	color: var(--color-text-primary);
	text-decoration: none;
}

.site-mobile-menu__spacer {
	flex: 1 0 0;
	min-height: 24px;
}

/* The consultation bar reused inside the menu sits in normal flow, not
   fixed — it's a copy standing in for the page's own fixed bar, which
   would otherwise be covered while the menu is open. */
.site-mobile-menu .consultation-bar {
	position: static;
}

@container header (min-width: 720px) {
	.site-mobile-menu {
		background-color: rgb(10 12 30 / 0.5);
		display: flex;
		justify-content: flex-end;
	}

	.site-mobile-menu__panel {
		width: 400px;
		flex-shrink: 0;
		box-shadow: -8px 0 16px rgba(13, 15, 38, 0.18);
	}
}

@container header (min-width: 960px) {
	.site-mobile-menu {
		display: none;
	}
}