.spr-rich-text,
.ck-content {
  margin: 0;
  padding: 0;
  color: var(--color-text);
  font-family: var(--font-base);
  font-size: clamp(1rem, 0.148vw + 0.965rem, 1.125rem);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-base);

  @media (min-width: 992px) {
    --font-size-base: 1.125rem;
  }

  @media (min-width: 1440px) {
    --font-size-base: 1.25rem;
  }
}

.spr-rich-text :where(h1, h2, h3, h4, h5, h6):not(:empty),
.ck-content :where(h1, h2, h3, h4, h5, h6):not(:empty) {
  letter-spacing: initial;
  color: var(--color-text);
  font-weight: var(--font-weight-extra-bold);
  margin-block: 0 var(--heading-margin-block-end);
  strong {
    font-weight: inherit;
  }
}

.spr-rich-text :where(h1:not(:first-child), h2:not(:first-child), h3:not(:first-child), h4:not(:first-child), h5:not(:first-child), h6:not(:first-child)),
.ck-content:where(h1:not(:first-child), h2:not(:first-child), h3:not(:first-child), h4:not(:first-child), h5:not(:first-child), h6:not(:first-child)) {
  margin-block: var(--heading-margin-block-start) var(--heading-margin-block-end);
}

.spr-rich-text h1.alt,
.ck-content h1.alt {
  font-size: var(--font-size-h1-alt);
  line-height: 120%;
}

.spr-rich-text h1,
.ck-content h1 {
  font-size: var(--font-size-h1);
}

.spr-rich-text h2,
.ck-content h2 {
  font-size: var(--font-size-h2);
}

.spr-rich-text h3,
.ck-content h3 {
  font-size: var(--font-size-h3);
}

.spr-rich-text h4,
.ck-content h4 {
  font-size: var(--font-size-h4);
}

.spr-rich-text h5,
.ck-content h5 {
  font-size: var(--font-size-h5);
}

.spr-rich-text h6,
.ck-content h6 {
  font-size: var(--font-size-h6);
}

.spr-rich-text :where(p, ul, ol, blockquote, table, figure),
.ck-content :where(p, ul, ol, blockquote, table, figure) {
  margin-block: 0 1rem;
}

.spr-rich-text *:last-child,
.ck-content *:last-child {
  margin-block-end: 0;
}

.spr-rich-text p.intro,
.ck-content p.intro {
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 150%;
}

.spr-rich-text:not(:has(nav.pager)) a:not(.spr-button, [class*="leaflet"], .spr-banner__link, .button--primary, .button--secondary, .button--tertiary),
.ck-content:not(:has(nav.pager)) a:not(.spr-button, [class*="leaflet"], .spr-banner__link, .button--primary, .button--secondary, .button--tertiary) {
  text-decoration: underline;
  color: var(--link-color);
  text-underline-offset: 0.25rem;
  text-decoration-thickness: 0.125rem;
  &:hover {
    color: var(--link-hover-color);
  }
}

.spr-rich-text--dark a:not(.spr-button) {
  color: var(--color-text-dark);
}

.spr-rich-text:not(:has(.spr-heading), :has(nav.pager)) a:not(.spr-button, [class*="leaflet"]):hover,
.ck-content:not(:has(.spr-heading), :has(nav.pager)) a:not(.spr-button, [class*="leaflet"]):hover {
  color: var(--link-hover-color);
}

.spr-rich-text--dark a:not(.spr-button):hover {
  color: var(--link-hover-color-dark);
}

.spr-rich-text ul,
.ck-content ul {
  padding: 0;
  list-style-position: inside;
}

.spr-rich-text ul ul,
.ck-content ul ul {
  padding-inline: 2.3125rem 0;
}

.spr-rich-text ol,
.ck-content ol {
  padding-inline-start: 1.375rem;
}

.spr-rich-text ul {
  padding-inline-start: 0;
  list-style: none;
  list-style-type: none !important;
}

.ck-content ul {
  margin-inline-start: 0;
  padding-inline-start: 0;
  list-style: none;
  list-style-type: none !important;
}

.spr-rich-text ul:not(.pager__items) li,
.ck-content ul:not(.pager__items) li {
  position: relative;
  padding-inline-start: 1.5rem;
  background: transparent var(--list-style-image) no-repeat left 0.375rem;
}

.spr-rich-text--dark ul:not(.contextual-links) li::before {
  background-color: var(--color-text-dark);
}

.spr-rich-text figure,
.ck-content figure {
  margin-inline: 0;
  margin-block: clamp(1rem, calc(0.723rem + 1.183vw), 2rem); /* min: 16px, max: 32px */
  img {
    height: auto;
  }
}

.spr-rich-text figure.align-left {
  margin-inline-end: 1rem;
  margin-block: 0 1rem;
}

.spr-rich-text figure.align-right {
  margin-inline-start: 1rem;
  margin-block: 0 1rem;
}

.spr-rich-text figure.align-center {
  text-align: center;

  img {
    display: inline-block;
  }
}

.spr-rich-text figcaption,
.ck-content figcaption {
  display: flex;
  align-items: center;
  margin: 0.5rem 0 1rem 0.75rem;
  color: var(--element-caption-color);
  font-style: italic;
  gap: 0.25rem;
  &::before {
    position: relative;
    display: inline-block;
    content: var(--element-caption-icon);
    scale: 1.1;
    block-size: 1rem;
    inline-size: 1rem;
    inset: -0.3125rem 0 0 0;
  }
}

.spr-rich-text--dark figcaption {
  color: var(--color-text);
}

.layout-builder-block blockquote.large,
.spr-rich-text blockquote.large,
.ck-content blockquote.large {
  margin-inline: 0;
  margin-block: var(--element-margin-block-large) var(--element-margin-block-large);
}

.layout-builder-block blockquote,
.spr-rich-text blockquote,
.ck-content blockquote {
  margin: clamp(0.5rem, 0.313vw + 0.4rem, 1rem);
  padding-inline-start: clamp(1.5rem, 0.938vw + 1.2rem, 3rem);
  border-left: 0.1875rem solid var(--department-color-scheme, var(--quote-border-color));
}

.ck-content blockquote,
.layout-builder-block blockquote {
  border-left: 0.1875rem solid var(--color-secondary) !important;
  font-size: clamp(1rem, 0.148vw + 0.965rem, 1.125rem);
  font-style: unset !important;
  &::before {
    display: none !important;
    content: unset !important;
  }
  @media (min-width: 992px) {
    --font-size-base: 1.125rem;
  }

  @media (min-width: 1440px) {
    --font-size-base: 1.25rem;
  }
}

.layout-builder-block blockquote.large,
.spr-rich-text blockquote.large,
.ck-content blockquote.large {
  display: flex;
  justify-content: start;
  padding-block-start: 0.375rem;
  padding-inline-start: 4.5rem;
  border-left: unset !important;
  background: transparent var(--quote-image) no-repeat left 0.25rem;
  gap: 1rem;
  min-block-size: 3rem;
  /* &::before {
    position: relative;
    width: auto;
    height: 100%;
    content: var(--quote-image);
    background-color: unset;
    inset: -0.25rem 0 0 0;
  } */
}

.layout-builder-block blockquote.large p,
.spr-rich-text blockquote.large p,
.ck-content blockquote.large p {
  font-size: 1.6875rem;
  font-weight: var(--font-weight-extra-bold);
  line-height: 120%;
}

.layout-builder-block blockquote.large cite,
.spr-rich-text blockquote.large cite,
.ck-content blockquote.large cite {
  display: inline-block;
  inline-size: 100%;
  color: var(--element-caption-color);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-regular);
  font-style: normal;
}

.spr-rich-text--dark blockquote cite {
  color: var(--color-text-dark);
}

.spr-rich-text blockquote cite::before,
.ck-content blockquote cite::before {
  content: "— ";
}

.spr-rich-text .spr-table-responsive,
.ck-content .spr-table-responsive {
  display: block;
  overflow-x: auto;
  inline-size: 100%;
  white-space: nowrap;
  margin-inline: 0;
  margin-block: var(--element-margin-block-large) var(--element-margin-block-large);

  /* enable iOS momentum scrolling */
  -webkit-overflow-scrolling: touch;
}

.spr-rich-text table,
.ck-content table {
  inline-size: 100%;
  max-inline-size: 100%;
  border-collapse: collapse;
}

.spr-rich-text table caption,
.ck-content table caption {
  text-align: left;
  color: var(--element-caption-color);
}

.spr-rich-text--dark table caption {
  color: var(--color-text-dark);
}

.spr-rich-text table th,
.ck-content table th,
.spr-rich-text table td,
.ck-content table td {
  padding: var(--table-cell-padding);
  text-align: left;
  font-size: var(--table-font-size);
}

.spr-rich-text table th,
.ck-content table th {
  font-weight: var(--font-weight-medium);
}

.spr-rich-text table tr,
.ck-content table tr {
  border-block-end: var(--table-cell-border);
  background-color: var(--table-row-background);
}

.spr-rich-text table tr:first-child,
.ck-content table tr:first-child {
  border-block-start: var(--table-cell-border);
}

.spr-rich-text table.zebra tr,
.ck-content table.zebra tr {
  border: none;
}

.spr-rich-text table.zebra thead tr:nth-child(even),
.ck-content table.zebra thead tr:nth-child(even) {
  background-color: var(--table-row-background-zebra);
}

.spr-rich-text table.zebra tbody tr:nth-child(odd),
.ck-content table.zebra tbody tr:nth-child(odd) {
  background-color: var(--table-row-background-zebra);
}

.spr-rich-text .text-formatted,
.ck-content .text-formatted {
  h2,
  h3 {
    margin-block: clamp(1.5rem, calc(1.361rem + 0.591vw), 2rem) 0.5rem;
  }

  h4,
  h5 {
    margin-block: 1rem 0.5rem;
  }
}

.ck-content a.button--primary,
.ck-content a.button--secondary,
.ck-content a.button--tertiary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  inline-size: 100%;
  text-decoration: none;
  color: var(--button-text-color);
  border: var(--button-border-width) solid var(--button-border-color);
  border-radius: var(--button-border-radius);
  background-color: var(--button-background-color);
  font-size: var(--button-font-size);
  font-weight: var(--button-font-weight);
  line-height: var(--button-line-height);
  padding-block: var(--button-padding-block);
  padding-inline: var(--button-padding-inline);

  &:hover {
    color: var(--button-hover-text-color);
    border-color: var(--button-hover-border-color);
    background-color: var(--button-hover-background-color);
  }

  &:focus-visible {
    outline-offset: 0.25rem;
  }

  /* TODO: overrides */
  .spr-icon--20 {
    @media (max-width: 767px) {
      inline-size: 1rem;
      height: 1rem;
    }
  }

  @media (min-width: 48rem) {
    inline-size: fit-content;
  }
}

.ck-content a.button--primary {
  --button-border-color: var(--color-secondary-dark);
  --button-hover-border-color: var(--color-secondary-lighter);
}

.ck-content a.button--secondary {
  --button-background-color: transparent;
  --button-text-color: var(--color-secondary-dark);
  --button-hover-text-color: var(--color-secondary-dark);
  --button-border-color: var(--color-secondary-dark);
  --button-hover-border-color: var(--color-secondary-dark);
  --button-hover-background-color: var(--color-secondary-light);
}

.ck-content a.button--tertiary {
  --button-background-color: transparent;
  --button-hover-background-color: transparent;
  --button-text-color: var(--color-secondary-dark);
  --button-hover-text-color: var(--color-secondary);
  --button-border-color: var(--color-secondary-dark);
  --button-hover-border-color: var(--color-secondary);
  --button-border-radius: 0;

  border: unset !important;
  border-block-end: var(--button-border-width) solid currentColor !important;
}