/*
Theme Name: Fish Farmer (2019)
Theme URI: http://www.dcthomson.co.uk
Author: Robert Paul
Author URI: http://www.dcthomson.co.uk
Description: Media and Support Query CSS for the Fish Farmer theme (2019).
*/

/********
Fallbacks
********/

/* Fallbacks > Grid */
.grid__posts .post {
	margin-bottom: 20px;
}

.grid__posts .post:after {
	content: '';
	display: block;
	clear: both;
}

.grid__posts .post__title {
	margin-bottom: 10px;
}

.grid__posts .post__thumbnail {
	float: left;
	width: 120px;
}

.grid__posts .post__content {
	float: right;
	width: calc(100% - 140px);
}

/* Fallbacks > Grid > Post (List) */
.grid--list .post__title {
	margin-top: 4px;
}

/******
<=480px
******/

@media only screen and (max-width: 480px) {

	/* Footer > Social */
	.footer__social {
		margin-top: 1rem;
	}

	.footer__social .social__item {
		margin-bottom: 1rem;
	}

	.footer__social .social__link:before {
		float: left;
	}

	.footer__social .social__link > .screen-reader-text {
		clip: auto !important;
		position: relative !important;
		display: inline-block;
		width: auto;
		height: auto;
		line-height: 32px;
		overflow: initial;
	}

	/* Footer > Navigation */
	.footer__nav nav:not(:last-child) {
		margin-bottom: 2rem;
	}

	/* Grid */
	.grid__posts img {
		width: 100%;
	}
}

/******
>=481px
******/

@media only screen and (min-width: 481px) {

	/* Footer */
	.site-footer > .wrap:after {
		content: '';
		display: block;
		clear: both;
	}

	/* Footer > Logo */
	.footer__logo {
		float: left;
	}

	/* Footer > Social */
	.footer__social {
		float: right;
	}

	.footer__social .social__item {
		float: left;
	}

	/* Footer > Navigation */
	.footer__nav nav:not(:last-child) {
		float: left;
		margin-right: 2rem;
	}
}

/******
<=767px
******/

@media only screen and (max-width: 767px) {

	body {
		padding-top: 48px;
	}

	/* Media Classes */
	.show-desktop,
	.show-tablet,
	.hide-mobile {
		display: none !important;
	}

	.show-mobile {
		display: block !important;
	}

	/*****
	Layout
	*****/

	.wrap {
		padding-left: 10px;
		padding-right: 10px;
	}

	/*********
	Typography
	*********/

	.title--xl {
		font-size: 175%;
	}

	.title--lg,
	.cms h1 {
		font-size: 150%;
	}

	.cms h2 {
		font-size: 125%;
	}

	.title--md,
	.cms h3 {
		font-size: 106.25%;
	}

	.cms h4,
	.cms h5,
	.cms h6 {
		font-size: 100%;
	}

	/*****
	Header
	*****/

	.site-header {
		z-index: 2000;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		width: 100%;
		height: 48px;
		box-shadow: 0 1px 1px rgba(0,0,0,.1);
	}

	.admin-bar .site-header {
		top: 46px;
	}

	.site-header > .wrap {
		padding-left: 48px;
		padding-right: 48px;
		height: 100%;
	}

	/* Header > Logo */
	.header__logo {
		height: 100%;
	}

	.header__logo-media {
		width: 100%;
		max-width: 160px;
		max-height: 32px;
	}

	.header__description {
		display: none;
	}

	/* Header > Leaderboard */
	.leaderboard__wrap {
		padding: 20px;
		background-color: #eee;
	}

	.leaderboard__wrap > .leaderboard > div {
		margin: 0 auto;
	}

	/*********
	Navigation
	*********/

	/* Navigation > All Sections */
	.navigation__main,
	.navigation__btn-label {
		display: none;
	}

	.navigation__btn {
		position: absolute;
		top: 0;
		display: block;
		width: 48px;
		height: 48px;
		line-height: 48px;
		text-align: center;
		font-size: 20px;
		color: var(--ff-blue);
	}

	.navigation__btn.js-on {
		background-color: var(--ff-blue);
		color: #fff;
	}

	.navigation__btn.js-on:after {
		content: '';
		z-index: 1001;
		position: absolute;
		bottom: -16px;
		left: 16px;
		display: block;
		border: 8px solid transparent;
		border-top-color: var(--ff-blue);
		width: 16px;
		height: 16px;
	}

	.navigation__btn--nav {
		left: 0;
	}

	.navigation__btn--search {
		right: 0;
	}

	.navigation__box {
		z-index: 1000;
		position: fixed;
		top: 48px;
		left: 0;
		right: 0;
		border: 0;
		width: 100%;
	}

	.navigation__all-sections {
		bottom: 0;
		overflow-y: scroll;
	}

	.navigation__all-sections .all-sections-menu > li:not(:last-child) {
		margin-bottom: 20px;
	}

	.navigation__all-sections .sub-menu > li {
		margin-bottom: 10px;
	}

	/* Navigation > Search */
	.navigation__search {
		box-shadow: 0 1px 1px rgba(0,0,0,.1);
	}

	/******
	Widgets
	******/

	.widget,
	.block-widget {
		margin-top: 1.5rem;
	}

	/*****
	Embeds
	*****/

	.cms .aligncenter,
	.cms .alignleft,
	.cms .alignright {
		margin-left: auto;
		margin-right: auto;
		max-width: 100%;
	}

	/********
	Fallbacks
	********/

	/* Fallbacks > Logo */
	.header__logo {
		display: block;
		padding: 8px;
	}

	/* Fallbacks > Grid */
	.grid--sidebar .sidebar {
		width: 100%;
	}

	/* Fallbacks > Socialize */
	.post__meta .socialize {
		margin-top: 1rem;
	}

	/*********
	JS Classes
	*********/

	.js-locked {
		overflow: hidden;
	}
}

/******
>=768px
******/

@media only screen and (min-width: 768px) {

	/*****
	Layout
	*****/

	.wrap {
		padding-left: 20px;
		padding-right: 20px;
	}

	.wrapped {
		margin-left: auto;
		margin-right: auto;
		max-width: 1000px;
	}

	.leaderboard__wrap {
		padding-top: 20px;
	}

	/*********
	Typography
	*********/

	.title--xl {
		font-size: 175%;
	}

	.title--lg,
	.cms h1 {
		font-size: 150%;
	}

	.title--md,
	.cms h2 {
		font-size: 125%;
	}

	.cms h3 {
		font-size: 112.5%;
	}

	.cms h4,
	.cms h5,
	.cms h6 {
		font-size: 100%;
	}

	/*****
	Header
	*****/

	.site-header {
		padding-top: 20px;
	}

	/* Header > Logo */
	.header__logo {
		display: block;
	}

	.header__logo-media {
		max-width: 50%;
	}

	/*********
	Navigation
	*********/

	/* Navigation > All Sections */
	.navigation__btn-group {
		text-align: center;
	}

	.navigation__btn {
		display: inline-block;
		padding: 9px 9px 10px 9px;
		border: 1px solid #fff;
		border-bottom: 0;
		height: 20px;
		line-height: 20px;

		box-sizing: content-box;
	}

	.navigation__btn.js-on {
		z-index: 1001;
		position: relative;
		border-color: #ddd;
		background-color: #fff;
	}

	.navigation__box {
		top: -1px;
		box-shadow: 0 1px 1px rgba(0,0,0,.1);
	}

	.navigation__all {
		z-index: 1001;
		position: relative;
		margin-top: 10px;
		height: 40px;
	}

	.all-sections-menu .sub-menu .menu-item {
		margin-bottom: .5rem;
	}

	/* Navigation > Search */
	.navigation__search {
		text-align: center;
	}

	.header__search-form {
		margin: auto;
		max-width: 300px;
	}

	/******
	Sidebar
	******/

	.sidebar {
		width: 300px;
	}

	/***
	Post
	***/

	/* Post > Footer > Navigation */
	.post__nav-btn {
		width: 50%;
	}

	.post__nav-btn--next {
		float: left;
	}

	.post__nav-btn--prev {
		float: right;
	}

	.post__nav-btn--next {
		padding-right: .5rem;
	}

	.post__nav-btn--prev {
		padding-left: .5rem;
		text-align: right;
	}

	/***********
	Hover events
	***********/

	.cat-label:hover,
	.header__navigation a:hover,
	.post__nav-link:hover,
	.post__title:hover {
		text-decoration: underline;
	}

	.post__tags a:hover {
		background-color: var(--ff-blue);
		color: #fff;
	}

	.post__excerpt-link:hover {
		border-color: #000;
		color: #000;
	}

	.navigation__btn {
		background-color: #fff;

		-webkit-transition: var(--ff-transition);
		transition: var(--ff-transition);
	}

	.navigation__btn:not(.js-on):hover {
		cursor: pointer;
		background-color: #eee;
	}

	.sidebar .sailthru-subscribe-widget .sailthru-subscribe-button:hover {
		background-color: var(--ff-blue-lighten);
	}

	.wp-pagenavi a:not(.current):hover,
	.wp-pagenavi .current {
		background-color: var(--ff-blue);
		color: #fff;
	}

	.breadcrumbs > span a:hover {
		text-decoration: underline;
		color: #000;
	}

	.ff-zenfolio-gallery__btn:hover {
		background-color: #fff;
		color:  var(--ff-blue);
	}

	.mc4wp-form a {
		-webkit-transition: var(--ff-transition);
		transition: var(--ff-transition);
	}

	.mc4wp-form a:hover {
		background-color: var(--ff-blue-lighten);
	}

	/*****
	Embeds
	*****/

	.cms .aligncenter,
	.cms .alignleft,
	.cms .alignright {
		margin-bottom: 1rem;
		max-width: 300px;
	}

	.cms .aligncenter {
		margin-left: auto;
		margin-right: auto;
	}

	.cms .alignleft {
		float: left;
		margin-right: 1rem;
	}

	.cms .alignright {
		float: right;
		margin-left: 1rem;
	}

	/********
	Fallbacks
	********/

	/* Fallbacks > Grid */
	.grid--sidebar:after {
		content: '';
		display: block;
		clear: both;
	}

	.grid--sidebar .grid__content {
		float: left;
		width: calc(100% - 320px);
	}

	.grid--sidebar .sidebar {
		float: right;
	}

	/* Fallbacks > Flexbox > Post Meta */
	.post__meta:after {
		content: '';
		display: block;
		clear: both;
	}

	.post__meta .post-meta {
		float: left;
	}

	.post__meta .socialize {
		float: right;
	}
}

/******************
>=768px && <=1024px
******************/

@media only screen and (min-width: 768px) and (max-width: 1024px) {

	/* Media Classes */
	.show-desktop,
	.show-mobile {
		display: none !important;
	}

	.show-tablet {
		display: block !important;
	}
}

/*******
>=1025px
*******/

@media only screen and (min-width: 1025px) {

	/* Media Classes */
	.show-tablet,
	.show-mobile {
		display: none !important;
	}

	.show-desktop {
		display: block !important;
	}
}

/***
Grid
***/

@supports ((display: -ms-grid) or (display: grid)) {

	.grid {
		display: -ms-grid;
		display: grid;
	}

	.grid__posts {
		grid-gap: 1.5rem;
	}

	.grid__posts .post {
		margin: 0;
	}

	.post--tiled .post__content {
		padding-top: 1rem;
	}

	/* Template Parts > Post (Tiled) */
	.grid--tiled .post__thumbnail,
	.grid--tiled .post__content {
		width: 100%;
	}

	/* Template Parts > Post (List) */
	.grid--list .post__thumbnail,
	.grid--list .post__content {
		width: auto;
	}

	@media only screen and (min-width: 481px) and (max-width: 1024px) {

		/* Template Parts > Post (Tiled) */
		.grid--tiled {
			-ms-grid-columns: (1fr)[2];
			grid-template-columns: repeat(2, 1fr);
		}

		/* Template Parts > Pagination */
		.pagination {
			-ms-grid-column: span 2;
			grid-column: span 2;
		}
	}

	@media only screen and (min-width: 1025px) {

		/* Template Parts > Post (Tiled) */
		.grid--tiled {
			-ms-grid-columns: (1fr)[3];
			grid-template-columns: repeat(3, 1fr);
		}
	}

	@media only screen and (min-width: 768px) {

		/* Navigation > All Sections */
		.all-sections-menu {
			display: -ms-grid;
			display: grid;
			grid-gap: 1rem;
		}

		/* Sidebar Grid */
		.grid--sidebar {
			-ms-grid-columns: 1fr 300px;
			grid-template-columns: 1fr 300px;
			grid-column-gap: 1.5rem;
		}

		.grid--sidebar .grid__posts,
		.grid--sidebar .grid__content {
			grid-auto-rows: max-content;

			width: 100%;
		}

		.grid--sidebar .sidebar {
			grid-column: 2 / 3;
			-ms-grid-row: 1;
			grid-row-start: 1;
		}
	}

	@media only screen and (min-width: 768px) and (max-width: 1024px) {

		/* Navigation > All Sections */
		.all-sections-menu {
			-ms-grid-columns: (1fr)[3];
			grid-template-columns: repeat(3, 1fr);
		}
	}

	@media only screen and (min-width: 1025px) {

		/* Navigation > All Sections */
		.all-sections-menu {
			-ms-grid-columns: (1fr)[4];
			grid-template-columns: repeat(4, 1fr);
		}

		/* Template Parts > Pagination */
		.pagination {
			-ms-grid-column: span 3;
			grid-column: span 3;
		}
	}
}

/******
Flexbox
******/

@supports (display: flex) {

	.flex {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
	}

	/* Header > Logo */
	.header__logo {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
	}

	/* Header > Search Form */
	.search-form__row {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;

	}

	.search-form__text {
		-webkit-box-flex: 1;
		-ms-flex: 1 1 auto;
		flex: 1 1 auto;
	}

	.search-form__submit {
		-webkit-box-flex: 0;
		-ms-flex: 0 0 32px;
		flex: 0 0 32px;
	}

	/* Template Part > Post (List) */
	.post--list {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
	}

	.post--list .post__thumbnail {
		-webkit-box-flex: 0;
		-ms-flex: 0 1 25%;
		flex: 0 1 25%;
	}

	.post--list .post__content {
		-webkit-box-flex: 1;
		-ms-flex: 1 1 75%;
		flex: 1 1 75%;

		margin-left: 1rem;
	}

	/* Sponsored Content */
	.sponsored-content {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
	}

	.sponsored-content .thumb {
		-webkit-box-flex: 1;
		-ms-flex: 1 1 20%;
		flex: 1 1 20%;
	}

	.sponsored-content .thumb a {
		display: block;
		padding: 10px 0 10px 10px;
		height: 100%;
	}

	.sponsored-content .thumb img {
		-o-object-fit: contain;
		object-fit: contain;
	}

	.sponsored-content .content {
		-webkit-box-flex: 1;
		-ms-flex: 1 1 80%;
		flex: 1 1 80%;

		padding: 10px;
	}

	/* <=767px */
	@media only screen and (max-width: 767px) {

		.post__meta {
			-webkit-box-orient: vertical;
			-webkit-box-direction: normal;
			-ms-flex-direction: column;
			flex-direction: column;
		}
	}

	/* >=768px */
	@media only screen and (min-width: 768px) {

		.post__meta {
			-webkit-box-pack: justify;
			-ms-flex-pack: justify;
			justify-content: space-between;
			-webkit-box-align: center;
			-ms-flex-align: center;
			align-items: center;
		}

		.post__meta:after {
			display: none;
		}
	}
}