/* =======================================================================
 * ax-mobile-topbar — glass logo bar, phones only (Figma 1676:1525)
 * 101px tall, rgba(255,255,255,.17) + blur(7.5px), hairline .21 border.
 * Sits below the sector header whenever that bar is visible.
 * ==================================================================== */

body .ax-mtop {
	display: none;
}

@media only screen and (max-width: 768px) {
	body .ax-mtop {
		--ax-mtop-top: 0px;

		position: fixed;
		left: 0;
		right: 0;
		top: var(--ax-mtop-top);
		z-index: 10008;   /* under .ax-mnav (10010), over the page */
		display: flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		height: 60px;
		padding: 0 20px;
		border: 1px solid rgba(255, 255, 255, 0.21);
		background: rgba(255, 255, 255, 0.17);
		-webkit-backdrop-filter: blur(7.5px);
		backdrop-filter: blur(7.5px);
		box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.05);
		transition: top 0.35s cubic-bezier(0.22, 1, 0.36, 1), transform 0.4s ease-in-out;
	}
	
	#top .ax-mtop.ax-mtop--hidden { transform: translateY(calc(-100% - 20px)); }

	/* The sector header owns the top edge; step down by its height. */
	body.ax-sechead-visible .ax-mtop {
		--ax-mtop-top: 48px;
	}

	body .ax-mtop__logo {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		text-decoration: none !important;
	}

	body .ax-mtop__logo-img {
		display: block;
		width: 122px;
		height: auto;
		transition: filter 0.25s ease;
	}

	/* Light content behind the bar: the white logo becomes black.
	   brightness(0) collapses every channel to 0 regardless of the source
	   colour, so this holds even if the SVG is ever recoloured. */
	body .ax-mtop.is-dark .ax-mtop__logo-img {
		filter: brightness(0);
	}

	/* Over light content the white hairline disappears; borrow a grey one. */
	body .ax-mtop.is-dark {
		border-color: rgba(0, 0, 0, 0.06);
	}
}

@media (prefers-reduced-motion: reduce) {
	body .ax-mtop,
	body .ax-mtop__logo-img {
		transition: none;
	}
}