/**
 * @file
 * Text Content.
 */

.text-content {
  color: var(--color--gray-10);
  line-height: var(--sp1-5);

  & a:where(:not(.button)) {
    transition: all 0.2s;
    color: var(--text-on-neutral-primary);
    text-decoration-thickness: 2px;
    text-underline-offset: 0.25rem;
    text-decoration-color: var(--text-on-neutral-primary);
    overflow-wrap: break-word;

    &:hover {
      text-underline-offset: 0.375rem;
    }
  }

  & ul,
  & ol {
    margin-top: var(--sp2);
    margin-bottom: var(--sp2);
  }

  & li {
    margin-bottom: var(--sp0-5);

    &::marker {
      color: var(--text-on-neutral-primary);
    }
  }

  & p {
    margin-block-start: var(--sp);
    margin-block-end: var(--sp);

    &:first-child {
      margin-block-start: 0;
    }

    &:last-child {
      margin-block-end: 0;
    }

    @container style(--md: true) {
      margin-block-start: var(--sp2);
      margin-block-end: var(--sp2);
    }
  }

  & code {
    background-color: var(--color--night-90);
  }

  & pre code {
    display: block;
    overflow: auto;
    padding-block: var(--sp);
    padding-inline-start: var(--sp);
    padding-inline-end: var(--sp);
  }

  & blockquote {
    position: relative;
    margin-inline-start: 0;
    margin-inline-end: 0;
    padding-inline-start: var(--sp4);
    letter-spacing: -0.01em;
    color: var(--color--night-30);
    font-family: var(--font-serif);
    font-size: 1.3125rem;
    line-height: 1.5;
    margin-block: var(--sp2);

    &::before {
      position: absolute;
      content: '“';
      color: var(--color--sun-90);
      font-family: georgia, serif;
      font-size: 9.375rem;
      line-height: 1;
      inset-block-start: -0.625rem;
      inset-inline-start: -0.625rem;
    }

    &::after {
      position: absolute;
      inset-block-end: 0;
      inset-inline-start: 0.625rem;
      width: var(--sp0-5);
      height: calc(100% - 4.375rem);
      margin-inline-start: 0.25rem;
      content: '';
      background: var(--color--sun-90);
    }

    @container style(--grid-md: true) {
      font-size: 2rem;
    }
  }

  @container style(--grid-md: true) {
    font-size: 1.125rem;
    line-height: var(--sp2);
  }
}

/**
 * Special colors for footer that has a dark background.
 */
.site-footer .text-content {
  color: inherit;

  & * {
    color: inherit;
  }

  & a {
    text-decoration: underline;
    color: var(--text-on-neutral-dark-secondary);

    &:hover {
      text-decoration: none;
      color: var(--text-on-neutral-dark-primary);
    }
  }
}