/* =========================================================
   Header
   ========================================================= */

.site-header {
	position: sticky;
	top: 0;
	z-index: 500;
	background: rgba(255,255,255,.9);
	backdrop-filter: saturate(180%) blur(14px);
	-webkit-backdrop-filter: saturate(180%) blur(14px);
	border-bottom: var(--jck-border-width, 1px) solid var(--jck-color-line);
	transition: box-shadow .2s ease;
}
.site-header.is-scrolled { box-shadow: var(--jck-shadow-md); }
html[data-sticky-header="true"] .site-header { position: sticky; }
html:not([data-sticky-header="true"]) .site-header { position: relative; }

.site-header__inner {
	display: flex;
	align-items: center;
	gap: 28px;
	height: var(--jck-header-height, 76px);
	padding-inline: var(--jck-header-padding-x, 20px);
	transition: height .2s ease;
}
.site-header.is-scrolled .site-header__inner {
	height: var(--jck-header-height-sticky, 64px);
}

.site-branding__link { display: inline-flex; align-items: center; }
.site-logo {
	max-width: var(--jck-logo-width, 160px);
	max-height: var(--jck-logo-height, 40px);
	width: auto;
}
.site-logo--text {
	font-family: var(--jck-font-display);
	font-weight: 800;
	font-size: 1.35rem;
	color: var(--jck-color-navy-900);
}

.main-navigation { flex: 1; display: none; }
.primary-menu, .mobile-menu { display: flex; align-items: center; gap: var(--jck-nav-spacing, 6px); }
.primary-menu > li { position: relative; }
.primary-menu > li > a {
	display: block;
	padding: 10px 14px;
	border-radius: var(--jck-radius-sm);
	font-weight: 600;
	color: var(--jck-color-ink-700);
	transition: background-color .15s ease, color .15s ease;
}
.primary-menu > li > a:hover,
.primary-menu > li.current-menu-item > a { color: var(--jck-color-navy-900); background: var(--jck-color-bg); }

.primary-menu .sub-menu {
	position: absolute;
	top: 100%;
	inset-inline-start: 0;
	min-width: 220px;
	background: var(--jck-color-surface);
	border: var(--jck-border-width, 1px) solid var(--jck-color-line);
	border-radius: var(--jck-radius-md);
	box-shadow: var(--jck-shadow-md);
	padding: 8px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity .15s ease, transform .15s ease, visibility .15s ease;
}
.primary-menu li:hover > .sub-menu,
.primary-menu li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.primary-menu .sub-menu a { display: block; padding: 10px 12px; border-radius: 8px; color: var(--jck-color-ink-700); }
.primary-menu .sub-menu a:hover { background: var(--jck-color-bg); color: var(--jck-color-navy-900); }

.site-header__actions { display: flex; align-items: center; gap: 10px; margin-inline-start: auto; }

.header-search-toggle {
	background: none; border: none;
	width: 40px; height: 40px;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 50%;
	color: var(--jck-color-ink-700);
}
.header-search-toggle:hover { background: var(--jck-color-bg); }

.header-search-panel {
	border-top: var(--jck-border-width, 1px) solid var(--jck-color-line);
	padding-block: 16px;
	background: var(--jck-color-surface);
}
.header-search-panel[hidden] { display: none; }

.header-cta { display: none; }

.mobile-menu-toggle {
	background: none; border: none;
	width: 40px; height: 40px;
	display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
}
.mobile-menu-toggle__bar {
	display: block; width: 22px; height: 2px; background: var(--jck-color-navy-900); border-radius: 2px;
	transition: transform .2s ease, opacity .2s ease;
}

/* ---- Mobile drawer ---- */
.mobile-drawer {
	position: fixed;
	top: 0; bottom: 0;
	inset-inline-end: 0;
	width: min(340px, 86vw);
	background: var(--jck-color-surface);
	z-index: 1000;
	transform: translateX(100%);
	transition: transform .25s ease;
	display: flex; flex-direction: column;
	padding: 20px;
	box-shadow: var(--jck-shadow-lg);
	overflow-y: auto;
}
html[dir="rtl"] .mobile-drawer { transform: translateX(-100%); }
.mobile-drawer.is-open { transform: translateX(0); }

.mobile-drawer__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.mobile-drawer__close { background: none; border: none; font-size: 1.75rem; line-height: 1; color: var(--jck-color-ink-700); }

.mobile-menu > li > a {
	display: block;
	padding: 14px 6px;
	border-bottom: var(--jck-border-width, 1px) solid var(--jck-color-line);
	font-weight: 600;
}
.mobile-menu { flex-direction: column; align-items: stretch; }
.mobile-menu .sub-menu { padding-inline-start: 16px; }
.mobile-menu .sub-menu a { padding: 10px 6px; font-weight: 500; color: var(--jck-color-ink-500); }

.mobile-drawer__cta { margin-top: 20px; }

.mobile-drawer-overlay {
	position: fixed; inset: 0; background: rgba(11,31,58,.45);
	z-index: 999; opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s ease;
}
.mobile-drawer-overlay.is-visible { opacity: 1; visibility: visible; }
.mobile-drawer-overlay[hidden] { display: none; }