/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Imports
	# Custom properties
	# Reset
	# Typography
	# Elements
	# Links
# Accessibility
# Layout
# Forms
# Header
	# Main navigation menu
# Content navigation
# Footer
# Infinite scroll
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Imports
--------------------------------------------------------------*/
@import "_custom-properties.css";
@import "_reset.css";
@import "_typography.css";
@import "_elements.css";
@import "_links.css";

/*--------------------------------------------------------------
# Accessibility
--------------------------------------------------------------*/

/**
 * Text meant only for screen readers.
 * Re: word-wrap: Many screen reader and browser combinations announce broken
 * words as they would appear visually.
 */
.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	position: absolute !important;
	height: 1px;
	width: 1px;
	overflow: hidden;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	color: #21759b;
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000; /* Above WP toolbar. */
}

/* Do not show the outline on the skip link target. */
#primary[tabindex="-1"]:focus {
	outline: 0;
}

/*--------------------------------------------------------------
# Layouts
--------------------------------------------------------------*/
.site {
	margin: 0 auto;
	max-width: 1340px;
}

@media (--sidebar-query) {

	.has-sidebar .site {
		display: grid;
		grid-template-columns: 3fr minmax(360px, 1fr);
		grid-gap: 1.5rem;
		justify-content: center;
		align-items: start;
	}

	.site-header,
	.page-header,
	.site-footer {
		grid-column: 1 / -1;
	}

	.site-main {
		grid-column: 1;
		min-width: 0;
	}

	.primary-sidebar {
		grid-column: 2;
		min-width: 0;
	}
}

/*--------------------------------------------------------------
# Forms
--------------------------------------------------------------*/
/* stylelint-disable */
textarea {
	width: 100%;
}
/* stylelint-enable */

/* stylelint-disable */
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	padding: 0.5rem 1rem;
	line-height: 1.25;
	color: #fff;
	background-color: var(--color-link);
	border: 1px solid var(--color-link);
	border-radius: 0.3rem;
	transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
	cursor: pointer;
}
/* stylelint-enable */

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
	color: #fff;
	background-color: var(--color-link-active);
	border-color: #fff;
}

button:active,
button:focus,
input[type="button"]:active,
input[type="button"]:focus,
input[type="reset"]:active,
input[type="reset"]:focus,
input[type="submit"]:active,
input[type="submit"]:focus {
	border-color: #aaa #bbb #bbb;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
	color: var(--light-font-color);
	border: 1px solid var(--border-color-light);
	padding: 0.5em 0.2em 0.5em 1em;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus {
	color: #111;
}

select {
	border: 1px solid var(--border-color-light);
}

/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/

.site-header {
	display: flex;
	padding-bottom: 1em;
}

.header-image {
	margin: 0 auto;
}

.header-image img {
	display: block;
	margin: 0 auto;
}

.custom-logo-link {
	display: inline-block;
	margin: 0 auto;
}

.site-branding {
	text-align: center;
	padding: 27px 0.5em 0;

	@media screen and (max-width: 600px) {
		min-width: 161px;
		padding-bottom: 0;
		margin: 0 0 0 1em;
	}
}

.site-branding img {
	max-height: 64px;
	width: auto;
}

.site-title {
	margin: 0 1em;
	font-family: var(--highlight-font-family);
	font-stretch: condensed;
	font-size: 38px;
	font-weight: 700;
	line-height: 1.2;
}

.site-title a {
	text-decoration: none;
	color: inherit;
}

.site-description {
	margin: 0.4375em 0 0;
	font-family: var(--highlight-font-family);
	font-stretch: condensed;
	font-size: 17px;
	font-weight: inherit;
	line-height: 1.4;
	word-wrap: break-word;
	color: #757575;
}

/*--------------------------------------------------------------
## Basic navigation menus - handles submenu and small screen toggle
--------------------------------------------------------------*/
.nav--toggle-small .menu-toggle {
	display: block;
	margin: -0.8em 0 0;
	padding: 0.6em 1.2em 0.5em;
	font-family: var(--highlight-font-family);
	font-stretch: condensed;
	font-size: 80%;
	text-transform: uppercase;
	border: 2px solid var(--border-color-dark);
	border-radius: 0;
	background: transparent;


	&.icon {
		border: none;
		position: absolute;
		top: 40px;
		right: 5px;
		display: none;

		@media screen and (max-width: 600px) {
			display: block;
		}

		& .dashicons-menu-alt::before {
			font-size: 40px;
		}

		& svg {
			fill: var(--global-font-color);

			&.close {
				display: none;
			}
		}
	}
}

.admin-bar .nav--toggle-small .menu-toggle {
	margin-top: 46px;
}

.nav--toggle-small {

	& .menu {
		display: none;
	}

	&.nav--toggled-on {

		& .menu {
			display: block;
		}

		@media screen and (min-width: 600px) {

			& .menu {
				display: flex;
				justify-content: center;
			}
		}

		& .menu-toggle.icon svg.close {
			display: block;
		}

		& svg.open-menu {
			display: none;
		}

	}

	&.icon-nav {

		& .menu {
			display: block;
		}

		@media screen and (min-width: 600px) {

			& .menu {
				display: flex;
				justify-content: center;
			}
		}

		@media screen and (max-width: 600px) {

			& .primary-menu-container {
				position: absolute;
				background: #fff;
				width: 100vw;
				top: 300px;
				left: 0;
				padding: 20px 30px;
				opacity: 0;
				transition: opacity 0.3s, top 0.3s ease-out;
			}

			&.nav--toggled-on {

				& .menu-toggle span.dashicons::before {
					content: "\f158";
				}

				& .primary-menu-container {
					top: 180px;
					opacity: 1;
					transition: opacity 0.3s, top 0.3s ease-out;
					z-index: 100;
				}
			}
		}

	}
}

.nav--toggle-small,
.nav--toggle-sub .dropdown,
.nav--toggle-sub .dropdown-toggle {
	display: none;
}

@media (--narrow-menu-query) {

	.nav--toggle-small.nav--toggled-on .menu {
		display: block;
	}
}

@media (--wide-menu-query) {

	.nav--toggle-small .menu-toggle {
		display: none;
	}

	.nav--toggle-small .menu {
		display: block;
	}

	.nav--toggle-sub ul ul {
		display: none;
		position: absolute;
		top: 100%;
		flex-direction: column;
		background: #fff;
		margin-left: 0;
		box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
		z-index: 100;
	}

	.nav--toggle-sub .dropdown,
	.nav--toggle-sub .dropdown-toggle {
		display: block;
		background: transparent;
		position: absolute;
		right: 0;
		top: 50%;
		width: var(--dropdown-symbol-width);
		height: var(--dropdown-symbol-width);
		font-size: inherit;
		line-height: inherit;
		margin: 0;
		padding: 0;
		border: none;
		border-radius: 0;
		transform: translateY(-50%);
		overflow: visible;
	}

	.nav--toggle-sub .dropdown-symbol {
		display: block;
		background: transparent;
		position: absolute;
		right: 20%;
		top: 35%;
		width: 60%;
		height: 60%;
		border: solid var(--border-color-dark);
		border-width: 0 2px 2px 0;
		transform: translateY(-50%) rotate(45deg);
	}

	.nav--toggle-sub ul ul .dropdown,
	.nav--toggle-sub ul ul .dropdown-toggle {
		top: 40%;
		right: 0.2em;
	}

	.nav--toggle-sub ul ul .dropdown-symbol {
		transform: rotate(-45deg);
	}

	.nav--toggle-sub .dropdown-toggle:hover,
	.nav--toggle-sub .menu-item--has-toggle:hover .dropdown-toggle {
		pointer-events: none;
	}

	/* Need menu-item-has-children for non-JS */
	.nav--toggle-sub li.menu-item-has-children,
	.nav--toggle-sub li.menu-item--has-toggle {
		position: relative;
		padding-right: var(--dropdown-symbol-width);
	}

	/*
	 * If the dropdown toggle is active with JS, then
	 * we'll take care of showing the submenu with JS.
	 */
	.nav--toggle-sub li:hover > ul,
	.nav--toggle-sub li.menu-item--toggled-on > ul,
	.nav--toggle-sub li:not(.menu-item--has-toggle):focus > ul {
		display: block;
	}

	/*
	 * "focus-within" is an alternative to focus class for
	 * supporting browsers (all but IE/Edge) for no-JS context
	 * (e.g. AMP) See https://caniuse.com/#feat=css-focus-within
	 *
	 * This selector needs to stay separated, otherwise submenus
	 * will not be displayed with IE/Edge.
	 */
	.nav--toggle-sub li:not(.menu-item--has-toggle):focus-within > ul {
		display: block;
	}
}

/*--------------------------------------------------------------
## Main navigation menu
--------------------------------------------------------------*/
.main-navigation {
	display: block;
	margin: auto;
	padding: 30px 0 0;
	width: 100%;
	font-family: var(--highlight-font-family);
	font-stretch: condensed;
}

.primary-menu-container {
	display: flex;
	width: 100%;
}

#secondary-menu {
	margin-left: auto;
}

.main-navigation a {
	display: block;
	width: 100%;
	padding: 0.5em 1em 0.5em 0;
	text-decoration: none;
	color: var(--global-font-color);
}

.main-navigation a:hover,
.main-navigation a:focus {
	color: var(--color-link);
}

.main-navigation .btn {
	font-size: 1em;
	padding: 0;
}

.main-navigation .btn a {
	color: #fff;
}

.main-navigation .current-menu-item > a,
.main-navigation .current-menu-ancestor > a {
	font-weight: 700;
}

.main-navigation ul {
	display: block;
	list-style: none;
	margin: 0;
	padding: 0;
}

.main-navigation ul ul li {
	padding-left: 1em;
}

@media (--wide-menu-query) {

	.main-navigation ul li a {
		padding: 0.4em 0.5em;
	}

	.main-navigation ul li {
		margin: 0 0 0 0.5em;
	}

	.main-navigation ul li:first-child {
		margin-left: 0;
	}

	.main-navigation ul ul a {
		width: 200px;
	}

	/* stylelint-disable */
	.main-navigation ul ul li {
		padding-left: 0;
		margin-left: 0;
	}
	/* stylelint-enable */

	.main-navigation ul ul li a {
		width: 218px;
		background: none;
	}

	.main-navigation ul ul ul {
		top: 0;
		left: 100%;
		min-height: 100%;
	}

	.main-navigation .menu {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}

	.main-navigation .menu#secondary-menu {
		justify-content: right;
	}
}

@media screen and (max-width: 600px) {

	.main-navigation .btn a {
		padding-left: 1em;
	}
}

/*--------------------------------------------------------------
# Content navigation
--------------------------------------------------------------*/
.site-main .comment-navigation,
.site-main .posts-navigation,
.site-main .post-navigation,
.site-main .pagination {
	margin: 0 auto 2em;
	max-width: var(--content-width);
	overflow: hidden;
	padding: 0 1.5rem;
	font-family: var(--highlight-font-family);
	font-stretch: condensed;
}

@media (--content-query) {

	.site-main .comment-navigation,
	.site-main .posts-navigation,
	.site-main .post-navigation,
	.site-main .pagination {
		padding-left: 0;
		padding-right: 0;
	}
}

.nav-links {
	display: flex;
}

.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
	width: 50%;
	flex: 1 0 50%;
}

.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
	flex: 1 0 50%;
}

.post-navigation .nav-links a {
	display: inline-block;
	padding: 1.5rem;
}

.post-navigation .nav-links a:hover {
	text-decoration: none;
}

.nav-links span {
	color: var(--global-font-color);
}

.nav-links .post-navigation-sub span {
	color: var(--border-color-dark);
	display: inline-block;
	text-transform: uppercase;
	letter-spacing: 2px;
}

.post-navigation .nav-links {
	border-top: 1px solid var(--border-color-light);
	border-bottom: 1px solid var(--border-color-light);
}

.post-navigation .nav-previous {
	border-right: 1px solid var(--border-color-light);
	text-align: right;
}

.site-main .pagination {
	margin-bottom: 1.5em;
	grid-column: 1 / -1;
}

.pagination .nav-links {
	justify-content: center;
	flex-wrap: wrap;
}

.pagination .page-numbers {
	display: inline-block;
	margin-bottom: 0.5em;
	margin-right: 1em;
	border: 1px solid var(--color-link);
	min-width: 1.75em;
	line-height: 1.75;
	text-align: center;
	text-decoration: none;
}

.pagination a:visited {
	color: var(--color-link);
}

.pagination a:hover,
.pagination a:focus,
.pagination a:active {
	border-color: var(--color-link-active);
}

.pagination .prev,
.pagination .next {
	min-width: auto;
	border-color: transparent;
	text-decoration: underline;
}

.pagination .prev:hover,
.pagination .prev:focus,
.pagination .prev:active,
.pagination .next:hover,
.pagination .next:focus,
.pagination .next:active {
	border-color: transparent;
}

.pagination .dots {
	min-width: auto;
	border: none;
}

.pagination .current {
	border-color: var(--border-color-dark);
}

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
.footer-cta {
	border-top: 1px solid var(--border-color-light);
	margin: 0.5rem 0 1.5rem;
	text-align: center;
	grid-column: 1/-1;

	& p {
		font-size: var(--font-size-large);
	}
}

.site-footer {
	margin: 1em 0 0;
	padding: 2em 0;
	font-family: var(--highlight-font-family);
	font-stretch: condensed;
}

.site-info {
	padding: 0 1.5rem;
}

/*--------------------------------------------------------------
# Infinite scroll
--------------------------------------------------------------*/

/* Globally hidden elements when Infinite Scroll is supported and in use. */
.infinite-scroll .posts-navigation,
.infinite-scroll .pagination,
.infinite-scroll.neverending .site-footer {

	/* Theme Footer (when set to scrolling) */
	display: none;
}

/* When Infinite Scroll has reached its end we need to re-display elements that
were hidden (via .neverending) before. */
.infinity-end.neverending .site-footer {
	display: block;
}