/*
Theme Name: Sherlockian
Theme URI: http://sherlockian.net
Description: Gravit child theme for Sherlockian.net
Author: Hannah Countryman
Author URI: https://hannahcountryman.com
Template: gravit
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sherlockian
*/


/* =Former Additional CSS
----------------------------------------------- */

/*
Overall
Headings
Body text and links
Lists
Navigation
Homepage
Search Results
Category Pages
Posts

Homepage Template Styles
*/

/*
Overall
*****
*/

article:first-child {
    margin: 20px 0 40px;
}
   

/*
Headings
*****
*/

h1, h2, h3, h4, .site-title, .entry-title{
	font-family:Adamina;
}

h1.site-title a{
	font-family:Adamina;
	font-size:58px;
	font-weight:bold;
	color:#003d00;
	line-height:50px;
}

h1.entry-title, .type-page .entry-title{
	font-family:Adamina;
	color:#003d00;
}

h1.page-title{
	font-family:Adamina;
	color:#707070;
}

.site-branding-mobile h1.site-title a{
	font-family:Adamina;
	font-size:100%;
}

h2{
	color:#4B4A47;
	margin:10px 0px 20px 0px;
}

h2.description{
	line-height:20px;
	margin-bottom:2px;
}

h3{
	font-size:28px;
}

header.entry-header{
	padding-bottom:0px !important;
}

div.fl-row-content-wrap{
	padding-top:20px;
}


/*
Body text and links
*****
*/

p, a, li{
	font-family:Arsenal;
}

a, a:visited{
	color:#006400;
}

.entry-title a, .entry-title a:visited {
    color: #4B4A47;
}

a:hover, .entry-title a:hover{
	color:#5a7684;
	text-decoration:none;
}

h3#william{
	margin-bottom:3px;
}

.site-info a{
	color:#006400;
	text-decoration:underline;
}

.site-info a:hover{
	color:#5a7684;
	text-decoration:none;
}

#primary a:not([href*="sherlockian.net"]){
    margin-right: 21px;
}

#primary a:not([href*="sherlockian.net"]):after{
    position: absolute;
    width: 12px;
    height: 12px;
    margin: 5px;
    content: '';
    background-image: url(img/external-link.svg);
    background-size: contain;
    background-repeat: no-repeat;
}


/*
Lists
*****
*/

ul{
	list-style:disc !important;
	border-bottom:1px solid #E6E6E6 !important;
	margin: 0px 0px 30px 0px;
	padding:0px 0px 40px 22px;
}

.no-line ul{
	border-bottom: 0px !important;
}

ul:last-child{
	border-bottom:0px !important;
}

ul ul{
	padding:.5em 0 0 0;
}

div.onecol ul>li{
	line-height:1.4em;
	padding-bottom:.4em;
}

ul.bullets>li{
	list-style-type: disc;
}

/*
	From when nested lists were a thing.
	If they return, this might.
*/

ul>li>ul>li{
	list-style-type: circle;
	
}

ul>li>ul>li>ul>li{
	list-style-type: square;
} 

ul>li>ul>li>ul>li>ul>li {
	list-style-type: disc;
}



/*
Navigation
*****
*/

ul#menu-navigation{
	border:0 !important;
	margin:0px;
	padding:0px;
}

nav#site-navigation{
	padding:0;
}

ul#menu-navigation a{
	font-family:Arsenal;
	font-weight:normal;
	font-size:1.2em;
	transition:ease-in-out .4s;
	padding: 5px;
	margin:3px;
	color:#4b4a47;
}

ul#menu-navigation a:hover{
	border-bottom:2px solid #003d00;
	transition:ease-in-out .5s;
	color:#4b4a47;
}

.main-navigation .current_page_item a, .main-navigation .current-menu-item a, .main-navigation .current-page-ancestor a {
	border-bottom:2px solid #003d00;
}

#menu-item-94, #menu-item-137{
	top: -1px;
}


/*
Homepage
*****
*/

.widget_search{
	margin-left:0px;
	padding-left:0px;
}

input.search-field{
	width:100% !important;
}


/*
Search Bar
*****
*/

.sherlockian-search{
    border: 1px solid #CCCCCC;
    background: #fff;
    margin: auto;
    display: flex;
    justify-content: space-between;
}

.sherlockian-search input{
    padding: .2em 1em;
    margin: 0;
    border: none;
    width: 100%;
}

.sherlockian-search input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    font-family: Arsenal;
}
.sherlockian-search input::-moz-placeholder { /* Firefox 19+ */
    font-family: Arsenal;
}
.sherlockian-search input:-ms-input-placeholder { /* IE 10+ */
    font-family: Arsenal;
}
.sherlockian-search input:-moz-placeholder { /* Firefox 18- */
    font-family: Arsenal;
}

.sherlockian-search button{
    margin: 0;
    border-radius: 0;
    background: #e6e6e6;
    height: 100%;
    padding: 10px 10px 0px;
}

.sherlockian-search button:hover{
    border: none;
    background: #f5f5f5;
}

.sherlockian-search button:active{
    background: #ccc;
}

.sherlockian-search button img{
    height: 20px;
    max-width: 30px;
}


/*
Search Results
*****
*/

.results header.page-header{
    margin: 40px 0;
    position: sticky;
    position: -webkit-sticky;
    top: 0px;
    z-index: 5;
}

.admin-bar .results header.page-header{
    top: 31px;
}

.results .sherlockian-search{
    width: 100%;
    min-width: 244px;
}

.results header.entry-header{
	padding: 0;
}

.results h1.entry-title{
	text-align:left;
	font-size: 2.5em;
    line-height: 1.3em;
}

.results .results-bar{
    width: 100%;
    background: #f5f5f5;
    padding: 1.5em;
    display: flex;
    justify-content: center;
}

.results .results-container{
    margin: 0 .5em;
    max-width: 1000px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.results .results-bar h1{
    color: #707070;
    font-weight: normal;
    font-size: 2em;
    line-height: 1.2em;
    margin: .5em 0;
}

.results .results-bar h1 span{
    color: #4B4A47;
    margin-right: .5em;
}

.results .results-container div{
    flex-basis: 500px;
    margin: .5em 0;
}

.results article{
	margin: 2em;
    
}

.results div.entry-content{
	padding: 0;
	margin-top: .8em;
}

#main .search-term {
    background:#FFFF00  
}

.navigation a, .navigation a:visited {
    color: #4B4A47;
}

/*--
MOBILE ONLY (<500px)
--*/

@media screen and (max-width: 500px) {
    
    .results .results-bar h1 {
        font-size: 1.4em;
        line-height: 1.4em;
    }
    
}


/*
Category Pages
*****
*/

.taxonomy-description{
    max-width: 860px;
    text-align: center;
    margin: auto;
}


/*
Posts
*****
*/

.post .wp-post-image{
    max-height: 800px;
    width: calc(100% - 4em);
    max-width: 800px;
    margin: 2em 2em 0;
    object-fit: cover;
}

@media screen and (max-width: 783px) {
    .post .wp-post-image{
        margin: 10em 2em 0;
    }
}



/* =Homepage Template Styles
----------------------------------------------- */

.hidden{
    position: absolute;
    left: -10000px;
    height: 1px;
    opacity: 0;
}

/* Homepage Grid and Layout */

#homepage-container{
    max-width: 1000px;
    display: grid;
    grid-template-columns: 3fr 2fr;
    grid-gap: .8em;
    margin: 0 auto;
    padding: 0;
    font-size: 20px;
    line-height: 1.3em;
}

#homepage-container h3{
    margin: 15px 0;
}

#homepage-container h4, #homepage-container h4 a{
    font-family: Adamina, serif;
    font-size: 18px;
    margin: 5px 0 8px;
}

#homepage-container p{
    line-height: 1.4em;
}

#homepage-container a{
    text-decoration: none;
}

#homepage-container a h3:hover, #posts-and-random .spotlight-post .feature-info a:hover{
    color: #006400 !important;
}

#homepage-container #feature button, #homepage-container #posts-and-random button{
    background: #fff;
    transition: ease 500ms;
    margin-top: 5px;
    padding: 0 40px 10px 20px;
    color: #003d00 !important;
}

#homepage-container #feature button:after, #homepage-container #posts-and-random button:after{
    position: absolute;
    width: 18px;
    height: 32px;
    margin: 0px 10px;
    content: '';
    background-image: url(img/button-arrow.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position-y: center;
}

#homepage-container #feature button:hover,
#homepage-container #posts-and-random button:hover{
    box-shadow: 0 2px 3px #0000001f;
    transform: translateY(-3px);
    transition: ease 500ms;
    border: none;
}

/* Title */
#title{
    grid-column: 1 / 3;
    grid-row: 1;
    
    margin: 40px 0 20px;
}

/* Intro Paragraph */

.intro{
    text-align: center;
    
    grid-column: 1 / 3;
    grid-row: 6;
}

.intro .entry-content{
    padding-top: 40px;
}

/* Search Bar */

.search-bar{
    max-width: 1000px;
    width: 100%;
    background: #f5f5f5;
    padding: 1em;
    text-align: center;
    margin: 1em 0;
    
    grid-column: 1 / 3;
    grid-row: 3;
}

#homepage-container .sherlockian-search{
    width: calc(100% - 10em);
    min-width: 244px;
}

/* Featured Post */

#homepage-container #feature{
    width: 100%;
    position: relative;
    display: flex;
    
    grid-column: 1 / 2;
    grid-row: 2;
    
    background-size: cover;
    background-repeat: no-repeat;
}

#homepage-container #feature .feature-info{
    position: absolute;
    height: 60%;
    width: 100%
    overflow: hidden;
    bottom: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,1));
    padding: 2em 2em;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

#homepage-container #feature .feature-info h3{
    font-size: 32px;
}

#homepage-container #feature .feature-info h3 a, #homepage-container #feature .feature-info p{
    color: #fff;
    font-weight: 400;
    margin-bottom: .5em;
}

#homepage-container #feature .feature-info a{
    text-align: right;
}

/* Countdown / Stories */

#homepage-container #countdown-module{
    width: 100%;
    background: #F5F5F5;
    padding: .8em;
    
    grid-column: 2 / 3;
    grid-row: 2;
}

#homepage-container #countdown-module .countdown{
    margin-bottom: 35px;
}

#homepage-container #countdown-module .countdown p{
    margin-bottom: 0;
}

#homepage-container #countdown-module .countdown a{
    color: #006400;
    text-decoration: underline;
}

#homepage-container #countdown-module .countdown a:visited {
    color: #003000;
}

#homepage-container #countdown-module .countdown a:hover{
	color:#4B4A47;
	text-decoration:none;
}

#homepage-container #countdown-module .countdown tr th{
    vertical-align: bottom;
}

#homepage-container #countdown-module .countdown tr td{
    vertical-align: middle;
}

#homepage-container #countdown-module .countdown tr td:nth-child(1), #homepage-container #countdown-module .countdown tr th:nth-child(1){
    padding-left: 0;
    padding-right: 10px;
}

#homepage-container #countdown-module .countdown tr td:nth-child(2), #homepage-container #countdown-module .countdown tr th:nth-child(2){
    text-align: right;
    padding-right: 0;
    width: 50%;
}

#homepage-container #countdown-module .countdown tr td:nth-child(2){
    padding-bottom: 25px;
}

#homepage-container #countdown-module .countdown tr td:nth-child(2) > span {
    display: inline-block;
    width: 38px;
}

#homepage-container #countdown-module .countdown .countdown-number {
    background: #fff;
    text-align: center;
    margin: 2px;
    border: 1px solid #d0d0d0;
    border-radius: 3px;
    padding: 1px 3px;
}

#homepage-container #countdown-module .page-link img{
    max-height: 200px;
    width: 100%;
    object-fit: cover;
}

/* Random Page / Spotlight Content Posts */

#homepage-container #posts-and-random{
    width: 100%;
    background: #f5f5f5;
    padding: 1em .8em 2em 2em;
    
    grid-column: 1 / 3;
    grid-row: 4;
    
    display: grid;
    grid-template-columns: 2fr 3fr;
    grid-template-rows: auto auto;
    grid-gap: .8em;
}

#homepage-container #posts-and-random .content-spotlight{
    grid-column: 1;
    grid-row: 1;
    padding-right: 1.5em;
}

#homepage-container #posts-and-random .content-spotlight h3:first-child{
    margin-top: 0;
}

#homepage-container #posts-and-random .content-spotlight p{
    margin: 0;
}

#homepage-container #posts-and-random .spotlight-posts{
    grid-column: 2 / 3;
    grid-row: 1 / 3;
    
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: .9em;
}

#homepage-container #posts-and-random .spotlight-post img{
    height: 175px;
    width: 100%;
    object-fit: cover;
}

#homepage-container #posts-and-random .spotlight-post .feature-info a{
    color: #4B4A47;
}

#homepage-container #posts-and-random .spotlight-post .feature-info > a{
    padding: 6px 0;
    font-size: 14px;
    border-top: 1px solid #ccc;
}

#homepage-container #posts-and-random .random-page{
    grid-column: 1 / 3;
    grid-row: 2;
}


/* =Homepage Styles
----------------------------------------------- */
/*--
TABLET / MOBILE (<768px)
--*/

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

/* Homepage Grid and Layout */
    
    #homepage-container{
        grid-template-columns: 1fr;
        grid-column-gap: 0;
        grid-row-gap: 2em;
    }

/* Intro Paragraph (Actually Bottom of Page) */
    #homepage-container .intro{
        padding: 0 2em;
    }

/* Search Bar */
    
    #homepage-container .search-bar{
        width: 100%;
        background: #f5f5f5;
        padding: 1em 0.5em;
        text-align: center;
        margin: 1em 0 1em;

        grid-column: 1 / 3;
        grid-row: 4;
    }

    #homepage-container .search-bar form{
        border: 1px solid #CCCCCC;
        background: #fff;
        width: 100%;
        max-width: 700px;
        min-width: 244px;
        margin: auto;
        display: flex;
        justify-content: space-between;
    }

    #homepage-container .search-bar input{
        padding: .2em 1em;
        margin: 0;
        border: none;
        width: 100%;
    }

/* Featured Post */
    
    #homepage-container #feature{
        grid-column: auto;
        grid-row: 2;
        min-height: 600px;
    }


/* Countdown / Stories */

    #homepage-container #countdown-module{
        padding: 2em;
        
        grid-column: auto;
        grid-row: 3;
    }
    
    #homepage-container #countdown-module .countdown tr td{
        padding: 7px 0;
    }
    
    #homepage-container #countdown-module .page-link img {
        max-height: 350px;
    }
    
/* Random Page / Spotlight Content Posts */

    #homepage-container #posts-and-random{
        margin: 0;
        padding: 0;
        
        grid-column: auto;
        grid-row: 5;

        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        grid-gap: .8em;
    }

    #homepage-container #posts-and-random .content-spotlight{
        margin: 2em;
        padding-right: 1.5em;
        
        grid-column: auto;
        grid-row: 1;
    }

    #homepage-container #posts-and-random .spotlight-posts{
        margin: 0 2em;
        
        grid-column: auto;
        grid-row: 2;
    }
    
    #homepage-container #posts-and-random .random-page{
        margin: 1em 2em 3em;
        
        grid-column: auto;
        grid-row: 3;
    }
    
}

/* =Homepage Styles
----------------------------------------------- */
/*--
MOBILE ONLY (<500px)
--*/

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

    #homepage-container #posts-and-random .spotlight-posts{
        margin: 0;
        
        grid-column: auto;
        grid-row: 2;

        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        min-width: 100%;
        overflow-x: scroll;
    }
    
    #homepage-container #posts-and-random .spotlight-posts .spotlight-post{
        min-width: 175px;
        padding: 0 5px;
    }
    
    #homepage-container #posts-and-random .spotlight-posts::-webkit-scrollbar {
        display: none;
    }

}