/* Site-specific overrides on top of 98.css. Fira Code kept for code blocks
   only — 98.css's Pixelated MS Sans Serif covers everything else. */

@font-face {
  font-family: "Fira Code";
  src: url("../fonts/FiraCode-Latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fira Code";
  src: url("../fonts/FiraCode-LatinExt.woff2") format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

html, body {
  height: 100%;
}

/* 98.css's h1/h2 defaults (5rem/2.5rem) blow up the pixel font past
   its native size — it turns blocky and jagged. Cap headings and use
   a normal system font for anything above the pixel font's design size. */
h1, h2, h3, h4 {
  font-family: Arial, sans-serif;
  -webkit-font-smoothing: auto;
}
h1 { font-size: 2.1rem; }
h2 { font-size: 1.7rem; }
h3 { font-size: 1.35rem; }
h4 { font-size: 1.15rem; }

/* 98.css's 12px base is sized for UI chrome (buttons/menus/title-bar),
   too small for reading body copy — bump prose areas up, leave chrome alone. */
.window-body,
.post-content,
.index-content,
.posts,
.status-bar-field {
  font-size: 15px;
}

/* 98.css forces -webkit-font-smoothing:none on buttons, which strips
   color out of emoji glyphs (renders them as solid black shapes) —
   not a font-family/glyph-coverage issue. Restore normal smoothing
   and an emoji-capable stack on the nav buttons. */
.toolbar button {
  font-family: Arial, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  -webkit-font-smoothing: auto;
  color: #222;
  text-shadow: none;
}

.post-title a {
  color: inherit;
}

.title-bar-text a {
  color: #fff;
  text-decoration: none;
}

.title-bar-controls .sound-toggle {
  min-width: 16px;
  width: 16px;
  font-size: 9px;
  line-height: 1;
  color: #222;
  text-shadow: none;
  -webkit-font-smoothing: auto;
  font-family: Arial, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  margin-right: 2px;
}

body {
  background: #008080;
  min-height: 100vh;
  padding: 24px 12px;
  box-sizing: border-box;
}

.desktop {
  max-width: 780px;
  margin: 0 auto;
}

.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

.toolbar form {
  margin: 0;
}

.window-body {
  max-height: none;
}

.post-meta {
  color: grey;
  margin-bottom: 4px;
}

.post-title a {
  text-decoration: none;
}

.posts .post {
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px dotted grey;
}

.posts .post:last-child {
  border-bottom: none;
}

.read-more {
  display: inline-block;
  margin-top: 4px;
}

article.post-content,
.post-content,
.index-content {
  line-height: 1.5;
}

.post-content pre,
.index-content pre {
  overflow-x: auto;
}

.post-content code:not(pre code),
.index-content code:not(pre code) {
  background: #fff;
  box-shadow: inset -1px -1px #fff, inset 1px 1px grey, inset -2px -2px #dfdfdf, inset 2px 2px #0a0a0a;
  padding: 0 3px;
}

pre, code, code * {
  font-family: "Fira Code", monospace;
}

.highlight {
  margin: 12px 0;
}

.code-title {
  background: silver;
  box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px grey, inset 2px 2px #dfdfdf;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2px 6px;
  font-size: 11px;
}

.code-title .copy-button {
  min-width: auto;
  min-height: auto;
  padding: 1px 8px;
}

.site-footer {
  margin-top: 12px;
  background: silver;
  box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #dfdfdf, inset -2px -2px grey, inset 2px 2px #fff;
  padding: 3px;
}

.site-footer .status-bar {
  margin: 0;
}