/*
Theme Name: WTF (Radiate Child)
Template: radiate
Theme URI:
Author: Supervox Agency
Author URI: https://supervoxagency.com/
Description: A child of the Radiate theme.
Version: 1.0
Text Domain: supervox
Tags: two-columns, right-sidebar, custom-header, flexible-header, custom-background, custom-menu, custom-colors, post-formats, sticky-post, threaded-comments, translation-ready, featured-images, rtl-language-support, theme-options, blog, e-commerce


*/


.wp-block-query {
  ul{
    padding-left: 0;
    li, .home-post-listing{
      list-style: none;
      padding: 0;
    }
  }
}
/* Set responsive image/text columns of posts lists. */
.wp-block-query ul li, /* Home Page */
.wp-block-query ul .home-post-listing, /* Home Page */
.content-area .site-main{ /* post archives */
  container-type: inline-size;
  @container (width < 700px) {
    .wp-block-columns{
      flex-direction:column;
    }
  }
}
.content-area .site-main h3 {
  /* post archives gap below headline*/
}

.content-area .site-main article{
  padding-left:0 !important;
  padding-right:0 !important;
  padding:0 !important;
  &:first-of-type{
    padding-top:3rem !important;
  }
  .wp-block-post-excerpt__more-text{
    margin-bottom:0;
  }
}



/* show the header logo after the hero has scrolled out of view */
.header-wrap{
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom:none;
  -webkit-box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.2);
  box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.2);
  &:after{display:none;}
}
.site-branding{
  margin-right:0;
}
.site-title {
  padding-right:0;
  a{
    opacity:0;
    transition:opacity 0.5s linear;
    display:flex;
    flex-direction:row;
    align-items:center;
    column-gap:1rem;
  }
  .mark{
    width:40px;
  }
  .logo{
    width:180px;
    display: flex;
    flex-direction: row;
    align-items: center;
    column-gap: 1rem;
    @media (max-width:990px){
      display:none;
    }
  }

}
body.show-logo .site-title a{
  opacity:1;
}

#masthead{
  margin-bottom:65px !important;
}


/** Remove the page title from the home page */
body.home .entry-header{
  display:none;
}


/* Sidebar widgets */
.widget-area{
  .widget_custom_html #mc_embed_signup > form{
    margin:0;
  }
}
/* Sidebar widgets mobile */
@media screen and (max-width: 768px) {
  .widget-area{
    .widget{
      background-color:#dddddd;
      padding:1.5rem;
      border-radius:0.5rem;
      margin-bottom:2rem;
    }
  }
}



/* move sidebar to top instead of the bottom */
@media screen and (max-width: 767px) {
  .site-content{
    > .inner-wrap{
      display:flex;
      flex-direction:column-reverse;
    }
  }

  /* Style the "Recent Posts" widget */

  #secondary .widget_recent_entries{
    border:none;
    position:relative;
    h3{
      border:1px solid grey;
      margin-bottom:0;
      padding:0.65rem;
      border-radius:1rem;
      cursor:pointer;
      background-color:#FFFFFF;
      font-size:2rem;
      &::after {
        content: "\f347";
        font-family: 'dashicons'; /* Important for displaying the icon font */
        margin-right: 5px;
        font-size: 20px;
        float:right;
    }
    }
    ul{
      outline-offset: -1px;
      outline:1px solid gray;
      height:0;
      transition: height 0.33s ease;
      overflow: hidden;
      position: absolute;
      background-color: #FFFFFFee;
      width: calc(100% - 3rem);
      max-height: 80vh;
      overflow-y: scroll;
      li {
        margin:0;
        a{
          display:block;
          padding:0.5rem 1rem;
          &:hover{
            color:#FFFFFF;
            background-color:red;
          }
        }
      }
    }
    &.open {
      h3{
        &::after {
          content: "\f343";
        }
      }
      ul{
        height: 400px;
      }
    }
  }


  /* Style the "Sign up a friend" widget */
  #secondary #mc_embed_shell{
    h1{
      font-size:2rem;
    }
    .visible-fields{
      display:flex;
      flex-direction:row;
      align-items:center;
      gap:1rem;
      .mc-field-group{
        padding:0;
        display:flex;
        flex-direction:row;
        align-items:center;
        gap:1rem;
        label{}
        input{}
        div.mce_inline_error{
          position: absolute;
          top: 100%;
          left: 6rem;
        }
      }
      .submit-btn{
        input{
          margin:0;
        }
      }
    }
    @media screen and (max-width: 420px) {
      .visible-fields{
        flex-direction:column;
      }
    }

  }
}

@media screen and (min-width: 768px) {
  #secondary .widget_recent_entries{
  max-height:80vh;
  overflow-y:auto;
  }
}

/* WTF Phil Roberts Hero */
.hero{
  .hero-grid{
    display:flex;
    flex-direction:row;
    width:100%;
    img{
      display:block;
      width:20%;
      max-width:100%;
    }
    @media (max-width: 900px) {
      img{ width:25%;}
      .img1{
        display:none;
      }
    }
    @media (max-width: 700px) {
      img{ width:33.33%;}
      .img2{
        display:none;
      }
    }
    @media (max-width: 350px) {
      img{ width:50%;}
      .img4{
        display:none;
      }
    }
  }
  .hero-text{
    /* display:flex; */
    /* flex-direction:column; */
    text-align:center;
    margin-top:2rem;
    img{
      display:inline-block;
    }
    .text1{
      max-width:100%
    }
    .text2{
      max-width:90%
    }

    @media (min-width: 700px) {
      img{
        margin-left:1rem;
        margin-right:1rem;
      }

    }
  }
}


/* a little space adjustments in single post pages. */
body.single-post {
  .entry-header{
    margin-bottom:4rem;
  }
  .wp-block-soliloquy-soliloquywp{
    margin-block:4rem;
  }
}




/* Blog Page Styles */
.wp-block-columns.is-not-stacked-on-mobile {
  flex-wrap: nowrap !important;
}


.wp-block-columns {
  align-items: normal!important
}

/* Move the soliloquy caption from overlapping to below the image. */
.soliloquy-viewport{
  height:auto !important;
}
.soliloquy-caption-bottom{
  position:relative !important;
}