/* Mobile app-style fixed bottom navigation.
   Desktop is fully untouched: the bar is display:none above 768px and every
   layout tweak (body padding, floating-button changes) lives inside the
   mobile media query only. Colours match the theme's dark navy. */

.lmm-bottom-nav { display: none; }

@media (max-width: 768px) {

	/* ---- the bar ---- */
	.lmm-bottom-nav {
		display: flex;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 1000;
		height: calc(62px + env(safe-area-inset-bottom, 0px));
		padding-bottom: env(safe-area-inset-bottom, 0px);
		background: linear-gradient(180deg, #06184a 0%, #030d29 100%);
		border-top: 1px solid rgba(255, 255, 255, .09);
		box-shadow: 0 -8px 30px rgba(2, 8, 26, .5);
		-webkit-backdrop-filter: blur(10px);
		backdrop-filter: blur(10px);
	}

	.lmm-bottom-nav .lmm-nav-item {
		flex: 1 1 0;
		min-width: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 4px;
		position: relative;
		height: 62px;
		color: rgba(224, 234, 255, .60);
		text-decoration: none;
		font-size: 10.5px;
		font-weight: 600;
		letter-spacing: .005em;
		-webkit-tap-highlight-color: transparent;
		touch-action: manipulation;
		transition: color .2s ease, transform .12s ease;
	}

	.lmm-bottom-nav .lmm-nav-item svg {
		width: 23px;
		height: 23px;
		display: block;
		transition: transform .2s ease;
	}

	.lmm-bottom-nav .lmm-nav-item span {
		line-height: 1;
		max-width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	/* instant tap feedback */
	.lmm-bottom-nav .lmm-nav-item:active { transform: scale(.9); }

	/* active state: bright icon/label + glowing top indicator */
	.lmm-bottom-nav .lmm-nav-item.is-active { color: #ffffff; }
	.lmm-bottom-nav .lmm-nav-item.is-active svg { transform: translateY(-1px); }
	.lmm-bottom-nav .lmm-nav-item.is-active::before {
		content: "";
		position: absolute;
		top: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 26px;
		height: 3px;
		border-radius: 0 0 4px 4px;
		background: linear-gradient(90deg, #38d5ff, #0e67ff);
		box-shadow: 0 0 10px rgba(56, 213, 255, .85);
	}

	/* WhatsApp keeps its brand colour so the CTA pops (label stays neutral) */
	.lmm-bottom-nav .lmm-nav-wa svg { color: #25d366; }
	.lmm-bottom-nav .lmm-nav-wa.is-active svg,
	.lmm-bottom-nav .lmm-nav-wa:active svg { color: #25d366; }

	.lmm-bottom-nav .lmm-nav-item:focus-visible {
		outline: 2px solid #38d5ff;
		outline-offset: -4px;
		border-radius: 10px;
	}

	/* ---- keep bottom content clear of the bar (footer / forms) ---- */
	body { padding-bottom: calc(62px + env(safe-area-inset-bottom, 0px)); }

	/* ---- floating buttons: no conflict with the bar ---- */
	/* WhatsApp is merged into the bar, so hide the floating quick-contact stack on mobile. */
	.quick-contact { display: none !important; }
	/* Our Work page's back-to-top sits above the bar instead of behind it. */
	.back-top { bottom: calc(78px + env(safe-area-inset-bottom, 0px)) !important; }

	/* ---- footer: 2-up link columns on phones (was a single tall stack) ----
	   Loads after every page's footer CSS, so this wins. Brand block + the
	   copyright/policy lines span full width; the 4 link columns form a 2x2. */
	.site-footer, .work-footer, .about-footer, .services-footer, .case-footer {
		grid-template-columns: 1fr 1fr !important;
		column-gap: 22px;
		row-gap: 30px;
	}
	.site-footer > div:first-child,
	.work-footer > div:first-child,
	.about-footer > div:first-child,
	.services-footer > div:first-child,
	.case-footer > div:first-child,
	.site-footer > .copyright, .site-footer > .policy,
	.work-footer > .copyright, .work-footer > .policy,
	.about-footer > .copyright, .about-footer > .policy,
	.services-footer > .copyright, .services-footer > .policy,
	.case-footer > .copyright, .case-footer > .policy {
		grid-column: 1 / -1;
	}
}