/* Markdown styles  */

.markdown {
    font-size: 1rem;
    line-height: 1.7;
    color: oklch(var(--lch-slate-20)/1);
}

.markdown.blog {
    font-size: 1rem;
    line-height: 1.875;
    @media (min-width: 768px) {
        font-size: 1.125rem;
    }
}

.markdown > h1,
.markdown > h2,
.markdown > h3 {
    position: relative;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -0.015em;
    color: oklch(var(--lch-slate)/1);
    text-wrap: pretty;
}

.markdown > h1 {
    font-size: 2rem;
    scroll-margin-top: 9.5rem;
}

.markdown > h2 {
    font-size: 1.5rem;
    scroll-margin-top: 6.875rem;
}

.markdown > h3 {
    font-size: 1.125rem;
    scroll-margin-top: 7.125rem;
}

.markdown > .intro {
    font-size: 1.125rem;
    color: oklch(var(--lch-slate-20)/1);
    text-wrap: balance;
}

.markdown > p {
    text-wrap: pretty;
}


/* Markdown elements */

.markdown > strong,
.markdown > p > strong {
    color: oklch(var(--lch-slate)/1);
    font-weight: 600;
}

.markdown > hr {
    margin: 3rem 0 2.5rem 0;
    border-top: 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 0.0625rem solid oklch(var(--lch-slate)/0.1);
}

.markdown > p > code {
    max-width: 100%;
    border-radius: 0.25rem;
    color: oklch(var(--lch-detail)/1);
    background-color: oklch(var(--lch-slate-60)/1);
    border: 1px solid oklch(var(--lch-slate)/0.1);
    font-size: 0.9375em;
    padding: 0.125em 0.3125em 0.25em 0.3125em;
}

.markdown > .md-code + pre,
.markdown > .md-viewer + pre {
    margin: 0 0 2rem 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

/* Markdown links */

.markdown > p > a,
.markdown > ul > li > a,
.markdown > ol > li > a,
.markdown > p > em > a,
.markdown .md-link > a {
    position: relative;
    z-index: 10;
    outline: none;
    color: oklch(var(--lch-blurple)/1);
    text-decoration: none;
    transition: opacity 200ms ease-out 0ms;
}

@media (hover: hover) {
    .markdown > p > a:hover,
    .markdown > ul > li > a:hover,
    .markdown > ol > li > a:hover,
    .markdown > p > em > a:hover,
    .markdown .md-link > a:hover { opacity: 0.8; }
}

.markdown > p > a:focus-visible,
.markdown > ul > li > a:focus-visible,
.markdown > ol > li > a:focus-visible,
.markdown > p > em > a:focus-visible,
.markdown .md-link > a:focus-visible {
    background-image: none;
    background-color: oklch(var(--lch-blurple)/1);
    color: white;
    border-radius: 0.25rem;
    box-shadow: var(--shadow-focus);
}


/* Markdown lists */

.markdown > ul,
.markdown > ol {
    padding-left: 1rem;
    font-size: 1em;
    line-height: 1.5;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    text-wrap: pretty;
}

.markdown > ul > li > ul,
.markdown > ol > li > ol,
.markdown > ul > li > ol,
.markdown > ol > li > ul {
    padding: 0.5rem 0 0.0625rem 0.875rem;
    font-size: 1em;
    line-height: 1.5;
    color: oklch(var(--lch-slate-20)/1);
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.markdown > ul,
.markdown > ul > li > ul,
.markdown > ol > li > ul {
    list-style-type: disc;
}

.markdown > ul > li > ul,
.markdown > ol > li > ul {
    list-style: circle;
}

.markdown > ol,
.markdown > ol > li > ol,
.markdown > ul > li > ol {
    list-style-type: decimal
}

.markdown > ul > li,
.markdown > ol > li {
    padding: 0 0 0 0.5rem;
}

.markdown > ol > li > ul > li,
.markdown > ol > li > ol > li {
    padding: 0 0 0 0.375rem;
}

.markdown > ul > li::marker {
    color: oklch(var(--lch-slate)/1);
}

.markdown > ol > li::marker {
    color: oklch(var(--lch-slate)/1);
}

.markdown > ol > li > ol > li::marker,
.markdown > ol > li > ul > li::marker,
.markdown > ul > li > ol > li::marker,
.markdown > ul > li > ul > li::marker  {
    color: oklch(var(--lch-slate)/1);
}

.markdown > ol > li > ul > li::marker,
.markdown > ul > li > ul > li::marker  {
    color: oklch(var(--lch-slate)/1);
}

.markdown > ol > li > strong,
.markdown > ul > li > strong {
    color: oklch(var(--lch-slate)/1);
}

.markdown > ol > li > ol > li > strong,
.markdown > ul > li > ul > li > strong {
    color: oklch(var(--lch-slate)/1);
}

/* Markdown blockquotes */

.markdown > blockquote {
    position: relative;
    font-style: italic;
    padding-left: 1.5rem;
    text-wrap: pretty;
    color: oklch(var(--lch-slate)/1);
    &:before {
        content: '';
        position: absolute;
        top: 0.375em;
        left: 0;
        height: calc(100% - 0.75em);
        width: 2px;
        background-color: oklch(var(--lch-blurple)/1);
    }
    @media (min-width: 768px) {
        padding-left: 1.75rem;
    }
}

/* Markdown images */
.markdown > p:has(picture) {
    position: relative;
    width: 100%;
}

.markdown > p > picture {
    position: relative;
    display: block;
    width: 100%;
    border-radius: 0.75rem;
    overflow: hidden;
}

/* Markdown spacing */

.markdown > h2 + h3,
.markdown > h1 + p,
.markdown > h2 + p,
.markdown > h3 + p,
.markdown > h1 + ul,
.markdown > h2 + ul,
.markdown > h3 + ul,
.markdown > h1 + ol,
.markdown > h2 + ol,
.markdown > h3 + ol { margin-top: 1rem; }
.markdown > .intro + hr { margin-top: 2.5rem; }
.markdown > p + h2,
.markdown > blockquote + p:has(picture),
.markdown > p:has(picture) + blockquote,
.markdown > ul + h2,
.markdown > ol + h2 { margin-top: 2.25rem; }
.markdown > blockquote + h2 { margin-top: 2.75rem; }
.markdown > pre + h1,
.markdown > pre + h2,
.markdown > pre + h3   { margin-top: 2rem; }
.markdown > p + h3,
.markdown > ul + h3,
.markdown > ol + h3,
.markdown > h1 + h2,
.markdown > blockquote + h3 { margin-top: 1.75rem; }
.markdown > p + .md-block   { margin-top: 1.5rem; }
.markdown > p + p,
.markdown > ul + p,
.markdown > ol + p,
.markdown > p:has(picture) + ol,
.markdown > p:has(picture) + ul,
.markdown > blockquote + p,
.markdown > p + blockquote  { margin-top: 1.25rem; }
.markdown > p + ul,
.markdown > p + ol          { margin-top: 0.75rem; }


/* Syntax highlighting */
code[class*="language-"],
pre[class*="language-"] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
    font-size: 0.9375rem;
    color: oklch(var(--lch-content)/1);
    background-color: transparent;
    text-align: left;
    white-space: pre;
    word-break: normal;
    word-spacing:normal;
    word-wrap: normal;
    -moz-tab-size: 4;
    -o-tab-size: 4;
    tab-size: 4;
    -webkit-hyphens: none;
    -moz-hyphens: none;
    -ms-hyphens: none;
    hyphens: none;
}

pre[class*="language-"] {
    padding: 0.875rem 1rem;
    margin: 1rem 0;
    overflow: auto;
    border-radius: 0.25rem;
}

:not(pre) > code[class*="language-"],
pre[class*="language-"] {
    border: 1px solid oklch(var(--lch-slate)/0.1);
    background-color: oklch(var(--lch-slate-60)/1);
}

:not(pre) > code[class*="language-"] {
    white-space: normal;
    padding: 0.1em;
    border-radius: 0.3em;
}

.token.comment,
.token.prolog,
.token.doctype,
.token.cdata { color: oklch(var(--lch-slate-30)/0.85); }

.namespace { opacity: 0.7; }

.token.property,
.token.tag,
.token.constant,
.token.symbol,
.token.deleted { color: oklch(var(--lch-blurple)/1); }

.token.boolean,
.token.number { color: oklch(var(--lch-blurple)/1); }

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted { color: oklch(var(--lch-blue)/1); }

.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string,
.token.variable { color: oklch(var(--lch-slate-30)/1); }

.token.atrule,
.token.attr-value,
.token.function,
.token.class-name { color: oklch(var(--lch-blurple)/1); }

.token.keyword { color: oklch(var(--lch-raspberry)/1); }

.token.regex,
.token.important { color: oklch(var(--lch-orange)/1); }

.token.tag > .token.attr-value > .token.punctuation { color: oklch(var(--lch-slate-20)/1); }

.token.bold { font-weight: 700; }
.token.italic { font-style: italic; }
.token.entity { cursor: help; }