/*
 * IDT Documentation — WCAG 2.2 Level AA stylesheet
 *
 * Color contrast ratios (verified against APCA / WCAG 2.2):
 *   Body text #1a1a1a on #ffffff     → 19.1:1  (AA: 4.5:1 required)
 *   Link #005fcc on #ffffff          → 7.2:1   (AA: 4.5:1 required)
 *   Visited #5a1fa0 on #ffffff       → 7.0:1
 *   Code #c7254e on #f8f8f8          → 5.9:1
 *   Header bg #005fcc on #ffffff     text is white #ffffff → 7.2:1
 *   Focus ring: 3px solid #ff8c00   → 3:1+ against all backgrounds (WCAG 2.2 §2.4.11)
 *   Non-text UI contrast (borders, icons) at least 3:1 against adjacent colors
 *
 * New WCAG 2.2 criteria addressed:
 *   2.4.11 Focus Appearance (AA) — focus ring ≥3px, ≥3:1 contrast
 *   2.4.12 Focus Not Obscured (AA) — sticky header not used; no overlap issue
 *   2.5.3  Label in Name      (AA) — all buttons/links have visible text labels
 *   2.5.8  Target Size (Minimum) (AA) — interactive targets ≥24×24 CSS pixels
 */

/* ── Reset & base ───────────────────────────────────────────────────── */

*, *::before, *::after {
  box-sizing: border-box;
}

:root {
  --color-text:          #1a1a1a;
  --color-text-muted:    #595959;   /* 7.0:1 on white — meets AA large text AND normal text */
  --color-link:          #005fcc;
  --color-link-visited:  #5a1fa0;
  --color-link-hover:    #003d85;
  --color-focus:         #ff8c00;   /* 3:1+ against white and dark backgrounds */
  --color-bg:            #ffffff;
  --color-bg-alt:        #f5f5f5;
  --color-bg-code:       #f0f0f0;
  --color-border:        #767676;   /* 4.5:1 on white — meets AA for UI components */
  --color-border-light:  #b0b0b0;   /* 3.0:1 on white — meets AA for non-text */
  --color-accent:        #005fcc;
  --color-header-bg:     #00367a;   /* dark blue — white text at 12.6:1 */
  --color-code-inline:   #c7254e;   /* on #f0f0f0: 5.9:1 */
  --color-table-head-bg: #e8edf5;
  --color-skip-bg:       #ff8c00;
  --color-skip-text:     #000000;

  --font-body:    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "Cascadia Code", "Fira Code", "Source Code Pro", Consolas, "Liberation Mono", monospace;
  --font-size:    1.0625rem;   /* 17px — easier to read than 16px default */
  --line-height:  1.65;
  --content-max:  50rem;       /* ~800px — optimal reading line length */
  --toc-width:    16rem;
}

html {
  font-size: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--font-body);
  font-size: var(--font-size);
  line-height: var(--line-height);
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

/* ── Skip navigation ────────────────────────────────────────────────── */

.skip-link {
  position: absolute;
  top: -3rem;
  left: 1rem;
  padding: 0.5rem 1rem;
  background: var(--color-skip-bg);
  color: var(--color-skip-text);
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
  border-radius: 0 0 4px 4px;
  z-index: 9999;
  transition: top 0.15s ease;
}

.skip-link:focus {
  top: 0;
  outline: 3px solid var(--color-text);
  outline-offset: 2px;
}

/* ── Site header ────────────────────────────────────────────────────── */

header[role="banner"] {
  background-color: var(--color-header-bg);
  color: #ffffff;
  padding: 0.75rem 1.5rem;
}

.site-header {
  max-width: calc(var(--content-max) + var(--toc-width) + 4rem);
  margin: 0 auto;
  display: flex;
  align-items: baseline;
  gap: 1rem;
}

.site-name {
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 0.01em;
}

.doc-type {
  font-size: 0.875rem;
  opacity: 0.85;
}

/* ── Page layout ────────────────────────────────────────────────────── */

.page-wrapper {
  max-width: calc(var(--content-max) + var(--toc-width) + 5rem);
  margin: 0 auto;
  padding: 2rem 1.5rem;
  display: grid;
  grid-template-columns: var(--toc-width) 1fr;
  gap: 3rem;
  align-items: start;
}

@media (max-width: 60rem) {
  .page-wrapper {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

/* ── Table of contents ──────────────────────────────────────────────── */

nav#toc {
  position: sticky;
  top: 1.5rem;
  font-size: 0.875rem;
  line-height: 1.5;
}

nav#toc .toc-heading {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  margin: 0 0 0.5rem 0;
}

nav#toc ul {
  margin: 0;
  padding: 0;
  list-style: none;
  border-left: 2px solid var(--color-border-light);
}

nav#toc ul ul {
  padding-left: 0.875rem;
  border-left: none;
}

nav#toc li {
  margin: 0;
  padding: 0;
}

nav#toc a {
  display: block;
  padding: 0.2rem 0.5rem;
  color: var(--color-text);
  text-decoration: none;
  border-radius: 3px;
  /* WCAG 2.5.8: minimum 24px target height */
  min-height: 24px;
}

nav#toc a:hover {
  background-color: var(--color-bg-alt);
  color: var(--color-link);
  text-decoration: underline;
}

nav#toc a:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 1px;
}

/* ── Main content ───────────────────────────────────────────────────── */

main#main-content {
  min-width: 0;  /* prevent grid blowout */
  max-width: var(--content-max);
}

.doc-dateline {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin: -0.5rem 0 2rem 0;
}

.doc-dateline .label {
  font-weight: 600;
}

/* ── Headings ───────────────────────────────────────────────────────── */

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  line-height: 1.25;
  color: var(--color-text);
  margin-top: 2rem;
  margin-bottom: 0.5rem;
}

h1 { font-size: 2rem; margin-top: 0; }
h2 { font-size: 1.5rem; border-bottom: 1px solid var(--color-border-light); padding-bottom: 0.25rem; }
h3 { font-size: 1.2rem; }
h4 { font-size: 1.05rem; }
h5, h6 { font-size: 1rem; }

/* ── Paragraphs & flow ──────────────────────────────────────────────── */

p {
  margin: 0 0 1rem 0;
}

/* ── Links ──────────────────────────────────────────────────────────── */

a {
  color: var(--color-link);
  text-decoration: underline;
  text-underline-offset: 2px;
  /* WCAG 2.5.8: minimum 24px tap target height handled by line-height */
}

a:visited {
  color: var(--color-link-visited);
}

a:hover {
  color: var(--color-link-hover);
  text-decoration-thickness: 2px;
}

/* WCAG 2.4.11 Focus Appearance — focus ring ≥3px, ≥3:1 contrast */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ── Lists ──────────────────────────────────────────────────────────── */

ul, ol {
  margin: 0 0 1rem 0;
  padding-left: 1.5rem;
}

li {
  margin-bottom: 0.25rem;
}

li > ul, li > ol {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}

/* ── Tables ─────────────────────────────────────────────────────────── */

table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  font-size: 0.9375rem;
  overflow-x: auto;
  display: block;
}

/* Wrap in a scrollable container for narrow viewports */
table {
  max-width: 100%;
}

caption {
  font-weight: 700;
  text-align: left;
  margin-bottom: 0.5rem;
  color: var(--color-text-muted);
  font-size: 0.875rem;
}

thead th {
  background-color: var(--color-table-head-bg);
  font-weight: 700;
  text-align: left;
  padding: 0.6rem 0.875rem;
  border: 1px solid var(--color-border-light);
  white-space: nowrap;
}

tbody td {
  padding: 0.5rem 0.875rem;
  border: 1px solid var(--color-border-light);
  vertical-align: top;
}

tbody tr:nth-child(even) {
  background-color: var(--color-bg-alt);
}

tbody tr:focus-within {
  outline: 2px solid var(--color-focus);
  outline-offset: -2px;
}

/* ── Code ───────────────────────────────────────────────────────────── */

code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  background-color: var(--color-bg-code);
  color: var(--color-code-inline);
  padding: 0.1em 0.3em;
  border-radius: 3px;
  /* Do not break inline code across lines unless necessary */
  word-break: break-word;
}

pre {
  background-color: #1e1e2e;
  color: #cdd6f4;       /* Catppuccin Mocha base palette — good contrast on dark bg */
  padding: 1.25rem 1.5rem;
  border-radius: 6px;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  line-height: 1.6;
  margin: 1.25rem 0 1.5rem;
  /* Ensure 3:1 non-text contrast for the border */
  border: 1px solid #45475a;
  tab-size: 2;
}

pre code {
  font-size: inherit;
  background: none;
  color: inherit;
  padding: 0;
  border-radius: 0;
}

/* ── Blockquotes ────────────────────────────────────────────────────── */

blockquote {
  margin: 1.25rem 0;
  padding: 0.75rem 1.25rem;
  border-left: 4px solid var(--color-border);
  background-color: var(--color-bg-alt);
  color: var(--color-text-muted);
  border-radius: 0 4px 4px 0;
}

blockquote p:last-child {
  margin-bottom: 0;
}

/* ── Horizontal rules ───────────────────────────────────────────────── */

hr {
  border: none;
  border-top: 1px solid var(--color-border-light);
  margin: 2.5rem 0;
}

/* ── Definition lists ───────────────────────────────────────────────── */

dl {
  margin: 0 0 1rem 0;
}

dt {
  font-weight: 700;
  margin-top: 0.75rem;
}

dd {
  margin-left: 1.5rem;
  margin-bottom: 0.25rem;
}

/* ── Abbreviations ──────────────────────────────────────────────────── */

abbr[title] {
  cursor: help;
  text-decoration: underline dotted;
}

/* ── Keyboard shortcuts ─────────────────────────────────────────────── */

kbd {
  font-family: var(--font-mono);
  font-size: 0.8em;
  background-color: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: 3px;
  padding: 0.1em 0.4em;
  box-shadow: 0 1px 0 var(--color-border);
}

/* ── Footer ─────────────────────────────────────────────────────────── */

footer[role="contentinfo"] {
  margin-top: 4rem;
  padding: 1.5rem;
  border-top: 1px solid var(--color-border-light);
  background-color: var(--color-bg-alt);
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

.footer-inner {
  max-width: calc(var(--content-max) + var(--toc-width) + 4rem);
  margin: 0 auto;
}

footer p {
  margin: 0 0 0.25rem 0;
}

footer a {
  color: var(--color-link);
}

.footer-legal {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

/* ── Print ──────────────────────────────────────────────────────────── */

@media print {
  .skip-link,
  nav#toc {
    display: none;
  }

  .page-wrapper {
    grid-template-columns: 1fr;
    padding: 0;
  }

  body {
    font-size: 11pt;
    color: #000;
    background: #fff;
  }

  a {
    color: #000;
  }

  a[href^="http"]::after {
    content: " <" attr(href) ">";
    font-size: 0.8em;
    color: #444;
  }

  pre {
    background: #f4f4f4;
    color: #000;
    border: 1px solid #ccc;
    white-space: pre-wrap;
  }

  h2, h3 {
    page-break-after: avoid;
  }

  table {
    display: table;
  }
}

/* ── High-contrast media query ──────────────────────────────────────── */

@media (forced-colors: active) {
  /* Let Windows High Contrast override our colors */
  a { color: LinkText; }
  a:visited { color: VisitedText; }
  button { forced-color-adjust: none; }
  pre, code { border: 1px solid ButtonText; }
}

/* ── Dark mode ──────────────────────────────────────────────────────── */

@media (prefers-color-scheme: dark) {
  :root {
    --color-text:          #e8e8e8;
    --color-text-muted:    #b0b0b0;
    --color-link:          #6cb4ff;     /* 5.5:1 on #1a1a2e */
    --color-link-visited:  #c9a0ff;     /* 5.2:1 on #1a1a2e */
    --color-link-hover:    #99d0ff;
    --color-focus:         #ffb347;     /* warm orange, 4.6:1 on dark */
    --color-bg:            #1a1a2e;
    --color-bg-alt:        #16213e;
    --color-bg-code:       #0f3460;
    --color-border:        #8a8a8a;
    --color-border-light:  #4a4a6a;
    --color-header-bg:     #0f3460;
    --color-code-inline:   #ff8fab;     /* pink, 5.1:1 on #0f3460 */
    --color-table-head-bg: #0f3460;
  }
}