//	 /$$$$$$                                               /$$
//	|_  $$_/                                              | $$
//	  | $$   /$$$$$$/$$$$   /$$$$$$   /$$$$$$   /$$$$$$  /$$$$$$    /$$$$$$$
//	  | $$  | $$_  $$_  $$ /$$__  $$ /$$__  $$ /$$__  $$|_  $$_/   /$$_____/
//	  | $$  | $$ \ $$ \ $$| $$  \ $$| $$  \ $$| $$  \__/  | $$    |  $$$$$$
//	  | $$  | $$ | $$ | $$| $$  | $$| $$  | $$| $$        | $$ /$$ \____  $$
//	 /$$$$$$| $$ | $$ | $$| $$$$$$$/|  $$$$$$/| $$        |  $$$$/ /$$$$$$$/
//	|______/|__/ |__/ |__/| $$____/  \______/ |__/         \___/  |_______/
//	                      | $$
//	                      | $$
//	                      |__/
@import "root";

// Import Modules
@import "modules/functions";
@import "modules/animations";
@import "modules/color";

// Import Partials
@import "partials/reset";
@import "partials/forms";
@import "partials/hamburger";
@import "partials/typography";
@import "partials/buttons";

::selection {
	background: var(--yellow);
	color: var(--black);
}

body {
	background-color: var(--global-background-color);
	color: var(--global-font-color);
	font-feature-settings: "liga" 1, "lnum" 1, "tnum" 1;
	font-variant-ligatures: common-ligatures;
	margin-top: var(--site-menu-height);

	@supports not (font-variant-ligatures: common-ligatures) {
		font-feature-settings: "liga";
	}
}

@import "sections/site-header";
@import "sections/site-footer";

.site-main {
	padding-top: 16px;

	@media only screen and (min-width: 768px) {
		padding-top: 32px;
	}
}

.page-title,
.page-content {
	margin: 0 auto;
	max-width: 768px;
	width: 90%;
}

//	                                 /$$     /$$
//	                                | $$    |__/
//	  /$$$$$$$  /$$$$$$   /$$$$$$$ /$$$$$$   /$$  /$$$$$$  /$$$$$$$
//	 /$$_____/ /$$__  $$ /$$_____/|_  $$_/  | $$ /$$__  $$| $$__  $$
//	|  $$$$$$ | $$$$$$$$| $$        | $$    | $$| $$  \ $$| $$  \ $$
//	 \____  $$| $$_____/| $$        | $$ /$$| $$| $$  | $$| $$  | $$
//	 /$$$$$$$/|  $$$$$$$|  $$$$$$$  |  $$$$/| $$|  $$$$$$/| $$  | $$
//	|_______/  \_______/ \_______/   \___/  |__/ \______/ |__/  |__/
._section {
	display: flex;
	flex-wrap: wrap;
	margin-top: 16px;

	> .title {
		@include font(cabin, bold, (26 / 16));

		letter-spacing: 3px;
		margin: 56px auto;
		text-align: center;
		text-transform: uppercase;
		width: 100%;

		@media only screen and (min-width: 1024px) {
			text-align: left;
		}

		@media only screen and (min-width: 768px) {
			@include font(cabin, bold, (36 / 16));
		}
	}
}

._hidden {
	display: none;
}

// Import Article components
@import "components/article-list";
@import "components/article-card";

//	  /$$$$$$                                          /$$                     /$$   /$$  /$$$$$$  /$$   /$$
//	 /$$__  $$                                        | $$                    | $$  | $$ /$$$_  $$| $$  | $$
//	| $$  \__/  /$$$$$$   /$$$$$$   /$$$$$$   /$$$$$$$| $$$$$$$               | $$  | $$| $$$$\ $$| $$  | $$          /$$$$$$   /$$$$$$   /$$$$$$   /$$$$$$
//	|  $$$$$$  /$$__  $$ |____  $$ /$$__  $$ /$$_____/| $$__  $$ /$$$$$$      | $$$$$$$$| $$ $$ $$| $$$$$$$$ /$$$$$$ /$$__  $$ |____  $$ /$$__  $$ /$$__  $$
//	 \____  $$| $$$$$$$$  /$$$$$$$| $$  \__/| $$      | $$  \ $$|______/      |_____  $$| $$\ $$$$|_____  $$|______/| $$  \ $$  /$$$$$$$| $$  \ $$| $$$$$$$$
//	 /$$  \ $$| $$_____/ /$$__  $$| $$      | $$      | $$  | $$                    | $$| $$ \ $$$      | $$        | $$  | $$ /$$__  $$| $$  | $$| $$_____/
//	|  $$$$$$/|  $$$$$$$|  $$$$$$$| $$      |  $$$$$$$| $$  | $$                    | $$|  $$$$$$/      | $$        | $$$$$$$/|  $$$$$$$|  $$$$$$$|  $$$$$$$
//	 \______/  \_______/ \_______/|__/       \_______/|__/  |__/                    |__/ \______/       |__/        | $$____/  \_______/ \____  $$ \_______/
//	                                                                                                                | $$                 /$$  \ $$
//	                                                                                                                | $$                |  $$$$$$/
//	                                                                                                                |__/                 \______/
.search-page,
.not-found {
	&.-empty {
		@media only screen and (min-width: 768px) {
			padding-top: 32px;
		}
	}
}

.not-header {
	align-items: center;
	flex-direction: column;
	justify-content: center;
	margin: 0 auto 64px;
	padding: 64px 0;
	position: relative;
	text-align: center;

	> h1,
	> h2 {
		@include font(cabin, bold, ( 32 / 15 ));

		letter-spacing: 3px;
		line-height: 1.4;
	}

	> h2 {
		position: relative;

		&::after {
			background-color: var(--yellow);
			bottom: 0;
			content: "";
			display: block;
			height: 50%;
			left: -.5em;
			position: absolute;
			transition: height .5s ease;
			width: calc(100% + 1em);
			z-index: -1;
		}
	}

	&::after {
		@extend ._dotted-background;

		background-position: 0;
		content: "";
		display: block;
		height: 100%;
		left: 0;
		position: absolute;
		top: 0;
		width: 100%;
		z-index: -1;
	}
}