/*--------------------------------------------------------------
# Pages CSS
--------------------------------------------------------------*/


// Popular posts
.popular {
  &__area {
    padding-top: 90px;
    padding-bottom: 90px;

    @media #{$sm} {
      padding-top: 40px;
      padding-bottom: 40px;
    }

    .blog {
      &__item {
        margin-bottom: 0;
      }
      &__title {
        font-size: 20px;
      }
      &__content {
        padding: 25px 20px;
      }
      &__meta {
        padding-bottom: 20px;
      }
    }
  }

}


// Category posts
.category {
  &__area {
    padding: 100px 0;
    background-color: $light;

    @media #{$sm} {
      padding: 40px 0;
    }
  }
}


// Default style
.default {
  &__page {
    padding: 60px 0;
  }

  &__style {
    p {
      padding-bottom: 20px;
      line-height: 1.7;
    }
  
    h1, h2, h3, h4, h5, h6 {
      color: $dark;
      padding-top: 20px;
      padding-bottom: 30px;
      text-transform: capitalize;
    }

    h1, h2 {
      @media #{$lg} {
        font-size: 30px;
      }

      @media #{$sm} {
        font-size: 24px;
      }
    }

    h3 {
      @media #{$lg} {
        font-size: 25px;
      }

      @media #{$sm} {
        font-size: 22px;
      }
    }

    h4 {
      @media #{$lg} {
        font-size: 22px;
      }

      @media #{$sm} {
        font-size: 20px;
      }
    }

    h5, h6 {
      @media #{$lg} {
        font-size: 20px;
      }

      @media #{$sm} {
        font-size: 18px;
      }
    }
  
    > ul, > ol {
      padding-bottom: 20px;
  
      > li {
        color: $dark;
        padding-left: 20px;
        position: relative;
        &::before {
          position: absolute;
          content: "";
          width: 12px;
          height: 12px;
          left: 0;
          top: 5px;
          border-radius: 30px;
          background-color: $primary;
        }
      }
    }

    figure {
      margin-bottom: 30px;
    }

    figcaption {
      color: $dark;
    }

    blockquote {
      padding: 30px;
      background: $border;
      margin-bottom: 30px;
      
      p {
        font-size: 18px;
        font-style: italic;
      }
      cite {
        text-transform: capitalize;
      }
    }

    p {
      a {
        color: $primary;
        &:hover {
          color: $secondary;
        }
        &:focus {
          color: $secondary;
          outline: none;
          text-decoration: underline;
        }
      }
    }


  }
}


// Contact form
.wpcf7 {
  .wpcf7-not-valid-tip {
    color: $primary;
    padding-top: 5px;
  }

  input[type=submit] {
    background: $primary;
    text-transform: capitalize;
    color: $white;
    font-size: 16px;
    padding: 12px;
    border-radius: 3px;
    width: 300px;
    margin-left: calc(50% - 150px);
    transition: all 0.5s;
    &:hover {
      background: $secondary;
    }
  }

}


// Breadcrumb
.bcrumb {
  &__area {
    padding: 60px 0;
    text-align: center;
    color: $white;
    background: $secondary;

    h1 {
      font-size: 48px;
      color: $white;
      text-transform: capitalize;

      @media #{$lg} {
        font-size: 36px;
      }

      @media #{$sm} {
        font-size: 24px;
      }
    }
  }
}


// Search
.search {
  &__area {
    padding-top: 60px;

    .page-title {
      font-size: 24px;
      color: $dark;
    }
  }
}


.not-found {
  text-align: center;
  padding: 60px 0;

  .search-form {
    max-width: 360px;
    margin: 0 auto;
    padding-top: 30px;

    input {
      width: unset;
    }

    .search-submit {
      color: $white;
      background: $primary;
      padding: 11px;
      border-radius: 5px;
    }
  }
}