/*
Theme Name: atyks-theme
Author: Gemini
Description: A theme for atyks.
Version: 1.0
*/

/* ===== Minimal, readable blog CSS (microformats2対応) ===== */
:root{
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans JP", "Hiragino Kaku Gothic ProN",
          "Yu Gothic", "YuGothic", "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --maxw: 70ch;         /* 1行の文字数 */
  --gap: 1rem;          /* 基本余白 */
  --gap-lg: 1.5rem;
  --border: 1px solid var(--c-border);
font-size:   1.3rem;
line-height: 1.3em;

  /* Light theme */
  --c-bg: #fff;
  --c-text: #1a1a1a;
  --c-muted: #666;
  --c-link: #0b63ce;
  --c-link-visited: #5a2ea6;
  --c-border: #ddd;
  --c-quote-bar: #e5e5e5;
  --c-chip-bg: #f6f6f6;
}

@media (prefers-color-scheme: dark){
  :root{
    --c-bg: #0e0f11;
    --c-text: #ececec;
    --c-muted: #a8a8a8;
    --c-link: #7db3ff;
    --c-link-visited: #c7a7ff;
    --c-border: #2a2d32;
    --c-quote-bar: #2f3338;
    --c-chip-bg: #17191c;
  }
}

*{ box-sizing: border-box; }
html{ hanging-punctuation: first last; }
html,body{ margin:0; padding:0; background:var(--c-bg); color:var(--c-text); }
body{
  font-family: var(--font);
  line-height: 1.8;
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
}

/* レイアウト */
header, main, footer{
  width: min(100%, calc(var(--maxw) + 2*var(--gap)));
  margin-inline: auto;
  padding-inline: var(--gap);
}
header{ padding-block: var(--gap); }
main{ padding-block: var(--gap-lg); }
footer{ padding-block: var(--gap-lg); border-top: var(--border); }

/* サイト名（全体） */
.site-name a{
  font-weight: 600;
  text-decoration: none;
  color: inherit;
  display: flex;
  align-items: center;
  gap: 0.5em;
}

/* 記事タイトル */
.h-entry > .p-name{
  font-size: clamp(1.6rem, 2.4vw + 1rem, 2.2rem);
  line-height: 1.3;
  margin: 0 0 .25rem;
  letter-spacing: .02em;
}

/* 日付・カテゴリ・パーマリンク */
.h-entry > p:first-of-type{
  margin: 0 0 var(--gap);
  color: var(--c-muted);
  font-size: .95rem;
}
.dt-published{ white-space: nowrap; }

/* カテゴリ／タグ（丸みのあるチップ状） */
.p-category{
  display: inline-block;
  margin: 0 .35rem .35rem 0;
  padding: .15rem .5rem;
  border-radius: .5rem;
  background: var(--c-chip-bg);
  border: 1px solid var(--c-border);
  text-decoration: none;
  color: inherit;
  font-size: .9rem;
}
.p-category:hover{ text-decoration: underline; }

/* 本文 */
.e-content{ margin-top: var(--gap-lg); }
.e-content p{ margin: 0 0 1em; text-indent: 1em; }
.e-content h2{ margin: 2rem 0 .5rem; font-size: 1.25rem; }
.e-content h3{ margin: 1.5rem 0 .5rem; font-size: 1.1rem; }

.e-content img, .e-content video, .e-content iframe{
  max-width: 100%;
  height: auto;
}
.e-content figure{ margin: 1.25rem 0; }
.e-content figcaption{
  color: var(--c-muted);
  font-size: .9rem;
  margin-top: .25rem;
}

/* 引用 */
.e-content blockquote{
  margin: 1.25rem 0;
  padding: .5rem 1rem;
  border-left: 4px solid var(--c-quote-bar);
  background: transparent;
  color: inherit;
}

/* コード */
pre, code, kbd, samp{ font-family: var(--mono); }
pre{
  overflow-x: auto;
  padding: .75rem 1rem;
  border-radius: .5rem;
  border: 1px solid var(--c-border);
  background: var(--c-chip-bg);
}
code{ background: var(--c-chip-bg); padding: .1rem .3rem; border-radius: .3rem; }

/* テーブル（簡易的なレスポンシブ対応） */
.e-content table{
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
  font-variant-numeric: tabular-nums;
}
.e-content th, .e-content td{
  border: 1px solid var(--c-border);
  padding: .5rem .6rem;
  text-align: left;
}
.e-content thead th{ background: var(--c-chip-bg); }

/* リンク */
a{ color: var(--c-link); }
a:visited{ color: var(--c-link-visited); }
a:hover{ text-decoration: underline; }
/* 見出し追加 */
.e-content h4 { margin: 1.25rem 0 .5rem; font-size: 1rem; }
.e-content h5 { margin: 1rem 0 .5rem; font-size: .95rem; font-weight: 600; }
.e-content h6 { margin: .75rem 0 .5rem; font-size: .9rem; font-weight: 600; }

/* リスト */
.e-content ul, .e-content ol {
  margin: 1rem 0 1rem 1.25rem;
  padding: 0;
}
.e-content li { margin: .25rem 0; }

/* 引用元 */
.e-content cite { font-style: normal; color: var(--c-muted); }

/* 強調 */
.e-content em { font-style: italic; }
.e-content strong { font-weight: 600; }
.e-content mark {
  background: #ffec99;
  padding: 0 .2em;
  border-radius: .2em;
}

/* ルビ */
ruby { ruby-position: over; }
rt { font-size: .75em; color: var(--c-muted); }

/* 水平線 */
.e-content hr {
  border: 0;
  border-top: 1px solid var(--c-border);
  margin: 2rem 0;
}

/* 定義リスト */
.e-content dl { margin: 1rem 0; }
.e-content dt { font-weight: 600; margin-top: .5rem; }
.e-content dd { margin: 0 0 .5rem 1rem; }

/* アドレス */
address { font-style: normal; color: var(--c-muted); }

/* 注釈など */
small { font-size: .85em; color: var(--c-muted); }

/* 上付き・下付き */
sup, sub { font-size: .75em; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.4em; }
sub { bottom: -0.2em; }

/* アクセシビリティ・フォーカス */
:focus-visible{
  outline: 2px solid color-mix(in oklab, var(--c-link), white 20%);
  outline-offset: 2px;
}

footer h4 {
  margin: 1.5em 0 0.5em;
  font-size: 1rem;
  font-weight: 600;
}

/* フッター・バックナンバー（見出しとリストに変更） */
footer ul{
  list-style: none;
  padding: 0;
  margin: 0 0 var(--gap);
  display: flex;
  flex-wrap: wrap;
  gap: .5rem .75rem;
}
footer ul a{
  text-decoration: none;
  border-bottom: 1px dashed var(--c-border);
  color: inherit;
}
footer ul a:hover{ border-bottom-style: solid; }

footer .h-card{ color: inherit; text-decoration: none; }
footer .h-card .p-name{ font-weight: 600; }

/* 印刷時（リンクURLを表示） */
@media print{
  body{ color: #000; }
  a[href^="http"]::after{ content:" <" attr(href) ">"; font-size: .85em; }
  header, footer{ border: none; }
}

/* Post list on index/archives */
.post-list {
  list-style: none;
  padding: 0;
}
.post-list-item {
  display: flex;
  gap: 1em;
  margin-bottom: 1em;
}
.post-list-item .dt-published {
  flex-shrink: 0;
  margin-top: 0.2em; /* Align with title baseline */
}
.post-list-item__title {
  font-size: 1.1em;
  font-weight: 600;
  display: block; /* To have meta below it */
  margin-bottom: 0.25em;
}
.post-list-item .post-meta {
  font-size: 0.9em;
}