/*!
 * ENA theme — bundled stylesheet
 * 自動生成ファイル。編集しないこと。
 * 生成元: tokens.css / base.css / layout.css / components.css / utilities.css
 * 生成コマンド: bash tools/build-css.sh
 * legacy.css は意図的に含めない（SPEC §H-3: 将来まとめて削除できる状態を保つ）
 */

/* ===== tokens.css ===== */
/* tokens — 色・タイポ・スペーシング・ブレークポイント（SPEC §E-2）
   色・余白・タイポはこのファイルの変数のみを参照する。 */

:root {
  /* color */
  --c-text: #1f1b18;
  --c-muted: #5d554e;
  --c-accent: #8a6a4b;
  --c-accent-strong: #6d5139;
  --c-surface: #ffffff;
  --c-subtle: #f6f3ef;
  --c-border: #e2dcd4;
  --c-focus: #1a5fb4;

  /* typography — システムフォントスタックを既定とする（外部フォントを読まない） */
  --font-base: system-ui, -apple-system, "Segoe UI", "Hiragino Sans",
    "Noto Sans JP", "Yu Gothic", Meiryo, sans-serif;
  --fs-sm: 0.875rem;
  --fs-md: 1rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.5rem;
  --lh-body: 1.8;
  --lh-heading: 1.4;

  /* spacing */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-12: 3rem;

  /* layout */
  --container: 720px;
  --container-wide: 1080px;
  --radius: 6px;

  /* ブレークポイント（mobile first。参照用の記録。CSS 変数はメディアクエリに使えない） */
  --bp-md: 48em;  /* 768px */
  --bp-lg: 64em;  /* 1024px */
}

/* ===== base.css ===== */
/* base — 最小限のリセットと要素既定 */

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  font-family: var(--font-base);
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  color: var(--c-text);
  background: var(--c-surface);
}

h1, h2, h3, h4, h5, h6 {
  line-height: var(--lh-heading);
  margin: 0 0 var(--sp-4);
}

p, ul, ol, figure, table { margin: 0 0 var(--sp-4); }

img, svg, video { max-width: 100%; height: auto; }

a { color: var(--c-accent); }
a:hover { color: var(--c-accent-strong); }

/* focus は :focus-visible で定義する。outline:none の単独使用を禁止（SPEC §J-2） */
:focus-visible {
  outline: 3px solid var(--c-focus);
  outline-offset: 2px;
}

button { font: inherit; }

table { border-collapse: collapse; width: 100%; }
th, td { border: 1px solid var(--c-border); padding: var(--sp-2) var(--sp-3); text-align: left; }

/* ===== layout.css ===== */
/* layout — ヘッダ／フッタ／コンテナ／グリッド（mobile first） */

.site { display: flex; flex-direction: column; min-height: 100vh; }
.site-main { flex: 1 0 auto; }

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--sp-4);
  padding-block: var(--sp-8);
}
.container--full,
.container--lp { max-width: var(--container-wide); }

.site-header {
  border-bottom: 1px solid var(--c-border);
  background: var(--c-surface);
}
.site-header__inner {
  max-width: var(--container-wide);
  margin-inline: auto;
  padding: var(--sp-3) var(--sp-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
}

.site-title { margin: 0; font-size: var(--fs-lg); }
.site-title a { text-decoration: none; color: inherit; }

/*
 * ヘッダーロゴの表示サイズ（DEC-107 / R-125）。
 *
 * attachment 12080（ena_logo_k_159-jpg.webp）は原寸 158x96 で、
 * これまで width/height 属性のまま 158x96 で描画されていた。
 * Owner 指示により実表示を 50% = 79x48 にする。
 *   ・画像ファイル・attachment・custom_logo(12080)・HTML属性は一切変更しない
 *   ・width だけを指定し height:auto で 158:96 の比を維持する（79/48 = 158/96）
 *   ・width/height 属性は残るため aspect-ratio が効き、読み込み前も 79x48 を確保 = CLS 0
 *   ・`.site-header` にスコープし、グローバルな img 規則（base.css）には触れない
 *
 * vertical-align: bottom は「ロゴ直下の行内ベースライン余白」を消すためのもの。
 * 旧テーマ由来 mu-plugin CSS が img{vertical-align:bottom} を出す `/` と `/sts/` では
 * 元から余白 0（.site-title 高 = 96）だったが、それ以外のページは line-height 1.8 の
 * 行ボックスにより +11px の余白が付き、.site-title 高 = 107 になっていた。
 * 96 に対する 11px は目立たないが 48 に対しては 23% で、縮小後に
 * ロゴが上寄りに見える。ロゴ自身の行内余白のみを打ち消し、全ページで揃える。
 * ナビ・ヘッダーの他要素の余白は変更しない。
 */
.site-header .custom-logo {
  width: 79px;
  height: auto;
  vertical-align: bottom;
}

.site-footer {
  border-top: 1px solid var(--c-border);
  background: var(--c-subtle);
}
.site-footer__inner {
  max-width: var(--container-wide);
  margin-inline: auto;
  padding: var(--sp-6) var(--sp-4);
}
.site-footer__copyright { margin: 0; font-size: var(--fs-sm); color: var(--c-muted); }

.page-header { margin-bottom: var(--sp-8); }

/* アーカイブは CSS Grid。masonry / imagesloaded は使わない（SPEC §C-7-3 C-21） */
.entry-card-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: 1fr;
}

@media (min-width: 48em) {
  .entry-card-list { grid-template-columns: repeat(2, 1fr); }
  .container { padding-block: var(--sp-12); }
}

@media (min-width: 64em) {
  .entry-card-list { grid-template-columns: repeat(3, 1fr); }
}

/* ===== components.css ===== */
/* components — ナビ／カード／ボタン／コメント */

/* --- skip link（フォーカス時に可視化。SPEC §J-7） --- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: var(--sp-2) var(--sp-4);
  background: var(--c-surface);
  border: 2px solid var(--c-focus);
}
.skip-link:focus { left: var(--sp-2); top: var(--sp-2); }

/* --- navigation ---
   UA 分岐を持たない。同一マークアップを CSS だけで desktop / mobile に切り替える（SPEC §E-1）。 */
.site-nav__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  background: transparent;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  color: inherit;
  cursor: pointer;
}
.site-nav__toggle-icon[data-icon="close"] { display: none; }
.site-nav__toggle[aria-expanded="true"] .site-nav__toggle-icon[data-icon="menu"] { display: none; }
.site-nav__toggle[aria-expanded="true"] .site-nav__toggle-icon[data-icon="close"] { display: inline-flex; }

.site-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* mobile: 既定は閉じた状態。JS が無効でもリンクへ到達できるよう、
   トグル未操作時は hidden 属性ではなく CSS で畳むだけにする。 */
@media (max-width: 47.999em) {
  .site-nav { position: relative; }
  .site-nav__list {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + var(--sp-2));
    min-width: 12rem;
    padding: var(--sp-2);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    z-index: 20;
  }
  .site-nav__toggle[aria-expanded="true"] + .site-nav__list { display: block; }
  .site-nav__list > li + li { border-top: 1px solid var(--c-border); }
  .site-nav__list a { display: block; padding: var(--sp-2) var(--sp-3); }
}

@media (min-width: 48em) {
  .site-nav__toggle { display: none; }
  .site-nav__list { display: flex; gap: var(--sp-4); align-items: center; }
}

/* --- entry card --- */
.entry-card { margin: 0; }
.entry-card__link {
  display: grid;
  gap: var(--sp-2);
  text-decoration: none;
  color: inherit;
}
.entry-card__media img { display: block; width: 100%; height: auto; border-radius: var(--radius); }
.entry-card__title {
	/* h1 要素だが見た目は h2 相当。h1_count 維持のための意図的な構造（SPEC §I-1 #9） */ font-weight: 700; }
.entry-category {
  display: inline-block;
  font-size: var(--fs-sm);
  color: var(--c-muted);
}

/* --- entry --- */
.entry-header { margin-bottom: var(--sp-6); }
.entry-title { font-size: var(--fs-xl); }
.entry-byline { font-size: var(--fs-sm); color: var(--c-muted); }
.entry-thumbnail { margin: 0 0 var(--sp-6); }
.entry-thumbnail img { display: block; width: 100%; height: auto; }

.tag-list { list-style: none; display: flex; flex-wrap: wrap; gap: var(--sp-2); padding: 0; }
.tag-list a { font-size: var(--fs-sm); }

.share-links ul { list-style: none; display: flex; gap: var(--sp-3); padding: 0; }

.related-posts,
.author-box { margin-top: var(--sp-12); }
.section-title { font-size: var(--fs-lg); }
.author-box__body { display: flex; gap: var(--sp-4); align-items: flex-start; }
.author-box__avatar img { border-radius: 50%; }
.author-box__name { font-weight: 700; margin: 0 0 var(--sp-1); }
.author-box__bio { margin: 0; font-size: var(--fs-sm); color: var(--c-muted); }

/* --- pagination（/page/N/ 形式を維持。SPEC §C-7-2 C-24） --- */
.pagination { margin-top: var(--sp-8); }
.pagination .nav-links { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.pagination .page-numbers {
  display: inline-flex;
  min-width: 2.5rem;
  min-height: 2.5rem;
  align-items: center;
  justify-content: center;
  padding: 0 var(--sp-2);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  text-decoration: none;
}
.pagination .page-numbers.current { background: var(--c-subtle); font-weight: 700; }

/* --- page top（CSS のみ。jQuery を使わない。SPEC §C-7-3 C-38） --- */
.page-top {
  position: sticky;
  bottom: var(--sp-4);
  margin-left: auto;
  margin-right: var(--sp-4);
  display: inline-flex;
  width: 2.75rem;
  height: 2.75rem;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--c-border);
  border-radius: 50%;
  background: var(--c-surface);
  color: inherit;
}

/* --- search form --- */
.search-form { display: flex; gap: var(--sp-2); }
.search-form label { flex: 1 1 auto; }
.search-form .search-field { width: 100%; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--c-border); border-radius: var(--radius); }

/* --- comments --- */
.comments-area { margin-top: var(--sp-12); }
.comment-list { list-style: none; padding: 0; }
.comment-form label { display: block; font-size: var(--fs-sm); }
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
  width: 100%;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
}

/* ===== utilities.css ===== */
/* utilities */

.screen-reader-text {
  border: 0;
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}
.screen-reader-text:focus {
  clip-path: none;
  height: auto;
  width: auto;
  margin: 0;
  padding: var(--sp-2) var(--sp-4);
  position: static;
}

.no-results { padding: var(--sp-8) 0; }