/* =============================================================
   F1nal Lap ダークモード CSS
   ファイル: dark-mode.css
   配置先: /wp-content/themes/swell_child/assets/css/dark-mode.css

   v3: スライドトグル（PC=30px, SP=26px）
   ============================================================= */

/* ==============================
   スライドトグル — 共通
   ============================== */
.f1nl-slide-toggle {
  display: inline-flex;
  align-items: center;
  border-radius: 50px;
  cursor: pointer;
  position: relative;
  border: 1px solid rgba(255,255,255,0.15);
  padding: 0;
  font-family: inherit;
  line-height: 1;
  transition: background-color 0.3s ease;
  -webkit-appearance: none;
  appearance: none;
  box-shadow: none;
  outline: none;
}
.f1nl-slide-toggle:focus-visible {
  box-shadow: 0 0 0 2px rgba(20,184,166,0.5);
}
.f1nl-slide-toggle.is-dark {
  background: #1a2a2a;
}
.f1nl-slide-toggle.is-light {
  background: #4a5568;
}
/* ダークモード時のbutton上書きを打ち消し */
html[data-theme="dark"] .f1nl-slide-toggle {
  background-color: #1a2a2a;
  border-color: rgba(255,255,255,0.15);
  color: #fff;
}
html[data-theme="light"] .f1nl-slide-toggle,
html:not([data-theme]) .f1nl-slide-toggle.is-light {
  background-color: #4a5568;
  border-color: rgba(255,255,255,0.2);
  color: #fff;
}

/* ---- アイコン ---- */
.f1nl-st__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  color: rgba(255,255,255,0.5);
  flex-shrink: 0;
  pointer-events: none;
  transition: color 0.3s;
}
.f1nl-slide-toggle.is-dark .f1nl-st__icon {
  color: rgba(255,255,255,0.4);
}
.f1nl-slide-toggle.is-light .f1nl-st__icon {
  color: rgba(255,255,255,0.6);
}

/* ---- ラベル ---- */
.f1nl-st__label {
  font-weight: 500;
  z-index: 1;
  color: #fff;
  white-space: nowrap;
  pointer-events: none;
  transition: opacity 0.3s;
}

/* ---- ノブ（丸い玉） ---- */
.f1nl-st__knob {
  position: absolute;
  background: #fff;
  border-radius: 50%;
  top: 50%;
  transform: translateY(-50%);
  transition: left 0.3s ease, right 0.3s ease;
  pointer-events: none;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

/* ==============================
   PC サイズ（30px）
   ============================== */
.f1nl-slide-toggle.-pc {
  width: 88px;
  height: 30px;
  gap: 4px;
  padding: 0 4px;
}
.f1nl-slide-toggle.-pc .f1nl-st__icon {
  width: 24px;
  height: 24px;
}
.f1nl-slide-toggle.-pc .f1nl-st__label {
  font-size: 11px;
}
.f1nl-slide-toggle.-pc .f1nl-st__knob {
  width: 24px;
  height: 24px;
}
/* ダーク状態: ノブ右 */
.f1nl-slide-toggle.-pc.is-dark .f1nl-st__knob {
  left: auto;
  right: 3px;
}
/* ライト状態: ノブ左 */
.f1nl-slide-toggle.-pc.is-light .f1nl-st__knob {
  left: 3px;
  right: auto;
}

/* ==============================
   SP サイズ（26px）
   ============================== */
.f1nl-slide-toggle.-sp {
  width: 76px;
  height: 26px;
  gap: 3px;
  padding: 0 3px;
}
.f1nl-slide-toggle.-sp .f1nl-st__icon {
  width: 20px;
  height: 20px;
}
.f1nl-slide-toggle.-sp .f1nl-st__label {
  font-size: 10px;
}
.f1nl-slide-toggle.-sp .f1nl-st__knob {
  width: 20px;
  height: 20px;
}
.f1nl-slide-toggle.-sp.is-dark .f1nl-st__knob {
  left: auto;
  right: 3px;
}
.f1nl-slide-toggle.-sp.is-light .f1nl-st__knob {
  left: 3px;
  right: auto;
}

/* ==============================
   ナビ内ラッパー
   ============================== */
.f1nl-toggle-wrap {
  display: flex;
  align-items: center;
  padding: 0 12px;
}
.l-header__themeBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--logo_size_sp);
  padding: 0 4px;
}

/* ----- トランジション制御 ----- */
html.f1nl-theme-transitioning,
html.f1nl-theme-transitioning *,
html.f1nl-theme-transitioning *::before,
html.f1nl-theme-transitioning *::after {
  transition: background-color 0.3s ease,
              color 0.3s ease,
              border-color 0.3s ease,
              box-shadow 0.3s ease !important;
}

/* ==============================
   ダークモード変数の上書き
   html[data-theme="dark"] で適用
   ============================== */

html[data-theme="dark"] {

  /* --- 基本カラー --- */
  --color_bg: #0f1923;
  --color_text: #dce0e4;
  --color_link: #5cb8ff;
  --color_main: #14b8a6;
  --color_main_thin: rgba(20, 184, 166, 0.08);
  --color_main_dark: #0d9488;
  --color_htag: #14b8a6;

  /* --- ボーダー・グレー --- */
  --color_border: rgba(255,255,255,0.1);
  --color_gray: rgba(255,255,255,0.06);
  --swl-color_hov_gray: rgba(255,255,255,0.04);
  --swl-color_shadow: rgba(0,0,0,0.4);

  /* --- グラデーション --- */
  --color_gradient1: #0a2a2a;
  --color_gradient2: #0f3a4a;

  /* --- ヘッダー・フッター --- */
  --color_header_bg: #1a2a2a;
  --color_footer_bg: #1a2a2a;
  --color_header_text: #ffffff;
  --color_footer_text: rgba(255,255,255,0.6);

  /* --- コンテンツ背景 --- */
  --color_content_bg: #0f1923;

  /* --- テーブル --- */
  --thead-color--bg: #14b8a6;
  --thead-color--txt: #0f1923;
  --tbody-th-color--bg: rgba(255,255,255,0.04);
  --tbody-th-color--txt: inherit;
  --color_border--table: rgba(255,255,255,0.08);

  /* --- ボックス装飾 --- */
  --swl-text_color--black: #dce0e4;
  --swl-text_color--white: #0f1923;
  --swl-box_shadow: 0 2px 8px rgba(0,0,0,0.3);
  --swl-img_shadow: 0 2px 8px rgba(0,0,0,0.3);
  --swl-btn_shadow: 0 2px 4px rgba(0,0,0,0.3);

  /* --- 深い色（ボタン等） --- */
  --color_deep01: #f87171;
  --color_deep02: #60a5fa;
  --color_deep03: #86efac;
  --color_deep04: #fbbf24;

  /* --- 淡い色（背景色） --- */
  --color_pale01: rgba(248,113,113,0.1);
  --color_pale02: rgba(96,165,250,0.1);
  --color_pale03: rgba(134,239,172,0.1);
  --color_pale04: rgba(251,191,36,0.1);

  /* --- マーカー --- */
  --color_mark_blue: rgba(96,165,250,0.25);
  --color_mark_green: rgba(134,239,172,0.2);
  --color_mark_yellow: rgba(251,191,36,0.25);
  --color_mark_orange: rgba(251,146,60,0.25);

  /* --- リスト系アイコン色 --- */
  --color_list_check: #14b8a6;
  --color_list_num: #14b8a6;
  --color_list_good: #86efac;
  --color_list_triangle: #fbbf24;
  --color_list_bad: #f87171;

  /* --- アイコンボックス色（ダーク対応） --- */
  --color_icon_good: #4ade80;
  --color_icon_good_bg: rgba(74,222,128,0.1);
  --color_icon_bad: #60a5fa;
  --color_icon_bad_bg: rgba(96,165,250,0.1);
  --color_icon_info: #f472b6;
  --color_icon_info_bg: rgba(244,114,182,0.1);
  --color_icon_announce: #fb923c;
  --color_icon_announce_bg: rgba(251,146,60,0.1);
  --color_icon_pen: #9ca3af;
  --color_icon_pen_bg: rgba(156,163,175,0.08);
  --color_icon_book: #a3a095;
  --color_icon_book_bg: rgba(163,160,149,0.08);
  --color_icon_point: #fbbf24;
  --color_icon_check: #4ade80;
  --color_icon_batsu: #f87171;
  --color_icon_hatena: #60a5fa;
  --color_icon_caution: #fbbf24;
  --color_icon_memo: #9ca3af;

  /* --- FAQ --- */
  --color_faq_q: #f87171;
  --color_faq_a: #60a5fa;

  /* --- F1nal Lap カスタム変数（ダーク値） --- */
  --f1nl-text-muted: #6b7a7a;
  --f1nl-text-sub: #8a9a9a;
  --f1nl-text-sub2: #8a9a9a;
  --f1nl-text-body: #dce0e4;
  --f1nl-text-body2: #c0c8d0;
  --f1nl-text-body3: #b0b8c0;
  --f1nl-bg-surface: rgba(255,255,255,0.04);
  --f1nl-bg-surface2: rgba(255,255,255,0.03);
  --f1nl-bg-surface3: rgba(255,255,255,0.04);
  --f1nl-bg-surface4: rgba(255,255,255,0.04);
  --f1nl-bg-surface5: rgba(255,255,255,0.04);
  --f1nl-bg-surface6: rgba(20,184,166,0.06);
  --f1nl-bg-card: #1a2a2a;
  --f1nl-border-light: rgba(255,255,255,0.08);
  --f1nl-border-light2: rgba(255,255,255,0.15);
  --f1nl-border-light3: rgba(255,255,255,0.06);
  --f1nl-border-light4: rgba(255,255,255,0.06);
  --f1nl-border-mid: rgba(255,255,255,0.15);
  --f1nl-rc-author: #14b8a6;
  --f1nl-rc-sep: rgba(255,255,255,0.15);
  --f1nl-rc-article: #6b7a7a;
  --f1nl-slider-dot: rgba(255,255,255,0.2);
  --f1nl-slider-dot-active: #dce0e4;
  --f1nl-note-label-bg: #4a5568;
}

/* ===========================
   要素個別の上書き
   =========================== */

html[data-theme="dark"] body {
  background-color: var(--color_bg);
}

html[data-theme="dark"] #body_wrap.-bg-fix::before {
  background-color: var(--color_bg);
}

html[data-theme="dark"] button,
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
  background-color: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.1);
  color: #dce0e4;
}

html[data-theme="dark"] .c-searchForm__s {
  background-color: rgba(255,255,255,0.06);
  color: #dce0e4;
}

html[data-theme="dark"] .post_content :not(pre) > code {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.1);
  color: #e2e8f0;
}
html[data-theme="dark"] .wp-block-code {
  border-color: rgba(255,255,255,0.1);
  color: #e2e8f0;
}

html[data-theme="dark"] [data-type="type3"] .p-blogCard__inner {
  background: #1a2a2a;
  color: #dce0e4;
}
html[data-theme="dark"] .p-blogCard__caption {
  background: var(--color_content_bg);
}

html[data-theme="dark"] .post_content blockquote {
  background: rgba(255,255,255,0.04);
}

html[data-theme="dark"] .c-tagList__link,
html[data-theme="dark"] .c-taxList__link {
  background: rgba(255,255,255,0.06);
  color: #b0b8c0;
}

html[data-theme="dark"] [class*="page-numbers"] {
  background-color: rgba(255,255,255,0.08);
  color: #dce0e4;
}

html[data-theme="dark"] .p-breadcrumb.-bg-on {
  background: rgba(255,255,255,0.03);
}

html[data-theme="dark"] .l-fixHeader::before {
  background: #1a2a2a;
}

html[data-theme="dark"] .is-style-bg_gray {
  background: rgba(255,255,255,0.04);
}
html[data-theme="dark"] .is-style-bg_stripe {
  background: repeating-linear-gradient(
    -45deg,
    transparent 25%,
    rgba(255,255,255,0.03) 25%,
    rgba(255,255,255,0.03) 50%,
    transparent 50%,
    transparent 75%,
    rgba(255,255,255,0.03) 75%
  );
  background-size: 6px 6px;
}

html[data-theme="dark"] .is-style-sticky_box,
html[data-theme="dark"] .is-style-emboss_box,
html[data-theme="dark"] .is-style-balloon_box2 {
  background-color: #1a2a2a;
  color: #dce0e4;
}

html[data-theme="dark"] .is-style-crease {
  background-color: rgba(255,255,255,0.04);
}
html[data-theme="dark"] .is-style-crease::before {
  border-color: var(--color_bg) var(--color_bg) rgba(255,255,255,0.1) rgba(255,255,255,0.1);
}

html[data-theme="dark"] .is-style-stitch,
html[data-theme="dark"] .is-style-note_box {
  background: rgba(255,255,255,0.04);
  color: #b0b8c0;
}

html[data-theme="dark"] .is-style-more_btn::before,
html[data-theme="dark"] .is-style-more_btn::after {
  border-color: rgba(20, 184, 166, 0.4);
}
html[data-theme="dark"] .is-style-more_btn:hover::before,
html[data-theme="dark"] .is-style-more_btn:hover::after {
  border-color: rgba(20, 184, 166, 0.7);
}
html[data-theme="dark"] .is-style-more_btn a {
  background: none;
  box-shadow: none;
  color: #0d9488;
}
html[data-theme="dark"] .is-style-more_btn a:hover {
  background: none;
  color: #14b8a6;
}

html[data-theme="dark"] .widget_archive select,
html[data-theme="dark"] .widget_categories select,
html[data-theme="dark"] .wp-block-archives select,
html[data-theme="dark"] .wp-block-categories select {
  background-color: rgba(255,255,255,0.06);
  color: #dce0e4;
}

html[data-theme="dark"] .is-style-browser_mac > .wp-block-group__inner-container {
  background: #1a2a2a;
  border-color: #3a4a4a;
  color: #dce0e4;
}
html[data-theme="dark"] .is-style-browser_mac::before {
  background-color: #2a3a3a;
}

html[data-theme="dark"] .p-spMenu__inner::before {
  background: #1a2a2a;
}

html[data-theme="dark"] .wp-block-image figcaption,
html[data-theme="dark"] .wp-block-video figcaption {
  color: #8a9a9a;
}

html[data-theme="dark"] .f1nl-next-race {
  border-color: rgba(255,255,255,0.08);
}

html[data-theme="dark"] .f1nl-pickup-card {
  background: #1a2a2a;
}

html[data-theme="dark"] .f1nl-digest {
  background: #1a2a2a;
  border-color: rgba(255,255,255,0.08);
}

html[data-theme="dark"] .p-searchModal__inner {
  background: rgba(15,25,35,0.9);
}
html[data-theme="dark"] .p-indexModal__inner {
  background: #1a2a2a;
  color: #dce0e4;
}

@media print {
  html[data-theme="dark"] {
    --color_bg: #fff;
    --color_text: #333;
    --color_content_bg: #fff;
  }
}

/* ============================================
   Dark Mode: Custom HTML Blocks
   Add to dark-mode.css
   Selector: html[data-theme="dark"]
   ============================================ */

/* --- Race Results Hub (/2026-race-results/) --- */

html[data-theme="dark"] .f1h-wrap {
  color: #e0e0e0;
}

html[data-theme="dark"] .f1h-header p {
  color: #999;
}

html[data-theme="dark"] .f1h-gp {
  color: #e0e0e0;
}

html[data-theme="dark"] .f1h-date {
  color: #999;
}

html[data-theme="dark"] .f1h-winner .f1h-driver {
  color: #e0e0e0;
}

html[data-theme="dark"] .f1h-winner .f1h-team {
  color: #999;
}

html[data-theme="dark"] .f1h-winner .f1h-tbd {
  color: #666;
}

html[data-theme="dark"] .f1h-p-name {
  color: #e0e0e0;
}

html[data-theme="dark"] .f1h-p-team {
  color: #666;
}

html[data-theme="dark"] .f1h-race {
  border-bottom-color: #333;
}

html[data-theme="dark"] .f1h-race.f1h-done:hover {
  background: rgba(13, 148, 136, .1);
}

html[data-theme="dark"] .f1h-race.f1h-next {
  background: rgba(13, 148, 136, .08);
  border-left-color: #0d9488;
}

html[data-theme="dark"] .f1h-break {
  border-bottom-color: #333;
}

html[data-theme="dark"] .f1h-break span {
  color: #666;
}

html[data-theme="dark"] .f1h-ranking-link {
  color: #0d9488;
  border-color: #0d9488;
}

html[data-theme="dark"] .f1h-ranking-link:hover {
  background: #0d9488;
  color: #fff;
}

/* --- Standings Page (/2026-standings/) --- */

html[data-theme="dark"] .f1h-pts {
  color: #e0e0e0;
}

html[data-theme="dark"] .f1h-pts th {
  color: #bbb;
  border-bottom-color: #0d9488;
  background: rgba(13, 148, 136, .1);
}

html[data-theme="dark"] .f1h-pts td {
  border-bottom-color: #333;
}

html[data-theme="dark"] .f1h-pts tbody tr:hover {
  background: rgba(13, 148, 136, .1);
}

html[data-theme="dark"] .f1h-pts-num {
  color: #e0e0e0;
}

html[data-theme="dark"] .f1h-zero td {
  color: #666;
}

html[data-theme="dark"] .f1h-zero .f1h-pts-num {
  color: #555;
}

html[data-theme="dark"] .f1h-section {
  color: #0d9488;
  border-bottom-color: #0d9488;
}

html[data-theme="dark"] .f1h-hub-link {
  color: #0d9488;
  border-color: #0d9488;
}

html[data-theme="dark"] .f1h-hub-link:hover {
  background: #0d9488;
  color: #fff;
}

/* --- Race Result Articles (f1nl-race-result) --- */

html[data-theme="dark"] .f1nl-race-result {
  color: #e0e0e0;
}

html[data-theme="dark"] .f1nl-race-result th {
  color: #bbb;
  background: rgba(13, 148, 136, .12);
}

html[data-theme="dark"] .f1nl-race-result td {
  border-bottom-color: #333;
  color: #e0e0e0;
}

html[data-theme="dark"] .f1nl-race-result table {
  border-color: #333;
}

html[data-theme="dark"] .f1nl-race-result tr:hover td {
  background: rgba(13, 148, 136, .08);
}

/* Tab navigation for race result articles */
html[data-theme="dark"] .f1nl-race-tabs .f1nl-race-tab {
  color: #999;
  border-bottom-color: transparent;
}

html[data-theme="dark"] .f1nl-race-tabs .f1nl-race-tab.is-active {
  color: #0d9488;
  border-bottom-color: #0d9488;
}

/* -- wpDiscuz comment form text color (dark) -- */
html[data-theme="dark"] .wpd-field-comment textarea,
html[data-theme="dark"] .wc_name-wrapper input[type="text"] {
  color: #dce0e4 !important;
}
html[data-theme="dark"] .wpd-field-comment textarea::placeholder,
html[data-theme="dark"] .wc_name-wrapper input[type="text"]::placeholder {
  color: #8a9a9a !important;
}
/* -- wpDiscuz posted comment text color (dark) -- */
html[data-theme="dark"] .wpd-comment-text,
html[data-theme="dark"] .wpd-comment-text p {
  color: #dce0e4 !important;
}
html[data-theme="dark"] .wpd-comment-author {
  color: #dce0e4;
}
html[data-theme="dark"] .wpd-comment-date {
  color: #6b7a7a;
}

/* ============================================
   F1nal Lap - Dark Mode Fixes v2
   dark-mode.css に追記（v1は削除してこちらに差替え）
   2026-03-21
   ============================================ */

/* --- Fix 1: Header button background ---
   SWELL header buttons (search, hamburger) only.
   Exclude dark mode toggle (.f1nl-slide-toggle).
   -------------------------------------------- */
html[data-theme="dark"] .l-header button:not(.f1nl-slide-toggle),
html[data-theme="dark"] .l-header__bar button:not(.f1nl-slide-toggle),
html[data-theme="dark"] .l-fixHeader button:not(.f1nl-slide-toggle),
html[data-theme="dark"] .c-searchBtn,
html[data-theme="dark"] .c-menuBtn,
html[data-theme="dark"] .p-spMenu__btn {
  background-color: transparent !important;
}

/* --- Fix 2: PICK UP card background (dark) ---
   .f1nl-pickup-info needs background so text area
   does not appear cut off at the bottom.
   Applied to both PC and SP.
   -------------------------------------------- */
html[data-theme="dark"] .f1nl-pickup-card {
  background: #1a2a2a;
  border-color: rgba(255,255,255,0.08);
}

html[data-theme="dark"] .f1nl-pickup-info {
  background: #1a2a2a;
  border-radius: 0 0 6px 6px;
}

@media (max-width: 768px) {
  html[data-theme="dark"] .f1nl-pickup-card {
    background: #1a2a2a;
    border-radius: 8px;
    padding: 8px;
  }
  html[data-theme="dark"] .f1nl-pickup-info {
    background: transparent;
    border-radius: 0;
  }
}