/**
 * MusixBlog — Sticky header + grid alignment
 */

:root {
	--mx-header-height: 56px;
	--mx-header-pad-x: clamp(1rem, 3vw, 1.5rem);
}

/* Sticky full-width bar */
@media (min-width: 1061px) {
	body.has-sticky-nav .site-header.logo-below-nav {
		position: sticky;
		top: 0;
		z-index: 1500;
		width: 100%;
		max-width: 100% !important;
		margin: 0 !important;
		padding: 0;
	}

	body.has-sticky-nav .site-header.logo-below-nav.fixed,
	body.has-sticky-nav .site-header.logo-below-nav.is-scrolled {
		margin-top: 0 !important;
		box-shadow: 0 4px 20px rgba(40, 40, 40, 0.07);
	}

	body.has-sticky-nav.body-fix {
		margin-top: 0 !important;
	}

	.site-header.logo-below-nav .container {
		width: 100%;
		max-width: var(--mx-content-max, 1180px);
		margin: 0 auto;
		padding: 0 var(--mx-header-pad-x);
		box-sizing: border-box;
	}

	/* 3 columns: menu | nav | search */
	.site-header.logo-below-nav .mx-header-bar {
		display: grid;
		grid-template-columns: 11rem minmax(0, 1fr) 11rem;
		align-items: center;
		gap: 0.75rem;
		min-height: var(--mx-header-height);
		width: 100%;
	}

	.site-header.logo-below-nav .mx-header-bar > .toggle-menu {
		justify-self: start;
	}

	.site-header.logo-below-nav .mx-header-bar > .menu-primary-navigation-container {
		justify-self: stretch;
		min-width: 0;
		width: 100%;
		padding: 0;
		margin: 0;
		overflow: hidden;
	}

	.site-header.logo-below-nav .mx-header-bar > .toggle-search {
		justify-self: end;
	}

	.site-header.logo-below-nav .primary-nav {
		width: 100%;
		min-height: 0;
		margin: 0;
		padding: 0;
		justify-content: center;
		flex-wrap: wrap;
		gap: 0.1rem 0.25rem;
	}

	.site-header.logo-below-nav .primary-nav > li > a {
		padding: 0.5rem 0.55rem;
		font-size: 0.875rem;
		white-space: nowrap;
	}

	.site-header.logo-below-nav .toggle span {
		display: inline-flex;
		align-items: center;
		gap: 0.35rem;
		min-height: 38px;
		padding: 0.4rem 0.9rem;
		margin: 0 !important;
		background: var(--ruki-menu-pill-background, var(--mx-surface-2));
		border: 1px solid var(--mx-line);
		border-radius: 100px;
		white-space: nowrap;
	}

	.site-header.logo-below-nav .toggle i[class*='icon'] {
		margin: 0;
	}
}

@media (max-width: 1060px) {
	body.has-sticky-nav-mobile .site-header {
		position: sticky;
		top: 0;
		z-index: 1500;
		width: 100%;
		max-width: 100% !important;
		margin: 0 !important;
	}

	.site-header .mobile-header {
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		align-items: center;
		gap: 0.5rem;
		max-width: var(--mx-content-max, 1180px);
		margin: 0 auto;
		padding: 0.5rem var(--mx-header-pad-x);
		box-sizing: border-box;
	}

	.site-header .mobile-header .toggle-menu {
		justify-self: start;
	}

	.site-header .mobile-header .logo-wrapper {
		justify-self: center;
		grid-column: 2;
		width: auto !important;
	}

	.site-header .mobile-header .toggle-search {
		justify-self: end;
		grid-column: 3;
	}
}

.lbn-logo-wrapper.mx-brand {
	max-width: var(--mx-content-max, 1180px);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--mx-header-pad-x);
	padding-right: var(--mx-header-pad-x);
	box-sizing: border-box;
}