/* theme.css — site-wide readability layer.
   Loaded LAST (after styles/blogstyles/puzzlestyles), so these rules win.
   Headings & buttons stay Almendra (site identity); body is a readable serif.
   Retune the whole site from the :root values below. */

@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&display=swap');

:root {
    --paper: #f6f5f2;   /* grey-white reading surface, the faintest warmth */
    --ink:   #2e2c29;   /* near-neutral dark text */
    --muted: #6f6d68;   /* dates / secondary text */
    --rule:  #d7d6d2;   /* hairlines, <hr>, separators */
    --body-serif: "Lora", Georgia, "Times New Roman", serif;
    --display-serif: "Almendra", serif;
}

/* Readable body text everywhere */
body {
    font-family: var(--body-serif);
    color: var(--ink);
    font-size: 18px;
    line-height: 1.65;
}

.content {
    background-color: var(--paper);
}

/* Wider reading column for long-form posts/recipes: 70% of the window,
   but never wider than 1100px so lines don't get unreadable on big displays. */
.content.content-wide {
    max-width: min(70%, 1100px);
}

/* Almendra for ALL headings, including Markdown #/##/### inside a post */
h1,
.post-body h1,
.post-body h2,
.post-body h3,
.post-body h4 {
    font-family: var(--display-serif);
    color: var(--ink);
}

/* Long-form reading: a little more air */
.post-body {
    line-height: 1.78;
}
.post-body p {
    margin-bottom: 1.45em;
}

/* Real italics instead of the skewed-upright hack */
.post-body em {
    font-style: italic;
    display: inline;
    transform: none;
}

/* Code blocks: tighter lines, single (not doubled) background/padding */
.post-body pre {
    line-height: 0.7;   /* tight, code-editor feel; keeps blank-line gaps small */
    font-size: 0.9em;
    background-color: #f0efec;
}
.post-body pre code {
    background: none;
    padding: 0;
    border-radius: 0;
    font-size: 1em;
}

/* Page-break divider: type --- on its own line in Markdown to get one of these */
.post-body hr {
    border: none;
    height: 1px;
    width: 100%;
    background-color: var(--rule);
    margin: 2.2em 0;
}

/* Neutralise the greys */
.post-date,
.blog-date {
    color: var(--muted);
}
.post-date::before,
.post-date::after {
    background-color: var(--rule);
}
.post-body blockquote {
    border-left-color: var(--muted);
    color: #423f3a;
}

/* Blog index: one clean separator per entry, centered in the gap.
   Equal padding top/bottom + no margin puts the rule midway between items
   (was margin:20px + padding:10px, which pulled the line up toward each title). */
.blog-entry {
    border-bottom: 1px solid var(--rule);
    margin: 0;
    padding: 22px 0;
}
.blog-entry::after {
    display: none;
}

/* Links on the reading surface: inky + underlined, not default blue */
.content p a {
    color: var(--ink);
}