/* ============================================================
   WordPress が出力するマークアップ専用のスタイル

   public/css/style.css は**静的HTMLの正本**で、AGENTS.md により無改変で流用する。
   一方 WordPress は静的HTMLに存在しない要素を吐く:
     - ブロックエディタの出力（.wp-block-* / figure / figcaption / blockquote）
     - ページ送り（.navigation.pagination / .page-numbers / .page-links）
     - 読み上げ専用テキスト（.screen-reader-text）
     - ブログ一覧（静的HTMLに対応ページが無い）
   これらをここに置くことで、**静的HTMLの描画に1pxも触れない**ことを保証する。

   判定基準は「セレクタ名がWP固有か」ではなく
   **「そのルールが静的HTMLの描画を変えるか」**。実際に grep して確かめること。
   （例: .prose は静的HTMLにも出るが、その中に h2/figure/blockquote は1件も無いので
     .prose h2 は静的HTMLに対して no-op → ここに置いてよい）

   トークン（--brand 等）は style.css の :root にあり、依存関係で後に読ませている。
   静的HTML撤去後もこのファイルはそのまま残る（theme/README.md の実体化手順の対象外）。
   ============================================================ */

/* ------------------------------------------------------------
   読み上げ専用テキスト

   the_posts_pagination() は <h2 class="screen-reader-text"> を必ず出すが、
   **WordPress コアはこのクラスのCSSを持たない**（テーマ側の責任）。
   定義しないと見出しが画面にそのまま表示される。
   ------------------------------------------------------------ */
.screen-reader-text,
/* ★.screen-reader-response は Contact Form 7 の要素だが、ここでも隠す。
   隠しているのが CF7 のスタイルシート1本だけだと**単一障害点**になる。
   CF7 のCSSが来ないと（プラグイン停止・更新失敗・enqueue の条件ミス・
   サーバーキャッシュが古い応答を返す、など）**フォームは正常に見えて送信もできるのに、
   入力ミスをした瞬間に読み上げ専用のエラー文が本文として画面に出る**。
   実測: CF7 のCSSを外すと 1×1px → 280×62.9px で可視化した（2026-08-20）。
   気づくのは入力を間違えた訪問者だけなので、テーマ側でも押さえる。
   CF7 側の定義と同じ値なので二重に当たっても描画は変わらない。 */
.screen-reader-response {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------------------
   ブログ一覧
   ------------------------------------------------------------ */
.blog-grid {
  display: grid;
  gap: 20px;
  /* min() で包む。320px ではコンテナが正確に280pxで余裕ゼロになり、
     .sec の padding を1px増やしただけで溢れる */
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.blog-card {
  background: var(--surface);
  border: 1px solid var(--border-card);
  border-radius: var(--r-xl);
  overflow: hidden;
}

/* カード全体がリンク。タップ領域は最小でも 170px 超あり D-2（44px）を満たす */
.blog-card-link {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
  padding: 16px;
  color: inherit;
  text-decoration: none;
}

/* .card-photo 本体の指定は style.css:161 にある。高さだけ親が決める設計
   （.nayami-card .card-photo{110px} と同じ形）。
   アイキャッチが無い記事では <img> ごと出さないので、この規則は当たらない */
.blog-card .card-photo { height: 190px; }

.blog-card-date {
  font-size: 16px;               /* D-1: 本文16px以上 */
  font-weight: 700;
  color: var(--text-note);       /* --text-sub はセージ地で3.78:1になり不合格なので使わない */
  font-variant-numeric: tabular-nums;
}

.blog-card-title {
  margin: 0;
  font-size: 18px;
  font-weight: 900;
  line-height: 1.6;
  color: var(--text);
}

/* 抜粋はPHP側（nagano_excerpt）で文字数を切る。
   -webkit-line-clamp で隠すと、読み上げには全文が渡り、文字を拡大すると崩れる */
.blog-card-excerpt {
  margin: 0;
  font-size: 16px;
  line-height: 1.9;
  color: var(--text-body);
}

/* カード全体がリンクだと気づけない読者向けの明示。
   入れ子リンクは不正なので <span>。margin-top:auto で高さの違うカードでも下端が揃う */
.blog-card-more {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;              /* D-2 */
  font-size: 16.5px;
  font-weight: 900;
  color: var(--brand);
}
.blog-card-more::after { content: "→"; }

.blog-card:hover { border-color: var(--brand); }
.blog-card:has(a:focus-visible) { border-color: var(--brand); }

/* ------------------------------------------------------------
   ページ送り（the_posts_pagination / wp_link_pages）
   ------------------------------------------------------------ */
.navigation.pagination { margin-top: 40px; }

.nav-links,
.page-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: center;
}
.page-links { margin-top: 32px; }

.page-numbers,
.page-links a,
.page-links > span:not(.page-links-title) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 56px;               /* D-2: 既存最小54pxを上回る */
  min-height: 56px;
  padding: 0 14px;
  border: 2px solid var(--brand);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--brand);
  font-size: 17px;
  font-weight: 900;
  line-height: 1;
  text-decoration: none;
}

.page-numbers.current,
.page-links > span:not(.page-links-title) {
  background: var(--brand);
  color: #fff;
}

.page-numbers.dots {
  min-width: auto;
  padding: 0 4px;
  border-color: transparent;
  background: transparent;
  color: var(--text-note);
}

a.page-numbers:hover,
.page-links a:hover {
  background: var(--brand);
  color: #fff;
}

.page-links-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-note);
}

/* ------------------------------------------------------------
   記事ページ
   ------------------------------------------------------------ */
.post-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  align-items: center;
  max-width: 820px;              /* .prose と同じ幅に揃える */
  margin: 0 auto 24px;
  font-size: 16px;
  font-weight: 700;
  color: var(--text-note);
}
.post-meta a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;              /* D-2 */
  color: var(--brand);
}

.post-thumb {
  max-width: 820px;
  margin: 0 auto 28px;
}
.post-thumb img {
  width: 100%;
  border-radius: var(--r-lg);    /* height:auto は style.css の img{} が供給する */
}

.post-nav {
  display: grid;
  gap: 12px;
  max-width: 820px;
  margin: 44px auto 0;
}
@media (min-width: 768px) {
  .post-nav { grid-template-columns: 1fr 1fr; }
}
.post-nav a {
  color: inherit;           /* 子が自前で色を持つが、直下にテキストを足したとき既定の青を出さない */
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 64px;
  padding: 14px 18px;
  background: var(--surface);
  border: 1px solid var(--border-card);
  border-radius: var(--r-lg);
  text-decoration: none;
}
.post-nav a:hover { border-color: var(--brand); }
.post-nav-label {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-note);
}
.post-nav-title {
  font-size: 16.5px;
  font-weight: 900;
  line-height: 1.6;
  color: var(--brand);
}

/* ------------------------------------------------------------
   本文（ブロックエディタの出力）

   .prose の基本（p / ul / ol / h3 / a / strong）は style.css:1038- にある。
   ここで足すのは**静的HTMLの .prose には1件も出現しない要素**だけ。
   ------------------------------------------------------------ */

/* h2 が未定義だと、左5pxブランドボーダーを持つ .prose h3 よりブラウザ既定の h2 が
   地味になり、見出しの階層が逆転する。h3 が Sans なので h2 は Serif で上位を明示 */
.prose h2 {
  margin: 52px 0 18px;
  padding-bottom: 12px;
  /* 下線は --sage だと地（--page-bg）との比が 1.34:1 でほぼ見えない。
     h3 が左5pxの --brand ボーダー（6.86:1）を持つので、そのままだと階層が逆転する */
  border-bottom: 3px solid var(--brand);
  font-family: var(--font-heading);
  /* 下限を 23px に。21px だと 375px で h3(19px) との差が2pxしかなく、
     主要顧客層にとって階層の手がかりにならない */
  font-size: clamp(23px, 3.2vw, 27px);
  font-weight: 900;
  line-height: 1.55;
  color: var(--text);
}
.prose h2:first-child { margin-top: 0; }

/* 記事本文の文中リンクにタップ領域を確保する（style.css の .prose a は色だけ）。
   ★スコープを .single に絞ること。`.prose a` と書くと**既存9ページの描画が変わる**。
   静的HTMLの .prose の中に <a> は13個実在し（about/contact/price/privacy/service）、
   inline-flex は原子的インラインボックスを作るので:
     - min-height:44px が行送り（line-height 2.05 ≒ 34.85px）を押し広げ、約18pxずれる
     - リンクが行内で改行できなくなり、周囲の日本語本文が再フローする（2行→1行に化ける）
     - align-items:center でベースラインが周囲の文章とずれる
   実測で /about/ +18.31px、/price/ +9.16px、/contact/ +9.16px の差が出ていた。
   **compare-port.sh は可視テキストしか見ないので、この種の崩れは機械では落ちない。**
   body_class() が記事に `single`、固定ページに `page` を付けるのでここで切り分ける。

   ★`align-items: center` を消さないこと。タップ領域の縦中央揃えのためだけに見えるが、
   ブロックエディタの「メディアファイルへリンク」出力（<figure><a><img></a></figure>）で
   flex の既定値 `stretch` に戻ると、<img> が親の高さまで引き伸ばされて縦横比が壊れる。
   実測: center なら 335×188.5px でリンク無しの画像と完全一致（縦横比 1.777）。 */
.single .prose a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;              /* D-2 */
}

/* ★上の `.single .prose a`（詳細度 0,2,1）は `.page-links a`（0,1,1）に勝つ。
   wp_link_pages() のページ送りは single.php で <div class="prose"> の**内側**に出るため、
   放っておくと 56px → 44px に黙って縮む（実測で確認）。D-2 は満たすので不合格ではないが、
   一覧のページ送り 56px と記事内 44px が食い違うので、ここで明示的に戻す。 */
.single .prose .page-links a {
  min-height: 56px;
}

.prose h4 {
  margin: 30px 0 10px;
  font-size: 17.5px;
  font-weight: 900;
  line-height: 1.7;
  color: var(--brand);
}
.prose h5,
.prose h6 {
  margin: 26px 0 8px;
  font-size: 17px;
  font-weight: 900;
  color: var(--text);
}

/* ブラウザ既定の figure { margin: 1em 40px } を潰さないと
   375px で写真の左右に40pxずつ余白が残る */
.prose figure,
.prose .wp-block-image {
  margin: 28px 0;
}
.prose figure img,
.prose .wp-block-image img {
  border-radius: var(--r-md);
}
.prose figcaption {
  margin-top: 10px;
  font-size: 16px;               /* D-1 */
  line-height: 1.9;
  color: var(--text-note);
  text-align: left;
}

/* .prose は max-width 820px なので、幅広・全幅は中で意味を持たない。中央に揃える */
.prose .alignwide,
.prose .alignfull {
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
}
.prose .aligncenter {
  margin-left: auto;
  margin-right: auto;
}

/* 引用。.daihyo-quote（style.css:686-）の意匠を踏襲するが、色は --brand ではなく
   --text-body。本文量のある引用を緑一色にすると読みにくい */
.prose blockquote,
.prose .wp-block-quote {
  margin: 28px 0;
  padding: 4px 0 4px 18px;
  border-left: 4px solid var(--brand);
  font-family: var(--font-heading);
  font-size: clamp(17px, 2.4vw, 19px);
  font-weight: 700;
  line-height: 2;
  color: var(--text-body);
}
.prose blockquote cite {
  display: block;
  margin-top: 10px;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  font-style: normal;
  color: var(--text-note);
}

/* 表。横スクロールを親で受けて、ページ全体には出さない（D-5） */
.prose .wp-block-table {
  margin: 28px 0;
  overflow-x: auto;
}
.prose .wp-block-table table {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border-card);
  border-collapse: collapse;
}
.prose .wp-block-table th,
.prose .wp-block-table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-rule);
  font-size: 16px;
  line-height: 1.9;
  text-align: left;
  vertical-align: top;
}
.prose .wp-block-table th {
  background: var(--page-bg);
  font-weight: 700;
  color: var(--text);
}

.prose .wp-block-separator {
  margin: 36px 0;
  border: 0;
  border-top: 1px solid var(--border-rule);
}

.prose .wp-block-embed { margin: 28px 0; }
.prose .wp-block-embed iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;          /* D-5: 埋め込みで横スクロールを出さない */
}

/* ------------------------------------------------------------
   問い合わせフォーム（Contact Form 7）

   CF7 の出力は素の <input>/<textarea> ＋ .wpcf7-* 接頭辞のクラスだけで、
   テーマの既存クラス（.cta--form / .btn-form）とは名前が衝突しない。

   **入力欄のフォントは必ず16px以上。** iOS Safari は16px未満の入力欄に
   フォーカスすると自動でズームし、以後ページ全体が横にはみ出す（D-5違反）。
   主要顧客層が50〜80代であることとも合わせて、小さくしない。
   ------------------------------------------------------------ */
.form-lead {
  max-width: 800px;
  margin: 0 auto 28px;
  font-size: 16.5px;
  line-height: 1.9;
  color: var(--text-body);
}
/* 文中リンクだが、既存の .info-table td a と同じく min-height を持たせる
   （幅によって1行/2行が変わり、合否が不安定になるのを避ける） */
.form-lead a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--brand);
}

.cf7-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 0 24px;
}
/* 補足説明（.cf7-help）は <label> の中に入っている（aria-describedby は CF7 の持ち物なので
   外から使えない。理由は functions.php の CF7 節）。ラベル名と補足を別の行に分けるため
   flex-wrap を効かせ、.cf7-help に flex-basis:100% を与えて折り返させる */
.cf7-row label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: 17px;
  font-weight: 900;
  color: var(--text);
}
.cf7-req {
  padding: 3px 10px;
  border-radius: var(--r-pill);
  background: var(--brand);
  color: #fff;
  font-size: 16px;          /* D-1。「どこが必須か」は装飾ではないので小さくしない */
  font-weight: 700;
  letter-spacing: .04em;
}
.cf7-help {
  flex-basis: 100%;         /* ラベル名と同じ行に並ばせず、自分の行を作る */
  font-size: 16px;          /* D-1 */
  font-weight: 400;         /* 親のラベルは 900。補足まで太いと主従が消える */
  line-height: 1.8;
  color: var(--text-note);
}

.wpcf7 input[type="text"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="email"],
.wpcf7 textarea {
  width: 100%;
  min-height: 56px;         /* D-2: 44px を上回る */
  padding: 14px 16px;
  border: 2px solid var(--border-card);
  border-radius: var(--r-md);
  background: var(--surface);
  font-family: var(--font-body);
  font-size: 16.5px;        /* ★16px未満にしない（iOSの自動ズーム対策） */
  line-height: 1.7;
  color: var(--text);
}
.wpcf7 textarea {
  min-height: 200px;
  resize: vertical;
}
.wpcf7 input:focus,
.wpcf7 textarea:focus {
  border-color: var(--brand);
  outline: none;
}
.wpcf7 input:focus-visible,
.wpcf7 textarea:focus-visible {
  outline: 3px solid #fff;
  box-shadow: 0 0 0 6px var(--amber);   /* 既存の a:focus-visible と同じ二重リング */
}

.cf7-submit {
  margin: 32px 0 0;
  text-align: center;
}
.wpcf7 input[type="submit"] {
  min-height: 60px;
  padding: 0 40px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--brand);
  color: #fff;
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 900;
  cursor: pointer;
}
.wpcf7 input[type="submit"]:hover { background: var(--brand-dark); }

/* CF7 のメッセージ。既定は赤細字でコントラストも情報量も足りない。
   ★色は**セージ地**（このセクションは .sec--alt）で判定すること。
   白地だけ見て #b3261e を選ぶと、実際の描画地では 4.34:1 で D-3 不合格になる。
   #a81f17 は セージ地 4.86:1 / 白地 7.31:1 で、どちらの地でも合格する */
.wpcf7 .wpcf7-not-valid-tip {
  margin-top: 6px;
  font-size: 16px;          /* D-1 */
  font-weight: 700;
  color: #a81f17;
}
.wpcf7 .wpcf7-response-output {
  margin: 24px 0 0;
  padding: 16px 18px;
  border: 2px solid var(--border-card);
  border-radius: var(--r-md);
  background: var(--surface);
  font-size: 16.5px;
  line-height: 1.9;
  color: var(--text-body);
}
.wpcf7 form.sent .wpcf7-response-output { border-color: var(--brand); }
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output { border-color: #a81f17; }

/* 送信中のスピナーは既定で右に浮くだけ。中央のボタン横に置く */
.wpcf7 .wpcf7-spinner { margin: 0 0 0 12px; }

.prose .wp-block-code,
.prose pre {
  overflow-x: auto;
  padding: 16px;
  background: var(--page-bg);
  border-radius: var(--r-md);
  font-size: 16px;          /* D-1 */
  line-height: 1.8;
}