/*
 * WordPress化にあたって追加したスタイルだけを置くファイル。
 *
 * assets/css/style.css はデザイン案（design/css/style.css）の完全なコピーとして扱い、
 * デザイン側を修正したら上書きコピーするだけで同期できる状態を保つ。
 * そのため、テーマ固有の追加はすべてこちらに書く。
 */

/* ---------- お知らせのカテゴリ ----------
   デザイン案では色をHTMLのインライン指定で書いていたが、
   WordPressではカテゴリのスラッグから出し分けるためクラス化する。
   一覧（.news-item 内）と記事詳細（article 内）の両方で使うため、
   親要素に依存しないセレクタにする。style.css の `.news-item .cat` とは
   詳細度が同じだが、このファイルを後に読み込むため上書きできる。 */
.cat.cat-news      { background: var(--green); }
.cat.cat-menu      { background: var(--orange); }
.cat.cat-important { background: var(--red); }

/* ---------- ページ送り ----------
   the_posts_pagination() の出力にデザインを合わせる。 */
.navigation.pagination { margin-top: 40px; }
.navigation.pagination .nav-links {
  display: flex; justify-content: center; align-items: center; gap: 8px; flex-wrap: wrap;
}
.navigation.pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 40px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: 8px;
  font-family: var(--serif); font-size: .9rem; color: var(--ink);
  background: #fff; transition: .2s;
}
.navigation.pagination .page-numbers:hover { border-color: var(--orange); color: var(--orange); }
.navigation.pagination .page-numbers.current {
  background: var(--orange); border-color: var(--orange); color: #fff; font-weight: 700;
}
.navigation.pagination .page-numbers.dots { border: 0; background: transparent; }
.navigation.pagination .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* ---------- 記事本文 ----------
   投稿本文はブロックエディターから出力されるため、最低限の余白だけ整える。 */
.entry-content > * + * { margin-top: 1.2em; }
.entry-content h2 { font-size: 1.3rem; margin-top: 2em; }
.entry-content h3 { font-size: 1.1rem; margin-top: 1.6em; }
.entry-content ul, .entry-content ol { padding-left: 1.4em; list-style: revert; }
.entry-content img { max-width: 100%; height: auto; border-radius: var(--radius); }
.entry-content a { color: var(--orange); text-decoration: underline; }

/* 記事のアイキャッチ */
.news-hero { margin: 0 0 32px; }
.news-hero img { width: 100%; height: auto; border-radius: var(--radius); display: block; }

/* ---------- Contact Form 7 ----------
   デザイン案は .form > .row > label + 入力欄 という構造。
   CF7は各入力欄を <span class="wpcf7-form-control-wrap"> で包むため、
   そのspanが幅を持たずレイアウトが崩れないよう調整する。 */
.form .wpcf7-form-control-wrap { display: block; }
.form .req.is-optional { background: var(--ink-soft); }

/* プライバシーポリシー同意のチェックボックス */
.form .consent-row { margin-bottom: 28px; }
.form .consent-row .wpcf7-acceptance .wpcf7-list-item { margin: 0; }
.form .consent-row label {
  display: flex; align-items: center; gap: 8px;
  font-weight: 400; margin: 0; cursor: pointer;
}
.form .consent-row input[type="checkbox"] { width: auto; margin: 0; flex: none; }
.form .consent-row a { color: var(--orange); text-decoration: underline; }

/* 送信ボタン。CF7は <input type="submit"> を出す。
   style.css の `.form input`（詳細度 0,1,1）が `.btn`（0,1,0）に勝ってしまうため、
   ここで詳細度を上げて .btn の見た目を取り戻す。 */
.form .submit input[type="submit"].btn {
  width: auto; cursor: pointer;
  padding: 14px 30px; border: 0; border-radius: 999px;
  background: var(--orange); color: #fff;
  font-weight: 700; font-size: .95rem;
  box-shadow: var(--shadow-s);
  transition: transform .15s ease, background .2s ease;
}
.form .submit input[type="submit"].btn:hover { background: var(--orange-d); transform: translateY(-2px); }
.form .submit input[type="submit"].btn:disabled { opacity: .6; cursor: default; transform: none; }

/* 入力エラー・送信結果のメッセージ */
.form .wpcf7-not-valid-tip { color: var(--red); font-size: .8rem; margin-top: 6px; }
.form .wpcf7-response-output {
  margin: 24px 0 0; padding: 14px 18px;
  border: 1px solid var(--line); border-radius: 8px;
  font-size: .88rem; text-align: center;
}
.form .wpcf7 form.invalid .wpcf7-response-output,
.form .wpcf7 form.unaccepted .wpcf7-response-output { border-color: var(--red); color: var(--red); }
.form .wpcf7 form.sent .wpcf7-response-output { border-color: var(--green); color: var(--green); }
.form .wpcf7-spinner { display: block; margin: 12px auto 0; }

/* ---------- スクロール表示アニメーションの保険 ----------
   .reveal は opacity:0 から始まり、main.js が IntersectionObserver で
   .in を付けて表示する仕組み。JSが読み込めない・実行されない場合、
   本文が永久に見えないままになる。
   そこで既定を「表示」にしておき、JSが動く環境でだけアニメーションさせる。
   <html> の js クラスは header.php のインラインスクリプトで付与する。 */
.reveal { opacity: 1; transform: none; }
.js .reveal { opacity: 0; transform: translateY(24px); }
.js .reveal.in { opacity: 1; transform: none; }

/* アニメーションを控えたい利用者の設定を尊重する */
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
}