/* Post rendering. Loaded by index.html and by the editor so the preview and
   the live site cannot drift apart. Self-contained on purpose: it resets its
   own margins instead of depending on the host page's reset. */

/* Sits below the Tasky banner, so it needs breathing room above as well. */
.roll {
    max-width: 42rem;
    margin: 3.5rem auto;
    padding: 0 1rem;
}

.post + .post {
    border-top: 0.5px solid #d3d3d3;
    margin-top: 2.5rem;
    padding-top: 2.5rem;
}

.post::after { content: ""; display: block; clear: both; }

.post-title {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.25;
    margin: 0 0 0.75rem;
}

.post-title a { color: inherit; text-decoration: none; }
.post-title a:hover { text-decoration: underline; }

/* Archive pages list posts as title plus excerpt, not full bodies */
.post-excerpt {
    font-size: 1rem;
    line-height: 1.6;
    color: #444444;
    margin: 0;
}

.post-body {
    font-size: 1.0625rem;
    line-height: 1.7;
    color: #000000;
}

.post-body h1, .post-body h2, .post-body h3,
.post-body p, .post-body ul, .post-body ol,
.post-body blockquote, .post-body figure, .post-body div {
    margin: 0;
    padding: 0;
}

.post-body > * + * { margin-top: 1rem; }

.post-body h1 { font-size: 1.6rem; }
.post-body h2 { font-size: 1.35rem; }
.post-body h3 { font-size: 1.15rem; }
.post-body h1, .post-body h2, .post-body h3 {
    font-weight: 700;
    line-height: 1.3;
}
.post-body > h1 + *, .post-body > h2 + *, .post-body > h3 + * { margin-top: 0.5rem; }
.post-body > * + h1, .post-body > * + h2, .post-body > * + h3 { margin-top: 1.75rem; }

.post-body ul, .post-body ol { padding-left: 1.5rem; }
.post-body li + li { margin-top: 0.35rem; }

.post-body blockquote {
    border-left: 3px solid #d3d3d3;
    padding-left: 1rem;
    color: #555555;
}

.post-body .indent { margin-left: 2rem; }

.post-body a { color: #0d9488; }

.post-body code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.9em;
    background: #f4f4f4;
    padding: 0.1em 0.35em;
    border-radius: 3px;
}

/* Categories and tags. Clicking one filters the roll. */
.post-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 1.25rem;
}

.chip {
    display: inline-block;
    font-family: inherit;
    font-size: 0.8rem;
    line-height: 1;
    padding: 0.4rem 0.65rem;
    border: 1px solid #d3d3d3;
    border-radius: 999px;
    background: #ffffff;
    color: #555555;
    text-decoration: none;
    cursor: pointer;
}

.chip:hover { border-color: #0d9488; color: #0d9488; }

.chip-cat {
    background: #f4f4f4;
    color: #000000;
    font-weight: 600;
}

/* Image size and alignment, emitted by the editor's image panel */
.post-body img {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
}
.post-body img.size-small   { width: 33%; }
.post-body img.size-medium  { width: 66%; }
.post-body img.size-large   { width: 100%; }
.post-body img.align-left   { float: left;  margin: 0.35rem 1.25rem 1rem 0; }
.post-body img.align-right  { float: right; margin: 0.35rem 0 1rem 1.25rem; }
.post-body img.align-center { margin-left: auto; margin-right: auto; }

@media (max-width: 600px) {
    .post-body img.size-small,
    .post-body img.size-medium { width: 100%; }
    .post-body img.align-left,
    .post-body img.align-right { float: none; margin: 1rem 0; }
}