/*****
Theme Name: Idol Manager
Theme URI: https://ichimaruplus.com/
Author: Ichimaru+
Author URI: https://ichimaruplus.com/
Description: アイドル運営のためのベーステーマ。プレーンで拡張性重視。
Version: 1.0.0
Text Domain: idol-manager
*****/

/* =====================================
   CSS カスタムプロパティ（テーマカラーの初期値）
   - カスタマイザー側の動的スタイルで上書きされる前提
   ===================================== */
:root {
  /* 基本アクセントカラー（ボタン・リンク・ラインなど） */
  --accent-color: #2563eb;
  /* グラデーション用の 2 色目（未設定時のフォールバック） */
  --accent-color-2: #ec4899;
}

/* =====================================
   ベースリセット & タイポグラフィ
   ===================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.6;
}

a {
  color: var(--accent-color);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* =====================================
   ヘッダー / フッターの枠線とインナー幅
   - 背景色は PHP 側（背景スキーム or グラデーション）で決定
   ===================================== */
.site-header,
.site-footer {
  border-bottom: 1px solid #e5e7eb;
}

.site-footer {
  border-top: 1px solid #e5e7eb;
  border-bottom: none;
  margin-top: 2rem;
}

.site-header-inner,
.site-footer-inner,
.main-content {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0.75rem 1.5rem;
}

/* -------------------------------------
   グラデーションモード
   - .theme-gradient が付与されている場合にのみ適用
   ------------------------------------- */
.site-header.theme-gradient,
.site-footer.theme-gradient {
  background: linear-gradient(135deg, var(--accent-color), var(--accent-color-2));
  color: #fff;
}

/* =====================================
   サイトタイトル / キャッチコピー
   ===================================== */
.site-title {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 600;
}

.site-description {
  margin: 0.15rem 0 0;
  font-size: 0.85rem;
  color: #6b7280;
}

/* =====================================
   ヘッダー内レイアウト（ロゴ + メニュー）
   - PC: 左ロゴ / 右メニュー
   - SP: ロゴ中央 / 右上バーガー
   ===================================== */
.site-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

/* ロゴまわり（サイト名＋ロゴ） */
/* ロゴ画像（SVG 推奨）
   - 表示上はブロック要素として扱う
   - 最大幅はカスタマイザー「ロゴの最大幅（px）」設定から
     PHP 側（functions.php）のインライン CSS で制御される前提 */
.site-branding .custom-logo {
  display: block;
}

.site-branding .site-title {
  font-size: 1.1rem;
}

/* =====================================
   グローバルナビ（PC 表示）
   ===================================== */
.main-nav {
  margin-left: auto; /* ロゴの右側に寄せる */
}

.main-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 1.5rem;
  font-size: 0.95rem;
}

.main-menu > li > a {
  text-decoration: none;
  padding: 0.25rem 0;
}

/* ホバー / 現在ページ */
.main-menu > li > a:hover,
.main-menu > li.current-menu-item > a {
  text-decoration: underline;
}

/* =====================================
   ハンバーガーボタン（スマホ用）
   ===================================== */
.nav-toggle {
  display: none; /* PC では非表示 */
  background: none;
  border: none;
  padding: 0.5rem;
  cursor: pointer;
}

.nav-toggle-bar {
  display: block;
  width: 22px;
  height: 2px;
  margin: 4px 0;
  background: currentColor;
}

/* スクリーンリーダー専用テキスト */
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* =====================================
   コンテンツ部分
   ===================================== */
.post-item {
  padding: 1.5rem 0;
  border-bottom: 1px solid #e5e7eb;
}

.post-item:last-child {
  border-bottom: none;
}

.page-header {
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid #e5e7eb;
}

/* =====================================
   スマホ表示（幅 768px 以下）
   - ロゴを中央寄せ
   - 右上にバーガー
   - メニューは縦並びでドロワー風
   ===================================== */
@media (max-width: 768px) {
  .site-header-inner {
    justify-content: center;
    position: relative;
  }

  /* ロゴを中央に見せる */
  .site-branding {
    justify-content: center;
    text-align: center;
  }

  /* ハンバーガーを右上に配置 */
  .nav-toggle {
    display: block;
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
  }

  /* メニューはデフォルト非表示（バーガーで開閉） */
  .main-nav {
    display: none;
    width: 100%;
    margin-top: 0.75rem;
  }

  .main-menu {
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
  }

  /* body に .nav-open が付いたら展開 */
  body.nav-open .main-nav {
    display: block;
  }
}