/* Dynamic Screen size Adjustments */
@media screen and (min-width: 1200px) {
    .mw-page-container-inner {
        grid-template-columns: 15.5rem minmax(0, 1fr);
    }
}

@media screen and (min-width: 1100px) {
    .mw-page-container-inner {
        display: grid;
        column-gap: 24px;
        grid-template: min-content 1fr min-content / 20.25rem minmax(0, 1fr);
        grid-template-areas:
            "siteNotice siteNotice"
            "columnStart pageContent"
            "footer footer";
    }
}

@media screen and (max-width: 1100px) {
    .mw-page-container-inner {
        display: grid;
        column-gap: 24px;
        grid-template: min-content 1fr min-content / minmax(0, 1fr);
        grid-template-areas:
            "siteNotice"
            "pageContent"
            "footer";
    }
}

@media screen and (max-width: 1100px) {
    .vector-column-start {
        display: none;
    }
}

@media screen and (min-width: 1100px) {
    .vector-column-start,
    .vector-column-end {
        border-top: 1px solid transparent;
    }
}

@media screen and (min-width: 1100px) {
    .vector-column-start {
        grid-area: columnStart;
        overflow-anchor: none;
    }
}

@media screen and (min-width: 1100px) {
    .mw-content-container {
        grid-area: pageContent;
    }
}

/* Get variables from Config */
.notie-container {
    background-color: var(--blog-background-color);
}

.blog-content {
    font-size: var(--blog-font-size);
    font-family: var(--blog-font-family);
    color: var(--blog-text-color);
    overflow-x: hidden;
    /* Long unbreakable tokens (URLs, hashes) wrap instead of clipping
       under the overflow-x: hidden above. */
    overflow-wrap: anywhere;
}

/* Heading colors */
.blog-content h1,
.blog-content h2,
.blog-content h3,
.blog-content h4,
.blog-content h5,
.blog-content h6 {
    color: var(--blog-title-color);
}

/* link colors */
.blog-content a {
    text-decoration: var(--blog-link-underline);
}

.blog-content a {
    color: var(--blog-link-color);
}

.blog-content a:hover,
.blog-content a:focus {
    color: var(--blog-link-hover-color);
    text-decoration: underline;
}

/* Distinct keyboard focus indicators */
.blog-content a:focus-visible {
    outline: 2px solid var(--blog-link-color);
    outline-offset: 2px;
}

.blog-content summary:focus-visible {
    outline: 2px solid var(--blog-link-color);
    outline-offset: 2px;
}

/* inline code colors */
.blog-content code:not([class]):not(.code-blocks code) {
    padding: 0.2em 0.4em;
    margin: 0;
    font-size: 85%;
    white-space: break-spaces;
    background-color: var(--blog-code-background-color);
    border-radius: 6px;
    color: var(--blog-code-color);
}

/* Code Block header color */
/* Used in CodeHeader.tsx */
.code-header {
    background-color: var(--blog-code-header-color);
}

/* Code Block copy button hover color */
/* Used in CodeHeader.tsx */
.copy-button:hover {
    background-color: var(--blog-code-copy-button-hover-color) !important;
}

/* Collapse Section colors */
.blog-content details {
    background-color: var(--blog-collapse-section-color);
}

/* Table colors */
.blog-content table {
    /* Body cells read the theme background so tables look consistent even
       inside surfaces with their own background (e.g. collapse sections),
       in both light and dark appearances. */
    background-color: var(--blog-background-color);
}

.blog-content th {
    background-color: var(--blog-table-background-color);
}

/* Used in TikZ.tsx */
.tikz-drawing svg {
    -webkit-filter: var(--blog-tikz-style);
    filter: var(--blog-tikz-style);
}

/* Fallback shown when TikZ or Desmos assets fail to load. */
/* Used in TikZ.tsx and DesmosGraph.tsx */
.diagram-fallback {
    margin: 16px auto;
    padding: 10px;
    border: 1px dashed var(--blog-table-border-color);
    border-radius: 6px;
    color: var(--blog-caption-color);
    font-size: 0.9em;
}

.diagram-fallback pre {
    margin: 8px 0 0;
    padding: 8px;
    overflow-x: auto;
    background-color: var(--blog-code-background-color);
    color: var(--blog-code-color);
    border-radius: 6px;
}

.code-blocks {
    font-size: var(--blog-code-font-size);
}

.code-blocks :global(pre.shiki) {
    margin: 0;
    border-radius: 0 0 10px 10px;
    max-height: 80vh;
    overflow-y: auto;
    overflow-x: auto;
    padding: 1em;
    background-color: var(--blog-code-background-color) !important;
}

/* //////////////////////// */

/* Heading styles */
.blog-content h1 {
    font-size: 2.5em;
}

.blog-content h2 {
    font-size: 2.2em;
}

.blog-content h3 {
    font-size: 1.9em;
}

.blog-content h4 {
    font-size: 1.7em;
}

.blog-content h5 {
    font-size: 1.5em;
}

.blog-content h6 {
    font-size: 1.3em;
}

/* Table Styles */
.blog-content table {
    display: block;
    border-collapse: collapse;
    max-width: 100%;
    width: fit-content;
    margin: 16px auto;
    overflow-x: auto;
}

.blog-content th,
.blog-content td {
    border: 1px solid var(--blog-table-border-color);
    text-align: left;
    padding: 8px;
}

/* Image Styles */
.blog-content img {
    width: auto;
    max-height: 80vh;
    max-width: 100%;
    display: block;
    margin: 16px auto;
}

/* GFM task list styles (remark-gfm emits .task-list-item on the <li> and
   .contains-task-list on the list): drop the list marker so checkboxes do
   not get a double bullet, and align the checkbox with the text. */
.blog-content ul:global(.contains-task-list) {
    padding-left: 1em;
}

.blog-content li:global(.task-list-item) {
    list-style-type: none;
}

.blog-content li:global(.task-list-item) input[type="checkbox"] {
    margin-right: 0.4em;
    vertical-align: middle;
}

/* a tag styles for reference and katex */

.blog-content a[data-footnote-ref] {
    text-decoration: none;
}

.blog-content a[data-footnote-backref] {
    text-decoration: none;
}

/* GFM footnotes section */
.blog-content section[data-footnotes] {
    margin-top: 2em;
    border-top: 1px solid var(--blog-table-border-color);
    font-size: 0.9em;
    color: var(--blog-caption-color);
}

/* Collapse Section Styles */
.blog-content details {
    padding: 10px;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.1);
    margin: 16px auto;
}

.blog-content details[open] {
    padding-bottom: 0;
}

.blog-content summary {
    cursor: pointer;
}

.blog-content details[open] summary {
    margin-bottom: 10px;
}
