/*
  defines fonts, paragraphs and headings

  icons
  links
  headings
  sidenotes
  utility classes
  increasing text legibility
  long text
*/



@layer common-styling {

  /* icons
  ============================================================================ */
  .pos-icon {
    fill: currentColor;
  }


  /* links
  ============================================================================ */
  :where(.pos-app) a {
    color: var(--pos-color-interactive);

    transition: color .1s linear;
  }

  :where(.pos-app) a:hover,
  .pos-debug-link-hover {
    color: var(--pos-color-interactive-hover);
  }

  :where(.pos-app) a:active,
  .pos-debug-link-active {
    color: var(--pos-color-interactive-active)
  }

  :where(.pos-app) a:not(.pos-button):focus-visible,
  .pos-debug-link-focus {
    border-radius: var(--pos-radius-button);
    outline: 2px solid var(--pos-color-focused);
    outline-offset: 2px;

    color: var(--pos-color-interactive-hover);
  }

  :where(.pos-app) a svg {
    width: 1em;
    height: 1em;
    display: inline-block;

    fill: currentColor;
  }

  /* hidden text label */
  :where(.pos-app) a .pos-label {
    position: absolute;
    inset-inline-start: -100vw;
  }


  /* headings
  ============================================================================ */
  .pos-heading-1,
  .pos-prose h1 {
    margin-inline-start: -.2ex;
    display: block;

    font-family: var(--pos-font-heading);
    font-size: 3rem;
    font-weight: 500;
  }

  .pos-heading-2,
  .pos-prose h2 {
    margin-inline-start: -.1ex;
    display: block;

    line-height: 1.2;
    font-family: var(--pos-font-heading);
    font-size: 2rem;
    font-weight: 500;
  }

  .pos-heading-3,
  .pos-prose h3 {
    margin-inline-start: -.05ex;
    display: block;

    font-family: var(--pos-font-heading);
    font-size: 1.5rem;
    font-weight: 400;
  }

  .pos-heading-4,
  .pos-prose h4 {
    display: block;

    font-family: var(--pos-font-heading);
    font-size: 1.25rem;
    font-weight: 400;
  }

  .pos-heading-3 + .pos-card {
    margin-block-start: .3em;
  }

  .pos-card + .pos-heading-3 {
    margin-block-start: var(--pos-gap-card-card);
  }


  /* sidenotes
  ============================================================================ */
  .pos-supplementary {
    color: var(--pos-color-content-text-supplementary);
  }


  /* tips
  ============================================================================ */
  .pos-tip {
    margin-block-start: .2rem;
    position: relative;
    display: flex;
    gap: .5em;

    color: var(--pos-color-content-text-supplementary);
  }

    .pos-tip svg {
      width: 1.2rem;
      height: 1.2rem;
      position: relative;
      top: 2px;
      flex-shrink: 0;
    }


  /* utility classes
  ============================================================================ */
  .pos-text-center {
    text-align: center;
  }


  /* increasing text legibility
  ============================================================================ */
  .pos-increaseLegibility {
    position: relative;
  }

  .pos-increaseLegibility:before {
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    inset-block-end: 0;
    opacity: .5;

    border-start-end-radius: inherit;
    border-start-start-radius: inherit;
    background-image: var(--pos-gradient-legibility);

    content: '';
  }

  .pos-increaseLegibility > * {
    position: relative;
    z-index: 2;
  }


  /* long text
  ============================================================================ */
  .pos-prose {
    line-height: 1.8;
  }

  .pos-prose .pos-heading-2,
  .pos-prose h2 {
    margin-block-end: .1em;
  }

    .pos-prose * + h2 {
      margin-block-start: 1em;
    }

  .pos-prose .pos-heading-3 {
    margin-block-end: .5rem;
  }

  .pos-prose * + .pos-heading-3,
  .pos-prose * + h3 {
    margin-block-start: 1em;
  }

  .pos-prose * + .pos-heading-4,
  .pos-prose * + h4 {
    margin-block-start: .8em;
  }

  .pos-prose p {
    line-height: 1.4;
  }

  .pos-prose p + p {
    margin-block-start: .5em;
  }

  .pos-prose * + ol,
  .pos-prose * + ul {
    margin-block-start: .5em;
  }

  .pos-prose ol {
    margin-inline-start: 1.2em;

    list-style-type: decimal;
  }

  .pos-prose ul {
    margin-inline-start: 1.2em;

    list-style-type: disc;
  }

  .pos-prose img {
    margin-block: .5em;
  }

}