:root {
  --content-box-text-color: #136f63;
}

.content-box {
  &--variant-framed {
    @apply border border-carhop-green-600;
  }

  &--variant-backgrounded {
    background-color: var(--content-box-background-color, transparent);
  }

  .wp-block-group {
  }

  &--bg-light {
    --content-box-text-color: var(--wp--preset--color--carhop-green);
  }

  &--bg-dark {
    --content-box-text-color: #fff;
  }

  &__innerblocks {
    @apply max-w-screen-lg mx-auto px-8;
  }
  h3 {
    /* @apply title-small font-bold; */
  }

  h1.wp-block-heading {
    @apply !text-6xl mb-12;
  }

  h3.wp-block-heading {
    @apply !text-4xl uppercase fjalla font-light tracking-wide;
  }
  h4.wp-block-heading {
    @apply !text-2xl uppercase nunito font-medium tracking-widest pb-1;
  }
  ul + h3,
  p + h3 {
    @apply mt-12;
  }

  h3 + p {
    @apply !mt-3;
  }

  ul {
    list-style: disc;
    padding-left: 1.5rem;
  }
  .carhop-heading:not(:first-child) {
    @apply pt-32;
  }
}

main > .content-box:first-child {
  @media (max-width: 1441px) {
    @apply !pt-2;
  }
}

.single-articles .content-box {
  @apply !pt-10 !pb-8;

  &__innerblocks {
    > :first-child {
      @apply mt-0;
    }
    > :last-child {
      @apply mb-0;
    }
  }
  .wp-block-heading {
    @apply !mt-0;
  }
  p {
    color: inherit;
  }
  .carhop-heading p {
    @apply text-carhop-green-700;
  }
}

body.wp-admin.post-type-page .content-box,
body.page .content-box {
  @apply py-16;
  color: var(--content-box-text-color);

  .carhop-heading p {
    color: var(--content-box-text-color, #136f63);
  }
  h1.wp-block-heading,
  h2.wp-block-heading,
  h3.wp-block-heading,
  h4.wp-block-heading,
  h5.wp-block-heading,
  h6.wp-block-heading {
    color: var(--content-box-text-color);
  }

  p,
  li {
    @apply font-light;
  }
  li {
    @apply pb-2;
  }
  p {
    @apply pb-8;
  }
}