/* -----------------------------------------
	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
	height: 100%;
}

* {
	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 {
  	font-family: $default-primary-font;
	line-height: $line-height-base;
	font-size: $font-size-base;
	background-color: $body-bg;
	color: $text-color;
	-webkit-font-smoothing: antialiased; // sass-lint:disable-line no-vendor-prefixes
	-moz-osx-font-smoothing: grayscale; // sass-lint:disable-line no-vendor-prefixes
	word-wrap: break-word;
	overflow-wrap: break-word;
	height: 100%;
}

h1, h2, h3, h4, h5, h6 {
	line-height: normal;
	margin: 0 0 35px;
	text-rendering: optimizeLegibility;
	font-weight: 700;
	letter-spacing: $letter-spacing-default;
}

h1 {
	font-size: 32px;
}

h2 {
	font-size: 28px;
}

h3 {
	font-size: 24px;
}

h4 {
	font-size: 20px;
}

h5 {
	font-size: 16px;
}

h6 {
	font-size: 12px;
}

p {
	margin: 0 0 35px;
}

b,
strong {
	font-weight: $font-weight-extra-bold;
}

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;
	outline: none;

	&:hover {
		color: $accent-color-alt;
		text-decoration: none;
	}
}

.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;
}

hr {
	height: 1px;
	background: $border-color;
	border: none;
	margin-bottom: 30px;
}

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

ul {
	list-style: disc;
}

ol {
	list-style: decimal;
}

dl {
	margin: 0 0 20px;
}

dt {
	font-weight: $font-weight-bold;
}

dd {
	margin: 0 0 15px;
}

/* 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: $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%;
}

th {
	font-weight: $font-weight-bold;
}


.entry-content,
.comment-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: $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;
}

abbr,
abbr[title] {
	text-decoration: none;
	border: 0;
}

mark {
	color: inherit;
	font: inherit;
	background: none;
}

/* 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
=================================== */
form {
	> p {
		margin-bottom: 25px;
	}
}

label,
.label {
	display: block;
	margin: 0 0 8px;
	font-weight: normal;
	line-height: normal;
	cursor: pointer;
	font-size: 14px;
	color: $accent-color;
	letter-spacing: $letter-spacing-default;
}

input,
textarea,
select {
	display: inline-block;
	font-size: 14px;
	width: 100%;
	max-width: 100%;
	height: 50px;
	padding: 10px 15px;
	box-shadow: none;
	line-height: normal;
	border: 1px solid $border-color;
	background-color: $grey-light;
	background-image: none;
	border-radius: 3px;
	font-family: inherit;
	transition: box-shadow .3s ease;

	&:focus {
		outline: none;
		box-shadow: 0 0 0 3px $grey;
	}

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

input[type="file"] {
	height: auto;
}

textarea {
	padding: 20px 20px;
}

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;
	}

	&:invalid {
		font-style: italic;
		color: $text-color-light;
	}
}

.input-group {
	margin-bottom: 30px;
	position: relative;

	[class^="fa"] {
		position: absolute;
		right: 10px;
		bottom: 18px;
		opacity: .7;
	}
}

// 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 2px 0 0;
	line-height: normal;
	width: auto;
	height: auto;
}

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

input[type="date"] {
	appearance: none;
}

/* Placeholder text color */
@include placeholder {
	font-weight: normal;
	opacity: 1;
	color: $text-color-light;
	font-style: italic;
}

/* Buttons
=================================== */
.btn,
.button,
.woocommerce-mini-cart__buttons a.button,
.comment-reply-link,
input[type="submit"],
input[type="reset"],
button[type="submit"],
.added_to_cart {
	@include button;
	@include button-default;
	@include button-sm;
}

.btn,
.button {
	&.disabled {
		@include button-disabled;
	}
}

input[type="submit"]:disabled,
button:disabled {
	@include button-disabled;
}

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

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

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

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

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

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