/* Typography Configuration for Tux Documentation */

/* ============================================
   TYPOGRAPHY BASE - WORK WITH MATERIAL'S SYSTEM
   ============================================ */
/* Material sets html font-size to 150% on large screens (1rem = 24px) */
/* Instead of fighting it, we work WITH Material's system */
/* Our typography overrides below use rem units that account for Material's scaling */
/* This way header/navigation work correctly AND our content sizing works */

/* Font Stack Configuration */
:root {
  /* Main font stack - Inter with fallbacks */
  font-family: Inter, sans-serif;
  font-feature-settings: 'liga' 1, 'calt' 1; /* fix for Chrome */
  --md-text-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", "Arial", sans-serif;

  /* Monospace font stack - JetBrains Mono with fallbacks */
  --md-code-font: "JetBrains Mono", "SF Mono", "Monaco", "Inconsolata", "Fira Code", "Droid Sans Mono", "Courier New", monospace;
}

/* Use Inter Variable font if supported */
@supports (font-variation-settings: normal) {
  :root {
    font-family: InterVariable, sans-serif;
    --md-text-font: "InterVariable", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", "Arial", sans-serif;
  }
}

/* ============================================
   TYPOGRAPHY RESET - Based on Modern CSS Reset
   ============================================ */

/* Remove default margin from all elements */
* {
  margin: 0;
}

/* Body typography defaults */
body {
  /* Accessible line-height for body text */
  line-height: 1.5;
  /* Improve text rendering on macOS */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Font rendering optimization */
* {
  text-rendering: auto;
  font-feature-settings: "kern" 1;
  font-kerning: normal;
  font-optical-sizing: none;
}

/* Use optimizeLegibility only for headings where it's beneficial */
h1, h2, h3, h4, h5, h6,
.md-typeset h1, .md-typeset h2, .md-typeset h3,
.md-typeset h4, .md-typeset h5, .md-typeset h6 {
  text-rendering: optimizeLegibility;
}

/* Avoid text overflows */
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

/* Improve line wrapping */
p {
  text-wrap: pretty;
}

h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}

/* Inherit fonts for form controls */
input, button, textarea, select {
  font: inherit;
}

/* ============================================
   TYPOGRAPHIC SCALE - Modular scale with 1.2 ratio
   ============================================ */
/* Based on: h1: 2.986rem, h2: 2.488rem, h3: 2.074rem, h4: 1.728rem, h5: 1.44rem, h6: 1.2rem, p: 1rem, small: 0.833rem */

/* H1 Reset - Most aggressive override */
/* Target all possible Material selectors with maximum specificity */
/* NOTE: Search results are EXCLUDED - they have their own styling below */
h1,
.md-typeset h1,
.md-content h1,
.md-content__inner h1,
.md-content__inner > h1,
article h1,
.md-typeset > h1,
.md-content__inner > h1,
article > h1,
[class*="md-typeset"] h1,
[class*="md-content"] h1,
.md-content-wrapper h1,
.md-content-wrapper > h1,
.md-typeset .md-content-wrapper h1,
.md-content .md-typeset h1,
.md-content__inner .md-typeset h1,
/* Any other wrapper combinations */
.md-main h1,
.md-main__inner h1,
.md-container h1 {
  font-size: 2.389rem !important; /* 47.78px with 125% html (2.389rem * 20px = 47.78px) */
  font-weight: 600 !important;
  line-height: 1.2 !important;
  margin-top: 0 !important;
  margin-bottom: 1rem !important;
}

@media screen and (min-width: 100em) {
  h1,
  .md-typeset h1,
  .md-content h1,
  .md-content__inner h1,
  .md-content__inner > h1,
  article h1,
  .md-typeset > h1,
  .md-content__inner > h1,
  article > h1,
  [class*="md-typeset"] h1,
  [class*="md-content"] h1,
  .md-content-wrapper h1,
  .md-content-wrapper > h1,
  .md-typeset .md-content-wrapper h1,
  .md-content .md-typeset h1,
  .md-content__inner .md-typeset h1,
  .md-main h1,
  .md-main__inner h1,
  .md-container h1 {
    font-size: 2.172rem !important; /* 47.78px with 137.5% html (2.172rem * 22px = 47.784px) */
  }
}

@media screen and (min-width: 125em) {
  h1,
  .md-typeset h1,
  .md-content h1,
  .md-content__inner h1,
  .md-content__inner > h1,
  article h1,
  .md-typeset > h1,
  .md-content__inner > h1,
  article > h1,
  [class*="md-typeset"] h1,
  [class*="md-content"] h1,
  .md-content-wrapper h1,
  .md-content-wrapper > h1,
  .md-typeset .md-content-wrapper h1,
  .md-content .md-typeset h1,
  .md-content__inner .md-typeset h1,
  .md-main h1,
  .md-main__inner h1,
  .md-container h1 {
    font-size: 1.991rem !important; /* 47.78px with 150% html (1.991rem * 24px = 47.784px) */
  }
}

/* Search result headings - EXCLUDE from global h1 styling */
/* Match MkDocs Material's search result styling exactly */
.md-search-result .md-typeset h1,
.md-search-result__article .md-typeset h1,
.md-search-result h1,
.md-search-result__article h1 {
  font-size: 0.667rem !important; /* Adjusted for Material's 150% html (0.667rem * 24px = 16px) */ /* 16px - Material default for search results */
  font-weight: 400 !important; /* Normal weight, not bold */
  line-height: 1.4 !important;
  margin: 0.6875rem 0 !important; /* 11px = 0.6875rem */
  color: var(--md-default-fg-color) !important;
}

.md-search-result .md-typeset h2,
.md-search-result__article .md-typeset h2,
.md-search-result h2,
.md-search-result__article h2 {
  font-size: 0.8rem !important; /* 12.8px - Material default for search result h2 */
  font-weight: 700 !important;
  line-height: 1.6 !important;
  margin: 0.5em 0 !important;
  color: var(--md-default-fg-color) !important;
}

/* H2 Reset */
/* NOTE: Search results are EXCLUDED - they have their own styling above */
h2,
.md-typeset h2,
.md-content h2,
.md-content__inner h2,
.md-content__inner > h2,
article h2,
.md-typeset > h2,
.md-content__inner > h2,
article > h2,
[class*="md-typeset"] h2,
[class*="md-content"] h2,
.md-content-wrapper h2,
.md-main h2,
.md-main__inner h2 {
  font-size: 1.991rem !important; /* 39.81px with 125% html (1.991rem * 20px = 39.82px) */
  font-weight: 500 !important;
  line-height: 1.3 !important;
  margin-top: 2rem !important;
  margin-bottom: 1rem !important;
}

@media screen and (min-width: 100em) {
  h2,
  .md-typeset h2,
  .md-content h2,
  .md-content__inner h2,
  .md-content__inner > h2,
  article h2,
  .md-typeset > h2,
  .md-content__inner > h2,
  article > h2,
  [class*="md-typeset"] h2,
  [class*="md-content"] h2,
  .md-content-wrapper h2,
  .md-main h2,
  .md-main__inner h2 {
    font-size: 1.810rem !important; /* 39.81px with 137.5% html (1.810rem * 22px = 39.82px) */
  }
}

@media screen and (min-width: 125em) {
  h2,
  .md-typeset h2,
  .md-content h2,
  .md-content__inner h2,
  .md-content__inner > h2,
  article h2,
  .md-typeset > h2,
  .md-content__inner > h2,
  article > h2,
  [class*="md-typeset"] h2,
  [class*="md-content"] h2,
  .md-content-wrapper h2,
  .md-main h2,
  .md-main__inner h2 {
    font-size: 1.659rem !important; /* 39.81px with 150% html (1.659rem * 24px = 39.816px) */
  }
}

/* H3 Reset */
h3,
.md-typeset h3,
.md-content h3,
.md-content__inner h3,
.md-content__inner > h3,
article h3,
.md-typeset > h3,
.md-content__inner > h3,
article > h3,
[class*="md-typeset"] h3,
[class*="md-content"] h3,
.md-content-wrapper h3,
.md-main h3,
.md-main__inner h3 {
  font-size: 1.659rem !important; /* 33.18px with 125% html (1.659rem * 20px = 33.18px) */
  font-weight: 500 !important;
  line-height: 1.3 !important;
  margin-top: 1.5rem !important;
  margin-bottom: 0.75rem !important;
}

@media screen and (min-width: 100em) {
  h3,
  .md-typeset h3,
  .md-content h3,
  .md-content__inner h3,
  .md-content__inner > h3,
  article h3,
  .md-typeset > h3,
  .md-content__inner > h3,
  article > h3,
  [class*="md-typeset"] h3,
  [class*="md-content"] h3,
  .md-content-wrapper h3,
  .md-main h3,
  .md-main__inner h3 {
    font-size: 1.508rem !important; /* 33.18px with 137.5% html (1.508rem * 22px = 33.176px) */
  }
}

@media screen and (min-width: 125em) {
  h3,
  .md-typeset h3,
  .md-content h3,
  .md-content__inner h3,
  .md-content__inner > h3,
  article h3,
  .md-typeset > h3,
  .md-content__inner > h3,
  article > h3,
  [class*="md-typeset"] h3,
  [class*="md-content"] h3,
  .md-content-wrapper h3,
  .md-main h3,
  .md-main__inner h3 {
    font-size: 1.383rem !important; /* 33.18px with 150% html (1.383rem * 24px = 33.192px) */
  }
}

/* H4 Reset */
h4,
.md-typeset h4,
.md-content h4,
.md-content__inner h4,
.md-content__inner > h4,
article h4,
.md-typeset > h4,
.md-content__inner > h4,
article > h4,
[class*="md-typeset"] h4,
[class*="md-content"] h4,
.md-content-wrapper h4,
.md-main h4,
.md-main__inner h4 {
  font-size: 1.383rem !important; /* 27.65px with 125% html (1.383rem * 20px = 27.66px) */
  font-weight: 500 !important;
  line-height: 1.4 !important;
  margin-top: 1.25rem !important;
  margin-bottom: 0.5rem !important;
}

@media screen and (min-width: 100em) {
  h4,
  .md-typeset h4,
  .md-content h4,
  .md-content__inner h4,
  .md-content__inner > h4,
  article h4,
  .md-typeset > h4,
  .md-content__inner > h4,
  article > h4,
  [class*="md-typeset"] h4,
  [class*="md-content"] h4,
  .md-content-wrapper h4,
  .md-main h4,
  .md-main__inner h4 {
    font-size: 1.257rem !important; /* 27.65px with 137.5% html (1.257rem * 22px = 27.654px) */
  }
}

@media screen and (min-width: 125em) {
  h4,
  .md-typeset h4,
  .md-content h4,
  .md-content__inner h4,
  .md-content__inner > h4,
  article h4,
  .md-typeset > h4,
  .md-content__inner > h4,
  article > h4,
  [class*="md-typeset"] h4,
  [class*="md-content"] h4,
  .md-content-wrapper h4,
  .md-main h4,
  .md-main__inner h4 {
    font-size: 1.152rem !important; /* 27.65px with 150% html (1.152rem * 24px = 27.648px) */
  }
}

/* H5 Reset */
h5,
.md-typeset h5,
.md-content h5,
.md-content__inner h5,
.md-content__inner > h5,
article h5,
.md-typeset > h5,
.md-content__inner > h5,
article > h5,
[class*="md-typeset"] h5,
[class*="md-content"] h5,
.md-content-wrapper h5,
.md-main h5,
.md-main__inner h5 {
  font-size: 1.152rem !important; /* 23.04px with 125% html (1.152rem * 20px = 23.04px) */
  font-weight: 500 !important;
  line-height: 1.4 !important;
  margin-top: 1rem !important;
  margin-bottom: 0.5rem !important;
}

@media screen and (min-width: 100em) {
  h5,
  .md-typeset h5,
  .md-content h5,
  .md-content__inner h5,
  .md-content__inner > h5,
  article h5,
  .md-typeset > h5,
  .md-content__inner > h5,
  article > h5,
  [class*="md-typeset"] h5,
  [class*="md-content"] h5,
  .md-content-wrapper h5,
  .md-main h5,
  .md-main__inner h5 {
    font-size: 1.047rem !important; /* 23.04px with 137.5% html (1.047rem * 22px = 23.034px) */
  }
}

@media screen and (min-width: 125em) {
  h5,
  .md-typeset h5,
  .md-content h5,
  .md-content__inner h5,
  .md-content__inner > h5,
  article h5,
  .md-typeset > h5,
  .md-content__inner > h5,
  article > h5,
  [class*="md-typeset"] h5,
  [class*="md-content"] h5,
  .md-content-wrapper h5,
  .md-main h5,
  .md-main__inner h5 {
    font-size: 0.96rem !important; /* 23.04px with 150% html (0.96rem * 24px = 23.04px) */
  }
}

/* H6 Reset */
h6,
.md-typeset h6,
.md-content h6,
.md-content__inner h6,
.md-content__inner > h6,
article h6,
.md-typeset > h6,
.md-content__inner > h6,
article > h6,
[class*="md-typeset"] h6,
[class*="md-content"] h6,
.md-content-wrapper h6,
.md-main h6,
.md-main__inner h6 {
  font-size: 0.96rem !important; /* 19.2px with 125% html (0.96rem * 20px = 19.2px) */
  font-weight: 500 !important;
  line-height: 1.5 !important;
  margin-top: 0.75rem !important;
  margin-bottom: 0.5rem !important;
}

@media screen and (min-width: 100em) {
  h6,
  .md-typeset h6,
  .md-content h6,
  .md-content__inner h6,
  .md-content__inner > h6,
  article h6,
  .md-typeset > h6,
  .md-content__inner > h6,
  article > h6,
  [class*="md-typeset"] h6,
  [class*="md-content"] h6,
  .md-content-wrapper h6,
  .md-main h6,
  .md-main__inner h6 {
    font-size: 0.873rem !important; /* 19.2px with 137.5% html (0.873rem * 22px = 19.206px) */
  }
}

@media screen and (min-width: 125em) {
  h6,
  .md-typeset h6,
  .md-content h6,
  .md-content__inner h6,
  .md-content__inner > h6,
  article h6,
  .md-typeset > h6,
  .md-content__inner > h6,
  article > h6,
  [class*="md-typeset"] h6,
  [class*="md-content"] h6,
  .md-content-wrapper h6,
  .md-main h6,
  .md-main__inner h6 {
    font-size: 0.8rem !important; /* 19.2px with 150% html (0.8rem * 24px = 19.2px) */
  }
}

/* Base paragraph text - must be exactly 16px */
/* Use 1em to inherit from .md-typeset base (0.667rem = 16px) */
p,
.md-typeset p,
.md-content p,
.md-content__inner p,
article p {
  font-size: 1em !important; /* Inherit from .md-typeset base (0.667rem = 16px) */
  line-height: 1.6 !important;
  margin-top: 0 !important;
  margin-bottom: 1em !important; /* Add spacing between paragraphs (1em = 16px) */
}

/* Override Material's .md-typeset base font-size */
/* Material uses px2rem(16px) with 20px base = 0.8rem */
/* We want paragraphs to be exactly 16px across all breakpoints */
/* Material's html font-size: 125% (20px), 137.5% (22px), 150% (24px) */
/* Material's breakpoints: 100em for 137.5%, 125em for 150% */
/* To get 16px: 16/20=0.8rem, 16/22=0.727rem, 16/24=0.667rem */
.md-typeset {
  font-size: 0.8rem !important; /* 16px with 125% html (0.8rem * 20px = 16px) */
}

@media screen and (min-width: 100em) {
  .md-typeset {
    font-size: 0.727rem !important; /* 16px with 137.5% html (0.727rem * 22px = 15.994px) */
  }
}

@media screen and (min-width: 125em) {
  .md-typeset {
    font-size: 0.667rem !important; /* 16px with 150% html (0.667rem * 24px = 16.008px) */
  }
}

/* Small text */
small,
.md-typeset small,
.md-content small,
.md-content__inner small {
  font-size: 0.667rem !important; /* 13.33px with 125% html (0.667rem * 20px = 13.34px) */
  line-height: 1.5 !important;
}

@media screen and (min-width: 100em) {
  small,
  .md-typeset small,
  .md-content small,
  .md-content__inner small {
    font-size: 0.606rem !important; /* 13.33px with 137.5% html (0.606rem * 22px = 13.332px) */
  }
}

@media screen and (min-width: 125em) {
  small,
  .md-typeset small,
  .md-content small,
  .md-content__inner small {
    font-size: 0.555rem !important; /* 13.33px with 150% html (0.555rem * 24px = 13.32px) */
  }
}

/* Extra small text - 11.11px */
.md-typeset .smaller,
.md-content .smaller,
small.smaller {
  font-size: 0.556rem !important; /* 11.11px with 125% html (0.556rem * 20px = 11.12px) */
  line-height: 1.5 !important;
}

@media screen and (min-width: 100em) {
  .md-typeset .smaller,
  .md-content .smaller,
  small.smaller {
    font-size: 0.505rem !important; /* 11.11px with 137.5% html (0.505rem * 22px = 11.11px) */
  }
}

@media screen and (min-width: 125em) {
  .md-typeset .smaller,
  .md-content .smaller,
  small.smaller {
    font-size: 0.463rem !important; /* 11.11px with 150% html (0.463rem * 24px = 11.112px) */
  }
}

/* Code font specific settings */
code, pre, .codehilite {
  font-feature-settings: "liga" 1, "calt" 1, "zero" 1;
  font-variant-ligatures: common-ligatures contextual;
  text-rendering: optimizeSpeed;
  font-optical-sizing: auto;
}

/* Navigation font rendering */
/* .md-nav__item {
  font-weight: 400;
  letter-spacing: 0;
} */

/* .md-ellipsis {
  font-weight: 400;
  letter-spacing: 0;
} */