// Default mixins and settings -----------------

// ---------------------------------------------
// Inject ooxml theme parameters 


// Override theme settings (see ../template/settings.scss)

html {
    font-size: 2.25vmin;
}

$backgroundColor: $background1;

$mainColor: $text1;
$headingColor: $text2;

$mainFontSize: inherit;
$mainFont: $regularFont, "Monserrat", "Lato", Helvetica, sans-serif;
$headingFont: $headerFont, "Overpass", "Lato", inherit;
$headingTextShadow: none;
$headingLetterSpacing: normal;
$headingTextTransform: none;
$headingFontWeight: 600;
$linkColor: $hyperlink;
$linkColorHover: lighten( $linkColor, 15% );
$selectionBackgroundColor: lighten( $linkColor, 25% );

$heading1Size: 2.5em;
$heading2Size: 1.6em;
$heading3Size: 1.3em;
$heading4Size: 1.0em;

section.has-light-background {
	&, h1, h2, h3, h4, h5, h6 {
		color: #222;
	}
}

// Theme template ------------------------------
@import "reveal-theme";
// ---------------------------------------------

$viewport-tiny: "max-width: 568px";
$viewport-small: "max-width: 768px";
$viewport-wide: "min-width: 1280px";

$slidePadding: 10vmin;

html {
	font-size: 2.25vmin;
}
@media (#{$viewport-small}) {
	html {
		font-size: 16px;
	}
}
@media (#{$viewport-tiny}) {
	html {
		font-size: 14px;
	}
}

.visually-hidden {
	position: absolute !important;
	clip: rect(1px, 1px, 1px, 1px);
	overflow: hidden;
	height: 1px;
	width: 1px;
	word-wrap: normal;
}

.reveal[class*="pattern--"] {
	background-position: center center;
	background-size: 133vmax auto;
}


.grid-wrapper {
	display: grid;
}

.reveal .slides {
	text-align: left;
}
.reveal .slides > section,
.reveal .slides > section > section {
	padding: 0;
}
.reveal .slides > section.past,
.reveal .slides > section.future,
.reveal .slides > section > section.past,
.reveal .slides > section > section.future {
	opacity: 1;
}
.reveal .controls {
	right: 4vmin;
	bottom: 4vmin;

	@media (#{$viewport-small}) {
		right: 2vmin;
		bottom: 2vmin;
	}
}

.reveal h1,
.reveal h2,
.reveal h3,
.reveal h4,
.reveal h5,
.reveal h6 {
	margin-bottom: 2.5vmin;
	color: inherit;
}

.reveal .slides section {
	box-sizing: border-box;
	padding: 0;
}

.reveal blockquote p:first-child,
.reveal blockquote p:last-child {
	display: block;
}

.reveal section img {
	background: none;
	border: none;
	box-shadow: none;
	margin: 0;
}

@mixin section ($margin: 0) {
	@if ($margin == 0) {
		height: 100vh;
		margin: 0;
		width: 100vw;
	}
	@else {
		height: calc(100vh - #{2 * $margin});
		margin: $margin;
		width: calc(100vw - #{2* $margin});
	}
}

.reveal .slides section {
	@include section();

	&:not([class*='color--']) {
		background-color: $light1;
	}
	&.stack {
		background-color: transparent;
	}

	.grid-wrapper {
		box-sizing: border-box;
		grid-column-gap: $slidePadding;
		grid-row-gap: $slidePadding/2;
		grid-template-areas: "header" "content";
		grid-template-rows: 1fr;
		height: 100%;
		padding: $slidePadding;
	}

	.header {
		align-items: center;
		display: flex;
		grid-area: header;
	}

	.section {
		text-transform: uppercase;
		font-size: 0.6em;
		font-weight: bold;
	}
	&:not([class*="color--"]) .section {
		color: $accent2;
	}

	.content {
		align-self: center;
		grid-area: content;
	}

	&.color--dark {
		.section {
			color: $accent3;
		}
	}
}

.reveal .slides section.intro {
	@include section(4vmin);

	@media (#{$viewport-small}) {
		@include section(2vmin);
	}

	.logo-wrapper {
		display: flex;
		height: 100%;
	}

	.logo {
		background-position: center;
		background-size: contain;
		height: auto;
		margin: auto;
		min-height: 200px;
		min-width: 200px;
		width: 33%;
	}
}

.reveal .slides section.title {
	@include section(4vmin);

	color: $light1;
	margin-left: 22vw;
	width: calc(100vw - 4vmin - 22vw);

	@media (#{$viewport-small}) {
		@include section(2vmin);
	}

	.grid-wrapper {
		grid-template-areas:
			"header header"
			"content content"
			". credit";
		grid-template-columns: auto 40%;
		grid-template-rows: 6vmin 1fr auto;
		grid-column-gap: $slidePadding;
	}

	.content {
		align-self: center;
		grid-area: content;
	}

	h1 {
		color: $light1;
	}

	@media (#{$viewport-tiny}) {
		.grid-wrapper {
			grid-template-areas: "header" "content" "credit";
			grid-template-columns: auto;
		}
		.credit {
			justify-self: end;
		}
	}

	@media (#{$viewport-wide}) {
		.content {
			display: grid;
			grid-template-areas: "title description";
			grid-template-columns: auto 40%;
			grid-column-gap: $slidePadding;
		}
		h1 {
			grid-area: title;
		}
		.description {
			grid-area: description;
			margin-top: 0.5em;
		}
	}
}

.reveal .slides section.subsection {

	.grid-wrapper {
		grid-template-areas: "header" "title" "description";
		grid-template-rows: 3fr 3fr 1fr;
	}

	h1 {
		align-self: center;
		grid-area: title;
		margin: 0;
	}

	.description {
		color: $accent3;
		grid-area: description;
		min-height: 4em;
	}

	&:not([class*='color--']),
	&.color--light {
		.logo {
			background-image: url("../../lib/myplanet/logo/black/mark-outline.svg");
		}
	}
	&.color--midnight,
	&.color--ice,
	&.color--radiant {
		.description {
			color: $light2;
		}
	}
}

.reveal .slides section.quote {

	blockquote {
		align-self: center;
		background: none;
		color: $light2;
		border: none;
		box-shadow: none;
		font-size: 2em;
		font-style: normal;
		margin: 0;
		max-width: 42ex;
		padding: 0;
		width: 100%;
	}
	hr {
		border: solid $accent3;
		border-width: 1px 0 0 0;
		margin: .8em 0;
		width: 10%;
	}
	cite {
		color: $accent3;
		display: block;
		font-size: 1rem;
	}

	&.color--midnight,
	&.color--ice,
	&.color--radiant {
		blockquote {
			color: $light1;
		}
		hr {
			border-color: $light2;
		}
		cite {
			color: $light2;
		}
	}
}

.reveal .slides section.team {

	.content {
		display: grid;
		grid-auto-columns: 1fr;
		grid-auto-rows: 1fr;
		grid-auto-flow: column;
		grid-column-gap: $slidePadding;
		grid-row-gap: $slidePadding/2;
	}

	.profile {
		display: grid;
		grid-column-gap: $slidePadding/2;
		grid-template-rows: 15vmin 1fr;
	}

	h2 {
		color: $accent1;
		font-size: inherit;
		margin-bottom: 0.5em;
	}
	p:first-of-type {
		margin-top: 0;
	}
	p:last-of-type {
		margin-bottom: 0;
	};

	img {
		display: block;
		float: left;
		height: auto;
		margin-right: $slidePadding/2;
		width: auto;
	}
	.name {
		margin: 0.6em 0;
	}

	.role {
		color: $accent1;
		font-size: 0.8em;
		margin: 0.6em 0;
	}

	.supplement {
		font-size: .8em;
		color: $accent1;
	}

	// When only one profile.
	@media not all and ($viewport-small) {
		.profile:first-child:nth-last-child(1) {
			grid-template-rows: auto;
			grid-template-columns: 1fr 4fr;

			img {
				float: none;
				max-width: none;
				max-height: none;
				width: 100%;
			}
		}
	}

	@media ($viewport-wide) {
		img {
			float: none;
			max-width: none;
			max-height: 100%;
			width: 100%;
		}
		.profile {
			grid-template-rows: auto;
			grid-template-columns: 1fr 3fr;
		}
		// When only one profile.
		.profile:first-child:nth-last-child(1) {
			justify-self: center;
			padding: 0 10vmin; // Same value as slide padding.
		}
	}

	@media ($viewport-small) {
		.content {
			grid-auto-flow: row;
		}
	}

	@media ($viewport-small) and (orientation: landscape) {
		.content {
			grid-auto-flow: column;
		}

		.profile {
			grid-template-rows: auto;
			align-items: center;
			display: grid;
			grid-template-columns: 1fr;
			grid-column-gap: $slidePadding/2;
		}

		.details {
			display: none;
		}

		img {
			float: left;
			height: auto;
			margin-right: $slidePadding/2;
			max-height: 50%;
			max-width: 40%;
			width: auto;
		}
	}

	@media ($viewport-tiny) {
		.content {
			grid-auto-flow: row;
		}
		.profile {
			grid-template-rows: auto;
			align-items: center;
			display: grid;
			grid-template-columns: 1fr;
			grid-column-gap: $slidePadding/2;
		}

		.details {
			display: none;
		}

		img {
			float: left;
			height: auto;
			margin-right: $slidePadding/2;
			max-height: 50%;
			max-width: 40%;
			width: auto;
		}
	}
}

.reveal .slides section.end {
	@include section();

	.logo-wrapper {
		display: flex;
		height: 100%;
	}

	.logo {
		background-image: url("../../lib/myplanet/logo/radiant-orange/logo-outline.svg");
		background-position: center;
		background-size: contain;
		height: auto;
		margin: auto;
		min-height: 200px;
		min-width: 200px;
		width: 33%;
	}

	&.color--radiant {
		.logo {
			background-image: url("../../lib/myplanet/logo/white/logo-outline.svg");
		}
	}
}


/*******************************************************************************
 * Code Segments
 ******************************************************************************/
figure.code {
	display: flex;
	flex-direction: column;
	overflow: hidden;
}
figure.code pre {
	box-shadow: none;
	font-size: 1rem;
	height: 100%;
	line-height: 1.1rem;
	margin: 0;
	width: 100%;
	overflow: hidden;
}
.reveal pre code {
	background-color: #3f3f3f;
	border: 1ex solid #3f3f3f;
	border-width: 1ex 2ex;
	box-sizing: border-box;
	height: 100%;
	max-height: none;
	-moz-tab-size: 2;
	tab-size: 2;
}
figure.code figcaption {
	box-sizing: border-box;
	padding: 1ex 2ex;
	width: 100%;
	font-size: 0.875em;
	border: 1px solid #3f3f3f;
	border-bottom-width: 0;
	background-color: #333;
	text-align: left;
}
figure.code pre + figcaption {
	border-top-width: 0;
	border-bottom-width: 1px;
	color: $light2;
}
figure.code figcaption.path {
	font-family: monospace;
}

.svg-container {
	margin: 0 auto;
	position: absolute;
}