/* kai-header.css: loaded after kai.css.
   Header bar, hamburger panel and collapsed search, matched to the reference stylesheet.
   The reference sizes everything in rem with html at 14px (13px below 1300px). The theme
   keeps html at 14px, so header sizes use --kr: one reference rem. */
:root { --kr: 14px; --kai-header-h: calc(var(--kr) * 4.5); --kai-header-top: calc(var(--kr) * 1.5); }
@media (max-width: 1299.9px) { :root { --kr: 13px; } }
@media (max-width: 767.98px) { :root { --kai-header-h: calc(var(--kr) * 4.5); --kai-header-top: calc(var(--kr) * 1.5); } }
@media (max-width: 639.9px) { :root { --kai-header-top: var(--kr); } }

#header.kai-header { height: var(--kai-header-h); font-size: var(--kr); }
#header.kai-header > .container { max-width: 1868px; margin: 0 auto; padding: 0 calc(var(--kr) * 1.9); }
#header.kai-header .nav-wrapper {
	justify-content: space-between;
	height: 100%;
	max-width: 2380px;
	margin: 0 auto;
	padding: 0 calc(var(--kr) * 2);
	border-radius: calc(var(--kr) * 1.2);
	background: #0c1116;
}

/* Buttons: margin-right spacing like the reference (.nav-btn { margin-right: 2rem }) */
#header.kai-header .nav-btn { margin: 0 calc(var(--kr) * 2) 0 0; font-size: calc(var(--kr) * 1.5); }
#header.kai-header .nav-btn i { font-size: calc(var(--kr) * 1.5); }
#header.kai-header .nav-btn:focus:not(:hover) { color: #fff; }
#header.kai-header #search-btn { margin-right: 0; }

/* Home: hamburger and logo pulled toward the bar edge */
body.home #header.kai-header #nav-menu-btn,
body.page-template-home-page #header.kai-header #nav-menu-btn { margin-left: calc(var(--kr) * -1.9); padding-right: calc(var(--kr) * 1.9); }

/* Logo */
#header.kai-header .brand#logo,
#header.kai-header .brand { max-width: 250px; margin: 0 auto 0 0; }
body.home #header.kai-header .brand#logo,
body.page-template-home-page #header.kai-header .brand#logo { margin-left: calc(var(--kr) * -1.9); }
#header.kai-header #logo.brand img { height: calc(var(--kr) * 2.8); max-width: 250px; }

/* Search: right-aligned 450px box inside a growing slot */
#header.kai-header #search {
	position: relative;
	display: flex;
	flex-grow: 1;
	justify-content: flex-end;
	width: auto;
	max-width: none;
	height: calc(var(--kr) * 2.5);
	margin: 0 calc(var(--kr) * 2);
}
#header.kai-header #search .inner {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	width: 100%;
	max-width: 450px;
	padding: 0 calc(var(--kr) * .2) 0 var(--kr);
	border-radius: var(--kr);
	background: #181d22;
	box-shadow: none;
	transition: top .2s;
}
#header.kai-header #search form {
	flex-grow: 1;
	height: calc(var(--kr) * 2.5);
	padding: 0;
	gap: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
}
#header.kai-header #search form > i { margin-right: calc(var(--kr) * .5); font-size: calc(var(--kr) * 1.2); }
#header.kai-header #search .search-input,
#header.kai-header #search .search-content input.search-input { font-size: var(--kr); font-weight: 300; }
#header.kai-header #search .filter-link {
	gap: 0;
	height: calc(var(--kr) * 2.5);
	padding: 0 var(--kr);
	font-size: calc(var(--kr) * .95);
	font-weight: 500;
}
#header.kai-header #search .filter-link i { margin-right: calc(var(--kr) * .2); font-size: var(--kr); }

/* Random */
#header.kai-header .shuffle-btn { margin-left: 0; }

/* EN / JP */
#header.kai-header .lang-sw {
	height: auto;
	margin: 0 calc(var(--kr) * 2) 0 0;
	border-radius: var(--kr);
	background: #181d22;
}
#header.kai-header .lang-sw:hover { background: #232a31; }
#header.kai-header .lang-sw span {
	width: calc(var(--kr) * 2.9);
	height: calc(var(--kr) * 2.2);
	border-radius: calc(var(--kr) * 2);
	font-size: calc(var(--kr) * 1.1);
	font-weight: 500;
}

/* User slot (contents belong to the member UI) */
#header.kai-header .nav-user#header_right { margin: 0; }
#header.kai-header #user-slot .btn-user.btn-login { width: calc(var(--kr) * 2.2); height: calc(var(--kr) * 2.2); }

/* Below the desktop breakpoint: hamburger panel under the bar */
@media (max-width: 1635.98px) {
	#header.kai-header .nav-wrapper { position: static; }
	#header.kai-header .nav-menu {
		position: absolute;
		top: 100%;
		left: calc(var(--kr) * 2);
		z-index: 99;
		margin: calc(var(--kr) * .5) 0 0;
		border-radius: calc(var(--kr) * 1.2);
		overflow: hidden;
	}
	#header.kai-header .nav-menu > ul {
		max-height: calc(100vh - var(--kai-header-h) - var(--kai-header-top) - 20px);
		padding: var(--kr) calc(var(--kr) * 1.5) calc(var(--kr) * 1.5);
		background: #181d22;
	}
	#header.kai-header .nav-menu > ul > li > a {
		margin-right: calc(var(--kr) * 2);
		padding-top: calc(var(--kr) * .7);
		font-size: calc(var(--kr) * 1.15);
	}
	#header.kai-header .nav-menu > ul > li > ul { padding: var(--kr) 0; background: #181d22; }
	#header.kai-header .nav-menu > ul > li > ul.c4 { width: calc(var(--kr) * 20); }
	#header.kai-header .nav-menu > ul > li > ul > li > a { padding: calc(var(--kr) * .3) 0; font-size: var(--kr); }
}

/* Desktop: inline links */
@media (min-width: 1636px) {
	#header.kai-header .nav-menu { margin: 0; }
	#header.kai-header .nav-menu > ul > li > a { margin-right: calc(var(--kr) * 2); font-size: calc(var(--kr) * 1.15); }
}

/* Search collapses to an icon; the box drops below the bar when opened */
@media (max-width: 1059.9px) {
	#header.kai-header .nav-wrapper { position: static; }
	#header.kai-header #search { position: static; flex-grow: 1; }
	#header.kai-header #search-btn { display: inline-flex; }
	#header.kai-header #search .inner,
	#header.kai-header #search.active .inner {
		position: absolute;
		top: calc(var(--kr) * 6);
		left: calc(var(--kr) * 1.5);
		right: calc(var(--kr) * 1.5);
		display: flex;
		width: auto;
		margin: 0 auto;
		padding: 0 calc(var(--kr) * .2) 0 var(--kr);
		border: 2px solid rgba(255, 255, 255, .8);
		border-radius: var(--kr);
		background: #181d22;
		box-shadow: none;
		opacity: 0;
		pointer-events: none;
		transition: top .1s;
	}
	#header.kai-header #search.active .inner { top: calc(var(--kr) * 5); opacity: 1; pointer-events: auto; }
	#header.kai-header #search form { margin: calc(var(--kr) * .3); }
}

@media (max-width: 767.98px) {
	#header.kai-header .nav-menu { left: calc(var(--kr) * 2); }
}

/* Small phones / home: translucent bar */
@media (max-width: 666.9px) {
	body.home #header.kai-header .nav-wrapper,
	body.page-template-home-page #header.kai-header .nav-wrapper { background: rgba(0, 0, 0, .7); }
	body.home #header.kai-header #nav-menu-btn,
	body.page-template-home-page #header.kai-header #nav-menu-btn { margin-left: 0; padding-right: 0; }
	body.home #header.kai-header .brand#logo,
	body.page-template-home-page #header.kai-header .brand#logo { margin-left: 0; }
}

@media (max-width: 639.9px) {
	#header.kai-header > .container { padding: 0 var(--kr); }
	/* The reference's own 639px search rule loses on specificity, so the box keeps the 1059px placement. */
	#header.kai-header .shuffle-btn { display: none; }
}

@media (max-width: 575.98px) {
	#header.kai-header #search { margin: 0 !important; }
	#header.kai-header .nav-btn { margin-right: calc(var(--kr) * 1.25) !important; }
}

@media (max-width: 470px) {
	#header.kai-header .lang-sw { display: none; }
}

@media (max-width: 320px) {
	#header.kai-header .nav-btn { margin-right: var(--kr) !important; }
	#header.kai-header #logo.brand img { height: auto; max-width: 100px; }
}

/* Touch: no sticky orange hover on header buttons after a tap */
@media (hover: none) { #header.kai-header .nav-btn:hover { color: #fff; } }