/* mdBook overrides — apply round.online typography + layout to mdBook structure.
   Loaded after default mdBook CSS so these rules win. */

/* ===== Body / typography =====
   We keep mdBook's `:root { font-size: 62.5% }` intact so mdBook chrome
   (menu-bar, sidebar, scrollbar widths, theme picker) stays correctly sized.
   Our --fs-* and --sp-* tokens in round-tokens.css are expressed in the same
   10px-base rem so 1.6rem = 16px, etc. */

html, body {
  font-family: var(--font-body);
  font-feature-settings: 'kern', 'liga', 'calt';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-size: var(--fs-base);
  line-height: var(--lh-base);
}

/* Headings — Fraunces display + Sarabun for Thai chars (fallback chain handles it) */
.menu-bar h1,
.content h1,
.content h2,
.content h3,
.content h4,
.content h5,
.content h6 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: var(--lh-tight);
  letter-spacing: -0.015em;
  color: var(--fg);
}

/* Heading sizes intentionally left to mdBook defaults — keep upstream scale. */

/* Reading column — 70.4rem ≈ 704px reading width, wider than round (608px) for code blocks */
.content {
  font-size: 1.7rem;   /* 17px — slight bump for Thai legibility (10px-base rem) */
  line-height: var(--lh-base);
}
.content main {
  max-width: var(--container-prose);
  margin: 0 auto;
  padding: var(--sp-5) var(--sp-5) var(--sp-8);
}

.content p,
.content li,
.content blockquote {
  line-height: var(--lh-base);
}

.content p { margin: 0 0 var(--sp-5); }

/* ===== Links ===== */

.content a:link,
.content a:visited {
  color: var(--links);
  text-decoration-color: rgba(22, 107, 99, 0.35);
  text-underline-offset: 0.2em;
  transition: color var(--dur-fast) var(--ease-out),
              text-decoration-color var(--dur-fast) var(--ease-out);
}
.content a:hover {
  color: var(--color-gold);
  text-decoration-color: currentColor;
}

/* ===== Code blocks ===== */

.content code,
.content pre {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

.content pre {
  background: var(--code-bg);
  color: var(--code-fg);
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--radius-md);
  line-height: var(--lh-snug);
  overflow-x: auto;
}

.content pre > code {
  background: transparent;
  color: inherit;
  padding: 0;
}

.content code {
  padding: 0.1em 0.35em;
  border-radius: var(--radius-sm);
  background: rgba(22, 107, 99, 0.08);
  color: var(--inline-code-color);
  font-size: 0.88em;
}

/* Inline code inside dark blocks — reset */
.content pre code { background: transparent; color: inherit; padding: 0; }

/* Blockquote — keep mdBook visuals; just fix vertical padding asymmetry.
   mdBook ships `padding: 0 20px` (no vertical) but our `.content p` rule
   below adds margin-bottom only, leaving the first/last paragraph crammed
   against the top border and floated above the bottom one. */
.content blockquote > :first-child { margin-top: 0; }
.content blockquote > :last-child  { margin-bottom: 0; }
.content blockquote {
  padding-top: 1em;
  padding-bottom: 1em;
}

/* ===== Tables ===== */

.content table {
  border-collapse: collapse;
  margin: var(--sp-5) 0;
  font-size: 0.95em;
}
.content table th,
.content table td {
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--table-border-color);
}
.content table th {
  background: var(--table-header-bg);
  font-weight: 600;
  text-align: left;
}
.content table tbody tr:nth-child(even) td {
  background: var(--table-alternate-bg);
}

/* ===== Sidebar ===== */

.sidebar {
  font-family: var(--font-body);
  font-size: 1.5rem;   /* 15px (10px-base rem) */
  background: var(--sidebar-bg);
  color: var(--sidebar-fg);
}

.sidebar .sidebar-scrollbox {
  padding: var(--sp-2) var(--sp-4) var(--sp-5);
}

.sidebar .chapter li.chapter-item {
  line-height: var(--lh-snug);
}

.sidebar .chapter li a {
  color: var(--sidebar-fg);
  text-decoration: none;
}

.sidebar .chapter li a:hover {
  color: var(--sidebar-active);
}

.sidebar .chapter li.expanded > a,
.sidebar .chapter li a.active {
  color: var(--sidebar-active);
  font-weight: 600;
}

.sidebar .spacer {
  background: var(--sidebar-spacer);
  margin: var(--sp-3) 0;
}

/* Sidebar number — quiet */
.sidebar .chapter li .toggle,
.sidebar .chapter li .section-number {
  color: var(--color-gray);
  font-variant-numeric: tabular-nums;
  font-size: 0.85em;
  font-weight: 400;
}

/* ===== Top menu bar ===== */

.menu-bar {
  background: var(--bg);
  border-bottom: 1px solid var(--color-border);
  font-family: var(--font-body);
}

.menu-title {
  /* Quiet header — thin Inter so the page title doesn't compete with content.
     (Our loaded Fraunces only has 400/500 weights, no light, so we use Inter.) */
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1.6rem;
  letter-spacing: 0;
  color: var(--color-gray);
  /* mdBook gives .menu-title height:100% of the 50px menu-bar but keeps
     line-height short, so the text hugs the top. Center it vertically. */
  display: flex;
  align-items: center;
  justify-content: center;
}

.menu-bar .icon-button {
  color: var(--icons);
}
.menu-bar .icon-button:hover {
  color: var(--icons-hover);
}

/* ===== Search ===== */

#searchbar {
  border-color: var(--searchbar-border-color);
  background: var(--searchbar-bg);
  color: var(--searchbar-fg);
  font-family: var(--font-body);
  border-radius: var(--radius-md);
}

mark {
  background: var(--search-mark-bg);
  color: var(--color-ink);
  padding: 0 0.15em;
  border-radius: 0.15em;
}

/* ===== Page nav (prev/next) ===== */

.nav-chapters {
  color: var(--icons);
}
.nav-chapters:hover {
  color: var(--icons-hover);
}

/* ===== Selection ===== */

::selection {
  background: var(--color-teal);
  color: var(--color-paper);
}

/* ===== Misc ===== */

hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: var(--sp-7) 0;
}

img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
}

/* Hide footnote-definition reset border for nicer look */
.footnote-definition {
  border-top: 1px solid var(--color-border);
  padding-top: var(--sp-4);
  margin-top: var(--sp-6);
}