/*
Theme Name: GOAT
Theme URI:
Author: Carolina Nymark
Author URI: https://themesbycarolina.com
Template: embla
Description: GOAT is a basic responsive sports theme in black and white with a customizable accent color so that you can match your team colors. The theme has a top navigation bar, a social menu, a two column grid layout, and room for a front page header image. It has a footer widget area with room for all your widgets (including two custom widgets), and one extra front page widget area below the header. GOAT also has support for full width content, video header and logo. The theme is designed for use together with the SportsPress plugin, but works well as a blog even without the plugin. The theme is also compatible with WooCommerce and Jetpack.
Version: 0.6
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: goat
Tags: grid-layout, custom-menu, custom-header, custom-logo, footer-widgets, theme-options, threaded-comments, blog, accessibility-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.

GOAT WordPress theme is based on Embla, (C) 2017-2020 Carolina Nymark
Embla and GOAT are distributed under the terms of the GNU GPL v2 or later.
*/

body{
	background: #fff;
}

.site-title,
.credits,
.more-link,
.site-description,
.taxonomy-description,
.entry-title,
.pagination h2.screen-reader-text,
.widget-title,
.widgettitle,
.navigation,
.comment-reply-title,
.embla-recent-comments-meta,
.byline{
	font-family: 'Graduate', sans-serif;
}

.paged article:nth-child(1) .entry-title,
.entry-title {
	font-size: 2.2em;
}

.embla-recent-comments-meta,
.site-description,
.navigation {
	font-size: 1.5rem;
}

.comment-reply-title, 
.no-comments, 
.widgettitle, 
.widget-title, 
.post-navigation,
.comments-area .entry-title {
	font-size: 1.8rem;
}

.entry-title a:hover {
	text-decoration: none;
	box-shadow: inset 0 0 0 rgba(0, 115, 170, 1), 0 2px 0 rgba(0, 115, 170, 1);
}

.site-branding{
	text-align: center;
}

.site-header {
	box-shadow: none;
	border: none;
}

.wp-custom-header {
	width: 100%;
}

.wp-custom-header img {
	border-radius: 0;
	box-shadow: 0 2px 3px 0 rgba(0,0,0,0.05);
	margin:0 auto;
	display: block;
}

.menu-wrap,
.main-navigation ul ul {
	background: #222;
}

.menu-wrap {
	margin: 0 auto;
	text-align:center;
	padding-left:1em;
	font-size:80%;
	font-family: 'Open Sans', sans-serif;
	font-weight: bold;
	border-top:6px solid #0073aa;
}

.top-widget-area .widget a,
.site-footer a,
.menu-wrap a {
	color: #fafafa;
	border-bottom:2px solid transparent;
}

/* Overwrite the accent color from the customizer option, to keep the high color contrast. */
.top-widget-area .widget a:hover,
.top-widget-area .widget a:focus,
.site-footer a:hover,
.site-footer a:focus,
.menu-wrap .main-navigation a:hover,
.menu-wrap .main-navigation a:focus {
	color: #fafafa !important;
	border-bottom: 2px solid #fafafa !important;
}

.social-menu .icon {
	fill: #fafafa;
}

.main-navigation ul ul {
	box-shadow: none;
}

.main-navigation.toggled li {
	border-bottom: 1px solid #111;
}

.main-navigation li.current_page_item > a, 
.main-navigation li.current-menu-item > a {
	border-bottom: 2px solid rgba(0,0,0, 0.15);
}

.top-widget-area {
	margin-bottom:2em;
	width: 88%;
	padding: 0;
	margin: 0 auto 3em auto;
}

.top-widget-area .widget {
	background: #0073AA;
	padding: 0.6em 1em;
	border-radius:2px;
	border: 1px solid rgba(0, 0, 0, 0.09);
	border-top:6px solid #222;
	color:#fafafa;
	margin-bottom:2em;
}

.widget li {
	border-bottom: none;
}

.widget-title {
	border-bottom: 0;
}

.widget .embla-recent-comments-meta {
	font-size: 90%;
	font-family: 'Noto Serif', serif;
	font-weight: initial;
}

.widget.embla-recent-comments li .icon {
	fill: #fafafa;
}

article.comment-body,
article {
	border: 1px solid rgba(0, 0, 0, 0.09);
	border-radius: 2px;
}

.byline {
	font-weight: 400;
}

.has-post-thumbnail a img.wp-post-image {
	outline: none;
	outline-offset: 0;
	display:block;
	border:1px solid transparent;
}

.has-post-thumbnail a:focus img.wp-post-image,
.has-post-thumbnail a img.wp-post-image:hover {
	outline: none;
	outline-offset: 0;
	border:1px solid #222;
}

.paged article.post {
	grid-column: span 3;
}

.categories,
.tags {
	line-height: 1.9;
}

.site-footer {
	color: #fafafa;
	border-top: 6px solid #0073aa;
	border-bottom: 2px solid #0073aa;
	background: #222;
}

.embla-icon .icon {
	display: block;
	height: 4em;
	width: 4em;
	fill: #000;
	padding: 4px;
	margin: -0.2em auto -3.1em auto;
	transition: all 0.9s ease;
	border: 2px solid transparent;
	background: #fff;
}

.embla-icon a:hover {
	border:none !important;
}

.site-footer .embla-icon .icon {
	box-shadow: none;
}

.embla-icon .icon:hover {
	border: 2px solid #222;
	transition: all 0.9s ease;
}

/* Adjust specific icons*/
.embla-icon .icon.icon-hockey-puck,
.embla-icon .icon.icon-american-football {
	padding-left: 0.7em;
	padding-right: 0.7em;
}

.privacy-policy-link {
	font-size: 1em;
}

.credits {
	margin-top: 4em;
	text-transform: initial;
	font-family: "Noto Serif",serif;
	font-weight: normal;
	font-size:0.7em;
}

.credits a {
	margin:0 1em;
}


/* SportsPress styling*/
.site-footer .sp-widget-align-none {
	grid-column:1 /span 6;
}

.sp-data-table tbody a {
	text-decoration: underline;
}

.sp-data-table tbody a:hover,
.sp-data-table tbody a:focus {
	text-decoration: none;
}

.widget .sp-template-event-blocks td {
	border:none;
}


@media screen and (min-width: 1440px) {
	.wp-custom-header{
		max-width: 100%;
	}
}

@media screen and (min-width: 1300px) {
	article:nth-child(n+6){
		grid-column: span 3;
	}
}

@media screen and (max-width: 1280px){
		#mobile-menu-toggle {
		cursor: pointer;
		display: inline-block;
		padding: 4px 0.4em;
		box-shadow: 0 1px 2px rgba(0,0,0,0.2);
		text-align: center;
		font-size: 1em;
		line-height: 1.6;
		font-weight: bold;
		vertical-align: top;
		margin-top: 12px;
		border-radius: 2px;
		border:none;
	}

	#mobile-menu-toggle:hover,
	#mobile-menu-toggle:focus {
		transition: all 1.1s ease;
		outline: none;
		font-weight: bold;
		box-shadow: none;
		color:#0073AA;
		border:none;
	}
	
}

@media screen and (max-width: 700px) {
	.main-navigation {
		margin: 0 auto;
	}

	#mobile-menu-toggle {
		margin-top: 12px;
	}

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

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

	.site-description {
		font-size: 1.125rem;
		text-align: center;
	}

}