/*
 * Header Login / Account menu-bar item — BugHerd task 2.
 *
 * The menu-bar (search, cart, login) shows at all widths. The header's
 * logo is absolutely centred, so the right-hand nav group + menu-bar
 * must fit in half the viewport minus half the logo: with GP's default
 * item padding that breaks below ~1270px. Tighter padding brings the
 * fit down to ~1190px, and below 1200px search/cart yield to keep the
 * Login link (the mobile header takes over under 959px).
 */
@media (min-width: 959px) {
	.main-navigation div.menu-bar-items {
		display: flex;
		align-items: center;
	}

	.main-navigation div.menu-bar-items .menu-bar-item > a {
		padding-left: 6px;
		padding-right: 6px;
	}
}

@media (min-width: 959px) and (max-width: 1199px) {
	.main-navigation div.menu-bar-items > .menu-bar-item:not(.longing-login-item) {
		display: none;
	}
}

/*
 * Typography comes from the customizer's menu-bar rules (Cormorant Garamond,
 * uppercase, 1.1rem, accent color, hover to contrast) and GP core's
 * `.menu-bar-item > a` padding — nothing to restate here. A touch of
 * letter-spacing keeps the short uppercase word from reading cramped next
 * to the icon items on mobile.
 */
.main-navigation .menu-bar-items .longing-login-item > a {
	letter-spacing: 0.03em;
}