/**
 * 固定ページ汎用スタイル (jfhany-page 汎用レイヤ)
 *
 * About を含むすべての固定ページで共有する BEM レイヤ。
 * ページ固有の装飾は別 CSS (about.css 等) にスコープする。
 *
 * 依存: style.css (:root デザイントークン、.jfhany-container、
 *       .jfhany-page-header は style.css で定義済み)
 *
 * @package jfhany-web
 */

/* ==========================================================================
   Root: ページコンテナ
   ========================================================================== */

.jfhany-page {
  padding-top: var(--jfhany-space-2xl);
  padding-bottom: var(--jfhany-space-3xl);
}

.jfhany-page--default {
  padding-top: 0;
}

#article.jfhany-page__article {
  background-color: var(--jfhany-color-background);
}

/* ==========================================================================
   Content: 本文タイポグラフィ
   ========================================================================== */

.jfhany-page__content h2 {
  font-family: var(--jfhany-font-heading);
  font-size: var(--jfhany-font-size-2xl);
  font-weight: 700;
  color: var(--jfhany-color-primary);
  text-align: center;
  margin-top: var(--jfhany-space-3xl);
  margin-bottom: var(--jfhany-space-xl);
  display: inline-block;
  width: 100%;
}

/* 最初のセクション見出しは上マージン不要 */
.jfhany-page__content > h2:first-child,
.jfhany-page__content > .wp-block-heading:first-child {
  margin-top: 0;
}

.jfhany-page__content h3 {
  font-size: var(--jfhany-font-size-lg);
  font-weight: 700;
  color: var(--jfhany-color-primary);
  margin-top: var(--jfhany-space-lg);
  margin-bottom: var(--jfhany-space-md);
}

.jfhany-page__content p {
  font-size: var(--jfhany-font-size-base);
  line-height: var(--jfhany-line-height-base);
  color: var(--jfhany-color-text);
  margin-bottom: var(--jfhany-space-md);
}

.jfhany-page__content a {
  color: var(--jfhany-color-accent);
  text-decoration: underline;
  transition: color var(--jfhany-transition);
}

.jfhany-page__content a:hover,
.jfhany-page__content a:focus {
  color: var(--jfhany-color-primary);
}

.jfhany-page__content ul,
.jfhany-page__content ol {
  margin-bottom: var(--jfhany-space-md);
  padding-left: var(--jfhany-space-lg);
  line-height: var(--jfhany-line-height-base);
  color: var(--jfhany-color-text);
}

.jfhany-page__content li + li {
  margin-top: var(--jfhany-space-xs);
}

/* ==========================================================================
   Layout Modifiers
   ========================================================================== */

/* 1カラム (About / jfhany-single-column-page): .jfhany-container 内に収める想定 */
.jfhany-page--single {
  /* .jfhany-container で幅制御するため追加の宣言は不要 */
}

/* ヘッダーと本文の間の余白: flex gap で制御 */
.jfhany-page__article,
.jfhany-page > .jfhany-container {
  display: flex;
  flex-direction: column;
  gap: var(--jfhany-space-2xl);
}

/* 2カラム (jfhany-default-page): 親テーマの #main_contents > #main_col 内で使用 */
.jfhany-page--default {
  /* #main_col の幅制約はサイドバーレイアウトから継承。内部余白のみ調整 */
}

/* ==========================================================================
   Pagination (pagenation_type 対応)
   ========================================================================== */

.jfhany-page__content .post-pagination,
.jfhany-page__content .wp_link_pages {
  margin-top: var(--jfhany-space-2xl);
}

/* ==========================================================================
   レスポンシブ
   ========================================================================== */

@media (max-width: 768px) {
  .jfhany-page,
  #main_col.jfhany-page--default {
    padding-top: var(--jfhany-space-xl);
    padding-bottom: var(--jfhany-space-2xl);
  }

  .jfhany-page__content h2 {
    font-size: var(--jfhany-font-size-2xl);
    margin-top: var(--jfhany-space-2xl);
  }
}