/*!
Theme Name: fruitfly
Theme URI: http://underscores.me/
Author: long haul collective
Author URI: https://thelonghaul.org
Description: long haul new website template
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: fruitfly
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

fruitfly is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments

--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Fonts
--------------------------------------------------------------*/
@font-face {
    font-family: 'futurarenner';
    src: url('fonts/futurarenner-light-web.woff2') format('woff2'),
         url('fonts/futurarenner-light-web.woff') format('woff');
    font-weight: 300;
    font-style: normal;

}

@font-face {
    font-family: 'futurarenner';
    src: url('fonts/futurarenner-regular-web.woff2') format('woff2'),
         url('fonts/futurarenner-regular-web.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'mavenpro';
    src: url('fonts/mavenpro-regular-webfont.woff2') format('woff2'),
         url('fonts/mavenpro-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'mavenpro';
    src: url('fonts/mavenpro-bold-webfont.woff2') format('woff2'),
         url('fonts/mavenpro-bold-webfont.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}

/*--------------------------------------------------------------
# Fruitfly Styles
--------------------------------------------------------------*/
body {
  font-family: 'mavenpro';
}
::-moz-selection { /* Code for Firefox */
 color: #e619a1;
 background: #e0e2e7;
}

::selection {
  color: #e0e2e7;
  background: #e619a1;
}

:focus {
	outline: .125rem solid #ffd11b;
	outline-offset: .125rem;
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'futurarenner';
	font-weight: normal;
}
h2 {
  font-size: 1.8em;
}
.entry-content p {
  font-size: 1.1em;
}

#header-quickinfo {
  background-color: #171a1c;
	padding-top: 4px;
	padding-bottom: 4px;
  margin-bottom: 14px;
}
#header-quickinfo .container {
  display: flex;
}
#header-quickinfo p {
	font-size: 1.2em;
	font-family: 'futurarenner';
  color: #fff;
}
#header-quickinfo a {
	text-decoration: none;
}
#header-quickinfo .left {
	text-align: left;
	width: 60%;
}
#header-quickinfo .right {
	text-align: right;
	width: 40%;
}

#content-wrapper {
	display: flex;
	margin: auto auto;
	justify-content: center;
}

main {
  min-width: 1008px;
	background: #fff;
	padding: 1.4rem;
	border-radius: 14px;
}

#secondary {
	flex: 1;
	max-width: 250px;
	min-width: 240px;
  padding: 1.4rem;
  background-color: #171a1c;
  color: #fff;
  margin-top: 50px;
  border-top-right-radius: 14px;
  border-bottom-right-radius: 14px;
  margin-bottom: 40px;
}

h1.entry-title {
	font-size: 4em;
	text-transform: uppercase;
	line-height: 90%;
margin-bottom: 10px;
}

/*
 * Duotone BGs
 */
#duotone {
	width: 100vw;
	height: 100vh;
	position: fixed;
	top: 0px;
  left: 0px;
	overflow: hidden;
	z-index: -2;
	pointer-events: none;
}

#duotone-img {
  background-color: #bbc8a1;
	mix-blend-mode: multiply;
	background-size: cover;
	background-repeat: no-repeat;
	height: 100vh;
	width: 100vw;
}

#duotone-top {
  content: '';
  display: block;
  width: 100vw;
  height: 100vh;
  mix-blend-mode: lighten;
  position: fixed;
	top: 0;
	left: 0;
	z-index: 1;
}

/*--------------------------------------------------------------
# WordPress Generic Defaults
--------------------------------------------------------------*/
/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
	display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
	display: list-item;
}

/**
 * Add the correct display in IE 10+.
 */
template {
	display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
	display: none;
}

/*--------------------------------------------------------------
# Components
--------------------------------------------------------------*/

/* Navigation
--------------------------------------------- */
.site-title svg, .site-title img {
    max-width: 100%;
    height: auto;
}

.site-description, .site-title {
  margin-top: 0px;
  margin-bottom: 0px;
}

.main-navigation {
	display: block;
	width: 100%;
  margin-top: 10px;
}

#primary-menu {
  margin-left: 15px;
  margin-right: 8px;
}

.main-navigation li, .main-navigation li:first-child {
  margin-top: 0px;
  margin-right: 10px;
  margin-bottom: 0px;
  padding: 10px;
  line-height: 120%;
  font-family: 'futurarenner';
  font-size: 1.4em;
}

#primary-menu > li {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.main-navigation ul {
	display: none;
	list-style: none;
	margin: 0;
	padding-left: 0;
}

.main-navigation ul ul {
	box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
	float: left;
	position: absolute;
	top: 100%;
	left: -999em;
	z-index: 99999;
  background-color: #000;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  border-bottom-left-radius: 8px;
  color: #fff;
}

.main-navigation ul ul > li {
  margin: 0;
}

.main-navigation ul ul li:hover {
  text-decoration: underline;
}

.main-navigation .sub-menu {
  display: block;
}

#primary-menu > .menu-item:hover {
  background-color: #000;
  color: #fff;
}

.main-navigation ul ul ul {
	left: -999em;
	top: 0;
}

.main-navigation ul ul li:hover > ul,
.main-navigation ul ul li.focus > ul {
	display: block;
	left: auto;
}

.main-navigation ul ul a {
	width: 200px;
}

.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul {
	left: 0px;
}

.main-navigation li {
	position: relative;
}

.main-navigation a {
	display: block;
	text-decoration: none;
}

#primary-menu > .current_page_item,
#primary-menu > .current-menu-ancestor {
  background-color: #fff;
  color: #000;
}

/* Small menu. */
.menu-toggle,
.main-navigation.toggled ul {
	display: block;
}

.site-main .comment-navigation,
.site-main
.posts-navigation,
.site-main
.post-navigation {
	margin: 0 0 1.5em;
}

.comment-navigation .nav-links,
.posts-navigation .nav-links,
.post-navigation .nav-links {
	display: flex;
}

.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
	flex: 1 0 50%;
}

.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
	text-align: end;
	flex: 1 0 50%;
}

@media screen and (min-width: 640px) {
	.menu-toggle {
		display: none;
	}

	.main-navigation ul {
		display: flex;
	}
}

@media (max-width: 1280px) {
  #primary-menu {
    margin-bottom: 10px;
    margin-left: 0px;
  }
  #primary-menu li {
    border-radius: 10px;
  }
  main {
    min-width: auto;
  }
  #primary-menu > .menu-item.menu-item-has-children {
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
  }
}

@media (max-width: 959px) {
	#secondary {
		min-width: 200px;
	}
  .main-navigation li, .main-navigation li:first-child {
    padding: 7px;
    margin-right: 4px;
  }

}

@media (max-width: 639px) {
  button.menu-toggle {
    width: 100px;
    height: 100px;
    color: #fff !important;
    background: #000;
    border-radius: 50px;
    right: 30px;
    transition: 1s all;
    overflow: hidden;
    background-image:url('img/circle-a.png');
    background-size: 105%;
    background-position: center center;
  }
  button.menu-toggle:hover {
    transform: rotate(45deg);
  }
  button.menu-toggle[aria-expanded="true"] {
    transform: rotate(70deg);
    margin-left: 40%;
  }
	#content-wrapper {
		display: block;
	}
	main {
		width: 100%;
	}
  .main-navigation.toggled ul ul {
    position: relative;
    width: 100%;
    float: none;
    display: none;
  }
  .main-navigation.toggled ul li:hover > ul {
    display: block;
  }
	#secondary {
		margin-top: 10px;
		width: 100%;
		border-radius: 14px;
		max-width: 100%;
	}
  #primary-menu {
    border: 1px solid #fff;
    margin: 10px 0px 10px 0px;
    border-radius: 14px;
    padding: 1.4rem;
    font-size: 1.1em;
  }
  .main-navigation li {
    margin-bottom: 4px;
  }
  h1.entry-title {
    font-size: 2.4em;
  }
}


/* Posts and pages
--------------------------------------------- */
.sticky {
	display: block;
}

.post,
.page {
	margin: 0 0 1.5em;
}

.updated:not(.published) {
	display: none;
}

.page-content,
.entry-content,
.entry-summary {
	margin: 1.5em 0 0;
}

.page-links {
	clear: both;
	margin: 0 0 1.5em;
}

/* Entries and Archives
--------------------------------------------- */
.entry-footer {
  margin-top: 3rem;
  font-family: 'futurarenner';
}
.entry-footer span {
  margin-right: 5px;
}
article {
  margin-bottom: 40px;
}
h2.list-title {
  font-size: 1.7em;
  margin-bottom: 0rem;
}
.entry-meta {
  font-family: 'futurarenner';
  margin-bottom: 1rem;
}
.nav-links a {
  background: #e0e2e7;
  padding: 0.9rem;
  border-radius: 40px;
  text-decoration: none;
  display: block;
}

.nav-links a:hover {
  background: #e619a1;
  color: #fff;
}

.nav-links .nav-subtitle {
  display: block;
  font-size: 0.9em;
}

.nav-links .nav-title {
  text-decoration: underline;
}

.nav-links .nav-previous {
  max-width: 40%;
  margin-right: 40px;
}
.nav-links .nav-next {
  max-width: 60%;
  margin-left: auto;
}


/* Comments
--------------------------------------------- */
.comment-content a {
	word-wrap: break-word;
}

.bypostauthor {
	display: block;
}

/* Widgets
--------------------------------------------- */
.widget {
	margin: 1rem 0 1rem;
}

.widget select {
	max-width: 100%;
}

.search-field, .wp-block-search__input, .wp-block-search__input:focus {
  color: #000;
}

/* Media
--------------------------------------------- */
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
	border: none;
	margin-bottom: 0;
	margin-top: 0;
	padding: 0;
}

/* Make sure logo link wraps around logo image. */
.custom-logo-link {
	display: inline-block;
}

/* Captions
--------------------------------------------- */
.wp-caption {
	margin-bottom: 1.5em;
	max-width: 100%;
}

.wp-caption img[class*="wp-image-"] {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.wp-caption .wp-caption-text {
	margin: 0.8075em 0;
}

.wp-caption-text {
	text-align: center;
}

/* Galleries
--------------------------------------------- */
.gallery {
	margin-bottom: 1.5em;
	display: grid;
	grid-gap: 1.5em;
}

.gallery-item {
	display: inline-block;
	text-align: center;
	width: 100%;
}

.gallery-columns-2 {
	grid-template-columns: repeat(2, 1fr);
}

.gallery-columns-3 {
	grid-template-columns: repeat(3, 1fr);
}

.gallery-columns-4 {
	grid-template-columns: repeat(4, 1fr);
}

.gallery-columns-5 {
	grid-template-columns: repeat(5, 1fr);
}

.gallery-columns-6 {
	grid-template-columns: repeat(6, 1fr);
}

.gallery-columns-7 {
	grid-template-columns: repeat(7, 1fr);
}

.gallery-columns-8 {
	grid-template-columns: repeat(8, 1fr);
}

.gallery-columns-9 {
	grid-template-columns: repeat(9, 1fr);
}

.gallery-caption {
	display: block;
}

/* 404Page
--------------------------------------------- */
.error404 header, .error404 footer, .error404 #duotone {
  display: none;
}
.error404 {
  background-color: #432e80;
  overflow: hidden;
}
.error404 h1 {
  font-size: 2em;
  margin-top: 50px;
}
.error404 section {
  color: #fff;
}
.error404 .search-submit {
  color: #000;
}

/* Latest Posts
--------------------------------------------- */
.fruitfly-latestposts {
  background-color: #bf691d;
  padding: 10px;
}
.fruitfly-latestposts-header {
  color: #fff;
  margin-bottom: 0px;
  padding: 10px 0px 10px 10px;
  text-transform: uppercase;
  border-bottom: 1px solid #fff;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}
.fruitfly-latestposts-widget {
  padding: 20px 10px 10px 10px !important;
  margin-top: 0px;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

.fruitfly-latestposts-widget li {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  padding: 10px;
}