/*
 Theme Name: Moral Magazine Child
 Theme URI: https://themepalace.com/downloads/moral-magazine/
 Description: Child theme for Moral Magazine.
 Author: moralthemes
 Author URI: https://moralthemes.com
 Template: moral-magazine
 Version: 1.0.0
 License: GNU General Public License v3 or later
 License URI: http://www.gnu.org/licenses/gpl-3.0.html
 Text Domain: moral-magazine-child
 */

.xham-app {

  /*-- overrides --*/
  .site-logo img {
    filter: none !important;
  }
  /*-- overrides END --*/

  .archive-blog-wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 10px;

    &::before {
      display: none;
    }

    & article {
      flex: 0 0 calc((100% / 4) - 10px);
      position: relative;
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      height: auto !important;
      padding: 0 !important;
      margin: 0 !important;

      @media screen and (max-width: 1300px) {
        flex: 0 0 calc((100% / 3) - 10px);
      }

      @media screen and (max-width: 1000px) {
        flex: 0 0 calc((100% / 2) - 10px);
      }

      @media screen and (max-width: 500px) {
        flex: 0 0 100%;
      }

      .featured-image {
        background-size: contain !important;
        position: static;
        display: table-cell;
        flex: 0 0 100%;
        width: 100% !important;
        height: 100% !important;

        & img {
          width: 100% !important;
          height: 200px !important;
          object-fit: cover;
        }
      }

      .entry-container {
        flex: 0 0 100%;
        width: 100% !important;
        padding: 5px !important;
        height: auto;

        /* position: absolute;
        bottom: 0;
        left: 0; */
        background: rgba(0, 0, 0, 0.5);

        .entry-title {
          font-size: 0.9rem;
          margin: 0;
        }
      }
    }
  }

  .site-content:has(.catg-side-bar) {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 0 !important;

    &>div {
      flex: 0 0 80%;

      &:is(#page-site-header, #magazine_pro_hero_banner_section) {
        flex: 0 0 100%;
      }

      @media screen and (max-width: 1000px) {
        flex: 0 0 100%;
      }
    }

    .catg-side-bar {
      flex: 0 0 20%;
      background-color: #222;
      padding: 20px;

      @media screen and (max-width: 1000px) {
        flex: 0 0 100%;
      }

      .catg-side-bar-title {
        color: #fafafa;
        margin: 0;
        margin-bottom: 25px;
        font-size: 1.65rem;
        font-weight: 600;
      }

      .catg-side-bar-list {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-wrap: wrap;
        gap: 15px;

        & li {
          flex: 0 0 100%;
          font-size: 0.95rem;

          @media screen and (max-width: 1000px) {
            flex: 0 0 calc((100% / 3) - 15px);
          }

          @media screen and (max-width: 800px) {
            flex: 0 0 calc((100% / 2) - 15px);
          }

          @media screen and (max-width: 600px) {
            flex: 0 0 100%;
          }

          & a {
            color: #fafafa;
            font-weight: 600;
          }
        }
      }
    }
  }

  &.home {

    .hero_banner {

      .hero-banner-post {

        @media screen and (max-width: 600px) {
          display: none !important;
        }
      }

      .hero-banner-sidebar {

        @media screen and (max-width: 1000px) {
          display: none !important;
        }
      }
    }

    .site-content:has(.catg-side-bar) {

      .catg-side-bar {
        flex: 0 0 calc(20% - 35px);
        margin-left: 35px;

        @media screen and (max-width: 1100px) {
          flex: 0 0 100%;
          order: 2;
          margin: 0;
        }
      }
    }

    #main-post-wrapper {
      display: none;
    }
  }

  &.page {

    &:not(.home) {

      .page-section {

        .widget-area {
          display: none;
        }
      }

      .catg-side-bar {
        display: none;
      }
    }
  }

  &.single {

    .post {

      .entry-container {

        .entry-content {
          position: relative;

          &>p:has(>.xham-vid-ad-wrapper) {
            position: relative;
          }

          & .xham-vid-ad-wrapper {
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 60%;
            max-height: 700px;
            z-index: 100;

            @media screen and (max-width: 900px) {
              position: static;
              width: 100%;
              transform: translateX(0);
            }
          }

          & iframe {
            width: 100%;
            max-height: 700px;
          }

          .post-views {
            margin-top: 10px;

            & a {
              color: #fff !important;
            }
          }
        }
      }
    }

    .widget-area {

      .widget_post_views_counter_list_widget {

        @media screen and (max-width: 1200px) {
          display: none !important;
        }

        .widget-title {
          display: none;
        }

        & ul {
          display: flex;
          flex-wrap: wrap;
          gap: 15px;

          & li {
            position: relative;
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin: 0 !important;

            &::before,
            &::after {
              display: none;
            }

            .post-title {
              color: #fff;
            }

            .post-thumbnail {
              flex: 0 0 100%;

              & img {
                width: 100% !important;
                height: 200px !important;
                object-fit: cover;
              }
            }
          }
        }
      }
    }
  }

  .trending-vid-list {
    flex: 0 0 calc(80% - 50px);
    padding: 0;
    margin-left: 15px;
    margin-right: 35px;
    margin-bottom: 25px;

    @media screen and (max-width: 1100px) {
      flex: 0 0 100%;
      order: 1;
      margin: 0;
      padding: 0 15px 25px 15px;
    }

    & ul {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
      align-items: flex-start;
      padding: 0;
      gap: 10px;

      & li {
        flex: 0 0 calc((100% / 4) - 10px);
        position: relative;
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin: 0 !important;

        @media screen and (max-width: 1300px) {
          flex: 0 0 calc((100% / 3) - 10px);
        }

        @media screen and (max-width: 1000px) {
          flex: 0 0 calc((100% / 2) - 10px);
        }

        @media screen and (max-width: 500px) {
          flex: 0 0 100%;
        }

        &::after {
          content: none !important;
        }

        .post-thumbnail {
          position: static;
          display: table-cell;
          flex: 0 0 100%;
          /* width: 100% !important;
          height: 100% !important; */

          & img {
            width: 100% !important;
            height: 200px !important;
            object-fit: cover;
          }
        }

        .post-title {
          flex: 0 0 100%;
          width: 100% !important;
          padding: 0 !important;
          height: auto;

          /* position: absolute;
          bottom: 0;
          left: 0; */
          background: rgba(0, 0, 0, 0.5);
          font-size: 0.95rem;
          line-height: 1;
          color: #fff;

          &:hover {
            color: #eee;
          }
        }
      }
    }
  }

  .xham-ad {
    margin: 25px 0;
  }

  .site-footer {
    padding-bottom: 20px;

    .footer-widgets-area {

      .hentry {
        width: 100%;
        margin-bottom: 0;

        &:has(.widget_categories) {
          display: none;
        }

        .widget {
          margin-bottom: 15px;
        }

        .menu-top-menu-container {

          .menu {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
          }
        }
      }
    }

    .site-info {
      margin-top: 25px;
      margin-bottom: 25px;
    }
  }
}