/*
Theme Name: Lightning Child - Otakara Kanteidan
Theme URI:
Description: 「お宝かんてい団」サイト用 Lightning子テーマ。Figmaデザインカンプをもとに作成。
Author: Yuki
Author URI:
Template: lightning
Version: 1.0.0
Text Domain: lightning-child-otakara
*/

/* ==========================================================================
   個別ページ・セクション用スタイル（common.css / top.css / pages.css）は
   @importではなく functions.php 側で個別にwp_enqueue_styleしている。
   @importだとWordPressのバージョンクエリが付かず、ファイルを更新しても
   ブラウザに古いキャッシュが残ってしまうため（開発中の「直したのに
   反映されない」の原因になっていた）。
   ========================================================================== */

/* ==========================================================================
   共通変数（Figmaのデザイントークンに合わせて後で更新）
   ========================================================================== */
:root {
  /* Figmaデザインカンプから抽出した実際のカラー値 */
  --color-primary: #aa2b2b;        /* メインカラー（ボルドー赤）：ボタン・バッジ・帯背景 */
  --color-primary-bright: #c7161e; /* 明るい赤：リボンの強調文字 */
  --color-primary-deep: #a32d2d;   /* 濃い赤：見出しのドロップシャドウ等 */
  --color-primary-header: #ac353b; /* ヘッダー電話番号テキスト */
  --color-accent: #b8860b;         /* アクセントカラー（ゴールド）：数字・強調テキスト・Step背景 */
  --color-bg-cream: #f2ebe3;       /* クリーム系背景 */
  --color-bg-pink: #f6c9be;        /* 店舗カード等の淡いピンク背景 */
  --color-bg-gray: #f5f5f5;        /* 情報テーブルの値セル背景（薄グレー） */
  --color-footer: #999999;         /* フッター帯背景（グレー） */
  --color-text: #333333;
  --color-bg: #ffffff;
  --font-base: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;

  --container-width: 1200px;
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 48px;
  --space-xl: 80px;
}

/* ==========================================================================
   ベース調整
   ========================================================================== */
body {
  font-family: var(--font-base);
  color: var(--color-text);
  /*
   * ヘッダー＋電話予約リボンをposition: fixedで追従表示にしているため、
   * その高さぶん本文が隠れないようpadding-topを確保する。
   * 正確な値はJS（assets/js/main.js）が実測して上書きするので、
   * これはJS実行前の一瞬（および万一JSが動かない場合）のための仮の値。
   */
  padding-top: clamp(120px, 30vw, 220px);
}

.l-container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 var(--space-sm);
}