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

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

/* TODO: Use vars for font sizes and line-heights */
/* 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;
  }
}

.prose,
.alert,
p {
  line-height: 1.75;
}
.p,
.prose p {
  margin-bottom: 1em;
}
.prose li > ul,
.prose li > ol {
  margin-top: 0.5em;
}
.prose li {
  padding-left: 0.5em;
  margin-bottom: 0.5em;
}
.prose li::marker {
  color: var(--color-muted);
}
.prose .alert,
.prose .well {
  margin-top: 2rem;
  margin-bottom: 2rem;
}
.prose {
  word-wrap: break-word;
}
.trim-child-margin-y > :first-child,
.prose > :first-child {
  margin-top: 0;
}
.trim-child-margin-y > :first-child,
.prose > :last-child {
  margin-bottom: 0;
}
.prose a {
  text-decoration: underline;
}

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

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.5em;
}
.h1,.h2,.h3,.h4,.h5,.h6, .prose :where(h1, h2, h3, h4, h5, h6),
.prose ul,
.prose ol,
legend
{ 
  margin-bottom: 0.75em;
}

a {
  text-underline-offset: 2px;
}

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

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