/**
 * Markdownブロック フロントエンドスタイル
 * CSS変数を使用した統一設計システム
 */

@import url(../../assets/css/gfmr-variables.css);

.gfmr-markdown-container {
	margin: 1em 0;
}

.gfmr-markdown-rendered {
	line-height: 1.6;
	color: #1e1e1e;
}

.gfmr-markdown-rendered h1,
.gfmr-markdown-rendered h2,
.gfmr-markdown-rendered h3,
.gfmr-markdown-rendered h4,
.gfmr-markdown-rendered h5,
.gfmr-markdown-rendered h6 {
	margin-top: 24px;
	margin-bottom: 16px;
	font-weight: 600;
	line-height: 1.25;
}

.gfmr-markdown-rendered h1 {
	font-size: 2em;
	border-bottom: var(--gfmr-border-light);
	padding-bottom: 0.3em;
}

.gfmr-markdown-rendered h2 {
	font-size: 1.5em;
	border-bottom: var(--gfmr-border-light);
	padding-bottom: 0.3em;
}

.gfmr-markdown-rendered h3 {
	font-size: 1.25em;
}

.gfmr-markdown-rendered h4 {
	font-size: 1em;
}

.gfmr-markdown-rendered h5 {
	font-size: 0.875em;
}

.gfmr-markdown-rendered h6 {
	font-size: 0.85em;
}

.gfmr-markdown-rendered p {
	margin-bottom: 16px;
}

.gfmr-markdown-rendered ul,
.gfmr-markdown-rendered ol {
	padding-left: 2em;
	margin-bottom: 16px;
}

.gfmr-markdown-rendered li {
	margin-bottom: 4px;
}

.gfmr-markdown-rendered li > p {
	margin-bottom: 4px;
}

.gfmr-markdown-rendered blockquote {
	padding: 0 1em;
	color: #666;
	border-left: 4px solid #ddd;
	margin: 0 0 16px 0;
}

.gfmr-markdown-rendered blockquote > :first-child {
	margin-top: 0;
}

.gfmr-markdown-rendered blockquote > :last-child {
	margin-bottom: 0;
}

.gfmr-markdown-rendered code {
	padding: 0.2em 0.4em;
	margin: 0;
	font-size: 90%;
	background-color: rgba(27, 31, 35, 0.05);
	border-radius: 3px;
	font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;

	/* border削除（強制適用） */
	border: none !important;
	border-width: 0 !important;
	border-style: none !important;
	outline: none !important;
}

.gfmr-markdown-rendered pre {
	padding: 16px;
	overflow: auto;
	font-size: 90%;
	line-height: 1.45;
	background-color: var(--gfmr-code-bg, #f6f8fa) !important;
	border-radius: 6px;
	margin-bottom: 16px;
	position: relative; /* コピーボタン用 */

	/* コピーボタン機能と競合回避 - 背景色と同じ色のボーダー（見えない） */
	border: 1px solid var(--gfmr-code-bg, #f6f8fa) !important;
	border-color: var(--gfmr-code-bg, #f6f8fa) !important;
	outline: none !important;
	box-shadow: none !important;
}

/* Mermaid container border removal for blocks */
.gfmr-markdown-rendered .gfmr-mermaid-container,
.gfmr-markdown-rendered .gfmr-mermaid-container-unified,
.gfmr-mermaid-container,
.gfmr-mermaid-container-unified {
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
}

.gfmr-markdown-rendered pre code {
	display: inline;
	max-width: auto;
	padding: 0;
	margin: 0;
	overflow: visible;
	line-height: inherit;
	word-wrap: normal;

	/* background-color: transparent; - 削除：Shikiの色表示を妨げる */

	border: none !important;
	border-width: 0 !important;
	border-style: none !important;
	outline: none !important;
}

/* Table styles moved to gfmr-table-styles.css for consistency */

/* Both editor preview and content display use unified table styles */

/* Fallback table styles for content display - WordPress theme dependent */
.gfmr-markdown-rendered table {
	border-collapse: collapse;
	margin-bottom: 16px;
	width: 100%;

	/* Background color and text color inherit from WordPress theme */

	/* Border with fallback value to ensure visibility */
	border: var(--gfmr-table-border, 1px solid #ddd);
}

.gfmr-markdown-rendered table th,
.gfmr-markdown-rendered table td {
	padding: 6px 13px;

	/* Border with fallback value to ensure visibility */
	border: var(--gfmr-table-border, 1px solid #ddd);
}

.gfmr-markdown-rendered table th {
	font-weight: 600;

	/* Background color inherits from WordPress theme */
}

.gfmr-markdown-rendered table tr:nth-child(even) {

	/* Striped background color inherits from WordPress theme */
}

.gfmr-markdown-rendered hr {
	height: 0.25em;
	padding: 0;
	margin: 24px 0;
	background-color: var(--gfmr-border-color);
}

.gfmr-markdown-rendered img {
	max-width: 100%;
	box-sizing: content-box;
	background-color: #fff;
}

.gfmr-markdown-rendered a {
	color: #0366d6;
	text-decoration: none;
}

.gfmr-markdown-rendered a:hover {
	text-decoration: underline;
}

.gfmr-markdown-rendered strong {
	font-weight: 600;
}

.gfmr-markdown-rendered em {
	font-style: italic;
}

.gfmr-markdown-rendered del {
	text-decoration: line-through;
}

/* タスクリスト */
.gfmr-markdown-rendered input[type="checkbox"] {
	margin-right: 0.5em;
}

.gfmr-markdown-rendered .task-list-item {
	list-style-type: none;
}

.gfmr-markdown-rendered .task-list-item + .task-list-item {
	margin-top: 3px;
}

/* ==========================================================================
   コンテンツ画面用Shiki色保護
   ========================================================================== */

/* Shikiのインライン色指定を確実に適用するためのセレクター */
.gfmr-markdown-rendered .shiki span[style*="color"],
.gfmr-markdown-rendered .shiki code[style*="color"],
.gfmr-markdown-rendered pre.shiki span[style*="color"],
.gfmr-markdown-rendered pre.shiki code[style*="color"],
.gfmr-markdown-container .shiki span[style*="color"],
.gfmr-markdown-container .shiki code[style*="color"] {

	/* 
	 * 空のルールセットでShikiのインライン色を保護
	 * WordPressテーマのCSS specificity を上書き
	 */
}

/* コンテンツ画面のコードブロック基本スタイル */
.gfmr-markdown-rendered .shiki,
.gfmr-markdown-rendered pre.shiki,
.gfmr-markdown-container .shiki,
.gfmr-markdown-container pre.shiki {
	background-color: var(--gfmr-code-bg, #f6f8fa) !important;
	border-radius: 6px;
	padding: 16px 16px 16px 16px; /* パディングを統一 */
	margin: 16px 0;
	font-family: var(--gfmr-font-mono, 'Fira Code', 'SF Mono', 'Consolas', monospace);
	font-size: 15px;
	line-height: 1.45;
	overflow-x: auto;
	overflow-y: visible; /* コピーボタンが縦方向に見えるよう保証 */
	border: none !important;
	box-shadow: none !important;
	position: relative; /* コピーボタン配置用 */
}

/* WordPressテーマの一般的なコードスタイル上書き対策 */
.entry-content .gfmr-markdown-rendered .shiki,
.post-content .gfmr-markdown-rendered .shiki,
.content .gfmr-markdown-rendered .shiki,
article .gfmr-markdown-rendered .shiki,
.single-post .gfmr-markdown-rendered .shiki,
.page .gfmr-markdown-rendered .shiki {
	background-color: var(--gfmr-code-bg, #f6f8fa) !important;
	border: none !important;
	box-shadow: none !important;
	outline: none !important;
	position: relative !important; /* コピーボタン配置用 */
	padding: 16px !important; /* パディングを統一 */
}

/* 一般的なWordPressテーマでのコードスタイル上書き */
.entry-content pre:not(.gfmr-markdown-rendered pre),
.post-content pre:not(.gfmr-markdown-rendered pre),
.content pre:not(.gfmr-markdown-rendered pre),
article pre:not(.gfmr-markdown-rendered pre) {

	/* 非GFMコードブロックには影響しない */
}