/* -------------------------
   Theme variables (light default)
   ------------------------- */
:root{
  --bg: #f4f8fb;
  --nav-bg: #122647;
  --nav-accent: #ffed87;
  --nav-hover: #ff481f;
  --text: #142742;
  --muted: #6b7a8a;
  --code-bg: #eef2f8;
  --code-border: #ffed87;
  --max-width: 900px;
  --gap: 1.25rem;
  --radius: 8px;
  --transition: 250ms ease;
  --navbar-width: 260px;
}

/* Respect system preference by default (will be overridden by explicit toggle) */
@media (prefers-color-scheme: dark) {
  :root{
    --bg: #0b1220;
    --nav-bg: #07102a;
    --nav-accent: #ffd86b;
    --nav-hover: #ff855a;
    --text: #e6eef8;
    --muted: #9aa6b6;
    --code-bg: #071428;
    --code-border: #ffd86b;
  }
}

/* -------------------------
   Base layout styles
   ------------------------- */
*{box-sizing:border-box}
html,body{height:100%}
body {
  margin: 0;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.6;
  font-size:16px;
}

/* Skip link */
.skip-link{
  position: absolute;
  left: -999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.skip-link:focus{
  left: 1rem;
  top: 1rem;
  width: auto;
  height: auto;
  background:#fff;
  padding:0.5rem 0.75rem;
  border-radius:4px;
  box-shadow:0 6px 18px rgba(2,6,23,0.12);
  z-index:9999;
}

/* NAVBAR styles */
.site #navbar {
  background: var(--nav-bg);
  color: var(--nav-accent);
  width: var(--navbar-width);
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  padding: 1.25rem;
  box-sizing: border-box;
  overflow-y: auto;
  z-index: 100;
  transition: transform var(--transition), box-shadow var(--transition);
  transform: translateX(0);
  box-shadow: 0 6px 18px rgba(2,6,23,0.08);
}

.nav-title {
  font-weight: 700;
  font-size: 1.15rem;
  margin-bottom: 1rem;
  letter-spacing: 0.6px;
  color: var(--nav-accent);
}

.nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-list li { margin: .5rem 0; }

.nav-link {
  color: var(--nav-accent);
  text-decoration: none;
  display: block;
  padding: 0.45rem 0.25rem;
  font-size: 0.98rem;
  border-radius: 6px;
  transition: color var(--transition), background var(--transition);
}
.nav-link:hover,
.nav-link:focus {
  color: white;
  background: rgba(255,255,255,0.03);
  outline: none;
}

/* MAIN DOCUMENT */
.site #main-doc {
  margin-left: calc(var(--navbar-width) + 10px);
  padding: 2.25rem 2rem;
  max-width: var(--max-width);
  box-sizing: border-box;
  min-height: 100vh;
}

/* Section styles */
.main-section {
  margin-bottom: 2.5rem;
}
.main-section header {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 0.6rem 0;
}

/* Paragraphs, lists */
p { color: var(--muted); margin: 0 0 0.85rem 0; }
ul { margin: 0.5rem 0 1rem 1.35rem; color: var(--muted); }
li { margin-bottom: .45rem; }

/* Code blocks */
pre {
  background: var(--code-bg);
  color: var(--text);
  border-left: 4px solid var(--code-border);
  padding: 0.8rem;
  margin: 1rem 0;
  border-radius: var(--radius);
  overflow-x:auto;
  box-shadow: 0 4px 18px rgba(8,20,40,0.04);
}
pre code { display:block; white-space:pre-wrap; word-break:break-word; }

/* Inline code styling */
code:not(pre code) {
  background: #fff;
  padding: 0.15rem 0.35rem;
  border-radius: 4px;
  border: 1px solid rgba(18,36,64,0.04);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", monospace;
  font-size: .95em;
}

/* Focus ring for interactive elements */
a:focus, label:focus {
  outline: 3px solid rgba(17,119,255,0.12);
  outline-offset: 2px;
}

/* Responsive — small screens show nav toggle and hide nav until checkbox is checked */
.nav-toggle {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.nav-toggle-label{
  display:none;
  position: fixed;
  top: 0.6rem;
  right: 0.8rem;
  z-index: 120;
  background: rgba(255,255,255,0.98);
  padding: 0.4rem 0.6rem;
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,0.06);
  cursor: pointer;
  font-weight:600;
  box-shadow: 0 6px 18px rgba(2,6,23,0.06);
}
@media (max-width: 750px) {
  .nav-toggle-label{ display:inline-block; }

  .site #navbar {
    width: 100%;
    height: auto;
    position: fixed;
    top: 3.25rem;
    left: 0;
    transform: translateY(-110%);
    transition: transform var(--transition);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    box-shadow: 0 8px 24px rgba(2,6,23,0.12);
  }

  /* When the checkbox is checked, slide nav down into view */
  .nav-toggle:checked ~ #navbar {
    transform: translateY(0);
  }

  .site #main-doc {
    margin-left: 0;
    padding: 1.25rem;
    margin-top: 0.75rem;
  }
}

/* Very small screens: make nav links horizontal scroll */
@media (max-width: 420px) {
  .nav-list { display:flex; gap: .5rem; overflow-x:auto; padding-bottom:.5rem; }
  .nav-link { white-space:nowrap; padding:.35rem .5rem; border-radius:999px; }
}

/* Print-friendly tweaks */
@media print {
  #navbar, .nav-toggle-label, .nav-toggle { display: none !important; }
  #main-doc { margin: 0; padding: 0; max-width: 100%; }
}

/* Utility */
.visually-hidden { position: absolute !important; height: 1px; width: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); white-space: nowrap; }