/**
 * WP GFM Renderer - Copy Button Styles & Shiki Protection
 *
 * MD-21 Implementation: Style definitions for code block copy button
 * Emphasis on modern UI/UX design and accessibility
 * Unified management of Shiki color protection rules
 *
 * @package WpGfmRenderer
 * @since 0.2.0
 */

/* ========================================
 * SHIKI COLOR PROTECTION (Unified Rules)
 * ======================================== */

/* Protect Shiki inline color specifications with highest priority (Theme-specific enhancement) */
.shiki span[style*="color"],
.shiki code[style*="color"],
pre.shiki span[style*="color"],
pre.shiki code[style*="color"],
.gfmr-code-container .shiki span[style*="color"],
.gfmr-markdown-container .shiki span[style*="color"],
.gfmr-markdown-rendered .shiki span[style*="color"],
.wp-block-html .shiki span[style*="color"],
.entry-content .shiki span[style*="color"],
.post-content .shiki span[style*="color"],
.content .shiki span[style*="color"],
article .shiki span[style*="color"],
/* Twenty Twenty-Five theme specific */
body.wp-theme-twentytwentyfive .shiki span[style*="color"],
body.wp-theme-twentytwentyfive pre.shiki span[style*="color"],
.wp-theme-twentytwentyfive .entry-content .shiki span[style*="color"],
.wp-theme-twentytwentyfive .post-content .shiki span[style*="color"] {

	/*
	 * Important: Unified protection rule to reliably apply Shiki inline colors
	 * Override WordPress theme CSS specificity to prioritize inline styles
	 * Ensure consistency between editor preview and frontend display
	 */
	color: revert !important;
}

/* ========================================
 * COPY BUTTON STYLES
 * ======================================== */

/* ==========================================================================
   Base Code Block Styling
   ========================================================================== */

.gfmr-code-container {
	position: relative;
	margin: 1em 0;
	border-radius: 6px;
	overflow: visible; /* Changed to prevent button clipping */
	background: var(--gfmr-code-bg, #0d1117);

	/* border removed per user request - no border around code blocks */
}

/* Indented code block specific styles - Remove margins (force applied) */
.gfmr-code-container.gfmr-indent-code,
pre.gfmr-code-container.gfmr-indent-code,
.gfmr-indent-code {
	margin: 0 !important; /* Remove margins to restore original indented code block display */
	background: transparent !important; /* Make background transparent to prioritize Shiki background */
	border-radius: 0 !important; /* No border-radius for indented code blocks */
	padding: 0 !important; /* Remove padding as well */
	border: none !important; /* Remove border as well */
}

/* Copy button adjustment for indented code blocks (force applied) */
.gfmr-code-container.gfmr-indent-code .gfmr-copy-button,
pre.gfmr-code-container.gfmr-indent-code .gfmr-copy-button,
.gfmr-indent-code .gfmr-copy-button {
	top: 8px !important; /* Position slightly higher for indented code blocks */
	right: 8px !important;
}

.gfmr-code-container pre {
	margin: 0;
	padding: 16px;
	overflow-x: auto;
	font-family: "Fira Code", "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace;
	font-size: 14px;
	line-height: 1.45;
	background: transparent;
}


/* ==========================================================================
   Copy Button Styling
   ========================================================================== */

.gfmr-copy-button {
	position: absolute;
	top: 8px;
	right: 8px; /* Unified position specification */
	z-index: 1000; /* Avoid conflict with Mermaid containers */

	/* Button Appearance - Optimized for icon-only display */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0;
	padding: 8px;

	/* Typography */
	font-size: 11px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif;
	font-weight: 500;
	line-height: 1;
	white-space: nowrap;
	text-align: center;
	min-width: auto; /* Icon-only display - Remove minimum width restriction */
	width: auto; /* Auto width adjustment */
	height: auto; /* Auto height adjustment */

	/* Colors - Default (Dark theme) - Enhanced visibility */
	color: var(--gfmr-copy-text, #fff);
	background: var(--gfmr-copy-bg, rgba(240, 246, 252, 0.15));
	border: 1px solid var(--gfmr-copy-border, rgba(240, 246, 252, 0.3));

	/* Border & Shadows */
	border-radius: 6px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);

	/* Interaction */
	cursor: pointer;
	user-select: none;
	-webkit-user-select: none;

	/* Animation - Improved visibility */
	opacity: 0.9; /* Changed from 0.8 to 0.9 for better visibility */
	transform: translateY(0);
	transition: all 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);

	/* Accessibility */
	outline: none;
	text-decoration: none;
}

/* Enhanced display on button hover and focus */
.gfmr-copy-button:hover,
.gfmr-copy-button:focus-visible {
	opacity: 1;
	transform: translateY(-1px);
}

/* Button hover state (merged with above hover settings) */
.gfmr-copy-button:hover {
	color: var(--gfmr-copy-text-hover, #fff);
	background: var(--gfmr-copy-bg-hover, rgba(240, 246, 252, 0.2));
	border-color: var(--gfmr-copy-border-hover, rgba(240, 246, 252, 0.3));
	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);

	/* transform unified with above settings */
}

.gfmr-copy-button:active {
	transform: translateY(0);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.gfmr-copy-button:focus-visible {
	outline: 2px solid var(--gfmr-copy-focus, #58a6ff);
	outline-offset: 2px;
}

/* Success State */
.gfmr-copy-button.copied {
	color: var(--gfmr-copy-success-text, #56d364);
	background: var(--gfmr-copy-success-bg, rgba(86, 211, 100, 0.1));
	border-color: var(--gfmr-copy-success-border, rgba(86, 211, 100, 0.3));
}

/* ==========================================================================
   Copy Button Icon
   ========================================================================== */

.gfmr-copy-icon {
	width: 14px;
	height: 14px;
	display: inline-block;
	transition: transform 0.2s ease;
}

.gfmr-copy-button:hover .gfmr-copy-icon {
	transform: scale(1.1);
}

/* ==========================================================================
   Copy Button Text
   ========================================================================== */

/*
 * Hide text inside copy button
 * Resolves issue where unnecessary "Copy" text appears below indented code blocks
 * Accessibility maintained via aria-label
 */
.gfmr-copy-text {
	display: none !important;
	visibility: hidden !important;
	opacity: 0 !important;
}

/* Ensure hiding in specific contexts - High specificity */
.gfmr-copy-button .gfmr-copy-text,
.gfmr-code-container .gfmr-copy-text,
pre .gfmr-copy-text,
.gfmr-markdown-container .gfmr-copy-text,
.gfmr-markdown-rendered .gfmr-copy-text {
	display: none !important;
	visibility: hidden !important;
	opacity: 0 !important;
}

/* Accessibility: Screen reader text (for future extension) */
.gfmr-copy-text.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
	display: block; /* Override display: none */
}

/* ==========================================================================
   Light Theme Support
   ========================================================================== */

/* Always apply light theme in WordPress admin area */
.wp-admin :root,
.wp-admin,
body.wp-admin {
	--gfmr-code-bg: #f6f8fa !important;
	--gfmr-copy-text: #24292f !important;
	--gfmr-copy-bg: rgba(255, 255, 255, 0.9) !important;
	--gfmr-copy-border: rgba(31, 35, 40, 0.25) !important;
	--gfmr-copy-text-hover: #24292f !important;
	--gfmr-copy-bg-hover: #fff !important;
	--gfmr-copy-border-hover: rgba(31, 35, 40, 0.25) !important;
	--gfmr-copy-focus: #0969da !important;
	--gfmr-copy-success-text: #1a7f37 !important;
	--gfmr-copy-success-bg: rgba(26, 127, 55, 0.1) !important;
	--gfmr-copy-success-border: rgba(26, 127, 55, 0.3) !important;
}

@media (prefers-color-scheme: light) {

	/* Apply light theme only on frontend */
	:root:not(.wp-admin) {
		--gfmr-code-bg: #f6f8fa;
		--gfmr-copy-text: #24292f;
		--gfmr-copy-bg: rgba(255, 255, 255, 0.8);
		--gfmr-copy-border: rgba(31, 35, 40, 0.15);
		--gfmr-copy-text-hover: #24292f;
		--gfmr-copy-bg-hover: #fff;
		--gfmr-copy-border-hover: rgba(31, 35, 40, 0.25);
		--gfmr-copy-focus: #0969da;
		--gfmr-copy-success-text: #1a7f37;
		--gfmr-copy-success-bg: rgba(26, 127, 55, 0.1);
		--gfmr-copy-success-border: rgba(26, 127, 55, 0.3);
	}
}

/* Explicit light theme class */
.gfmr-theme-light {
	--gfmr-code-bg: #f6f8fa;

	/* --gfmr-code-border removed - no border used */

	--gfmr-copy-text: #24292f;
	--gfmr-copy-bg: rgba(255, 255, 255, 0.8);
	--gfmr-copy-border: rgba(31, 35, 40, 0.15);

	--gfmr-copy-text-hover: #24292f;
	--gfmr-copy-bg-hover: #fff;
	--gfmr-copy-border-hover: rgba(31, 35, 40, 0.25);

	--gfmr-copy-focus: #0969da;

	--gfmr-copy-success-text: #1a7f37;
	--gfmr-copy-success-bg: rgba(26, 127, 55, 0.1);
	--gfmr-copy-success-border: rgba(26, 127, 55, 0.3);
}

/* ==========================================================================
   Responsive Design
   ========================================================================== */

/* Mobile optimizations */
@media (max-width: 768px) {

	.gfmr-copy-button {
		padding: 6px; /* Optimized for icon-only display */
		font-size: 10px;
		top: 6px;
		right: 6px; /* Mobile adjustment */
		min-width: auto; /* Icon-only display - Remove minimum width restriction */
		opacity: 0.8; /* Unified with desktop */
	}

	.gfmr-copy-button:hover,
	.gfmr-copy-button:focus-visible {
		opacity: 1;
	}
}

/* Small mobile devices */
@media (max-width: 480px) {

	.gfmr-copy-button {
		padding: 5px; /* Optimized for icon-only display */
		font-size: 9px;
		top: 4px;
		right: 4px; /* Small screen adjustment */
		min-width: auto; /* Icon-only display - Remove minimum width restriction */
	}
}

/* ==========================================================================
   High Contrast Support
   ========================================================================== */

@media (prefers-contrast: high) {

	.gfmr-copy-button {
		border-width: 2px;
		background: var(--gfmr-copy-bg-high-contrast, #000);
		color: var(--gfmr-copy-text-high-contrast, #fff);
		border-color: var(--gfmr-copy-border-high-contrast, #fff);
	}

	.gfmr-copy-button:hover {
		background: var(--gfmr-copy-bg-hover-high-contrast, #333);
	}

	.gfmr-copy-button:focus-visible {
		outline-width: 3px;
	}
}

/* ==========================================================================
   Reduced Motion Support
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

	.gfmr-copy-button {
		transition: opacity 0.1s ease;
		transform: none;
	}

	.gfmr-copy-button:hover {
		transform: none;
	}

	.gfmr-copy-icon {
		transition: none;
	}

	.gfmr-copy-button:hover .gfmr-copy-icon {
		transform: none;
	}
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {

	.gfmr-copy-button {
		display: none !important;
	}
}


/* ==========================================================================
   Refactored Copy Button Styles - Type-specific Classes
   ========================================================================== */

/* Base styles for all copy buttons */
.gfmr-copy-button {
	position: relative;
	cursor: pointer;
	font-size: 12px;
	border-radius: 6px;
	transition: all 0.2s ease;
	user-select: none;
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

/* Code block copy button style */
.gfmr-copy-button--code {
	background: #0d1117;
	border: 1px solid #30363d;
	color: #8b949e;
	padding: 4px 8px;
	font-weight: 400;
}

.gfmr-copy-button--code:hover {
	background: #161b22;
	color: #c9d1d9;
	border-color: #484f58;
}

/* Mermaid diagram copy button style - Fixed White Background (force applied) */
.gfmr-copy-button--mermaid,
.gfmr-mermaid-container .gfmr-copy-button,
.gfmr-mermaid-inner-container .gfmr-copy-button,
.gfmr-copy-button.gfmr-copy-button--mermaid {

	/* Fixed white background - Optimized for Mermaid diagram white background */
	background: #fff !important;
	border: 2px solid #d1d5db !important;
	color: #374151 !important;
	padding: 6px 10px !important;
	font-weight: 600 !important;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
	backdrop-filter: blur(4px) !important;
	opacity: 1 !important;
}

.gfmr-copy-button--mermaid:hover,
.gfmr-mermaid-container .gfmr-copy-button:hover,
.gfmr-mermaid-inner-container .gfmr-copy-button:hover,
.gfmr-copy-button.gfmr-copy-button--mermaid:hover {
	background: #f9fafb !important;
	border-color: #9ca3af !important;
	color: #111827 !important;
	transform: scale(1.05) !important;
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3) !important;
}

/* Success state */
.gfmr-copy-button--success {
	animation: copySuccess 0.3s ease;
}

.gfmr-copy-button--code.gfmr-copy-button--success {
	color: #3fb950 !important;
}

.gfmr-copy-button--mermaid.gfmr-copy-button--success {
	background: #2da44e !important;
	color: #fff !important;
}

/* Error state */
.gfmr-copy-button--error {
	animation: copyError 0.3s ease;
}

.gfmr-copy-button--code.gfmr-copy-button--error {
	color: #f85149 !important;
}

.gfmr-copy-button--mermaid.gfmr-copy-button--error {
	background: #da3633 !important;
	color: #fff !important;
}

/* Icon styles */
.gfmr-copy-button svg {
	width: 16px;
	height: 16px;
	vertical-align: middle;
	fill: currentcolor;
}

/* Animations */
@keyframes copySuccess {

	0% { transform: scale(1); }

	50% { transform: scale(1.1); }

	100% { transform: scale(1); }
}

@keyframes copyError {

	0% { transform: translateX(0); }

	25% { transform: translateX(-5px); }

	75% { transform: translateX(5px); }

	100% { transform: translateX(0); }
}

/* ==========================================================================
   Code Block Border Override - Complete Removal
   ========================================================================== */

/* Maximum priority to completely remove borders from code blocks */
.gfmr-code-container pre,
.gfmr-code-container pre.shiki,
.gfmr-code-container .shiki,
.gfmr-code-container code,
.gfmr-markdown-container pre,
.gfmr-markdown-rendered pre,
.wp-block-html pre,
.wp-block-code pre,
pre.shiki,
.shiki,
.shiki pre,
.shiki code,
pre[class*="language-"],
code[class*="language-"],
.gfmr-shiki-processed,
.gfmr-shiki-enhanced pre,
.highlight pre,
.highlight code {
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
}

/* Specific WordPress theme support */
.entry-content pre,
.post-content pre,
.content pre,
article pre,
.wp-block-code,
.wp-block-html pre {
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
}

/* Shiki-specific style overrides */
.shiki,
.shiki pre,
.shiki code,
pre.shiki,
code.shiki {
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
}

/* Maximum priority forced override - Prevent conflicts with any theme */
*:is(pre, code):is(.shiki, [class*="language-"], [data-language], .gfmr-shiki-processed),
*:is(.gfmr-code-container, .gfmr-markdown-container, .wp-block-html, .wp-block-code) *:is(pre, code),
.highlight *:is(pre, code),
.hljs,
.hljs *,
pre.highlight,
code.highlight {
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
}

/* User agent styles and theme override countermeasures */
pre[style*="border"],
code[style*="border"],
.shiki[style*="border"],
.gfmr-code-container pre[style*="border"] {
	border: none !important;
}

/* Disable borders from pseudo-elements as well */
.gfmr-code-container pre::before,
.gfmr-code-container pre::after,
.shiki::before,
.shiki::after,
pre.shiki::before,
pre.shiki::after {
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
}

/* ==========================================================================
   Force Border Removal - Override All Possible Sources
   ========================================================================== */

/* Border color matching background - make borders invisible */
pre,
code,
.gfmr-code-container,
.gfmr-code-container pre,
.gfmr-markdown-container pre,
.gfmr-markdown-rendered pre,
.wp-block-html pre,
.wp-block-code pre,
[class*="language-"]:not(.shiki):not(.shiki *),
.gfmr-shiki-processed,
.entry-content pre,
.post-content pre,
.content pre,
article pre {

	/* Primary approach: remove borders completely */
	border: none !important;
	border-width: 0 !important;
	border-style: none !important;
	outline: none !important;

	/* Force transparent borders if they can't be removed */
	border-color: transparent !important;
	outline-color: transparent !important;
}

/* Shiki elements - lighter touch to preserve colors */
.shiki,
pre.shiki,
.shiki pre,
.shiki code,
.shiki span {

	/* Only remove borders, preserve colors */
	border: none !important;
	border-width: 0 !important;
	border-style: none !important;
	outline: none !important;

	/* DO NOT override background-color or color for Shiki elements */
}

/* Also remove borders from inline code */
code:not(pre code),
.gfmr-markdown-container code:not(pre code),
.gfmr-markdown-rendered code:not(pre code) {
	border: none !important;
	border-width: 0 !important;
	border-style: none !important;
	outline: none !important;
}

/* Remove any inherited borders from containers */
.gfmr-code-container,
.gfmr-markdown-container,
.gfmr-markdown-rendered,
.shiki-container,
.code-container {
	border: none !important;
	border-width: 0 !important;
	border-style: none !important;
	border-color: transparent !important;
	outline: none !important;
}

/* Specific overrides for common WordPress and theme borders */
.gfmr-code-container,
.gfmr-code-container pre,
.gfmr-markdown-rendered pre {

	/* Dark theme - match background */
	border: 1px solid var(--gfmr-code-bg, #0d1117) !important;
	box-shadow: none !important;
}

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

/* Mermaid SVG elements - border removal */
.gfmr-mermaid-container svg,
.gfmr-mermaid-container-unified svg,
.gfmr-mermaid svg {
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
}

/* Mermaid inner elements - complete border removal */
.gfmr-mermaid-container *,
.gfmr-mermaid-container-unified *,
.gfmr-mermaid * {
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
}

/* Maximum specificity override for Mermaid borders */
html body .gfmr-markdown-rendered .gfmr-mermaid-container,
html body .gfmr-markdown-rendered .gfmr-mermaid-container-unified,
html body .gfmr-mermaid-container,
html body .gfmr-mermaid-container-unified {
	border: none !important;
	box-shadow: none !important;
	outline: none !important;
}

/* Light theme overrides */
@media (prefers-color-scheme: light) {

	.gfmr-code-container,
	.gfmr-code-container pre,
	.gfmr-markdown-rendered pre {
		border: 1px solid #f6f8fa !important;
		border-color: #f6f8fa !important;
	}

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

/* Theme-specific overrides */
.gfmr-theme-light .gfmr-code-container,
.gfmr-theme-light .gfmr-code-container pre,
.gfmr-theme-light .gfmr-markdown-rendered pre {
	border: 1px solid #f6f8fa !important;
	border-color: #f6f8fa !important;
}

/* Dark theme - complete border removal for Mermaid */

@media (prefers-color-scheme: dark) {

	.gfmr-markdown-rendered .gfmr-mermaid-container,
	.gfmr-markdown-rendered .gfmr-mermaid-container-unified,
	.gfmr-mermaid-container,
	.gfmr-mermaid-container-unified {
		border: none !important;
		box-shadow: none !important;
		outline: none !important;
	}
}

/* ==========================================================================
   Integration with existing Shiki styles
   ========================================================================== */

/* Ensure compatibility with Shiki-generated code blocks */
.shiki .gfmr-copy-button,
.shiki-container .gfmr-copy-button,
pre.shiki .gfmr-copy-button,
.gfmr-markdown-rendered .shiki .gfmr-copy-button,
.gfmr-markdown-container .shiki .gfmr-copy-button {
	z-index: 1000; /* Higher than Mermaid containers */
	position: absolute;
	top: 8px;
	right: 8px; /* Unified with main button */
}

/* Integration with existing markdown containers */
.gfmr-markdown-container pre,
.gfmr-markdown-rendered pre,
.wp-block-html pre {
	position: relative;
}

/* ==========================================================================
   Force Shiki Color Preservation - Override WordPress and Theme CSS
   ========================================================================== */

/* Duplicate Shiki protection rules removed (unified at file beginning) */

/* Restore basic code block appearance */
.gfmr-code-container,
.gfmr-markdown-rendered pre,
.gfmr-markdown-container pre {

	/* Restore normal code block background color */
	background-color: var(--gfmr-code-bg, #f6f8fa) !important;
	border-radius: 6px;
	padding: 16px;
	margin: 16px 0;
	position: relative; /* For copy button positioning */
}

/* Explicitly apply background color to Shiki code blocks */
.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: none !important;
	box-shadow: none !important;
}

/* Reset WordPress theme forced color specifications (non-Shiki elements only) */
.entry-content pre:not(.shiki) code,
.post-content pre:not(.shiki) code,
.content pre:not(.shiki) code,
article pre:not(.shiki) code {

	/* Reset theme colors only for non-Shiki elements */
	color: inherit;
}

/* Maximum priority to protect only Shiki background color - Prioritize Shiki inline specifications for text color */
.shiki,
.shiki code,
.shiki span,
pre.shiki,
pre.shiki code,
pre.shiki span,
.gfmr-code-container .shiki,
.gfmr-code-container .shiki code,
.gfmr-code-container .shiki span,
.gfmr-markdown-container .shiki,
.gfmr-markdown-container .shiki code,
.gfmr-markdown-container .shiki span,
.gfmr-markdown-rendered .shiki,
.gfmr-markdown-rendered .shiki code,
.gfmr-markdown-rendered .shiki span,
.wp-block-html .shiki,
.wp-block-html .shiki code,
.wp-block-html .shiki span,
.entry-content .shiki,
.entry-content .shiki code,
.entry-content .shiki span,
.post-content .shiki,
.post-content .shiki code,
.post-content .shiki span,
.content .shiki,
.content .shiki code,
.content .shiki span,
article .shiki,
article .shiki code,
article .shiki span {

	/* Temporarily disable background inheritance to check for issues */

	/* color: inherit !important; <- Removed: This was overwriting Shiki colors */

	/* background-color: inherit !important; <- Temporarily disabled: Checking background issue */
}

/* Forced override for Shiki elements with style attributes - Maximum priority */
.shiki[style*="color"],
.shiki code[style*="color"],
.shiki span[style*="color"],
pre.shiki[style*="color"],
pre.shiki code[style*="color"],
pre.shiki span[style*="color"],
.gfmr-code-container .shiki[style*="color"],
.gfmr-code-container .shiki code[style*="color"],
.gfmr-code-container .shiki span[style*="color"],
.gfmr-markdown-container .shiki[style*="color"],
.gfmr-markdown-container .shiki code[style*="color"],
.gfmr-markdown-container .shiki span[style*="color"],
.gfmr-markdown-rendered .shiki[style*="color"],
.gfmr-markdown-rendered .shiki code[style*="color"],
.gfmr-markdown-rendered .shiki span[style*="color"] {

	/*
	 * Important: Protect Shiki inline color specifications (style="color: #xxx") with maximum priority
	 * Empty rule to prioritize inline styles over WordPress theme CSS specificity
	 * This ensures Shiki-generated inline colors are reliably displayed
	 */
}

/* Disable general WordPress theme code styles for Shiki */

/* Target only non-Shiki code blocks to protect Shiki colors */
pre code:not(.shiki):not(.shiki *),
.entry-content pre code:not(.shiki):not(.shiki *),
.post-content pre code:not(.shiki):not(.shiki *),
.content pre code:not(.shiki):not(.shiki *),
article pre code:not(.shiki):not(.shiki *),
.wp-block-code code:not(.shiki):not(.shiki *),
.wp-block-html pre code:not(.shiki):not(.shiki *) {

	/* Disable color overrides only within non-Shiki containers */
	color: inherit !important;
}

/* Prevent WordPress theme Shiki color overrides with high specificity */
.gfmr-markdown-rendered .shiki,
.gfmr-markdown-rendered .shiki code,
.gfmr-markdown-rendered .shiki span,
.entry-content .gfmr-markdown-rendered .shiki,
.entry-content .gfmr-markdown-rendered .shiki code,
.entry-content .gfmr-markdown-rendered .shiki span,
.post-content .gfmr-markdown-rendered .shiki,
.post-content .gfmr-markdown-rendered .shiki code,
.post-content .gfmr-markdown-rendered .shiki span,
.content .gfmr-markdown-rendered .shiki,
.content .gfmr-markdown-rendered .shiki code,
.content .gfmr-markdown-rendered .shiki span,
article .gfmr-markdown-rendered .shiki,
article .gfmr-markdown-rendered .shiki code,
article .gfmr-markdown-rendered .shiki span {

	/*
	 * Important: Using specificity higher than general WordPress theme selectors
	 * to reliably protect Shiki inline color specifications
	 * Empty rule maximizes inline style priority
	 */
}

/* Protect inline colors for all elements within Shiki containers */
.shiki *,
pre.shiki *,
.gfmr-code-container .shiki *,
.gfmr-markdown-container .shiki *,
.gfmr-markdown-rendered .shiki * {

	/*
	 * Important: Reliably protect Shiki inline color specifications
	 * Prevent WordPress themes from forcibly applying color: inherit
	 * Empty rule ensures inline style priority
	 */
}

/* Protect Shiki colors in pseudo-elements as well */
.shiki::before,
.shiki::after,
.shiki code::before,
.shiki code::after,
.shiki span::before,
.shiki span::after,
pre.shiki::before,
pre.shiki::after,
pre.shiki code::before,
pre.shiki code::after,
pre.shiki span::before,
pre.shiki span::after {

	/*
	 * Protect Shiki inline colors in pseudo-elements as well
	 * Prevent theme color interference with pseudo-elements
	 */
}

/* ==========================================================================
   Tooltip Support (Optional Enhancement)
   ========================================================================== */

.gfmr-copy-button[title]::after {
	content: attr(title);
	position: absolute;
	bottom: 100%;
	left: 50%;
	transform: translateX(-50%);
	margin-bottom: 8px;

	/* Tooltip styling */
	padding: 4px 8px;
	background: var(--gfmr-tooltip-bg, #1c1c1c);
	color: var(--gfmr-tooltip-text, #fff);
	font-size: 11px;
	border-radius: 4px;
	white-space: nowrap;

	/* Animation */
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease;
	z-index: 30;
}

.gfmr-copy-button:hover[title]::after {
	opacity: 1;
}

/* Arrow for tooltip */
.gfmr-copy-button[title]::before {
	content: "";
	position: absolute;
	bottom: 100%;
	left: 50%;
	transform: translateX(-50%);
	margin-bottom: 2px;

	border: 4px solid transparent;
	border-top-color: var(--gfmr-tooltip-bg, #1c1c1c);

	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease;
	z-index: 30;
}

.gfmr-copy-button:hover[title]::before {
	opacity: 1;
}

/* ==========================================================================
   Light Theme Copy Button Support
   ========================================================================== */

/* Shiki Light Theme Copy Button Styles - Visual consistency with Mermaid buttons */
.shiki.github-light .gfmr-copy-button,
.github-light .gfmr-copy-button,
pre.shiki.github-light .gfmr-copy-button,
pre.github-light .gfmr-copy-button,
.gfmr-code-container .shiki.github-light .gfmr-copy-button,
.gfmr-markdown-container .shiki.github-light .gfmr-copy-button,
.gfmr-markdown-rendered .shiki.github-light .gfmr-copy-button {

	/* Light theme background and border - consistent with Mermaid */
	background: #fff !important;
	border: 2px solid #d1d5db !important;
	color: #374151 !important;

	/* Enhanced shadow for light theme visibility */
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06) !important;

	/* Consistent backdrop filter */
	backdrop-filter: blur(4px) !important;
	-webkit-backdrop-filter: blur(4px) !important;

	/* Ensure full opacity for visibility */
	opacity: 1 !important;
}

/* Light theme hover state */
.shiki.github-light .gfmr-copy-button:hover,
.github-light .gfmr-copy-button:hover,
pre.shiki.github-light .gfmr-copy-button:hover,
pre.github-light .gfmr-copy-button:hover,
.gfmr-code-container .shiki.github-light .gfmr-copy-button:hover,
.gfmr-markdown-container .shiki.github-light .gfmr-copy-button:hover,
.gfmr-markdown-rendered .shiki.github-light .gfmr-copy-button:hover {

	/* Light hover colors - consistent with Mermaid */
	background: #f9fafb !important;
	border-color: #9ca3af !important;
	color: #111827 !important;

	/* Enhanced hover effect */
	transform: scale(1.05) translateY(-1px) !important;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

/* Light theme active state */
.shiki.github-light .gfmr-copy-button:active,
.github-light .gfmr-copy-button:active,
pre.shiki.github-light .gfmr-copy-button:active,
pre.github-light .gfmr-copy-button:active,
.gfmr-code-container .shiki.github-light .gfmr-copy-button:active,
.gfmr-markdown-container .shiki.github-light .gfmr-copy-button:active,
.gfmr-markdown-rendered .shiki.github-light .gfmr-copy-button:active {

	transform: scale(1.02) translateY(0) !important;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12) !important;
}

/* Light theme focus state */
.shiki.github-light .gfmr-copy-button:focus-visible,
.github-light .gfmr-copy-button:focus-visible,
pre.shiki.github-light .gfmr-copy-button:focus-visible,
pre.github-light .gfmr-copy-button:focus-visible,
.gfmr-code-container .shiki.github-light .gfmr-copy-button:focus-visible,
.gfmr-markdown-container .shiki.github-light .gfmr-copy-button:focus-visible,
.gfmr-markdown-rendered .shiki.github-light .gfmr-copy-button:focus-visible {

	/* Light theme focus outline */
	outline: 2px solid #3b82f6 !important;
	outline-offset: 2px;
}

/* Light theme success state */
.shiki.github-light .gfmr-copy-button--success,
.github-light .gfmr-copy-button--success,
pre.shiki.github-light .gfmr-copy-button--success,
pre.github-light .gfmr-copy-button--success,
.gfmr-code-container .shiki.github-light .gfmr-copy-button--success,
.gfmr-markdown-container .shiki.github-light .gfmr-copy-button--success,
.gfmr-markdown-rendered .shiki.github-light .gfmr-copy-button--success,
.shiki.github-light .gfmr-copy-button.gfmr-copy-button--success,
.github-light .gfmr-copy-button.gfmr-copy-button--success {

	/* Light theme success colors */
	background: #dcfce7 !important;
	border-color: #22c55e !important;
	color: #15803d !important;

	/* Enhanced success visibility */
	box-shadow: 0 2px 4px rgba(34, 197, 94, 0.2), 0 1px 2px rgba(34, 197, 94, 0.1) !important;
}

/* Light theme error state */
.shiki.github-light .gfmr-copy-button--error,
.github-light .gfmr-copy-button--error,
pre.shiki.github-light .gfmr-copy-button--error,
pre.github-light .gfmr-copy-button--error,
.gfmr-code-container .shiki.github-light .gfmr-copy-button--error,
.gfmr-markdown-container .shiki.github-light .gfmr-copy-button--error,
.gfmr-markdown-rendered .shiki.github-light .gfmr-copy-button--error,
.shiki.github-light .gfmr-copy-button.gfmr-copy-button--error,
.github-light .gfmr-copy-button.gfmr-copy-button--error {

	/* Light theme error colors */
	background: #fef2f2 !important;
	border-color: #ef4444 !important;
	color: #dc2626 !important;

	/* Enhanced error visibility */
	box-shadow: 0 2px 4px rgba(239, 68, 68, 0.2), 0 1px 2px rgba(239, 68, 68, 0.1) !important;
}

/* Light theme copied class compatibility (legacy support) */
.shiki.github-light .gfmr-copy-button.copied,
.github-light .gfmr-copy-button.copied,
pre.shiki.github-light .gfmr-copy-button.copied,
pre.github-light .gfmr-copy-button.copied,
.gfmr-code-container .shiki.github-light .gfmr-copy-button.copied,
.gfmr-markdown-container .shiki.github-light .gfmr-copy-button.copied,
.gfmr-markdown-rendered .shiki.github-light .gfmr-copy-button.copied {

	/* Light theme success colors for legacy 'copied' class */
	background: #dcfce7 !important;
	border-color: #22c55e !important;
	color: #15803d !important;
	box-shadow: 0 2px 4px rgba(34, 197, 94, 0.2), 0 1px 2px rgba(34, 197, 94, 0.1) !important;
}

/* ==========================================================================
   Dark Theme Copy Button Support
   ========================================================================== */

/* Shiki Dark Theme Copy Button Styles - Enhanced visibility with white text */
.shiki.github-dark .gfmr-copy-button,
.github-dark .gfmr-copy-button,
pre.shiki.github-dark .gfmr-copy-button,
pre.github-dark .gfmr-copy-button,
.gfmr-code-container .shiki.github-dark .gfmr-copy-button,
.gfmr-markdown-container .shiki.github-dark .gfmr-copy-button,
.gfmr-markdown-rendered .shiki.github-dark .gfmr-copy-button {

	/* Dark theme text - pure white for maximum visibility */
	color: #fff !important;

	/* Maintain existing background and border for consistency */
	background: rgba(240, 246, 252, 0.15) !important;
	border: 1px solid rgba(240, 246, 252, 0.3) !important;

	/* Enhanced visibility with slightly increased opacity */
	opacity: 0.95 !important;
}

/* Dark theme hover state */
.shiki.github-dark .gfmr-copy-button:hover,
.github-dark .gfmr-copy-button:hover,
pre.shiki.github-dark .gfmr-copy-button:hover,
pre.github-dark .gfmr-copy-button:hover,
.gfmr-code-container .shiki.github-dark .gfmr-copy-button:hover,
.gfmr-markdown-container .shiki.github-dark .gfmr-copy-button:hover,
.gfmr-markdown-rendered .shiki.github-dark .gfmr-copy-button:hover {

	/* Enhanced white text on hover */
	color: #fff !important;
	background: rgba(240, 246, 252, 0.2) !important;
	border-color: rgba(240, 246, 252, 0.4) !important;

	/* Full opacity on hover for maximum visibility */
	opacity: 1 !important;
}

/* Dark theme active state */
.shiki.github-dark .gfmr-copy-button:active,
.github-dark .gfmr-copy-button:active,
pre.shiki.github-dark .gfmr-copy-button:active,
pre.github-dark .gfmr-copy-button:active,
.gfmr-code-container .shiki.github-dark .gfmr-copy-button:active,
.gfmr-markdown-container .shiki.github-dark .gfmr-copy-button:active,
.gfmr-markdown-rendered .shiki.github-dark .gfmr-copy-button:active {

	/* Maintain white text during click */
	color: #fff !important;
}

/* Dark theme focus state */
.shiki.github-dark .gfmr-copy-button:focus-visible,
.github-dark .gfmr-copy-button:focus-visible,
pre.shiki.github-dark .gfmr-copy-button:focus-visible,
pre.github-dark .gfmr-copy-button:focus-visible,
.gfmr-code-container .shiki.github-dark .gfmr-copy-button:focus-visible,
.gfmr-markdown-container .shiki.github-dark .gfmr-copy-button:focus-visible,
.gfmr-markdown-rendered .shiki.github-dark .gfmr-copy-button:focus-visible {

	/* White text with blue focus outline for accessibility */
	color: #fff !important;
	outline: 2px solid #58a6ff !important;
	outline-offset: 2px !important;
}

/* Dark theme success state */
.shiki.github-dark .gfmr-copy-button--success,
.github-dark .gfmr-copy-button--success,
pre.shiki.github-dark .gfmr-copy-button--success,
pre.github-dark .gfmr-copy-button--success,
.gfmr-code-container .shiki.github-dark .gfmr-copy-button--success,
.gfmr-markdown-container .shiki.github-dark .gfmr-copy-button--success,
.gfmr-markdown-rendered .shiki.github-dark .gfmr-copy-button--success,
.shiki.github-dark .gfmr-copy-button.gfmr-copy-button--success,
.github-dark .gfmr-copy-button.gfmr-copy-button--success {

	/* Dark theme success colors - bright green for visibility */
	background: rgba(86, 211, 100, 0.2) !important;
	border-color: #56d364 !important;
	color: #56d364 !important;
}

/* Dark theme error state */
.shiki.github-dark .gfmr-copy-button--error,
.github-dark .gfmr-copy-button--error,
pre.shiki.github-dark .gfmr-copy-button--error,
pre.github-dark .gfmr-copy-button--error,
.gfmr-code-container .shiki.github-dark .gfmr-copy-button--error,
.gfmr-markdown-container .shiki.github-dark .gfmr-copy-button--error,
.gfmr-markdown-rendered .shiki.github-dark .gfmr-copy-button--error,
.shiki.github-dark .gfmr-copy-button.gfmr-copy-button--error,
.github-dark .gfmr-copy-button.gfmr-copy-button--error {

	/* Dark theme error colors - bright red for visibility */
	background: rgba(248, 81, 73, 0.2) !important;
	border-color: #f85149 !important;
	color: #f85149 !important;
}

/* Dark theme copied class compatibility (legacy support) */
.shiki.github-dark .gfmr-copy-button.copied,
.github-dark .gfmr-copy-button.copied,
pre.shiki.github-dark .gfmr-copy-button.copied,
pre.github-dark .gfmr-copy-button.copied,
.gfmr-code-container .shiki.github-dark .gfmr-copy-button.copied,
.gfmr-markdown-container .shiki.github-dark .gfmr-copy-button.copied,
.gfmr-markdown-rendered .shiki.github-dark .gfmr-copy-button.copied {

	/* Dark theme success colors for legacy 'copied' class */
	background: rgba(86, 211, 100, 0.2) !important;
	border-color: #56d364 !important;
	color: #56d364 !important;
}