/* ==== Post Page ==== */
.post__header {
     margin-bottom: 1rem;
     text-align: left;
}

.post__title {
     font-family: var(--font-outfit);
     font-size: clamp(2rem, 4vw, 3rem);
     margin: .25rem 0;
}

.post__metas {
     display: flex;
     align-items: center;
     flex-wrap: wrap;
     /* wraps nicely on small screens */
     color: var(--color-card-desc);
     gap: .25rem .75rem;
     /* we’ll create our own separator */
}

.post__meta {
     display: inline-flex;
     align-items: center;
     margin: 0;
     /* override your previous top margin */
     color: inherit;
     font-size: .95rem;
     white-space: nowrap;
}

/* Add a dot between items, but not before the first */
.post__meta+.post__meta::before {
     content: "•";
     opacity: .6;
     margin: 0 .6rem;
}

.post__tags {
     display: inline-flex;
     gap: .5rem;
     flex-wrap: wrap;
     margin-inline-start: auto;
     max-width: 55%;
}

@media (max-width: 48rem) {
     .post__metas {
          gap: .25rem .5rem;
     }

     /* put tags on their own line */
     .post__tags {
          flex-basis: 100%;
          margin: .4rem 0 0;
          margin-inline-start: 0;
          /* align left */
          max-width: 100%;
     }

     /* tighten the dot spacing */
     .post__meta+.post__meta::before {
          margin: 0 .4rem;
     }
}

.post__cover__container {
     display: flex;
     justify-content: center;
}

.post__cover {
     max-width: 45rem;
     height: auto;
     border-radius: 12px;
     margin: 1rem 0 1.25rem;
}

.post__content img {
     max-width: 100%;
     height: auto;
     border-radius: 8px;
}

.post__content p {
     margin: 1rem 0;
}


/* Back to home page button */

.back-link {
     display: inline-block;
     margin: .25rem 0 .5rem;
     background: #fff;
}

@media (prefers-color-scheme: dark) {
     .back-link {
          background: #1b0b2c;
          border-color: #ffffff80;
     }
}

#scroll-indicator {
     position: fixed;
     top: 0;
     left: 0;
     height: 4px;
     right: 0;
     background: var(--progress-color);
     transform-origin: 0 50%;
     transform: scaleX(0);
     z-index: 9999;
}

[id] {
     scroll-margin-top: 5.5rem;
     /* adjust if you have a fixed header */
}

/* assets/css/markdown.css */

.post__content p {
     margin: 1em 0;
}

.post__content a {
     color: var(--color-accent);
     text-decoration: none;
     text-decoration-thickness: .08em;
     text-underline-offset: .15em;
}

.post__content a:hover {

     opacity: .9;
}

/* Headings */
.post__content h1,
.post__content h2,
.post__content h3,
.post__content h4,
.post__content h5,
.post__content h6 {
     line-height: 1.25;
     margin: 1.6em 0 .6em;
     font-weight: 700;
}

.post__content h1 {
     font-size: clamp(2rem, 3vw + 1rem, 2.75rem);
}

.post__content h2 {
     font-size: clamp(1.75rem, 2.5vw + 1rem, 2.25rem);
}

.post__content h3 {
     font-size: clamp(1.4rem, 1.6vw + 1rem, 1.6rem);
}

.post__content h4 {
     font-size: 1.25rem;
}

.post__content h5 {
     font-size: 1.1rem;
}

.post__content h6 {
     font-size: 1rem;
     color: var(--color-text-light);
}

/* Horizontal rules */
.post__content hr {
     border: 0;
     border-top: 1px solid var(--color-divider);
     margin: 2rem 0;
}

/* Blockquote */
.post__content blockquote {
     border-left: 4px solid var(--color-accent);
     padding: .25rem 1rem;
     margin: 1.5rem 0;
     color: var(--color-text-light);
     background: color-mix(in srgb, var(--color-accent) 6%, transparent);
}

/* Lists */
.post__content ul,
.post__content ol {
     padding-left: 1.5rem;
     margin: .5rem 0;
}

.post__content li {
     margin: .35rem 0;
}

.post__content li::marker {
     color: var(--color-text-light);
}

/* Task lists */
.post__content input[type="checkbox"] {
     transform: translateY(2px) scale(1.05);
     accent-color: var(--color-accent);
}

/* Definition lists */
.post__content dl {
     margin: 1.25rem 0;
}

.post__content dt {
     font-weight: 600;
}

.post__content dd {
     margin: .25rem 0 1rem 1rem;
     color: var(--color-text-light);
}

/* Code: inline */
.post__content :not(pre)>code {
     background: var(--color-inline-code-bg);
     border: 1px solid color-mix(in srgb, var(--color-text-light) 50%, transparent);
     padding: .15em .4em;
     font-family: var(--font-mono);
     border-radius: .35rem;
     font-size: .92em;
}

/* Code: blocks (Rouge output) */
.post__content pre {
     background: var(--color-code-bg);
     border: 1px solid color-mix(in srgb, var(--color-code-border) 50%, transparent);
     border-radius: .6rem;
     box-shadow: var(--color-code-shadow);
     overflow: auto;
}

.post__content pre {
     padding: .9rem 1rem;
}

.post__content pre code {
     background: transparent;
     font-family: var(--font-mono);
     border: 0;
     padding: 0;
     font-size: .95em;
}

/* Tables */
.post__content table {
     border-collapse: separate;
     border-spacing: 0;
     border: 1px solid var(--color-border);
     border-radius: .6rem;
     overflow: hidden;
     /* responsive */
     overflow-x: auto;
}

.post__content thead th {
     background: color-mix(in srgb, var(--color-accent) 6%, transparent);
}

.post__content th,
.post__content td {
     padding: .6rem .8rem;
     border-bottom: 1px solid var(--color-border);
}

.post__content tr:last-child td {
     border-bottom: 0;
}

.post__content th {
     text-align: left;
}

/* Images & figures */
.post__content img {
     max-width: 100%;
     height: auto;
     border-radius: .5rem;
}

.post__content figure {
     margin: 1.25rem 0;
     text-align: center;
}

.post__content figcaption {
     font-size: .9rem;
     color: var(--color-text-light);
     margin-top: .4rem;
}

/* Details/Summary */
.post__content details {
     border: 1px solid var(--color-border);
     border-radius: .6rem;
     padding: .6rem .8rem;
     background: color-mix(in srgb, var(--color-accent) 4%, transparent);
     margin: 1rem 0;
}

.post__content summary {
     cursor: pointer;
     font-weight: 600;
}

.post__content details[open] {
     background: color-mix(in srgb, var(--color-accent) 7%, transparent);
}

/* Footnotes (kramdown emits #footnotes) */
.post__content sup[role="doc-noteref"] {
     font-size: .75em;
}

.post__content #footnotes {
     margin-top: 2rem;
     padding-top: 1rem;
     border-top: 1px dashed var(--color-border);
     color: var(--color-text-light);
}

.post__content #footnotes ol {
     padding-left: 1.25rem;
}

.post__content .footnote-backref {
     text-decoration: none;
}

/* Captions after tables/images (paragraph right after) */
.post__content table+p,
.post__content img+p,
.post__content figure+p {
     font-size: .95rem;
     color: var(--color-text-light);
     margin-top: .35rem;
}

/* Utility: callouts (optional, if you add > [!NOTE] style blocks later) */
.post__content .callout {
     padding: .6rem .8rem;
     border-radius: .3rem;
}

.post__content .callout_info {
     border-left: 4px solid var(--color-info);
     background: color-mix(in srgb, var(--color-info) 15%, transparent);
}

.post__content .callout_okay {
     border-left: 4px solid var(--color-success);
     background: color-mix(in srgb, var(--color-success) 15%, transparent);
}

.post__content .callout_warn {
     border-left: 4px solid var(--color-warn);
     background: color-mix(in srgb, var(--color-warn) 15%, transparent);
}

.post__content .callout_error {
     border-left: 4px solid var(--color-error);
     background: color-mix(in srgb, var(--color-error) 15%, transparent);
}

@media (width < 40rem) {

     .post__cover {
          max-width: 95%;
     }

     .post__content h1 {
          font-size: clamp(1.6rem, 3vw + 1rem, 2.75rem);
     }

     .post__content h2 {
          font-size: clamp(1.45rem, 2.5vw + 1rem, 2.25rem);
     }

     .post__content h3 {
          font-size: clamp(1.35rem, 1.6vw + 1rem, 1.6rem);
     }

     .post__content h4 {
          font-size: 1.25rem;
     }

     .post__content h5 {
          font-size: 1rem;
     }

     .post__content h6 {
          font-size: .95rem;
     }

     .post__content p {
          font-size: .8rem;
     }

     .post__content li {
          font-size: .8rem;
     }

     .post__content pre code {
          font-size: .7rem;
     }

     .post__content :not(pre)>code {
          font-size: .7rem;
     }

     .post__content th {
          font-size: .85rem;
     }

     .post__content td {
          font-size: .75rem;
     }

     .post__content figcaption {
          font-size: .75rem;
     }

     /* Captions after tables/images (paragraph right after) */
     .post__content table+p,
     .post__content img+p,
     .post__content figure+p {
          font-size: .75rem;
     }

     .post__content details {
          font-size: .9rem;
     }

     .post__content summary {
          font-size: .8rem;
     }

}

@media (width <=70rem) {
     .post__content h1 {
          font-size: clamp(1.6rem, 3vw + 1rem, 2.75rem);
     }

     .post__content h2 {
          font-size: clamp(1.45rem, 2.5vw + 1rem, 2.25rem);
     }

     .post__content h3 {
          font-size: clamp(1.35rem, 1.6vw + 1rem, 1.6rem);
     }

     .post__content h4 {
          font-size: 1.25rem;
     }

     .post__content h5 {
          font-size: 1rem;
     }

     .post__content h6 {
          font-size: .95rem;
     }

     .post__content p {
          font-size: .8rem;
     }

     .post__content li {
          font-size: .8rem;
     }

     .post__content pre code {
          font-size: .7rem;
     }

     .post__content :not(pre)>code {
          font-size: .7rem;
     }

     .post__content th {
          font-size: .85rem;
     }

     .post__content td {
          font-size: .75rem;
     }

     .post__content figcaption {
          font-size: .75rem;
     }

     /* Captions after tables/images (paragraph right after) */
     .post__content table+p,
     .post__content img+p,
     .post__content figure+p {
          font-size: .75rem;
     }

     .post__content details {
          font-size: .9rem;
     }

     .post__content summary {
          font-size: .8rem;
     }

}