/* ---------------------------------------------------------------------------
 * RMS Commerce Core — header and footer.
 *
 * One stylesheet, three storefronts. Every colour below is a --rms-* custom
 * property printed by RMS_Brand::print_tokens(); the values inside var() are
 * the EM palette and exist only as a fallback if the token block is missing.
 * Not one literal brand colour appears here, which is what lets the same
 * header render red on rms-a.africa, green on rms-s.africa and blue on
 * rms-e.africa without a fork.
 *
 * ===========================================================================
 * THE LAYOUT DEFECT THIS FILE EXISTS TO MAKE IMPOSSIBLE
 * ===========================================================================
 * The legacy .main-row is a flex row of three items, none of which may shrink,
 * so it has a fixed intrinsic width. Measured in a headless browser against
 * the live markup and stylesheets:
 *
 *     mobile   logo 280 + actions 190 + padding 32                =  486px
 *     desktop  logo 432 + nav 852 + actions 140 + padding 32      = 1456px
 *
 * The mobile row is 486px wide inside a 320–414px viewport, so
 * document.scrollWidth was a constant 486px on every page at every phone
 * width: every page scrolled sideways and content sat off the left edge. The
 * desktop row overruns its own 1200px container by 256px, so every laptop
 * under ~1500px scrolled sideways too, and because flex items shrink before
 * they overflow, the nav compressed until "About Us" — the only two-word
 * label — wrapped onto two lines.
 *
 * ---------------------------------------------------------------------------
 * THE NEW ROW, WITH THE ARITHMETIC
 *
 * Character widths below are 0.575em for the 700-weight lock-up and 0.55em for
 * the 600-weight nav, which are the measured averages for a system-UI face at
 * these sizes. DejaVu Sans — about 12% wider than any realistic fallback — is
 * checked as the stress case at the end of each block.
 *
 * DESKTOP, at the 1280px breakpoint where the nav appears, worst case (EM:
 * the longest site name, and the only site with a Brands item, so eight):
 *
 *   container content         1280 - (2 x 16 gutter)                = 1248
 *   logo   "RMS ElectroMechanica" 20 chars x 20px x 0.575           =  230
 *          (.rms-chrome__logo-sub is display:none from 1280 up —
 *           there is no room for the AUTHORISED DISTRIBUTOR tag
 *           beside eight nav items in any font, and the top bar
 *           already says it)
 *   nav    each link = label + 18 (2 x 9 padding), + 18 for a caret
 *          Products    8 x 7.5 = 60  + 18 + 18 = 96
 *          Brands      6 x 7.5 = 45  + 18 + 18 = 81
 *          Categories 10 x 7.5 = 75  + 18      = 93
 *          Industries 10 x 7.5 = 75  + 18      = 93
 *          Guides      6 x 7.5 = 45  + 18      = 63
 *          Tools       5 x 7.5 = 38  + 18      = 56
 *          RMS Group   9 x 7.5 = 68  + 18      = 86
 *          Contact     7 x 7.5 = 53  + 18      = 71
 *                                        sum   = 639
 *          + 7 gaps x 1px                      =  646
 *   actions 4 icons x 36 + 3 gaps x 6                              =  162
 *   row gaps 2 x 16                                                =   32
 *                                                    ROW NEEDS     = 1070
 *   1070 <= 1248: 178px spare. In DejaVu Sans: 1176 <= 1248, still inside.
 *   ABB and Schneider have no Brands item and much shorter names: 838 and 908.
 *
 * MOBILE at 360px (the nav is not in the row at all below 1280 — the
 * hamburger panel carries every link):
 *
 *   container content         360 - 32                             =  328
 *   logo   clamp(12px, 3.6vw, 20px) at 360 = 12.96px
 *          20 chars x 12.96 x 0.575                                =  149
 *   actions search + cart + quote + hamburger (the account icon is
 *          in the panel): 4 x 34 + 3 gaps x 2                      =  142
 *   row gap                                                        =    8
 *                                                    ROW NEEDS     =  299
 *   299 <= 328: 29px spare, against 486 needed and 328 available before.
 *   At 320px: 138 + 8 + 142 = 288 against 288 — exactly fits.
 *
 * Below that the arithmetic stops being the guarantee and the rules do: the
 * lock-up is the ONLY flexible item in the row (min-width:0, ellipsis) and
 * everything else is flex:0 0 auto, so the row can never be wider than its
 * container at any width, in any font, in any language.
 * ------------------------------------------------------------------------- */

/* A net, not the fix. `clip`, NEVER `hidden`: overflow:hidden makes the
   element a scroll container, which breaks position:sticky on this header and
   on the product page's section nav. clip does not. */
html,
body {
	overflow-x: clip;
}

.rms-chrome,
.rms-chrome *,
.rms-chrome *::before,
.rms-chrome *::after {
	box-sizing: border-box;
}

.rms-chrome a {
	text-decoration: none;
}

.rms-chrome button {
	margin: 0;
	padding: 0;
	font: inherit;
	color: inherit;
	background: transparent;
	border: 0;
	cursor: pointer;
}

.rms-chrome ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* The header container matches the theme's .industrial-container. They were
   1200 and 1280 respectively, so the header sat 40px narrower than every
   section beneath it — a misalignment visible on every page. */
.rms-chrome .rms-container {
	max-width: var(--rms-maxw, 1280px);
}

/* ---------------------------------------------------------------------------
 * HEADER SHELL
 * ------------------------------------------------------------------------- */

.rms-chrome--header {
	position: sticky;
	top: 0;
	z-index: 500;
	width: 100%;
	background: var(--rms-surface, #fff);
	border-bottom: 1px solid var(--rms-border, #dfe6ec);
	color: var(--rms-text, #12181d);
	font-size: 14px;
	line-height: 1.4;
}

.rms-chrome__top {
	background: var(--rms-dark, #0b1220);
	color: rgba(255, 255, 255, 0.86);
}

.rms-chrome__top-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 36px;
	padding-block: 5px;
	font-size: 12.5px;
}

.rms-chrome__tagline {
	margin: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	letter-spacing: 0.01em;
}

.rms-chrome__top-links {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 16px;
	margin-left: auto;
}

.rms-chrome__top-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: inherit;
	white-space: nowrap;
}

.rms-chrome__top-link:hover,
.rms-chrome__top-link:focus {
	color: #fff;
}

.rms-chrome__top-link .rms-chrome__icon {
	width: 14px;
	height: 14px;
}

.rms-chrome__top-link--cta {
	font-weight: 700;
	color: #fff;
	box-shadow: inset 0 -1px 0 0 var(--rms-primary, #0098db);
}

/* The tagline is the first thing to go when the bar runs out of room; the
   phone number and the quote link are the two things a visitor came for. */
@media (max-width: 599px) {
	.rms-chrome__tagline {
		display: none;
	}
}

/* ---------------------------------------------------------------------------
 * THE ROW
 * ------------------------------------------------------------------------- */

.rms-chrome__row {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 8px;
	min-height: 60px;
}

/* The one flexible item. min-width:0 overrides the flex default of
   min-width:auto, which is what stops a long site name from forcing the row
   wider than the container. */
.rms-chrome__logo {
	display: flex;
	flex: 1 1 auto;
	min-width: 0;
	align-items: baseline;
	gap: 10px;
	color: inherit;
}

.rms-chrome__logo-mark {
	/* inline-flex so the whitespace between the three template spans never
	   renders — the wordmark must read RMS-ABB.Africa, not "RMS- ABB .Africa". */
	display: inline-flex;
	align-items: baseline;
	min-width: 0;
	overflow: hidden;
	font-size: clamp(12px, 3.6vw, 20px);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.02em;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* v1.4: the whole "RMS-ABB" reads in the brand colour; ".Africa" in ink. */
.rms-chrome__logo-a {
	color: var(--rms-primary, #0098db);
}

.rms-chrome__logo-b {
	color: var(--rms-primary, #0098db);
}

/* ".Africa" — ink, same weight, so the wordmark reads RMS-ABB.Africa with
   only the brand short code coloured. */
.rms-chrome__logo-c {
	color: var(--rms-text, #12181d);
}

.rms-chrome__logo-sub {
	display: none;
	flex: 0 0 auto;
	padding-left: 10px;
	border-left: 1px solid var(--rms-border, #dfe6ec);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--rms-text-mut, #5b6b78);
	white-space: nowrap;
}

/* ---------------------------------------------------------------------------
 * DESKTOP NAV
 *
 * Hidden below 1280 — the hamburger panel already contains every link, so
 * nothing is lost, and above 1280 the arithmetic at the top of this file
 * applies.
 * ------------------------------------------------------------------------- */

.rms-chrome__nav {
	display: none;
}

.rms-chrome__nav-list {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 1px;
}

.rms-chrome__nav-item {
	position: relative;
	flex: 0 0 auto;
}

/* nowrap + no shrink: a label cannot split, in any font, at any width. This
   single pair is what stops "RMS Group" and "About Us" wrapping. */
.rms-chrome__navlink {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 4px;
	height: 38px;
	padding: 0 9px;
	border-radius: var(--rms-radius-sm, 6px);
	font-size: 13.5px;
	font-weight: 600;
	white-space: nowrap;
	color: var(--rms-text, #12181d);
	/* The dropdown triggers are <button>s and buttons DO NOT inherit font
	   the way links do — which is exactly why "Products"/"Brands"/"Tools"
	   rendered in a different face from the plain links beside them. Every
	   font property is pinned here so both elements are identical. */
	font-family: inherit;
	line-height: 1;
	letter-spacing: inherit;
	text-transform: none;
	text-decoration: none;
	background: none;
	border: 0;
	margin: 0;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
}

.rms-chrome__navlink:hover,
.rms-chrome__navlink:focus {
	color: var(--rms-primary-d, #0078ad);
	background: var(--rms-muted, #f6f8fa);
}

.rms-chrome__navlink--drop .rms-chrome__icon {
	width: 14px;
	height: 14px;
	transition: transform 0.15s ease;
}

/* ---- header segmentation --------------------------------------------------
   Three visible segments — wordmark | navigation | actions — instead of one
   continuous run of items. The hairline before the actions cluster exists at
   every desktop width; the roomier gaps and the divider between the browse
   dropdowns and the plain page links wait for 1440px, where the width
   arithmetic at the top of this file has slack for them. */

@media (min-width: 1280px) {
	.rms-chrome__actions {
		padding-left: 14px;
		border-left: 1px solid var(--rms-border, #dfe6ec);
	}
}

@media (min-width: 1440px) {
	.rms-chrome__row {
		gap: 16px;
	}

	.rms-chrome__nav-list {
		gap: 4px;
	}

	.rms-chrome__navlink {
		padding: 0 12px;
	}

	/* The divider between the browse segment (the last dropdown) and the
	   first plain link that follows it. */
	.rms-chrome__nav-item--drop + .rms-chrome__nav-item:not(.rms-chrome__nav-item--drop) {
		margin-left: 14px;
	}

	.rms-chrome__nav-item--drop + .rms-chrome__nav-item:not(.rms-chrome__nav-item--drop)::before {
		content: "";
		position: absolute;
		left: -9px;
		top: 50%;
		height: 18px;
		width: 1px;
		transform: translateY(-50%);
		background: var(--rms-border, #dfe6ec);
	}
}

.rms-chrome__navlink--drop[aria-expanded='true'] .rms-chrome__icon {
	transform: rotate(180deg);
}

/* ---- dropdown panels ---- */

/* Closed with visibility rather than the hidden attribute, so hover and
   keyboard focus can open it with no JavaScript at all. rms-chrome.js adds
   click control on top by setting aria-expanded on the button. */
.rms-chrome__panel {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	z-index: 60;
	width: min(460px, calc(100vw - 32px));
	max-height: min(72vh, 640px);
	padding: 12px;
	overflow-y: auto;
	overscroll-behavior: contain;
	background: var(--rms-surface, #fff);
	border: 1px solid var(--rms-border, #dfe6ec);
	border-radius: var(--rms-radius, 10px);
	/* One flat shadow to lift the panel off the page. Not a glow. */
	box-shadow: 0 10px 28px rgba(11, 18, 32, 0.14);
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	/* These are the CLOSING transitions: the panel holds for 220ms after
	   the pointer leaves before it starts to fade, so the diagonal move
	   from the trigger into the panel never loses it. Opening (below)
	   clears the delays and is instant. */
	transition: opacity 0.12s ease 0.22s, visibility 0s linear 0.34s;
}

/* The 6px visual gap between trigger and panel is bridged by an invisible
   strip, so the pointer never crosses ground where nothing is hovered —
   the reason the menu used to vanish before it could be reached. */
.rms-chrome__panel::before {
	content: "";
	position: absolute;
	top: -8px;
	left: 0;
	right: 0;
	height: 8px;
}

.rms-chrome__nav-item:hover > .rms-chrome__panel,
.rms-chrome__nav-item:focus-within > .rms-chrome__panel,
.rms-chrome__navlink--drop[aria-expanded='true'] + .rms-chrome__panel {
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
	transition: opacity 0.12s ease;
}

/* Left-aligned to its item, and that is safe by the same arithmetic as the
   row: the two dropdowns are always the first nav items, so a 460px panel
   opening at the nav's left edge (~250px in) ends around 710px inside a
   1248px container. A panel is the same overflow risk as the row, one level
   down, so it is capped at calc(100vw - 32px) as well. */

.rms-chrome__panel--brands {
	width: min(560px, calc(100vw - 32px));
}

.rms-chrome__panel-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 2px 6px 10px;
	margin-bottom: 8px;
	border-bottom: 1px solid var(--rms-border, #dfe6ec);
}

.rms-chrome__panel-kicker {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--rms-text-mut, #5b6b78);
}

.rms-chrome__panel-all {
	font-size: 13px;
	font-weight: 700;
	color: var(--rms-primary-d, #0078ad);
	white-space: nowrap;
}

/* Bordered brand cards in a grid — the presentation the EM panel runs. */
.rms-chrome__brands {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
}

.rms-chrome__brands a {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding: 10px 12px;
	background: var(--rms-surface, #fff);
	border: 1px solid var(--rms-border, #dfe6ec);
	border-radius: var(--rms-radius, 10px);
	font-size: 13px;
	font-weight: 600;
	text-align: center;
	color: var(--rms-text, #12181d);
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.rms-chrome__brands a:hover,
.rms-chrome__brands a:focus {
	color: var(--rms-primary-d, #0078ad);
	border-color: var(--rms-primary, #0098db);
	box-shadow: 0 6px 16px rgba(2, 6, 23, 0.06);
}

/* ---------------------------------------------------------------------------
 * ACTIONS
 *
 * Fixed-size, never shrinking, and the badges are absolutely positioned so a
 * two-digit count cannot widen the row. The legacy badge was an inline-flex
 * sibling with a 6px margin, which is 24px of row width that appeared only
 * once something was in the cart — the header got wider as you shopped.
 * ------------------------------------------------------------------------- */

.rms-chrome__actions {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 6px;
	margin-left: auto;
}

.rms-chrome__iconbtn {
	position: relative;
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: var(--rms-radius-sm, 6px);
	color: var(--rms-text, #12181d);
}

.rms-chrome__iconbtn:hover,
.rms-chrome__iconbtn:focus {
	color: var(--rms-primary-d, #0078ad);
	background: var(--rms-muted, #f6f8fa);
}

.rms-chrome__iconbtn--cart .rms-chrome__icon {
	color: var(--rms-primary, #0098db);
}

.rms-chrome__badge {
	position: absolute;
	top: 1px;
	right: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	border-radius: 999px;
	background: var(--rms-primary, #0098db);
	color: #fff;
	font-size: 10px;
	font-weight: 800;
	line-height: 1;
}

.rms-chrome__icon--alt {
	display: none;
}

.rms-chrome__iconbtn--menu[aria-expanded='true'] .rms-chrome__icon--menu {
	display: none;
}

.rms-chrome__iconbtn--menu[aria-expanded='true'] .rms-chrome__icon--alt {
	display: block;
}

/* The account icon lives in the mobile panel instead, which is where the 34px
   step and the 2px gap below get their four icons from. */
@media (max-width: 1279px) {
	.rms-chrome__iconbtn--account {
		display: none;
	}
}

@media (max-width: 380px) {
	.rms-chrome__actions {
		gap: 2px;
	}

	.rms-chrome__iconbtn {
		width: 34px;
		height: 34px;
	}

	.rms-chrome__icon {
		width: 18px;
		height: 18px;
	}
}

/* ---------------------------------------------------------------------------
 * SEARCH DRAWER
 *
 * Verbatim from the Schneider header, the only one of the three that got this
 * right:
 *
 *   Searchanise binds on page load and anchors its dropdown to the input's
 *   measured position. An input inside display:none has offsetWidth /
 *   offsetHeight of 0 and no offsetParent, so the widget either skips it
 *   or renders the results panel at 0x0 where you cannot see it.
 *   Parking the bar off-screen keeps it measurable; visibility:hidden
 *   keeps it out of the tab order and invisible.
 *
 * So: absolutely positioned off-screen when closed, static when open. NOT
 * display:none, ever. rms-chrome.js sends the synthetic input/keyup nudge on
 * open that wakes the already-bound widget.
 * ------------------------------------------------------------------------- */

.rms-chrome__search {
	position: absolute;
	top: 0;
	left: -9999px;
	width: 100%;
	visibility: hidden;
	background: var(--rms-surface, #fff);
	border-top: 1px solid var(--rms-border, #dfe6ec);
}

/* :target is the JavaScript-off path — the toggle is an anchor to #rms-search,
   and the Close control is an anchor back to #rms-header. .is-open is the
   scripted path, which cancels that navigation so the URL keeps no hash. */
.rms-chrome__search.is-open,
.rms-chrome__search:target {
	position: static;
	left: auto;
	visibility: visible;
}

.rms-chrome__search-row {
	display: flex;
	align-items: center;
	gap: 8px;
	padding-block: 10px;
}

.rms-chrome__search-form {
	display: flex;
	flex: 1 1 auto;
	min-width: 0;
	gap: 8px;
	margin: 0;
}

.rms-chrome__search-input {
	flex: 1 1 auto;
	min-width: 0;
	height: 42px;
	padding: 0 12px;
	border: 1px solid var(--rms-border, #dfe6ec);
	border-radius: var(--rms-radius-sm, 6px);
	font-size: 14px;
	color: var(--rms-text, #12181d);
	background: var(--rms-surface, #fff);
}

.rms-chrome__search-input:focus {
	outline: 2px solid var(--rms-primary, #0098db);
	outline-offset: 1px;
}

.rms-chrome__search-submit,
.rms-chrome__search-close {
	flex: 0 0 auto;
	height: 42px;
	white-space: nowrap;
}

.rms-chrome__search-close {
	padding: 0 12px;
	border: 1px solid var(--rms-border, #dfe6ec);
	border-radius: var(--rms-radius-sm, 6px);
	font-size: 13px;
	font-weight: 600;
	color: var(--rms-text-mut, #5b6b78);
}

@media (max-width: 599px) {
	.rms-chrome__search-submit {
		display: none; /* The keyboard's own Go key submits the form. */
	}
}

/* ---------------------------------------------------------------------------
 * MOBILE PANEL
 * ------------------------------------------------------------------------- */

.rms-chrome__mobile {
	display: none;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	padding-block: 8px 20px;
	background: var(--rms-surface, #fff);
	border-top: 1px solid var(--rms-border, #dfe6ec);
	/* JS refines this to the real remaining viewport height; the fallback
	   keeps a scrollable panel if the script never runs. */
	max-height: calc(100vh - 96px);
}

/* Same two paths as the search drawer: :target with no JavaScript, .is-open
   with it. */
.rms-chrome__mobile.is-open,
.rms-chrome__mobile:target {
	display: block;
}

.rms-chrome__m-head {
	margin: 14px 0 2px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--rms-text-mut, #5b6b78);
}

.rms-chrome__m-link {
	display: block;
	padding: 11px 2px;
	border-bottom: 1px solid var(--rms-border, #dfe6ec);
	font-size: 15px;
	font-weight: 600;
	color: var(--rms-text, #12181d);
}

.rms-chrome__m-link--strong {
	color: var(--rms-primary-d, #0078ad);
	font-weight: 700;
}

.rms-chrome__brands--mobile {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.rms-chrome__m-close {
	display: inline-block;
	margin-top: 16px;
	padding: 9px 14px;
	border: 1px solid var(--rms-border, #dfe6ec);
	border-radius: var(--rms-radius-sm, 6px);
	font-size: 13px;
	font-weight: 600;
	color: var(--rms-text-mut, #5b6b78);
}

/* ---------------------------------------------------------------------------
 * THE BREAKPOINT
 *
 * 1280, not 1024. At 1024 the row needed 1456px and pushed every page
 * sideways on a 1366px laptop; the hamburger already carries every link, so
 * showing it up to 1279 costs nothing and guarantees the row fits.
 * ------------------------------------------------------------------------- */

@media (min-width: 1280px) {
	.rms-chrome__row {
		gap: 16px;
		min-height: 68px;
	}

	.rms-chrome__nav {
		display: block;
		flex: 0 0 auto;
	}

	/* The panel is closed on desktop whichever mechanism opened it — a hash
	   left in the URL by a phone-width :target must not reopen it here. */
	.rms-chrome__iconbtn--menu,
	.rms-chrome__mobile,
	.rms-chrome__mobile.is-open,
	.rms-chrome__mobile:target {
		display: none;
	}

	.rms-chrome__iconbtn {
		width: 36px;
		height: 36px;
	}

	.rms-chrome__logo {
		flex: 0 1 auto;
	}
}

/* The AUTHORISED DISTRIBUTOR tag returns only where there is provably room
   for it: 1440 - 32 = 1408 against the 1070px row plus the tag's ~115px. */
@media (min-width: 1440px) {
	.rms-chrome__logo-sub {
		display: block;
	}
}

/* ---------------------------------------------------------------------------
 * CATEGORY MENU INSIDE THE CHROME
 *
 * The markup comes from rms_category_menu_html() in accordion mode, so it is
 * <details>/<summary> and works with no JavaScript at all. rms-base.css styles
 * the menu itself; these rules only fit it to the header's two containers.
 * ------------------------------------------------------------------------- */

.rms-chrome .rms-menu--accordion {
	margin: 0;
}

.rms-chrome__panel .rms-menu__summary,
.rms-chrome__panel .rms-menu__link {
	font-size: 13.5px;
}

.rms-chrome__mobile .rms-menu__summary {
	padding-block: 11px;
	font-size: 15px;
}

/* ---------------------------------------------------------------------------
 * FOOTER
 * ------------------------------------------------------------------------- */

.rms-chrome--footer {
	/* Derived neutrals, not new brand colours: one ink and three opacities of
	   white, so the footer reads identically under all three palettes. */
	--rms-foot-fg: rgba(255, 255, 255, 0.74);
	--rms-foot-fg-strong: #fff;
	--rms-foot-rule: rgba(255, 255, 255, 0.14);
	background: var(--rms-dark, #0b1220);
	color: var(--rms-foot-fg);
	font-size: 14px;
	line-height: 1.6;
}

.rms-chrome__foot-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px;
	padding-block: 44px 36px;
}

.rms-chrome__foot-logo {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	margin: 0 0 10px;
	font-size: 20px;
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.15;
}

/* The lock-up wraps here rather than forcing the column wider — a footer
   column is 1fr of a grid, and an unbreakable 230px word inside a 200px
   column is how the legacy footer overflowed on a phone. */
/* In the footer too, "RMS-ABB" carries the brand colour; ".Africa" stays
   neutral (light on the dark footer ground). */
.rms-chrome__foot-logo .rms-chrome__logo-a {
	color: var(--rms-primary, #0098db);
}

.rms-chrome__foot-logo .rms-chrome__logo-c {
	color: var(--rms-foot-fg-strong);
}

.rms-chrome__foot-logo .rms-chrome__logo-b {
	color: var(--rms-primary, #0098db);
}

.rms-chrome__foot-tagline {
	margin: 0 0 18px;
	max-width: 34em;
}

.rms-chrome__foot-contact {
	display: grid;
	gap: 10px;
}

.rms-chrome__foot-contact li {
	display: grid;
	grid-template-columns: 88px minmax(0, 1fr);
	gap: 10px;
	font-size: 13.5px;
}

/* Contact details laid out as a specification — label column, value column —
   the way a datasheet does it, rather than an icon beside a sentence. */
.rms-chrome__foot-label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.45);
	padding-top: 2px;
}

.rms-chrome--footer a {
	color: var(--rms-foot-fg);
}

.rms-chrome--footer a:hover,
.rms-chrome--footer a:focus {
	color: var(--rms-foot-fg-strong);
}

.rms-chrome__foot-head {
	margin: 0 0 12px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--rms-foot-fg-strong);
}

.rms-chrome__foot-list {
	display: grid;
	gap: 9px;
	font-size: 13.5px;
}

.rms-chrome__foot-more {
	font-weight: 700;
	color: var(--rms-foot-fg-strong);
	box-shadow: inset 0 -1px 0 0 var(--rms-primary, #0098db);
}

@media (min-width: 600px) {
	.rms-chrome__foot-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.rms-chrome__foot-grid {
		grid-template-columns: 1.6fr 1fr 1fr 1fr;
		gap: 40px;
	}
}

/* ---- network strip ---- */

.rms-chrome__network {
	border-top: 1px solid var(--rms-foot-rule);
}

.rms-chrome__network-row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px 24px;
	padding-block: 18px;
}

.rms-chrome__network-head {
	flex: 0 0 auto;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.45);
}

.rms-chrome__network-list {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 24px;
	font-size: 13.5px;
}

.rms-chrome__network-name {
	font-weight: 700;
	color: var(--rms-foot-fg-strong);
}

.rms-chrome__network-note::before {
	content: ' — ';
}

.rms-chrome__network-note {
	color: rgba(255, 255, 255, 0.5);
}

/* ---- legal bar ---- */

.rms-chrome__legal {
	border-top: 1px solid var(--rms-foot-rule);
}

.rms-chrome__legal-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px 24px;
	padding-block: 16px 20px;
	font-size: 12px;
	color: rgba(255, 255, 255, 0.5);
}

.rms-chrome__copy {
	margin: 0;
}

.rms-chrome__tm {
	display: block;
}

.rms-chrome__legal-links {
	display: flex;
	gap: 18px;
}

/* ---------------------------------------------------------------------------
 * FOCUS
 *
 * A keyboard user has to be able to see where they are in a sticky header
 * that overlaps the page beneath it.
 * ------------------------------------------------------------------------- */

.rms-chrome a:focus-visible,
.rms-chrome button:focus-visible,
.rms-chrome summary:focus-visible {
	outline: 2px solid var(--rms-primary, #0098db);
	outline-offset: 2px;
	border-radius: var(--rms-radius-sm, 6px);
}

@media (prefers-reduced-motion: reduce) {
	.rms-chrome * {
		transition: none !important;
	}
}

/* ---------------------------------------------------------------------------
 * v1.4 — MINI DROPDOWNS (Tools, RMS Group)
 * A narrow list panel under a nav link that itself still navigates. Opens on
 * the same hover/focus-within rules as the big panels.
 * ------------------------------------------------------------------------- */

.rms-chrome__navlink--has .rms-chrome__icon {
	width: 14px;
	height: 14px;
	transition: transform 0.15s ease;
}

.rms-chrome__nav-item:hover > .rms-chrome__navlink--has .rms-chrome__icon,
.rms-chrome__nav-item:focus-within > .rms-chrome__navlink--has .rms-chrome__icon {
	transform: rotate(180deg);
}

.rms-chrome__panel--mini {
	width: 260px;
	padding: 8px;
}

.rms-chrome__minilist {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.rms-chrome__minilink {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 9px 12px;
	border-radius: var(--rms-radius-sm, 6px);
	font-size: 13.5px;
	font-weight: 600;
	color: var(--rms-text, #12181d);
}

.rms-chrome__minilink:hover,
.rms-chrome__minilink:focus {
	background: var(--rms-muted, #f6f8fa);
	color: var(--rms-primary-d, #0078ad);
}

.rms-chrome__minilink.is-current {
	color: var(--rms-text-mut, #5b6b78);
	cursor: default;
}

.rms-chrome__minihere {
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--rms-primary-d, #0078ad);
}

.rms-chrome__miniext {
	font-size: 12px;
	color: var(--rms-text-mut, #5b6b78);
}