@import url('../style.css');

/* Layout */
main, article { max-width: 750px; width: 100%; }
.back-link { margin-bottom: 0.5em; }
.sep { text-align: center; color: var(--color-text-muted); margin: 2em 0; letter-spacing: 0.3em; }

/* Typography */
h1, h2, h3 { margin-bottom: 0.5em; }
h1 { font-size: 22px; padding-right: 4em; }
h2, h3 { position: relative; }
h2 { font-size: 20px; margin-top: 2em; }
h3 { font-size: 18px; margin-top: 1.5em; }
p { line-height: 1.2; margin-bottom: 1em; }
ul, ol { line-height: 1.2; margin-bottom: 1em; padding-left: 1.5em; }
li { margin-bottom: 0.2em; }
.date { color: var(--color-text-muted); font-size: 16px; font-style: italic; margin-bottom: 1.5em; }

/* Heading anchor links */
article section > :is(h2, h3) > a {
  color: inherit;
  text-decoration: none;
  font-style: italic;
}
article section > :is(h2, h3) > a::after {
  content: " \00B6";
  color: var(--color-text-muted);
  opacity: 0;
  transition: opacity 0.15s;
}
article section > :is(h2, h3):hover > a::after { opacity: 1; }
@media (min-width: 768px) {
  article section > :is(h2, h3) > a::after {
    content: "\00B6";
    position: absolute;
    left: -1.2em;
  }
}

/* Code */
pre, code, kbd { font-size: 15px; }
@media (min-width: 768px) {
  pre, code, kbd { font-size: 16px; }
}
code { background-color: var(--color-code-bg); padding: 0.1em 0.3em; }
pre { background-color: var(--color-code-bg); padding: 1em; overflow-x: auto; margin: 1em 0; line-height: 1.2; max-width: 100%; box-sizing: border-box; }
pre code { padding: 0; }
kbd { background-color: var(--color-border); border: 1px solid var(--color-scrollbar-hover); border-radius: 3px; padding: 0.1em 0.4em; box-shadow: 0 1px 0 var(--color-scrollbar-hover); }
.commit { font-family: monospace; font-size: 0.85em; font-style: normal; }

/* Copy button */
.pre-wrapper { position: relative; cursor: pointer; }
.copy-btn { position: absolute; top: 0.5em; right: 0.5em; font-size: 12px; color: var(--color-text-muted); opacity: 0; transition: opacity 0.15s; }
.pre-wrapper:hover .copy-btn { opacity: 1; }

/* Syntax highlighting */
code span.kw, code span.cf { color: #800080; }
code span.dv, code span.bn, code span.fl { color: #008B8B; }
code span.ch, code span.st, code span.vs, code span.ss { color: #00868B; }
code span.co, code span.an, code span.cv { color: #8B8B00; font-style: italic; }
code span.do { color: #8B0000; font-style: italic; }
code span.sc { color: #458B00; }
code span.wa, code span.al, code span.er { color: #EE2C2C; font-weight: bold; }

/* TOC */
.toc { display: none; }

/* Images */
article img { display: block; margin: 1em auto; max-width: 100%; height: auto; }

/* Responsive */
@media (min-width: 768px) {
  .back-link { margin-bottom: 0; }
  h1 { padding-right: 0; }
  .date { font-size: 17px; }
}
@media (min-width: 1200px) {
  .toc {
    display: block;
    position: fixed;
    top: 15px;
    left: calc(40px + 750px + 40px);
    width: 320px;
    font-size: 13px;
    line-height: 0.95;
    opacity: 0.5;
    transition: opacity 0.2s;
  }
  .toc:hover { opacity: 1; }
  .toc-title { font-weight: bold; margin-bottom: 0.2em; }
  .toc ul { list-style: none; padding: 0; margin: 0; }
  .toc li { margin-bottom: 0; }
  .toc a { color: var(--color-text-muted); font-style: italic; transition: color 0.15s; }
  .toc a:hover { color: #222; }
  .toc a.active { color: #0000EE; opacity: 1; }
  .toc ul ul { padding-left: 2ch; }
  .toc code { font-size: inherit; }
  .toc-nav { margin-top: 0.5em; display: flex; gap: 1em; }
}