/*
Theme Name: ClickHole
Template: mission-news
Author: Sumerian (reconstructed)
Description: ClickHole child theme for Mission News, reconstructed from archived CSS.
Version: 1.0
*/
 
/* =Theme customization starts here
-------------------------------------------------------------- */
.max-width {
  max-width: 100%;
}

a:link, a:visited, a {
  color: #F26722;
}

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

/*********************************************************************************************/
/***************************************CUSTOMIZER********************************************/
/*********************************************************************************************/

 @media screen and (min-width: 800px) {
    .title-container {
      margin: 12px auto;
      text-align: left;
      max-width: 1209px;
    }

    .custom-logo {
      max-width: 300px;
    }

    .top-nav {
      max-width: 1209px;
      margin: 0 auto 6px;
    }
    .menu-primary {
      margin: 0 auto;
      max-width: 1220px;
      padding: 0;
    }

    .menu-primary-container {
      background-color: #f6f6f6;
      border: none;
      text-align: left;
    }

    .is-sticky .scroll-container {
      margin: 0 auto;
      max-width: 1209px;
    }
    .sticky-wrapper {
      min-height: 180px;
    }

  }
  @media screen and (min-width: 1280px) {
    .menu-primary-container {
      margin: 0 -9.556%;
    }
  }
  @media screen and (max-width: 50em) {
    .custom-logo {
      width: 85%;
      max-width: 200px;
    }
  }
  
/*** Menu ***/
  header, .is-sticky .menu-primary-container, .is-sticky #site-header {
    font-family: 'Source Sans Pro', sans-serif;
  }
  .is-sticky .top-nav, .is-sticky .tagline {
    display: none;
  }

  .menu-unset ul a:after {
    content:'';
    display: block;
    height: 2px;
    width: 0;
    bottom: 0;
    left: 0;
    /* background: #fff; */
    transition: width 200ms ease-in-out;
  }
  
  .menu-primary-items a:link, .menu-primary-items a:visited, .menu-unset ul a:link, .menu-unset ul a:visited {
    font-weight: 600;
    letter-spacing: 0.75px;
    position: relative;
    text-transform: uppercase;
    transition: color 200ms ease-in-out;
  }
  /* .menu-unset ul a:hover:after {
    width: 100%;
  } */
  .menu-primary-items li.current-menu-item > a, 
  .menu-primary-items li.current-menu-ancestor > a, 
  .menu-unset ul li.current-menu-item > a, 
  .menu-unset ul li.current-menu-ancestor > a {
      color: #33C5F3;
      background: none;
  }

  .menu-primary-items a:hover {
    color: #33C5F3;
    opacity: 0.7;
  }
  @media screen and (max-width: 799px) {
      .menu-primary-items li.current-menu-item > a, .menu-primary-items li.current-menu-ancestor > a, .menu-unset ul li.current-menu-item > a, .menu-unset ul li.current-menu-ancestor > a {
          color: white;
      }
  }
  
  .menu-primary-container {
    border-color: #ccc;
    border-top-width: 1px;
    border-bottom: none;
    width: 100% !important;
  }
  #site-header .custom-logo {
    max-height: 53px !important;
  }
  
  .is-sticky 
   {
    -moz-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
  }
  .is-sticky .site-header {
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.3) !important;
    left: 0;
    width: 100%;
    max-width: none !important;
    padding-left: 14%;
    padding-right: 14%;
  }
  .is-sticky .title-container {
    display: inline-block;
    margin-bottom: 8px;
    float: left;
    margin: 0;
  }
  .sticky-header-shrink .is-sticky #site-header .custom-logo {
    max-height: 35px !important;
  }
  .is-sticky .menu-primary-container {
    /* background-color: transparent !important; */
    box-shadow: none !important;
    width: auto !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0;
    top: 0 !important;
  }
  .is-sticky .menu-primary {
    padding: 0 2.7%;
    margin: 0;
  }
  @media screen and (min-width: 50em) {
    .is-sticky .menu-primary-items a, .is-sticky .menu-unset ul a {
      padding-top: 6px;
    }
  }
  .toggle-navigation {
    z-index: 99;
    border-radius: 0;
  }

  .is-sticky .menu-primary-container::after, .is-sticky .menu-primary-container::before {
    display: none;
  }
  
  .toggle-navigation, .search-toggle {
    background: #fff;
    border: none;
  }
  .social-media-icons li a {
    border: none;
  }
  .social-media-icons li i {
    font-size: 16px;
  }
  @media screen and (max-width: 799px) {
    .search-toggle i, .social-media-icons li i {
      font-size: 20px;
      line-height: 20px;
    }
  }





  /* Blog Layout */
  .blog #loop-container .post .featured-image,
    .archive #loop-container .post .featured-image,
    .more-from-category .featured-image {
      padding-bottom: 0;
      height: auto;
    }
    .blog #loop-container .post .featured-image .wp-post-image,
    .archive #loop-container .post .featured-image .wp-post-image,
    .more-from-category .featured-image .wp-post-image {
      position: static;
    }
  @media screen and (min-width: 800px) {
    .content-container {
      margin: 0 auto;
      max-width: 1280px;
    }
    .layout-double:not(.bbpress) .double {
      padding: 1.75em 0;
    }
    .layout-double:not(.bbpress) .double:nth-of-type(2n+1) {
      padding-left: 1.75em;
    }
    .layout-double:not(.bbpress) .double:nth-of-type(2n) {
      padding-right: 1.75em;
    }
    .layout-double .double .featured-image, 
    .layout-rows .rows .featured-image, 
    .layout-rows-excerpt .rows-excerpt .featured-image, 
    .widget_ct_mission_news_post_list .style-2 .featured-image {
      padding-bottom: 65%;
    }
    #sidebar-right {
      margin-right: 0;
      min-width: 300px !important;
      padding-left: 0;
    }
  }
  @media screen and (max-width: 1200px) {
    #sidebar-right {
      float: left;
      margin-left: 2%;
      padding-left: 18px;
    }
    #main{
      padding-left: 0;
      padding-right: 0;
      width: 35%;
    }
    .content-container::after {
      right: 37.5%;
    }
  }
  @media screen and (min-width: 600px) {
  
    /* .home .entry:first-child .featured-image {
      left: 0;
      width: 30%;
    } */
    .home .entry:first-child .post, 
    .home.layout-no-sidebar-wide .entry:first-child .post
     {
        left: 0;
        text-align: left;
        width: calc(70% - 17px);
    }
  }
  @media screen and (max-width: 599px) {
    .home .entry .featured-image {
      width: 100%;
      display: block;
      margin-bottom: 18px;
    }
    .home .entry .post-
    , .home.layout-no-sidebar-wide .entry .post-
     {
      width: 100%;
    }
  }
  
  .home .entry:first-child .post-title, .home.layout-no-sidebar-wide .entry:first-child .post-title {
      /* font-size: 1.3125em; */
      font-size: 24px;
      line-height: 1.333;
  }
  .post-title {
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: bold;
  }
  .post-byline-categories {
    margin: 0 0 8px;
    color: #aaa;
  }
  .post-byline-categories a {
    font-size: 12px;
    text-decoration: none;
    text-transform: uppercase;
  }
  .post-byline-categories a:hover {
    text-decoration: underline;
  }
  .pagination {
    border: none;
  }

/* Widget Styles */
.layout-container .sidebar .widget {
  width: 100%;
}
.sidebar .widget-title,
.sponsored_post .widget-title,
.widget-area .widget-title {
    color: #33C5F3;
    position: relative;
    text-transform: uppercase;
    font-family: 'Source Sans Pro' !important;
}
.sidebar .widget-title:before,
.widget-area .widget-title:before {
    -webkit-transform: skew(-15deg,0deg);
    -moz-transform: skew(-15deg,0deg);
    -o-transform: skew(-15deg,0deg);
    -ms-transform: skew(-15deg,0deg);
    transform: skew(-15deg,0deg);
    background:
    #33C5F3;
    height: 75%;
    position: absolute;
    content: "";
    width: 98%;
    top: calc(50% - 35.5%);
}
.sidebar .widget-title span,
.sponsored_post .widget-title span,
.widget-area .widget-title span {
  font-weight: bold;
  position: relative;
  z-index: 1;
}
.sidebar .widget-title span:before,
.widget-area .widget-title span:before {
    -webkit-transform: skew(-15deg,0deg);
    -moz-transform: skew(-15deg,0deg);
    -o-transform: skew(-15deg,0deg);
    -ms-transform: skew(-15deg,0deg);
    transform: skew(-15deg,0deg);
    background:
    #fff;
    content: "";
    height: 25px;
    width: 120%;
    min-width: 40px;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: -4px;
    z-index: -1;
  }

  .toplytics-list {
    list-style: none;
    margin: 0;
  }
  .toplytics-list-item {
    font-size: .875em;
    line-height: 1.286;
    margin-bottom: 0.75em;
  }
  .toplytics-list .toplytics-list-item a {
    color: #000;
    font-weight: 600;
    margin-bottom: 6px;
    text-decoration: none;
    font-family: 'Source Sans Pro', sans-serif;
  }

  /* Sidebar Widget Content layout */
  .sidebar .style-2 .post-item .top-inner,
  .widget-area .style-2 .post-item .top-inner {
    display: flex;
    flex-direction: column;
  }

  .sidebar .style-2 .post-item .top-inner .title, 
  .sidebar .style-2 .post-item .top-inner .post-byline,
  .widget-area .style-2 .post-item .top-inner .title, 
  .widget-area .style-2 .post-item .top-inner .post-byline {
    order: 2;
    font-family: 'Source Sans Pro', sans-serif;
  }

  .sidebar .style-2 .post-item .top-inner .post-categories li,
  .widget-area .style-2 .post-item .top-inner .post-categories li,
  .sidebar .style-2 .post-item .top-inner .post-byline,
  .widget-area .style-2 .post-item .top-inner .post-byline {
    margin: 0;
    font-size: 12px;
    font-style: normal;
    font-weight: normal;
    text-decoration: none;
    text-transform: uppercase;
  }

  .sidebar .style-2 .post-item .top-inner .post-categories li  a,
  .widget-area .style-2 .post-item .top-inner .post-categories li  a {
    text-decoration: none;
  }

  .sidebar .title,
  .sidebar .wpp-post-title {
    font-weight: 600;
  }

  .sidebar .post-byline,
  .widget-area .style-2 .post-item .top-inner .post-byline,
  .sidebar .wpp-meta {
    color: #666;
    font-weight: 400;
    line-height: 1.8;
    font-family: 'source sans pro',sans-serif;
  }
  .sidebar .wpp-post-title {
    font-family: 'source sans pro',sans-serif;
    text-decoration: none;
    color: #000;
    font-size: 0.875em;
    line-height: 1.286;
    font-weight: 600;
    text-decoration: none;
    display: block;
  }

  /* @media screen and (min-width: 1100px) {
    .sidebar .widget_ct_mission_news_post_list ul .featured-image {
      top: 28px;
    }
  } */
  /* END Sidebar Widget Content layout */

  /*** After posts widget Styles***/
  #after-archive-posts .widget {
    margin-top: 45px;
  }
  #after-archive-posts .title {
    font-weight: 600;
    margin: 4px 0;
  }

  @media screen and (min-width: 37.5em) {
    #after-archive-posts .title {
      font-size: 1.125em;
      line-height: 1.333;
    }
  }

  @media screen and (min-width: 50em) {
    #after-archive-posts .title {
      font-size: 1.3125em;
      line-height: 1.143;
      font-weight: 700;
    }
  }

  @media screen and (min-width: 50em) {
    #after-archive-posts .post-item .featured-image {
      width: 30%;
      margin: 0 24px 16px 0;
      padding-bottom: 17.5%;
    }
  }

  /*** END After posts widget Styles***/


  /*** Archive / Category Page Styles ***/
  .category .content-container::before, .category .content-container::after { 
    top: 111px;
  }
  .category-resistancehole .content-container::before, .tag-resistance .content-container::before, 
  .category-resistancehole .content-container::after, .tag-resistance .content-container::after,
  .category-patriothole .content-container::before, .tag-patriothole .content-container::before, 
  .category-patriothole .content-container::after, .tag-patriothole .content-container::after { 
    top: 161px;
  }

  .layout-right-sidebar-wide .archive-header {
    border: none;
    margin: 0;
    padding: 0;
    width: 100%;
  }

  @media screen and (max-width: 799px) {
    .layout-right-sidebar-wide .archive-header {
      display: table-header-group;
    }
  }

  .archive-header h1 {
    font-size: 3.75em;
    line-height: 1.357;
    text-transform: uppercase;
    margin: 3rem 0;
  }

  .archive-header .category-image {
    max-height: 60px;
    margin: 3rem 0;
  }

  @media screen and (max-width: 37.5em) {
    .archive-header h1 {
      font-size: 2.25em;
      margin: 1.5rem 0;
    }
    .archive-header .category-image {
      margin: 1.5rem 0;
      max-width: 60%;
    }
  }

  /*** Single Post Layout ***/
  #loop-container .entry.double {
    border: none;
  }
  .single .entry:first-child .featured-image {
    left: 0;
  }
  .single .entry:first-child .featured-image, .single .entry:first-child .featured-image {
    overflow-y: hidden;
    width: 100%;
  }
  .single .post-content > p:first-of-type {
    margin-top: 3em;
  }
  .single .post-content > p:first-of-type::first-letter {
    float: left;
    font-size: 4em;
    line-height: .9em;
    padding-top: 2px;
    padding-right: 8px;
  }

  .widget-area-after-archive-posts {
    clear: both;
    display: block;
  }

  .summary.personality-summary > div, 
  .sc-1jc3ukb-0, 
  .post-meta > .post-author {
    align-items: center;
    /* border-left: 6px solid #33c5f3; */
    display: flex;
    margin-top: 18px;
    padding: 0;
    border-top: none;
    width: auto;
  }

  .summary.personality-summary p,
  .post-meta > .post-author .description {
    display: none;
  }

  .summary.personality-summary .headshot,
  .sc-1jc3ukb-0 .sc-1jc3ukb-1,
  .post-author .avatar-container  {
    -o-border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    margin-right: 1em;
    overflow: hidden;
    width: 50px;
  }

  .summary.personality-summary .personality-description,
  .sc-1jc3ukb-0 img, 
  .summary.personality-summary .image img {
    display: block;
    margin: 0;
    width: 80px;
  }

  .summary.personality-summary .inner h3,
  .post-meta .author {
    font-weight: 700;
    margin: 0;
  }
  .post-meta .author > a {
    font-style: normal;
    font-weight: 400;
  }

  .post-header .wp-caption-text {
    margin-top: 6px;
  }

  @media screen and (min-width: 31.25em) {
    .single .post-content > p,
    .single .post-content > figure,
    .single .post-content > h1,
    .single .post-content > h2,
    .single .post-content > h3,
    .single .post-content > h4,
    .single .post-content > ul,
    .single .post-content > li {
      padding: 0 5%;
    }
  }
  @media screen and (max-width: 31.25em) {
    
    .summary.personality-summary .headshot,
    .sc-1jc3ukb-0 .sc-1jc3ukb-1,
    .post-author .avatar-container {
      width: 30px;
    }
    .single .post-content > p:first-of-type {
      margin-top: 1em;
    }
  }

  /* Clickventures */
  .category-clickventures iframe {
    border: none;
    width: 100%;
  }

  /* Typeform Quizzes */
  #typeform-quiz.quiz,
  .category-quiz iframe[title="typeform-embed"] {
    width: 640px;
    height: 640px;
    overflow: hidden;
  }

  /* Related Posts */
  .section-title a {
    text-decoration: none;
  }
  .section-title a:hover {
    text-decoration: underline;
  }

  .more-from-category .title {
    font-weight: bold;
  }
  @media screen and (min-width: 50em) {
    .more-from-category ul {
      margin: 0 -1.3em;
    }
    #loop-container .more-from-category li {
      border: none;
      clear: none;
      padding: 1.3em 1.3em 3em;
      width: 25%;
    }
    .more-from-category .title {
      font-size: 0.9em;
    }
  }
  
  @media screen and (min-width: 31.25em) {
    .more-from-category li:nth-child(2n+1) {
      padding-right: 2em;
    }
    .more-from-category li:nth-child(2n) {
      padding-left: 2em;
    }
    .more-from-category li:nth-child(3), .more-from-category li:nth-child(4) {
      padding-top: 2em;
    }
    .more-from-category li {
      padding-bottom: 2em;
    }

  }


  /*** Search Bar ***/

  .search-form-popup .search-field,
  .search-form-popup .search-submit {
    border-radius: 0;
  }
  .search-form-popup .search-submit,
  .search-form .search-submit {
    background-color: #000;
    transition: background-color 0.2s;
  }
  .search-form-popup .search-submit:hover,
  .search-form .search-submit:hover {
    background-color: #33C5F3;
  }
  input[type="search"]:focus {
    border-color: #33C5F3;
  }

  .search-form .search-field {
    padding: 12px 12px;
  }

  .search-box .search-form {
    margin: 2.25em 0;
  }
  
  /* Footer */
  .site-footer {
    border-top: 1px solid #DCDCDC;
    background-color: #f6f6f6;
  }

  footer .custom-logo {
    display: none;
  }
  .scroll-to-top {
    background-color: #ff6701;
  }
  .scroll-to-top:hover {
    background-color: #d35602;
  }
  
  /* Complianz banner custom css */
  #cmplz-document {
    max-width:100%;
  }

   /* Clickventure Styles */
  .category-clickventures .post-content > div iframe,  .category-clickventures #my_iframe {
    border: none;
  }

  /* Ads */
  .code-block iframe {
    margin: 0 auto;
  }

  /* Kid hole category */
  .category-kids #overflow-container::before, .kids #overflow-container::before {
    content: '';
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -3;
    background-size: cover;
    background-position: 50% 50%;
    background-image: url('assets/images/background.jpg');
  }

  .category-kids .max-width, .kids .max-width {
    max-width: 85%;
  }
  @media screen and (max-width: 31.25em) { 
    .category-kids .max-width, .kids .max-width {
      max-width: 90%;
    }
  }
  
@media screen and (min-width: 1280px) {
  .category-kids .menu-primary-container,
  .kids .menu-primary-container {
    margin: 0;
  }
}
/*********************************************************************************************/
/*********************************** SIDEBAR POST-LIST FIX ***********************************/
/*********************************************************************************************/
/* The Mission News post-list widget prints the post title as a bare text node inside the
   .featured-image anchor, before the <img>. The parent theme hides it with font-size: 0,
   but a plugin stylesheet is out-sizing that rule here, so the text makes a real line box.
   In style-2 the image is position: absolute with left/height/width but NO top, so top: auto
   drops it to its static position below that line box, and overflow: hidden on the
   height: 0 + padding-bottom frame clips it away. Belt and braces: kill the text, and pin
   the image to the top of its frame so it can't be pushed out again. */

.widget_ct_mission_news_post_list .featured-image > a {
  font-size: 0;
  line-height: 0;
}

.widget_ct_mission_news_post_list .style-2 .featured-image > a > img {
  top: 0;
}

/* Any list widget dropped in the sidebar should match the rest of the furniture. */
.sidebar .widget ul,
.sidebar .widget ol {
  list-style: none;
  margin-left: 0;
  padding-left: 0;
}

/*********************************************************************************************/
/************************************** BLOCKQUOTES ******************************************/
/*********************************************************************************************/
/* Production never indented blockquotes. The child theme pads .single .post-content > p,
   figure, h1-h4, ul and li by 5% and simply omits blockquote from that list, so the quote's
   border rule sits outside the text column and the quote reads as outdented. Confirmed
   against the archived original stylesheet and the archived markup of the post itself --
   this is faithful, not a bug. Dane wants it corrected anyway. Same 5% pad, applied to the
   block-level children the original list forgot. */

@media screen and (min-width: 31.25em) {
  .single .post-content > blockquote,
  .single .post-content > ol,
  .single .post-content > pre {
    margin-left: 5%;
    margin-right: 5%;
  }
}

/*********************************************************************************************/
/************************************* SEARCH RESULTS ****************************************/
/*********************************************************************************************/
/* The search heading now renders as a sibling of #main (see content/search-header.php), the
   same hoist the category archives got, so it spans the article column and the sidebar
   together instead of sitting inside the 640px column.

   The width/border reset below duplicates the .layout-right-sidebar-wide block further up.
   That block keys off a body class the theme only prints when the Customizer's search layout
   is set to the wide right sidebar, and search reads a different setting than archives do
   (layout_search vs layout_archives). Repeating the rule under .search means the page looks
   right either way, and it is a no-op when the layout class is already there. */

.search .archive-header.search-box {
  border: none;
  margin: 0;
  padding: 0;
  width: 100%;
}

@media screen and (max-width: 799px) {
  .search .archive-header.search-box {
    display: table-header-group;
  }
}

/* The form itself has no width of its own in the parent theme, and at 31.25em it becomes a
   flex row, so left alone it would stretch the full 1280px and read as unanchored. 680px is
   the value the theme already uses for its popup search form, so it looks native rather than
   invented. Scoped to the top box only -- the bottom "refine your search" form keeps its
   full width. */

.archive-header.search-box .search-form {
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}