/*
Navbar layout for the parallax theme. Colours, fonts and logo heights are per site, in
editor/themes/parallax/css/_parallax.scss.

parallax.js adds .navbar-expand while the links fit beside the brand (the logo, or the store
name when there is no logo) and removes it to collapse them into the toggler.
 */

/* Only colours animate - letter spacing and padding change at breakpoints, and must do so at once for parallax.js to measure them */
#top-nav a {
	transition-property: color, background-color;
}

/* Keep the container's gutter when expanded too (Bootstrap drops it), so the brand doesn't jump sideways as the links expand or collapse */
#top-nav > .container {
	padding-left: 15px;
	padding-right: 15px;
}

/* parallax.js adds .navbar-wide when the links only fit using the full width of the window, not just the page content's */
#top-nav.navbar-wide > .container {
	max-width: none;
}

/*
The brand scales down to make room - beside the toggler when collapsed, and beside the links
while the logo is at its larger size at the top of the index page. parallax.js only expands
the links when they fit beside the brand at its smaller, scrolled size, so the brand never
needs to go below that.
 */
#top-nav .navbar-brand {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}

#top-nav .navbar-brand img {
	max-width: 100%;
}

#top-nav.navbar-measuring .navbar-brand {
	flex-shrink: 0;
}

#top-nav:not(.navbar-expand) .navbar-brand {
	max-width: calc(100% - 4rem);
}

#top-nav .navbar-toggler {
	margin-left: auto;
}

/* Very small screens only have room for the toggler */
@media (max-width: 359.98px) {
	#top-nav:not(.navbar-expand) .navbar-brand {
		display: none;
	}
}