/*!
 * BOLTNAX Electric Header — responsive rules
 * Breakpoints match Elementor defaults: tablet ≤ 1024px, mobile ≤ 767px.
 * @version 1.1.0
 */

.bnx-header {
	--bnx-css-resp: 1;
}

/* Large desktop: a touch more breathing room. */
@media (min-width: 1600px) {
	.bnx-header {
		--bnx-menu-gap: 40px;
	}
}

/* Small desktop: tighten spacing before the hamburger takes over. */
@media (max-width: 1200px) {
	.bnx-header {
		--bnx-menu-gap: 22px;
	}

	.bnx-nav-bar__inner {
		gap: 16px;
	}
}

@media (max-width: 782px) {
	body.admin-bar .bnx-global-header--sticky,
	body.admin-bar .bnx-header.bnx-header--sticky {
		top: 46px;
	}
}

@media (max-width: 600px) {
	/* WP admin bar is not fixed below 600px. */
	body.admin-bar .bnx-global-header--sticky,
	body.admin-bar .bnx-header.bnx-header--sticky {
		top: 0;
	}
}

/* ------------------------------------------------------------------ *
 * Hamburger mode. Applied at ≤1024px (bnx-bp-tablet) or ≤767px (bnx-bp-mobile).
 * The rules are duplicated per breakpoint because media queries cannot use variables.
 * ------------------------------------------------------------------ */
@media (max-width: 1024px) {
	.bnx-header {
		--bnx-pad-x: 24px;
		--bnx-header-h: 70px;
		--bnx-logo-max: 46px;
	}

	.bnx-header.bnx-bp-tablet .bnx-nav-bar__inner {
		grid-template-columns: minmax(0, 1fr) auto;
	}

	.bnx-header.bnx-bp-tablet.bnx-js .bnx-burger {
		display: inline-flex;
	}

	.bnx-header.bnx-bp-tablet.bnx-js .bnx-nav-bar__inner {
		position: static;
	}

	.bnx-header.bnx-bp-tablet.bnx-js .bnx-nav {
		justify-self: stretch;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		z-index: 1003;
		display: none;
		max-height: calc(100vh - 120px);
		max-height: calc(100dvh - 120px);
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;
		padding: 8px var(--bnx-pad-x) 20px;
		background: var(--bnx-dd-bg);
		border-top: 1px solid var(--bnx-header-border);
		box-shadow: 0 18px 40px rgba(16, 24, 32, 0.16);
	}

	.bnx-header.bnx-bp-tablet.bnx-js.bnx-menu-open .bnx-nav {
		display: block;
		animation: bnx-panel-in 0.22s ease-out;
	}

	.bnx-header.bnx-bp-tablet.bnx-js .bnx-menu {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.bnx-header.bnx-bp-tablet.bnx-js .bnx-menu li {
		flex-wrap: wrap;
		border-bottom: 1px solid rgba(16, 24, 32, 0.07);
	}

	.bnx-header.bnx-bp-tablet.bnx-js .bnx-submenu li:last-child {
		border-bottom: 0;
	}

	.bnx-header.bnx-bp-tablet.bnx-js .bnx-menu > li > a,
	.bnx-header.bnx-bp-tablet.bnx-js .bnx-submenu a {
		flex: 1 1 auto;
		min-height: 48px;
		padding: 13px 0;
		font-size: 16px;
		white-space: normal;
		background: none;
	}

	.bnx-header.bnx-bp-tablet.bnx-js .bnx-menu > li > a::after {
		display: none;
	}

	.bnx-header.bnx-bp-tablet.bnx-js .bnx-submenu-toggle {
		width: 48px;
		height: 48px;
		margin: 0;
	}

	.bnx-header.bnx-bp-tablet.bnx-js .bnx-submenu,
	.bnx-header.bnx-bp-tablet.bnx-js .bnx-submenu .bnx-submenu {
		position: static;
		display: none;
		flex: 0 0 100%;
		width: 100%;
		min-width: 0;
		margin: 0 0 8px;
		padding: 0 0 0 14px !important;
		border: 0 !important;
		border-left: 2px solid rgba(var(--bnx-blue-rgb), 0.35) !important;
		border-radius: 0;
		box-shadow: none;
		opacity: 1;
		visibility: visible;
		transform: none;
		transition: none;
	}

	.bnx-header.bnx-bp-tablet.bnx-js .bnx-menu li.is-open > .bnx-submenu {
		display: block;
	}

	.bnx-header.bnx-bp-tablet.bnx-js .bnx-submenu a {
		padding: 11px 6px;
		font-size: 15px;
	}

	.bnx-header.bnx-bp-tablet.bnx-js .bnx-cta--panel {
		display: flex !important;
		width: 100%;
		margin-top: 16px;
		padding: 14px 20px;
	}
}

@media (max-width: 767px) {
	.bnx-header {
		--bnx-pad-x: 16px;
		--bnx-header-h: 62px;
		--bnx-bar-h: 36px;
		--bnx-bar-font: 12px;
		--bnx-logo-max: 38px;
	}

	.bnx-logo__text {
		font-size: 21px;
	}

	.bnx-header .bnx-cta--bar {
		padding: 9px 14px;
		font-size: 13px;
	}

	.bnx-burger__label {
		position: absolute !important;
		width: 1px !important;
		height: 1px !important;
		overflow: hidden !important;
		clip: rect(0, 0, 0, 0) !important;
	}

	.bnx-header.bnx-bp-tablet.bnx-js .bnx-cta--bar.bnx-cta--desktop-only,
	.bnx-header.bnx-bp-mobile.bnx-js .bnx-cta--bar.bnx-cta--desktop-only {
		display: none;
	}

	/* Mobile breakpoint mode (same panel rules as tablet mode). */
	.bnx-header.bnx-bp-mobile .bnx-nav-bar__inner {
		grid-template-columns: minmax(0, 1fr) auto;
	}

	.bnx-header.bnx-bp-mobile.bnx-js .bnx-burger {
		display: inline-flex;
	}

	.bnx-header.bnx-bp-mobile.bnx-js .bnx-nav-bar__inner {
		position: static;
	}

	.bnx-header.bnx-bp-mobile.bnx-js .bnx-nav {
		justify-self: stretch;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		z-index: 1003;
		display: none;
		max-height: calc(100vh - 110px);
		max-height: calc(100dvh - 110px);
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;
		padding: 8px var(--bnx-pad-x) 20px;
		background: var(--bnx-dd-bg);
		border-top: 1px solid var(--bnx-header-border);
		box-shadow: 0 18px 40px rgba(16, 24, 32, 0.16);
	}

	.bnx-header.bnx-bp-mobile.bnx-js.bnx-menu-open .bnx-nav {
		display: block;
		animation: bnx-panel-in 0.22s ease-out;
	}

	.bnx-header.bnx-bp-mobile.bnx-js .bnx-menu {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.bnx-header.bnx-bp-mobile.bnx-js .bnx-menu li {
		flex-wrap: wrap;
		border-bottom: 1px solid rgba(16, 24, 32, 0.07);
	}

	.bnx-header.bnx-bp-mobile.bnx-js .bnx-menu > li > a,
	.bnx-header.bnx-bp-mobile.bnx-js .bnx-submenu a {
		flex: 1 1 auto;
		min-height: 48px;
		padding: 13px 0;
		font-size: 16px;
		white-space: normal;
	}

	.bnx-header.bnx-bp-mobile.bnx-js .bnx-menu > li > a::after {
		display: none;
	}

	.bnx-header.bnx-bp-mobile.bnx-js .bnx-submenu-toggle {
		width: 48px;
		height: 48px;
	}

	.bnx-header.bnx-bp-mobile.bnx-js .bnx-submenu {
		position: static;
		display: none;
		flex: 0 0 100%;
		width: 100%;
		min-width: 0;
		margin: 0 0 8px;
		padding: 0 0 0 14px !important;
		border: 0 !important;
		border-left: 2px solid rgba(var(--bnx-blue-rgb), 0.35) !important;
		box-shadow: none;
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	.bnx-header.bnx-bp-mobile.bnx-js .bnx-menu li.is-open > .bnx-submenu {
		display: block;
	}

	.bnx-header.bnx-bp-mobile.bnx-js .bnx-cta--panel {
		display: flex !important;
		width: 100%;
		margin-top: 16px;
	}

}

/* Very small phones (320–374px). */
@media (max-width: 374px) {
	.bnx-header {
		--bnx-pad-x: 12px;
		--bnx-logo-max: 31px;
	}

	.bnx-logo__text {
		font-size: 18px;
		letter-spacing: 0.06em;
	}

	.bnx-header .bnx-cta--bar {
		padding: 8px 10px;
		font-size: 12px;
	}

	.bnx-header .bnx-cta--bar .bnx-cta__icon {
		display: none;
	}

	.bnx-actions {
		gap: 6px;
	}
}

/* No-JS fallback: the hamburger cannot work, so show the menu as a wrapped row. */
@media (max-width: 1024px) {
	.bnx-header.bnx-bp-tablet:not(.bnx-js) .bnx-nav-bar__inner {
		grid-template-columns: minmax(0, 1fr) auto;
		height: auto;
		min-height: var(--bnx-header-h);
		padding-top: 10px;
		padding-bottom: 10px;
		row-gap: 6px;
	}

	.bnx-header.bnx-bp-tablet:not(.bnx-js) .bnx-nav {
		grid-column: 1 / -1;
		grid-row: 2;
		justify-self: stretch;
		overflow-x: auto;
	}

	.bnx-header.bnx-bp-tablet:not(.bnx-js) .bnx-menu {
		flex-wrap: wrap;
		gap: 4px 18px;
	}

	.bnx-header.bnx-bp-tablet:not(.bnx-js) .bnx-submenu-toggle {
		display: none;
	}
}

@keyframes bnx-panel-in {
	from { opacity: 0; transform: translate3d(0, -6px, 0); }
	to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
	.bnx-header.bnx-motion-respect .bnx-nav {
		animation: none !important;
	}
}

/* "Never" hamburger mode: allow the menu to scroll horizontally on narrow screens instead of overflowing. */
@media (max-width: 1024px) {
	.bnx-header.bnx-bp-none .bnx-nav {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		max-width: 100%;
	}
}
