/* ---------------------------------------------------------- */
/* Prose component from Primer Brand                          */
/* Todo: Import from library in future                        */
/* ---------------------------------------------------------- */
/* Table of contents:                                         */
/* 1. Container                                               */
/* 2. Element spacing                                         */
/* 3. Line-length control                                     */
/* 4. Headings                                                */
/* 5. Paragraphs                                              */
/* 6. Lists                                                   */
/* 7. Inline elements                                         */
/* 8. Images                                                  */
/* 9. Block elements                                          */
/* ---------------------------------------------------------- */

/* ---------------------------------------------------------- */
/* 1. Container                                               */
/* ---------------------------------------------------------- */

.Prose {
  /* Use Mona Sans for headings only, system everywhere else */
  --brand-body-fontFamily: var(--brand-fontStack-system);

  font-family: var(--brand-body-fontFamily);
  font-size: var(--brand-text-size-200);
  line-height: var(--brand-text-lineHeight-200);
  color: var(--brand-color-text-default);
}

/* ---------------------------------------------------------- */
/* 2. Element spacing                                         */
/* ---------------------------------------------------------- */

.Prose
  :is(h1, h2, h3, h4, h5, h6, p, ul, ol, blockquote, figure, hr, table, pre, dl, :global(.custom-component)):not(
    :global(.custom-component)
      :is(h1, h2, h3, h4, h5, h6, p, ul, ol, blockquote, figure, hr, table, pre, dl, :global(.custom-component))
  ) {
  margin-block-end: var(--spacing, 1em);
}

/* ---------------------------------------------------------- */
/* 3. Line-length control                                     */
/* ---------------------------------------------------------- */

.Prose--lineLength {
  max-width: var(--brand-Prose-lineLength);
}

/* ---------------------------------------------------------- */
/* 4. Headings                                                */
/* ---------------------------------------------------------- */

.Prose h1:not(:global(.custom-component) h1) {
  font-weight: var(--brand-heading-weight-900);
  font-size: var(--base-size-32);
  line-height: 1.5;
  font-family: var(--brand-heading-fontFamily);
  letter-spacing: var(--brand-text-letterSpacing-800);
}

.Prose--lineLength h1:not(:global(.custom-component) h1) {
  max-width: 22ch;
}

.Prose h2:not(:global(.custom-component) h2) {
  font-weight: var(--brand-heading-weight-700);
  font-size: var(--base-size-24);
  line-height: var(--base-size-24);
  font-family: var(--brand-heading-fontFamily);
  letter-spacing: var(--brand-text-letterSpacing-700);
}

.Prose--lineLength h2:not(:global(.custom-component) h2) {
  max-width: 26ch;
}

.Prose h3:not(:global(.custom-component) h3) {
  font-weight: var(--brand-heading-weight-600);
  font-size: var(--base-size-20);
  line-height: var(--base-size-20);
  font-family: var(--brand-heading-fontFamily);
  letter-spacing: var(--brand-heading-letterSpacing-600);
}

.Prose--lineLength h3:not(:global(.custom-component) h3) {
  max-width: 32ch;
}

.Prose h4:not(:global(.custom-component) h4) {
  --spacing: var(--base-size-40);
  font-weight: var(--brand-text-weight-500);
  font-size: var(--base-size-18);
  line-height: var(--base-size-18);
  font-family: var(--brand-heading-fontFamily);
  letter-spacing: var(--brand-heading-letterSpacing-500);
}

.Prose h5:not(:global(.custom-component) h5) {
  --spacing: var(--base-size-40);
  font-weight: var(--brand-text-weight-400);
  font-size: var(--base-size-16);
  line-height: var(--base-size-16);
  font-family: var(--brand-heading-fontFamily);
  letter-spacing: var(--brand-heading-letterSpacing-400);
}

.Prose h6:not(:global(.custom-component) h6) {
  --spacing: var(--base-size-48);
  font-weight: var(--brand-text-subhead-weight-large);
  font-size: var(--base-size-14);
  line-height: var(--base-size-14);
  font-family: var(--brand-heading-fontFamily);
  letter-spacing: var(--brand-heading-letterSpacing-300);
}

.Prose :is(h1):not(:global(.custom-component) h1) {
  --spacing: var(--base-size-64);
  margin-block-end: var(--spacing);
}

.Prose :is(h2, h3):not(:global(.custom-component) :is(h2, h3)) + * {
  --spacing: var(--base-size-40);
}

/* ---------------------------------------------------------- */
/* 5. Paragraphs                                              */
/* ---------------------------------------------------------- */

.Prose p:not(:global(.custom-component) p) {
  --spacing: var(--base-size-24);
}

/* ---------------------------------------------------------- */
/* 6. Lists                                                   */
/* ---------------------------------------------------------- */

.Prose ul:not(:global(.custom-component) ul),
.Prose ol:not(:global(.custom-component) ol) {
  --spacing: var(--base-size-16);
  display: flex;
  flex-direction: column;
  gap: var(--base-size-8);
  padding: 0;
  margin-inline-start: var(--base-size-24);
  line-height: var(--brand-text-lineHeight-300);
}

.Prose ul:not(:global(.custom-component) ul) {
  list-style-type: image;
  list-style-image: var(--brand-Prose-unorderedList-imageUrl);
  margin-block-end: var(--base-size-24) !important;
}

.Prose li:not(:global(.custom-component) li) {
  --spacing: 0;
}

/* ---------------------------------------------------------- */
/* 7. Inline elements                                         */
/* ---------------------------------------------------------- */

.Prose strong:not(:global(.custom-component) strong) {
  font-weight: var(--brand-text-weight-800);
}

.Prose em:not(:global(.custom-component) em) {
  font-variation-settings: 'ital' 10;
  font-synthesis: none;
}

.Prose a:not(:global(.custom-component) a),
.Prose a:-webkit-any-link:not(:global(.custom-component) a:-webkit-any-link) {
  --fgColor-accent: var(--brand-InlineLink-color-rest);
  color: var(--brand-InlineLink-color-rest);
  text-decoration: underline;
}

.Prose code:not(:global(.custom-component) code) {
  font-family: var(--brand-fontStack-monospace);
  font-size: var(--brand-text-size-100);
  white-space: break-spaces;
  padding: var(--base-size-4) var(--base-size-8);
  border-radius: var(--brand-borderRadius-small);
  background-color: var(--base-color-scale-indigo-0);
}

/* Inline code inside headings should inherit font-size and participate in line layout */
.Prose :is(h1, h2, h3, h4, h5, h6) code:not(:global(.custom-component) code) {
  font-size: inherit;
  display: inline-block;
  margin-block: var(--base-size-4);
}

[data-color-mode='dark'] .Prose code:not(:global(.custom-component) code) {
  background-color: var(--base-color-scale-indigo-9);
}

/* ---------------------------------------------------------- */
/* 8. Images                                                  */
/* ---------------------------------------------------------- */

.Prose img:not(:global(.custom-component) img) {
  --spacing: var(--brand-Prose-img-spacing);
  display: block;
  max-width: 100%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  margin-block-end: var(--spacing);
  border-radius: var(--brand-borderRadius-medium);
  overflow: hidden;
}

.Prose video:not(:global(.custom-component) video) {
  --spacing: var(--brand-Prose-img-spacing);
  display: block;
  max-width: 100%;
  height: auto;
  margin-block-end: var(--spacing);
}

/* ---------------------------------------------------------- */
/* 9. Block elements                                          */
/* ---------------------------------------------------------- */

.Prose blockquote:not(:global(.custom-component) blockquote) {
  font-family: var(--brand-fontStack-sansSerif);
  --spacing: var(--brand-Prose-blockquote-spacing);
  position: relative;
  font-size: var(--brand-text-size-400);
  line-height: var(--brand-text-lineHeight-400);
  padding-top: var(--base-size-48);
  padding-left: var(--base-size-40);
  padding-bottom: var (--base-size-8);
  margin-bottom: var(--spacing);
}

.Prose blockquote:not(:global(.custom-component) blockquote)::before {
  content: '“';
  font-size: var(--base-size-48);
  line-height: var(--base-size-64);
  font-weight: var(--base-text-weight-extrabold);
  position: absolute;
  top: 0;
}

.Prose blockquote:not(:global(.custom-component) blockquote)::after {
  content: '';
  display: block;
  position: absolute;
  width: var(--brand-borderWidth-thick);
  height: 100%;
  top: 0;
  left: 0;
  background-color: var(--base-color-scale-indigo-5);
  background-image: linear-gradient(180deg, var(--base-color-scale-blue-5), var(--base-color-scale-purple-5));
}

.Prose figure figcaption:not(:global(.custom-component) figure figcaption) {
  font-family: var(--brand-fontStack-monospace);
  font-size: var(--brand-text-size-100);
  line-height: var(--brand-text-lineHeight-100);
  color: var(--brand-color-text-muted);
}

.Prose hr:not(:global(.custom-component) hr) {
  --spacing: var(--base-size-64);
  border: 0;
  height: 1px;
  background: var(--brand-color-border-default);
}

/**
* 10. Tables
*/

.Prose table:not(:global(.custom-component) table) {
  width: 100%;
  overflow: auto;
  border-collapse: separate;
  border-spacing: 0;
}

.Prose th:not(:global(.custom-component) th) {
  font-weight: var(--brand-text-weight-600);
  background-color: var(--brand-color-bg-subtle);
}

.Prose :is(th, td):not(:global(.custom-component) :is(th, td)) {
  padding: var(--base-size-8) var(--base-size-16);
  border-color: var(--brand-color-border-muted);
  border-style: solid;
  border-width: 0;
  border-left-width: var(--brand-borderWidth-thin);
  border-top-width: var(--brand-borderWidth-thin);
}

.Prose tr:last-child td:not(:global(.custom-component) tr:last-child td) {
  border-bottom-width: var(--brand-borderWidth-thin);
}

.Prose tr :is(td, th):last-child:not(:global(.custom-component) tr :is(td, th):last-child) {
  border-right-width: var(--brand-borderWidth-thin);
}

.Prose thead th:first-child:not(:global(.custom-component) thead th:first-child) {
  border-top-left-radius: var(--brand-borderRadius-medium);
}

.Prose thead th:last-child:not(:global(.custom-component) thead th:last-child) {
  border-top-right-radius: var(--brand-borderRadius-medium);
}

.Prose tbody tr:last-child td:last-child:not(:global(.custom-component) tbody tr:last-child td:last-child) {
  border-bottom-right-radius: var(--brand-borderRadius-medium);
}

.Prose tbody tr:last-child td:first-child:not(:global(.custom-component) tbody tr:last-child td:first-child) {
  border-bottom-left-radius: var(--brand-borderRadius-medium);
}

.Prose table img:not(:global(.custom-component) table img) {
  background-color: transparent;
  vertical-align: middle;
}

/**
* 11. Custom stuff - Move out to separate stylesheet
*/
.customPageHero {
  padding-top: 0;
}