/* stylelint-disable */
/* ------------------------------------------------------------ *\
    Base WordPress CSS
    Feel free to modify or outright delete these default styles.
\* ------------------------------------------------------------ */

.alignnone,
.alignleft,
.alignright,
.aligncenter {
  margin: 5px 15px 10px;
}

.alignleft {
  float: left;
  margin-left: 0;
}

.alignright {
  float: right;
  margin-right: 0;
}

.alignnone {
  display: block;
  margin-left: 0;
  margin-right: 0;
}

.aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.wp-caption {
  position: relative;

  img {
    width: 100%;
  }

  &-text {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 5px 10px;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
  }
}

/* ------------------------------------------------------------ *\
    Articles
\* ------------------------------------------------------------ */

.articles {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

/* ------------------------------------------------------------ *\
    Sidebar
\* ------------------------------------------------------------ */

.widgets {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

/* ------------------------------------------------------------ *\
    Gallery
\* ------------------------------------------------------------ */

.gallery {
  position: relative;
  overflow: hidden;
  padding-bottom: 20px;

  &-item {
    float: left;
    position: relative;
    padding: 10px;

    .gallery-columns-1 & {
      width: 100%;
    }

    .gallery-columns-2 & {
      width: 50%;
    }

    .gallery-columns-3 & {
      width: 33.33%;
    }

    .gallery-columns-4 & {
      width: 25%;
    }

    .gallery-columns-5 & {
      width: 20%;
    }

    .gallery-columns-6 & {
      width: 16.67%;
    }

    .gallery-columns-7 & {
      width: 14.29%;
    }

    .gallery-columns-8 & {
      width: 12.5%;
    }

    .gallery-columns-9 & {
      width: 11.11%;
    }
  }

  .wp-caption {
    .gallery-columns-7 &,
    .gallery-columns-8 &,
    .gallery-columns-9 & {
      display: none;
    }

    &-text {
      right: 10px;
      bottom: 10px;
      left: 10px;
      text-align: left;
    }
  }
}

/* ------------------------------------------------------------ *\
    Pagination
\* ------------------------------------------------------------ */

.paging {
  padding: 0 0 20px;
  text-align: center;

  ul {
    list-style: none outside none;
    padding: 0;
    margin: 0;
  }

  ul,
  li {
    display: inline-block;
    vertical-align: top;
  }

  a {
    display: inline-block;
    padding: 4px 10px;
    border: 1px solid #000;
    margin: 0 2px;
    text-decoration: none;
  }

  .current a,
  a:hover {
    text-decoration: none;
    background: #000;
    color: #fff;
  }
}

.paging-label {
  padding-right: 10px;
}

/* ------------------------------------------------------------ *\
    Comments
\* ------------------------------------------------------------ */

.section-comments {
  padding-top: 15px;

  a {
    text-decoration: none;
  }

  p {
    padding-bottom: 18.2px;
  }

  ol,
  ul {
    padding: 0;
    margin: 0;
    list-style: none outside none;
  }


  h3 {
    position: relative;
    padding: 0 0 10px;

    small {
      position: absolute;
      top: 0;
      right: 0;
    }
  }
}

.comments {
  position: relative;

  .children {
    position: relative;
    padding-left: 70px;

    &:before,
    &:after {
      content: '';
      position: absolute;
      display: block;
    }

    &:before {
      top: 33px;
      left: 23px;
      width: 32px;
      height: 27px;
      border-left: 8px solid #c3c3c3;
      border-bottom: 8px solid #c3c3c3;
    }

    &:after {
      top: -5px;
      left: 8px;
      border: 20px solid transparent;
      border-width: 20px 19px;
      border-bottom-color: #c3c3c3;
    }
  }
}

.comment {
  position: relative;
  padding: 30px 0 30px 65px;

  .avatar {
    position: absolute;
    top: 28px;
    left: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid #ccc;
  }

  &__says {
    padding-left: 5px;
  }

  &__moderation-notice {
    display: inline-block;
    margin: 3px 0 8px;
    color: #999;
  }

  &__meta {
    padding-bottom: 12px;

    a {
      color: #363636;
    }
  }

  &__text {
    p:last-child {
      padding-bottom: 0;
      margin-bottom: 0;
    }
  }

  &__reply {
    padding-top: 10px;
    text-align: right;

    a {
      display: inline-block;
      padding: 5px 10px;
      background: #363636;
      color: #fff;

      &:hover {
        text-decoration: none;
        opacity: .8;
      }
    }
  }
}

.comment-respond {
  width: 100%;
  padding-top: 30px;
  border-top: 1px solid #363636;

  h3 {
    position: relative;
  }

  small {
    position: absolute;
    top: 0;
    right: 0;
  }

  label {
    display: block;
    padding-bottom: 4px;
  }

  input[type="text"],
  input[type="email"],
  input[type="url"],
  textarea {
    display: block;
    width: 80%;
    padding: 10px;
    border: 1px solid #ccc;
    background: #f7f7f7;
  }

  textarea {
    width: 100%;
    height: 100px;
  }

  input[type="text"],
  input[type="email"],
  input[type="url"] {
    &:focus {
      background-color: #fff;
    }

    &::placeholder {
      color: #777;
    }
  }

  .required {
    color: #e40000;
  }

  .comment-notes {
    padding-top: 15px;
  }

  .form-submit input {
    display: block;
    width: 160px;
    height: 40px;
    border: 0;
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    background: #363636;
    cursor: pointer;
  }
}

.no-comments {
  padding-top: 12px;
  font-weight: bold;
  font-size: 18px;
}

/* ------------------------------------------------------------ *\
    Search Form
\* ------------------------------------------------------------ */

.search-form {
  position: relative;
  overflow: hidden;

  &__field {
    display: block;
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    background: #f7f7f7;

    &:focus {
      background-color: #fff;
    }

    &::placeholder {
      color: #777;
    }
  }

  .screen-reader-text {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    opacity: 0.5;
    visibility: hidden;
  }
}