/* ==========================================================================
   トロゴ生命科学 — WordPress 固有スタイル
   --------------------------------------------------------------------------
   assets/css/style.css は静的サイト（HTML/assets/css/style.css）の**逐語コピー**で、
   HTML/ を更新したら丸ごと上書きする運用。そこに追記すると次のコピーで消えるため、
   WordPress にしか存在しないマークアップのスタイルはこのファイルに分けている。

   対象:
     - the_content() が出す本文（見出し・リスト・表・画像・引用）
     - the_posts_pagination() / post navigation
     - WP コアのユーティリティ（.screen-reader-text / align*）
   変数（--c-navy 等）は style.css 1章のトークンをそのまま使う。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 本文（the_content）
   .prose の段落・行送りは style.css 側が担当。ここは prose に無い要素だけ。

   ★重要★ セレクタは必ず :not([class]) を付けて「クラスの無い素の要素」に限定する。
   本サイトの固定ページ本文には、静的サイト（HTML/）のコンポーネントを
   そのまま貼っている（.content-block__title / .member__photo / .btn / .figure …）。
   `.entry-content h2` のような素朴なセレクタを書くと、そうしたコンポーネントに
   後から当たって設計を壊す。実際に本番で次の3件が発生した:
     ・.content-block__title（h2）に margin-top 2.2em と border-bottom が付き、
       「01」と見出しの横並びが崩れた
     ・.entry-content a の色指定が .btn--teal の白文字を上書きし、
       ティール地にティール文字でCTAが読めなくなった
     ・.member__photo に border-radius 6px が付き、角を丸くしない指定が無効化された
   ここに書いてよいのは「WordPressの編集画面で普通に書いた要素」だけ。
   ブロックエディターが付ける wp-block-* は明示的に対象へ含める。
   -------------------------------------------------------------------------- */
.entry-content > *:first-child { margin-top: 0; }
.entry-content > *:last-child { margin-bottom: 0; }

.entry-content h2:not([class]),
.entry-content h2.wp-block-heading {
  margin: 2.2em 0 .9em;
  padding-bottom: .5em;
  border-bottom: 1px solid var(--c-border);
  font-size: clamp(1.25rem, 1.05rem + .8vw, 1.625rem);
  line-height: 1.5;
}
.entry-content h3:not([class]),
.entry-content h3.wp-block-heading {
  display: flex;
  align-items: center;
  gap: .6em;
  margin: 1.9em 0 .7em;
  font-size: 1.0625rem;
  color: var(--c-navy);
}
/* style.css の .member__section-title と同じ teal の縦バー。 */
.entry-content h3:not([class])::before,
.entry-content h3.wp-block-heading::before {
  content: "";
  flex: none;
  width: 4px;
  height: 1.05em;
  border-radius: 2px;
  background: var(--c-teal);
}
.entry-content h4:not([class]),
.entry-content h4.wp-block-heading {
  margin: 1.6em 0 .6em;
  font-size: 1rem;
  color: var(--c-navy);
}

.entry-content ul:not([class]),
.entry-content ol:not([class]) { margin: 0 0 1.1em; padding-left: 1.5em; }
.entry-content ul:not([class]) > li,
.entry-content ol:not([class]) > li { margin-bottom: .35em; line-height: 1.9; }
.entry-content li > ul:not([class]),
.entry-content li > ol:not([class]) { margin-top: .35em; margin-bottom: .2em; }

/* リンク色。.btn / .link-arrow など自前で色を持つものは除外する。 */
.entry-content a:not([class]) { color: var(--c-teal-dark); }
.entry-content a:not([class]):hover { color: var(--c-teal); }

/* 画像。.member__photo（角丸なし）などクラス付きは対象外。
   静的サイトの .figure 内の img はクラスが無いので、ここで角丸が付く（意図どおり）。 */
.entry-content img:not([class]) { height: auto; border-radius: 6px; }

.entry-content figure:not([class]) { margin: clamp(24px, 3vw, 36px) 0; }
.entry-content figure:not([class]) figcaption {
  margin-top: 10px;
  font-size: .8125rem;
  line-height: 1.8;
  color: var(--c-navy-64);
  text-align: center;
}

.entry-content blockquote:not([class]),
.entry-content blockquote.wp-block-quote {
  margin: clamp(24px, 3vw, 32px) 0;
  padding: clamp(18px, 2.2vw, 26px) clamp(20px, 2.6vw, 32px);
  background: linear-gradient(135deg, rgba(0, 163, 163, .07), rgba(126, 208, 214, .12));
  border-left: 4px solid var(--c-teal);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.entry-content blockquote > *:last-child { margin-bottom: 0; }   /* 余白のみ・害なし */

.entry-content hr:not([class]),
.entry-content hr.wp-block-separator {
  margin: clamp(32px, 4vw, 48px) 0;
  border: 0;
  border-top: 1px solid var(--c-border);
}

.entry-content code:not([class]),
.entry-content kbd:not([class]) {
  padding: .15em .45em;
  background: var(--c-light-gray);
  border-radius: 4px;
  font-size: .9em;
}
.entry-content pre:not([class]),
.entry-content pre.wp-block-code {
  overflow-x: auto;
  margin: 0 0 1.1em;
  padding: clamp(14px, 1.8vw, 20px);
  background: var(--c-light-gray);
  border-radius: var(--radius);
  font-size: .8125rem;
  line-height: 1.7;
}
.entry-content pre code { padding: 0; background: none; }

/* --------------------------------------------------------------------------
   2. 本文中の表
   DB 側の本文には class の無い <table> が入っているため、functions.php の
   trogo_content_tables() が .entry-table を付けてからここに当たる。
   見た目は style.css 15章の .member__meta（濃い見出し＋白の罫線＋横縞）に寄せた。
   横スクロールできるよう、狭い画面では table 自身をラップせず overflow を許す。
   -------------------------------------------------------------------------- */
.entry-table {
  width: 100%;
  margin: clamp(20px, 2.6vw, 30px) 0;
  border-collapse: collapse;
  font-size: .875rem;
  line-height: 1.8;
}
.entry-table th,
.entry-table td {
  padding: 10px 14px;
  border: 1px solid var(--c-white);
  text-align: left;
  vertical-align: top;
}
/* 見出し行（thead、または thead が無い場合の1行目の th）。 */
.entry-table thead th,
.entry-table tr:first-child th {
  background: var(--c-navy);
  color: var(--c-white);
  font-weight: 700;
  white-space: nowrap;
}
/* 行見出し（左端の th）。 */
.entry-table tbody th[scope="row"],
.entry-table tbody tr > th:first-child {
  background: var(--c-teal-dark);
  color: var(--c-white);
  font-weight: 700;
}
.entry-table td { background: var(--c-light-gray); }
.entry-table tbody tr:nth-child(even) td { background: #F8F9FB; }

/* 表がはみ出す場合の受け皿（本文を .prose 内に置いているため親は 832px）。
   .entry-content--full は page.php が「本文が自前で <section class="section …">
   を持つ場合」に付けるクラスで、中身が画面幅いっぱいの帯そのものになる。
   そこに overflow-x を掛けると帯ごと横スクロールしてしまうため除外する。 */
.entry-content .entry-table { display: table; }
@media (max-width: 640px) {
  .entry-content:not(.entry-content--full) { overflow-x: auto; }
  .entry-table { min-width: 520px; }
}

/* --------------------------------------------------------------------------
   3. 投稿メタ・ページ送り
   -------------------------------------------------------------------------- */
.post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .8em;
  margin-bottom: .6em;
}

.post-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px;
  margin: clamp(40px, 5vw, 64px) 0 clamp(24px, 3vw, 32px);
  padding-top: clamp(20px, 2.4vw, 28px);
  border-top: 1px solid var(--c-border);
  font-size: .875rem;
}
.post-nav a { color: var(--c-teal-dark); text-decoration: none; }
.post-nav a:hover { color: var(--c-teal); text-decoration: underline; }

.pagination { margin-top: clamp(32px, 4vw, 48px); }
.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: 2.4em;
  padding: .5em .8em;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  font-family: var(--font-en);
  font-size: .875rem;
  color: var(--c-navy);
  text-decoration: none;
  transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.pagination .page-numbers:hover {
  border-color: var(--c-teal);
  color: var(--c-teal-dark);
}
.pagination .page-numbers.current {
  background: var(--c-teal-dark);
  border-color: var(--c-teal-dark);
  color: var(--c-white);
}
.pagination .page-numbers.dots { border-color: transparent; }

/* --------------------------------------------------------------------------
   4. WordPress コアのユーティリティ
   style.css には .visually-hidden があるが、コアや検索フォームは
   .screen-reader-text を出すため両方用意する。
   -------------------------------------------------------------------------- */
.screen-reader-text {
  position: absolute !important;
  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;
}

.alignleft  { float: left;  margin: .3em 1.4em 1em 0; }
.alignright { float: right; margin: .3em 0 1em 1.4em; }
.aligncenter { display: block; margin-inline: auto; }
.entry-content::after { content: ""; display: table; clear: both; }

.wp-caption { max-width: 100%; }
.wp-caption-text {
  margin-top: 8px;
  font-size: .8125rem;
  color: var(--c-navy-64);
  text-align: center;
}

/* 子ページを表示中の親メニュー項目。style.css は [aria-current="page"] だけを
   見ているので、functions.php が付ける "true" も同じ見た目に揃える。 */
.global-nav__link[aria-current="true"] { color: var(--c-teal-dark); }
.global-nav__link[aria-current="true"]::after { transform: scaleX(1); height: 3px; }
@media (max-width: 900px) {
  .global-nav__link[aria-current="true"] { color: var(--c-teal-dark); }
}

/* 管理バーが出ているとき、position: sticky のヘッダーが隠れないように。
   WordPress が <body> に付けるクラスは admin-bar（admin-bar-showing ではない）。
   管理バーは position: fixed で高さ 32px（782px 以下では 46px）。 */
body.admin-bar .site-header { top: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar .site-header { top: 46px; }
}

/* --------------------------------------------------------------------------
   5. 印刷
   -------------------------------------------------------------------------- */
@media print {
  .pagination, .post-nav { display: none !important; }
}