/* Simple Markdown Block Styling */

.markdown-block {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.markdown-block * {
    max-width: 100%;
    box-sizing: border-box;
}

/* Ensure full-width for all markdown content */
.markdown-block h1 {
    width: 100%;
    font-size: 2em;
    margin: 0.67em 0;
    line-height: 1.2;
    font-weight: bold;
}

.markdown-block h2 {
    width: 100%;
    font-size: 1.5em;
    margin: 0.75em 0;
    line-height: 1.2;
    font-weight: bold;
}

.markdown-block h3 {
    width: 100%;
    font-size: 1.17em;
    margin: 0.83em 0;
    line-height: 1.2;
    font-weight: bold;
}

.markdown-block h4 {
    width: 100%;
    font-size: 1em;
    margin: 1em 0;
    line-height: 1.2;
    font-weight: bold;
}

.markdown-block h5 {
    width: 100%;
    font-size: 0.83em;
    margin: 1.17em 0;
    line-height: 1.2;
    font-weight: bold;
}

.markdown-block h6 {
    width: 100%;
    font-size: 0.67em;
    margin: 1.33em 0;
    line-height: 1.2;
    font-weight: bold;
}

.markdown-block p {
    width: 100%;
    margin: 0 0 1em 0;
    line-height: 1.5;
    font-size: 1em;
}

.markdown-block ul,
.markdown-block ol {
    width: 100%;
    margin: 0 0 1em 0;
    padding-left: 1.5em;
    font-size: 1em;
}

.markdown-block li {
    margin: 0.25em 0;
    line-height: 1.5;
    font-size: 1em;
}

.markdown-block blockquote {
    width: 100%;
    margin: 1em 0;
    padding: 0.5em 1em;
    border-left: 4px solid #ddd;
    background-color: #f9f9f9;
    font-style: italic;
    font-size: 1em;
}

.markdown-block blockquote p {
    margin: 0;
    font-size: 1em;
}

.markdown-block pre {
    width: 100%;
    margin: 1em 0;
    padding: 1em !important;
    background-color: #f4f4f4 !important;
    border-radius: 4px;
    border: 1px solid #ddd;
    overflow-x: auto;
    font-family: Consolas, Monaco, 'Courier New', monospace !important;
    font-size: 1em !important;
    line-height: 1.02 !important;
    white-space: pre !important;
}

.markdown-block code {
    padding: 0.2em 0.4em;
    background-color: #f1f1f1;
    border-radius: 3px;
    font-family: Consolas, Monaco, 'Courier New', monospace;
    font-size: 0.85em;
}

/* Remove backgrounds from inline code inside code blocks */
.code-block-wrapper code,
.code-block-wrapper pre code,
.code-block-wrapper * {
    background: none !important;
    background-color: transparent !important;
}

.markdown-block pre code {
    padding: 0 !important;
    margin: 0 !important;
    background: none !important;
    font-size: 1em;
    line-height: 0.4 !important;
    white-space: pre !important;
    display: block;
}

.markdown-block a {
    color: #0073aa;
    text-decoration: underline;
}

.markdown-block a:hover {
    color: #005a87;
}

/* WordPress alignment classes override */
.wp-block-simple-markdown-markdown-block {
    width: 100% !important;
    max-width: 100% !important;
}

/* Ensure full width in editor */
.markdown-block-editor {
    width: 100%;
}

.markdown-block-editor textarea {
    width: 100% !important;
}

/* Additional code block fixes to override theme interference */
.markdown-block pre * {
    margin: 0 !important;
    padding: 0 !important;
    line-height: inherit !important;
}

.markdown-block pre {
    /* Reset any inherited paragraph styles */
    text-align: left !important;
}

.markdown-block pre code * {
    line-height: 1.02 !important;
}

/* Code block wrapper styling */
.code-block-wrapper {
    position: relative !important;
    margin: 1em 0;
    background-color: #f4f4f4 !important;
    border-radius: 4px;
    border: 1px solid #ddd;
    padding: 1em !important;
    overflow: visible;
}

.code-block-wrapper pre {
    background: none !important;
    border: none !important;
    border-radius: 0;
    padding: 0 !important;
    overflow-x: auto;
    font-family: Consolas, Monaco, 'Courier New', monospace !important;
    font-size: 1em !important;
    line-height: 1.02 !important;
    white-space: pre !important;
    margin: 0 !important;
}

.code-block-wrapper pre code {
    background: none !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 1em !important;
    line-height: 0.4 !important;
    white-space: pre !important;
    display: block;
    color: #333;
}

/* OPTIMAL SPACING - Line height 1.1 with 15px font size */
.code-block-wrapper pre code,
.code-block-wrapper pre code *,
.code-block-wrapper code,
div.code-block-wrapper pre code {
    line-height: 1.1 !important;
    background: none !important;
    font-size: 15px !important;
}

/* Force line-height and font-size on pre elements too */
.code-block-wrapper pre {
    line-height: 1.1 !important;
    font-size: 15px !important;
}

/* Copy button styling - positioned exactly like language tags */
.code-copy-btn {
    position: absolute;
    top: -8px;
    right: 12px;
    background: #f4f4f4;
    color: #333;
    border: 1px solid #ddd;
    border-bottom: none;
    border-radius: 3px 3px 0 0;
    padding: 2px 6px;
    font-size: 10px;
    cursor: pointer;
    opacity: 1;
    transition: background 0.3s ease;
    z-index: 10;
    line-height: 1;
    font-family: inherit;
}


.code-copy-btn:hover {
    background: #e9e9e9;
}

.code-copy-btn:active {
    transform: translateY(1px);
}

/* Language labels */
.code-block-wrapper.language-javascript::before,
.code-block-wrapper.language-js::before {
    content: "JavaScript";
    position: absolute;
    top: -8px;
    left: 12px;
    font-size: 10px;
    color: #333;
    background: #f4f4f4;
    padding: 2px 6px;
    border-radius: 3px 3px 0 0;
    border: 1px solid #ddd;
    border-bottom: none;
    z-index: 10;
}

.code-block-wrapper.language-php::before {
    content: "PHP";
    position: absolute;
    top: -8px;
    left: 12px;
    font-size: 10px;
    color: #333;
    background: #f4f4f4;
    padding: 2px 6px;
    border-radius: 3px 3px 0 0;
    border: 1px solid #ddd;
    border-bottom: none;
    z-index: 10;
}

.code-block-wrapper.language-bash::before {
    content: "Bash";
    position: absolute;
    top: -8px;
    left: 12px;
    font-size: 10px;
    color: #333;
    background: #f4f4f4;
    padding: 2px 6px;
    border-radius: 3px 3px 0 0;
    border: 1px solid #ddd;
    border-bottom: none;
    z-index: 10;
}

.code-block-wrapper.language-css::before {
    content: "CSS";
    position: absolute;
    top: -8px;
    left: 12px;
    font-size: 10px;
    color: #333;
    background: #f4f4f4;
    padding: 2px 6px;
    border-radius: 3px 3px 0 0;
    border: 1px solid #ddd;
    border-bottom: none;
    z-index: 10;
}

.code-block-wrapper.language-json::before {
    content: "JSON";
    position: absolute;
    top: -8px;
    left: 12px;
    font-size: 10px;
    color: #333;
    background: #f4f4f4;
    padding: 2px 6px;
    border-radius: 3px 3px 0 0;
    border: 1px solid #ddd;
    border-bottom: none;
    z-index: 10;
}