/* =====================================================================================
   Fluid Typography System（再利用可能なフォントサイズ設計）
   ─────────────────────────────────────────────────────────────────────────────────────
   画面幅に応じて滑らかに変化する clamp() ベースのフォントサイズシステムです。
   PC・タブレット・スマホでメディアクエリの固定値によるカクつきや
   「見出しが本文より小さくなる」逆転現象を防ぎます。

   【他サイトへの導入方法】
   1. このファイルをテーマの css/ ディレクトリへコピー
   2. functions.php で wp_enqueue_style() する
      例）wp_enqueue_style('fluid-typography',
            get_template_directory_uri() . '/css/fluid-typography.css',
            array(), '1.0.0', 'all');
   3. 既存の main-style.css 等より後に読み込ませる
      （wp_enqueue_style の第3引数 $deps に既存スタイルのハンドル名を
       指定すると読み込み順が保証されます）
   ===================================================================================== */

:root {
  /* 本文 */
  --fs-body: clamp(0.85rem, calc(0.75rem + 1vw), 1rem);       /* 13.6px 〜 16px */

  /* 見出し（h1〜h6） */
  --fs-h1: clamp(1.4rem,  5vw,   2.2rem);   /* 22.4px 〜 35.2px */
  --fs-h2: clamp(1.25rem, 4.5vw, 1.95rem);  /* 20px   〜 31.2px */
  --fs-h3: clamp(1.1rem,  4vw,   1.75rem);  /* 17.6px 〜 28px   */
  --fs-h4: clamp(1rem,    3.5vw, 1.5rem);   /* 16px   〜 24px   */
  --fs-h5: clamp(0.9rem,  3vw,   1.25rem);  /* 14.4px 〜 20px   */
  --fs-h6: clamp(1rem,    3vw,   1.1rem);   /* 16px   〜 17.6px */

  /* 汎用ユーティリティ
     バッジ・ラベル・カード見出し・ページタイトルなど、本文より目立たせたいが
     h1〜h6の意味的な階層は使いたくない要素向け */
  --fs-fluid-sm: clamp(0.85rem, 2vw,   1rem);    /* キャプション・注釈 */
  --fs-fluid-md: clamp(1rem,    2.5vw, 1.25rem); /* カード見出し等 */
  --fs-fluid-lg: clamp(1.1rem,  3vw,   1.75rem); /* セクションラベル等 */
  --fs-fluid-xl: clamp(1.35rem, 6vw,   1.7rem);  /* 記事タイトル等（狭幅で急縮小させない） */
}

/* -----------------------------------------------------------------------
   ベース要素への適用
   ----------------------------------------------------------------------- */
p {
  font-size: var(--fs-body);
  line-height: 1.8;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
}

h1 { font-size: var(--fs-h1); line-height: 1.3; letter-spacing: 0.1em; }
h2 { font-size: var(--fs-h2); line-height: 1.4; letter-spacing: 0.08em; }
h3 { font-size: var(--fs-h3); line-height: 1.5; letter-spacing: 0.06em; }
h4 { font-size: var(--fs-h4); line-height: 1.6; letter-spacing: 0.005em; }
h5 { font-size: var(--fs-h5); line-height: 1.7; letter-spacing: 0.03em; }
h6 { font-size: var(--fs-h6); line-height: 1.6; }

/* -----------------------------------------------------------------------
   ユーティリティクラス
   メディアクエリで固定px/remに上書きしたくなった時は、代わりにこれらの
   クラスを要素に追加してください（!important は既存の固定値上書きに勝つため）。
   ----------------------------------------------------------------------- */
.fluid-text-sm { font-size: var(--fs-fluid-sm) !important; }
.fluid-text-md { font-size: var(--fs-fluid-md) !important; }
.fluid-text-lg { font-size: var(--fs-fluid-lg) !important; }
.fluid-text-xl { font-size: var(--fs-fluid-xl) !important; }

/* -----------------------------------------------------------------------
   導入チェックリスト
   1. @media (max-width: ...) { .foo { font-size: 固定px/rem; } } のような
      上書きが残っていないか確認する → clamp() の効果が消えるため、
      残す場合は padding 等の余白調整だけに留める。
   2. input / select / textarea は 16px 未満にしない
      → iOS Safari はフォーカス時に自動ズームしてしまう。
   3. ラベルや見出しの最小値（clamp の第一引数）が、隣接する本文の
      font-size を下回っていないか比較する。
   ===================================================================================== */