/* ## Box Sizing
--------------------------------------------- */

html,
input[type="search"] {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

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

/* ## Float Clearing
--------------------------------------------- */

.author-box,
.clearfix,
.entry,
.entry-content,
.footer-widgets,
.nav-primary,
.nav-secondary,
.pagination,
.site-container,
.site-footer,
.site-header,
.site-inner,
.widget,
.wrap {

	@include clearfix;
}

/* ## Typography
--------------------------------------------- */

* {
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

::selection {
	background-color: #cbeafb;
}

html {
	overflow-x: hidden;
	max-width: 100vw;
	font-size: 62.5%; // 10px browser default.
}

body {
	overflow-x: hidden;
	max-width: 100vw;
	margin: 0;
	color: $dark;
	background-color: $white;
	font-family: $font-family;
	font-size: 1.8rem;
	font-weight: $normal;
	line-height: 1.618; // Golden ratio.
	-webkit-font-smoothing: antialiased;
	-moz-font-smoothing: grayscale;
	-moz-osx-font-smoothing: grayscale;

	@include breakpoint(sm) {
		font-size: 1.8rem;
	}

	&.boxed-page {
		background-color: $light;
	}
}

body > div {
	font-size: 1.8rem;

	@include breakpoint(sm) {
		font-size: 1.8rem;
	}
}

p {
	margin: 0 0 1.382em;
	padding: 0;
}

a {
	color: $body;
	word-wrap: break-word;

	&:hover,
	&:focus {
		color: $accent;
	}
}

ol,
ul {
	margin: 0;
	padding: 0;
}

li {
	list-style-type: none;
}

hr {
	clear: both;
	margin: 0 0 2em;
	padding: 1em 0 0;
	border: 0;
	border-bottom: $site-border;
	border-collapse: collapse;
}

b,
strong {
	font-weight: $bolder;
}

blockquote,
cite,
em,
i {
	font-style: italic;
}

blockquote {
	margin: 0 0 1.382em;
	padding: 0 1em;
	border-left: 2px solid $accent;

	p {

		&:last-of-type {
			margin-bottom: 0;
		}
	}
}

pre,
code,
kbd,
samp {
	font-family: $font-mono;
}

/* ## Headings
--------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0 0 0.5em;
	font-weight: $bold;
	line-height: 1.236; // Golden ratio.
}

h1 {
	font-size: 2.3em;

	@include breakpoint(sm) {
		font-size: 3em;
	}
}

h2 {
	font-size: 2em;
}

h3 {
	font-size: 1.9em;
}

h4 {
	font-size: 1.8em;
}

h5 {
	font-size: 1.7em;
}

h6 {
	font-size: 1.6em;
}

/* ## Forms
--------------------------------------------- */

:focus {
	outline: $site-outline;
}

::-moz-placeholder {
	opacity: 1;
	color: $medium;
}

::-webkit-input-placeholder {
	color: $medium;
}

input,
select,
textarea {
	width: 100%;
	height: 3em;
	padding: 0 1.5em;
	border: $site-border;
	border-radius: 9rem;
	color: $dark;
	background-color: $lighter;
	font-family: $font-family;
	font-size: 1.6rem; // Prevent zoom on mobile.
	font-weight: $bolder;
	line-height: 3;

	&:focus {
		border-color: $accent;
		outline: none;
	}
}

textarea {
	height: auto;
	padding: 1.5em;
	border-radius: 2.5rem;
	line-height: 1.618;
}

input[type="checkbox"],
input[type="image"],
input[type="radio"] {
	width: auto;
}

input[type="search"] {
	-webkit-appearance: none;
}

.button,
button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.wp-block-button a {
	display: inline-block;
	width: auto;
	height: 3em;
	padding: 0 3.333333em;
	border: 0;
	border-radius: 9rem;
	color: $white;
	box-shadow: 0 0.25rem 2rem -0.5rem rgba($white, 0);
	font-family: $font-family;
	font-size: 1.6rem;
	font-weight: $bold;
	line-height: 3;
	white-space: nowrap;
	text-decoration: none;
	cursor: pointer;

	@include transition;
	@include gradient;

	&:hover,
	&:focus {
		color: $white;
		box-shadow: 0 0.5rem 2rem -0.5rem rgba($accent, 0.3);
	}

	&.outline {
		color: $accent;
		background: transparent;
		box-shadow: inset 0 0 0 2px $accent;

		&:hover,
		&:focus {
			color: $white;
			background-color: $accent;
			box-shadow: none;
		}
	}

	&.white {
		color: $dark;
		background: $white;
		box-shadow: 0 0.25rem 2rem rgba($gray, 0.05);

		&:hover,
		&:focus {
			color: $dark;
			background: $white;
			box-shadow: 0 1rem 2rem rgba($gray, 0.15);
		}

		&.outline {
			color: $white;
			background: transparent;
			box-shadow: inset 0 0 0 2px $white;

			&:hover,
			&:focus {
				color: $dark;
				background: $white;
				box-shadow: inset 0 0 0 0 $white;
			}
		}
	}

	&.small {
		height: 2.36em;
		padding: 0 2.36em;
		font-size: 1.3rem;
		line-height: 2.36;
	}

	&.large {
		font-size: 1.9rem;
	}

	&:disabled {
		border-width: 0;
		color: $gray;
		background: $border;
		box-shadow: none;
		cursor: not-allowed;
	}

	+ button,
	+ .button {
		clear: both;
		margin-top: 1em;

		@include breakpoint(xs) {
			clear: none;
			margin-top: 0;
		}
	}
}

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button {
	display: none;
}

fieldset {
	margin-bottom: 1em;
}

/* ## Objects
--------------------------------------------- */

embed,
iframe,
img,
object,
video,
.wp-caption,
.wp-video-shortcode {
	display: block;
	max-width: 100%;
}

img {
	height: auto;
}

figure {
	margin: 0;
}

video {
	object-fit: cover;
}

.wp-video-shortcode {

	@include breakpoint(sm) {
		width: auto;
	}

	.no-js & {
		width: 100%;
		border: $site-border;
		background-color: $light;
	}
}

/* ## Tables
--------------------------------------------- */

table {
	width: 100%;
	margin-bottom: 4rem;
	border: $site-border;
	border-spacing: 0;
	border-collapse: collapse;
	background-color: $white;
	line-height: 1;
}

tbody {
	border-bottom: $site-border;
}

td,
th {
	padding: 0.618em;
	border-top: $site-border;
	border-right: $site-border;
	text-align: left;
}

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

.screen-reader-text,
.screen-reader-text span,
.screen-reader-shortcut,
.wp-custom-logo .site-title,
.wp-custom-logo .site-description {

	@include screen-reader-text;
}

.screen-reader-text:focus,
.screen-reader-shortcut:focus {
	display: block;
	clip: auto !important;
	z-index: 100000;
	width: auto;
	height: auto;
	padding: 1rem 2rem;
	box-shadow: 0 0 0.2rem 0.2rem rgba($dark, 0.1);
	text-decoration: none;
}

.more-link {
	position: relative;
	font-style: normal;
}

.genesis-skip-link {
	margin: 0;

	li {
		width: 0;
		height: 0;
		list-style: none;
	}
}