/* Light / Dark / Day / Noon / Night のカラーテーマ */

body {
  --bg: #ffffff;
  --text: #3a332d;
  --card: #f7f0e7;
  --header: rgba(255,255,255,0.9);
  --link: #8b5a36;
  --hover: #b36b3e;
}

body[data-theme="light"] {
  --bg:#fff;
  --text:#3a332d;
  --card:#f7f0e7;
  --header:rgba(255,255,255,0.9);
}

body[data-theme="dark"] {
  --bg:#141210;
  --text:#f5ede3;
  --card:#26201c;
  --header:rgba(10,8,7,0.95);
}

body[data-theme="day"] {
  --bg:#fffaf5;
  --text:#3a332d;
  --card:#f3e1cf;
  --header:rgba(255,250,245,0.9);
}

body[data-theme="noon"] {
  --bg:#ffffff;
  --text:#2f2923;
  --card:#f0e5d7;
  --header:rgba(255,255,255,0.95);
}

body[data-theme="night"] {
  --bg:#100e0d;
  --text:#f1e6d8;
  --card:#241e19;
  --header:rgba(8,6,6,0.96);
}

/* 実際に適用 */
body {
  background: var(--bg);
  color: var(--text);
  transition: .3s ease;
}

a { color: var(--link); }
a:hover { color: var(--hover); }

/* カード */
.c-card,
.p-postList__item {
  background: var(--card);
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.05);
}

/* ヘッダー */
.l-header, .l-header__inner {
  background: var(--header);
  backdrop-filter: blur(8px);
}

/* ===== テーマ切り替えボタン 基本レイアウト ===== */

.theme-toggle {
  display: inline-flex;
  gap: 0.4rem;
  align-items: center;
  justify-content: center;   /* SPは中央寄せ */
  margin-top: 4px;
  font-size: 0.85rem;
}

.theme-toggle button {
  border-radius: 999px;
  padding: 4px 10px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: rgba(255, 255, 255, 0.9);
  cursor: pointer;
  line-height: 1;
  outline: none;
}

/* モードONのときの見た目 */
.theme-toggle button.is-active {
  border-color: var(--ttsk-link-color, #8b5a36);
  color: var(--ttsk-link-color, #8b5a36);
  box-shadow: 0 0 0 2px rgba(139, 90, 54, 0.15);
}

/* PCのときだけ右寄せ（ヘッダー内ウィジェット全体を右寄せ） */
@media (min-width: 960px) {
  .l-header .widget {
    text-align: right;
  }
  .l-header .widget .theme-toggle {
    justify-content: flex-end;
    margin-left: auto;
  }
}

/* スマホのときは真ん中＆ちょい小さめ */
@media (max-width: 959px) {
  .theme-toggle {
    justify-content: center;
    font-size: 0.8rem;
    gap: 0.35rem;
  }
  .theme-toggle button {
    padding: 4px 8px;
  }
}

/* ===== AUTOモード時、時間帯に応じてボタンを光らせる ===== */
/* 朝〜昼は ☀ を強調 */
body[data-mode="auto"][data-theme="day"]  [data-theme-btn="light"],
body[data-mode="auto"][data-theme="noon"] [data-theme-btn="light"] {
  box-shadow: 0 0 0 2px rgba(255, 200, 120, 0.3);
}

/* 夜は 🌙 を強調 */
body[data-mode="auto"][data-theme="night"] [data-theme-btn="dark"] {
  box-shadow: 0 0 0 2px rgba(180, 180, 255, 0.35);
}

/* ===== ダークモード時にヘッダーの文字を白にする ===== */
body[data-theme="dark"] .l-header,
body[data-mode="dark"] .l-header {
  color: #fff;
}

body[data-theme="dark"] .l-header a,
body[data-mode="dark"] .l-header a {
  color: #fff !important;
}

/* サブタイトルも白に */
body[data-theme="dark"] .c-siteTitle__tagline,
body[data-mode="dark"] .c-siteTitle__tagline {
  color: #ddd !important;
}

/* ロゴ（文字ロゴ）の場合 */
body[data-theme="dark"] .c-siteTitle__logoText,
body[data-mode="dark"] .c-siteTitle__logoText {
  color: #fff !important;
}

/* メニューテキスト */
body[data-theme="dark"] .l-headerNav a,
body[data-mode="dark"] .l-headerNav a {
  color: #eaeaea !important;
}

/* 夜モードのとき */
body[data-theme="night"] .l-header,
body[data-theme="night"] .l-header a {
  color: #fff !important;
}

/* =======================================
   Dark / Night テーマ時のヘッダー文字色を強制で明るくする
   ======================================= */

/* ヘッダー全体の基本文字色 */
body[data-theme="dark"] .l-header,
body[data-theme="night"] .l-header {
  color: #f5f5f5 !important;
}

/* サイトタイトル・ロゴまわり */
body[data-theme="dark"]  .l-header .c-siteTitle,
body[data-theme="night"] .l-header .c-siteTitle,
body[data-theme="dark"]  .l-header .c-siteTitle__title,
body[data-theme="night"] .l-header .c-siteTitle__title,
body[data-theme="dark"]  .l-header .c-siteTitle__logoText,
body[data-theme="night"] .l-header .c-siteTitle__logoText {
  color: #ffffff !important;
}

/* サブタイトル（キャッチコピー） */
body[data-theme="dark"]  .l-header .c-siteTitle__tagline,
body[data-theme="night"] .l-header .c-siteTitle__tagline {
  color: #dddddd !important;
}

/* ナビ（Front Page / Blog とか） */
body[data-theme="dark"]  .l-header .l-header__gnav a,
body[data-theme="night"] .l-header .l-header__gnav a,
body[data-theme="dark"]  .l-header .p-globalNav a,
body[data-theme="night"] .l-header .p-globalNav a {
  color: #f0f0f0 !important;
}

/* ホバー時は少しだけ明るく */
body[data-theme="dark"]  .l-header .l-header__gnav a:hover,
body[data-theme="night"] .l-header .l-header__gnav a:hover,
body[data-theme="dark"]  .l-header .p-globalNav a:hover,
body[data-theme="night"] .l-header .p-globalNav a:hover {
  color: #ffffff !important;
}

/* 念のため：ヘッダー内の残りの文字も全部明るくしとく */
body[data-theme="dark"]  .l-header *:not(svg):not(path),
body[data-theme="night"] .l-header *:not(svg):not(path) {
  color: #f5f5f5 !important;
}