/* Self-hosted Roboto — replaces fonts.googleapis.com to avoid transmitting
   reader IP addresses to Google without consent (GDPR Art. 6/13, Chapter V).
   Font files sit in fonts/ alongside this stylesheet. */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/roboto-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/roboto-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/roboto-700.woff2') format('woff2');
}

/* style.css */
:root {
  --bg: #23213a;         /* dull blue background */
  --text: #ffffff;       /* primary text */
  --muted: #b7b5c6;      /* secondary text */
  --card: #2e2b49;       /* surfaces (code blocks, callouts) */
  --border: #3a375b;     /* subtle borders */
  --link: #a5c7ff;       /* link color */
  --maxw: 1000px;        /* content width */
}

* { box-sizing: border-box; }
html, body { height: 100%; }

body {
  margin: 0;
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

header {
  position: sticky; top: 0; z-index: 10;
  background: rgba(35, 33, 58, 0.85);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--border);
}
.header-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 14px 20px;
  display: flex; align-items: center; gap: 14px;
}
.brand {
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none; color: var(--text);
}
.brand img { height: 64px; }
.brand span {   
    letter-spacing: 0.6px;
    text-decoration: none;
    text-transform: none;
    color: rgba(255, 255, 255, 1);
    font-size: 27px;
    font-style: normal;
    font-weight: 300;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.skip-link:focus {
  left: 16px;
  top: 16px;
  width: auto;
  height: auto;
  overflow: visible;
  background: var(--focus);
  color: #111;
  padding: 10px 12px;
  border-radius: 10px;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
}

main { max-width: var(--maxw); margin: 32px auto 80px; padding: 0 20px; }

.prose h1, .prose h2, .prose h3 { line-height: 1.2; margin: 1.2em 0 .5em; }
.prose h1 { font-size: clamp(28px, 4vw, 40px); font-weight: 700; }
.prose h2 { font-size: clamp(22px, 3vw, 28px); font-weight: 700; }
.prose h3 { font-size: clamp(18px, 2.2vw, 22px); font-weight: 500; }

.prose p, .prose ul, .prose ol { margin: .8em 0; }
.prose ul, .prose ol { padding-left: 1.2em; }

.prose a { color: var(--link); text-decoration: none; border-bottom: 1px dashed rgba(165,199,255,.45); }
.prose a:hover { border-bottom-color: currentColor; }

.prose code {
  background: var(--card); border: 1px solid var(--border);
  padding: .15em .35em; border-radius: 8px;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: .95em;
}
.prose pre {
  background: var(--card); border: 1px solid var(--border);
  padding: 16px; border-radius: 14px; overflow-x: auto;
  font-size: 0.9rem;
}
.prose pre code { background: none; border: 0; padding: 0; font-size: 0.95em; }

/* Tables */
.prose table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 1.2rem 0 1.6rem;
  background: rgba(46, 43, 73, 0.35); /* subtle surface */
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden; /* keeps rounded corners */
  font-size: 0.95rem;
}

.prose thead th {
  background: rgba(46, 43, 73, 0.75);
  color: var(--text);
  text-align: left;
  font-weight: 600;
  letter-spacing: 0.2px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  vertical-align: bottom;
}

.prose thead tr:first-child th {
  font-weight: 600;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.9);
}

.prose tbody td {
  padding: 10px 14px;
  border-bottom: 1px solid rgba(58, 55, 91, 0.65);
  color: rgba(255, 255, 255, 0.95);
  vertical-align: top;
}

.prose tbody tr:last-child td {
  border-bottom: 0;
}

.prose tbody tr:nth-child(even) td {
  background: rgba(46, 43, 73, 0.25);
}

/* Make code inside tables look consistent */
.prose table code {
  background: rgba(46, 43, 73, 0.65);
  border: 1px solid rgba(58, 55, 91, 0.85);
  padding: 0.1em 0.35em;
  border-radius: 8px;
  font-size: 0.92em;
}

/* Optional: right-align numeric columns (add class="num" on th/td) */
.prose table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Mobile friendliness: allow horizontal scroll instead of breaking layout */
.prose .table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 14px;
}
.prose .table-wrap table {
  min-width: 640px;
}

.note {font-style: italic; color: #ddd}

footer {
  max-width: var(--maxw); margin: 40px auto; padding: 0 20px;
  color: var(--muted); font-size: 14px;
}