/* Shared company header — the top tier of navigation, on every page of every
 * product.
 *
 * DUPLICATED at src/static/scramfs/assets/chrome.css. The two must stay
 * byte-identical; build_site.py asserts it. They exist twice because a
 * <link href="/assets/..."> on a ScramFS page is a root-relative URL and would
 * fail the /scramfs/ prefix assertion. Stage 4 merges both into the single
 * site stylesheet and this duplication goes away.
 *
 * Every class here is prefixed `primary-nav-` on purpose. Neither theme stylesheet
 * mentions that string, and neither script.js does either, so nothing in the
 * two ~110 KB sheets can reach this markup and there is no specificity to
 * fight. Do not rename these to #header / #secondary-nav / .secondary-nav-menu: those are
 * exactly the names both themes and both scripts already own.
 *
 * The values below are measured from the company theme's own header so that
 * company pages render unchanged. Keep them in step if the theme moves.
 */

/* Chrome heights. Every offset below is derived from these two, so the bar and
 * the space reserved for it cannot drift apart -- which is exactly what went
 * wrong when they were written out as separate numbers. --secondary-nav-h is the
 * ScramFS theme's own header, measured, not set by us. */
:root {
	--primary-nav-h: 94px;
	--secondary-nav-h: 60px;
}

@media screen and (max-width: 1024px) {
	:root {
		--primary-nav-h: 124px;
	}
}

/* A namespace keeps class and id rules out, but not *element* rules: the
 * ScramFS theme sets `li { font-size: 16px; margin-bottom: 10px }` sitewide and
 * it lands straight on this bar's own sub-menu, spacing the items apart. Reset the few
 * properties this chrome relies on, then declare them below. Everything after
 * this block is at least as specific and comes later, so it wins. */
.primary-nav,
.primary-nav * {
	margin: 0;
	padding: 0;
	border: 0;
	float: none;
	font-size: inherit;
	line-height: normal;
	list-style: none;
	text-align: left;
	text-transform: none;
	box-sizing: border-box;
}

.primary-nav {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 9999;
	background: #fff;
	border-bottom: 1px solid #ccc;
	padding: 18px 0 0;
	box-sizing: border-box;
}

.primary-nav-inner {
	width: 970px;
	margin: 0 auto;
}

.primary-nav-inner::after {
	content: "";
	display: table;
	clear: both;
}

.primary-nav-logo {
	float: left;
	width: 243px;
	height: 54px;
	background: url("/assets/theme/images/scramsoft - logo.svg") center center / 100% no-repeat;
}

/* The wordmark is in the image; the text is for screen readers and for when
 * the SVG fails to load. */
.primary-nav-logo span {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.primary-nav-nav {
	float: right;
	margin-right: 11px;
}

.primary-nav-menu,
.primary-nav-sub {
	list-style: none;
	margin: 0;
	padding: 0;
}

.primary-nav-menu > li {
	float: left;
	position: relative;
}

.primary-nav-menu a {
	display: block;
	font-family: Roboto, sans-serif;
	font-weight: 500;
	font-size: 17px;
	color: #000;
	text-decoration: none;
	padding: 26px 17px 29px;
}

.primary-nav-menu > li > a {
	text-transform: uppercase;
}

.primary-nav-menu > li:last-child > a {
	padding: 26px 0 23px 18px;
}

.primary-nav-menu > li > a:hover,
.primary-nav-menu > li > a:focus {
	color: #144372;
	text-decoration: underline;
}

/* Sub-menus open on hover and on keyboard focus. The theme's own menu is
 * hover-only, which means it cannot be reached from the keyboard at all;
 * :focus-within costs nothing and fixes that.
 *
 * top: 100% (not a pixel value) so this stays flush against the bottom of
 * the li whatever the anchor's own height is -- a hardcoded top: 71px here
 * once left a gap under the bar when --primary-nav-h shrank without this
 * value moving with it. No padding-top: this box has no background of its
 * own (only its li children do), so padding here is a transparent strip
 * that shows whatever sits behind it -- on ScramFS pages, the secondary
 * bar -- rather than a real gap. top: 100% already sits flush, so there is
 * no hover-bridge gap left to pad over. */
.primary-nav-sub {
	display: none;
	position: absolute;
	top: 100%;
	left: 17px;
	z-index: 99;
}

.primary-nav-menu > li:hover > .primary-nav-sub,
.primary-nav-menu > li:focus-within > .primary-nav-sub {
	display: block;
}

.primary-nav-sub li {
	background: #11395d;
	min-width: 164px;
	border-top: 1px solid #214b71;
}

.primary-nav-sub li:first-child {
	border-top: none;
}

.primary-nav-sub a {
	color: #fff;
	font-size: 14px;
	padding: 11px 17px;
	white-space: nowrap;
}

.primary-nav-sub a:hover,
.primary-nav-sub a:focus {
	color: #34d1f4;
}

/* ------------------------------------------------------------------ */
/* Narrow screens.
 *
 * No hamburger and no JavaScript: the four top-level links become a single
 * centred row, and the .primary-nav-sub lists are dropped rather than nested
 * behind a toggle. Every item in them is reachable from its section index page, so
 * nothing becomes unreachable. This is deliberately not the theme's mobile
 * menu, which is driven by .secondary-nav-toggle in each theme's own script.js —
 * borrowing that would put this markup back inside the selectors the
 * namespace exists to avoid.
 */
@media screen and (max-width: 1024px) {
	.primary-nav {
		height: var(--primary-nav-h);
		padding: 12px 0;
	}

	.primary-nav-inner {
		width: auto;
		padding: 0 15px;
	}

	.primary-nav-logo {
		float: none;
		display: block;
		width: 200px;
		height: 44px;
		margin: 0 auto 6px;
	}

	.primary-nav-nav {
		float: none;
		margin: 0;
	}

	.primary-nav-menu {
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
	}

	.primary-nav-menu > li {
		float: none;
	}

	.primary-nav-menu a {
		font-size: 14px;
		padding: 4px 10px;
	}

	.primary-nav-menu > li:last-child > a {
		padding: 4px 10px;
	}

	.primary-nav-sub {
		display: none !important;
	}
}

/* ------------------------------------------------------------------ */
/* Making room for a fixed bar.
 *
 * The bar is position: fixed, so every product has to reserve its height.
 * Each theme already does this for its own header and the two do it in
 * different places — the company theme pads #wrap_page_without_footer, the
 * ScramFS theme pads <body> — so the offsets are set per tier here rather
 * than in one rule.
 */
.tier-company #wrap_page_without_footer {
	padding-top: var(--primary-nav-h);
}

/* ScramFS keeps its own header as the second tier: it stays fixed, but below
 * the company bar rather than at the top of the viewport. Its .secondary-nav-toggle is
 * separately fixed at top: 22px by its own theme, so it needs moving too or it
 * floats over the company bar on narrow screens. */
.product-scramfs {
	padding-top: calc(var(--primary-nav-h) + var(--secondary-nav-h));
}

.product-scramfs #header {
	top: var(--primary-nav-h);
}

/* ScramFS's script.js moves #secondary-nav to be the first child of <body> below
 * 900px and its own CSS pins it to the top of the viewport. Push it below both
 * bars so the opened menu does not cover the company navigation. */
@media screen and (max-width: 1024px) {
	.product-scramfs #secondary-nav {
		top: calc(var(--primary-nav-h) + var(--secondary-nav-h));
	}
}

/* ==================================================================== */
/* Shared site footer — one definition, every page of every product.
 *
 * Namespaced `sitefooter-` for the same reason as the header above: neither
 * theme's stylesheet nor either script.js mentions that string, so the two
 * ~110 KB sheets cannot reach this markup. The old per-theme footers used
 * #footer_bg, .right_part_footer, .float-left and .social_button, which both
 * themes style differently — reusing any of those names would have put this
 * markup straight back into the collision.
 *
 * Colour is #11395e. It was in the company stylesheet all along, commented
 * out and overridden by #144372 on the next line.
 */
.sitefooter,
.sitefooter * {
	margin: 0;
	padding: 0;
	border: 0;
	float: none;
	font-size: inherit;
	line-height: normal;
	list-style: none;
	box-sizing: border-box;
}

.sitefooter {
	background: #11395e;
	font-family: Roboto, sans-serif;
}

.sitefooter-inner {
	width: 970px;
	min-height: 75px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}

.sitefooter-logo {
	flex: none;
	width: 202px;
	height: 46px;
	background: url("/assets/theme/images/scram_logo_footer.svg") 0 0 / 100% no-repeat;
}

.sitefooter-right {
	display: flex;
	align-items: center;
	gap: 6px;
}

.sitefooter-copyright {
	font-size: 12px;
	font-weight: 300;
	color: #fff;
	margin-right: 8px;
	white-space: nowrap;
}

.sitefooter-sitemap {
	flex: none;
	font-size: 12px;
	font-weight: 300;
	color: #fff;
	background: #ff8400;
	border-radius: 4px;
	padding: 8px 13px;
	text-decoration: none;
	white-space: nowrap;
}

/* White glyphs, taken from the ScramFS set. The company sprite only ever had
 * Facebook and Twitter, so there was no LinkedIn to match its style. */
.sitefooter-social {
	flex: none;
	width: 31px;
	height: 31px;
	background-repeat: no-repeat;
	background-position: center;
	/* Constrain the height, not the width: these three glyphs have very
	 * different aspect ratios (facebook 19x42, linkedin 44x44, twitter 48x39),
	 * so sizing by width made the "f" nearly twice as tall as the others and
	 * clipped it against the 31px box. */
	background-size: auto 17px;
}

.sitefooter-facebook { background-image: url("/assets/theme/images/social/facebook.png"); }
.sitefooter-linkedin { background-image: url("/assets/theme/images/social/linkedin.png"); }
.sitefooter-twitter  { background-image: url("/assets/theme/images/social/twitter.png"); }

.sitefooter-sitemap:hover,
.sitefooter-social:hover {
	opacity: 0.85;
}

/* Screen-reader text for the icon and logo links. */
.sitefooter-logo span,
.sitefooter-social span {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

@media screen and (max-width: 1024px) {
	.sitefooter-inner {
		width: auto;
		padding: 16px 15px;
		flex-direction: column;
		justify-content: center;
		text-align: center;
	}

	.sitefooter-right {
		flex-wrap: wrap;
		justify-content: center;
	}

	.sitefooter-copyright {
		white-space: normal;
		margin-right: 0;
		width: 100%;
		text-align: center;
		margin-bottom: 10px;
	}
}

/* Breadcrumbs — the trail, now on both tiers.
 *
 * The company theme has always shipped a `.breadcrumbs` block on every page;
 * the ScramFS pages had none until Stage 6 gave them one. Rather than write
 * the appearance twice, it moves here, beside the other chrome that is one
 * definition for the whole site. This sheet loads after both themes, so these
 * rules win over the company theme's own blue band without needing !important.
 *
 * `.breadcrumbs` is not in the `primary-nav-`/`sitefooter-` namespace because
 * it is not new markup: 123 company pages already carry that class, and
 * renaming them all would be a far larger diff than the styling is worth.
 * That means the company theme *can* reach this markup, which is why every
 * property it sets is restated here rather than inherited.
 *
 * The inner <ul> keeps the theme's own `wrapper` class for centring: both
 * themes define `.wrapper` as a 970px centred column, so it is one of the few
 * collisions between them that is a genuine agreement.
 */
/* No padding-left. The company theme sets 15px, but only inside a narrow-screen
 * media query — and the trail is hidden below 900px, so that padding never
 * applied. Setting it here unconditionally shifted the centred trail 7px right
 * on all 123 company pages, which a measurement against the previous build
 * caught and the eye would not have. */
.breadcrumbs {
	background: #fff;
	border-bottom: 1px solid #e6e6e6;
	margin-bottom: 0;
}

.breadcrumbs ul {
	list-style: none;
	margin: 0 auto;
	padding: 0;
}

.breadcrumbs li {
	float: left;
	padding: 0 3px 0 0;
	line-height: 34px;
	margin-bottom: 0;
	background: none;
}

.breadcrumbs li:first-child {
	padding: 0 6px 0 0;
}

.breadcrumbs a {
	color: #666;
	font-size: 12px;
	text-decoration: none;
	border-bottom: none;
}

.breadcrumbs a:hover {
	color: #135793;
}

/* The company theme hides the trail below 900px and always has; matching that
 * on the product tier keeps one behaviour rather than two. */
@media screen and (max-width: 900px) {
	.breadcrumbs {
		display: none;
	}
}