/* Set up the basics for text content and standard HTML tags */

body {
  min-width: var(--min-width-mobile-supported);
  --color-image-placeholder-bg: var(--color-border);
  font-family: var(--font-body);
}

/* Font sizes, based on https://tailwindcss.com/docs/font-size */
.text-xs {
  font-size: 0.75rem; /* 12px */
  line-height: 1rem;
}
.text-sm {
  font-size: 0.875rem; /* 14px */
  line-height: 1.25rem;
}
.text-base {
  font-size: 1rem; /* 16px */
  line-height: 1.5rem;
}
.text-lg {
  font-size: 1.125rem; /* 18px */
  line-height: 1.75rem;
}
.text-xl {
  font-size: 1.25rem; /* 20px */
  line-height: 1.75rem;
}
.text-2xl {
  font-size: 1.5rem; /* 24px */
  line-height: 2rem;
}
.text-3xl {
  font-size: 1.875rem; /* 30px */
  line-height: 2.25rem;
}
.text-4xl {
  font-size: 2.25rem; /* 36px */
  line-height: 2.5rem;
}
.text-5xl {
  font-size: 3rem; /* 48px */
  line-height: 1;
}
.text-6xl {
  font-size: 3.75rem; /* 60px */
  line-height: 1;
}
.text-7xl {
  font-size: 4.5rem; /* 72px */
  line-height: 1;
}
.text-8xl {
  font-size: 6rem; /* 96px */
  line-height: 1;
}
.text-9xl {
  font-size: 8rem; /* 128px */
  line-height: 1;
}

/* Desktop heading sizes */
h6,
.prose h6,
.h6.h6 /* high specificity */ {
  font-size: 1.125rem; /* 18px */
  line-height: 1.75rem;
}
h5,
.prose h5,
.h5.h5 {
  font-size: 1.25rem; /* 20px */
  line-height: 1.75rem;
}
h4,
.prose h4,
.h4.h4 {
  font-size: 1.5rem; /* 24px */
  line-height: 2rem;
}
h3,
.prose h3,
.h3.h3 {
  font-size: 1.875rem; /* 30px */
  line-height: 2.25rem;
}
h2,
.prose h2,
.h2.h2 {
  font-size: 2.25rem; /* 36px */
  line-height: 2.5rem;
}
h1,
.prose h1,
.h1.h1 {
  font-size: 3rem; /* 48px */
  line-height: 1;
}
/* Mobile heading sizes */
@media (max-width: 992px) {
  .prose h3,
  .h3.h3 {
    font-size: 1.5rem; /* 24px */
    line-height: 2rem;
  }
  .prose h2,
  .h2.h2 {
    font-size: 1.875rem; /* 30px */
    line-height: 2.25rem;
  }
  .prose h1,
  .h1.h1 {
    font-size: 2.25rem; /* 36px */
    line-height: 2.5rem;
  }
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6, legend {
  font-family: var(--font-heading);
  color: var(--color-heading);
  font-weight: 400;
}
.h2, .h3, .h4, .h5, .h6,
.prose :where(h2, h3, h4, h5, h6) {
  margin-top: 1.25em;
}
.h1,.h2,.h3,.h4,.h5,.h6, .prose :where(h1, h2, h3, h4, h5, h6),
.prose ul,
.prose ol,
legend
{ 
  margin-bottom: 0.75em;
}

.prose,
.alert,
p {
  line-height: 1.6;
}
.p,
.prose p {
  margin-bottom: 1em;
}
.prose li {
  padding-left: 0.5em;
}
.prose li > ul,
.prose li > ol {
  margin-top: 0.25em;
  margin-bottom: 0em;
}
.prose li + li {
  margin-top: 0.25em;
}
.prose li::marker {
  color: var(--color-muted);
}
li > p:last-child {
  margin-bottom: 0;
}
.prose .alert,
.prose .well {
  margin-top: 2rem;
  margin-bottom: 2rem;
}
.prose {
  word-wrap: break-word;
}

.prose iframe {
  /* Placeholder background during loading */
  background: var(--color-image-placeholder-bg);
}
.prose img {
  border-radius: var(--border-radius-common);
}

a, .btn-link {
  text-underline-offset: 2px;
}
/* To help screen readers, add screen reader only text to alert user when a link will open in a new tab */
a[target="_blank"]:after {
  content: " (opens in new tab)";
  /* Show for screen readers only (from .sr-only) */
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.prose pre,
.well {
  padding: 2rem;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-common);
}
.well > :first-child{
  margin-top: 0;
}

blockquote {
  font-size: 1em;
  line-height: 1.6;
  border-left: 3px solid var(--color-border);
  padding-left: 1.5rem;
}

/* For pages with short content, stops footer from being rendered in the middle of the page */
.main {
  min-height: calc(100vh - 250px);
}

.prose > :first-child,
.table td > :first-child,
.alert > :first-child,
blockquote > :first-child {
  margin-top: 0;
}

.prose > :last-child,
.table td > :last-child,
.alert > :last-child,
blockquote > :last-child {
  margin-bottom: 0;
}