@use "@sass-palette/hope-config";
@use "wrapper";

[vp-content] {
  @media print {
    margin: 0 !important;
    padding-inline: 0 !important;
  }

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

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

    & {
      padding-top: 0;
    }

    #markdown-content > {
      // 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-next-line max-nesting-depth
        .theme-container.no-navbar & {
          margin-top: 1.5rem;
          padding-top: 0;
        }
      }

      // 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:not(.header-anchor):hover {
    text-decoration: underline;
  }

  img {
    max-width: 100%;
  }

  table img {
    max-width: unset;
  }
}