/* ------------------------------------------------------------
   Google fonts
------------------------------------------------------------ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ------------------------------------------------------------
   Theme tokens
------------------------------------------------------------ */

:root {
  --bg: #ffffff;
  --fg: #111827;
  --muted: #6b7280;

  --link: #1d4ed8;
  --link_hover: #1e40af;

  --sidebar_bg: #f6f8fb;
  --sidebar_border: #e5e7eb;

  --code_inline_bg: #eef3ff;
  --code_inline_border: #d7e3ff;

  --note_bg: #dbf2f9;
  --note_border_color: #8ad0e4;

  --pre_bg: #eef3ff;
  --pre_border: #d7e3ff;

  --radius_sm: 10px;
}

/* ------------------------------------------------------------
   Base
------------------------------------------------------------ */

* { box-sizing: border-box; }

html, body {
  background: var(--bg);
  color: var(--fg);
  height: auto;
  min-height: 100%;
}

body {
  margin: 0;
  min-width: 95vw;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: 0.01em;
}

a, a:visited { color: var(--link); }
a:hover { color: var(--link_hover); text-decoration: none; }

a:focus-visible {
  outline: 2px solid rgba(29,78,216,0.35);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ------------------------------------------------------------
   Content elements
------------------------------------------------------------ */

h1, h2 { margin: 0 0 0.5em 0; }
h1 { line-height: 1.2; font-size: 2rem; letter-spacing: -0.02em; }
h2 { line-height: 1.15; font-size: 1.35rem; letter-spacing: -0.015em; margin-top: 1.4em; }

p, ol, li { margin: 1em 0 1.2em 1; }

ul, ol {
  li { margin-bottom: 0.5em; }
}

ul li { margin-left: -0.2em; }

ol.footnotes {
  margin: 2em 0 0 0;
  padding: 2em 0 0 1.5em;
  border-top: solid 1px #e5e7eb;
  font-size: 0.9em;
  line-height: 1.65;

  li { margin: 0; padding: 0; }
}

code {
  background-color: var(--code_inline_bg);
  border: 1px solid var(--code_inline_border);
  border-radius: 8px;
  padding: 0.18em 0.5em;
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 0.95em;
}

p code { white-space: nowrap; }

pre {
  background-color: var(--pre_bg);
  border: 1px solid var(--pre_border);
  padding: 1em 1.1em;
  font-size: 1.05em;
  border-radius: var(--radius_sm);
  overflow-x: auto;

  &>code {
    padding: 0;
    border: none;
    background-color: transparent;
    white-space: pre;
  }
}

._note {
  padding: 1em;
  border-radius: var(--radius_sm);
  margin: 1em 0;
  border: 1px solid var(--note_border_color);
  background-color: var(--note_bg);

  &::before {
    display: block;
    font-weight: 700;
    margin-bottom: 0.5em;
    letter-spacing: 0.06em;
    color: #355c73;
  }

  p:first-child { margin-top: 0; }
  p:last-child { margin-bottom: 0; }

  &.note {
    &::before { content: "NOTE"; }
    font-size: 0.9em;
  }

  &.important {
    &::before { content: "⚠️ IMPORTANT"; color: #b91000; }
    background-color: #fff5dd; border-color: #ffc356;
    font-size: 0.9em;
  }
}

/* ------------------------------------------------------------
   Shrimple static site shell
------------------------------------------------------------ */

.shrimple-static-site {
  display: flex;
  align-items: flex-start;
  padding: 2em;
  gap: 2em;

  menu {
    width: 260px;
    min-width: 260px;
    margin: 0;
    padding: 0;

    background: none;
    border: none;
    box-shadow: none;

    & > dd { margin: 0 0 0.4em 0; }

    a {
      padding: 0.2em 0.5em;
      display: inline-block;
      text-decoration: none;
      width: 100%;

      &.current {
        font-weight: 600;
        color: var(--fg);
      }
    }
  }

  main {
    min-width: 0;
    width: 100%;
    max-width: 980px;

    nav {
      display: flex;
      justify-content: space-between;
      align-items: stretch;
      gap: 1.5em;
      margin-top: 2.5em; padding-top: 2em; padding-bottom: 5em;
      border-top: 1px solid #e5e7eb;

      a {
        display: block; flex: 1; max-width: 50%;
        padding: 1.3em 1.5em; border-radius: 14px;
        font-weight: 600; text-decoration: none;
        background: #111827; color: #ffffff;
        transition: background 0.15s ease;

        &:hover { background: #1f2937; }
      }

      a.previous { text-align: left; }
      a.next     { text-align: right; }

      a.previous::before {
        content: "← Previous";
        display: block;
        font-size: 0.85em;
        opacity: 0.7;
        margin-bottom: 0.2em;
      }

      a.next::before {
        content: "Next →";
        display: block;
        font-size: 0.85em;
        opacity: 0.7;
        margin-bottom: 0.2em;
      }
    }
  }
}

/* ------------------------------------------------------------
   Small screens
------------------------------------------------------------ */

@media (max-width: 980px) {
  .shrimple-static-site {
    flex-direction: column;

    menu {
      position: static;
      max-height: none;
      width: 100%;
      min-width: 0;
    }
  }
}