/**
 * Highlighting Code Block（loos-hcb/code-block）の見た目を新デザインに合わせる（CEO決定：コードは HCB に一本化）。
 * 見本 .a-code / .a-codebox：地 #2F2B28・文字 #F5F1EA・mono 13.5px/1.7・padding 16px 18px・角なし。
 * ファイル名の帯：地 code-head（#3A3531）・下線 #4A443F・ファイル名 mono 12px #D9D1C4・padding 6px 18px（SP 5px 14px）・言語は右に 11px #B8AFA2。
 *
 * HCB は CSS 変数で色・余白を持つので、まず変数を上書きし、帯（pre::before）だけ形を変える。
 * HCB 本体の CSS（.hcb_wrap.hcb_wrap …＝詳細度 0-2-0）より強くするため :root を足している。プラグインのファイルは触らない。
 */

:root .hcb_wrap.hcb_wrap {
	--hcb--bgc: var(--wp--preset--color--code-bg);
	--hcb--c: var(--wp--preset--color--code-text);
	--hcb--ff: var(--wp--preset--font-family--mono);
	--hcb--fz: 13.5px;
	--hcb--pY: 16px;
	--hcb--pX: 18px;
	--hcb--radius: 0;
	--hcb--data-label--bgc: var(--wp--preset--color--code-head);
	--hcb--data-label--c: #b8afa2;
	margin: 1.4em 0 0;
}

:root .hcb_wrap.hcb_wrap > pre {
	line-height: 1.7;
}

/* ファイル名があるとき：右上の小さな札をやめ、箱の幅いっぱいの帯にする（コードは帯の下から） */
:root .hcb_wrap.hcb_wrap > pre[data-file] {
	padding-top: calc(var(--hcb--pY) + 34px);
}

:root .hcb_wrap.hcb_wrap > pre[data-file]::before {
	left: 0;
	right: 0;
	min-width: 0;
	padding: 6px 18px;
	border-bottom: 1px solid #4a443f;
	border-radius: 0;
	background-image: none;
	color: #d9d1c4;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 12px;
	line-height: 1.75;
	text-align: left;
	/* 長いファイル名は帯の中で「…」に（はみ出して横スクロールを起こさない） */
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* 言語名があるときは、ファイル名の「…」が言語名の手前で止まるよう右を空ける */
:root .hcb_wrap.hcb_wrap > pre[data-file][data-lang]::before {
	padding-right: 96px;
}

/* 帯の右に言語名（ファイル名があり、言語も入っているときだけ） */
:root .hcb_wrap.hcb_wrap > pre[data-file][data-lang]::after {
	content: attr(data-lang);
	position: absolute;
	top: 0;
	right: 18px;
	z-index: 1;
	padding: 6px 0;
	color: #b8afa2;
	font-family: var(--wp--preset--font-family--body);
	font-size: 11px;
	letter-spacing: 0.04em;
	line-height: 1.9;
}

@media (width <= 640px) {
	:root .hcb_wrap.hcb_wrap {
		--hcb--fz: 12.5px;
		--hcb--pY: 12px;
		--hcb--pX: 14px;
	}

	:root .hcb_wrap.hcb_wrap > pre[data-file]::before {
		padding: 5px 14px;
	}

	:root .hcb_wrap.hcb_wrap > pre[data-file][data-lang]::after {
		right: 14px;
		padding: 5px 0;
	}
}