/* =========================================================================
   Accessibility & Readability Enhancements (WCAG Compliant)
   ========================================================================= */

/* 1. Base Font Size & Line Height
   Increase the base font size slightly and ensure ample line spacing for readability. */
:root {
  --md-text-font: "Noto Sans JP", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
  --md-code-font: "JetBrains Mono", "Fira Code", monospace;
}

body {
  font-size: 1.05rem;
  font-size: 1.15rem;
  line-height: 1.8;
  letter-spacing: 0.03em;
}

/* 2. High Contrast Colors for WCAG Compliance */
[data-md-color-scheme="slate"] {
  --md-default-fg-color: rgba(255, 255, 255, 0.95);
  --md-default-fg-color--light: rgba(255, 255, 255, 0.75);
  --md-default-bg-color: #121212;
}

[data-md-color-scheme="default"] {
  --md-default-fg-color: #1a1a1a;
  --md-default-bg-color: #fdfdfd;
}

/* =========================================================================
   Headings (h1, h2, h3) - Structural & Accessible Styling
   ========================================================================= */

/* h1: Page Title */
.md-typeset h1 {
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: 2rem;
  padding-bottom: 0.5rem;
  border-bottom: 3px solid var(--md-primary-fg-color);
}

/* h2: Section Headers */
.md-typeset h2 {
  font-size: 1.7rem;
  font-weight: 700;
  margin-top: 3rem;
  margin-bottom: 1.5rem;
  padding-left: 0.8rem;
  border-left: 6px solid var(--md-primary-fg-color);
  background-color: var(--md-default-bg-color--light);
  padding: 0.5rem 0.8rem;
  border-radius: 0 4px 4px 0;
}

/* h3: Subsection Headers */
.md-typeset h3 {
  font-size: 1.3rem;
  font-weight: 700;
  margin-top: 2.5rem;
  margin-bottom: 1rem;
  border-bottom: 1px dashed var(--md-default-fg-color--light);
  padding-bottom: 0.3rem;
}

/* =========================================================================
   Figures, Tables & Charts (Mermaid) - Clarity and Contrast
   ========================================================================= */

/* Mermaid Diagrams */
.md-typeset .mermaid {
  background-color: var(--md-default-bg-color);
  padding: 1.5rem;
  margin: 2rem 0;
  border: 1px solid var(--md-default-fg-color--light);
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  overflow-x: auto;
}

/* In dark mode, give the diagram container a slightly lighter background for contrast */
[data-md-color-scheme="slate"] .md-typeset .mermaid {
  background-color: #1e1e1e;
  border: 1px solid #333;
}

/* Tables */
.md-typeset table:not([class]) {
  width: 100%;
  border-collapse: collapse;
  margin: 2rem 0;
  font-size: 0.95rem;
}

.md-typeset table:not([class]) th {
  background-color: var(--md-primary-fg-color);
  color: #ffffff; /* Always white on primary color for high contrast */
  font-weight: bold;
  padding: 1rem;
  text-align: left;
}

.md-typeset table:not([class]) td {
  padding: 0.8rem 1rem;
  border-bottom: 1px solid var(--md-default-fg-color--light);
}

.md-typeset table:not([class]) tr:nth-child(even) {
  background-color: var(--md-default-bg-color--light);
}

[data-md-color-scheme="slate"] .md-typeset table:not([class]) tr:nth-child(even) {
  background-color: rgba(255, 255, 255, 0.02);
}

/* Images and Figures */
.md-typeset img {
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  display: block;
  margin: 2rem auto;
  max-width: 100%;
}

/* =========================================================================
   Admonitions (Callouts) & Interactive Elements
   ========================================================================= */

.md-typeset .admonition,
.md-typeset details {
  font-size: 1.05rem;
  border-left-width: 6px;
  border-radius: 4px;
  margin: 2rem 0;
}

/* Keyboard Focus Indicators */
a:focus, button:focus, input:focus, summary:focus {
  outline: 3px solid var(--md-primary-fg-color);
  outline-offset: 2px;
}