/* assets/css/custom.css */

/* ライトモード（昼）: ほんのりクリーム色 */
html, body {
  background-color: #fafaf5 !important;
  color: #333 !important;
}

/* ダークモード（夜）: 完全に真っ黒じゃなくて、目に優しいダークグレー */
.dark html, .dark body {
  background-color: #1a1a1a !important;
  color: #e5e5e5 !important;
}

/* 記事部分の背景透過（念のため） */
article {
  background-color: transparent !important;
}

/* assets/css/custom.css の一番下に追記 */

/* --- アクセントカラーの適用 (#5E9E9B) --- */

/* ヘッダー（ナビゲーションバー） */
/* 1. 犯人確保：背景レイヤー(.hextra-nav-container-blur)を青緑にする */
.hextra-nav-container-blur {
  background-color: #5E9E9B !important; /* 背景色 */
  backdrop-filter: none !important;      /* すりガラス効果を消す */
  -webkit-backdrop-filter: none !important; /* Safari用のおまじない */
  opacity: 1 !important; /* 半透明になってるかもしれないので不透明に強制 */
}

/* 2. 外枠(.hextra-nav-container)の設定 */
.hextra-nav-container {
  /* ここ自体の背景は透明にしておく（blurレイヤーに任せる） */
  background-color: transparent !important;
}

/* 3. 文字色を白にする（ここは前回と同じ） */
.hextra-nav-container button {
  color: #ffffff !important;
}

/* フッター */
footer {
  background-color: #5E9E9B !important;
}


/* フッターの文字色 */
footer, footer a, footer span {
  color: #ffffff !important;
}

/* ロゴ（サイトタイトル）も白くする */
nav .font-bold {
  color: #ffffff !important;
}

/* --- 目次（右サイドバー）下部の背景色修正 --- */

/* 「白い影(shadow-...)」を持っているdiv要素を探して、背景を透明にする */
div[class*="hx:shadow-[0_-12px_16px_white]"] {
  
  /* 背景を透明にして、親要素の色（クリーム色）を見せる */
  background-color: transparent !important;
  
  /* 白いモヤッとした影も、背景と色が合わないので消す */
  box-shadow: none !important;
  
  /* お好みで：上の区切り線も消したければこれを入れる */
  /* border-top: none !important; */
}

/* ダークモード用の影も同様に消しておく（念のため） */
.dark div[class*="hx:dark:shadow-[0_-12px_16px_#111]"] {
  background-color: transparent !important;
  box-shadow: none !important;
}

/* --- 左サイドバー下部（テーマ切り替えボタン等）の背景色修正 --- */

/* 「画面下に固定(sticky bottom-0)」されている白い要素を捕まえる */
div[class*="hx:sticky"][class*="hx:bottom-0"] {
  
  /* 背景を透明にする */
  background-color: transparent !important;
  
  /* 白い影を消す */
  box-shadow: none !important;
  
  /* もし上の線も消したければ、下のコメントアウトを外す */
  /* border-top: none !important; */
}

/* 不要なテーマ切り替えボタンを削除 */
/* サイドバーのボタンを消すならこれ */
.hextra-sidebar-container .hextra-theme-toggle {
  display: none !important;
}
/* その枠も消すならこれ */
div[class*="hx:sticky"][class*="hx:bottom-0"] {
  display: none !important;
}

/* --- トップページ（フッター）のテーマ切り替えボタンを消す --- */
footer .hextra-theme-toggle {
  display: none !important;
}
footer div:has(.hextra-theme-toggle) {
  display: none !important;
}
/* 念のためクラス名（.hextra-max-footer-width）の中のボタンも対象にしておく */
.hextra-max-footer-width .hextra-theme-toggle {
  display: none !important;
}