/* ==========================================================================
   PONTOTEL CODE BLOCKS
   ========================================================================== */

/* Inline Code */
code {
    /* Typography */
    font-family: var(--font-family-monospace);
    font-size: 0.875em;

    /* Visual */
    background: var(--color-gray-100);
    color: var(--color-purple-500);

    /* Spacing */
    padding: 0.2em 0.4em;

    /* Shape */
    border-radius: var(--border-radius-sm);
}

/* Code Block Container */
.highlight,
pre {
    /* Shape */
    border-radius: var(--border-radius-md);
    overflow: hidden;

    /* Visual */
    border: 1px solid var(--color-gray-200);

    /* Spacing */
    margin: var(--spacing-lg) 0;
}

.highlight pre,
pre {
    margin: 0;
    padding: var(--spacing-md);
    /* 16px */
    overflow-x: auto;
    font-family: var(--font-family-monospace);
    background-color: var(--color-gray-50);
}

/* Ensure inline code inside pre doesn't get double styling */
pre code {
    background: transparent;
    padding: 0;
    border-radius: 0;
    color: inherit;
}

/* Improve comment contrast in highlighted code blocks */
.highlight .c,
.highlight .c1,
.highlight .cm,
.highlight .cp,
.highlight .cs,
.highlight .sd,
.highlight .ow {
    color: var(--color-gray-700) !important;
}