@use "vuepress-shared/styles/wrapper";
@use "@sass-palette/hope-config";

.theme-hope-content {
  @media print {
    margin: 0 !important;

    // NOTE: Compatible with Android Wechat
    // padding-inline: 0!important;
    padding-inline-start: 0 !important;
    padding-inline-end: 0 !important;
  }

  &.custom {
    margin: 0;
    padding: 0;
  }

  &:not(.custom) {
    @include wrapper.wrapper;

    padding-top: 0;

    > {
      // heading fix
      h1,
      h2,
      h3,
      h4,
      h5,
      h6 {
        margin-top: calc(0.5rem - var(--navbar-height));
        margin-bottom: 0.5rem;
        padding-top: calc(1rem + var(--navbar-height));
        outline: none;

        // stylelint-disable max-nesting-depth
        .theme-container.no-navbar & {
          margin-top: 1.5rem;
          padding-top: 0;
        }
        // stylelint-enable max-nesting-depth
      }

      // paragraph fix
      p,
      ul p,
      ol p {
        text-align: justify;
        overflow-wrap: break-word;
        hyphens: auto;

        @media (max-width: hope-config.$mobile) {
          text-align: start;
        }

        @media print {
          text-align: start;
        }
      }
    }
  }

  a:hover {
    text-decoration: underline;
  }

  img {
    max-width: 100%;
  }
}