/* ============================================================
   HEADER
   Anchor Uptime Theme
   ============================================================ */

/* ── Shared lang toggle ── */
.lang-btn {
	display:       flex;
	align-items:   center;
	background:    var(--bg2);
	border:        1px solid var(--border2);
	border-radius: 100px;
	overflow:      hidden;
	flex-shrink:   0;
}

.lang-btn .lang-option,
.lang-btn button {
	font-family:     var(--mono);
	font-size:       11px;
	letter-spacing:  .5px;
	font-weight:     500;
	color:           var(--muted);
	background:      transparent;
	border:          none;
	cursor:          pointer;
	padding:         5px 10px;
	transition:      all .2s;
	text-decoration: none;
}

.lang-btn .lang-option.active,
.lang-btn button.active {
	color:         #fff;
	background:    var(--bg3);
	border-radius: 100px;
}

.lang-btn .lang-option:hover:not(.active),
.lang-btn button:hover:not(.active) {
	color: var(--text);
}

/* ── Shared hamburger ── */
.hamburger {
	width:         34px;
	height:        34px;
	border-radius: 100px;
	background:    var(--bg2);
	border:        1px solid var(--border2);
	display:       flex;
	align-items:   center;
	justify-content: center;
	cursor:        pointer;
	transition:    border-color .2s;
	flex-shrink:   0;
	color:         var(--muted);
}

.hamburger:hover {
	border-color: var(--indigo);
}

/* ── Desktop header ── */
.header-desktop {
	position:        fixed;
	top:             0;
	left:            0;
	right:           0;
	z-index:         300;
	height:          62px;
	display:         flex;
	align-items:     center;
	padding:         0 28px;
	gap:             10px;
	background:      rgba(7, 9, 14, .92);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border-bottom:   1px solid var(--border);
	transition:      border-color .3s;
}

.header-desktop.menu-open {
	border-bottom-color: transparent;
}

/* Logo pushed to left, rest to right */
.header-desktop .logo {
	margin-right: auto;
}

.header-desktop .header-auth {
	display:     flex;
	align-items: center;
	gap:         8px;
}

/* ── Mobile: top auth bar ── */
.header-mobile-top {
	position:        fixed;
	top:             0;
	left:            0;
	right:           0;
	z-index:         302;
	height:          40px;
	display:         none; /* shown only <768px */
	align-items:     center;
	justify-content: stretch;
	background:      rgba(12, 15, 24, .97);
	backdrop-filter: blur(20px);
	border-bottom:   1px solid var(--border);
}

.header-mobile-top a {
	flex:            1;
	height:          100%;
	display:         flex;
	align-items:     center;
	justify-content: center;
	font-family:     var(--body);
	font-size:       12px;
	font-weight:     600;
	text-decoration: none;
	transition:      all .2s;
	white-space:     nowrap;
}

.header-mobile-top .mbt-login {
	color:        var(--muted);
	border-right: 1px solid var(--border2);
}
.header-mobile-top .mbt-login:hover {
	color:      var(--text);
	background: rgba(255, 255, 255, .04);
}

.header-mobile-top .mbt-register {
	color:      #fff;
	background: var(--indigo);
	box-shadow: inset 0 0 24px rgba(99, 102, 241, .2);
}
.header-mobile-top .mbt-register:hover {
	opacity: .9;
}

/* ── Mobile: nav bar ── */
.header-mobile-nav {
	position:        fixed;
	top:             0;
	left:            0;
	right:           0;
	z-index:         301;
	height:          54px;
	display:         none; /* shown only <768px */
	align-items:     center;
	justify-content: space-between;
	padding:         0 16px;
	gap:             10px;
	background:      rgba(7, 9, 14, .92);
	backdrop-filter: blur(20px);
	border-bottom:   1px solid var(--border);
	transition:      border-color .3s;
}

.header-mobile-nav.menu-open {
	border-bottom-color: transparent;
}

.header-mobile-nav__right {
	display:     flex;
	align-items: center;
	gap:         8px;
}

/* ── Shared logo ── */
.logo {
	display:         flex;
	align-items:     center;
	gap:             9px;
	text-decoration: none;
	color:           var(--text);
	font-family:     var(--display);
	font-weight:     700;
	font-size:       16px;
	letter-spacing:  -.3px;
	flex-shrink:     0;
}

.logo-mark {
	width:         28px;
	height:        28px;
	display:       flex;
	align-items:   center;
	justify-content: center;
	flex-shrink:   0;
}

/* ── Breakpoint switch ── */
@media (min-width: 768px) {
	.header-desktop   { display: flex; }
	.header-mobile-top,
	.header-mobile-nav { display: none !important; }
}

@media (max-width: 767px) {
	.header-desktop   { display: none !important; }
	.header-mobile-top { display: flex; }
	.header-mobile-nav { display: flex; top: 40px; }
	body { padding-top: 94px; }
}

@media (max-width: 480px) {
	.header-mobile-nav { padding: 0 14px; }
	.logo { font-size: 15px; }
}