/* PaperMod の上に重ねる小さな CSS */

/* 本文の幅 (元は 720px)。PC で少し広く */
:root { --main-width: 840px; }

/* 元はボタンと JS で .dark を切り替える。ここでは OS の設定に従う */
@media (prefers-color-scheme: dark) {
  :root {
    --theme: rgb(29, 30, 32);
    --entry: rgb(46, 46, 51);
    --primary: rgb(218, 218, 219);
    --secondary: rgb(155, 156, 157);
    --tertiary: rgb(65, 66, 68);
    --content: rgb(196, 196, 197);
    --code-block-bg: rgb(46, 46, 51);
    --code-bg: rgb(55, 56, 62);
    --border: rgb(51, 51, 51);
  }
  .list { background: var(--theme); }
}
:root { --code-block-bg: rgb(246, 248, 250); }
@media (prefers-color-scheme: dark) {
  :root { --code-block-bg: rgb(22, 27, 34); }
}

/* ヘッダのメニューが多いとき、横に流さず折り返す (元は 1 行で横に流れて、狭い幅では切れる) */
#menu { flex-wrap: wrap; overflow-x: visible; white-space: normal; column-gap: var(--gap); }
#menu li + li { margin-inline-start: 0; }
@media (max-width: 600px) {
  .nav { line-height: 2.4; padding-bottom: 8px; }
  #menu { column-gap: 16px; }
}

/* 一覧の記事の枠全体を押せるように (元は空の a.entry-link を重ねる) */
.post-entry h2 { font-size: 24px; line-height: 1.3; margin-bottom: 4px; }
.post-entry h2 a::after { content: ""; position: absolute; inset: 0; }
.post-entry .entry-content p { margin: 0; }

/* 一覧の写真 (本文の最初の画像か image:)。右に小さく、枠に合わせて切り抜く */
.post-entry.with-cover { display: grid; grid-template-columns: 1fr 120px; column-gap: 16px; }
.post-entry.with-cover .entry-cover { grid-column: 2; grid-row: 1 / span 3; margin: 0; }
.post-entry.with-cover > :not(.entry-cover) { grid-column: 1; }
.post-entry .entry-cover img { width: 120px; height: 90px; object-fit: cover; border-radius: 4px; margin: 0; }
@media (max-width: 600px) {
  .post-entry.with-cover { grid-template-columns: 1fr 80px; column-gap: 12px; }
  .post-entry .entry-cover img { width: 80px; height: 60px; }
}

.post-content pre.highlight { margin: 1.5em 0; }
.post-content pre.highlight code { color: inherit; }
.post-content .card-link, .post-content .card-x { box-shadow: none; }
.post-content .card-link-title { color: var(--primary); }
.post-content .embed-youtube-link img, .post-content .card-link-image { margin: 0; }
.archive-month { display: block; margin: 1.5em 0; }
.archive-month-header { margin: 0.5em 0; }