/*
 * =================================================================
 * Jetstream Dark Mode - Main Stylesheet
 * =================================================================
 * 各セクションがどの部分のスタイルかを分かりやすく整理しています。
 * 目次:
 * 1. 基本スタイル (Global & Base)
 * 2. WordPressコアブロックのスタイル (Core Blocks)
 * 3. テーマ・プラグイン固有のスタイル (Theme & Plugins)
 * 4. ナビゲーションのスタイル (Navigation)
 * 5. レイアウト調整 (Layout)
 * =================================================================
 */


/*
 * =================================================================
 * 1. 基本スタイル (Global & Base)
 * =================================================================
 * ページ全体の基本的な背景色、文字色、リンク、見出しなどのスタイル。
 */

/* --- 1.1. ページ全体 & 基本要素 --- */
html.jetstream-dark-mode-active,
body.jetstream-dark-mode-active {
    background-color: #1A1A1A !important; /* ダークモードの背景色 */
    color: #E0E0E0 !important; /* ダークモードの文字色 */
}

html.jetstream-dark-mode-active p,
body.jetstream-dark-mode-active p {
    color: #E0E0E0 !important; /* 段落のテキスト色 */
}

/* --- 1.2. リンク --- */
html.jetstream-dark-mode-active a,
body.jetstream-dark-mode-active a {
    color: #8ab4f8 !important; /* ダークモードでのリンク色 */
}

html.jetstream-dark-mode-active a:hover,
body.jetstream-dark-mode-active a:hover {
    color: #a4e0ff !important; /* ダークモードでのホバー時のリンク色 */
}

/* --- 1.3. 見出し --- */
html.jetstream-dark-mode-active h1,
html.jetstream-dark-mode-active h2,
html.jetstream-dark-mode-active h3,
html.jetstream-dark-mode-active h4,
html.jetstream-dark-mode-active h5,
html.jetstream-dark-mode-active h6,
body.jetstream-dark-mode-active h1,
body.jetstream-dark-mode-active h2,
body.jetstream-dark-mode-active h3,
body.jetstream-dark-mode-active h4,
body.jetstream-dark-mode-active h5,
body.jetstream-dark-mode-active h6 {
    color: #F0F0F0 !important; /* 明るいグレーの見出し色 */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); /* 読みやすくするための影 */
}

/* --- 1.4. ボタン & 区切り線 --- */
html.jetstream-dark-mode-active button,
html.jetstream-dark-mode-active input[type="button"],
html.jetstream-dark-mode-active input[type="submit"],
body.jetstream-dark-mode-active button,
body.jetstream-dark-mode-active input[type="button"],
body.jetstream-dark-mode-active input[type="submit"] {
    color: #f5f5f5 !important;
    border-color: #555 !important;
}

html.jetstream-dark-mode-active button:hover,
html.jetstream-dark-mode-active input[type="button"]:hover,
html.jetstream-dark-mode-active input[type="submit"]:hover,
body.jetstream-dark-mode-active button:hover,
body.jetstream-dark-mode-active input[type="button"]:hover,
body.jetstream-dark-mode-active input[type="submit"]:hover {
    color: #fff !important;
    background-color: #444444 !important; /* ホバー時のボタンの背景色 */
    border-color: #777 !important;
}

html.jetstream-dark-mode-active .wp-block-separator,
body.jetstream-dark-mode-active .wp-block-separator {
    color: #E0E0E0 !important; /* 区切り線の色 */
}


/*
 * =================================================================
 * 2. WordPressコアブロックのスタイル (Core Blocks)
 * =================================================================
 * グループ、カラム、テーブル、引用など、WordPress標準ブロックのスタイル。
 */

/* --- 2.1. グループ & カラム (背景色) --- */
html.jetstream-dark-mode-active .wp-block-group.has-background,
html.jetstream-dark-mode-active .has-base-background-color,
html.jetstream-dark-mode-active .has-contrast-background-color,
body.jetstream-dark-mode-active .wp-block-group.has-background,
body.jetstream-dark-mode-active .has-base-background-color,
body.jetstream-dark-mode-active .has-contrast-background-color {
    background-color: #1A1A1A !important; /* ヘッダーやその他の一般的な背景色をメインのダークモード色に戻す */
    color: #E0E0E0 !important;
}

/* Light: #f3f3f3 (薄いグレー) -> Dark: #282828 (ダークグレー) */
html.jetstream-dark-mode-active .wp-block-group.has-base-2-background-color,
html.jetstream-dark-mode-active .wp-block-group.has-background[style*="background-color:#f3f3f3"],
html.jetstream-dark-mode-active .wp-block-columns.has-background[style*="background-color:#f3f3f3"],
body.jetstream-dark-mode-active .wp-block-group.has-base-2-background-color,
body.jetstream-dark-mode-active .wp-block-group.has-background[style*="background-color:#f3f3f3"],
body.jetstream-dark-mode-active .wp-block-columns.has-background[style*="background-color:#f3f3f3"] {
    background-color: #282828 !important;
    color: #E0E0E0 !important;
}

html.jetstream-dark-mode-active .wp-block-columns.has-background,
body.jetstream-dark-mode-active .wp-block-columns.has-background {
    background-color: #2b2b2b !important; /* 背景を持つカラムブロックの背景色 */
}

/* --- 2.2. 引用 (Blockquote) --- */
html.jetstream-dark-mode-active .wp-block-quote,
body.jetstream-dark-mode-active .wp-block-quote {
    background-color: #555555 !important;
    color: #E0E0E0 !important;
    border-color: #555555 !important;
}

html.jetstream-dark-mode-active .wp-block-quote p,
body.jetstream-dark-mode-active .wp-block-quote p {
    color: #E0E0E0 !important;
    unicode-bidi: isolate;
}

html.jetstream-dark-mode-active .wp-block-quote h2.wp-block-heading,
body.jetstream-dark-mode-active .wp-block-quote h2.wp-block-heading {
    color: #F0F0F0 !important;
}

html.jetstream-dark-mode-active .wp-block-quote a,
body.jetstream-dark-mode-active .wp-block-quote a {
    color: #8ab4f8 !important; /* 通常のリンク色に合わせる */
}

html.jetstream-dark-mode-active .wp-block-quote a:hover,
body.jetstream-dark-mode-active .wp-block-quote a:hover {
    color: #a4e0ff !important;
}

html.jetstream-dark-mode-active .wp-block-quote cite,
body.jetstream-dark-mode-active .wp-block-quote cite {
    color: #B0B0B0 !important;
}

/* --- 2.3. テーブル & カレンダー --- */
html.jetstream-dark-mode-active .wp-block-table table,
body.jetstream-dark-mode-active .wp-block-table table {
    background-color: #1A1A1A !important;
    border-color: #444444 !important;
}

html.jetstream-dark-mode-active .wp-block-table caption,
body.jetstream-dark-mode-active .wp-block-table caption {
    color: #F0F0F0 !important;
    background-color: transparent !important;
}

html.jetstream-dark-mode-active .wp-block-table th,
body.jetstream-dark-mode-active .wp-block-table th {
    background-color: #333333 !important;
    color: #FFFFFF !important;
    border-color: #555555 !important;
}

html.jetstream-dark-mode-active .wp-block-table td,
body.jetstream-dark-mode-active .wp-block-table td {
    background-color: #222222 !important;
    color: #E0E0E0 !important;
    border-color: #444444 !important;
}

html.jetstream-dark-mode-active .wp-block-table.is-style-stripes tbody tr:nth-child(odd),
body.jetstream-dark-mode-active .wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
    background-color: #282828 !important; /* 奇数行の背景色 */
}
html.jetstream-dark-mode-active .wp-block-table.is-style-stripes tbody tr:nth-child(even),
body.jetstream-dark-mode-active .wp-block-table.is-style-stripes tbody tr:nth-child(even) {
    background-color: #1A1A1A !important; /* 偶数行の背景色 */
}
html.jetstream-dark-mode-active .wp-block-table.is-style-stripes tbody tr td,
body.jetstream-dark-mode-active .wp-block-table.is-style-stripes tbody tr td {
    background-color: inherit !important;
}

html.jetstream-dark-mode-active .wp-block-calendar table:where(:not(.has-text-color)) th,
body.jetstream-dark-mode-active .wp-block-calendar table:where(:not(.has-text-color)) th {
    background-color: #333333 !important;
    color: #E0E0E0 !important;
    border-color: #555555 !important;
}
html.jetstream-dark-mode-active .wp-block-calendar table:where(:not(.has-text-color)) td,
body.jetstream-dark-mode-active .wp-block-calendar table:where(:not(.has-text-color)) td {
    border-color: #555555 !important;
}

/* --- 2.4. 投稿関連 (タグ、日付、キャプション) --- */
html.jetstream-dark-mode-active .wp-block-post-terms.is-style-pill a,
html.jetstream-dark-mode-active .wp-block-post-terms.is-style-pill span:not([class], [data-rich-text-placeholder]),
body.jetstream-dark-mode-active .wp-block-post-terms.is-style-pill a,
body.jetstream-dark-mode-active .wp-block-post-terms.is-style-pill span:not([class], [data-rich-text-placeholder]) {
    background-color: #3A3A3A !important;
    color: #E0E0E0 !important;
}

html.jetstream-dark-mode-active .wp-block-post-terms.is-style-pill a:hover,
body.jetstream-dark-mode-active .wp-block-post-terms.is-style-pill span:not([class], [data-rich-text-placeholder]):hover,
body.jetstream-dark-mode-active .wp-block-post-terms.is-style-pill a:hover,
body.jetstream-dark-mode-active .wp-block-post-terms.is-style-pill span:not([class], [data-rich-text-placeholder]):hover {
    background-color: #5A5A5A !important;
}

html.jetstream-dark-mode-active .wp-block-site-tagline,
html.jetstream-dark-mode-active .wp-block-post-date,
html.jetstream-dark-mode-active .wp-block-post-terms .wp-block-post-terms__prefix,
html.jetstream-dark-mode-active .wp-element-caption,
body.jetstream-dark-mode-active .wp-block-site-tagline,
body.jetstream-dark-mode-active .wp-block-post-date,
body.jetstream-dark-mode-active .wp-block-post-terms .wp-block-post-terms__prefix,
body.jetstream-dark-mode-active .wp-element-caption {
    color: #a0a0a0 !important; /* キャプションや日付などの補助テキストの色 */
}

/* --- 2.5. 詳細 (Details) & 画像ライトボックス --- */
/* 記事内のdetailsブロック */
html.jetstream-dark-mode-active div.entry-content details.wp-block-details.has-background[style*="background-color:#cae8e2"], /* Light: #cae8e2 -> Dark: #203A3A */
body.jetstream-dark-mode-active div.entry-content details.wp-block-details.has-background[style*="background-color:#cae8e2"] {
    background-color: #203A3A !important;
    color: #F0F0F0 !important;
    border-color: #4A5A5A !important;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4), 0 0 15px rgba(255, 255, 255, 0.1) inset !important;
}

html.jetstream-dark-mode-active div.entry-content details.wp-block-details[open],
body.jetstream-dark-mode-active div.entry-content details.wp-block-details[open] {
    background-color: #203A3A !important;
    color: #F0F0F0 !important;
}

html.jetstream-dark-mode-active div.entry-content details.wp-block-details summary,
body.jetstream-dark-mode-active div.entry-content details.wp-block-details summary {
    color: #FFFFFF !important;
}

/* 画像拡大(Lightbox) */
html.jetstream-dark-mode-active .wp-lightbox-overlay .scrim,
body.jetstream-dark-mode-active .wp-lightbox-overlay .scrim {
    background-color: #000000 !important;
    opacity: 0.8 !important;
}

html.jetstream-dark-mode-active .wp-lightbox-overlay .lightbox-image-container figure,
body.jetstream-dark-mode-active .wp-lightbox-overlay .lightbox-image-container figure {
    background-color: transparent !important;
}

html.jetstream-dark-mode-active .wp-lightbox-overlay figure img,
body.jetstream-dark-mode-active .wp-lightbox-overlay figure img {
    border: none !important;
    box-shadow: none !important;
}


/*
 * =================================================================
 * 3. テーマ・プラグイン固有のスタイル (Theme & Plugins)
 * =================================================================
 * 特定のテーマ機能やプラグイン（Jetstream Search, 目次, SNSボタン等）のスタイル。
 */

/* --- 3.1. [Plugin] Jetstream Search --- */
/* === 新デザインに合わせて全体を修正 === */

/* メインコンテナのスタイル */
html.jetstream-dark-mode-active .jss-container {
    background-color: #282828 !important; /* コンテナの背景色 */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4) !important; /* ダークモード用の濃い影 */
}

html.jetstream-dark-mode-active .jss-container:focus-within {
    box-shadow: 0 6px 20px rgba(138, 180, 248, 0.3) !important; /* フォーカス時の青い影 */
}

/* 検索入力ボックス */
html.jetstream-dark-mode-active .mt-site-search-form input[type="search"] {
    color: #E0E0E0 !important;
    background-color: transparent !important; /* 背景を透過にし、コンテナの色を見せる */
    border: none !important; /* 枠線を削除 */
}

html.jetstream-dark-mode-active .mt-site-search-form input[type="search"]:focus {
    background-color: #333333 !important; /* フォーカス時に少し明るい背景色 */
}

/* 検索ボタン */
html.jetstream-dark-mode-active .mt-site-search-form button[type="submit"] {
    background-color: #8ab4f8 !important; /* 明るい青 */
    color: #1A1A1A !important; /* 暗い文字色でコントラストを確保 */
    border: none !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2) !important; /* ボタン用の影 */
    transition: all 0.3s ease-in-out !important;
}

html.jetstream-dark-mode-active .mt-site-search-form button[type="submit"]:hover {
    background-color: #a4e0ff !important;
    transform: translateY(-2px) !important; /* ホバー時に上に移動 */
    box-shadow: 0 4px 10px rgba(164, 224, 255, 0.3) !important; /* ホバー時の影を強調 */
}

/* カテゴリとタグのドロップダウン共通スタイル */
html.jetstream-dark-mode-active .category-select-style,
html.jetstream-dark-mode-active .tag-select-style {
    background-color: #282828 !important;
    color: #E0E0E0 !important;
    border-color: #555555 !important;
    /* ドロップダウンアイコンの色を反転 */
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M5%208l5%205%205-5z%22%20fill%3D%22%23E0E0E0%22/%3E%3C/svg%3E') !important;
    transition: all 0.3s ease-in-out !important;
}

html.jetstream-dark-mode-active .category-select-style:focus,
html.jetstream-dark-mode-active .tag-select-style:focus {
    border-color: #8ab4f8 !important;
    box-shadow: 0 0 0 3px rgba(138, 180, 248, 0.2) !important; /* フォーカス時に影を追加 */
}

/* --- 3.2. [Plugin] 目次 (.auto_toc) --- */
html.jetstream-dark-mode-active .auto_toc {
    background: #2a2a2a !important;
    border: 4px solid #444444 !important;
    box-shadow: 0px 10px 35px rgba(0, 0, 0, 0.8), 0 0 30px rgba(255, 255, 255, 0.4) inset !important;
    color: #E0E0E0 !important;
}

html.jetstream-dark-mode-active h2.auto_toc_title {
    background: #2660a1 !important;
    border: none;
    color: #FFFFFF !important;
}

html.jetstream-dark-mode-active .auto_toc li a {
    color: #B0D8FF !important;
    text-decoration: none !important;
}

html.jetstream-dark-mode-active .auto_toc li a:hover {
    text-decoration: underline !important;
    color: #E6F3FF !important;
}

/* --- 3.3. [Plugin] SNSシェアボタン (.flowbtn12) --- */
/* Twitter, Threads */
html.jetstream-dark-mode-active .flowbtn12.fl_tw2,
body.jetstream-dark-mode-active .flowbtn12.fl_tw2,
html.jetstream-dark-mode-active .flowbtn12.fl_th2,
body.jetstream-dark-mode-active .flowbtn12.fl_th2 {
    color: #000 !important;
    border: solid 1px #FFF !important;
    background: #FFF !important;
}
html.jetstream-dark-mode-active .flowbtn12.fl_tw2:hover,
body.jetstream-dark-mode-active .flowbtn12.fl_tw2:hover,
html.jetstream-dark-mode-active .flowbtn12.fl_th2:hover,
body.jetstream-dark-mode-active .flowbtn12.fl_th2:hover {
    color: #FFF !important;
    background: #000 !important;
}
/* Hatena Bookmark */
html.jetstream-dark-mode-active .flowbtn12.fl_bs2,
body.jetstream-dark-mode-active .flowbtn12.fl_bs2 {
    color: #fff !important;
    border: solid 1px #48bbf8 !important;
    background: #48bbf8 !important;
}
html.jetstream-dark-mode-active .flowbtn12.fl_bs2:hover,
body.jetstream-dark-mode-active .flowbtn12.fl_bs2:hover {
    color: #48bbf8 !important;
    background: #fff !important;
}
/* Pocket */
html.jetstream-dark-mode-active .flowbtn12.fl_ha2,
body.jetstream-dark-mode-active .flowbtn12.fl_ha2 {
    color: #fff !important;
    border: solid 1px #1899cd !important;
    background: #1899cd !important;
}
html.jetstream-dark-mode-active .flowbtn12.fl_ha2:hover,
body.jetstream-dark-mode-active .flowbtn12.fl_ha2:hover {
    color: #1899cd !important;
    background: #fff !important;
}
/* Pinterest */
html.jetstream-dark-mode-active .flowbtn12.fl_pi2,
body.jetstream-dark-mode-active .flowbtn12.fl_pi2 {
    color: #fff !important;
    border: solid 1px #e60019 !important;
    background: #e60019 !important;
}
html.jetstream-dark-mode-active .flowbtn12.fl_pi2:hover,
body.jetstream-dark-mode-active .flowbtn12.fl_pi2:hover {
    color: #e60019 !important;
    background: #fff !important;
}
/* Facebook */
html.jetstream-dark-mode-active .flowbtn12.fl_fb2,
body.jetstream-dark-mode-active .flowbtn12.fl_fb2 {
    color: #fff !important;
    border: solid 1px #3b5998 !important;
    background: #3b5998 !important;
}
html.jetstream-dark-mode-active .flowbtn12.fl_fb2:hover,
body.jetstream-dark-mode-active .flowbtn12.fl_fb2:hover {
    color: #3b5998 !important;
    background: #fff !important;
}
/* LINE */
html.jetstream-dark-mode-active .flowbtn12.fl_li2,
body.jetstream-dark-mode-active .flowbtn12.fl_li2 {
    color: #fff !important;
    border: solid 1.5px #00c300 !important;
    background: #00c300 !important;
}
html.jetstream-dark-mode-active .flowbtn12.fl_li2:hover,
body.jetstream-dark-mode-active .flowbtn12.fl_li2:hover {
    color: #00c300 !important;
    background: #fff !important;
}

/* --- 3.4. [Plugin] 動画再生コントロール --- */
html.jetstream-dark-mode-active .jetstream-playback-speed-button,
html.jetstream-dark-mode-active .jetstream-rewind-button,
body.jetstream-dark-mode-active .jetstream-playback-speed-button,
body.jetstream-dark-mode-active .jetstream-rewind-button {
    background-color: #333333 !important;
    color: #E0E0E0 !important;
    border-color: #555555 !important;
    transition: background-color 0.3s ease, color 0.3s ease;
}

html.jetstream-dark-mode-active .jetstream-playback-speed-button:hover,
html.jetstream-dark-mode-active .jetstream-rewind-button:hover,
body.jetstream-dark-mode-active .jetstream-playback-speed-button:hover,
body.jetstream-dark-mode-active .jetstream-rewind-button:hover {
    background-color: #555555 !important;
    color: #FFFFFF !important;
}

html.jetstream-dark-mode-active .jetstream-playback-speed-button.active-speed,
body.jetstream-dark-mode-active .jetstream-playback-speed-button.active-speed {
    background-color: #007cba !important;
    color: #fff !important;
    border-color: #007cba !important;
}

/* --- 3.5. [Plugin] YouTube セレクター --- */
html.jetstream-dark-mode-active #jetstream-youtube-selector-container,
body.jetstream-dark-mode-active #jetstream-youtube-selector-container {
    background-color: #2a2a2a !important;
    border-color: #444444 !important;
    box-shadow: 0 1px 1px rgba(255, 255, 255, 0.08) !important;
}

html.jetstream-dark-mode-active #jetstream-youtube-video-preview,
body.jetstream-dark-mode-active #jetstream-youtube-video-preview {
    background-color: #1a1a1a !important;
    border-color: #444444 !important;
    box-shadow: 0 2px 4px rgba(255, 255, 255, 0.1) !important;
}

/* --- 3.6. [Theme] 特殊な背景色のセクション --- */
/* 投稿リストの赤枠部分 Light: #ffd0dc -> Dark: #000025 */
html.jetstream-dark-mode-active .wp-block-group.has-background[style*="background-color:#ffd0dc"],
body.jetstream-dark-mode-active .wp-block-group.has-background[style*="background-color:#ffd0dc"] {
    background-color: #000025 !important;
}

/* 投稿者情報セクション Light: #d5f4ff -> Dark: #384B60 */
html.jetstream-dark-mode-active .wp-block-group.has-background[style*="background-color:#d5f4ff"],
body.jetstream-dark-mode-active .wp-block-group.has-background[style*="background-color:#d5f4ff"] {
    background-color: #384B60 !important;
    color: #E0E0E0 !important;
}

/* --- 3.7. [Theme] カスタムスタイルリスト (チェックマーク) --- */
html.jetstream-dark-mode-active ul.is-style-checkmark-list li,
body.jetstream-dark-mode-active ul.is-style-checkmark-list li {
    color: #E0E0E0 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%236BBF8C' d='M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z'/%3E%3C/svg%3E") !important;
}

html.jetstream-dark-mode-active ul.is-style-checkmark-list li:hover,
body.jetstream-dark-mode-active ul.is-style-checkmark-list li:hover {
    background-color: #4A4A4A !important;
}

/* --- 3.8. [Theme] 「この記事のポイント」セクション --- */
html.jetstream-dark-mode-active .wp-block-group.content_point.has-background,
body.jetstream-dark-mode-active .wp-block-group.content_point.has-background {
    background-color: #3D3D3D !important;
    color: #E0E0E0 !important;
    box-shadow: 0px 10px 35px rgba(0, 0, 0, 0.8), 0 0 20px rgba(255, 255, 255, 0.4) inset !important;
    border-color: #ffd0d7 !important;
}

html.jetstream-dark-mode-active .content_point p.has-text-color,
body.jetstream-dark-mode-active .content_point p.has-text-color {
    color: #FFFFFF !important;
    text-shadow: 0 0 12px rgba(255, 255, 255, 0.7) !important;
    border-bottom-color: #FFFFFF !important;
}

/*
 * =================================================================
 * 4. ナビゲーションのスタイル (Navigation)
 * =================================================================
 * グローバルメニュー、サブメニュー、モバイル用オーバーレイメニューのスタイル。
 */

/* --- 4.1. サブメニュー & ポップアップ --- */
html.jetstream-dark-mode-active .wp-block-navigation__submenu-container,
body.jetstream-dark-mode-active .wp-block-navigation__submenu-container {
    background-color: #282828 !important;
    border-color: #555555 !important;
    color: #E0E0E0 !important;
}

html.jetstream-dark-mode-active .wp-block-navigation__submenu-container a,
body.jetstream-dark-mode-active .wp-block-navigation__submenu-container a {
    color: #E0E0E0 !important;
}

html.jetstream-dark-mode-active .wp-block-navigation__submenu-container a:hover,
body.jetstream-dark-mode-active .wp-block-navigation__submenu-container a:hover {
    background-color: #3A3A3A !important;
    color: #FFFFFF !important;
}

/* --- 4.2. モバイル用オーバーレイメニュー --- */
html.jetstream-dark-mode-active .wp-block-navigation__responsive-container,
body.jetstream-dark-mode-active .wp-block-navigation__responsive-container {
    background-color: #1A1A1A !important;
    color: #E0E0E0 !important;
}

html.jetstream-dark-mode-active .wp-block-navigation .wp-block-navigation-item__content,
body.jetstream-dark-mode-active .wp-block-navigation .wp-block-navigation-item__content {
    background-color: transparent !important;
    color: #E0E0E0 !important;
    border-color: transparent !important;
}

html.jetstream-dark-mode-active .wp-block-navigation__responsive-container-content .wp-block-navigation__container a:hover,
body.jetstream-dark-mode-active .wp-block-navigation__responsive-container-content .wp-block-navigation__container a:hover {
    background-color: #333333 !important;
    color: #FFFFFF !important;
}

html.jetstream-dark-mode-active .wp-block-navigation__responsive-container-content .wp-block-button__link,
body.jetstream-dark-mode-active .wp-block-navigation__responsive-container-content .wp-block-button__link {
    background-color: transparent !important;
    color: #F0F0F0 !important;
    border-color: #555555 !important;
}

html.jetstream-dark-mode-active .wp-block-navigation__responsive-container-content .wp-block-button__link:hover,
body.jetstream-dark-mode-active .wp-block-navigation__responsive-container-content .wp-block-button__link:hover {
    background-color: #5A5A5A !important;
    color: #FFFFFF !important;
    border-color: #777777 !important;
}

html.jetstream-dark-mode-active .wp-block-navigation__responsive-container-close svg path,
body.jetstream-dark-mode-active .wp-block-navigation__responsive-container-close svg path {
    fill: #E0E0E0 !important; /* 閉じるボタン(SVG)の色 */
}


/*
 * =================================================================
 * 5. レイアウト調整 (Layout)
 * =================================================================
 * ダークモードの色指定ではなく、主にモバイル表示などでのレイアウトを調整するスタイル。
 */

/* --- 5.1. ヘッダーコンテナ (検索フォーム等) --- */
.header-search-category-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px;
    box-sizing: border-box;
}

.header-search-category-container .mt-site-search-form {
    flex-grow: 1;
    min-width: 200px;
}

.header-search-category-container .mt-site-search-form form {
    display: flex;
    width: 100%;
}

.header-search-category-container .mt-site-search-form input[type="search"] {
    flex-grow: 1;
    min-width: 100px;
    width: auto;
    max-width: none;
    margin-right: 5px;
    height: 45px;
    padding: 10px 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box;
}

.header-search-category-container .mt-site-search-form button[type="submit"] {
    flex-shrink: 0;
    width: 50px;
    height: 45px;
    padding: 0 10px;
    font-size: 14px;
    white-space: nowrap;
    box-sizing: border-box;
}

.header-search-category-container .wp-block-categories-dropdown,
.header-search-category-container .wp-block-tags-dropdown {
    flex-shrink: 0;
    min-width: 120px;
    width: auto;
}

/* --- 5.2. モバイル表示のレイアウト (@media) --- */
@media (max-width: 782px) {
    .header-search-category-container {
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        padding: 8px;
    }

    .header-search-category-container .mt-site-search-form,
    .header-search-category-container .wp-block-categories-dropdown,
    .header-search-category-container .wp-block-tags-dropdown {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        margin-bottom: 8px;
    }

    .header-search-category-container .jetstream-dark-mode-toggle-container {
        width: 100%;
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: flex-end; /* 右寄せ */
    }

    .header-search-category-container .mt-site-search-form button[type="submit"] {
        width: 50px;
        font-size: 13px;
    }
}

/* --- 5.3. スティッキーヘッダー (z-index) --- */
.wp-block-group.is-position-sticky {
    z-index: 1000;
}


/*
 * =================================================================
 * 4. FAQアコーディオンのスタイル (FAQ Accordion)
 * =================================================================
 */
html.jetstream-dark-mode-active .faq-accordion details,
body.jetstream-dark-mode-active .faq-accordion details {
    background-color: #282828 !important; /* ダークモードでのアコーディオン背景色 */
    border: 1px solid #444444 !important; /* ボーダー色 */
    border-radius: 8px !important;
    margin-bottom: 10px !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2) !important;
}

html.jetstream-dark-mode-active .faq-accordion summary,
body.jetstream-dark-mode-active .faq-accordion summary {
    color: #F0F0F0 !important; /* サマリー（質問）のテキスト色 */
    background-color: #333333 !important; /* サマリーの背景色 */
    padding: 15px !important;
    cursor: pointer;
    border-bottom: 1px solid #555555 !important; /* 下線色 */
}

html.jetstream-dark-mode-active .faq-accordion summary:hover,
body.jetstream-dark-mode-active .faq-accordion summary:hover {
    background-color: #444444 !important; /* ホバー時の背景色 */
}

html.jetstream-dark-mode-active .faq-accordion summary::-webkit-details-marker,
body.jetstream-dark-mode-active .faq-accordion summary::-webkit-details-marker {
    color: #F0F0F0 !important; /* マーカーの色 (Chrome/Safari) */
}

html.jetstream-dark-mode-active .faq-accordion details[open] summary,
body.jetstream-dark-mode-active .faq-accordion details[open] summary {
    border-bottom: 1px solid #666666 !important; /* 開いている時の下線色 */
}

html.jetstream-dark-mode-active .faq-accordion .faq-answer,
body.jetstream-dark-mode-active .faq-accordion .faq-answer {
    /* ここからがfaq-answerの背景とテキストの調整です */
    background-color: #1A1A1A !important; /* 回答の背景色をメインのダークモード背景色に */
    color: #E0E0E0 !important; /* 回答のテキスト色を明るいグレーに */
    padding: 15px !important;
    line-height: 1.6;
}

html.jetstream-dark-mode-active .faq-accordion .faq-answer a,
body.jetstream-dark-mode-active .faq-accordion .faq-answer a {
    color: #8ab4f8 !important; /* 回答内のリンク色 */
}

html.jetstream-dark-mode-active .faq-accordion .faq-answer a:hover,
body.jetstream-dark-mode-active .faq-accordion .faq-answer a:hover {
    color: #a4e0ff !important; /* 回答内のリンクホバー色 */
}

/* ダークモード時のリストの文字色 */
html.jetstream-dark-mode-active .auto_toc li a {
    color: #B0D8FF !important;
}

html.jetstream-dark-mode-active .auto_toc li a:hover {
    color: #E6F3FF !important;
}

html.jetstream-dark-mode-active .toggle-label {
    color: #E0E0E0; /* ダークモードでの明るい色 */
}

/* --- 2.6. コメント (Comments) --- */
/* コメント投稿者名（「匿名」など） */
html.jetstream-dark-mode-active .wp-block-comment-author-name,
body.jetstream-dark-mode-active .wp-block-comment-author-name {
    color: #F0F0F0 !important; /* 見出しと同じ明るい色を指定 */
}

/* コメント本文 */
html.jetstream-dark-mode-active .wp-block-comment-content p,
body.jetstream-dark-mode-active .wp-block-comment-content p {
    color: #E0E0E0 !important; /* 基本のテキスト色を指定 */
}

/* コメントの日付 */
html.jetstream-dark-mode-active .wp-block-comment-date,
body.jetstream-dark-mode-active .wp-block-comment-date {
    color: #a0a0a0 !important; /* キャプションなど補助テキストの色に合わせる */
}

/* コメントの返信ボタン */
html.jetstream-dark-mode-active .wp-block-comment-reply-link,
body.jetstream-dark-mode-active .wp-block-comment-reply-link {
    color: #8ab4f8 !important; /* リンク色に合わせる */
}

html.jetstream-dark-mode-active .wp-block-comment-reply-link:hover,
body.jetstream-dark-mode-active .wp-block-comment-reply-link:hover {
    color: #a4e0ff !important; /* リンクのホバー色に合わせる */
}

/* --- AI要約トグルスイッチのダークモード対応 --- */
html.jetstream-dark-mode-active .ai-summary-toggle input:disabled + .toggle-slider {
    background-color: #555; /* ダークモード用の無効色 */
    cursor: not-allowed;
}

html.jetstream-dark-mode-active .ai-summary-toggle input:disabled + .toggle-slider:before {
    background-color: #333; /* スライダーの円部分も少し暗くする */
}

/* --- 投稿者情報セクションのダークモード色を強制的に指定 --- */
html.jetstream-dark-mode-active div.wp-block-group.has-background[style*="background-color:#d5f4ff"] {
    background-color: #384B60 !important;
}

/* AI要約ボタンをダークモードでもライトモードの動的なグラデーションで固定する */
html.jetstream-dark-mode-active .jetstream-gemini-button-v2 {
    background-image: linear-gradient(145deg, #4285f4, #9b72cb, #d96570, #f2a600) !important; /* ライトモードのグラデーション背景を強制 */
    background-color: transparent !important; /* 背景色を透明にしてグラデーションを優先 */
    background-size: 400% 400% !important; /* 動的なグラデーションに必要なサイズを維持 */
    animation: gradient-animation 10s ease infinite !important; /* 動的なグラデーションアニメーションを強制 */
    color: white !important; /* テキスト色も白に維持 */
    border: none !important; /* ボーダーを削除 */
    border-radius: 50px !important; /* 角丸を維持 */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important; /* シャドウを維持 */
}

/* ホバー時のスタイルもライトモードのものを維持する */
html.jetstream-dark-mode-active .jetstream-gemini-button-v2:hover {
    transform: translateY(-3px) !important; /* ホバーで少し上に動く */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3) !important; /* ホバー時のシャドウを強化 */
    /* ※背景色は上記で固定されているため、ここでは変更しません */
}


/* ==================================================================== */
/* ★★★【新規追加】ダークモード対応スタイル ★★★                        */
/* ==================================================================== */

/* --- ダークモード時のメディアブロック全体 --- */
.jetstream-dark-mode-active .jetstream-media-block-container {
    background-color: #2e2e2e; /* やや明るめのダークグレー */
    border-color: #444;
}

/* --- ダークモード時のラベル (ポッドキャスト / 関連動画) --- */
.jetstream-dark-mode-active .podcast-description-label,
.jetstream-dark-mode-active .youtube-description-label {
    color: #ccc; /* 明るいグレーのテキスト */
}

/* --- ダークモード時のDashiconの色 --- */
.jetstream-dark-mode-active .podcast-description-label .dashicons {
    color: #33c481; /* 明るい緑 */
}
.jetstream-dark-mode-active .youtube-description-label .dashicons {
    color: #ff5555; /* 明るい赤 */
}

/* --- ダークモード時の音声コントロールボタン --- */
.jetstream-dark-mode-active .jetstream-playback-speed-button,
.jetstream-dark-mode-active .jetstream-rewind-button {
    background-color: #444;
    color: #ddd;
    border-color: #555;
}

/* --- ダークモード時のアクティブな速度ボタン --- */
.jetstream-dark-mode-active .jetstream-playback-speed-button.active-speed {
    background-color: #008cba; /* 明るい青 */
    color: #fff;
    border-color: #008cba;
}

/* --- ダークモード時の音声プレーヤー本体 --- */
/* ブラウザ標準のUIを反転させて見やすくします */
.jetstream-dark-mode-active .jetstream-podcast-player audio {
    filter: invert(1) hue-rotate(180deg);
}

/* --- ダークモード時のYouTubeサムネイル --- */
.jetstream-dark-mode-active .jetstream-youtube-thumbnail-wrapper {
    box-shadow: 0 4px 15px rgba(0,0,0,0.3); /* 影を少し強調 */
}

/* ==================================================================== */
/* ★★★【ダークモード除外設定：最終手段】★★★                         */
/* ==================================================================== */
/* 非常に強力なセレクタで、.no-dark クラスを持つ要素を保護します */

/* --- 1. 黄色い「注意」ブロックを名指しで元に戻す --- */
/* インラインスタイルで #ffff00 が指定されているブロックを特定し、強制的にスタイルを維持します */
body.jetstream-dark-mode-active .no-dark[style*="background-color:#ffff00"] {
    background-color: #ffff00 !important;
    color: #000000 !important;
}
body.jetstream-dark-mode-active .no-dark[style*="background-color:#ffff00"] p,
body.jetstream-dark-mode-active .no-dark[style*="background-color:#ffff00"] a {
    color: #000000 !important;
}

/* --- 2. その他の .no-dark 要素全般に対する汎用的な無効化ルール --- */
/* 上記以外の .no-dark 要素があった場合のために、こちらのルールでスタイルを元に戻します */
body.jetstream-dark-mode-active .no-dark {
    background: revert !important;
    background-color: revert !important;
    color: revert !important;
}

body.jetstream-dark-mode-active .no-dark * {
    background: revert !important;
    background-color: revert !important;
    color: revert !important;
}

/* ダークモード時のパンくずリスト（現在地）のテキスト色を調整 */
body.jetstream-dark-mode-active #breadcrumb [itemprop="name"][aria-current="page"] {
    color: #F0F0F0 !important;
}