Sindbad~EG File Manager

@import url("https://fonts.googleapis.com/css2?family=Cambay:wght@400;700&display=swap");

.single-article {
  background: #fafafb;
  .single-article__hero {
    background: var(--purple300);
    padding-top: 120px;
    padding-bottom: 64px;

    .single-article__hero-container {
      padding: 0px 1rem;

      .single-article__wrapper {
        width: 100%;
        max-width: 1024px;
        margin: 0 auto;
      }

      .single-article__date-container {
        text-align: right;
        .single-article__date-title {
          font-size: 10px;
          line-height: 1.2;
          color: var(--neutre600);
          text-transform: uppercase;
          font-family: var(--fontRedHat);
        }

        .single-article__date {
          font-family: var(--fontRedHat);
          font-size: 14px;
          font-weight: 700;
          color: var(--purple800);
          line-height: 1.2;
        }
      }

      .single-article__author-row {
        display: flex;
        gap: 8px;
        margin-bottom: 8px;

        .single-article__author-image {
          width: 32px;
          height: 32px;
          border-radius: 50%;
          overflow: hidden;
          img {
            width: 100%;
            object-fit: cover;
          }
        }

        .single-article__author-label {
          font-size: 10px;
          font-family: var(--fontRedHat);
          color: var(--neutre600);
          line-height: 1.2;
          font-weight: 400;
          text-transform: uppercase;
        }

        .single-article__author-name {
          font-family: var(--fontRedHat);
          color: var(--purple800);
          font-weight: 700;
          line-height: 1.2;
          font-size: 14px;
        }
      }
      .single-article__author-description {
        font-family: var(--fontRedHat);
        font-weight: 500;
        font-size: 12px;
        font-style: italic;
        color: #2f0f6a;
        margin-bottom: 24px;
      }

      .single-article__excerpt {
        width: 100%;
        max-width: 780px;
        font-weight: 400;
        b {
          font-weight: 600;
        }
      }

      .single-article__categories {
        display: flex;
        gap: 8px;

        .single-article__category {
          padding: 6px 12px;
          border-radius: 20px;
          font-family: var(--fontRedHat);
          border: 1px solid var(--purple100);
        }
      }

      .single-article__thumbnail {
        width: 100%;
        border-radius: 24px;
        overflow: hidden;
        img {
          width: 100%;
          object-fit: cover;
          height: auto;
        }
      }
    }
  }

  .single-article__content-container {
    padding: 32px 1rem;

    .single-article__content-wrapper {
      width: 100%;
      max-width: 1024px;
      margin: 0 auto;

      display: flex;
      gap: 32px;

      .single-article__share {
        padding-left: 42px;
        display: flex;
        position: sticky;
        top: 150px;
        height: fit-content;
        flex-direction: column;

        @media (max-width: 768px) {
          display: none;
        }

        .single-article__share-icon-container {
          width: 32px;
          height: 32px;
          background: var(--purple300);
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 50%;
          &.linkedin {
            margin-top: 3px;
            margin-bottom: 18px;
          }

          &.reverse {
            background: var(--purple500);
          }
        }
      }
      .single-article__content {
        width: 100%;
        max-width: 600px;

        .single-article__table-of-content {
          margin-bottom: 24px;
          padding: 24px;
          border-radius: 12px;
          background: var(--purple300);
          .single-article__toc-button {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
          }

          .single-article__toc-arrow {
            transition: transform 0.3s ease-in-out;
          }

          .single-article__toc-content {
            // Transition max height

            overflow: hidden;
            transition: max-height 0.3s ease-in-out;

            ul {
              margin-top: 24px;
            }
          }
        }

        .single-article__wysiwyg {
          // I want to make sure that its every h2, h3 ,h4 ,h5 etc but not inside single-article__newsletter-container

          h2 {
            font-size: 31px;
            font-family: var(--fontKanit);
            font-weight: 700;
            line-height: 1.2;
            color: var(--purple600);
            letter-spacing: -0.62px;
            margin-bottom: 20px;
          }

          h3:not(.single-article__newsletter-container *),
          h4:not(.single-article__newsletter-container *),
          h5:not(.single-article__newsletter-container *) {
            font-size: 25px;
            font-family: var(--fontKanit);
            color: var(--purple800);
            line-height: 1.2;
            letter-spacing: -0.5px;
            margin-bottom: 20px;
          }

          h4:not(.single-article__newsletter-container *) {
            font-size: 20px;
            letter-spacing: -0.4px;
          }

          h5:not(.single-article__newsletter-container *) {
            font-size: 16px;
            letter-spacing: -0.32px;
          }

          p:not(.single-article__newsletter-container *) {
            font-size: 16px;
            font-weight: 400;
            line-height: 1.5;
            font-family: var(--fontRedHat);
            color: var(--purple800);
            margin-bottom: 32px;
            a {
              color: var(--purple500);
              text-decoration: underline;
            }
          }

          figure:not(.single-article__newsletter-container *),
          img:not(.single-article__newsletter-container *) {
            width: 100%;
            height: auto;
            object-fit: cover;
          }

          ul {
            padding-left: 16px;
            margin-bottom: 24px;
            margin-top: 0;

            li {
              margin-bottom: 8px;
              font-family: var(--fontRedHat);
              color: var(--purple800);
              font-weight: 600;
              font-size: 16px;
              line-height: 1.5;
            }
          }
        }

        .single-article__conclusion {
          padding: 24px;
          border-radius: 12px;
          background: var(--purple300);
          margin-bottom: 24px;
        }

        .single-article__newsletter-container {
          background: url("../assets/star-bg.svg"),
            linear-gradient(254.32deg, #560bab 0%, #7209b5 100%);
          padding: 16px 24px;
          border-radius: 12px;
          margin-bottom: 32px;

          .single-article__newsletter-form {
            .form-row {
              p {
                display: flex;
                gap: 12px;
                align-items: center;

                @media (max-width: 768px) {
                  // flex-direction: column;
                  // align-items: flex-start;
                  // gap: 0;
                }
                input {
                  height: 45px;
                  border-radius: 8px;
                  border: 0;
                  font-family: var(--fontRedHat);
                  font-size: 14px;
                  font-weight: 600;
                  color: var(--purple300);
                  &[type="email"] {
                    padding: 0px 8px;
                    font-weight: 400;
                    color: #9f9da6;

                    @media (max-width: 768px) {
                      width: 100%;
                    }
                  }

                  &[type="submit"] {
                    border: 1px solid var(--purple200);
                    background: var(--purple500);
                    box-shadow: 0px 4px 4px 0px #0c041b0f;

                    line-height: 1;
                    box-shadow: 0px 1px 3px 0px #0c041b1a;

                    &:hover {
                      background: transparent;
                    }
                  }
                }
              }
            }

            .wpcf7-response-output {
              border: 0;
              padding: 0;
              margin: 0;
              font-family: var(--fontKanit);
              margin-bottom: 32px;
              margin-top: 8px;
              color: var(--purple800);
            }
            form[data-status="invalid"] {
              .wpcf7-response-output {
                color: red;
              }
            }
          }

          .single-article__newsletter-policy {
            font-size: 13px;
            line-height: 1.5;
            font-family: var(--fontRedHat);
            color: #dddde0;
            font-weight: 400;

            a {
              color: #dddde0;
            }
          }
        }

        .single-article__post-nav {
          padding: 20px 0;
          border-top: 1px solid var(--purple100);
          border-bottom: 1px solid var(--purple100);
          display: flex;
          align-items: center;
          margin-bottom: 24px;
          justify-content: space-between;
          .single-article__post-nav-link {
            &.next {
              display: flex;
              flex-direction: column;

              align-items: flex-end;
            }
          }
        }

        .single-article__faq-container {
          padding: 2px 24px;

          background: var(--purple300);
          border-radius: 8px;

          .single-article__faq-item {
            overflow: hidden;
            border-bottom: 1px solid var(--purple100);

            &:last-child {
              border-bottom: 0;
            }

            .single-article__faq-arrow {
              transition: transform 0.3s ease-in-out;
            }
            &.active {
              .single-article__faq-arrow {
                transform: rotate(180deg);
                transition: transform 0.3s ease-in-out;
              }
            }
            .single-article__faq-question {
              display: flex;
              align-items: center;
              justify-content: space-between;
              padding: 24px 0;
            }
            .single-article__faq-answer {
              max-height: 0;
              overflow: hidden;
              transition: max-height 0.3s ease-in-out;
              p {
                margin-bottom: 24px;
              }
            }
          }
        }
      }

      .single-article__latest-articles {
        position: sticky;
        top: 150px;
        height: fit-content;

        @media (max-width: 768px) {
          display: none;
        }
        h3 {
          text-transform: uppercase;
        }

        .single-article__latest-article-card {
          border: 1px solid var(--purple100);
          background: var(--purple300);
          padding: 18px 24px;
          border-radius: 8px;
          margin-bottom: 8px;

          .latest-article__category {
            padding: 8px 10px;
            border-radius: 20px;
            font-size: 12px;
            width: fit-content;
            margin-bottom: 16px;
            background: var(--neutre50);
            border: 1px solid var(--purple100);
            font-family: var(--fontRedHat);
          }

          .latest-article__content {
            font-size: 13px;
            font-family: var(--fontRedHat);
            font-weight: 400;
            line-height: 1.5;
            color: #4f4d55;
            margin-bottom: 16px;
          }

          .latest-article__cta {
            font-size: 12px;
            display: flex;
            gap: 8px;
            align-items: center;
          }
        }
      }
    }
  }
  .single-article__comment {
    padding: 0 1rem;
    .single-article__comment-wrapper {
      width: 100%;
      max-width: 1024px;
      margin: 0 auto;
      .single-article__comment-container {
        margin-left: 100px;

        @media (max-width: 768px) {
          margin-left: 0;
        }
        .single-article__comment-title {
          color: #2d3a55;
          padding-bottom: 12px;
          border-bottom: 1px solid var(--purple100);
          margin-bottom: 12px;
        }
        .comment-list {
          padding-left: 0;
          .comment {
            padding: 32px;
            list-style: none;
            border-radius: 8px;
            margin-bottom: 12px;
            background: var(--purple300);

            .comment-author {
              display: flex;
              gap: 12px;
              margin-bottom: 24px;

              img {
                border-radius: 50%;
              }

              .comment-author-details {
                display: flex;
                flex-direction: column;

                .comment-meta-author {
                }

                .comment-meta-date {
                  color: #2d3a55;
                }

                .comment-content {
                  color: #4a4a4a;
                }
              }
            }
          }
        }

        .comment-reply-title {
          display: none;
        }

        .comment-notes {
          margin-bottom: 12px;
          margin-top: 12px;
        }
        .comment-col {
          display: flex;
          flex-direction: column;
          gap: 12px;
          width: 100%;
          textarea {
            height: 240px;
            border-radius: 8px;
            padding: 16px;
            border: 1px solid #dddde0;
            color: var(--purple800);
          }
          input {
            border-radius: 8px;
            padding: 8px 12px;
            border: 1px solid #dddde0;
            background: var(--white);
            color: var(--purple800);
          }

          label {
            font-size: 19px;
            font-family: var(--fontRedHat);
            font-weight: 600;
            color: #2d3a55;
            background: var(--white);
            line-height: 1.2;
          }
        }

        .comment-row {
          display: flex;
          gap: 12px;
          margin-bottom: 12px;
          margin-top: 12px;

          @media (max-width: 768px) {
            flex-direction: column;
          }
        }

        .comment-form-cookies-consent {
          margin-bottom: 24px;
          @media (max-width: 768px) {
            display: flex;
            gap: 8px;
            align-items: flex-start;
            input {
              margin-top: 8px;
            }
          }
        }

        .form-submit {
          margin-bottom: 32px;
        }
      }
    }
  }
}