/**
 * Ventureheap Builder - the bar pinned to the bottom of a phone screen.
 */

.vhb-mobile-bar {
	position: fixed;
	z-index: 95;
	right: 0;
	bottom: 0;
	left: 0;
	display: flex;
	align-items: stretch;
	padding-bottom: env(safe-area-inset-bottom, 0);
	background: var(--vhb-bg, #fff);
	border-top: 1px solid var(--vhb-border, #e2e8f0);
	box-shadow: 0 -8px 24px -18px rgba(15, 23, 42, .5);
}

.vhb-mobile-bar__item {
	position: relative;
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	min-width: 0;
	min-height: 58px;
	padding: 8px 2px;
	font-size: .68rem;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--vhb-secondary, #0f172a);
	transition: color var(--vhb-transition, .2s ease);
}

.vhb-mobile-bar__item:hover,
.vhb-mobile-bar__item:focus-visible { color: var(--vhb-primary, #1a56db); }
.vhb-mobile-bar__item.is-current { color: var(--vhb-primary, #1a56db); }

/* A line over the current item, the way a tab bar marks where you are. */
.vhb-mobile-bar__item.is-current::before {
	content: "";
	position: absolute;
	top: -1px;
	left: 20%;
	width: 60%;
	height: 2px;
	background: currentColor;
}

.vhb-mobile-bar__icon { position: relative; display: block; line-height: 0; }
.vhb-mobile-bar__icon svg { display: block; }

.vhb-mobile-bar__label {
	line-height: 1.3;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.vhb-mobile-bar__count {
	position: absolute;
	top: -6px;
	right: -10px;
	min-width: 17px;
	height: 17px;
	padding: 0 4px;
	font-size: .62rem;
	font-weight: 700;
	line-height: 17px;
	letter-spacing: 0;
	text-align: center;
	color: #fff;
	background: var(--vhb-primary, #1a56db);
	border-radius: 999px;
}

.vhb-mobile-bar__count[hidden] { display: none; }

.vhb-mobile-bar--bare .vhb-mobile-bar__item { min-height: 54px; }

/*
 * The bar is fixed, so without this the last lines of every page sit behind
 * it. The script measures the bar and sets the property; this is the value
 * used until it has, and after it on a browser that ran no script at all.
 */
body.vhb-has-mobile-bar { padding-bottom: var(--vhb-mobile-bar-height, 62px); }

@media (min-width: 768px) {
	.vhb-mobile-bar--mobile { display: none; }
	body.vhb-has-mobile-bar-mobile { padding-bottom: 0; }
}

@media (min-width: 1025px) {
	.vhb-mobile-bar--tablet { display: none; }
	body.vhb-has-mobile-bar-tablet { padding-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.vhb-mobile-bar__item { transition: none; }
}

/*
 * The section the bar is placed in. The bar itself is fixed, so the section
 * must not reserve a row of its own in the header.
 */
/*
 * Elementor gives every section's container `position: relative; z-index: 1`,
 * which makes it a stacking context. The bar's own z-index is then only
 * meaningful inside that context, so page sections further down the document
 * - each with a container of its own at the same z-index - paint over the
 * bar and swallow its taps. Lifting the host's context above them is what
 * actually keeps the bar clickable.
 */
.vhb-mobile-bar-host,
.vhb-mobile-bar-host > .elementor-container {
	position: relative;
	z-index: 95;
	height: 0;
}
.vhb-mobile-bar-host .elementor-widget:not(:last-child) { margin-bottom: 0; }

/*
 * While the menu drawer is open the bar belongs under the overlay, not over
 * it. The drawer's own z-index counts inside its section's stacking context,
 * which the bar's host sits above, so the host has to stand down rather than
 * the drawer climb higher.
 */
body.vhb-nav-open .vhb-mobile-bar-host,
body.vhb-nav-open .vhb-mobile-bar-host > .elementor-container { z-index: 0; }