/* Prose */

@font-face {
    font-family: 'Roboto Mono';
    src: url('../fonts/RobotoMono-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

.prose {
    font-size: 16px;
}

.prose h1,
.prose h2,
.prose h3,
.prose h4,
.prose h5,
.prose h6 {
    font-weight: 500;
}

.prose h1 a,
.prose h2 a,
.prose h3 a,
.prose h4 a,
.prose h5 a,
.prose h6 a,
.prose p a,
.prose li a,
.prose span a,
.prose td a,
.prose th a,
.prose blockquote a,
.widget h1 a,
.widget h2 a,
.widget h3 a,
.widget h4 a,
.widget h5 a,
.widget h6 a,
.widget p a,
.widget li a,
.widget span a,
.widget td a,
.widget th a,
.widget blockquote a {
    text-decoration: underline;
    color: var(--color-primary);
}

.prose p a,
.prose li a {
    color: var(--color-primary);
    text-decoration: underline;
    font-weight: 600;
}

.prose a {
    text-underline-offset: 4px;
}

.prose h1 {
    font-size: 2.25em;
    margin-top: 0;
    margin-bottom: 0.8888889em;
    line-height: 1.1111111;
    font-family: var(--font-secondary, "Roboto Serif"), Georgia, "Times New Roman", Times, serif;
}

.prose h2 {
    font-size: 1.5em;
    margin-top: 1.5em;
    margin-bottom: 1em;
    line-height: 1.3333333;
    font-family: var(--font-secondary, "Roboto Serif"), Georgia, "Times New Roman", Times, serif;
}

.prose h3 {
    font-size: 1.25em;
    margin-top: 1.25em;
    margin-bottom: 0.6em;
    line-height: 1.6;
    font-family: var(--font-secondary, "Roboto Serif"), Georgia, "Times New Roman", Times, serif;
}

.prose h4 {
    font-size: 1.1em;
    margin-top: 1.25em;
    margin-bottom: 0.5em;
    line-height: 1.5;
}

.prose h5 {
    font-size: 1em;
    margin-top: 1.25em;
    margin-bottom: 0.4em;
    line-height: 1.4;
}

.prose h6 {
    font-size: 0.9em;
    margin-top: 1.25em;
    margin-bottom: 0.25em;
    line-height: 1.3;
}

.prose p {
    margin-top: 1.25em;
    margin-bottom: 1.25em;
}

.prose video {
    margin-top: 2em;
    margin-bottom: 2em;
}

.prose figure {
    margin-top: 2em;
    margin-bottom: 2em;
    max-width: 100%;
}

.prose figure>*:first-child {
    margin-top: 0;
    margin-bottom: 0;
}

.prose figcaption {
    font-size: 0.875em;
    line-height: 1.4285714;
    margin-top: 0.8571429em;
}

.prose img {
    cursor: zoom-in;
    border-radius: var(--radius-2xl);
    overflow: hidden;
}

.prose .skip-prose-colors a {
    color: inherit;
}

@media (max-width: 1024px) {

    .prose p a,
    .prose li a,
    .prose p code,
    .prose li code {
        word-break: break-all;
    }
}

.prose strong {
    font-weight: 600;
}

.prose ol {
    list-style-type: decimal;
    padding-left: 1.625em;
}

.prose code {
    overflow-x: auto;
    background-color: transparent;
    border-width: 0;
    border-radius: 0;
    padding: 0;
    font-weight: inherit;
    font-size: inherit;
    font-family: inherit;
    border: 0.05em solid var(--color-frost-300);
    padding: 0.1em 0.5em;
    font-weight: 600;
    font-size: 0.8em;
    margin-bottom: 0;
    background-color: var(--color-frost-100);
}

.prose .skip-prose-colors code {
    border-color: inherit;
    background-color: rgba(255, 255, 255, 0.25);
}

.prose h1 *,
.prose h2 *,
.prose h3 *,
.prose h4 *,
.prose h5 *,
.prose h6 * {
    font-weight: 500;
}

.prose code::before {
    content: "`";
}

.prose code::after {
    content: "`";
}

.prose a code {
    color: var(--color-frost-900);
}

.prose ol[type="A"] {
    list-style-type: upper-alpha;
}

.prose ol[type="a"] {
    list-style-type: lower-alpha;
}

.prose ol[type="I"] {
    list-style-type: upper-roman;
}

.prose ol[type="i"] {
    list-style-type: lower-roman;
}

.prose ol[type="1"] {
    list-style-type: decimal;
}

.prose ol ol {
    margin-top: 0.75em;
    margin-bottom: 0.75em;
}

.prose li {
    margin: 0.5em 0;
    padding-left: 0.375em;
}

.prose li p {
    margin-top: 0.75em;
    margin-bottom: 0.75em;
}

.prose li *:first-child {
    margin-top: 1.25em;
}

.prose li *:last-child {
    margin-bottom: 1.25em;
}

.prose ol>li::marker {
    font-weight: 400;
    color: #757575;
}

.prose ul {
    list-style-type: disc;
    padding-left: 1.625em;
}

.prose ul ul {
    margin-top: 0.75em;
    margin-bottom: 0.75em;
}

.prose ul li {
    margin: 0.5em 0;
    padding-left: 0.375em;
}

.prose ul li p {
    margin-top: 0.75em;
    margin-bottom: 0.75em;
}

.prose ul>li::marker {
    font-weight: 400;
    color: #757575;
    font-size: 1em;
}

.prose hr {
    border-top: 0.1em solid rgba(0, 0, 0, 0.05);
    margin-top: 3em;
    margin-bottom: 3em;
}

.prose pre {
    font-family: var(--font-mono, "Roboto Mono"), Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
    background-color: var(--color-frost-100);
    border: 0.1em solid var(--color-frost-300);
    color: var(--color-frost-900);
    overflow-x: auto;
    font-weight: 400;
    font-size: 0.875em;
    line-height: 1.7142857;
    margin-top: 1.7142857em;
    margin-bottom: 1.7142857em;
    padding: 0;
}

.prose pre code {
    overflow-x: auto;
    background-color: transparent;
    border-width: 0;
    padding: 0;
    font-weight: inherit;
    font-size: inherit;
    font-family: inherit;
    padding-top: 0.8571429em;
    padding-right: 1.1428571em;
    padding-bottom: 0.8571429em;
    padding-left: 1.1428571em;
}

.prose pre code::before {
    content: none;
}

.prose pre code::after {
    content: none;
}

/* Table */
.prose table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
    font-size: 0.875rem;
    background-color: var(--color-frost-0);
    border-color: var(--color-frost-300);
    color: var(--color-frost-1000);
}

.prose thead {
    background-color: var(--color-frost-100);
    border-bottom: 1px solid var(--color-frost-300);
}

.prose thead th {
    padding: 0.75rem 1.5rem;
    text-align: left;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-frost-1000);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--color-frost-300);
    border-color: var(--color-frost-300);
}

.prose thead th::first-child {}

.prose tbody {
    background-color: var(--color-frost-0);
    border-color: var(--color-frost-300);
}

.prose tbody tr {
    border-bottom: 1px solid var(--color-frost-300);
    border-color: var(--color-frost-300);
}

.prose tbody tr:last-child {
    border-bottom: none;
}

.prose tbody td {
    padding: 1rem 1.5rem;
    font-size: 0.875rem;
    border-color: var(--color-frost-300);
}

.prose tbody td:first-child {
    font-weight: 500;
}

/* Responsive wrapper */
.prose .table-container {
    overflow-x: auto;
    margin: 1rem 0;
}

/* Usage: Wrap table in <div class="table-container">...</div> */

/* Table — primary color accents for colorful + branded */
[data-color-style="colorful"] .prose thead,
[data-color-style="branded"] .prose thead {
    background-color: var(--color-primary-50);
    border-bottom-color: var(--color-primary-300);
}
[data-color-style="colorful"] .prose thead th,
[data-color-style="branded"] .prose thead th {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary-300);
    border-color: var(--color-primary-300);
}
[data-color-style="colorful"] .prose tbody tr,
[data-color-style="branded"] .prose tbody tr {
    border-bottom-color: var(--color-primary-200);
}

.prose dl {
    display: flex;
    flex-flow: row wrap;
    background-color: var(--color-frost-0);
    border: 1px solid var(--color-frost-300);
    padding: 1rem 0 0 0;
}

.prose dt {
    flex-basis: 20%;
    padding: 0 1rem 1rem 1rem;
    color: var(--color-dark);
    font-weight: 600;
}

.prose dd {
    flex-basis: 70%;
    flex-grow: 1;
    margin: 0;
    padding: 0 1rem 1rem 1rem;
}

.prose blockquote {
    background-color: var(--color-frost-0);
    border: 0.1em solid var(--color-frost-300);
    color: var(--color-frost-900);
    padding: 1.5rem;
}

.prose blockquote>*:first-child {
    margin: 0;
}

.prose .wp-block-embed__wrapper {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
}

.prose .wp-block-embed__wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.prose .wp-block-file {
    display: flex;
    align-items: center;
    padding: 1rem;
    background-color: var(--color-frost-100);
    border: 0.1em solid var(--color-frost-300);
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    background-color: var(--color-frost-0);
    font-weight: 600;
}

.prose .wp-block-file__button {
    display: inline-block;
    padding: 0.5rem 1rem;
    background-color: var(--color-frost-1000);
    color: var(--color-frost-0);
    border: none;
    text-decoration: none;
    font-weight: 600;
    margin-left: auto;
}

.prose iframe {
    max-width: 100%;
    border: 0;
    display: block;
}

.prose pre[class*="language-"] {
    border: 0.1em solid var(--color-frost-300);
}

.prose pre[class*="language-"] {
    color: #24292f;
    font-size: 1rem;
    font-weight: 500;
    text-shadow: none;
    font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
    direction: ltr;
    text-align: left;
    white-space: pre;
    word-spacing: normal;
    word-break: normal;
    line-height: 1.5;
    -moz-tab-size: 4;
    -o-tab-size: 4;
    tab-size: 4;
    -webkit-hyphens: none;
    -moz-hyphens: none;
    -ms-hyphens: none;
    hyphens: none;
}

.prose pre[class*="language-"]::selection,
.prose code[class*="language-"]::selection,
.prose pre[class*="language-"]::mozselection,
.prose code[class*="language-"]::mozselection {
    text-shadow: none;
    background: var(--color-frost-300);
}

@media print {

    .prose pre[class*="language-"],
    .prose code[class*="language-"] {
        text-shadow: none;
    }
}

.prose pre[class*="language-"] {
    padding: 1em;
    margin: .5em 0;
    overflow: auto;
    background: var(--color-frost-50);
}


/* Line highlighting */
.prose pre[data-line] {
    position: relative;
}

.prose pre[class*="language-"]>code[class*="language-"] {
    position: relative;
    z-index: 1;
}

.prose .line-highlight {
    position: absolute;
    left: 0;
    right: 0;
    padding: inherit 0;
    margin-top: 1em;
    background: #fff8c5;
    box-shadow: inset 5px 0 0 #eed888;
    z-index: 0;
    pointer-events: none;
    line-height: inherit;
    white-space: pre;
}

/* Highlight.js GitHub Light/Dark Theme Integration */
.prose pre code.hljs {
    display: block;
    overflow-x: auto;
    padding: 1em;
}

.prose code.hljs {
    padding: 3px 5px;
}

/* Light mode (default) */
.prose .hljs {
    color: #24292e;
    background: var(--color-frost-0);
}

.prose .hljs-doctag,
.prose .hljs-keyword,
.prose .hljs-meta .hljs-keyword,
.prose .hljs-template-tag,
.prose .hljs-template-variable,
.prose .hljs-type,
.prose .hljs-variable.language_ {
    color: #d73a49;
}

.prose .hljs-title,
.prose .hljs-title.class_,
.prose .hljs-title.class_.inherited__,
.prose .hljs-title.function_ {
    color: #6f42c1;
}

.prose .hljs-attr,
.prose .hljs-attribute,
.prose .hljs-literal,
.prose .hljs-meta,
.prose .hljs-number,
.prose .hljs-operator,
.prose .hljs-selector-attr,
.prose .hljs-selector-class,
.prose .hljs-selector-id,
.prose .hljs-variable {
    color: #005cc5;
}

.prose .hljs-meta .hljs-string,
.prose .hljs-regexp,
.prose .hljs-string {
    color: #032f62;
}

.prose .hljs-built_in,
.prose .hljs-symbol {
    color: #e36209;
}

.prose .hljs-code,
.prose .hljs-comment,
.prose .hljs-formula {
    color: #6a737d;
}

.prose .hljs-name,
.prose .hljs-quote,
.prose .hljs-selector-pseudo,
.prose .hljs-selector-tag {
    color: #22863a;
}

.prose .hljs-subst {
    color: #24292e;
}

.prose .hljs-section {
    color: #005cc5;
    font-weight: 700;
}

.prose .hljs-bullet {
    color: #735c0f;
}

.prose .hljs-emphasis {
    color: #24292e;
    font-style: italic;
}

.prose .hljs-strong {
    color: #24292e;
    font-weight: 700;
}

.prose .hljs-addition {
    color: #22863a;
    background-color: #f0fff4;
}

.prose .hljs-deletion {
    color: #b31d28;
    background-color: #ffeef0;
}

/* Dark mode */
[data-color-scheme="dark"] .prose .hljs {
    color: #c9d1d9;
    background: var(--color-frost-0);
}

[data-color-scheme="dark"] .prose .hljs-doctag,
[data-color-scheme="dark"] .prose .hljs-keyword,
[data-color-scheme="dark"] .prose .hljs-meta .hljs-keyword,
[data-color-scheme="dark"] .prose .hljs-template-tag,
[data-color-scheme="dark"] .prose .hljs-template-variable,
[data-color-scheme="dark"] .prose .hljs-type,
[data-color-scheme="dark"] .prose .hljs-variable.language_ {
    color: #ff7b72;
}

[data-color-scheme="dark"] .prose .hljs-title,
[data-color-scheme="dark"] .prose .hljs-title.class_,
[data-color-scheme="dark"] .prose .hljs-title.class_.inherited__,
[data-color-scheme="dark"] .prose .hljs-title.function_ {
    color: #d2a8ff;
}

[data-color-scheme="dark"] .prose .hljs-attr,
[data-color-scheme="dark"] .prose .hljs-attribute,
[data-color-scheme="dark"] .prose .hljs-literal,
[data-color-scheme="dark"] .prose .hljs-meta,
[data-color-scheme="dark"] .prose .hljs-number,
[data-color-scheme="dark"] .prose .hljs-operator,
[data-color-scheme="dark"] .prose .hljs-selector-attr,
[data-color-scheme="dark"] .prose .hljs-selector-class,
[data-color-scheme="dark"] .prose .hljs-selector-id,
[data-color-scheme="dark"] .prose .hljs-variable {
    color: #79c0ff;
}

[data-color-scheme="dark"] .prose .hljs-meta .hljs-string,
[data-color-scheme="dark"] .prose .hljs-regexp,
[data-color-scheme="dark"] .prose .hljs-string {
    color: #a5d6ff;
}

[data-color-scheme="dark"] .prose .hljs-built_in,
[data-color-scheme="dark"] .prose .hljs-symbol {
    color: #ffa657;
}

[data-color-scheme="dark"] .prose .hljs-code,
[data-color-scheme="dark"] .prose .hljs-comment,
[data-color-scheme="dark"] .prose .hljs-formula {
    color: #8b949e;
}

[data-color-scheme="dark"] .prose .hljs-name,
[data-color-scheme="dark"] .prose .hljs-quote,
[data-color-scheme="dark"] .prose .hljs-selector-pseudo,
[data-color-scheme="dark"] .prose .hljs-selector-tag {
    color: #7ee787;
}

[data-color-scheme="dark"] .prose .hljs-subst {
    color: #c9d1d9;
}

[data-color-scheme="dark"] .prose .hljs-section {
    color: #1f6feb;
    font-weight: 700;
}

[data-color-scheme="dark"] .prose .hljs-bullet {
    color: #f2cc60;
}

[data-color-scheme="dark"] .prose .hljs-emphasis {
    color: #c9d1d9;
    font-style: italic;
}

[data-color-scheme="dark"] .prose .hljs-strong {
    color: #c9d1d9;
    font-weight: 700;
}

[data-color-scheme="dark"] .prose .hljs-addition {
    color: #aff5b4;
    background-color: #033a16;
}

[data-color-scheme="dark"] .prose .hljs-deletion {
    color: #ffdcd7;
    background-color: #67060c;
}
