/*
Theme Name: ポチミル
Theme URI: https://pochimiru.com
Description: プチプラEC比較・検証メディア「ポチミル」の Astra 子テーマ。比較表・PR表記・可読性重視のタイポグラフィを標準で持つ。
Author: ポチミル
Template: astra
Version: 1.2.0
Text Domain: pochimiru
*/

/* =========================================================
   設計方針

   1. 色で区切らず、ウェイトと余白で階層を作る
      （色枠・薄背景バッジは使わない）
   2. モバイルを基準に設計する（想定読者の大半がスマホ）
   3. コントラストは画像やテーマに依存させない
   4. 装飾より可読性。比較メディアの資産は「読めること」
   ========================================================= */

/* =========================================================
   デザイントークン
   ========================================================= */
:root {
  color-scheme: light dark;

  /* ブランド。ライト時は AA を満たす濃度まで落としている */
  --pm-coral: light-dark(#d94047, #ff7a80);
  --pm-coral-strong: light-dark(#b8323a, #ff9a9f);

  /* 面 */
  --pm-bg: light-dark(#ffffff, #16181c);
  --pm-bg-subtle: light-dark(#faf8f6, #1d2025);
  --pm-bg-inset: light-dark(#f4f1ee, #23262b);

  /* テキスト */
  --pm-text: light-dark(#23262b, #e8e6e3);
  --pm-text-muted: light-dark(#5c626b, #a5a8ad);

  /* 罫線 */
  --pm-rule: light-dark(#e2ded9, #32363c);
  --pm-rule-strong: light-dark(#23262b, #e8e6e3);

  /* タイポグラフィ（流体）。日本語 Web フォントは重いので端末フォントを使う */
  --pm-font: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP",
    "Yu Gothic Medium", "Meiryo", system-ui, sans-serif;
  --pm-fs-body: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --pm-fs-lead: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  --pm-fs-h1: clamp(1.5rem, 1.15rem + 1.7vw, 2.25rem);
  --pm-fs-h2: clamp(1.25rem, 1.08rem + 0.85vw, 1.625rem);
  --pm-fs-h3: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
  --pm-fs-sm: 0.875rem;

  /* 日本語の本文は 1.8 が上限。それ以上は次の行を見失う */
  --pm-lh: 1.8;
  --pm-lh-tight: 1.4;

  /* 余白（4の倍数） */
  --pm-s1: 0.25rem;
  --pm-s2: 0.5rem;
  --pm-s3: 0.75rem;
  --pm-s4: 1rem;
  --pm-s6: 1.5rem;
  --pm-s8: 2rem;
  --pm-s12: 3rem;
  --pm-s16: 4rem;

  --pm-radius: 6px;

  /* 目次から飛んだとき見出しがヘッダーに隠れないための逃げ幅 */
  --pm-anchor-offset: 5rem;
}

/* =========================================================
   ベース
   ========================================================= */
body {
  background: var(--pm-bg);
  color: var(--pm-text);
  font-family: var(--pm-font);
  font-size: var(--pm-fs-body);
  line-height: var(--pm-lh);
  /* 日本語は約物を詰めると締まって見える */
  font-feature-settings: "palt" 1;
}

/* =========================================================
   ダークモード

   IMPORTANT: 親テーマ Astra は面（body・記事カード・ヘッダー等）に
   明るい色を直接指定している。トークンだけを light-dark() で
   切り替えると「白背景 × 薄い文字」になり本文が読めなくなる。
   親テーマが塗る面をここで明示的に上書きする。
   ========================================================= */
@media (prefers-color-scheme: dark) {
  /* Astra は全色を --ast-global-color-* に集約している。
     セレクタ単位で戦わず、変数ごと差し替える。
     こうすると見落とした要素も自動的に追従する。

     0: リンク / 1: リンク hover / 2: 見出し / 3: 本文
     4: 背景（白）/ 5: 副背景 / 6,8: フッター等 / 7: 罫線 */
  :root {
    --ast-global-color-0: #ff7a80;
    --ast-global-color-1: #ff9a9f;
    --ast-global-color-2: #e8e6e3;
    --ast-global-color-3: #c9c7c4;
    --ast-global-color-4: #16181c;
    --ast-global-color-5: #0f1115;
    --ast-global-color-6: #e8e6e3;
    --ast-global-color-7: #32363c;
    --ast-global-color-8: #e8e6e3;
  }

  /* body は Astra のカスタマイザが inline で色を当てるため !important で上書きする。
     ここだけは詳細度で勝てない */
  html,
  body,
  .site,
  #page {
    background-color: #0f1115 !important;
  }

  /* 記事カード本体。Astra 4.x では article.ast-article-single が白を塗る */
  article.ast-article-single,
  .ast-separate-container .ast-article-single,
  .ast-separate-container .ast-article-post,
  .ast-separate-container .comments-area,
  .ast-separate-container .ast-comment-list li.depth-1,
  .site-content,
  .site-header,
  .main-header-bar,
  .ast-header-break-point .main-header-bar,
  .site-footer,
  .site-below-footer-wrap,
  .site-above-footer-wrap,
  .site-primary-footer-wrap,
  .ast-container,
  .widget {
    background-color: var(--pm-bg) !important;
    color: var(--pm-text);
  }

  .site-title a,
  .site-title a:visited,
  .site-description,
  .main-header-menu a,
  .entry-title,
  .entry-title a,
  h1, h2, h3, h4, h5, h6 {
    color: var(--pm-text);
  }

  .main-header-bar,
  .site-header {
    border-bottom-color: var(--pm-rule);
  }

  input,
  textarea,
  select {
    background-color: var(--pm-bg-inset);
    border-color: var(--pm-rule);
    color: var(--pm-text);
  }
}

/* =========================================================
   記事ヘッダー

   タイトルは画像に重ねない。理由は3つ。
   1. 生成画像の明度が毎回変わり、コントラスト比を保証できない
   2. 重ねるとテキストの描画が画像待ちになり LCP が悪化する
   3. 視線が滞留し、タイトルの即読性が落ちる
   ========================================================= */
.pm-article-header {
  margin-bottom: var(--pm-s8);
}

.pm-article-header__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pm-s3);
  align-items: baseline;
  margin-bottom: var(--pm-s3);
  color: var(--pm-text-muted);
  font-size: var(--pm-fs-sm);
}

/* 記事ヘッダーは entry-content の中に差し込まれる。
   Astra の `.ast-single-post .entry-content a`（詳細度 0,3,1）が
   下線を強制するため、同等以上の詳細度で打ち消す */
.ast-single-post .entry-content a.pm-article-header__category,
.pm-article-header__category {
  color: var(--pm-coral);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
}

.ast-single-post .entry-content a.pm-article-header__category:hover,
.pm-article-header__category:hover {
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

/* Astra が出力する投稿メタ（By / 日付）を止める。
   自前の記事ヘッダーと二重になり、著者名が空だと「By /」だけが残るため */
.single .entry-meta,
.single .ast-single-post-order,
.single .post-thumb-img-content {
  display: none;
}

.pm-article-header__title {
  margin: 0 0 var(--pm-s4);
  font-size: var(--pm-fs-h1);
  font-weight: 700;
  line-height: var(--pm-lh-tight);
  letter-spacing: 0.01em;
  text-wrap: balance;
}

.pm-article-header__figure {
  margin: 0;
  border-radius: var(--pm-radius);
  overflow: hidden;
  background: var(--pm-bg-subtle);
}

.pm-article-header__image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

/* =========================================================
   本文タイポグラフィ
   階層は色ではなくウェイト・サイズ・余白で作る
   ========================================================= */
.entry-content {
  font-size: var(--pm-fs-body);
  line-height: var(--pm-lh);
}

/* 本文の測（そく）を制限する。
   日本語は1行 42〜45 文字が読みやすさの上限で、
   それを超えると次の行の先頭を見失いやすくなる。
   比較表など幅が要る要素は下で除外する。 */
.entry-content > * {
  max-width: 44em;
  margin-inline: auto;
}

.entry-content > .pm-table-wrap,
.entry-content > figure,
.entry-content > .wp-block-image,
.entry-content > .wp-block-embed {
  max-width: 100%;
}

/* 記事上部の余白を詰める（Astra の既定は記事メディアには広すぎる） */
.ast-single-post .ast-article-single {
  padding-top: var(--pm-s8);
}

.entry-content > p {
  margin-block: 0 var(--pm-s6);
  /* 行末の泣き別れ・孤立行を防ぐ */
  text-wrap: pretty;
}

/* リード文だけ少し大きくして記事の入口を作る */
.entry-content > p:first-of-type {
  font-size: var(--pm-fs-lead);
}

.entry-content h2,
.entry-content h3,
.entry-content h4 {
  scroll-margin-top: var(--pm-anchor-offset);
  text-wrap: balance;
  line-height: var(--pm-lh-tight);
  letter-spacing: 0.01em;
}

/* h2：太い罫線を1本だけ。色は使わない */
.entry-content h2 {
  margin-block: var(--pm-s16) var(--pm-s4);
  padding-bottom: var(--pm-s3);
  border-bottom: 2px solid var(--pm-rule-strong);
  font-size: var(--pm-fs-h2);
  font-weight: 700;
}

/* h3：左ボーダーを使わない。サイズと余白だけで従属関係を示す */
.entry-content h3 {
  margin-block: var(--pm-s8) var(--pm-s3);
  font-size: var(--pm-fs-h3);
  font-weight: 700;
}

.entry-content h4 {
  margin-block: var(--pm-s6) var(--pm-s2);
  font-size: var(--pm-fs-body);
  font-weight: 700;
  color: var(--pm-text-muted);
}

/* 見出し直後の段落は余白を詰め、見出しと本文を一塊に見せる */
.entry-content h2 + p,
.entry-content h3 + p,
.entry-content h4 + p {
  margin-top: 0;
}

.entry-content ul,
.entry-content ol {
  margin-block: 0 var(--pm-s6);
  padding-left: 1.4em;
}

.entry-content li + li {
  margin-top: var(--pm-s2);
}

.entry-content a {
  color: var(--pm-coral-strong);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
}

.entry-content a:hover {
  text-decoration-thickness: 2px;
}

.entry-content img {
  height: auto;
  border-radius: var(--pm-radius);
}

.entry-content blockquote {
  margin-block: var(--pm-s8);
  padding-left: var(--pm-s6);
  border-left: 2px solid var(--pm-rule);
  color: var(--pm-text-muted);
}

/* =========================================================
   PR 表記（景品表示法・ステマ規制）

   目立たせすぎると記事の信頼が落ち、地味すぎると法令違反になる。
   装飾はせず、罫線と文言の明確さだけで成立させる。
   ========================================================= */
.pm-pr-disclosure {
  margin: 0 0 var(--pm-s8);
  padding-block: var(--pm-s3);
  border-block: 1px solid var(--pm-rule);
  color: var(--pm-text-muted);
  font-size: var(--pm-fs-sm);
  line-height: 1.7;
}

.pm-pr-disclosure__label {
  margin-right: var(--pm-s2);
  color: var(--pm-text);
  font-weight: 700;
  letter-spacing: 0.08em;
}

/* =========================================================
   比較表
   比較記事の主役。横スクロール中に項目名を見失わせない
   ========================================================= */
.pm-table-wrap {
  margin-block: var(--pm-s8);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  border: 1px solid var(--pm-rule);
  border-radius: var(--pm-radius);
}

.pm-table-wrap table {
  width: 100%;
  min-width: 34rem;
  margin: 0;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--pm-fs-sm);
}

.pm-table-wrap th,
.pm-table-wrap td {
  padding: var(--pm-s3) var(--pm-s4);
  border-bottom: 1px solid var(--pm-rule);
  text-align: left;
  vertical-align: top;
  line-height: 1.7;
}

.pm-table-wrap thead th {
  background: var(--pm-bg-inset);
  font-weight: 700;
  white-space: nowrap;
}

/* 1列目を横方向に固定する。
   元の実装は thead に top:0 の sticky を当てていたが、
   ラッパーは横しかスクロールしないため機能していなかった。 */
.pm-table-wrap thead th:first-child,
.pm-table-wrap tbody th:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--pm-bg-inset);
  border-right: 1px solid var(--pm-rule);
}

.pm-table-wrap tbody tr:last-child th,
.pm-table-wrap tbody tr:last-child td {
  border-bottom: 0;
}

/* =========================================================
   要点ボックス
   囲みは1種類だけに絞る。多用すると全部が目立たなくなる
   ========================================================= */
.pm-summary {
  margin-block: var(--pm-s8);
  padding: var(--pm-s6);
  background: var(--pm-bg-subtle);
  border-radius: var(--pm-radius);
}

.pm-summary__title {
  margin: 0 0 var(--pm-s3);
  color: var(--pm-text-muted);
  font-size: var(--pm-fs-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
}

.pm-summary ul,
.pm-summary ol {
  margin: 0;
}

/* =========================================================
   収益導線（CTA）
   押し付けない。ただし押しやすくする
   ========================================================= */
.pm-cta {
  margin-block: var(--pm-s8);
  padding-block: var(--pm-s6);
  border-block: 1px solid var(--pm-rule);
}

.pm-cta__note {
  margin: var(--pm-s3) 0 0;
  color: var(--pm-text-muted);
  font-size: 0.8125rem;
}

.pm-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* タップ領域は最小 44px を保証する。ここは収益に直結する */
  min-height: 44px;
  padding-inline: var(--pm-s6);
  background: var(--pm-coral);
  border-radius: var(--pm-radius);
  color: light-dark(#ffffff, #16181c);
  font-weight: 700;
  text-decoration: none;
  transition: background-color 0.15s ease;
}

.pm-button:hover,
.pm-button:focus {
  background: var(--pm-coral-strong);
  color: light-dark(#ffffff, #16181c);
  text-decoration: none;
}

/* =========================================================
   記事一覧のカード
   マークアップは template-parts/content-blog.php

   コンテナクエリで、置かれた幅に応じて自律的に切り替える。
   ビューポート幅ではなくカードが置かれた幅で判断するため、
   1カラム / サイドバーあり / ウィジェット内 のどこでも破綻しない。
   ========================================================= */

/* 一覧系の画面をコンテナにする。
   .site-main は Astra が出す本文カラム。ここを基準幅とする */
.pm-cards,
.home .site-main,
.blog .site-main,
.archive .site-main,
.search .site-main {
  container-type: inline-size;
}

.pm-card {
  display: grid;
  gap: var(--pm-s4);
  padding-block: var(--pm-s6);
  border-bottom: 1px solid var(--pm-rule);
}

/* 一覧を1カラムにする

   IMPORTANT: Astra は無料版だと inc/blog/blog.php で
   ast-grid-3（3カラム・幅 33.33%）を**ハードコードで**付ける。
   カスタマイザの blog-grid は Astra Pro が無いと効かない。

   1カラムにする理由は2つ。
   1. 日本語の長いタイトルと抜粋を読ませたい。
      抜粋が読めるかどうかが一覧からの遷移率を左右する
   2. カードはコンテナクエリで縦横を切り替えている。
      3カラムだと親（.site-main ≒ 1200px）と実際のカード幅（≒380px）が
      食い違い、横並びレイアウトが 380px に押し込まれて崩れる */
.ast-blog-layout-4-grid .site-main .pm-card,
.ast-blog-layout-5-grid .site-main .pm-card,
.ast-blog-layout-6-grid .site-main .pm-card {
  width: 100%;
  margin-bottom: 0;
  padding-inline: 0;
}

.ast-blog-layout-4-grid .site-main .ast-row,
.ast-blog-layout-5-grid .site-main .ast-row,
.ast-blog-layout-6-grid .site-main .ast-row {
  display: block;
  margin-inline: 0;
}

/* 器はカードごとではなく一覧全体に1枚だけ置く。
   Astra の ast-separate-container は記事1件ごとに白い箱を描くが、
   1カラムのリストでは箱が縦に連なって視線が細切れになる。
   「白い面1枚の上に、罫線で区切られた行が並ぶ」形にする */
.home .site-main .ast-row,
.blog .site-main .ast-row,
.archive .site-main .ast-row,
.search .site-main .ast-row {
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
  background: var(--pm-bg);
  border-radius: var(--pm-radius);
}

/* 最後の行の罫線は器の下辺と重なるので消す */
.site-main .pm-card:last-child {
  border-bottom: 0;
}

/* Astra の ast-separate-container は記事1件ごとに白い箱と余白を描く。
   カードの罫線と二重になるので、一覧では箱を無効化して
   「罫線1本で区切る」表現に寄せる。
   Astra 側は .ast-separate-container .ast-article-post（詳細度 0,2,0）で
   塗るため、こちらは 0,3,0 で確実に上書きする */
.ast-separate-container .site-main .pm-card,
.ast-separate-container .site-main .pm-card.ast-article-post {
  padding-inline: 0;
  background: transparent;
  box-shadow: none;
}

/* サムネイルが無い記事では2カラムにしない（本文が12rem 幅に潰れるため） */
@container (min-width: 34rem) {
  .pm-card:has(.pm-card__thumb) {
    grid-template-columns: 12rem 1fr;
    align-items: start;
  }
}

.pm-card__thumb {
  display: block;
  text-decoration: none;
}

.pm-card__image {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--pm-radius);
  background: var(--pm-bg-subtle);
}

.pm-card__title {
  margin: 0 0 var(--pm-s2);
  font-size: var(--pm-fs-h3);
  font-weight: 700;
  line-height: var(--pm-lh-tight);
  text-wrap: balance;
}

.pm-card__title a {
  color: inherit;
  text-decoration: none;
}

.pm-card__title a:hover {
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

.pm-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pm-s3);
  align-items: baseline;
  margin-bottom: var(--pm-s2);
  color: var(--pm-text-muted);
  font-size: var(--pm-fs-sm);
}

.pm-card__category {
  color: var(--pm-coral);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
}

.pm-card__category:hover {
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

.pm-card__excerpt {
  margin: 0;
  color: var(--pm-text-muted);
  font-size: var(--pm-fs-sm);
  line-height: 1.75;
  text-wrap: pretty;
}

/* =========================================================
   アクセシビリティ
   ========================================================= */
a:focus-visible,
button:focus-visible,
.pm-button:focus-visible {
  outline: 3px solid var(--pm-coral);
  outline-offset: 3px;
  border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .pm-button {
    transition: none;
  }
}

/* =========================================================
   印刷
   比較表を紙で見たい読者が一定数いる
   ========================================================= */
@media print {
  .pm-pr-disclosure,
  .pm-cta {
    border: 1px solid #000;
  }
  .pm-table-wrap {
    overflow: visible;
  }
  .pm-table-wrap table {
    min-width: 0;
  }
}