/**
 * Header, sidebar, mobile nav, tabbar
 * Reference: components/header, navbar, tabbar
 */

/* ─── Header ─── */
.site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: var(--z-header);
	height: var(--header-height);
	background: var(--color-bg-layer1);
	border-bottom: 1px solid var(--color-border);
	backdrop-filter: blur(6px);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 100%;
	max-width: var(--header-max-width);
	margin: 0 auto;
	padding: 0 var(--space-4);
}

@media (min-width: 900px) {
	.site-header__inner {
		padding: 0 var(--space-6);
	}
}

@media (min-width: 1200px) {
	.site-header__inner {
		padding: 0 var(--space-8);
	}
}

.site-header__left {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	min-width: 0;
}

.site-header__right {
	display: flex;
	align-items: center;
	gap: var(--space-2);
}

/* Menu toggle — visible below lg */
.menu-toggle {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: var(--radius-md);
	background: transparent;
	color: var(--color-text-secondary);
}

.menu-toggle__icon {
	width: 24px;
	height: 24px;
	background: var(--bj66-sprite-icons) -128px -128px no-repeat;
	background-size: cover;
}

@media (min-width: 1200px) {
	.menu-toggle {
		display: none;
	}
}

/* Desktop header tabs — lg+ */
.desktop-nav {
	display: none;
	margin-left: var(--space-4);
}

@media (min-width: 1200px) {
	.desktop-nav {
		display: flex;
		align-items: center;
		gap: var(--space-2);
		list-style: none;
		margin: 0;
		padding: 0;
	}
}

.desktop-nav a {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-2) var(--space-4);
	border-radius: var(--radius-md);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-semibold);
	color: var(--color-text-secondary);
	transition: background var(--transition-fast), color var(--transition-fast);
}

.desktop-nav a:hover,
.desktop-nav .current-menu-item > a,
.desktop-nav .current_page_item > a {
	background: var(--color-bg-layer3);
	color: var(--color-primary);
}

.header-search-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: var(--radius-pill);
	background: var(--color-bg-layer3);
	color: var(--color-text-secondary);
}

.header-search-toggle:hover {
	background: var(--color-bg-layer4);
	color: var(--color-text);
}

@media (min-width: 600px) {
	.header-search-toggle {
		display: inline-flex;
	}
}

.header-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 40px;
	padding: 0 var(--space-4);
	border: 0;
	border-radius: var(--radius-md);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-extrabold);
	color: #000;
	background: linear-gradient(90deg, var(--color-accent-start), var(--color-accent-end));
	box-shadow: var(--shadow-cta);
	text-transform: capitalize;
}

.header-cta:hover {
	color: #000;
	filter: brightness(1.05);
}

/* Search panel */
.header-search-panel {
	display: none;
	position: absolute;
	top: 100%;
	right: var(--space-4);
	width: min(100% - 2rem, 360px);
	padding: var(--space-4);
	background: var(--color-bg-layer2);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-tabbar);
}

.header-search-panel.is-open {
	display: block;
}

.header-search-panel .search-form {
	display: flex;
	gap: var(--space-2);
}

.header-search-panel input[type="search"] {
	flex: 1;
	height: 40px;
	padding: 0 var(--space-3);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	background: var(--color-bg-layer3);
	color: var(--color-text);
}

/* ─── Sidebar (desktop md+) ─── */
.site-sidebar {
	display: none;
	position: fixed;
	top: var(--header-height);
	left: 0;
	bottom: 0;
	z-index: var(--z-sidebar);
	width: var(--sidebar-collapsed);
	overflow-x: hidden;
	overflow-y: auto;
	background: var(--color-bg-layer1);
	transition: width var(--transition-normal);
}

@media (min-width: 900px) {
	.site-sidebar {
		display: block;
	}
}

body.sidebar-expanded .site-sidebar {
	width: var(--sidebar-width);
}

.site-sidebar__inner {
	padding: var(--space-2);
}

.sidebar-nav {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
}

.sidebar-nav li {
	border-radius: var(--radius-md);
	background: var(--color-sidebar-cell);
}

.sidebar-nav a {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	height: var(--nav-item-height);
	padding: 0 var(--space-2);
	border-radius: var(--radius-md);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-semibold);
	color: var(--color-text-secondary);
	transition: background var(--transition-fast), color var(--transition-fast);
}

.sidebar-nav a:hover,
.sidebar-nav .current-menu-item > a,
.sidebar-nav .current-cat > a {
	background: linear-gradient(90deg, var(--color-accent-active-fade), transparent), rgba(255, 255, 255, 0.05);
	color: var(--color-primary);
}

.sidebar-nav__icon {
	flex-shrink: 0;
}

.sidebar-nav__icon:not(.sidebar-nav__icon--sprite) {
	width: 24px;
	height: 24px;
	object-fit: contain;
	opacity: 0.9;
}

.sidebar-nav .current-menu-item > a .sidebar-nav__icon,
.sidebar-nav .current-cat > a .sidebar-nav__icon {
	opacity: 1;
	filter: none;
}

body:not(.sidebar-expanded) .sidebar-nav__label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
}

.sidebar-toggle {
	display: none;
	margin-top: auto;
	width: 100%;
	height: var(--nav-item-height);
	border: 0;
	border-radius: var(--radius-md);
	background: var(--color-sidebar-cell);
	color: var(--color-text-secondary);
}

.sidebar-toggle__icon {
	width: 24px;
	height: 24px;
	background: var(--bj66-sprite-icons) -128px -128px no-repeat;
	background-size: cover;
}

@media (min-width: 900px) {
	.sidebar-toggle {
		display: flex;
		align-items: center;
		justify-content: center;
	}
}

/* ─── Mobile drawer ─── */
.mobile-nav {
	position: fixed;
	inset: 0;
	z-index: var(--z-drawer);
	visibility: hidden;
	pointer-events: none;
}

.mobile-nav.is-open {
	visibility: visible;
	pointer-events: auto;
}

.mobile-nav__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.6);
	opacity: 0;
	transition: opacity var(--transition-normal);
}

.mobile-nav.is-open .mobile-nav__backdrop {
	opacity: 1;
}

.mobile-nav__panel {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	width: min(320px, 88vw);
	background: var(--color-bg-layer1);
	transform: translateX(-100%);
	transition: transform var(--transition-normal);
	overflow-y: auto;
	padding: calc(var(--header-height) + var(--space-4)) var(--space-4) calc(var(--tabbar-height) + var(--space-4));
}

.mobile-nav.is-open .mobile-nav__panel {
	transform: translateX(0);
}

.mobile-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
}

.mobile-nav__list a {
	display: block;
	padding: var(--space-3) var(--space-4);
	border-radius: var(--radius-md);
	background: var(--color-sidebar-cell);
	font-weight: var(--font-weight-semibold);
	color: var(--color-text);
}

.mobile-nav__list .current-menu-item > a {
	background: linear-gradient(90deg, var(--color-accent-active-fade), transparent);
	color: var(--color-primary);
}

/* ─── Mobile tabbar (<600px) ─── */
.mobile-tabbar {
	display: flex;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: var(--z-tabbar);
	height: var(--tabbar-height);
	padding: var(--space-1) 0 env(safe-area-inset-bottom, 0);
	background: var(--color-bg-layer2);
	border-top-left-radius: var(--radius-lg);
	border-top-right-radius: var(--radius-lg);
	box-shadow: var(--shadow-tabbar);
}

@media (min-width: 600px) {
	.mobile-tabbar {
		display: none;
	}
}

.mobile-tabbar__item {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--space-1);
	padding: var(--space-1);
	border: 0;
	background: transparent;
	color: var(--color-text-secondary);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-extrabold);
	text-decoration: none;
}

.mobile-tabbar__item:hover,
.mobile-tabbar__item.is-active {
	color: var(--color-primary);
}

.mobile-tabbar__icon {
	width: 22px;
	height: 22px;
	opacity: 0.9;
}