/*
 * scbt-pill-menu.css — pill treatment for the Helix Ultimate main navigation.
 * Part of plg_system_scbtbrand. Do not edit on the server; edit the source in
 * development/scbtbrand-color/ and reinstall, or the next plugin update
 * overwrites your change.
 *
 * Custom properties (--scbt-brand etc.) are emitted by the plugin from its
 * params. Every var() here carries a literal fallback so the sheet still
 * renders correctly if that inline <style> is ever missing.
 *
 * ---------------------------------------------------------------------------
 * WHY THE RULES LOOK LIKE THIS — five constraints from the stock template:
 *
 * 1. The <ul> is  class="sp-megamenu-parent … d-none d-lg-block".  Bootstrap
 *    sets  .d-lg-block{display:block!important}  at >=992px and
 *    .d-none{display:none!important}  below it.  So `display` can only be
 *    changed with !important, and that rule MUST stay inside the
 *    min-width:992px media query — an unguarded  display:flex!important
 *    would also beat .d-none and drop the desktop menu on top of the
 *    mobile hamburger.
 *
 * 2. Vertical centring in the stock template is done entirely by
 *    `line-height:90px` on  .sp-megamenu-parent > li > a  (template.css:1266)
 *    with zero vertical padding.  Pills need real padding, so line-height is
 *    reset to ~1 and the centring is done with flexbox instead.
 *
 * 3. The template style has enable_navigation_font=1, which makes Helix emit
 *    an inline <style> for `.sp-megamenu-parent > li > a` at specificity
 *    (0,1,2), rendered AFTER every <link>.  Prefixing with #sp-menu gives
 *    (1,1,2) so these rules win without !important.  It sets font-family /
 *    -size / -weight / -style only, so geometry was never at risk.
 *
 * 4. The stock hover colour is keyed on `> li:hover > a`, NOT `> a:hover`
 *    (preset2.css:59, restated in scbt-rebrand.css:72).  The hover rule below
 *    beats it on the #sp-menu id rather than by copying its shape, which is
 *    what lets the wash key on the pill itself — see the hover rule's own note.
 *
 * 5. THE <li> MUST REACH THE BOTTOM EDGE OF THE <ul>.  This is the one that is
 *    invisible until it breaks, and it is why the pills are centred by
 *    STRETCHING the <li> rather than by centring it.
 *
 *    Helix opens a dropdown purely on `:hover` of the <li>
 *    (template.css:1375-1377) and positions the panel at `top:100%` of its
 *    containing block.  For a FULL-WIDTH mega dropdown that containing block is
 *    not the <li>: main.js:64-66 adds `menu-justify` to its parent <li>, and
 *    template.css:1260-1262 makes that <li> `position:static`, so the panel is
 *    positioned against the <ul> — it opens at the bottom of the 90px menu bar,
 *    not under the pill.
 *
 *    Stock Helix got away with that because constraint 2's `line-height:90px`
 *    made every <li> fill the header, so the <li>'s bottom edge WAS the <ul>'s
 *    bottom edge.  v1.4.0 centred a pill-height <li> instead, which left ~27px
 *    of header belonging to neither the <li> nor the panel: crossing it dropped
 *    `li:hover`, the panel went back to `display:none`, and КАПАЦИТЕТИ's
 *    dropdown could not be reached at all.  Fixed in 1.4.1 by the align-content
 *    / align-items pair below.
 * ---------------------------------------------------------------------------
 *
 * THE THREE PILL STATES, so they are not "tidied" into each other:
 *
 *   resting   black label (--scbt-pill-color) inside a BRAND-coloured border,
 *             transparent background
 *   hover     the same black label and brand border over the brand wash
 *   active    brand fill, brand border, white label
 *
 * Only the label colour is black. The border is the brand colour in every
 * state, which is what ties the outlined pills to the filled one.
 */

@media (min-width: 992px) {

	/* Flex row, full header height, so the pills sit centred in the bar.
	   `display` needs !important only because of .d-lg-block — see note 1. */
	#sp-menu .sp-megamenu-parent {
		display: flex !important;

		/* Let INDIVIDUAL PILLS wrap onto a second line when the header runs out
		   of room. Without this the row is nowrap, the pills overflow their
		   column, and because the <ul> is float:right they overflow leftwards
		   across the logo. See also the .row nowrap rule in scbt-header-fit.css,
		   which stops the opposite failure: the whole <ul> being pushed onto a
		   new flex line and falling out of the header. */
		flex-wrap: wrap;

		/* Keep every line, wrapped or not, flush right under the logo. */
		justify-content: flex-end;

		/* STRETCH, NOT CENTER. This pair is constraint 5.
		   align-content grows the flex line to this container's used cross size
		   — the min-height below — and align-items then makes every <li> fill
		   that line, so the <li> ends exactly where the dropdown panels begin.
		   The pills are centred inside their own <li> instead, by the flex rule
		   on the <li>. Set either of these back to `center` and the <li> shrinks
		   to pill height again, reopening the dead band that made the full-width
		   dropdown unreachable.
		   A wrapping container does honour align-content with a single line,
		   which is what the arrangement rests on. Where it somehow did not, the
		   <li> would simply stay short and the symptom would be the old one —
		   this degrades to the previous behaviour, never to something new. */
		align-items: stretch;
		align-content: stretch;

		/* What separates wrapped lines. This used to be a 3px vertical margin on
		   the <li>, chosen deliberately over row-gap because row-gap needs
		   Safari 14.1+. That trade is now the wrong way round: a vertical margin
		   pulls the <li> back off the bottom edge of this <ul> and reopens a 3px
		   version of the gap constraint 5 describes. row-gap puts the same 6px
		   BETWEEN lines and none around them, so the last line still reaches the
		   edge — and where it is unsupported it is ignored, which costs the
		   separation between wrapped lines and nothing else. */
		row-gap: 6px;

		/* min-height, not height: one line sits exactly as before at the header
		   height, and two lines are allowed to make the header taller rather
		   than spilling out of it. This is also the value align-content stretches
		   a single line to. */
		min-height: var(--scbt-header-height, 90px);

		/* stock is `margin: 0 -15px`, which cancelled the old 15px link padding;
		   the pills carry their own padding, so that overhang must go. */
		margin: 0;
	}

	/* Full height of its flex line — constraint 5 — with the pill centred inside
	   it. Stock is `display:inline-block`, which as a flex item is blockified and
	   would leave the pill at the top of a stretched <li>.
	   The vertical margin is deliberately 0; see the row-gap note above. */
	#sp-menu .sp-megamenu-parent > li {
		display: flex;
		align-items: center;
		margin: 0 var(--scbt-pill-gap, 3px);
	}

	/* Only trim the outer edge on the last pill. first-child is deliberately not
	   trimmed: once the menu wraps, the first pill is no longer the one at the
	   left edge of a line, so zeroing its margin misaligns the wrapped row. */
	#sp-menu .sp-megamenu-parent > li:last-child {
		margin-right: 0;
	}

	/* The header is a fixed 90px in template.css:114. Once pills can wrap it has
	   to be free to grow, or a second line renders outside the header and lands
	   on whatever follows it — on this site, the hero slider.
	   Caveat: with sticky_header on, template.css:141-143 offsets the page by a
	   hard 90px. If the menu is genuinely wrapping AND the header is stuck, that
	   offset will be short by the height of the extra line. Keeping the menu on
	   one line (via "Fit header columns", or a smaller font) avoids this. */
	#sp-header {
		height: auto;
		min-height: var(--scbt-header-height, 90px);
	}

	/* The pill itself.
	   font-size IS set here, and needs the #sp-menu prefix to do it: the template
	   style has enable_navigation_font=1, whose inline <style> sets font-size at
	   specificity (0,1,2) after every <link>. Ours is (1,1,2) and wins.
	   font-weight is still left alone, so Template → Fonts → Navigation keeps
	   control of it. */
	#sp-menu .sp-megamenu-parent > li > a {
		display: inline-block;
		font-size: var(--scbt-menu-font-size, 14px);
		line-height: 1.1;
		padding: var(--scbt-pill-padding-y, 8px) var(--scbt-pill-padding-x, 16px);
		border: 1px solid var(--scbt-brand, #E6007E);
		border-radius: var(--scbt-pill-radius, 999px);
		color: var(--scbt-pill-color, #111111);
		background: transparent;
		text-transform: var(--scbt-pill-transform, uppercase);
		white-space: nowrap;
		transition: background-color .18s ease, color .18s ease, border-color .18s ease;
	}

	/* Any Font Awesome icon Helix renders inside a pill (the menu item's icon
	   field) should scale with the label, not sit at its own size. */
	#sp-menu .sp-megamenu-parent > li > a > .fa,
	#sp-menu .sp-megamenu-parent > li > a > .far,
	#sp-menu .sp-megamenu-parent > li > a > .fas {
		font-size: 1em;
		margin-right: 5px;
	}

	/* Hover / keyboard focus: light wash, pill stays outlined, LABEL STAYS BLACK.
	   The colour is restated rather than left to inherit because both
	   scbt-rebrand.css and preset2.css:59 set a hover colour on
	   `.sp-megamenu-parent > li:hover > a`; without this line the label would go
	   brand-coloured on hover.

	   THE FIRST SELECTOR IS `> a:hover`, NOT `> li:hover > a`, and that is the
	   second half of constraint 5's fix. The <li> now spans the whole 90px
	   header, so keying the wash on it would light a pill up while the cursor is
	   still 25px above or below the pill. Keying it on the <a> means a pill
	   lights up only when it is actually pointed at. Specificity (1,2,2) against
	   preset2.css:59 and scbt-rebrand.css:72 at (0,2,2) — the id still carries
	   it, no !important.

	   The third selector is the exception that keeps the affordance: an item with
	   a dropdown holds its wash for as long as the cursor is anywhere inside the
	   item, the open panel included, since the panel is a child of the <li>.
	   (1,3,2), still beaten by the .active block below it on source order. */
	#sp-menu .sp-megamenu-parent > li > a:hover,
	#sp-menu .sp-megamenu-parent > li > a:focus,
	#sp-menu .sp-megamenu-parent > li.sp-has-child:hover > a {
		background: var(--scbt-brand-wash, rgba(230, 0, 126, .1));
		border-color: var(--scbt-brand, #E6007E);
		color: var(--scbt-pill-color, #111111);
	}

	/* Active: filled.
	   `.active` is the right hook, not `.current-item`. Helix puts `active` on
	   the current item AND every ancestor, so at top level it is always the tab
	   whose branch you are inside. `.current-item` matches only the exact leaf,
	   which would leave the top-level pill unfilled on any sub-page. */
	#sp-menu .sp-megamenu-parent > li.active > a,
	#sp-menu .sp-megamenu-parent > li.active:hover > a,
	#sp-menu .sp-megamenu-parent > li.current-item > a {
		background: var(--scbt-brand, #E6007E);
		border-color: var(--scbt-brand, #E6007E);
		color: #fff;
	}

	/* The dropdown caret is a ::after with `float:right` (template.css:1396),
	   which relied on the old 90px line box. Un-float it so it sits inline
	   inside the pill. Stock specificity is (0,3,3) via `body.ltr …`; ours is
	   (1,3,3), so no !important. */
	#sp-menu .sp-megamenu-parent > li.sp-has-child > a:after,
	#sp-menu .sp-megamenu-parent > li.sp-has-child > span:after {
		float: none;
		margin-left: 6px;
	}

	/* Keep the badge legible once the pill is filled. */
	#sp-menu .sp-megamenu-parent > li.active > a .sp-menu-badge {
		background: #fff;
		color: var(--scbt-brand, #E6007E);
	}
}