/* Overrides applied only to the static export of scramfs.com. */

/* The theme sets dark body text but never a page background, so it relied on the
 * browser default being white. A browser in dark mode renders the page dark and
 * the text becomes unreadable. Pin the light scheme the design assumes. */
:root {
	color-scheme: light;
}

html,
body {
	background: #fff;
}

/* Post bodies came from the editor without width constraints; keep embedded
 * media inside the column on narrow viewports. */
.single-content img,
.page_content img,
.post_content img {
	max-width: 100%;
	height: auto;
}

/* The contact forms have no server to post to on a static host. */
.wpcf7-form .wpcf7-submit {
	cursor: not-allowed;
}
.wpcf7-static-note {
	margin-top: 12px;
	font-size: 14px;
	color: #666;
}

/* ------------------------------------------------------------------ */
/* Second-tier product navigation.
 *
 * The inverse of the company bar above it: ScramFS Gold on white text, so the
 * two tiers read as two levels rather than as two headers stacked. #a2916e is
 * the theme's own name for that colour -- see the palette comment at the top
 * of style.css and the .gold_inset rules.
 *
 * Height is three line-heights: one line of text, with one line-height of
 * space above and below. Everything in the bar is text now, so nothing needs
 * more room than that. The bar's height lives in --secondary-nav-h (declared in
 * chrome.css) because the company bar's offsets are calculated from it --
 * change it there, not here.
 *
 * The white hairline closes the bar off. Both bars above it have one -- the
 * company nav is `1px solid #ccc` and the breadcrumbs carry their own -- but
 * this one had `border-bottom: 0`, which killed the border the theme set for
 * itself below 768px and left the bar with no edge at any width. On a page
 * whose content starts with a gold panel (the ScramFS home page, and every
 * `.gold_inset`) the two touch and read as one block of colour running into
 * the page.
 *
 * White rather than the company bar's #ccc: grey on gold is muddy, and white
 * is already the bar's own text colour, so the line reads as part of it. Where
 * the content below is white the line is invisible, which is right -- there
 * the gold edge is separation enough.
 *
 * The height above is unaffected: Bootstrap sets `box-sizing: border-box`
 * sitewide on this tier, so the border is drawn inside the 60px and nothing
 * below it moves.
 */
.product-scramfs #header {
	background: #a2916e;
	height: var(--secondary-nav-h);
	padding: 0;
	border-bottom: 1px solid #fff;
	box-shadow: none;
}

.product-scramfs #header .header_wrapper {
	height: 100%;
}

/* The product label, in place of the logo that used to sit here. */
.secondary-nav-label {
	float: left;
	padding: 20px 0;
	line-height: 20px;
	font-family: Roboto, sans-serif;
	font-size: 16px;
	color: #fff;
	text-decoration: none;
}

.secondary-nav-label:hover,
.secondary-nav-label:focus {
	color: #fff;
	text-decoration: underline;
}

.secondary-nav-label-lead {
	font-weight: 300;
}

.secondary-nav-label-name {
	font-weight: 600;
}

/* Top-level links: white on the gold, centred in the three-line-height bar. */
.product-scramfs #secondary-nav .secondary-nav-menu > li > a {
	color: #fff;
	line-height: 20px;
	padding: 20px 12px;
}

.product-scramfs #secondary-nav .secondary-nav-menu > li > a:hover,
.product-scramfs #secondary-nav .secondary-nav-menu > li.current-menu-item > a {
	color: #fff;
	border-bottom: 3px solid #fff;
	padding-bottom: 17px;
}

/* Sub-menus hang off the gold bar, so they take the darker end of the palette.
 *
 * The theme paints the background white on the <li> *and* on the <a>
 * (`#secondary-nav .secondary-nav-sub > li > a, #secondary-nav .secondary-nav-sub li`), not on the
 * <ul>. Colouring only the <ul> therefore left white items with the white text
 * set below — invisible. Both have to be cleared for the panel colour to show.
 */
.product-scramfs #secondary-nav .secondary-nav-sub {
	background: #8a7b5d;
	top: var(--secondary-nav-h);
	padding: 6px 0;
}

.product-scramfs #secondary-nav .secondary-nav-sub > li,
.product-scramfs #secondary-nav .secondary-nav-sub > li > a {
	background: transparent;
	color: #fff;
	border-bottom: 0;
}

.product-scramfs #secondary-nav .secondary-nav-sub > li > a {
	display: block;
	padding: 7px 0;
	line-height: 20px;
	white-space: nowrap;
}

.product-scramfs #secondary-nav .secondary-nav-sub > li:hover > a,
.product-scramfs #secondary-nav .secondary-nav-sub > li > a:focus {
	color: #fff;
	text-decoration: underline;
}

/* The hamburger: 42px, centred in the 60px bar, and drawn in white on the gold
 * rather than dark-on-white. The theme gives .secondary-nav-toggle a white background
 * and only turns the bars white once .open is set, which left a white block
 * punched out of the gold bar while the menu was closed. */
.product-scramfs .secondary-nav-toggle {
	top: calc(var(--primary-nav-h) + 9px);
	background: transparent;
}

.product-scramfs .secondary-nav-toggle .bit-1::before,
.product-scramfs .secondary-nav-toggle .bit-1::after,
.product-scramfs .secondary-nav-toggle .bit-2,
.product-scramfs .secondary-nav-toggle .bit-3::before,
.product-scramfs .secondary-nav-toggle .bit-3::after {
	background: #fff;
}

/* ------------------------------------------------------------------ */
/* The ScramFS logo, moved out of the bar and onto the home page hero, beside
 * the headline it belongs to.
 *
 * The selector has to name #slider. The theme carries
 * `#slider img { position: absolute; right: -140px; bottom: 2% }` to fling the
 * decorative slide artwork out to the side, and it matches *any* image inside
 * the hero -- at (1,0,1) it beat a plain class and threw this logo to the
 * bottom-right corner, on top of the gold list. Everything below is undoing
 * that rule for this one image.
 */
#slider img.scramfs-hero-logo {
	position: static;
	display: block;
	width: 220px;
	max-width: 100%;
	max-height: none;
	height: auto;
	right: auto;
	bottom: auto;
	margin: 0 0 18px;
}

/* ------------------------------------------------------------------ */
/* The two Font Awesome icons this site uses, without Font Awesome.
 *
 * 26.8 KB of CSS and ~90 KB of webfont existed for six classes on two pages:
 * /scramfs/scramfs-api/ and /scramfs/cross-platform-support/. The layout rules
 * below (.fa-ul, .fa-ul > li, .fa-li, .fa-border) are copied verbatim from
 * font-awesome.min.css so the hanging-bullet geometry is unchanged; only the
 * glyphs are drawn differently.
 *
 * The check is an SVG mask rather than a background image so that
 * `background-color: currentColor` still applies — one of these carries an
 * inline `color: #4cd95d` and would otherwise lose it. The question mark is
 * just the ASCII character, which Roboto covers.
 *
 * .fa-ul-2 in the same markup is a ScramFS theme class, not a Font Awesome
 * one, and is untouched.
 */
.fa {
	display: inline-block;
	font-size: inherit;
	text-rendering: auto;
}

.fa-ul {
	padding-left: 0;
	margin-left: 2.14285714em;
	list-style-type: none;
}

.fa-ul > li {
	position: relative;
}

.fa-li {
	position: absolute;
	left: -2.14285714em;
	width: 2.14285714em;
	top: .14285714em;
	text-align: center;
}

.fa-border {
	padding: .2em .25em .15em;
	border: solid .08em #eee;
	border-radius: .1em;
}

.fa-check-circle-o {
	width: 1em;
	height: 1em;
	vertical-align: -0.125em;
	background-color: currentColor;
	-webkit-mask: center / contain no-repeat var(--fa-glyph);
	mask: center / contain no-repeat var(--fa-glyph);
	--fa-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M7.5 12.5l3 3 6-6.5'/%3E%3C/svg%3E");
}

.fa-question::before {
	content: "?";
	font-weight: 700;
}


/* Home page: the progress bar under the long term goal.
 *
 * Pure CSS and no plugin — the width is set inline on .goal-bar-fill, so the
 * one number a human edits is next to the sentence that states it. The bar is
 * aria-hidden and the caption below carries the same figure in text, which is
 * what a screen reader gets.
 *
 * Own namespace (`goal-bar-`, hyphenated) so no theme rule reaches in: the
 * ScramFS theme's own classes are underscored.
 */
.goal-bar {
	max-width: 620px;
	margin: 26px auto 0;
}

.goal-bar-track {
	position: relative;
	height: 34px;
	border-radius: 17px;
	background: rgba(255, 255, 255, 0.55);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
	overflow: hidden;
}

.goal-bar-fill {
	position: relative;
	height: 100%;
	min-width: 46px;
	border-radius: 17px 0 0 17px;
	background: #30cef4;
	text-align: right;
}

.goal-bar-fill span,
.goal-bar-target {
	font-size: 15px;
	font-weight: 700;
	line-height: 34px;
	padding: 0 14px;
}

.goal-bar-fill span {
	color: #fff;
}

.goal-bar-target {
	position: absolute;
	top: 0;
	right: 0;
	color: rgba(0, 0, 0, 0.45);
}

.goal-bar-caption {
	margin-top: 12px;
	font-size: 90%;
}