/*
Theme Name: LINKLEPOST ラボ
Theme URI: https://linklepost.pm-linkle.com/lp
Author: LINKLE LAB
Description: LINKLEPOST で作った記事を載せるサイトのためのテーマ。紹介ページと同じ紙の色・明朝の見出し・若葉色でそろえ、記事の一覧は「公開した日」と「手入れした日」が並ぶ台帳の形にしている。
Version: 1.0.1
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: linklepost-lab
*/

/* ------------------------------------------------------------------
   土台
   ------------------------------------------------------------------ */
:root {
  --lab-paper: var(--wp--preset--color--paper);
  --lab-raised: var(--wp--preset--color--raised);
  --lab-sunken: var(--wp--preset--color--sunken);
  --lab-ink: var(--wp--preset--color--ink);
  --lab-ink-sub: var(--wp--preset--color--ink-sub);
  --lab-hairline: var(--wp--preset--color--hairline);
  --lab-rule: var(--wp--preset--color--rule);
  --lab-sage: var(--wp--preset--color--sage);
  --lab-sage-surface: var(--wp--preset--color--sage-surface);
  --lab-sage-deep: var(--wp--preset--color--sage-deep);
  --lab-serif: var(--wp--preset--font-family--serif);
}

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  -webkit-font-smoothing: antialiased;
  line-break: strict;
  overflow-wrap: anywhere;
}
a { text-underline-offset: 0.25em; text-decoration-thickness: 1px; }
:where(a, button, input, summary):focus-visible {
  outline: 2px solid var(--lab-sage-deep);
  outline-offset: 3px;
  border-radius: 2px;
}
h1, h2, h3, h4 {
  font-feature-settings: "palt";
  letter-spacing: 0.02em;
  text-wrap: pretty;
  word-break: auto-phrase; /* 文節の切れ目で折り返す（対応していない閲覧ソフトでは普通の折り返し） */
}
img { height: auto; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}

/* ------------------------------------------------------------------
   ヘッダー・フッター
   ------------------------------------------------------------------ */
.site-header {
  border-bottom: 1px solid var(--lab-hairline);
  padding-block: 1.125rem;
}
.site-header .wp-block-navigation__container { gap: 1.5rem; }
.site-header .wp-block-navigation a:hover { color: var(--lab-sage-deep); }

.site-footer {
  border-top: 1px solid var(--lab-hairline);
  margin-top: var(--wp--preset--spacing--70);
  padding-block: 2rem 3rem;
  font-size: 0.8125rem;
  color: var(--lab-ink-sub);
}
.site-footer a { color: var(--lab-ink-sub); }
.site-footer a:hover { color: var(--lab-ink); }

/* ------------------------------------------------------------------
   トップ: はじめの一文
   ------------------------------------------------------------------ */
.lab-opening {
  padding-block: clamp(2.5rem, 7vw, 5.5rem) clamp(2rem, 5vw, 4rem);
}
.lab-opening h1 {
  font-size: clamp(1.625rem, 1.1rem + 2.4vw, 2.75rem);
  line-height: 1.55;
  font-weight: 500;
  max-width: 21em;
  margin: 0;
  text-wrap: balance;
}
.lab-opening p {
  margin-top: 1.5rem;
  max-width: 34em;
  color: var(--lab-ink-sub);
}

/* ------------------------------------------------------------------
   記事の台帳（一覧）
   左に「公開した日」「手入れした日」、右に題名と抜粋。
   ------------------------------------------------------------------ */
.ledger-title {
  font-family: var(--wp--preset--font-family--sans);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--lab-ink-sub);
  letter-spacing: 0.04em;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--lab-ink);
  margin: 0;
}
.ledger { list-style: none; margin: 0; padding: 0; }
.ledger > li { margin: 0; border-bottom: 1px solid var(--lab-hairline); }
.ledger-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.5rem 2rem;
  padding-block: 1.75rem;
}
.ledger-row > * { margin: 0; min-width: 0; }
.ledger-meta { display: flex; flex-wrap: wrap; gap: 0.125rem 1rem; }
.ledger-meta > * { margin: 0; }
.ledger-body > * { margin-block: 0; }
.ledger-body .wp-block-post-title {
  font-size: clamp(1.1875rem, 1rem + 0.7vw, 1.5rem);
  line-height: 1.55;
  font-weight: 600;
}
.ledger-body .wp-block-post-excerpt { margin-top: 0.625rem; }
.ledger-body .wp-block-post-excerpt__excerpt { margin: 0; }
.ledger-body .wp-block-post-terms { margin-top: 0.75rem; }
.ledger-thumb { display: none; }
.ledger-thumb img { border-radius: 2px; display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }

@media (min-width: 720px) {
  .ledger-row { grid-template-columns: 8.5rem minmax(0, 1fr) 10rem; align-items: start; }
  .ledger-meta { flex-direction: column; gap: 0.125rem; padding-top: 0.4rem; }
  .ledger-thumb { display: block; }
  /* アイキャッチの無い記事は、右の列を詰めずに空けておく（題名の行の長さをそろえる） */
}

/* 日付の前に、何の日かを書く */
.wp-block-post-date { font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.wp-block-post-date.is-published-date::before { content: "公開 "; }
.wp-block-post-date__modified-date::before { content: "手入れ "; color: var(--lab-sage-deep); }
.wp-block-post-date__modified-date { color: var(--lab-sage-deep); }

/* 分類（カテゴリー）は、下線なしの小さな札 */
.wp-block-post-terms a {
  display: inline-block;
  text-decoration: none;
  color: var(--lab-ink-sub);
  background: var(--lab-sunken);
  padding: 0.05rem 0.6rem;
  border-radius: 2px;
}
.wp-block-post-terms a:hover { background: var(--lab-sage-surface); color: var(--lab-sage-deep); }
.wp-block-post-terms__separator { display: none; }
.wp-block-post-terms a + a,
.wp-block-post-terms a ~ a { margin-left: 0.375rem; }

/* ページ送り */
.wp-block-query-pagination {
  margin-top: 2.5rem;
  font-size: 0.875rem;
  gap: 1rem;
}
.wp-block-query-pagination a { text-decoration: none; }
.wp-block-query-pagination .page-numbers.current { color: var(--lab-ink); font-weight: 600; }

/* 一覧の見出し（分類・検索） */
.archive-head { padding-block: clamp(2rem, 5vw, 3.5rem) 1.5rem; }
.archive-head h1 { font-size: var(--wp--preset--font-size--x-large); margin: 0; }
.archive-head .wp-block-term-description { color: var(--lab-ink-sub); margin-top: 0.75rem; }

/* ------------------------------------------------------------------
   記事ページ
   ------------------------------------------------------------------ */
.article-head { padding-block: clamp(2rem, 6vw, 4rem) 0; }
.article-head > * { margin-block: 0; }
.article-head .wp-block-post-title {
  margin-top: 1rem;
  font-weight: 600;
  /* 記事の題名は 30 字を超えることが多いので、トップの一文より小さくする */
  font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.125rem);
  line-height: 1.5;
}
.article-dates {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--lab-hairline);
  gap: 0.25rem 1.5rem;
}
.article-dates > * { margin: 0; }
.article-eyecatch { margin-top: 2rem; }
.article-eyecatch img { border-radius: 2px; width: 100%; }

.article-body { margin-top: 2.5rem; }
.article-body > * + * { margin-top: 1.5rem; }
.article-body h2 {
  margin-top: 3.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--lab-ink);
  line-height: 1.5;
}
.article-body h3 {
  margin-top: 2.5rem;
  padding-left: 0.875rem;
  border-left: 3px solid var(--lab-sage);
  line-height: 1.6;
}
.article-body h4 { margin-top: 2rem; }
.article-body h2 + *, .article-body h3 + *, .article-body h4 + * { margin-top: 1rem; }
.article-body strong { font-weight: 600; background: linear-gradient(transparent 62%, var(--lab-sage-surface) 62%); }
.article-body ul, .article-body ol { padding-left: 1.4em; }
.article-body li + li { margin-top: 0.4em; }
.article-body li::marker { color: var(--lab-sage-deep); }
.article-body figure { margin-inline: 0; }
.article-body figure img, .article-body > img, .article-body p > img { border-radius: 2px; display: block; max-width: 100%; }
.article-body figcaption {
  margin-top: 0.5rem;
  font-size: 0.8125rem;
  color: var(--lab-ink-sub);
  text-align: left;
}
.article-body blockquote { margin-inline: 0; }

/* 表: 幅が足りないときは、表だけを横に送る */
.article-body table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  font-size: 0.9375rem;
  line-height: 1.7;
  -webkit-overflow-scrolling: touch;
}
.article-body .wp-block-table { overflow-x: auto; }
.article-body .wp-block-table table { display: table; }
.article-body th, .article-body td {
  border: 1px solid var(--lab-hairline);
  padding: 0.625rem 0.875rem;
  text-align: left;
  vertical-align: top;
  min-width: 7em;
}
.article-body th {
  background: var(--lab-sage-surface);
  font-weight: 600;
  white-space: nowrap;
}

/* 記事の終わり: LINKLEPOST の案内 */
.lab-cta {
  margin-top: var(--wp--preset--spacing--60);
  background: var(--lab-sage-surface);
  border-radius: 2px;
  padding: clamp(1.5rem, 4vw, 2.5rem);
}
.lab-cta > * { margin-block: 0; }
.lab-cta h2 {
  font-size: clamp(1.1875rem, 1rem + 0.7vw, 1.5rem);
  border: 0;
  padding: 0;
}
.lab-cta p { margin-top: 0.75rem; color: var(--lab-ink-sub); font-size: 0.9375rem; }
.lab-cta .wp-block-buttons { margin-top: 1.25rem; }
.wp-block-button__link { transition: background-color 0.15s ease; }

/* 前後の記事 */
.article-neighbors {
  margin-top: var(--wp--preset--spacing--50);
  padding-top: 1.5rem;
  border-top: 1px solid var(--lab-hairline);
  font-size: 0.9375rem;
  gap: 1rem 2rem;
}
.article-neighbors > * { margin: 0; flex: 1 1 16rem; min-width: 0; }
.article-neighbors .post-navigation-link-next { text-align: right; }
.article-neighbors a { text-decoration: none; color: var(--lab-ink); }
.article-neighbors a:hover { color: var(--lab-sage-deep); }
.article-neighbors .post-navigation-link__label {
  display: block;
  font-size: 0.8125rem;
  color: var(--lab-ink-sub);
}

/* 固定ページ・見つからないページ */
.page-head { padding-block: clamp(2rem, 6vw, 4rem) 0; }
.page-head h1 { margin: 0; }
.notfound { padding-block: clamp(3rem, 10vw, 7rem); }
.notfound h1 { font-size: var(--wp--preset--font-size--x-large); margin: 0; }
.notfound p { color: var(--lab-ink-sub); }

/* 検索の入力欄 */
.wp-block-search__input {
  border: 1px solid var(--lab-rule);
  border-radius: 2px;
  background: var(--lab-raised);
  padding: 0.625rem 0.75rem;
  font: inherit;
}