/* 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;
  text-wrap-style: balance;
}
.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;
  text-wrap-style: pretty;
}
.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;
}
/* Adds arrow next to link to indicate it opens in a new tab */
a.opens-in-new-tab::after {
  content: " (opens in new tab)";
  display: inline-block;
  position: relative;
  vertical-align: text-top;
  background-size: contain;
  color: var(--color-muted);

  --icon-size: 1em;
  width: var(--icon-size);
  height: var(--icon-size);
  
  /* Custom colored SVGs using background-color with mask-image. See:
     https://codepen.io/noahblon/post/coloring-svgs-in-css-background-images;  */
  background-color: var(--color-muted);
  -webkit-mask-image: var(--icon-svg);
  mask-image: var(--icon-svg);
  -webkit-mask-size: var(--icon-size) var(--icon-size);
  mask-size: var(--icon-size) var(--icon-size);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;

  /* Icon from: https://lucide.dev/icons/arrow-up-right */
  --icon-svg: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24"><path d="M7 7h10v10M7 17L17 7"/></svg>');
}

.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;
}