/*
Theme Name: Shinai Clinic Blog
Theme URI: https://www.shinai-cl.com/blog/
Author: 茅ヶ崎信愛クリニック
Description: 茅ヶ崎信愛クリニック公式サイトと同じヘッダー・フッターを使うブログ用テーマ。本体の clinic-shared.css を読み込んでデザインを共有します。
Version: 1.4.0
Requires at least: 6.0
Tested up to: 6.8
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: shinai-blog
*/

/* =========================================================
   このファイルは clinic-shared.css の「あと」に読み込まれます。
   変数（--brand など）は本体のものをそのまま使えます。
   ========================================================= */

/* ---- ヘッダー：項目が折り返さないように ---- */
nav.main{ gap:1.15rem; }
nav.main a{ white-space:nowrap; }
nav.main a.is-current{ color:var(--brand); font-weight:500; }
.logo-text, .nav-tel a{ white-space:nowrap; }
.logo{ flex-shrink:0; }

/* タブレット幅ではメニューを折りたたむ（横スクロール防止） */
@media(max-width:1040px){
  nav.main{ display:none; }
  .nav-icons{ display:flex; }
}

/* =========================================================
   記事の顔になる図（アイキャッチ）
   ========================================================= */
.post-hero{ background:var(--brand-paler); border-bottom:1px solid var(--border); }
.post-hero-inner{ max-width:900px; margin:0 auto; padding:2.25rem 2rem; }
.post-hero-img{
  display:block; width:100%; aspect-ratio:1200/630; object-fit:cover;
  border-radius:16px; box-shadow:0 6px 26px rgba(58,125,95,0.14);
}
.post-hero.is-empty{ background:linear-gradient(135deg,#2c5e47 0%,var(--brand) 55%,#2f8f6e 100%); border-bottom:none; }
.post-hero-placeholder{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  aspect-ratio:1200/420; border-radius:16px; background:rgba(255,255,255,0.10);
  border:1px solid rgba(255,255,255,0.28);
}
.post-hero-placeholder img{ width:72px; height:72px; object-fit:contain; }
.post-hero-placeholder span{
  font-family:var(--serif); font-size:19px; color:#fff; letter-spacing:.06em;
}

/* =========================================================
   記事本文
   ========================================================= */
.post-wrap{ max-width:760px; margin:0 auto; padding:2.75rem 2rem 4rem; }

.post-head{ margin-bottom:2rem; }
.post-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; font-size:16px; color:var(--text-light); }
.post-cat{
  display:inline-block; background:var(--brand-pale); color:var(--brand);
  border:1px solid var(--border); border-radius:20px; padding:3px 13px;
  font-size:15px; text-decoration:none;
}
.post-cat:hover{ background:var(--brand-light); color:#fff; }
.post-title{
  font-family:var(--serif); font-weight:500; color:var(--brand);
  font-size:clamp(26px,3.4vw,35px); line-height:1.55; letter-spacing:.02em; margin-top:.75rem;
}

.post-body{ font-size:20px; line-height:2.0; color:var(--text-dark); }
.post-body > * + *{ margin-top:1.5rem; }
.post-body h2{
  font-family:var(--serif); font-weight:500; font-size:clamp(22px,2.4vw,27px);
  color:var(--brand); line-height:1.6; margin-top:3rem; padding-bottom:.6rem;
  border-bottom:2px solid var(--brand-pale);
}
.post-body h3{
  font-family:var(--serif); font-weight:500; font-size:22px; color:var(--brand-mid);
  line-height:1.6; margin-top:2.25rem; padding-left:14px; border-left:4px solid var(--brand-light);
}
.post-body h4{ font-size:20px; font-weight:500; color:var(--text-dark); margin-top:2rem; }
.post-body p{ color:var(--text-dark); }
.post-body a{ color:var(--brand); text-decoration:underline; text-underline-offset:3px; }
.post-body a:hover{ color:var(--brand-mid); }
.post-body strong{ font-weight:500; background:linear-gradient(transparent 62%, var(--brand-pale) 62%); }
.post-body ul, .post-body ol{ padding-left:1.5em; }
.post-body li{ margin-bottom:.6rem; }
.post-body ul li::marker{ color:var(--brand-light); }
.post-body img{ border-radius:12px; height:auto; }
.post-body figure{ margin-left:0; margin-right:0; }
.post-body figcaption{ font-size:16px; color:var(--text-light); text-align:center; margin-top:.5rem; }
.post-body blockquote{
  background:var(--sand); border-left:4px solid var(--sand-dark);
  border-radius:0 12px 12px 0; padding:16px 22px; font-size:19px; color:var(--text-mid);
}
.post-body blockquote p{ margin-top:0; }
.post-body hr{ border:none; border-top:1px solid var(--border); margin:2.5rem 0; }
.post-body table{ width:100%; border-collapse:collapse; font-size:18px; }
.post-body th, .post-body td{ border:1px solid var(--border); padding:10px 14px; text-align:left; }
.post-body th{ background:var(--brand-pale); color:var(--brand); font-weight:500; }
.post-body .wp-block-table{ overflow-x:auto; }

.post-wrap .gentle-note{ margin-top:2.75rem; font-size:17px; }

/* ---- 前後の記事 ---- */
.post-nav{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:2.5rem; }
.post-nav-item{
  display:block; background:var(--warm-white); border:1px solid var(--border);
  border-radius:12px; padding:16px 18px; text-decoration:none;
}
.post-nav-item:hover{ background:var(--brand-paler); }
.post-nav-item.next{ text-align:right; }
.pn-label{ display:block; font-size:14px; color:var(--brand-mid); letter-spacing:.1em; margin-bottom:5px; }
.pn-title{ display:block; font-size:17px; color:var(--text-dark); line-height:1.6; }

.back-to-list{ margin-top:2.25rem; text-align:center; }
.back-to-list a{
  display:inline-block; background:var(--brand); color:#fff; text-decoration:none;
  border-radius:10px; padding:13px 30px; font-size:18px;
}
.back-to-list a:hover{ background:var(--brand-mid); }

/* =========================================================
   記事一覧
   ========================================================= */
.post-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:22px; }
.post-card{
  display:flex; flex-direction:column; text-decoration:none; overflow:hidden;
  background:var(--warm-white); border:1px solid var(--border); border-radius:14px;
  box-shadow:0 3px 14px rgba(58,125,95,0.05); transition:box-shadow .2s, transform .15s;
}
.post-card:hover{ box-shadow:0 8px 24px rgba(58,125,95,0.13); transform:translateY(-3px); }
.post-card-thumb{ aspect-ratio:16/9; background:var(--brand-pale); overflow:hidden; }
.post-card-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.post-card-noimg{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; }
.post-card-noimg img{ width:48px; height:48px; object-fit:contain; opacity:.75; }
.post-card-body{ padding:18px 20px 22px; }
.post-card-title{
  font-family:var(--serif); font-size:20px; font-weight:500; color:var(--brand);
  line-height:1.55; margin:.5rem 0 .55rem;
}
.post-card-excerpt{ font-size:17px; color:var(--text-mid); line-height:1.8; }

/* ---- ページ送り ---- */
.pagination{ margin-top:2.5rem; }
.pagination .nav-links{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; }
.pagination .page-numbers{
  display:inline-flex; align-items:center; justify-content:center; min-width:44px; height:44px;
  padding:0 14px; border:1px solid var(--border); border-radius:10px;
  background:var(--warm-white); color:var(--text-mid); text-decoration:none; font-size:17px;
}
.pagination .page-numbers.current{ background:var(--brand); border-color:var(--brand); color:#fff; }
.pagination .page-numbers:hover{ background:var(--brand-pale); color:var(--brand); }

/* =========================================================
   お知らせ一覧
   ========================================================= */
.news-filter{ display:flex; flex-wrap:wrap; gap:9px; margin-bottom:2rem; }
.news-filter-btn{
  display:inline-block; padding:7px 18px; border-radius:22px; text-decoration:none;
  border:1px solid var(--border); background:var(--warm-white); color:var(--text-mid); font-size:16px;
}
.news-filter-btn:hover{ background:var(--brand-pale); color:var(--brand); }
.news-filter-btn.is-on{ background:var(--brand); border-color:var(--brand); color:#fff; }

.news-archive-list{ border-top:1px solid var(--border); }
.news-archive-item{
  display:flex; align-items:baseline; gap:16px; flex-wrap:wrap;
  padding:18px 6px; border-bottom:1px solid var(--border); text-decoration:none;
}
.news-archive-item:hover{ background:var(--brand-paler); }
.news-archive-date{ font-size:16px; color:var(--text-light); letter-spacing:.04em; flex-shrink:0; }
.news-archive-cat{
  flex-shrink:0; font-size:14px; color:var(--brand); background:var(--brand-pale);
  border:1px solid var(--border); border-radius:20px; padding:3px 13px;
}
.news-archive-title{ font-size:18px; color:var(--text-dark); line-height:1.7; flex:1 1 260px; }
.news-archive-item:hover .news-archive-title{ color:var(--brand); }

@media(max-width:600px){
  .news-archive-item{ gap:10px; padding:15px 4px; }
  .news-archive-title{ flex:1 1 100%; font-size:17px; }
}

/* =========================================================
   日本語の見出しを文節の切れ目で折り返す
   「長引く咳が流行って / ます」のような不自然な改行を防ぎます
   ========================================================= */
.post-title,
.post-card-title,
.post-card-excerpt,
.page-hero h1,
.page-hero .ph-lead,
.post-body h2,
.post-body h3,
.post-body h4,
.news-archive-title,
.pn-title,
.breadcrumb-inner,
.cta-band h2,
.gentle-note{
  word-break: auto-phrase;
  line-break: strict;
  text-wrap: pretty;
}

/* =========================================================
   管理バー表示時のヘッダー位置ずれ対策
   ========================================================= */
body.admin-bar header{ top:32px; }
@media screen and (max-width:782px){ body.admin-bar header{ top:46px; } }

/* =========================================================
   スマートフォン
   ========================================================= */
@media(max-width:780px){
  .post-hero-inner{ padding:1.5rem 1.25rem; }
  .post-wrap{ padding:2rem 1.5rem 3rem; }
  .post-body{ font-size:19px; line-height:1.95; }
  .post-body h2{ margin-top:2.25rem; }
  .post-nav{ grid-template-columns:1fr; }
  .post-nav-item.next{ text-align:left; }
}
@media(max-width:480px){
  .post-hero-inner{ padding:1.1rem 1rem; }
  .post-hero-img{ border-radius:12px; }
  .post-wrap{ padding:1.75rem 1.15rem 2.5rem; }
}

/* ---- 動きを減らす設定への配慮 ---- */
@media (prefers-reduced-motion: reduce){
  .post-card, .post-card:hover{ transition:none; transform:none; }
}