/* =========================================================
   Jin Simple Code Block - frontend.css
   ========================================================= */

/* =========================
   Base / variables（テーマ非依存化）
   ========================= */

/* 外枠を「絶対にはみ出さない箱」にする */
:where(.entry-content, .post-content, .c-entry__content, article, main) .ccode-wrap,
.ccode-wrap {
  --cc-fs: 14px;
  --cc-lh: 1.6;
  --cc-maxh: none;
  --cc-pad-y: 18px;
  --cc-pad-x: 10px;

  --cc-ln-pad: .8em;

  border-radius: 7px;
  
  /* コードブロック前後の余白 */
  margin-top: 2em !important;
  margin-bottom: 2em !important;

  /* 中身が突き抜けないように hidden を強制し、幅を固定する */
  overflow: hidden !important;
  display: flex;
  flex-direction: column;
  width: 100%;
  box-sizing: border-box;

  background: transparent;
}


/* =========================
   pre / code reset（JSCB内だけ）
   ========================= */

/* JSCBの範囲内だけ pre をリセット（OFF時の core/code には触らない） */
.ccode-wrap pre,
.ccode-wrap pre.ccode,
.ccode-wrap .wp-block-code pre {
  margin: 1.2em 0;
  padding: 0;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* ★重要：ccode-wrap 内では pre のスクロールを殺す（スクロールは ccode-body に一本化） */
.ccode-wrap pre.wp-block-code {
  overflow: visible !important;
  overflow-x: visible !important;
  overflow-y: visible !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* 共通：フォント/余白は wrap-on/off 両方に効かせる */
.ccode-wrap .ccode-body pre.wp-block-code > code {
  padding: var(--cc-pad-y) var(--cc-pad-x) !important;

  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
               "Liberation Mono", "Courier New", monospace !important; 
  font-size: var(--cc-fs) !important;
  line-height: var(--cc-lh) !important;
  -moz-tab-size: 4;
  tab-size: 4;

  overflow-wrap: normal !important;
  word-break: normal !important;
  background: transparent !important;

  /* テーマが code に変な装飾を付けても無効化 */
  text-shadow: none !important;
  -webkit-text-stroke: 0 !important;
}

/* wrap-off（折り返しなし）＝ wrap-on が付いていない時 */
/* 横スクロールしても右端の線が消えないようにする */
.ccode-wrap:not(.wrap-on) .ccode-body pre.wp-block-code > code {
  display: block !important; /* ★ inline-block から変更 */
  width: max-content !important; /* ★ 内容に合わせて横に伸びるように変更 */
  min-width: 100% !important;
  white-space: pre !important;
}

/* wrap-on（折り返し）だけの差分 */
.ccode-wrap.wrap-on .ccode-body pre.wp-block-code > code {
  display: block !important;
  white-space: pre-wrap !important;
  overflow-wrap: break-word !important;
  word-break: break-word !important;
}


/* =========================
   Theme-proof text color（最重要）
   - テーマ側の `code { color: ... }` に絶対負けない
   - ここで「code / .ccode-txt」を各テーマで直指定する
   ========================= */

/* Dark */
/* 外枠にしっかり線を引く */
.ccode-wrap.theme-dark {
  background: #000;
  color: #e5e7eb;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;

  --cc-hl-bg: var(--jscb-hl-bg-dark, rgba(255,255,255,0.08));

  /* ★Copyボタン色（PHPで注入されるCSS変数をここで受ける） */
  --cc-copy-bg: var(--jscb-copy-bg-dark, #06a6b8);
  --cc-copy-color: var(--jscb-copy-color-dark, #ffffff);
}
.ccode-wrap.theme-dark .ccode-head,
.ccode-wrap.theme-dark .ccode-foot {
  background: #373737;
  border-color: rgba(255, 255, 255, 0.15);
}
.ccode-wrap.theme-dark .ccode-body code,
.ccode-wrap.theme-dark .ccode-txt {
  color: #e5e7eb !important; /* ←最終勝者 */
}

/* Light */
.ccode-wrap.theme-light {
  background:#ffffff;
  color:#111827;
  border:1px solid rgba(0,0,0,.10);

  --cc-hl-bg: var(--jscb-hl-bg-light, rgba(0,0,0,0.06));

  /* ★Copyボタン色（PHPで注入されるCSS変数をここで受ける） */
  --cc-copy-bg: var(--jscb-copy-bg-light, #ff7d7d);
  --cc-copy-color: var(--jscb-copy-color-light, #ffffff);
}
.ccode-wrap.theme-light .ccode-head,
.ccode-wrap.theme-light .ccode-foot {
  background:#e9edf2;
  border-color:rgba(0,0,0,.10);
}
.ccode-wrap.theme-light .ccode-body code,
.ccode-wrap.theme-light .ccode-txt {
  color:#111827 !important; /* ←最終勝者 */
}

/* Dark White */
.ccode-wrap.theme-dark-white {
  background:#ffffff;
  color:#111827;
  border:1px solid rgba(0,0,0,.10);

  --cc-hl-bg: var(--jscb-hl-bg-dark-white, #FEE8C3);

  /* ★Copyボタン色（PHPで注入されるCSS変数をここで受ける） */
  --cc-copy-bg: var(--jscb-copy-bg-dark-white, #ff6c6c);
  --cc-copy-color: var(--jscb-copy-color-dark-white, #ffffff);
}
.ccode-wrap.theme-dark-white .ccode-head,
.ccode-wrap.theme-dark-white .ccode-foot {
  background:#373737;
  border-color:rgba(255,255,255,.15);
  color: rgba(255,255,255,.75);
}
.ccode-wrap.theme-dark-white .ccode-body code,
.ccode-wrap.theme-dark-white .ccode-txt {
  color:#111827 !important; /* ←最終勝者 */
}


/* =========================
   FOUC対策：JSがwrapを作る前の「素のpre」を先に最低限整える
   ========================= */

/* Dark White */
:where(.entry-content, .post-content, .c-entry__content, article, main) pre.wp-block-code:not(.ccode-body pre)[data-cc-theme="dark-white"] {
  background:#ffffff !important;
  color:#111827 !important;
  border:1px solid rgba(0,0,0,.10) !important;
  border-radius:7px !important; /* JS実行前も角を丸くしておく */
  overflow:hidden;
}

/* Dark */
:where(.entry-content, .post-content, .c-entry__content, article, main) pre.wp-block-code:not(.ccode-body pre)[data-cc-theme="dark"] {
  background:#1f1f1f !important;
  color:#e5e7eb !important;
  border:1px solid rgba(255,255,255,.10) !important;
  border-radius:7px !important;
  overflow:hidden;
}


/* =========================
   Header / Body / Footer
   ========================= */

/* ヘッダー・フッターの共通設定 */
.ccode-head,
.ccode-foot {
  color: #a1a1a1;
  box-sizing: border-box;
  padding: 0 14px;
}

/* ヘッダー固有：ラベルとボタンを左右に配置 */
.ccode-head {
  display: flex;
  font-size: 14px;
  justify-content: space-between;
  align-items: center;

  height: 48px;
  border-bottom: 2px solid;
}

/* フッター固有：文字サイズのみ上書き（border-topはここに集約） */
.ccode-foot {
  font-size: 12px;

  height: 36px;
  display: flex;
  align-items: center;

  border-top: 2px solid;
}
/* =========================
   Footer link
   ========================= */

/* Dark / Dark White */
.ccode-wrap.theme-dark .ccode-foot a,
.ccode-wrap.theme-dark-white .ccode-foot a {
  color: #a4bcde;
}

/* Light */
.ccode-wrap.theme-light .ccode-foot a {
  color: #1967d2;
}

/* Hover */
.ccode-foot a:hover{
  opacity: .8;
}

/* ボタン群を横に並べるためのコンテナ（新規追加） */
.jscb-button-group {
  display: flex;
  gap: 6px;
  margin-left: auto; /* ラベルの右側に寄せる */
}

/* フッターが空の場合は非表示にする */
.ccode-wrap.footer-empty .ccode-foot {
  display: none !important;
}

/* フッターが空の場合は本体下の余白を調整 */
.ccode-wrap.footer-empty {
  padding-bottom: 0 !important;
}

/* スクロールは ccode-body に集約 */
.ccode-body {
  overflow-x: auto;
  overflow-y: auto;
  /* JavaScriptからの高さ制限解除（none）を確実に反映させるため important を付与 */
  max-height: var(--cc-maxh) !important;
  -webkit-overflow-scrolling: touch;
}

/* 右下の白い四角（scrollbar corner）対策 */
.ccode-body::-webkit-scrollbar-corner {
  background: transparent !important;
}


/* =========================
   Line split (重要)
   - 複数行ハイライトで隙間が出ないように
   - margin は使わない（背景が途切れる）
   ========================= */

.ccode-line {
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;

  line-height: var(--cc-lh) !important;

  /* 行間は padding で作る（背景がつながる） */
  padding-top: calc((var(--cc-lh) - 1) * 0.22em + 0.06em) !important;
  padding-bottom: calc((var(--cc-lh) - 1) * 0.22em + 0.06em) !important;

  white-space: inherit;
}

/* 最終行だけ余計に膨らむのを抑える（軽め） */
.ccode-wrap code > .ccode-line:last-child {
  padding-bottom: 0.06em !important;
}


/* =========================
   Highlight lines
   ========================= */

.ccode-wrap.hl-on .ccode-line.is-hl {
  background-color: var(--cc-hl-bg);
}


/* =========================
   Scrollbar
   ========================= */

.ccode-body::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.ccode-body::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.30);
  border-radius: 8px;
}
.ccode-wrap.theme-dark .ccode-body::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.30);
}
.ccode-wrap.theme-dark-white .ccode-body::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.25);
}


/* =========================
   Copy button (header)
   ========================= */

/* 3つのボタン共通の基本設定（デフォルトはOFFの状態：薄いグレーに黒文字） */
.ccode-copy,
.jscb-toggle-wrap-btn,
.jscb-toggle-height-btn,
.jscb-toggle-syntax-btn {
  padding: 6px 10px !important;
  font-size: 12px;
  border-radius: 6px;
  cursor: pointer;
  border: 0 !important;
  
  /* OFF状態：薄いグレー背景と黒文字 */
  background: #e0e0e0 !important;
  color: #333333 !important;

  opacity: .8;
  transition: all .15s ease;
}

/* Copyボタンは常に「ON」と同じ扱いの色にする */
.ccode-copy {
  background: var(--cc-copy-bg, #545454) !important;
  color: var(--cc-copy-color, #ffffff) !important;
}

/* 折り返しボタン：ON状態（親に .wrap-on がある時）の色変更 */
.ccode-wrap.wrap-on .jscb-toggle-wrap-btn {
  background: var(--cc-copy-bg, #545454) !important;
  color: var(--cc-copy-color, #ffffff) !important;
}

/* 高さ制限ボタン：ON状態（変数が none ではない時）の色変更 */
/* CSSの設計上、bodyに style属性で直接 max-height が指定されているか、
   変数がデフォルト値を持っている状態を「ON」として判定します */
.ccode-wrap:not([style*="--cc-maxh: none"]) .jscb-toggle-height-btn {
  background: var(--cc-copy-bg, #545454) !important;
  color: var(--cc-copy-color, #ffffff) !important;
}
/* ハイライトボタンのON状態（属性が 0 ではない時） */
.ccode-wrap:not([data-cc-cm="0"]) .jscb-toggle-syntax-btn {
  background: var(--cc-copy-bg, #545454) !important;
  color: var(--cc-copy-color, #ffffff) !important;
}

/* ホバー時は不透明度を上げる */
.ccode-copy:hover,
.jscb-toggle-wrap-btn:hover,
.jscb-toggle-height-btn:hover,
.jscb-toggle-syntax-btn:hover {
  opacity: 1;
}

/* 記号ボタン（C, ↵, ↕）の幅を整える */
.jscb-toggle-wrap-btn,
.jscb-toggle-height-btn,
.jscb-toggle-syntax-btn {
  width: 32px !important;
  padding: 6px 0 !important;
  text-align: center;
}

.ccode-copy.is-copied {
  background: transparent;
  color: #9aa0a6;
  opacity: 1;
}

/* =========================
   Focus / outline kill
   ========================= */

.ccode-wrap,
.ccode-wrap * {
  outline: none !important;
  box-shadow: none !important;
  -webkit-tap-highlight-color: transparent;
}


/* =========================
   White border kill（確定版）
   ========================= */

.ccode-wrap pre,
.ccode-wrap code,
.ccode-wrap .ccode-body,
.ccode-wrap .ccode-line {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* =========================
   Line number column（flex）
   ========================= */

.ccode-wrap.ln-on .ccode-line {
  display: flex;
  align-items: flex-start;
  width: 100%;
}


.ccode-wrap.ln-on .ccode-lno {
  flex: 0 0 calc((var(--cc-ln-digits, 1) * 1ch) + var(--cc-ln-pad, .8em) + 1px);
  box-sizing: border-box;
  min-width: calc((var(--cc-ln-digits, 1) * 1ch) + var(--cc-ln-pad, .8em) + 1px);

  text-align: right;
  white-space: nowrap;
  opacity: .55;
  user-select: none;

  padding-right: var(--cc-ln-pad, .8em);
  border-right: 1px solid rgba(255,255,255,.12);
}

.ccode-wrap.theme-light.ln-on .ccode-lno,
.ccode-wrap.theme-dark-white.ln-on .ccode-lno {
  border-right-color: rgba(0,0,0,.12);
}

.ccode-wrap.ln-on .ccode-txt {
  flex: 1 1 auto;
  min-width: 0;
  padding-left: 0.25em; /* 境界線と本文の間の隙間になります */
}

.ccode-wrap.ln-off .ccode-lno {
  display: none !important;
}
.ccode-wrap.ln-off .ccode-line {
  display: block;
  width: 100%;
}

/* =========================
   Comment color
   - 色分けON時だけ、管理画面のコメント色を反映
   - 色分けOFF時は、この後ろのリセット設定が勝つ
   ========================= */

.ccode-wrap.theme-dark[data-cc-cm="1"] .token.comment {
  color: var(--jscb-comment-dark, #969896) !important;
}

.ccode-wrap.theme-light[data-cc-cm="1"] .token.comment {
  color: var(--jscb-comment-light, #808080) !important;
}

.ccode-wrap.theme-dark-white[data-cc-cm="1"] .token.comment {
  color: var(--jscb-comment-dark-white, #808080) !important;
}


/* ============================================================
   ハイライトOFF（data-cc-cm="0"）時のリセット設定
   ============================================================ */

/* 
 * 属性 data-cc-cm="0" が指定されている場合、
 * 枠内のすべてのトークン（キーワード、文字列、コメント等）の色を
 * 親要素と同じ色（通常は黒や基本の文字色）に強制します。
 */
.ccode-wrap[data-cc-cm="0"] .token {
  color: inherit !important;
  background: none !important;
  font-weight: 400 !important;
  font-style: normal !important;
  text-decoration: none !important;
}