/*
 * scbt-header-logos.css — the two-logo header: logo | menu | second logo.
 * Part of plg_system_scbtbrand. Loaded only when the "Two-logo header" param is
 * on; switch that off to stop sending it. Do not edit on the server; edit the
 * source in development/scbtbrand-color/ and reinstall.
 *
 * ---------------------------------------------------------------------------
 * SCOPE
 *
 * Every rule is prefixed  #sp-header.scbt-dual-header . That class is emitted by
 * exactly one file — templates/shaper_helixultimate/headers/style-scbt/header.php
 * — so this sheet cannot reach the three shipped header styles even while it is
 * being loaded. Leaving the param on with a different header selected costs one
 * HTTP request and changes nothing.
 *
 * WHAT IT HAS TO SOLVE
 *
 * Helix splits the header with fixed Bootstrap columns. The new header adds a
 * third one, and no three-way fixed split is right at every width: the logos are
 * as wide as their images, and whatever is left belongs to the menu. So the row
 * becomes  auto | 1fr | auto  — the same inversion scbt-header-fit.css performs
 * on the two-column header, and the two sheets set the same values on #sp-logo
 * and #sp-menu, so both can be on at once without fighting.
 *
 * Unlike scbt-header-fit.css this is NOT desktop-only. The second logo stays
 * visible below 992px (shrunk), so the three columns have to hold at every
 * width. What is desktop-only here is the menu alignment, because below 992px
 * the <ul> is display:none and the column carries only the hamburger.
 *
 * ASSUMES THE PILL MENU IS ON. `justify-content` needs the flex row that
 * scbt-pill-menu.css establishes. With the pill menu switched off the <ul> is a
 * plain block and the alignment param stops having any effect — the menu then
 * sits left in its column rather than right, because the float below is undone.
 * The two settings are meant to be used together.
 * ---------------------------------------------------------------------------
 */

/* --- the three columns ---------------------------------------------------
   nowrap for the reason spelled out at length in scbt-header-fit.css: .row is
   flex-wrap:wrap by default, and with width:auto columns their combined
   max-content width can exceed the row, which pushes a whole column onto a
   second flex line and out of the fixed-height header. nowrap makes the flex
   algorithm shrink the one flexible column instead — the menu on desktop, where
   the pills then wrap inside it, and the second logo on a phone. */
#sp-header.scbt-dual-header .row {
	flex-wrap: nowrap;
	align-items: center;
}

/* --- how wide the header is ----------------------------------------------
 * `.container` is stock Bootstrap: width:100% with a max-width that steps
 * 540 / 720 / 960 / 1140px. Both rules below are written so that WITH NO PARAM
 * SET they reproduce that exactly — the fallbacks are Bootstrap's own values at
 * the breakpoint each block covers, which is why the two max-widths differ and
 * why the padding fallback is 15px. Nothing changes until an administrator types
 * a value.
 *
 * That is also why the override starts at 992px and not lower: below it the
 * container's smaller steps are shared with every section of the page, and a
 * header that stopped matching them on a tablet would look broken rather than
 * wide. 100% is the useful value here — it gives an edge-to-edge header, with
 * the side padding below deciding how far in the logos sit.
 *
 * WORTH KNOWING BEFORE USING IT: this widens the HEADER only. The hero slider
 * and every SP Page Builder section below keep their own 1140px containers, so
 * the logos and the menu stop lining up with the content underneath. That reads
 * as deliberate at 100% and as a mistake at 1280px, which is the whole art of
 * choosing this value.
 *
 * width:100% is never removed, so a max-width larger than the screen can only
 * ever mean "as wide as the screen" — it cannot overflow.
 */
#sp-header.scbt-dual-header .container {
	padding-left: var(--scbt-header-pad-x, 15px);
	padding-right: var(--scbt-header-pad-x, 15px);
}

@media (min-width: 992px) {
	#sp-header.scbt-dual-header .container {
		max-width: var(--scbt-header-width, 960px);
	}
}

@media (min-width: 1200px) {
	#sp-header.scbt-dual-header .container {
		max-width: var(--scbt-header-width, 1140px);
	}
}

/* The rules below 992px come first and the desktop ones override them, because
   the two layouts differ in more than a breakpoint: below 992px the menu column
   holds nothing but the hamburger, so it is sized to its content and the SECOND
   LOGO is the flexible column. Above it, the menu is.

   `order` puts the hamburger at the far right of a phone header rather than
   between the two logos. Source order is logo, menu, logo2 — the desktop order,
   which is the one being designed — so the swap is done here and undone at
   992px. */
#sp-header.scbt-dual-header .row > #sp-logo {
	order: 1;
	flex: 0 0 auto;
	width: auto;
	max-width: none;
}

/* Takes the slack on a phone, with its content pushed right, so the hamburger
   still lands on the right edge. flex-shrink:1 and min-width:0 are what let it
   give way on a narrow screen instead of pushing the hamburger off the header —
   see the object-fit note on .logo2-image below, which is the other half of
   that. */
#sp-header.scbt-dual-header .row > #sp-logo2 {
	order: 2;
	flex: 1 1 auto;
	width: auto;
	max-width: none;
	min-width: 0;
}

#sp-header.scbt-dual-header .row > #sp-menu {
	order: 3;
	flex: 0 0 auto;
	width: auto;
	max-width: none;
	min-width: 0;
}

/* --- the second logo ----------------------------------------------------- */

/* Centred against the header height, hard against the right edge of the row. */
#sp-header.scbt-dual-header #sp-logo2 .sp-column {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	height: var(--scbt-header-height, 90px);
}

/* line-height:0 removes the descender gap an inline image leaves under itself,
   which would otherwise push the logo a few pixels above centre. */
#sp-header.scbt-dual-header .logo2 {
	display: block;
	line-height: 0;
}

/* `height` beats template.css:56-60's `img { height: auto }` — a class selector
   against an element selector, so no !important, the same trick mod_scbt_news
   uses on its card images.

   max-width and object-fit are the narrow-screen guard. The column above can
   shrink; when it does, max-width caps the image's BOX, and object-fit scales the
   picture down inside that box instead of squashing it — a fixed height with a
   capped width would otherwise distort the logo. On desktop the column is sized
   to its content, so neither ever bites. */
#sp-header.scbt-dual-header .logo2-image {
	display: block;
	height: var(--scbt-logo2-height-mobile, 34px);
	width: auto;
	max-width: 100%;
	object-fit: contain;
	object-position: right center;
}

@media (min-width: 992px) {

	/* Source order again, and the menu becomes the flexible column: it now holds
	   the pills rather than a hamburger, and the second logo wants its full
	   width. */
	#sp-header.scbt-dual-header .row > #sp-menu {
		order: 2;
		flex: 1 1 auto;
	}

	#sp-header.scbt-dual-header .row > #sp-logo2 {
		order: 3;
		flex: 0 0 auto;
	}

	#sp-header.scbt-dual-header .logo2-image {
		height: var(--scbt-logo2-height, 56px);
	}

	/* The pills sit between the two logos rather than hard right.
	   float:right comes from template.css:1246-1252 and is what pins the stock
	   menu to the right edge of its column. `display:flex` does not cancel a
	   float — the <ul> is still a floated, shrink-to-fit box — so it has to be
	   unset explicitly before justify-content means anything. */
	#sp-header.scbt-dual-header .sp-megamenu-parent {
		float: none;
		justify-content: var(--scbt-menu-justify, center);
	}
}