/* variables */

$section-separator: 1px solid rgba(255, 255, 255, 0.2);
$text-separator: 1px solid rgba(255, 255, 255, 0.5);
$brand-primary-color: rgba(1, 22, 39, 1);
$brand-secondary-color: rgba(46, 196, 182, 1);

/* imports */
@import '../../node_modules/@glidejs/glide/dist/css/glide.core.min.css';
@import './components/article-detail.css';
@import './components/top-bar.css';
@import './components/hero-banner.css';
@import './components/blog-entries.css';
@import './components/footer.css';
@import './components/button.css';

/* global */

* {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

body.home {
	background-color: $brand-primary-color;
	color: white;
}

.container {
	max-width: 1260px;
	margin: 0 auto;
	padding-left: 20px;
	padding-right: 20px;

	@media screen and (min-width: 1300px) {
		padding-left: 0;
		padding-right: 0;
	}
}

.brand-section {
	background-color: $brand-primary-color;
	color: white;
}

.brand-section.inverse {
	background-color: #fff;
	color: #011627;
}

/* typography */

:root {
	box-sizing: border-box;
	font-family: "Roboto", "Helvetica", "Arial", sans-serif;
	line-height: 1.5;
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
	font-weight: 100;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

::selection {
    background-color: #ebe1d3;
    text-shadow: none;
}

h1 {
	font-family: "Merriweather";
}

section {
	h2, h3, h4 {
		line-height: 1.2em;
	}
}

a {
	color: #fff;
	text-decoration: none;
	transition: color 0.3s ease-in-out, opacity 0.3s ease-in-out;

	&:hover {
		color: $brand-secondary-color;
	}
}

p, li, time {
	-webkit-text-stroke: 0.45px;
}

ul.inline-list {
	list-style: none;
	margin: 0;
	padding: 0;

	li {
		display: inline;
	}
}

blockquote {
	position: relative;
	margin: 0;
	font-size: 1.3em;

	@media screen and (min-width: 600px) {
    	margin: 1em auto;
    	max-width: 60%;
	}

	&:before {
		font-weight: 400;
	    font-size: 3em;
	    color: #FF4539;
	    font-family: "Montserrat";
	    position: absolute;
	    content: '\201C';
	    height: 0;
	    top: -0.5rem;
	    left: -0.5rem;

	    @media screen and (min-width: 600px) {
	    	font-size: 2em;
	    	font-weight: 800;
	    	top: -1.5rem;
    		left: -1.9rem;
	    }
	}
}

.inverse {
	p {
		font-weight: 300;
	}

	a {
		color: #011627;

		&:hover {
			color: $brand-secondary-color;
		}
	}
}

/* header */



/* primary nav */
.primary-nav {
	flex: 1;
	flex-basis: calc(100% - 108px);
	display: flex;
	justify-content: flex-end;

	ul {
		margin: 0;
		padding:  0;
		display: flex;
	}

	li {
		margin-left: 1em;
		font-weight: 600;
	}

	a {
		opacity: 0.5;

		&:hover, &:active {
			opacity: 1;
		}
	}
}



/* ethos */

.ethos {
	padding-top: 2.5em;
	padding-bottom: 2.5em;

	@media screen and (min-width: 600px) {
		padding-top: 5em;
		padding-bottom: 5em;
	}

	ul {
		display: flex;
		flex-wrap: wrap;
		list-style: none;
		margin: 0;
		padding: 0;
	}

	li {
		flex: 1 1 100%;
		margin-bottom: 2em;

		&:nth-of-type(4n) {
			margin-bottom: 0;
		}

		@media screen and (min-width: 600px) {
			flex: 1 1 40%;
			margin-right: 10%;
		}
	}

	h2 {
		font-family: "Montserrat";
		font-size: 1.5em;
		font-weight: 600;
		margin: 0;

		& + p {
			margin-top: 0.5em;
		}

		@media screen and (min-width: 600px) {
			font-size: 2.25em;
		}
	}
}

/* trusted-by */

.trusted-by {
	padding-top: 2.5em;
	padding-bottom: 2.5em;

	@media screen and (min-width: 600px) {
		padding-top: 5em;
		padding-bottom: 5em;
	}

	h2 {
		font-family: "Montserrat";
		font-size: 2em;

		@media screen and (min-width: 600px) {
			font-size: 2.5em;
		}
	}

	.glide {
		position: relative;
		margin-bottom: 4em;
	}

	.glide--swipeable {
		position: relative;
	}

	.glide__slides {
		text-align: center;
	}

	.glide:hover {
		#slider-controls {
			opacity: 1;
			display: block;
		}
	}

	#slider-controls {
		display: none;
		opacity: 0;
		transition: opacity 0.3s ease-in-out;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		margin: 0;
		padding: 0;

		& button {
			position: absolute;
			-webkit-appearance: none;
			border: 0;
			padding: 0;
			font-size: 2em;
			height: 100%;
			width: 1.5em;

			&:focus {
				outline: none;
			}

			svg path {
				fill: white;
			}
		}

		@media screen and (min-width: 800px) {
			display: none;
		}
	}

	#slider-prev {
		background: linear-gradient(to right, rgba(1,22,39,1) 0%,rgba(255,255,255,0) 100%);
		left: 0;

		svg {
			transform: rotate(180deg);
		} 
	}

	#slider-next {
		background: linear-gradient(to left, rgba(1,22,39,1) 0%,rgba(255,255,255,0) 100%);
		right: 0;
	}


		/* non slider icons */

	ul.client-grid.glide__slides {
		margin: 0;
		padding: 0;
		display: flex;
		align-items: center;

		@media screen and (min-width: 800px) {
			flex-wrap: wrap;
			list-style: none;
			margin-bottom: 2em;
			padding: 0 auto;
			justify-content: center;
		}

		li.glide__slide {
			width: initial;
			flex: 0 0 auto;

			@media screen and (min-width: 800px) {
				margin-bottom: 20px;
				padding: 20px;
			}
		}
	}
}

/* client-quotes */

.client-quotes {
	blockquote {
		color: #FF4539;
		font-size: 1.3em;
	    font-weight: 300;
	    line-height: 1.27em;

	    @media screen and (min-width: 600px) {
	    	padding-left: calc((1/6) * 100);
			padding-right: calc((1/6) * 100);
	    }

	    @media screen and (min-width: 800px) {
	    	font-size: 1.8em;
	    }
	}
}