/* ==========================================================================
   LLI - site chrome fixes (header / primary menu)
   ==========================================================================
   Separate from lli-auth.css and lli-forms.css because this is the furniture
   around every page, not one screen's layout. Kept small on purpose: it
   corrects specific defects in nassets/css/ied.css rather than restyling the
   menu.

   THE LOGOUT ITEM
   layout/_primary_manu.php writes:

       <a class="we-mega-menu-li" href="logout.php">Logout <i class="fa fa-sign-out"></i> </a>

   Two things then go wrong on a narrow screen:

     1. The icon is an inline element sitting on the TEXT BASELINE. Font
        Awesome glyphs have their own metrics, so on the baseline the arrow
        drops below the word and overlaps the row beneath it - which is what
        the review screenshot shows.

     2. .log-in-link keeps its desktop box on mobile: ied.css gives it
        `padding: 12px 25px 0 25px` and `min-height: 60px`, and the responsive
        sheet overrides the padding of every OTHER menu item but not this one
        (ied-responsive.css:316 targets li.we-mega-menu-li, and the
        .log-in-link rule is more specific). So the item keeps a 60px box with
        no bottom padding while its neighbours are 7px/4px, and the text sits
        high inside it.

   Both are fixed by making the anchor a flex line: the icon is then aligned
   to the text by the layout instead of by its own baseline, and the gap is a
   real gap rather than the stray space character in the markup.
   ========================================================================== */

.cbs-main-menu-block .navbar-we-mega-menu .nav-tabs > li.we-mega-menu-li.log-in-link > a.we-mega-menu-li {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

/* The icon carries no line box of its own, so it cannot push the line taller
   than the text it sits beside. */
.cbs-main-menu-block .navbar-we-mega-menu .nav-tabs > li.we-mega-menu-li.log-in-link > a.we-mega-menu-li > .fa {
	line-height: 1;
	vertical-align: middle;
	font-size: 15px;
}

/* Below the desktop menu breakpoint the item joins the stacked list, so it
   takes the same box as its neighbours instead of keeping the 60px tab it
   needs when the menu is a horizontal bar. 1023.98px matches the boundary the
   theme's own responsive sheet works to (it stops at 1024px). */
@media (max-width: 1023.98px) {
	.cbs-main-menu-block .navbar-we-mega-menu .nav-tabs > li.we-mega-menu-li.log-in-link {
		display: flex;
		align-items: center;
		min-height: 0;
		padding: 7px 12px 4px 12px;
	}

	.cbs-main-menu-block .navbar-we-mega-menu .nav-tabs > li.we-mega-menu-li.log-in-link > a.we-mega-menu-li {
		width: 100%;
		padding: 8px 11px;
	}
}