/**
 * GitHub Markdown CSS (Light Mode)
 * Based on github-markdown-css by sindresorhus
 * Customized for CrispyTheme with IBM Plex fonts
 */

.markdown-body {
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    margin: 0;
    color: var(--wp--preset--color--foreground, #1e293b);
    background-color: transparent;
    font-family: var(--wp--preset--font-family--body, 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
    font-size: 16px;
    line-height: 1.6;
    word-wrap: break-word;
}

.markdown-body a {
    color: var(--wp--preset--color--primary, #2563eb);
    text-decoration: none;
}

.markdown-body a:hover {
    text-decoration: underline;
}

.markdown-body strong {
    font-weight: 600;
}

.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4,
.markdown-body h5,
.markdown-body h6 {
    margin-top: 1.5em;
    margin-bottom: 0.5em;
    font-family: var(--wp--preset--font-family--heading, 'IBM Plex Serif', Georgia, serif);
    font-weight: 600;
    line-height: 1.25;
    color: var(--wp--preset--color--foreground, #1e293b);
}

.markdown-body h1 {
    font-size: 2em;
    padding-bottom: 0.3em;
    border-bottom: 1px solid var(--wp--preset--color--border, #e2e8f0);
}

.markdown-body h2 {
    font-size: 1.5em;
    padding-bottom: 0.3em;
    border-bottom: 1px solid var(--wp--preset--color--border, #e2e8f0);
}

.markdown-body h3 {
    font-size: 1.25em;
}

.markdown-body h4 {
    font-size: 1em;
}

.markdown-body h5 {
    font-size: 0.875em;
}

.markdown-body h6 {
    font-size: 0.85em;
    color: var(--wp--preset--color--foreground-secondary, #475569);
}

.markdown-body p {
    margin-top: 0;
    margin-bottom: 1em;
}

.markdown-body blockquote {
    margin: 0;
    padding: 0 1em;
    color: var(--wp--preset--color--foreground-secondary, #475569);
    border-left: 0.25em solid var(--wp--preset--color--primary, #2563eb);
}

.markdown-body blockquote > :first-child {
    margin-top: 0;
}

.markdown-body blockquote > :last-child {
    margin-bottom: 0;
}

.markdown-body ul,
.markdown-body ol {
    margin-top: 0;
    margin-bottom: 1em;
    padding-left: 2em;
}

.markdown-body ul ul,
.markdown-body ul ol,
.markdown-body ol ol,
.markdown-body ol ul {
    margin-top: 0;
    margin-bottom: 0;
}

.markdown-body li {
    margin-bottom: 0.25em;
}

.markdown-body li > p {
    margin-top: 1em;
}

.markdown-body li + li {
    margin-top: 0.25em;
}

.markdown-body hr {
    height: 0.25em;
    padding: 0;
    margin: 1.5em 0;
    background-color: var(--wp--preset--color--border, #e2e8f0);
    border: 0;
}

.markdown-body code {
    padding: 0.2em 0.4em;
    margin: 0;
    font-size: 85%;
    font-family: var(--wp--preset--font-family--monospace, 'IBM Plex Mono', Consolas, monospace);
    background-color: var(--wp--preset--color--background-secondary, #f8fafc);
    border-radius: 0.375rem;
}

.markdown-body pre {
    margin-top: 0;
    margin-bottom: 1em;
    padding: 1rem;
    overflow: auto;
    font-size: 85%;
    line-height: 1.45;
    background-color: var(--wp--preset--color--background-secondary, #f8fafc);
    border-radius: 0.375rem;
}

.markdown-body pre code {
    display: inline;
    padding: 0;
    margin: 0;
    overflow: visible;
    line-height: inherit;
    word-wrap: normal;
    background-color: transparent;
    border: 0;
    font-size: 100%;
}

.markdown-body table {
    display: block;
    width: 100%;
    overflow: auto;
    border-spacing: 0;
    border-collapse: collapse;
    margin-bottom: 1em;
}

.markdown-body table th {
    font-weight: 600;
}

.markdown-body table th,
.markdown-body table td {
    padding: 0.5em 1em;
    border: 1px solid var(--wp--preset--color--border, #e2e8f0);
}

.markdown-body table tr {
    background-color: var(--wp--preset--color--background, #ffffff);
    border-top: 1px solid var(--wp--preset--color--border, #e2e8f0);
}

.markdown-body table tr:nth-child(2n) {
    background-color: var(--wp--preset--color--background-secondary, #f8fafc);
}

.markdown-body img {
    max-width: 100%;
    height: auto;
    border-radius: 0.375rem;
}

.markdown-body kbd {
    display: inline-block;
    padding: 0.2em 0.4em;
    font-size: 85%;
    font-family: var(--wp--preset--font-family--monospace, 'IBM Plex Mono', Consolas, monospace);
    line-height: 1;
    color: var(--wp--preset--color--foreground, #1e293b);
    vertical-align: middle;
    background-color: var(--wp--preset--color--background-secondary, #f8fafc);
    border: 1px solid var(--wp--preset--color--border, #e2e8f0);
    border-radius: 0.25rem;
    box-shadow: inset 0 -1px 0 var(--wp--preset--color--border, #e2e8f0);
}

.markdown-body mark {
    background-color: #fff59d;
    padding: 0.1em 0.2em;
    border-radius: 0.125rem;
}

.markdown-body details {
    margin-bottom: 1em;
}

.markdown-body details summary {
    cursor: pointer;
    font-weight: 500;
}

.markdown-body details[open] summary {
    margin-bottom: 0.5em;
}

/* Footnotes (ParsedownExtra) */
.markdown-body .footnotes {
    margin-top: 2em;
    padding-top: 1em;
    border-top: 1px solid var(--wp--preset--color--border, #e2e8f0);
    font-size: 0.875em;
}

.markdown-body .footnotes ol {
    padding-left: 1.5em;
}

.markdown-body sup {
    font-size: 0.75em;
    line-height: 0;
}

/* Abbreviations (ParsedownExtra) */
.markdown-body abbr {
    cursor: help;
    text-decoration: underline dotted;
}

/* Definition lists (ParsedownExtra) */
.markdown-body dl {
    margin-bottom: 1em;
}

.markdown-body dt {
    font-weight: 600;
    margin-top: 1em;
}

.markdown-body dd {
    margin-left: 2em;
    margin-bottom: 0.5em;
}

/* ==========================================================================
   CTA Button Styling for Markdown Links
   Use: [Link text](url){.button} or {.button-outline}
   ParsedownExtra supports {.class} and {#id} syntax on links
   ========================================================================== */

.markdown-body a.button,
.markdown-body a.btn,
.markdown-body a.cta-button {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    background-color: var(--wp--preset--color--primary, #2563eb);
    color: #ffffff !important;
    text-decoration: none;
    border-radius: 0.375rem;
    font-weight: 500;
    transition: background-color 0.2s ease;
}

.markdown-body a.button:hover,
.markdown-body a.btn:hover,
.markdown-body a.cta-button:hover {
    background-color: var(--wp--preset--color--primary-dark, #1d4ed8);
    text-decoration: none;
    color: #ffffff !important;
}

/* Secondary/outline button variant */
.markdown-body a.button-outline,
.markdown-body a.btn-outline {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    background-color: transparent;
    color: var(--wp--preset--color--primary, #2563eb) !important;
    border: 2px solid var(--wp--preset--color--primary, #2563eb);
    text-decoration: none;
    border-radius: 0.375rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

.markdown-body a.button-outline:hover,
.markdown-body a.btn-outline:hover {
    background-color: var(--wp--preset--color--primary, #2563eb);
    color: #ffffff !important;
    text-decoration: none;
}