/* -----------------------------------------
	01. General
----------------------------------------- */

// Reset the box-sizing
html {
	box-sizing: border-box;
	-ms-overflow-style: scrollbar; // sass-lint:disable-line no-vendor-prefixes
	-webkit-tap-highlight-color: rgba($black, 0); // sass-lint:disable-line no-vendor-prefixes
}

* {
	box-sizing: inherit;

	&::before,
	&::after {
		box-sizing: inherit;
	}
}

// Suppress the focus outline on elements that cannot be accessed via keyboard.
[tabindex="-1"] {
  &:focus {
		outline: none !important;
	}
}

// Always hide an element with the `hidden` HTML attribute (from PureCSS).
[hidden] {
  display: none !important;
}

/* Basic Typography
=================================== */
body {
	line-height: $line-height-base;
	font-size: $font-size-base;
	background-color: $body-bg;
	color: $text-color;
	font-family: $primary-font;
	-webkit-font-smoothing: antialiased; // sass-lint:disable-line no-vendor-prefixes
	-moz-osx-font-smoothing: grayscale; // sass-lint:disable-line no-vendor-prefixes
}

h1, h2, h3, h4, h5, h6 {
	line-height: normal;
	margin: 0 0 30px;
	word-wrap: break-word;
	text-rendering: optimizeLegibility;
	color: $text-color-dark;
}

h1 {
	font-size: 36px;

	@include media-breakpoint-down(sm) {
		font-size: 28px;
	}
}

h2 {
	font-size: 32px;

	@include media-breakpoint-down(sm) {
		font-size: 26px;
	}
}

h3 {
	font-size: 28px;

	@include media-breakpoint-down(sm) {
		font-size: 24px;
	}
}

h4 {
	font-size: 24px;

	@include media-breakpoint-down(sm) {
		font-size: 22px;
	}
}

h5 {
	font-size: 20px;

	@include media-breakpoint-down(sm) {
		font-size: 18px;
	}
}

h6 {
	font-size: 16px;
}

p {
	margin: 0 0 20px;
}

img {
	display: inline-block;
	vertical-align: middle;
	max-width: 100%;
	height: auto;
}

a {
	transition: color .18s ease, background-color .18s ease, border-color .18s ease;
	color: $accent-color;
	text-decoration: none;

	&:hover {
		color: lighten($accent-color, 10%);
		text-decoration: none;
	}

	&:focus {
		outline: 1px dotted $accent-color;
	}
}

.group {
	@include clearfix;
}

// Avoid 300ms click delay on touch devices that support the `touch-action` CSS property.
a,
area,
button,
[role="button"],
input,
label,
select,
summary,
textarea {
  touch-action: manipulation;
}

/* General Element Styling
=================================== */
/* Reset figure margin from normalize.css */
figure {
	margin: 0;
}

/* Lists */
ul, ol {
	padding-left: 20px;
}

ul {
	list-style: disc;
}

ol {
	list-style: decimal;
}

dl {
	margin: 0 0 20px;
}

dt {
	font-weight: bold;
}

dd {
	margin: 0 0 15px;
}

mark {
	background: none;
	text-color: inherit;
}

/* Blockquotes */
blockquote {
	margin: 20px 0;
	padding-left: 15px;
	border-left: 3px solid $border-color;
	font-size: 17px;
	font-weight: 300;

	cite {
		display: block;
		font-weight: bold;
		font-style: italic;
		margin: 10px 0 0;
		color: rgba($text-color, .8);
		font-size: 14px;
	}
}

/* Tables */
table {
	border-collapse: collapse;
	border-spacing: 0;
	width: 100%;
}

.entry-content {
	table {
		border-width: 1px 0 0 1px;
		margin-bottom: 24px;
	}

	th,
	td {
		border-bottom: 1px solid rgba($black, .1);
	}

	caption,
	th,
	td {
		font-weight: normal;
		text-align: left;
		padding: 5px;
		vertical-align: middle;
	}

	th {
		border-width: 0 1px 1px 0;
		font-weight: bold;
		text-transform: uppercase;
		font-size: 85%;
	}

	td {
		border-width: 0 1px 1px 0;
	}
}

/* Code */
code, kbd, tt, var, samp, pre {
	font-family: monospace, serif;
	hyphens: none;
	font-style: normal;
}

pre {
	margin: 15px 0;
	padding: 15px;
	border: 1px solid rgba($black, .1);
	overflow: auto;
}

/* Various */
address {
	margin: 0 0 15px;
	font-style: normal;
	line-height: inherit;
}

/* Embeds and iframes
=================================== */
embed,
iframe,
object,
video,
audio {
	margin-bottom: 15px;
	max-width: 100%;
	border: 0;
}

p,
span {
	> embed,
  > iframe,
	> object,
	> audio,
	> video {
		margin-bottom: 0;
	}
}

// Remove max widths from potential Google Map embeds
#map,
.map {
	* {
		max-width: none !important;
	}
}

/* General Form Styling
=================================== */
legend {
	font-family: inherit;
}

label {
	display: block;
	margin: 0 0 8px;
	font-weight: normal;
	text-transform: uppercase;
	font-size: 13px;
}

input,
textarea,
select {
	display: inline-block;
	font-size: 15px;
	width: 100%;
	max-width: 100%;
	height: 48px;
	padding: 6px 12px;
	line-height: normal;
	border: 2px solid $border-color;
	background-color: $white;
	background-image: none;
	border-radius: 3px;
	font-family: inherit;
	color: $text-color;
	transition: border-color .18s ease;
	box-shadow: 0 2px 0 lighten($border-color, 3%);

	&:hover,
	&:focus {
		outline: none;
		border-color: $accent-color;
		box-shadow: 0 2px 0 rgba($accent-color, .2);
	}

	@include media-breakpoint-down(xs) {
		width: 100%;
	}
}

textarea {
	padding-top: 10px;
	padding-bottom: 10px;
}

select {
	appearance: none;
	background-clip: padding-box;
	background-size: 9px;
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23333' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E");
	background-position: right .75rem center;
	background-repeat: no-repeat;

	// Unstyle the caret on `<select>`s in IE10+.
	&::-ms-expand {
		background-color: transparent;
		border: 0;
	}
}

// Restore box-sizing and remove rounded corners
// from search inputs in iOS
input[type="search"] {
	box-sizing: border-box;
	appearance: none;
}

textarea {
	height: auto;
	resize: vertical;
}

select {
	max-width: 100%;
}

input[type="checkbox"],
input[type="radio"] {
	margin: 4px 0 0;
	line-height: normal;
	width: auto;
	height: auto;
}

fieldset {
	margin: 0 0 15px;
	padding: 0;
	border: 0;
	min-width: 0;
}

/* Placeholder text color */
@include placeholder {
	font-weight: normal;
	opacity: .8;
}

/* Buttons
=================================== */
.btn,
.button,
.woocommerce-Button,
.comment-reply-link,
input[type="submit"],
input[type="reset"],
button {
	@include button;
	@include button-md;
}

.btn-sm {
	@include button-sm;
}

.btn-lg {
	@include button-lg;
}

.btn-transparent {
	@include button-transparent;
}

.btn-block {
	min-width: 100%;
	display: block;
	padding-left: 20px;
	padding-right: 20px;
}

/* Magnific Popup Overrides
=================================== */
.mfp-bg {
	background-color: $black;
}

.mfp-preloader {
	color: $white;

	a {
		color: $white;

		&:hover {
			color: $white;
		}
	}
}

.mfp-container {
	&:not(.mfp-s-error) {
		.mfp-preloader {
			@include spinner;
			background-color: transparent;
			text-indent: -999em;
			margin: 0 auto;
		}
	}
}

button {
	&.mfp-close,
	&.mfp-arrow {
		border: 0;
		opacity: 1;

		&:hover {
			background: none;
			border: 0;
		}
	}
}

.mfp-close-btn-in {
	.mfp-close {
		color: $white;
	}
}

.mfp-image-holder,
.mfp-iframe-holder {
	.mfp-close {
		color: $white;
	}
}

.mfp-arrow {
	line-height: .3;

	&::before,
	&::after {
		border: 0;
	}

	&::after {
		font-family: FontAwesome;
		font-size: 70px;
		color: $white;
	}
}

.mfp-arrow-right {
	&::after,
	.mpf-a {
		content: "\f105";
	}
}

.mfp-arrow-left {
	&::after,
	.mpf-a {
		content: "\f104";
	}
}

.mfp-bottom-bar {
	color: $white;
	font-size: 13px;
	padding: 10px 0 0;
	opacity: .7;

	.mfp-title,
	.mfp-counter {
		color: currentColor;
	}
}