/**
 * Markdown Block Frontend Styles
 * Unified design system using CSS variables
 */

@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;

	/* Remove border (force apply) */
	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; /* For copy button */

	/* Avoid conflict with copy button function - border same color as background (invisible) */
	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; - Removed: interferes with Shiki color display */

	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;
}

/* Task lists */
.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 Color Protection for Content Display
   ========================================================================== */

/* Selector to reliably apply Shiki inline color specifications */
.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"] {

	/*
	 * Protect Shiki inline colors with empty ruleset
	 * Override WordPress theme CSS specificity
	 */
}

/* Basic code block styles for content display */
.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; /* Unified padding */
	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; /* Ensure copy button is visible vertically */
	border: none !important;
	box-shadow: none !important;
	position: relative; /* For copy button placement */
}

/* Countermeasure for common WordPress theme code style overrides */
.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; /* For copy button placement */
	padding: 16px !important; /* Unified padding */
}

/* Code style override for common WordPress themes */
.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) {

	/* Does not affect non-GFM code blocks */
}