/*
	Chaos Engine dark theme
	Layered after main.css (same technique the Fractal template already
	uses for ie8.css/ie9.css) so main.css stays untouched and diffable.
*/

:root {
	--ce-bg: #0b0b0d;
	--ce-panel: #141416;
	--ce-panel-alt: #19191c;
	--ce-text: #e8e8ea;
	--ce-text-dim: #a3a3a8;
	--ce-accent: #ff4e33;
	--ce-accent-dark: #c93a24;
	--ce-border: #2a2a2e;
}

html, body {
	background-color: var(--ce-bg) !important;
	color: var(--ce-text) !important;
}

body, p, li, .content {
	color: var(--ce-text) !important;
}

h1, h2, h3, h4, h5, h6 {
	color: #ffffff !important;
}

a {
	color: var(--ce-accent) !important;
}

hr {
	border-bottom-color: var(--ce-border) !important;
}

/* Header / hero */
#header {
	background-color: var(--ce-bg) !important;
	background-image: radial-gradient(ellipse at 50% -10%, rgba(255, 78, 51, 0.18), rgba(11, 11, 13, 0) 60%) !important;
	color: var(--ce-text) !important;
	border-bottom: 1px solid var(--ce-border);
}

	#header h1, #header h1 a {
		color: #ffffff !important;
	}

	#header p {
		color: var(--ce-text-dim) !important;
	}

	#header a {
		color: var(--ce-accent) !important;
	}

	#header .button {
		box-shadow: inset 0 0 0 2px var(--ce-accent) !important;
		color: var(--ce-accent) !important;
	}

		#header .button:hover {
			background-color: rgba(255, 78, 51, 0.1) !important;
		}

	#header .icon:before {
		color: var(--ce-accent) !important;
	}

	/* No hero photo/mockup for this product — center the single content
	   column instead of the template's default two-column offset. */
	#header .content {
		text-align: center !important;
		margin: 0 !important;
		max-width: 40em;
	}

/* Section wrappers */
#one.wrapper {
	background-color: var(--ce-bg) !important;
}

#two.wrapper .inner.alt {
	background-color: var(--ce-panel) !important;
}

#three.wrapper {
	background-color: var(--ce-panel-alt) !important;
	border-top: 1px solid var(--ce-border);
}

/* Icon strips */
ul.icons.major > li > .icon,
ul.icons.labeled > li > .icon {
	color: var(--ce-accent) !important;
}

	ul.icons.major > li > .icon:before,
	ul.icons.labeled > li > .icon:before {
		color: var(--ce-accent) !important;
	}

	ul.icons.major > li > .icon .label,
	ul.icons.labeled > li > .icon .label {
		color: var(--ce-text) !important;
	}

/* Spotlight feature panels */
.spotlight {
	background-color: var(--ce-panel) !important;
}

	.spotlight .content {
		color: var(--ce-text) !important;
	}

	.spotlight .content h3 {
		color: #ffffff !important;
	}

	.spotlight .image {
		background-color: var(--ce-panel-alt) !important;
	}

		.spotlight .image .feature-icon {
			color: var(--ce-accent);
		}

/* Buttons */
.button {
	background-color: var(--ce-accent) !important;
	color: #0b0b0d !important;
	box-shadow: none !important;
}

	.button:hover {
		background-color: var(--ce-accent-dark) !important;
	}

	.button.icon:before {
		color: inherit !important;
	}

/* Footer */
#footer {
	background-color: var(--ce-bg) !important;
	color: var(--ce-text-dim) !important;
	border-top: 1px solid var(--ce-border);
}

	#footer .icons a {
		color: var(--ce-text-dim) !important;
	}

		#footer .icons a:hover {
			color: var(--ce-accent) !important;
		}

	#footer .copyright, #footer .copyright a {
		color: var(--ce-text-dim) !important;
	}

/* Logo — source asset is black-on-transparent; invert for a dark background */
.logo-invert {
	filter: invert(1) brightness(1.1);
}

/* Feature icon panels standing in for the template's photo spotlights.
   .spotlight .image clips its child to a circle via border-radius: 100%,
   sized from an img's intrinsic square aspect ratio in the stock template;
   since we have no photo, force the same square aspect ratio here. */
.feature-icon-panel {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	aspect-ratio: 1 / 1;
	border-radius: 100%;
	overflow: hidden;
	background-color: var(--ce-panel-alt);
	box-shadow: inset 0 0 0 1px var(--ce-border);
}

	.feature-icon-panel .icon:before {
		font-size: 4.5em;
		color: var(--ce-accent);
	}