/*
Theme Name: 	Zesty Wordpress Starter Theme
Description: 	A Zesty Theme
Version: 		demo-single e3d1e6d3a8c44c5b8e9d4248e7c7487a74b37e03
Author: 		Zesty
Author URI: 	https://www.simplyzesty.com
*/




body {
    /*background: #f7f7f7;*/
}

/* Main Nav */




/* Fix WP Alignments */

figure.wp-block-embed.alignright,
figure.wp-block-image.alignright,
.wp-block-embed.alignright,
.wp-block-image.alignright {
    /*rtl:ignore*/
    float: right !important;
    /*rtl:ignore*/
    margin: 0.5em 0 0.5em 1em  !important;
}
figure.wp-block-embed.alignleft,
figure.wp-block-image.alignleft,
.wp-block-embed.alignleft,
.wp-block-image.alignleft {
    /*rtl:ignore*/
    float: left;
    /*rtl:ignore*/
    margin: 0.5em 0 0.5em 1em !important;
}

figure.wp-block-embed.aligncenter,
figure.wp-block-image.aligncenter,
.wp-block-embed.aligncenter,
.wp-block-image.aligncenter{
    margin-left: auto;
    margin-right:auto;
}



/** EDIT THIS **/

/* Blog Posts can be in  .posts inside .blog or .search */
/* These styles turn results from lists into cards */
body.search .posts span.img ,
body.blog .posts span.img {
    height: 180px;
    background: #797979;
    background-size:cover;
    background-position:center;
    position: relative;
    display: block;
}

body.search .posts span.img div.text ,
body.blog .posts span.img div.text {
    position: absolute;
    bottom: 0px;
    padding: 8px;
    background: #ffffff;
    width: 100%;
}

/** Handle Sticky Post in blog listings */
body.blog .sticky {
    width: 100% !important;
}
body.blog .posts .sticky span.img {
    min-height: 360px; !important;
    height: 360px;
}


/** DELETE BELOW ME ***/
ul.nav-main {
    display: inline-block;
    width: 100%;
    padding: 0.5rem;
    float: right;
    text-align: right;
    font-size: 1.2rem;
}
ul.nav-drop {
    display: none;
}
li.menu-item-has-children:hover {
    position: relative;
}
li.menu-item-has-children:hover ul.nav-drop {
    position: absolute;
    top: 18px;
    left: -50px;
    display: block;
    z-index:999;
    background: #00000099;
    min-width: 15rem;
}
li.menu-item-has-children:hover ul.nav-drop li {
    display: block;
    padding: 0.25rem 1rem 0.25rem 1rem;
    font-size: 1rem;
}

li.menu-item-has-children:hover ul.nav-drop li:after {
    content: ""
}
li.menu-item-has-children:hover ul.nav-drop li:hover {
    background-color:  #293221;
}



.hero {
    position: relative;
    z-index: auto;
    overflow: hidden;
    min-height: 250px;
    color: snow;
    background: rgb(7,115,249);
    background: -moz-linear-gradient(319deg, rgba(7,115,249,1) 12%, rgba(129,171,189,1) 27%, rgba(13,96,128,1) 100%);
    background: -webkit-linear-gradient(319deg, rgba(7,115,249,1) 12%, rgba(129,171,189,1) 27%, rgba(13,96,128,1) 100%);
    background: linear-gradient(319deg, rgba(7,115,249,1) 12%, rgba(129,171,189,1) 27%, rgba(13,96,128,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#0773f9",endColorstr="#0d6080",GradientType=1);

}

.hero div.cell {
    position: relative;
}
.hero h1 {
    text-shadow: #0a0a0a 0 0 2px;
}

.heroimg {
    object-fit: cover;
    width:100%;
    max-height:250px;
    position:absolute;
    z-index:0;
    top: 0;
    left:0;
    object-position: 0px -320px;
}

ul.wp-block-post-template li {
    border: solid 1px #ffffff;
    border-radius: 9px;
    transition-delay: 0.150s;
    transition-duration: 0.250s;
    background: #ffffff
}

ul.wp-block-post-template li:hover {
    box-shadow: 0px 0px 6px #32323288;
}

ul.wp-block-post-template li:hover figure img {
    scale: 105%;
}

ul.wp-block-post-template li figure{
    border-top-left-radius: 9px;
    border-top-right-radius: 9px;
    overflow: hidden;
}

ul.wp-block-post-template li figure img {
    border-top-left-radius: 9px;
    border-top-right-radius: 9px;
    transition-delay: 0.0s;
    transition-duration: 0.350s;
}

ul.wp-block-post-template li div.wp-block-post-date{
    padding:0.25rem 0.8rem;
    font-size: 0.75rem;
    color: #898989;
}

ul.wp-block-post-template li h1.wp-block-post-title,
ul.wp-block-post-template li h2.wp-block-post-title,
ul.wp-block-post-template li h3.wp-block-post-title,
ul.wp-block-post-template li h4.wp-block-post-title
ul.wp-block-post-template li h5.wp-block-post-title
ul.wp-block-post-template li h6.wp-block-post-title{
    padding:0.25rem 0.8rem;
    font-size:1rem;
}

ul.wp-block-post-template li div.wp-block-post-excerpt p.wp-block-post-excerpt__excerpt{
    font-size:0.85rem;
    padding:0.25rem 0.8rem;
}




/* Block and Pull quotes styles */

.wp-block-quote {
    position: relative;
    font-style: italic;
    font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
    border-left: 0px;
    background: #ffffff;
    padding:8px;
    border-radius: 8px;
}

.wp-block-quote:before {
    font-family: cursive;
    content: open-quote;
    position: absolute;
    top:-50px;
    left:-4rem;
    font-size: 8rem;
}


/*
Gutenberg Content alignment widths
The width figures here need to correspond to whats in  theme.json

the outer container ID or class MUST be one that's ine th hardcoded twig for ALL templates
Otherwise, you need to set rules for each different page templates outer container.

That might be <div id="maincontent">, <div class="wysiwyg">, <article> but it needs to be consistent.

YOU MUST CHANGE `#maincontent  article` TO SUIT YOUR THEME MARKUP
*/

#maincontent  article > :not(article) {
    max-width: 960px;
    margin-left: auto !important;
    margin-right: auto !important;
}

body #maincontent article > .alignwide {
    max-width: 1200px;
}
body #maincontent article > .alignfull {
    max-width: none;
}

#maincontent  article> .alignleft {
    float: left;
    margin-right: 2em;
}

#maincontent article > .alignright {
    float: right;
    margin-right: 2em;
}

/** This rule removes a max-width (from above) for any of our custom ACF blocks that start with #block_ **/
body #maincontent article > [id^="block_"]  {
    max-width: none;
}