/* ==========================================================================
   Blog Typography
   Based on GitHub Primer Brand Prose component (editorial variant)
   Scoped to article parent — does not affect other pages
   
   Breakpoints:
     Mobile:  default (<768px)
     Tablet:  ≥768px
     Desktop: ≥1012px
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Font-face declarations
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "monosans";
  src: url(../fonts/monosans/MonaSans-variable.woff2) format("woff2-variations");
  font-weight: 200 900;
  font-display: swap;
}

@font-face {
  font-family: "monosansmono";
  src: url(../fonts/monosans/MonaSansMono-variable.woff2) format("woff2-variations");
  font-weight: 200 900;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   1. Custom Properties (scoped to article)
   -------------------------------------------------------------------------- */

article {
  /* --- Font stacks --- */
  --blog-font-body: "monosans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --blog-font-heading: var(--blog-font-body);
  --blog-font-alt: "monosans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --blog-font-mono: "monosansmono", monospace;

  /* --- Colors --- */
  --blog-color-text: #24292f;
  --blog-color-text-muted: #57606a;
  --blog-color-link: #0550ae;
  --blog-color-accent: #020281;
  --blog-color-border: #afb8c1;
  --blog-color-border-muted: rgba(211, 217, 223, 0.996);
  --blog-color-bg-subtle: #f6f8fa;
  --blog-color-code-bg: #eff2ff;

  /* --- Border --- */
  --blog-border-thin: max(1px, 0.0625rem);
  --blog-border-thick: max(2px, 0.125rem);
  --blog-border-thicker: max(4px, 0.25rem);
  --blog-radius-sm: 4px;
  --blog-radius-md: 8px;
  --blog-radius-lg: 16px;

  /* --- Font weights (variable font) --- */
  --blog-weight-normal: 400;
  --blog-weight-heading-h1: 440;
  --blog-weight-heading-h2: 460;
  --blog-weight-heading-h3: 480;
  --blog-weight-heading-h4: 480;
  --blog-weight-heading-h5: 550;
  --blog-weight-heading-h6: 550;
  --blog-weight-bold: 550;
  --blog-weight-extrabold: 800;

  /* --- Spacing --- */
  --blog-spacing-element: 40px;
  --blog-spacing-heading: 64px;
  --blog-spacing-after-heading: 24px;
  --blog-spacing-subheading: 48px;
  --blog-spacing-paragraph: 40px;
  --blog-spacing-list: 48px;
  --blog-spacing-list-gap: 16px;
  --blog-spacing-list-indent: 24px;
  --blog-spacing-blockquote: 24px;
  --blog-spacing-media: 48px;
  --blog-spacing-table: 48px;
  --blog-spacing-hr: 64px;
  --blog-spacing-figcaption: 24px;

  /* --- Line length --- */
  --blog-line-length: 68ch;

  /* --- Responsive text sizes (mobile-first, overridden in media queries) --- */
  --blog-size-h1: 36px;
  --blog-lh-h1: 1.2;
  --blog-size-h2: 24px;
  --blog-lh-h2: 1.3;
  --blog-size-h3: 20px;
  --blog-lh-h3: 1.3;
  --blog-size-h4: 18px;
  --blog-lh-h4: 1.5;
  --blog-size-h5: 16px;
  --blog-lh-h5: 1.3;
  --blog-size-h6: 16px;
  --blog-lh-h6: 1.3;
  --blog-size-body: 18px;
  --blog-lh-body: 1.7;
  --blog-size-small: 16px;
  --blog-lh-small: 1.5;
  --blog-size-caption: 14px;
  --blog-lh-caption: 1.5;
  --blog-size-blockquote: 22px;
  --blog-lh-blockquote: 1.3;
  --blog-size-blockquote-mark: 64px;
  --blog-size-faq-title: 28px;
  --blog-lh-faq-title: 1.2;

  /* --- UL bullet (SVG dash) --- */
  --blog-bullet: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -3 16 16' width='16' height='16' fill='black'%3e%3cpath d='M2 7.75A.75.75 0 0 1 2.75 7h10a.75.75 0 0 1 0 1.5h-10A.75.75 0 0 1 2 7.75Z'%3e%3c/path%3e%3c/svg%3e");
}

/* --------------------------------------------------------------------------
   2. Tablet variable overrides (≥768px)
   -------------------------------------------------------------------------- */

@media (min-width: 768px) {
  article {
    --blog-size-h1: 48px;
    --blog-size-h2: 28px;
    --blog-size-h3: 20px;
    --blog-size-blockquote: 24px;
    --blog-size-faq-title: 34px;
  }
}

/* --------------------------------------------------------------------------
   3. Desktop variable overrides (≥1012px)
   -------------------------------------------------------------------------- */

@media (min-width: 1012px) {
  article {
    --blog-size-h1: 56px;
    --blog-lh-h1: 1.1;
    --blog-size-h2: 34px;
    --blog-size-h3: 22px;
    --blog-size-blockquote: 28px;
    --blog-lh-blockquote: 1.35;
    --blog-size-faq-title: 40px;
  }
}

/* --------------------------------------------------------------------------
   4. Base container
   -------------------------------------------------------------------------- */

article {
  font-family: var(--blog-font-body);
  font-size: var(--blog-size-body);
  line-height: var(--blog-lh-body);
  color: var(--blog-color-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

article>*+* {
  margin-block-start: var(--blog-spacing-element);
}

/* First child in the blog container should have no top margin */
article>*:first-child {
  margin-block-start: 0;
}

/* --------------------------------------------------------------------------
   5. Headings
   -------------------------------------------------------------------------- */

article h1,
article h2,
article h3,
article h4,
article h5,
article h6 {
  font-family: var(--blog-font-heading);
  margin: 0;
  margin-block-end: 0;
}

/* -- H1 -- */
article h1 {
  font-size: var(--blog-size-h1);
  line-height: var(--blog-lh-h1);
  font-weight: var(--blog-weight-heading-h1);
  letter-spacing: 0;
  margin-block-start: var(--blog-spacing-heading);
  margin-bottom: var(--blog-spacing-after-heading);
}

/* -- H2 -- */
article h2 {
  font-size: var(--blog-size-h2);
  line-height: var(--blog-lh-h2);
  font-weight: var(--blog-weight-heading-h2);
  letter-spacing: 0;
  margin-block-start: var(--blog-spacing-heading);
  max-width: 26ch;
}

/* -- H3 -- */
article h3 {
  font-size: var(--blog-size-h3);
  line-height: var(--blog-lh-h3);
  font-weight: var(--blog-weight-heading-h3);
  letter-spacing: 0;
  margin-block-start: var(--blog-spacing-heading);
}

/* -- H4 -- */
article h4 {
  font-size: var(--blog-size-h4);
  line-height: var(--blog-lh-h4);
  font-weight: var(--blog-weight-heading-h4);
  letter-spacing: 0;
  margin-block-start: var(--blog-spacing-subheading);
}

/* -- H5 & H6 -- */
article h5,
article h6 {
  font-size: var(--blog-size-h5);
  line-height: var(--blog-lh-h5);
  font-weight: var(--blog-weight-heading-h5);
  letter-spacing: 0;
  margin-block-start: var(--blog-spacing-subheading);
}

/* Subheading directly after a parent heading gets tighter spacing.
   Only heading+heading pairs use the reduced gap — other elements
   (paragraphs, lists, etc.) keep their normal spacing per the live
   Primer Brand Prose component. */
article h1+h2,
article h1+h3,
article h2+h3,
article h2+h4,
article h3+h4 {
  margin-block-start: var(--blog-spacing-after-heading);
}

/* --------------------------------------------------------------------------
   6. Paragraphs
   -------------------------------------------------------------------------- */

article p {
  font-size: var(--blog-size-body);
  line-height: var(--blog-lh-body);
  font-weight: var(--blog-weight-normal);
  color: var(--blog-color-text);
  margin-block-start: var(--blog-spacing-paragraph);
  margin-block-end: 0;
}

/* --------------------------------------------------------------------------
   7. Lists
   -------------------------------------------------------------------------- */

article ul,
article ol {
  display: flex;
  flex-direction: column;
  gap: var(--blog-spacing-list-gap);
  padding: 0;
  margin-inline-start: var(--blog-spacing-list-indent);
  margin-block-start: var(--blog-spacing-list);
  margin-block-end: 0;
  font-size: var(--blog-size-body);
  line-height: var(--blog-lh-body);
}

article ul {
  list-style-type: image;
  list-style-image: var(--blog-bullet);
}

article ol {
  list-style-type: decimal;
}

article li {
  margin-block-start: 0;
  margin-block-end: 0;
  font-size: var(--blog-size-body);
  line-height: var(--blog-lh-body);
}

/* Nested lists */
article li>ul,
article li>ol {
  margin-block-start: var(--blog-spacing-list-gap);
}

/* --------------------------------------------------------------------------
   8. Inline elements
   -------------------------------------------------------------------------- */

/* -- Strong / Bold -- */
article strong,
article b {
  font-weight: var(--blog-weight-bold);
  font-size: inherit;
  line-height: inherit;
}

/* -- Emphasis -- */
article em {
  font-variation-settings: "ital" 10;
  font-synthesis: none;
  font-size: inherit;
  line-height: inherit;
}

/* -- Links -- */
article a {
  color: var(--blog-color-link);
  font-size: inherit;
  line-height: inherit;
  text-decoration: underline;
  text-decoration-color: var(--blog-color-link);
  text-decoration-thickness: var(--blog-border-thin);
  text-underline-position: under;
  transition: 0.15s text-decoration;
}

article a:hover {
  text-decoration-thickness: var(--blog-border-thick);
}

/* -- Inline code -- */
article code {
  font-family: var(--blog-font-mono);
  font-size: var(--blog-size-caption);
  white-space: break-spaces;
  padding: 4px 8px;
  border-radius: var(--blog-radius-sm);
  background-color: var(--blog-color-code-bg);
}

/* -- Pre / Code blocks -- */
article pre {
  padding: 16px;
  border-radius: var(--blog-radius-md);
  background-color: var(--blog-color-code-bg);
  overflow-x: auto;
  margin-block-start: var(--blog-spacing-element);
}

article pre code {
  padding: 0;
  background: none;
  border-radius: 0;
}

/* --------------------------------------------------------------------------
   9. Images & Media
   -------------------------------------------------------------------------- */

article img {
  display: block;
  max-width: 100%;
  height: auto;
  margin-inline: auto;
  margin-block-start: var(--blog-spacing-media);
  margin-block-end: var(--blog-spacing-media);
}

article figure {
  margin: 0;
  margin-block-start: var(--blog-spacing-media);
}

article figure img {
  margin-block-start: 0;
  margin-block-end: 0;
  border-radius: var(--blog-radius-md);
}

article video {
  display: block;
  max-width: 100%;
  height: auto;
  margin-inline: auto;
  margin-block-start: var(--blog-spacing-media);
  margin-block-end: var(--blog-spacing-media);
  border-radius: var(--blog-radius-md);
}

article iframe[src*="youtube.com"],
article iframe[src*="youtu.be"],
article iframe[src*="youtube-nocookie.com"] {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin-inline: auto;
  margin-block-start: var(--blog-spacing-media);
  margin-block-end: var(--blog-spacing-media);
  border: none;
  border-radius: var(--blog-radius-md);
}

/* --------------------------------------------------------------------------
   10. Blockquote
   -------------------------------------------------------------------------- */

article blockquote {
  position: relative;
  font-size: var(--blog-size-blockquote);
  line-height: var(--blog-lh-blockquote);
  padding-top: 64px;
  padding-bottom: 8px;
  margin-block-start: var(--blog-spacing-blockquote);
  margin-block-end: var(--blog-spacing-blockquote);
  margin-inline: 0;
}

/* Opening quote mark */
article blockquote::before {
  content: "\201C";
  font-size: var(--blog-size-blockquote-mark);
  line-height: 64px;
  font-weight: var(--blog-weight-extrabold);
  color: var(--blog-color-accent);
  position: absolute;
  top: 0;
  left: 0;
}

article blockquote p {
  margin-block-start: 0;
}

article blockquote p+p {
  margin-block-start: 1em;
}

/* --------------------------------------------------------------------------
   11. Figcaption
   -------------------------------------------------------------------------- */

article figcaption {
  margin-block-start: var(--blog-spacing-figcaption);
  font-family: var(--blog-font-mono);
  font-size: var(--blog-size-caption);
  line-height: var(--blog-lh-caption);
  color: var(--blog-color-text-muted);
  font-weight: var(--blog-weight-normal);
}

/* --------------------------------------------------------------------------
   12. Horizontal Rule
   -------------------------------------------------------------------------- */

article hr {
  margin-block-start: var(--blog-spacing-hr);
  margin-block-end: var(--blog-spacing-hr);
  border: none;
  border-top: 1px solid var(--blog-color-border-muted);
}

/* --------------------------------------------------------------------------
   12b. Details / Summary (FAQ accordion)
   -------------------------------------------------------------------------- */

article details {
  border-block-end: var(--blog-border-thin) solid var(--blog-color-border-muted);
  position: relative;
}

article details summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 48px 24px 0;
  cursor: pointer;
  list-style: none;
  font-size: var(--blog-size-body);
  font-weight: var(--blog-weight-heading-h4);
  line-height: var(--blog-lh-body);
  color: var(--blog-color-text);
}

/* Hide native marker across browsers */
article details summary::-webkit-details-marker { display: none; }
article details summary::marker { display: none; content: ""; }

/* Chevron icon via ::after pseudo-element */
article details summary::after {
  content: "";
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  background-color: var(--blog-color-accent);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.22 8.22a.749.749 0 0 0 0 1.06l6.25 6.25a.749.749 0 0 0 1.06 0l6.25-6.25a.749.749 0 1 0-1.06-1.06L12 13.94 6.28 8.22a.749.749 0 0 0-1.06 0Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.22 8.22a.749.749 0 0 0 0 1.06l6.25 6.25a.749.749 0 0 0 1.06 0l6.25-6.25a.749.749 0 1 0-1.06-1.06L12 13.94 6.28 8.22a.749.749 0 0 0-1.06 0Z'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  transition: transform 0.2s ease;
}

article details[open] summary::after {
  transform: translateY(-50%) rotate(180deg);
}

/* Content area inside details */
article details > :not(summary) {
  padding-block-end: 24px;
  margin-block-start: -12px;
  color: var(--blog-color-text-muted);
}

/* --------------------------------------------------------------------------
   13. Tables
   -------------------------------------------------------------------------- */

article table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  font-size: var(--blog-size-small);
  line-height: var(--blog-lh-small);
  margin-block-start: var(--blog-spacing-table);
  margin-block-end: 0;
}

article table caption {
  text-align: left;
  padding-block-end: 24px;
  font-size: var(--blog-size-caption);
  font-weight: var(--blog-weight-normal);
  line-height: var(--blog-lh-caption);
  color: var(--blog-color-text-muted);
}

article table th,
article table td {
  padding: 16px 12px;
  text-align: left;
  vertical-align: top;
  border-bottom: var(--blog-border-thin) solid var(--blog-color-border-muted);
}

article table th:first-child,
article table td:first-child,
article table th:last-child,
article table td:last-child {
  padding-inline: 0;
}

article table th {
  font-size: var(--blog-size-caption);
  font-weight: var(--blog-weight-normal);
  line-height: var(--blog-lh-caption);
  color: var(--blog-color-text-muted);
}

article table thead th {
  border-bottom: var(--blog-border-thick) solid var(--blog-color-border);
}

article table tbody tr:last-child td {
  border-bottom: none;
}

/* -- Table: tablet+ refinements -- */
@media (min-width: 768px) {

  article table th,
  article table td {
    padding: 16px 8px;
  }

  article table th:not(:first-child):not(:last-child),
  article table td:not(:first-child):not(:last-child) {
    padding-inline: 16px;
  }

  article table th:first-child,
  article table td:first-child {
    padding-inline-start: 0;
  }

  article table th:last-child,
  article table td:last-child {
    padding-inline-end: 0;
  }

  article table tbody tr:hover {
    background-color: var(--blog-color-bg-subtle);
  }
}

/* -- Table: mobile stacked layout -- */
@media (max-width: 767px) {
  article table:has(td[data-label]) {
    border-collapse: separate;
    border-spacing: 0;
  }

  article table:has(td[data-label]) thead {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
  }

  article table:has(td[data-label]) tbody,
  article table:has(td[data-label]) tr {
    display: block;
    width: 100%;
  }

  article table:has(td[data-label]) tr {
    border-block-start: var(--blog-border-thicker) solid var(--blog-color-border-muted);
    padding-block-start: 20px;
    margin-block-end: var(--blog-spacing-element);
  }

  article td[data-label] {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 0;
    margin: 0 0 16px 0;
    border: none;
    align-items: flex-start;
  }

  article td[data-label]:not(:last-child) {
    border-block-end: var(--blog-border-thin) solid var(--blog-color-border-muted);
    padding-block-end: 20px;
  }

  article td[data-label]::before {
    content: attr(data-label);
    color: var(--blog-color-text-muted);
    margin-block-end: 4px;
    text-align: left;
    font-weight: var(--blog-weight-normal);
  }
}

/* --------------------------------------------------------------------------
   14. Line-length constraint (opt-in)
   -------------------------------------------------------------------------- */

article--constrained,
article article-content {
  max-width: var(--blog-line-length);
}

article--constrained h1 {
  max-width: 22ch;
}

article--constrained h2 {
  max-width: 26ch;
}

article--constrained h3 {
  max-width: 32ch;
}

/* --------------------------------------------------------------------------
  Custom
   -------------------------------------------------------------------------- */


div#author img {
  margin: 0px;
}


div#post-header {
  border-block-end-width: var(--blog-border-thin);
  border-color: var(--blog-color-border-muted);
  margin-block-end: var(--base-size-36);
  flex-direction: column;
}

div#post-header h1 {
  width: 100%;
}

div#post-header #post-meta>.flex {
  padding-block-end: var(--blog-spacing-paragraph);
}



#blog-toc ol li:first-of-type span {
    font-weight: 700 !important;
}