/*
 * @title: Blog Styles
 * @desc: This stylesheet includes custom styles for the blog listing & blog single pages.
 * @targeting: index.php, single.php, content-post.php, content-single-post.php
 * @author: Jared Rice
 * @date: 5.14.20
 */


/*
 * Global Styles
 */
#blog-index-wrapper .row, 
#blog-single-wrapper .row {
    margin-left: 0;
    margin-right: 0;
}

#blog-index-wrapper .entry-title a:hover, 
#blog-index-navigation .page-item:hover
#blog-index-navigation a:hover,
#blog-index-navigation span:hover {
    color :#4788c7!important;
    background: none!important;
}

.blog-post-image-link {
    transition: opacity 0.15s ease-in-out;
    opacity: 1;
}

.blog-post-image-link:hover {
    opacity: 0.5;
}


/*
 * Blog Wrapper Styles
 *
 * @note #blog-post-nav-wrapper is the navigation featured on the single pages
 * @explanation That id is featured here because it uses the same exact styling
 */
#blog-index-wrapper main,
#blog-post-nav-wrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    justify-content: space-between;
}

#blog-index-wrapper .bufl-post {
    width: auto;
    display: flex;
    flex-direction: column;
    width: 47%;
    min-width: 47%;
    flex: 0 0 47%;
    padding: 0;
    margin-bottom: 3rem;
    border: 2px solid #979797;
}

#blog-index-wrapper img {
    min-width:100%;
    width: 100%;
    object-fit: cover;
    object-position: center top;
	height: 200px;
}

#blog-index-wrapper .blog-meta {
    padding: 1.5rem 1.5rem 3.5rem 1.5rem;
    border: none;
}

#blog-index-wrapper .entry-header {
    text-align: left;
    width: 100%;
    margin-bottom: 0.75rem;
}

#blog-index-wrapper .entry-title {
    margin: 0;
}

#blog-index-wrapper .entry-title a {
    color: #000;
    font-size: 1.25rem;
    font-weight: 500;
}

#blog-index-wrapper .read-more {
    padding-top: 1rem;
}


/*
 * Blog Index Pagination Styles
 */
 #blog-index-navigation .pagination { 
    align-items: center;
    justify-content: space-between;
 }

 #blog-index-navigation .page-item-direction span {
    font-family: Rubik, sans-serif;
    font-size: 1.15rem!important;
    font-family: Rubik, sans-serif!important;
    font-weight: 500!important;
    border: none;
    color: #000;
 }

   #blog-index-navigation .page-item-prev { 
    margin-right: auto;
 }

  #blog-index-navigation .page-item-next { 
    margin-left: auto;
 }


/*
 * Blog Single Styles
 */
 .single-post.banner-inner-plain .breadcrumbs {
    padding: 25px 0 50px;
} 

.blog-header-banner {
    max-height: 600px;
    overflow: hidden;
    width: 100%;
}

.blog-header-banner img {
    min-width:100%;
    width: 100%;
    object-fit: cover;
    object-position: center top;
}

#blog-single-wrapper {
   padding: 75px 0;
}

#blog-single-wrapper .banner-inner-plain .page-desc {
    padding-bottom: 0;
    padding-top: 10px;
}

#blog-single-wrapper .additional-html {
    font-size: 1.15rem!important;
    margin-bottom: 20px!important;
    font-family: Rubik, sans-serif!important;
    font-weight: 500!important;
    line-height: 1.2!important;
    font-style: italic!important;
}

#blog-single-wrapper .entry-content h5 {
    font-size: 1rem!important;
    margin-bottom: 5px!important;
    font-weight: 500!important;
    line-height: 1.2!important;
    color: #4788c7!important;
}

#blog-single-wrapper .entry-content * {
    max-width: 700px; 
}

#blog-single-wrapper .entry-content figcaption {
    font-size: 0.9rem;
    padding: 0.5rem 0; 
}

#blog-single-wrapper .entry-meta {
    margin-bottom: 75px; 
}

.entry-meta,
.blog-post-nav__title {
   font-family: Rubik, sans-serif;
}

.entry-meta {
   font-style: italic;
}



/*
 * Responsive: Blog Single Styles
 */
@media (max-width: 768px) {
  #blog-single-wrapper .entry-content figure {
    display: block;
    width: 100% !important;
    margin: 0 auto;
    clear: both;
    text-align: center;
    margin-bottom: 1rem;
    float: none;
  }
}

/* 
 * Responsive: Blog Wrapper Styles
 */
@media (max-width: 675px) {
  #blog-index-wrapper main,
  #blog-post-nav-wrapper {
    display: block;
  }

    #blog-index-wrapper .bufl-post {
    display: block;
    width: 100%;
  }
}