/* single.php styles */

.main-post {
  .sw19s-std-wrap {
    margin: 0 auto;
    max-width: 1448px;
    padding: 0 1.5rem;

    display: flex;
    gap: 4rem;
    justify-content: center;
  }

  .title-section {
    position: relative;

    svg {
      position: absolute;
      left: -24px;
      top: 8px;
    }
  }

  article {
    max-width: 45rem;
    margin-top: 2rem;

    .post-cat {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      justify-content: flex-start;
      margin-bottom: 1rem;

      li:last-child {
        .splitter {
          display: none;
        }
      }

      a {
        font-family: "Archivo";
        font-size: 18px;
        font-weight: bold;
        line-height: 1.33;
        color: #766d68;
        text-decoration: underline;

        &:hover {
          color: #584f4a;
        }

        &:active {
          color: #3a312c;
          text-decoration: none;
        }
      }

      .splitter {
        width: 2px;
        height: 18px;
        border-radius: 8px;
        background-image: linear-gradient(to bottom, #3fb9ff 0%, #0066ff 103%);
        margin: 0 12px;
        display: inline-block;
        transform: translateY(3px);
      }
    }

    .post-title {
      font-family: "Roboto";
      font-size: 2rem;
      font-weight: bold;
      line-height: 1.25;
      color: #222;
      margin-bottom: 1rem;
    }

    .post-extras {
      display: flex;
      justify-content: space-between;
    }

    .post-meta {
      display: flex;
      align-items: center;
      gap: 0.5rem;

      .splitter {
        color: #766d68;
        font-size: 14px;
      }
    }

    .post-author {
      font-family: "Roboto";
      font-size: 14px;
      line-height: 1.71;
      color: #584f4a;
    }

    .post-date {
      font-family: "Roboto";
      font-size: 14px;
      font-style: italic;
      line-height: 1.71;
      color: #766d68;
    }

    .post-socials {
      display: flex;
      justify-content: flex-end;
      align-items: center;
    }

    .post-soc-title {
      font-family: "Roboto";
      font-size: 12px;
      line-height: 1.33;
      color: #584f4a;
    }

    .post-soc-list a svg {
      &:hover path {
        fill: #64a2ff;
      }

      &:active path {
        fill: #0044ab;
      }
    }

    .post-image {
      margin: 2rem 0;
      img {
        object-fit: cover;
        object-position: top center;
        width: 100%;
        max-height: 221px;
      }
    }

    .post-content {
      font-family: "Roboto";
      font-size: 18px;
      line-height: 1.78;
      color: #222;

      p {
        margin-bottom: 2rem;
      }

      img {
        height: 100%;
        width: 100%;
      }

      a {
        text-decoration: underline;
        color: #0044ab;

        &:hover {
          color: #00086f;
        }

        &:active {
          color: #00086f;
          text-decoration: none;
        }
      }

      ul,
      ol {
        margin: 0 0 2rem;
        list-style-position: inside;

        li {
          margin-bottom: 1rem;
        }
      }

      hr {
        margin: 0 0 2rem;
        border-top: 1px solid #b3b3a8;
      }

      figure {
        /* one feature allows editor to hard code fix width */
        width: 100% !important;
      }

      .wp-block-button__link {
        font-family: "Archivo";
        font-size: 18px;
        font-weight: bold;
        line-height: 1.33;
        color: #000;
        padding: 12px 57px 12px 32px;
        border-radius: 48px !important;
        background-color: #42e2b8 !important;
        position: relative;
        text-decoration: none;

        &:after {
          content: "";
          position: absolute;
          top: calc(50% - 5px);
          right: 32px;
          background-image: url("../../assets/graphics/svg/short-right-arrow.svg");
          width: 16px;
          height: 10px;
        }

        &:hover {
          color: #000;
          text-decoration: none;
          background-color: #83ecd0 !important;
        }

        &:active {
          color: #000;
          text-decoration: none;
          background-color: #21d4a4 !important;
        }
      }
    }

    h2 {
      font-size: 24px;
      padding: 32px 0;
      margin: 0;
      border-top: solid 1px #b3b3a8;
    }
  }

  .sidebar {
    margin-top: 1.5rem;
  }

  .author-block {
    margin: 2rem 0 3.5rem;
    display: flex;
    justify-content: flex-start;
    gap: 12px;

    .left {
      border-right: 1px solid #0066ff;
      margin-right: 12px;
      width: 100%;
      max-width: 68px;
    }

    img {
      border-radius: 50%;
    }

    .author-name {
      font-family: "Roboto";
      font-size: 18px;
      font-weight: bold;
      line-height: 1.78;
      color: #584f4a;
      margin-bottom: 1rem;
    }
  }

  .table-of-contents {
    position: relative;
    z-index: 0;
  }

  @media (max-width: 1400px) {
    .sw19s-std-wrap {
      gap: 1.5rem;
    }

    .title-section svg {
      left: -20px;
    }
  }

  @media (max-width: 1024px) {
    .sw19s-std-wrap {
      flex-direction: column;
      align-items: center;
      gap: 0;
    }

    article {
      max-width: none;
      margin-top: 2.5rem;
      width: 100%;

      .post-cat a {
        font-size: 16px;
      }

      .post-title {
        font-size: 24px;
        line-height: 32px;
      }
    }

    .sidebar {
      margin-top: 0;
    }
  }

  @media (max-width: 767px) {
    article {
      .post-extras {
        flex-direction: column;
        justify-content: flex-start;
        gap: 12px;
      }

      h2 {
        border-top: none;
        position: relative;

        &::before {
          content: "";
          position: absolute;
          top: 0;
          width: 100vw;
          height: 1px;
          background: #b3b3a8;
          left: -24px;
        }
      }

      .post-socials {
        justify-content: flex-start;
      }

      .post-socials .post-soc-list a {
        line-height: 0;
      }
      .post-image img {
        max-height: 100px;
      }
    }
  }
}