/*
Theme Name: Jiyu ni Hataraku
Template: cocoon-master
Version: 1.0.0
Description: 「自由に働く。」エディトリアル・デザインの Cocoon 子テーマ。静かで洗練された、読むための組版。
Author: Shingo
Text Domain: jiyu-ni-hataraku
*/

/* ─────────────────────────────────────────────
   1. トークン（カラー・タイポ）
   ───────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;600;700&family=Noto+Serif+JP:wght@400;500;600;700&family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --jh-bg: #faf8f3;
  --jh-bg-alt: #f2ede2;
  --jh-ink: #1a1a1a;
  --jh-ink-soft: #3a3a3a;
  --jh-muted: #6b6b66;
  --jh-line: #d8d2c4;
  --jh-line-soft: #e8e3d4;
  --jh-accent: #b8860b;
  --jh-serif: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --jh-sans: "Inter", "Noto Sans JP", "Hiragino Sans", "Yu Gothic", system-ui, sans-serif;
  --jh-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
}

/* ダークモード（任意） */
body.jh-dark {
  --jh-bg: #0f0e0c;
  --jh-bg-alt: #17150f;
  --jh-ink: #f5f1e8;
  --jh-ink-soft: #d9d3c4;
  --jh-muted: #8a857a;
  --jh-line: #2a2620;
  --jh-line-soft: #1d1a15;
  --jh-accent: #d4a84a;
}

/* ─────────────────────────────────────────────
   2. 全体のリセット・土台
   ───────────────────────────────────────────── */
body {
  background: var(--jh-bg) !important;
  color: var(--jh-ink) !important;
  font-family: var(--jh-sans) !important;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "palt";
}
body, body::selection { }
::selection { background: var(--jh-accent); color: var(--jh-bg); }
a { color: var(--jh-ink); }
a:hover { color: var(--jh-accent); }

#container, #body-in, .main, #main, #sidebar, .wrap {
  background: var(--jh-bg) !important;
}

/* Cocoon のデフォルトシャドウ・角丸を外してフラットに */
#main, #sidebar, .article, .entry-card, .widget,
.a-wrap, .e-card, .ect-entry-card {
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* ─────────────────────────────────────────────
   3. ヘッダー / マストヘッド
   ───────────────────────────────────────────── */
#header {
  background: var(--jh-bg) !important;
  border-bottom: 1px solid var(--jh-line);
  padding: 0;
}
#header-in { padding: 32px 24px 24px; text-align: center; border-bottom: 3px double var(--jh-ink); }
.site-name-text, .site-name a {
  font-family: var(--jh-serif) !important;
  font-weight: 700 !important;
  font-size: clamp(40px, 6vw, 72px) !important;
  letter-spacing: -.02em !important;
  line-height: 1 !important;
  color: var(--jh-ink) !important;
}
.tagline, .site-description, .site-name-description {
  font-family: var(--jh-mono) !important;
  font-size: 11px !important;
  letter-spacing: .25em !important;
  text-transform: uppercase;
  color: var(--jh-muted) !important;
  margin-top: 12px !important;
}

/* グローバルナビ */
#navi, .navi-in {
  background: var(--jh-bg) !important;
  border-bottom: 1px solid var(--jh-line) !important;
}
.navi-in > .menu-header .item-label,
.navi-in a {
  color: var(--jh-ink-soft) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: .05em;
}
.navi-in a:hover {
  background: transparent !important;
  color: var(--jh-ink) !important;
  border-bottom: 2px solid var(--jh-ink);
}
.menu-header .sub-menu a { background: var(--jh-bg-alt) !important; border-top: 1px solid var(--jh-line-soft); }

/* ─────────────────────────────────────────────
   4. トップページ — 記事一覧（entry-card）
   ───────────────────────────────────────────── */
#list { padding: 40px 0; }

/* ヘッダー/アイキャッチを落ち着かせる */
.entry-card, .a-wrap, .ect-vertical-card .entry-card-wrap {
  background: transparent !important;
  padding: 30px 0 !important;
  border-bottom: 1px solid var(--jh-line-soft) !important;
  border-radius: 0 !important;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.a-wrap:hover, .entry-card:hover {
  background: transparent !important;
  opacity: 1;
}
.entry-card-thumb, .card-thumb {
  margin: 0 0 8px 0 !important;
  max-width: 100% !important;
  border: 1px solid var(--jh-line);
}
.entry-card-title, .card-title, h2.entry-card-title a {
  font-family: var(--jh-serif) !important;
  font-weight: 600 !important;
  font-size: 26px !important;
  line-height: 1.3 !important;
  letter-spacing: -.01em !important;
  color: var(--jh-ink) !important;
  margin: 0 !important;
  text-wrap: pretty;
}
.a-wrap:hover .entry-card-title { color: var(--jh-accent) !important; }
.entry-card-snippet, .card-snippet {
  font-size: 14px !important;
  line-height: 1.75 !important;
  color: var(--jh-ink-soft) !important;
  margin: 6px 0 0 !important;
  text-wrap: pretty;
}

/* カテゴリー/日付のメタ */
.entry-card-meta, .card-meta, .post-date, .post-update, .cat-label, .category-info {
  font-family: var(--jh-mono) !important;
  font-size: 11px !important;
  letter-spacing: .15em !important;
  color: var(--jh-muted) !important;
  background: transparent !important;
  padding: 0 !important;
  border: 0 !important;
}
.cat-label, .cat, a.cat-link {
  color: var(--jh-accent) !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  font-weight: 500 !important;
}

/* 最初の記事を「特集」として大きく見せる */
#list > .a-wrap:first-child .entry-card-title,
.list .a-wrap:first-child .entry-card-title {
  font-size: clamp(32px, 4.2vw, 52px) !important;
  line-height: 1.15 !important;
}
#list > .a-wrap:first-child,
.list .a-wrap:first-child {
  border-top: 1px solid var(--jh-line) !important;
  padding-top: 40px !important;
}

/* ページネーション */
.pagination a, .pagination span {
  border: 1px solid var(--jh-line) !important;
  background: var(--jh-bg) !important;
  color: var(--jh-ink-soft) !important;
  border-radius: 0 !important;
  font-family: var(--jh-mono);
  font-size: 12px;
}
.pagination .current {
  background: var(--jh-ink) !important;
  color: var(--jh-bg) !important;
  border-color: var(--jh-ink) !important;
}

/* ─────────────────────────────────────────────
   5. 個別記事ページ
   ───────────────────────────────────────────── */
.article {
  background: transparent !important;
  padding: 40px 0 !important;
}
.article h1.entry-title {
  font-family: var(--jh-serif) !important;
  font-weight: 700 !important;
  font-size: clamp(32px, 4.5vw, 56px) !important;
  line-height: 1.15 !important;
  letter-spacing: -.02em !important;
  color: var(--jh-ink) !important;
  margin: 30px 0 !important;
  border: 0 !important;
  padding: 0 !important;
  text-wrap: pretty;
}

/* 日付・カテゴリ */
.date-tags, .entry-header, .author-info, .post-meta {
  font-family: var(--jh-mono) !important;
  font-size: 11px !important;
  letter-spacing: .15em !important;
  color: var(--jh-muted) !important;
  padding: 18px 0 !important;
  border-top: 1px solid var(--jh-line) !important;
  border-bottom: 1px solid var(--jh-line) !important;
}

/* 本文 */
.entry-content {
  font-family: var(--jh-serif) !important;
  font-size: 17px !important;
  line-height: 1.9 !important;
  color: var(--jh-ink) !important;
  max-width: 680px;
  margin: 40px auto 0;
}
.entry-content p { margin: 0 0 22px !important; text-wrap: pretty; }
.entry-content h2 {
  font-family: var(--jh-serif) !important;
  font-weight: 600 !important;
  font-size: 26px !important;
  letter-spacing: -.01em !important;
  color: var(--jh-ink) !important;
  background: transparent !important;
  padding: 20px 0 8px !important;
  border: 0 !important;
  border-top: 1px solid var(--jh-line) !important;
  margin: 44px 0 18px !important;
}
.entry-content h3 {
  font-family: var(--jh-serif) !important;
  font-weight: 600 !important;
  font-size: 20px !important;
  color: var(--jh-ink) !important;
  background: transparent !important;
  padding: 0 !important;
  border: 0 !important;
  border-left: 3px solid var(--jh-accent) !important;
  padding-left: 14px !important;
  margin: 36px 0 14px !important;
}
.entry-content h4 {
  font-family: var(--jh-sans) !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  letter-spacing: .05em;
  color: var(--jh-ink) !important;
  background: transparent !important;
  padding: 0 !important;
  border: 0 !important;
  margin: 28px 0 10px !important;
}

/* 引用 */
.entry-content blockquote {
  font-family: var(--jh-serif) !important;
  font-size: 20px !important;
  line-height: 1.6 !important;
  font-style: italic;
  color: var(--jh-ink) !important;
  background: var(--jh-bg-alt) !important;
  border: 0 !important;
  border-left: 3px solid var(--jh-accent) !important;
  padding: 22px 26px !important;
  margin: 32px 0 !important;
  border-radius: 0 !important;
  text-wrap: pretty;
}
.entry-content blockquote::before { content: none !important; }

/* リスト */
.entry-content ul, .entry-content ol { padding-left: 22px; }
.entry-content li { margin-bottom: 8px; line-height: 1.8; }

/* コード */
.entry-content code, .entry-content pre {
  font-family: var(--jh-mono) !important;
  font-size: 13px;
  background: var(--jh-bg-alt);
  border: 1px solid var(--jh-line);
  border-radius: 0;
  padding: 2px 6px;
}
.entry-content pre { padding: 16px; overflow-x: auto; }

/* 画像キャプション */
.entry-content figcaption {
  font-family: var(--jh-mono);
  font-size: 10px;
  letter-spacing: .15em;
  color: var(--jh-muted);
  text-align: left;
  padding: 8px 0;
  border-bottom: 1px solid var(--jh-line-soft);
}

/* Cocoon の目次（toc） */
.toc {
  background: var(--jh-bg) !important;
  border: 1px solid var(--jh-line) !important;
  border-radius: 0 !important;
  padding: 20px 24px !important;
}
.toc-title {
  font-family: var(--jh-mono) !important;
  font-size: 11px !important;
  letter-spacing: .25em !important;
  color: var(--jh-muted) !important;
  background: transparent !important;
  border-bottom: 1px solid var(--jh-line);
  padding-bottom: 10px;
  text-transform: uppercase;
}
.toc ol, .toc ul { padding-left: 0; margin: 0; }
.toc li { font-size: 13px; line-height: 1.6; padding: 6px 0; border-bottom: 1px solid var(--jh-line-soft); }
.toc li:last-child { border-bottom: 0; }
.toc a { color: var(--jh-ink-soft); }
.toc a:hover { color: var(--jh-accent); }

/* Cocoonの「この記事を書いた人」ボックス */
.author-box {
  background: var(--jh-bg-alt) !important;
  border: 1px solid var(--jh-line) !important;
  border-radius: 0 !important;
  padding: 24px !important;
  margin: 40px 0 !important;
  box-shadow: none !important;
}

/* SNSシェアボタン */
.sns-share, .sns-follow {
  background: transparent !important;
  padding: 20px 0 !important;
  border-top: 1px solid var(--jh-line);
  border-bottom: 1px solid var(--jh-line);
}
.sns-share a, .sns-share-button {
  background: var(--jh-bg) !important;
  color: var(--jh-ink-soft) !important;
  border: 1px solid var(--jh-line) !important;
  border-radius: 0 !important;
  font-family: var(--jh-mono);
  font-size: 11px;
  letter-spacing: .1em;
  transition: all .15s;
}
.sns-share a:hover { background: var(--jh-ink) !important; color: var(--jh-bg) !important; border-color: var(--jh-ink) !important; }

/* 関連記事・ナビゲーション */
.related-entry-card, .comment-navigation, .post-navigation {
  background: transparent !important;
  border-top: 1px solid var(--jh-line);
  padding: 30px 0;
}
.related-entry-card-title {
  font-family: var(--jh-mono) !important;
  font-size: 11px !important;
  letter-spacing: .3em !important;
  color: var(--jh-accent) !important;
  text-transform: uppercase;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--jh-ink);
  margin-bottom: 20px;
}

/* ─────────────────────────────────────────────
   6. サイドバー / ウィジェット
   ───────────────────────────────────────────── */
#sidebar .widget,
#sidebar .sidebar-widget {
  background: transparent !important;
  padding: 0 0 32px !important;
  margin-bottom: 32px;
  border: 0;
  border-bottom: 1px solid var(--jh-line-soft);
  box-shadow: none !important;
}
#sidebar .widget-title, #sidebar h3 {
  font-family: var(--jh-mono) !important;
  font-size: 10px !important;
  letter-spacing: .3em !important;
  color: var(--jh-accent) !important;
  text-transform: uppercase;
  background: transparent !important;
  padding: 0 0 10px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--jh-ink) !important;
  margin-bottom: 14px !important;
}
#sidebar ul { list-style: none; padding: 0; margin: 0; }
#sidebar li {
  font-size: 13px;
  padding: 8px 0;
  border-bottom: 1px solid var(--jh-line-soft);
}
#sidebar li:last-child { border-bottom: 0; }
#sidebar a { color: var(--jh-ink-soft); }
#sidebar a:hover { color: var(--jh-accent); }

/* プロフィールウィジェット */
.author-widget-box {
  background: transparent !important;
  padding: 0 !important;
  border: 0 !important;
}
.author-widget-box .author-icon img {
  border-radius: 0 !important;
  border: 1px solid var(--jh-line);
}
.author-widget-name {
  font-family: var(--jh-serif) !important;
  font-weight: 600 !important;
  font-size: 18px !important;
}

/* 検索ウィジェット */
.search-box, .search-form, input.search-edit {
  background: var(--jh-bg-alt) !important;
  border: 1px solid var(--jh-line) !important;
  border-radius: 0 !important;
  font-family: var(--jh-sans) !important;
  font-size: 13px !important;
}

/* ─────────────────────────────────────────────
   7. フッター
   ───────────────────────────────────────────── */
#footer, .footer {
  background: var(--jh-bg) !important;
  border-top: 3px double var(--jh-ink) !important;
  color: var(--jh-ink-soft) !important;
  padding-top: 30px;
}
#footer a { color: var(--jh-ink-soft) !important; }
#footer a:hover { color: var(--jh-accent) !important; }
.copyright {
  font-family: var(--jh-mono);
  font-size: 10px;
  letter-spacing: .2em;
  color: var(--jh-muted) !important;
  padding: 20px 0;
  border-top: 1px solid var(--jh-line);
  text-align: center;
}

/* ─────────────────────────────────────────────
   8. Cocoon の派手な装飾を抑える
   ───────────────────────────────────────────── */
.new-entry-card-title-label,
.entry-card-meta-hover,
.badge,
.cat-label,
.popular-entry-card-order { background: transparent !important; }

/* トップへ戻るボタン */
.go-to-top {
  background: var(--jh-ink) !important;
  color: var(--jh-bg) !important;
  border-radius: 0 !important;
  border: 0 !important;
}

/* ─────────────────────────────────────────────
   9. レスポンシブ
   ───────────────────────────────────────────── */
@media (max-width: 834px) {
  .site-name-text, .site-name a { font-size: 36px !important; }
  .article h1.entry-title { font-size: 28px !important; }
  .entry-content { font-size: 16px !important; }
  .entry-card-title, .card-title { font-size: 20px !important; }
}