/*
 * scbt-header-fit.css — give the menu column all the room the logo doesn't need.
 * Part of plg_system_scbtbrand. Loaded only when the "Fit header columns"
 * param is on; switch that off to return the header to the stock Bootstrap grid.
 *
 * ---------------------------------------------------------------------------
 * THE PROBLEM THIS SOLVES
 *
 * Helix splits the header row with fixed Bootstrap columns. On header style-3
 * that is  #sp-logo.col-10.col-lg-4  and  #sp-menu.col-2.col-lg-8 , i.e. the
 * logo reserves a third of the row whether it needs it or not.
 *
 * The pill menu is wider than plain text links were. In v1.0.1 the <ul> was a
 * `float: right` flex row with the default `flex-wrap: nowrap`, so when the
 * pills needed more than #sp-menu's 66.67% they did not wrap — they overflowed
 * LEFTWARDS out of their column and straight over the logo. That is what the
 * first live build showed: the first pill sat on "АРЕНА … ТРАЈКОВСКИ".
 *
 * The <ul> now carries `flex-wrap: wrap` (scbt-pill-menu.css), so surplus pills
 * drop to a second line instead of overflowing. This sheet is still worth
 * having: without it the logo hogs a third of the row, so the menu wraps to two
 * lines far earlier than it needs to.
 *
 * Shrinking the font and padding also buys room, but only moves the cliff edge —
 * add one menu item or one long label and it wraps again.
 *
 * THE FIX
 *
 * Let the logo take its natural width and hand every remaining pixel to the
 * menu. Bootstrap's .col-lg-4 is  flex: 0 0 33.333%; max-width: 33.333%  at
 * specificity (0,1,0) and is NOT !important, so  #sp-header .row > #sp-logo
 * at (1,1,1) overrides it cleanly.
 *
 * Desktop only: below 992px the megamenu is display:none and the offcanvas
 * hamburger takes over, so the stock col-10/col-2 split must stay untouched.
 * ---------------------------------------------------------------------------
 */

@media (min-width: 992px) {

	/* CRITICAL, and the reason v1.0.2 looked worse than v1.0.1.
	   Bootstrap's .row is `flex-wrap: wrap`. With the two columns switched to
	   width:auto below, their combined max-content width can exceed the row —
	   and a wrapping flex container then pushes the ENTIRE #sp-menu onto a
	   second flex line. Because #sp-header is a fixed 90px, that whole menu
	   renders outside the header, on top of the hero slider.
	   nowrap keeps the logo and the menu on one line; the flex algorithm then
	   shrinks #sp-menu instead (it has flex-shrink:1 and min-width:0 below), and
	   the pills wrap inside it, which is the behaviour we actually want. */
	#sp-header .row {
		flex-wrap: nowrap;
	}

	/* Logo: only as wide as the logo actually is, and never squeezed. */
	#sp-header .row > #sp-logo {
		flex: 0 0 auto;
		width: auto;
		max-width: none;
	}

	/* Menu: everything that is left.
	   min-width:0 lets this flex item shrink below its content width, which is
	   what stops it pushing the logo out of the row instead of overflowing. */
	#sp-header .row > #sp-menu {
		flex: 1 1 auto;
		width: auto;
		max-width: none;
		min-width: 0;
	}

	/* NOT DONE HERE, deliberately: an overflow-x:auto scroll container on
	   .sp-column as a last-resort guard. The CSS overflow spec forces the other
	   axis to a non-visible value whenever one axis is scrollable, so
	   `overflow-x:auto; overflow-y:visible` computes to auto/auto — and the
	   absolutely-positioned .sp-dropdown panels, which are descendants of
	   .sp-column, would be clipped at the bottom of the 90px header.
	   КАПАЦИТЕТИ and ЗА НАС both have dropdowns, so that would be an obvious
	   regression. Reclaiming the logo's unused width above is the whole fix; if
	   the labels still cannot fit, shorten a menu title or drop the font size
	   further in the plugin params. */
}