// ==========================================================================
//  Base styles: opinionated defaults
// ==========================================================================

// Sets box-sizing default to border-box on all elements
*,
*:before,
*:after {
	@include box-sizing();
}

html,
button,
input,
select,
textarea {
	color: #222;
	font-family: $sans;
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
}

body {
	font-size: 1em;
	font-size: $root-font-size * 1px;
	line-height: 1.4;
}

// (highlight color, text color)
@include selection(#91bd51);

// ==========================================================================
// Headings
// ==========================================================================

h1,
h2,
h3,
h4,
h5,
h6 {
	color: #222;
	font-weight: $bold;
}

// ==========================================================================
// Links
// ==========================================================================

a {
	color: #0d72b2;
	@include transition(color .2s);
	text-decoration: none;

	&:visited {
		color: #0d72b2;
	}
	&:hover {
		color: #0f92e5;
	}
	&:focus {
		outline: thin dotted;
	}
}

// ==========================================================================
// Basic block-level elements
// ==========================================================================

address {
	margin: 0 0 1.5em;
}

// ==========================================================================
// Text-level markup
// ==========================================================================

abbr[title],
acronym {
	cursor: help;
}

ins {
	background: #eee;
	text-decoration: none;
}

// ==========================================================================
// Media elements
// ==========================================================================

// Remove the gap between images and the bottom of their containers: h5bp.com/i/440
img {
	vertical-align: middle;
}

// ==========================================================================
// Lists
// ==========================================================================

dt {
	font-weight: $bold;
}

// ==========================================================================
// Forms
// ==========================================================================

// Remove default fieldset styles.
fieldset {
	border: 0;
	margin: 0;
	padding: 0;
}

// Allow only vertical resizing of textareas.
textarea {
	resize: vertical;
}

// A better looking default horizontal rule
hr {
	display: block;
	height: 1px;
	border: 0;
	border-top: 1px solid #ccc;
	margin: 1em 0;
	padding: 0;
}                                                                                                                                                                                                                                                                                                                                                                                                                                                              // ==========================================================================
// Media Queries
// ==========================================================================
@media (max-width: 1147px) {
	.feature,
	.module {
		margin: .75% 0 .75% 1.5%;
		width: 32.333333%;
		@include transition(none);

		&:nth-child(3n + 1) {
			margin-left: 0;
		}
		&:hover {
			top: 0;
			@include box-shadow(none);
		}
	}
	.cat .module {
		&:nth-child(3n + 1) {
			margin: .75% 0 .75% 1.5%;
		}
		&:nth-child(3n - 1) {
			margin-left: 0;
		}
	}
	.wrap.inner {
		background: #f9f9f9;
		padding: 15px;
	}
	.page-content.about {
		background: #f9f9f9;
		padding: 15px;
	}
	.page-content.configure {
		background: #f9f9f9;
	}
	.masthead {
		h1 {
			padding-top: em(55, 30);
			font-size: em(30);
		}
	}
	.subhead {
		margin-top: 122px;
		padding: 70px 0 49px;

		&:after {
			background-size: 160% auto;
		}
	}
	.download-jetpack {
		font-size: em(21);

		&:before {
			top: -1px;
			width: 23px;
			height: 23px;
		}
	}
	.feature {
		&:hover {
			h3 {
				color: #6e818a;
			}
			.feature-img {
				border: 1px solid #ddd;
				border-bottom: none;
			}
			.no-border {
				border: none;
			}
			.feature-description {
				border: 1px solid #ddd;
				background: #f5f5f5;
			}
		}
	}
	.footer {
		padding-top: 165px;
		padding-bottom: 0;

		&:before {
			background-size: 160% auto;
		}
		&:after {
			display: none;
		}
		nav {
			max-width: 100%;
		}
	}
	.fly {
		margin: 0 0 280px;
		&:hover {
			&:before {
				@include transform(translate3d(0px, 0px, 0px));
			}
		}
		&:before {
			display: block;
		}
	}
	.footer nav {
		border: none;
		padding: 0;

		a,
		a:visited {
			&:hover,
			&:focus {
				color: #fff;
			}
		}
	}
	.footer ul {
		float: none;
		overflow: hidden; // Clears the float
	}
	.a8c-attribution {
		display: none;
	}
	nav .primary-footer,
	nav .secondary-footer {
		margin: 0 30px;
	}
	nav .primary-footer {
		padding: 25px 15px 10px 15px;
	}
	nav .secondary-footer {
		padding: 8px 15px 30px;
	}
	nav .a8c-services {
		padding: 30px 0 35px;
		text-align: center;
		background: #222;

		li {
			display: inline-block;
			float: none;
		}
		a,
		a:visited,
		a:hover,
		a:active {
			color: #bbb;
		}
	}
}
@media (max-width: 900px) {
	// Tablets (iPad)
	#wpcontent,
	.auto-fold #wpcontent,
	.auto-fold #wpfooter,
	.modal,
	.configure .frame.top.fixed {
		margin-left: 36px;
		padding-left: 0;
	}
	.flyby {
		display: none;
	}
	.jetpack-logo-tablet {
		display: block;
	}
	.modal {
		bottom: 5%;
		font-size: 80%;

		.content {
			top: 38px;
		}
	}
	.button {
		&:hover,
		&:focus,
		&:active {
			top: 0;
		}
	}
	.download-jetpack {
		&:hover,
		&:focus,
		&:active {
			top: 0;
		}
	}
	.subhead {
		margin-top: 122px;
		padding: 70px 0 49px;

		h2 {
			max-width: 428px;
			font-size: 20px;
		}
	}
	.feature-description {
		min-height: 115px;
	}
	.featured h2,
	.module-grid h2 {
		font-size: 30px;
	}
	.filter {
		label {
			display: inline-block;
			line-height: 44px;
		}
	}
	.module {
		margin: 1% 0 1% 2%;
		width: 49%;

		&:nth-child(3n + 1) {
			margin-left: 2%;
		}
		&:nth-child(2n + 1) {
			margin-left: 0;
		}
	}
	.cat .module {
		margin: 1% 0 1% 2%;

		&:nth-child(2n + 1) {
			margin: 1% 0 1% 2%;
		}
		&:nth-child(2n + 0) {
			margin-left: 0;
		}
	}
	.footer {
		padding-top: 146px;
	}
	.main-nav {
		font-size: 13px;
	}
	.table-bordered {
		.genericon {
			display: inline-block;
		}
	}
}
@media (max-width: 782px) {
	#wpcontent,
	.auto-fold #wpcontent,
	.auto-fold #wpfooter,
	.modal {
		margin-left: 0;
	}
	.modal {
		top: 66px;
	}
	.jp-info-img {
		float: none;
		margin: 0 0 15px;
	}
	.configure .frame.top.fixed {
		padding-left: 0;
	}
	.masthead {
		h1 {
			max-width: 600px;
			font-size: 28px;
		}
	}
	.table-bordered th:last-child {
		padding-left: 0;
	}
	.featured h2,
	.module-grid h2 {
		font-size: 28px;
	}
	.module-search + label:after {
		right: 6px;
		top: 0;
	}
	.blog .type-post,
	.page-template-default .type-page,
	.single .type-post,
	.single .type-jetpack_support {
		width: 100%;
	}
	.sidebar {
		display: none;
	}
	.table-bordered.jetpack-modules tr.jetpack-module td .row-actions {
		display: block;
		padding-left: 10px;
		visibility: visible;
	}
}
@media (max-width: 600px) {
	.modal {
		top: 10px;
		right: 10px;
		bottom: 10px;
		left: 10px;
	}
}
@media (max-width: 530px) {
	.footer {
		margin-top: 0;
	}
	.masthead.hasbutton .subhead {
		margin-top: 105px;
		padding: 0;
	}
	.page-content {
		margin-top: 0;
	}
	.entry-title,
	.page-template-default h1 {
		font-size: 2em;
	}
	.blog h3,
	.single h3,
	.page-template-default h2 {
		font-size: 1.4em;
	}
	.modal h2 {
		font-size: 26px;
	}
	.featured {
		display: none;
	}
	.filter {
		a {
			padding: 0.6em;
		}
	}
	.clouds-sm {
		height: 90px;
	}
	.jp-filter a {
		padding: 0.76em 1em;
	}
	.masthead {
		h1 {
			margin: 0 15px;
			padding: 31px 0 15px 0;
			font-size: 21px;
			font-weight: 400;
		}
	}
	.subhead {
		margin-top: 83px;
		padding: 47px 15px 39px;

		h2 {
			display: none;
		}
	}
	.download-jetpack {
		font-size: em(17);
		font-weight: 600;

		&:before {
			width: 19px;
			height: 19px;
			margin-right: 9px;
		}
	}
	.module {
		margin: 5px 0;
		width: 100%;

		&:nth-child(3n + 1) {
			margin-left: 0;
		}
		&:nth-child(2n + 1) {
			margin-left: 0;
		}
	}
	.cat .module {
		margin: 5px 0;

		&:nth-child(2n + 1) {
			margin-left: 0;
		}
		&:nth-child(2n + 0) {
			margin-left: 0;
		}
	}
	.module-grid h2 {
		margin-top: 16px;
		font-size: 25px;
	}
	.footer {
		padding-top: 135px;

		nav {
			li {
				display: block;
				float: none;
				margin: 0;
				text-align: left;
			}
			a {
				display: block;
				padding: 0 16px;
				line-height: 44px;
			}
		}
	}
	.fly {
		margin: 0 0 100px;

		&:before {
			display: none;
		}
	}
	nav .primary-footer,
	nav .secondary-footer {
		margin: 0;
		padding: 0;
		border: none;
		font-weight: 400;

		a {
			border-top: 1px solid darken($green, 2%);
		}
	}
	nav .a8c-services {
		padding: 0;

		a {
			border-top: 1px solid darken(#222, 4%);
		}
	}
	.footer .a8c-services {
		position: relative;
		overflow: visible;

		&:before,
		&:after {
			content: '';
			position: absolute;
			right: 0;
			bottom: 100%;
			width: 50%;
			pointer-events: none;
		}
		&:before {
			margin-bottom: 55px;
			height: 225px;
			background: url('img/rocketeer.svg') center bottom no-repeat;
			background-size: 50px auto;
		}
		&:after {
			height: 50px;
			background: url('img/the-footcloud.svg') center bottom no-repeat;
			background-size: auto 38px;
		}
	}
	.wrap.inner {
		margin-top: em(24);
	}
	.wrap.inner.jp-support {
		.jp-support-column-left {
			width: 100%;

			.widget-text {
				margin-right: 0;
				width: 100%;
			}
		}
		.jp-support-column-right {
			width: 100%;
		}

	}
	.jetpack-message {
		.squeezer {
			padding: 23px;

			&:before {
				display: none;
			}
		}
	}
}
@media (max-width: 320px) {
	// iPhone

	.filter {
		margin-bottom: 10px;
	}
	.footer {
		padding-top: 76px;
	}
	.fly {
		margin: 0 0 42px;
	}
	.footer .a8c-services {
		&:before {
			margin-bottom: 50px;
			background-size: 40px auto;
		}
		&:after {
			background-size: auto 25px;
		}
	}
}
@media (min-width: 769px) {
	// iPad and larger

	.filter {
		input[type=radio] {
			&:checked:before {
				@include animation(grow .2s ease-in-out);
			}
		}
	}
}