/*
 * BS.Web.Blog: the article page.      <link rel="stylesheet" href="/_content/BS.Web.Blog/bs-article.css">
 *
 * The page writes the frame; BlogArticleBody and BlogArticlePage.TableOfContents write what stands in brackets:
 *
 *   <article class="bs-article">                     one centred column, --bs-article-measure wide
 *     <header class="bs-article-header">
 *       <p class="bs-article-eyebrow">Guide</p>      the pill above the title (a span or a link works too)
 *       <h1>Title</h1>
 *       <p class="bs-article-lead">Description</p>
 *       <p class="bs-article-meta"><time>...</time> <span>...</span></p>     date, reading time, author; icons 1.25rem
 *     </header>
 *     <figure class="bs-article-hero"><img src="..." alt="" width="1200" height="672" fetchpriority="high"></figure>
 *     [nav.bs-article-toc]                            before the body, not inside it
 *     <div class="bs-article-body">[BlogArticleBody.Html: figure.bs-article-figure, div.bs-article-table,
 *       section.bs-article-faq > details.bs-article-faq-item > summary + div.bs-article-faq-answer, section.bs-article-closing]</div>
 *     <aside class="bs-article-cta"><h2>Next step</h2><p>...</p><a href="...">...</a></aside>
 *     <section class="bs-article-share"><h2>Share</h2><ul><li><a href="...">LinkedIn</a></li></ul></section>
 *   </article>
 *
 * The theme: set any of these on :root, body or .bs-article, in any cascade layer (this file only reads them, so nothing here
 * competes with a site's values). Every colour, radius and font comes from them; the defaults make a light page.
 *
 *   --bs-article-measure        40rem               width of the column (about 70 characters of the text)
 *   --bs-article-bg             #ffffff             the page behind the article: the question cards
 *   --bs-article-ink            #172033             text
 *   --bs-article-muted          #5a6478             lead, meta, captions, quotes, the contents' label
 *   --bs-article-accent         #1d4ed8             links, list markers, eyebrow, closing box, call to action
 *   --bs-article-accent-ink     #ffffff             text on the accent: step numbers, call to action
 *   --bs-article-heading        the accent          the title and the closing box's heading
 *   --bs-article-surface        #f3f5f9             contents box, code, table heads, hover, pictures while loading
 *   --bs-article-border         #dce1ea             rules, table lines, question cards
 *   --bs-article-shadow         #0b1530             shadows (on a dark page: black)
 *   --bs-article-focus          the accent          focus rings
 *   --bs-article-radius         1rem                boxes and pictures; smaller parts in proportion, 0 for square corners
 *   --bs-article-font           the page's font     text
 *   --bs-article-font-display   --bs-article-font   headings
 *   --bs-article-cta-bg         accent gradient     background of the call to action (any background value)
 *   --bs-article-scroll-margin  1.5rem              room above a section a contents link jumps to (a sticky header's height)
 *
 * A dark page, for example:
 *   :root { --bs-article-bg: #0b0f17; --bs-article-ink: #e6e9ef; --bs-article-muted: #9aa3b2; --bs-article-accent: #7aa2ff;
 *           --bs-article-accent-ink: #0b0f17; --bs-article-surface: #151b27; --bs-article-border: #2a3344;
 *           --bs-article-shadow: #000000; }
 */

/* The theme with its defaults, taken on every part a page may use on its own (private: --_bsa-*). */
:where(.bs-article, .bs-article-header, .bs-article-hero, .bs-article-toc, .bs-article-body, .bs-article-cta, .bs-article-share) {
  --_bsa-bg: var(--bs-article-bg, #ffffff);
  --_bsa-ink: var(--bs-article-ink, #172033);
  --_bsa-muted: var(--bs-article-muted, #5a6478);
  --_bsa-accent: var(--bs-article-accent, #1d4ed8);
  --_bsa-accent-ink: var(--bs-article-accent-ink, #ffffff);
  --_bsa-heading: var(--bs-article-heading, var(--_bsa-accent));
  --_bsa-surface: var(--bs-article-surface, #f3f5f9);
  --_bsa-border: var(--bs-article-border, #dce1ea);
  --_bsa-shadow: var(--bs-article-shadow, #0b1530);
  --_bsa-focus: var(--bs-article-focus, var(--_bsa-accent));
  --_bsa-radius: var(--bs-article-radius, 1rem);
}

/* The column. Without --bs-article-font the text keeps the page's font. */
.bs-article {
  box-sizing: border-box;
  margin-inline: auto;
  width: 100%;
  max-width: var(--bs-article-measure, 40rem);
  color: var(--_bsa-ink);
  font-family: var(--bs-article-font);
}

/* Header: eyebrow pill, title, lead, meta. */
.bs-article-header { margin: 0; }
.bs-article-header > :first-child { margin-top: 0; }
.bs-article-eyebrow {
  display: inline-block;
  margin: 0;
  border-radius: 9999px;
  background-color: color-mix(in srgb, var(--_bsa-accent) 10%, transparent);
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--_bsa-accent);
}
.bs-article-header h1 {
  margin: 1.25rem 0 0;
  font-family: var(--bs-article-font-display, var(--bs-article-font));
  font-size: 1.875rem;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--_bsa-heading);
  text-wrap: balance;
  overflow-wrap: break-word;
  hyphens: auto;
}
.bs-article-lead { margin: 1.25rem 0 0; font-size: 1.125rem; line-height: 1.75rem; color: var(--_bsa-muted); }
.bs-article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.5rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--_bsa-muted);
}
.bs-article-meta > * { display: inline-flex; align-items: center; gap: 0.5rem; margin: 0; }
.bs-article-meta :is(img, svg) { flex: none; width: 1.25rem; height: 1.25rem; }
:where(.bs-article-meta) a { color: inherit; }

/* The cover and the pictures: full width, rounded, a fine ring and a soft shadow; the surface until they have loaded. */
.bs-article-hero { margin: 2.5rem 0 0; }
.bs-article-hero img,
.bs-article-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--_bsa-radius);
  background-color: var(--_bsa-surface);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--_bsa-ink) 8%, transparent),
    0 2px 6px color-mix(in srgb, var(--_bsa-shadow) 6%, transparent),
    0 20px 40px -28px color-mix(in srgb, var(--_bsa-shadow) 45%, transparent);
}
.bs-article-hero img { aspect-ratio: 16 / 9; object-fit: cover; }
.bs-article-hero figcaption,
.bs-article-figure figcaption {
  margin-top: 0.875rem;
  padding-inline: 0.5rem;
  text-align: center;
  font-size: 0.875rem;
  line-height: 1.375rem;
  color: var(--_bsa-muted);
  text-wrap: balance;
}

/* The table of contents. */
.bs-article-toc {
  margin: 2.5rem 0 0;
  border-radius: var(--_bsa-radius);
  background-color: var(--_bsa-surface);
  padding: 1.5rem;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--_bsa-ink) 6%, transparent);
}
.bs-article-toc h2 {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--_bsa-muted);
}
.bs-article-toc ol { margin: 0.75rem 0 0; padding: 0; list-style: none; }
.bs-article-toc ol:first-child { margin-top: 0; }
.bs-article-toc li { margin: 0; padding: 0; }
.bs-article-toc a {
  display: flex;
  gap: 0.75rem;
  padding-block: 0.375rem;
  font-weight: 500;
  line-height: 1.5rem;
  color: var(--_bsa-ink);
  text-decoration: none;
  transition: color 0.2s;
}
.bs-article-toc a::before {
  content: "";
  flex: none;
  margin-top: 0.25rem;
  width: 1rem;
  height: 1rem;
  background-color: var(--_bsa-accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 0.2s;
}
.bs-article-toc a:hover { color: var(--_bsa-accent); }
.bs-article-toc a:hover::before { transform: translateX(0.125rem); }
.bs-article-toc a:focus-visible { outline: 2px solid var(--_bsa-focus); outline-offset: 2px; border-radius: 0.25rem; }

/* The text. Lines have a fixed height (--_bsa-leading), so the list markers sit on the first line whatever their size. */
.bs-article-body {
  --_bsa-leading: 1.875rem;
  margin: 2.5rem 0 0;
  font-size: 1.0625rem;
  line-height: var(--_bsa-leading);
  color: var(--_bsa-ink);
  overflow-wrap: break-word;
}
.bs-article-body > :first-child { margin-top: 0; }
.bs-article-body > :last-child { margin-bottom: 0; }
.bs-article-body p { margin: 1.25rem 0; }
.bs-article-body :is(h2, h3, h4, h5, h6) {
  font-family: var(--bs-article-font-display, var(--bs-article-font));
  font-weight: 600;
  color: inherit;
}
.bs-article-body h2 {
  margin: 3.5rem 0 1rem;
  scroll-margin-top: var(--bs-article-scroll-margin, 1.5rem);
  font-size: 1.5rem;
  line-height: 1.3;
  text-wrap: balance;
}
.bs-article-body h3 { margin: 2.25rem 0 0.75rem; font-size: 1.25rem; line-height: 1.4; }
.bs-article-body :is(h4, h5, h6) { margin: 1.75rem 0 0.5rem; font-size: 1.0625rem; line-height: 1.5; }
.bs-article-body a {
  color: var(--_bsa-accent);
  text-decoration-line: underline;
  text-decoration-color: color-mix(in srgb, var(--_bsa-accent) 35%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: text-decoration-color 0.2s;
}
.bs-article-body a:hover { text-decoration-color: currentColor; }
.bs-article-body a:focus-visible { outline: 2px solid var(--_bsa-focus); outline-offset: 2px; border-radius: 0.125rem; }
.bs-article-body strong { font-weight: 600; }
.bs-article-body em { font-style: italic; }
.bs-article-body img { max-width: 100%; height: auto; }
.bs-article-body code {
  border-radius: calc(var(--_bsa-radius) * 0.375);
  background-color: var(--_bsa-surface);
  padding: 0.125rem 0.375rem;
  font-size: 0.875em;
}
.bs-article-body pre {
  margin: 1.75rem 0;
  overflow-x: auto;
  border-radius: calc(var(--_bsa-radius) * 0.75);
  background-color: var(--_bsa-surface);
  padding: 1rem 1.25rem;
  font-size: 0.875rem;
  line-height: 1.5rem;
}
.bs-article-body pre code { border-radius: 0; background: none; padding: 0; font-size: inherit; }
.bs-article-body blockquote {
  margin: 2rem 0;
  border-inline-start: 4px solid var(--_bsa-accent);
  padding: 0;
  padding-inline-start: 1.25rem;
  color: var(--_bsa-muted);
}
.bs-article-body blockquote > :first-child { margin-top: 0; }
.bs-article-body blockquote > :last-child { margin-bottom: 0; }
.bs-article-body hr { margin: 3rem 0; height: 0; border: 0; border-top: 1px solid var(--_bsa-border); }

/* Lists: check marks in the accent; numbered lists as steps in circles (a list that starts later is reset by BlogArticleBody). */
.bs-article-body :is(ul, ol) { margin: 1.5rem 0; padding: 0; list-style: none; }
.bs-article-body li { position: relative; margin: 0; padding-inline-start: 2.25rem; }
.bs-article-body li + li { margin-top: 0.625rem; }
.bs-article-body li > :is(ul, ol) { margin: 0.625rem 0 0; }
.bs-article-body li > p { margin: 0.5rem 0; }
.bs-article-body li > p:first-child { margin-top: 0; }
.bs-article-body li > p:last-child { margin-bottom: 0; }
.bs-article-body ul > li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: calc((var(--_bsa-leading) - 1.375rem) / 2);
  width: 1.375rem;
  height: 1.375rem;
  background-color: var(--_bsa-accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Ccircle cx='11' cy='11' r='11' fill-opacity='.1'/%3E%3Cpath d='m7.06 11.44 2.63 2.62 5.25-6.12' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Ccircle cx='11' cy='11' r='11' fill-opacity='.1'/%3E%3Cpath d='m7.06 11.44 2.63 2.62 5.25-6.12' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.bs-article-body ol { counter-reset: bs-article-step; }
.bs-article-body ol > li { counter-increment: bs-article-step; padding-inline-start: 2.75rem; }
.bs-article-body ol > li::before {
  content: counter(bs-article-step);
  position: absolute;
  inset-inline-start: 0;
  top: calc((var(--_bsa-leading) - 1.875rem) / 2);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.875rem;
  height: 1.875rem;
  border-radius: 9999px;
  background-color: var(--_bsa-accent);
  font-size: 0.875rem;
  line-height: 1;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--_bsa-accent-ink);
}

/* Pictures in the text and tables, which scroll sideways in their frame on a phone. */
.bs-article-body h2 + .bs-article-figure { margin-top: 1.5rem; }
.bs-article-figure { margin: 2.5rem 0; }
.bs-article-figure img { aspect-ratio: auto 1200 / 672; }
.bs-article-table {
  margin: 2rem 0;
  overflow-x: auto;
  border: 1px solid var(--_bsa-border);
  border-radius: calc(var(--_bsa-radius) * 0.75);
}
.bs-article-table table { width: 100%; border-collapse: collapse; border-spacing: 0; font-size: 0.9375rem; line-height: 1.5rem; }
.bs-article-table :is(th, td) { border: 0; padding: 0.75rem 1rem; text-align: start; vertical-align: top; }
.bs-article-table th { background-color: var(--_bsa-surface); font-weight: 600; }
.bs-article-table td { border-top: 1px solid var(--_bsa-border); }

/* The readers' questions: a card per question, closed until clicked (keyboard: Tab, then Enter or Space). */
.bs-article-faq-item {
  margin-top: 0.75rem;
  border-radius: calc(var(--_bsa-radius) * 0.875);
  background-color: var(--_bsa-bg);
  box-shadow: inset 0 0 0 1px var(--_bsa-border);
  transition: box-shadow 0.2s;
}
.bs-article-faq > .bs-article-faq-item:first-of-type { margin-top: 1.5rem; }
.bs-article-faq-item[open] {
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--_bsa-accent) 30%, transparent),
    0 16px 32px -24px color-mix(in srgb, var(--_bsa-shadow) 45%, transparent);
}
.bs-article-faq-item > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-radius: calc(var(--_bsa-radius) * 0.875);
  padding: 1rem 1.25rem;
  cursor: pointer;
  list-style: none;
  transition: background-color 0.2s;
}
.bs-article-faq-item > summary::-webkit-details-marker { display: none; }
.bs-article-faq-item > summary:hover { background-color: var(--_bsa-surface); }
.bs-article-faq-item > summary:focus-visible { outline: 2px solid var(--_bsa-focus); outline-offset: 2px; }
.bs-article-faq-item[open] > summary { border-end-start-radius: 0; border-end-end-radius: 0; }
.bs-article-faq-item > summary h3 { margin: 0; font-size: 1.0625rem; line-height: 1.5rem; font-weight: 600; }
.bs-article-faq-item > summary::after {
  content: "";
  flex: none;
  width: 2rem;
  height: 2rem;
  background-color: var(--_bsa-accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='16' fill-opacity='.08'/%3E%3Cpath d='m12 14 4 4 4-4' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='16' fill-opacity='.08'/%3E%3Cpath d='m12 14 4 4 4-4' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 0.2s;
}
.bs-article-faq-item[open] > summary::after { transform: rotate(180deg); }
.bs-article-faq-answer { padding: 0.25rem 1.25rem 1.25rem; }
.bs-article-faq-answer > :first-child { margin-top: 0; }
.bs-article-faq-answer > :last-child { margin-bottom: 0; }

/* The closing section, in a box tinted with the accent. */
.bs-article-closing {
  margin-top: 3.5rem;
  border-radius: var(--_bsa-radius);
  padding: 1.5rem;
  background-image: linear-gradient(
    135deg,
    color-mix(in srgb, var(--_bsa-accent) 7%, transparent),
    color-mix(in srgb, var(--_bsa-accent) 4%, transparent));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--_bsa-accent) 14%, transparent);
}
.bs-article-closing > h2 { margin-top: 0; color: var(--_bsa-heading); }
.bs-article-closing > :last-child { margin-bottom: 0; }

/* The call to action: the accent (a gradient from it where the browser can turn its hue), its text in --bs-article-accent-ink.
   Links take the box's text colour; a site's own button classes win over that. */
.bs-article-cta {
  box-sizing: border-box;
  margin-top: 2.5rem;
  border-radius: var(--_bsa-radius);
  padding: 2rem 1.5rem;
  background: var(--bs-article-cta-bg, var(--_bsa-accent));
  color: var(--_bsa-accent-ink);
  box-shadow: 0 28px 56px -32px color-mix(in srgb, var(--_bsa-shadow) 60%, transparent);
}
@supports (color: oklch(from red l c h)) {
  .bs-article-cta {
    background: var(--bs-article-cta-bg, linear-gradient(135deg, var(--_bsa-accent), oklch(from var(--_bsa-accent) l c calc(h + 25))));
  }
}
.bs-article-cta > :first-child { margin-top: 0; }
.bs-article-cta :is(h2, h3) {
  margin: 0;
  font-family: var(--bs-article-font-display, var(--bs-article-font));
  font-size: 1.5rem;
  line-height: 1.3;
  font-weight: 600;
  color: inherit;
  text-wrap: balance;
}
.bs-article-cta p { margin: 0.75rem 0 0; line-height: 1.625rem; color: color-mix(in srgb, var(--_bsa-accent-ink) 88%, transparent); }
:where(.bs-article-cta) a { color: inherit; font-weight: 600; text-decoration-line: underline; text-underline-offset: 0.2em; }
:where(.bs-article-cta) a:focus-visible { outline: 2px solid var(--_bsa-accent-ink); outline-offset: 2px; }

/* The share links. */
.bs-article-share { margin-top: 3rem; border-top: 1px solid var(--_bsa-border); padding-top: 2rem; color: var(--_bsa-ink); }
.bs-article-share > :first-child { margin-top: 0; }
.bs-article-share :is(h2, h3) {
  margin: 0;
  font-family: var(--bs-article-font-display, var(--bs-article-font));
  font-size: 1.25rem;
  line-height: 1.4;
  font-weight: 600;
  color: var(--_bsa-heading);
}
.bs-article-share ul { display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.bs-article-share li { margin: 0; padding: 0; }
.bs-article-share a {
  color: var(--_bsa-accent);
  font-weight: 500;
  text-decoration-line: underline;
  text-decoration-color: color-mix(in srgb, var(--_bsa-accent) 35%, transparent);
  text-underline-offset: 0.2em;
}
.bs-article-share a:hover { text-decoration-color: currentColor; }
.bs-article-share a:focus-visible { outline: 2px solid var(--_bsa-focus); outline-offset: 2px; border-radius: 0.125rem; }

@media (min-width: 640px) {
  .bs-article-toc { padding: 1.75rem 2rem; }
  .bs-article-closing { padding: 2rem 2.5rem; }
  .bs-article-cta { padding: 2.5rem; }
}

@media (min-width: 1024px) {
  .bs-article-header h1 { font-size: 2.625rem; line-height: 1.15; }
  .bs-article-lead { font-size: 1.25rem; line-height: 2rem; }
  .bs-article-body { --_bsa-leading: 2rem; font-size: 1.125rem; }
  .bs-article-body h2 { font-size: 1.875rem; }
  .bs-article-figure { margin-block: 3rem; }
}

/* Long compounds on a phone; tables and question cards a little tighter there. */
@media (max-width: 639px) {
  .bs-article-body,
  .bs-article-lead { hyphens: auto; }
  .bs-article-table table { font-size: 0.875rem; line-height: 1.375rem; }
  .bs-article-table :is(th, td) { padding: 0.625rem 0.75rem; }
  .bs-article-faq-item > summary { padding: 1rem; }
  .bs-article-faq-answer { padding: 0.25rem 1rem 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  .bs-article-toc a,
  .bs-article-toc a::before,
  .bs-article-body a,
  .bs-article-faq-item,
  .bs-article-faq-item > summary,
  .bs-article-faq-item > summary::after { transition: none; }
}

/* High contrast (forced colours): the drawn markers in the system's text colour. */
@media (forced-colors: active) {
  .bs-article-toc a::before,
  .bs-article-body ul > li::before,
  .bs-article-faq-item > summary::after {
    background-color: CanvasText;
    forced-color-adjust: none;
  }
}