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

/* Inline Code */
code {
    /* Typography */
    font-family: var(--font-family-monospace);
    font-size: 0.9em;
    /* 90% of parent */

    /* Visual */
    background: var(--color-gray-100);
    /* #F5F5F5 */
    color: var(--color-pontotel-purple);
    /* #79397D */

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

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

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

    /* Visual Accent */
    border-left: 4px solid var(--color-pontotel-yellow);
    /* Yellow accent */

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

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