/* ==========================================================================
   OppenFolio editorial overlay for the blog (PaperMod theme).
   Strategy: redefine PaperMod's CSS variables to our editorial palette,
   then layer surgical overrides on top for the typography we want.
   ========================================================================== */

/* Editorial palette + typography tokens (mirrors the main site) */
:root {
    --paper:          #fdfcf8;
    --paper-soft:     #f6f1e6;
    --ink:            #1a1715;
    --ink-secondary:  #4a4640;
    --ink-muted:      #847e72;
    --rule:           #d9d2c1;
    --rule-soft:      #ece5d2;
    --accent:         #b8472f;
    --accent-soft:    #f3e3da;
    --positive:       #2d6a4f;
    --negative:       #9c2e1e;

    --font-display: 'Source Serif 4', 'Source Serif Pro', 'Iowan Old Style', Georgia, serif;
    --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

    /* Override PaperMod variables — these are what most of its rules read */
    --theme:          var(--paper);
    --entry:          var(--paper);
    --primary:        var(--ink);
    --secondary:      var(--ink-muted);
    --tertiary:       var(--rule);
    --content:        var(--ink-secondary);
    --border:         var(--rule);
    --code-bg:        var(--paper-soft);
    --code-block-bg:  #1a1715;
    --radius:         0;            /* editorial = no rounded corners */
}

/* Dark mode — PaperMod toggles `body.dark` for dark theme */
.dark, body.dark {
    --paper:          #16140f;
    --paper-soft:     #211d16;
    --ink:            #f0e9d9;
    --ink-secondary:  #bcb4a4;
    --ink-muted:      #7d766a;
    --rule:           #3a342a;
    --rule-soft:      #28231d;
    --accent:         #e07b5b;
    --accent-soft:    #2c1f18;
    --positive:       #6fb89c;
    --negative:       #d68267;

    --theme:          var(--paper);
    --entry:          var(--paper);
    --primary:        var(--ink);
    --secondary:      var(--ink-muted);
    --tertiary:       var(--rule);
    --content:        var(--ink-secondary);
    --border:         var(--rule);
    --code-bg:        var(--paper-soft);
    --code-block-bg:  #0d0c09;
}

/* Body + base type ----------------------------------------------------- */
body {
    font-family: var(--font-body);
    background-color: var(--paper) !important;
    color: var(--ink) !important;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-feature-settings: "kern", "liga";
}

/* Site header ---------------------------------------------------------- */
.header {
    background-color: var(--paper) !important;
    border-bottom: 1px solid var(--rule);
}
.header .logo,
.header .logo a {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--ink) !important;
}
#menu a,
.menu a {
    color: var(--ink-secondary) !important;
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 500;
    border: 0 !important;
    background: transparent !important;
}
#menu a:hover,
.menu a:hover {
    color: var(--accent) !important;
}

/* Headlines and headings ----------------------------------------------- */
h1, h2, h3, h4, h5, h6,
.post-title,
.entry-header h2,
.first-entry .entry-header h1 {
    font-family: var(--font-display) !important;
    font-weight: 600;
    letter-spacing: -0.018em;
    color: var(--ink) !important;
}
.post-title {
    font-size: clamp(2rem, 5vw, 3rem) !important;
    line-height: 1.1 !important;
    font-weight: 600 !important;
    margin: 24px 0 12px 0 !important;
}
.first-entry .entry-header h1 {
    font-size: clamp(2.5rem, 6vw, 3.6rem) !important;
}

/* Post listing rows (home + archive) ----------------------------------- */
.post-entry,
article.post-entry {
    background-color: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    border-bottom: 1px solid var(--rule) !important;
    box-shadow: none !important;
    padding: 28px 0 !important;
    margin: 0 !important;
    transition: background-color 0.15s ease;
}
.post-entry:hover {
    background-color: var(--paper-soft) !important;
    box-shadow: none !important;
    transform: none !important;
}
.post-entry .entry-header h2 {
    font-size: 1.5rem !important;
    line-height: 1.2 !important;
    margin: 0 0 8px 0 !important;
}
.entry-content,
.post-entry .entry-content {
    color: var(--ink-secondary) !important;
    font-family: var(--font-body) !important;
    font-size: 0.95rem !important;
    line-height: 1.55 !important;
    margin: 0 0 8px 0 !important;
}
.post-meta,
.entry-footer,
.post-entry .entry-footer {
    font-family: var(--font-mono) !important;
    font-size: 0.78rem !important;
    color: var(--ink-muted) !important;
    text-transform: none !important;
}

/* First entry (featured-style) — strip cover-style chrome */
.first-entry {
    background-color: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid var(--ink) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 28px 0 36px 0 !important;
    margin: 0 0 12px 0 !important;
}

/* Single-post layout --------------------------------------------------- */
.post-single {
    max-width: 700px;
    padding: 0 8px;
}
.post-content {
    font-family: var(--font-display);
    font-size: 1.08rem;
    line-height: 1.7;
    color: var(--ink) !important;
}
.post-content p {
    margin: 0 0 1.1em 0;
}
.post-content h2 {
    margin-top: 2em !important;
    font-size: 1.5rem !important;
    border-bottom: 1px solid var(--rule);
    padding-bottom: 8px;
}
.post-content h3 {
    margin-top: 1.5em !important;
    font-size: 1.2rem !important;
}
.post-content blockquote {
    border-left: 3px solid var(--accent);
    background: transparent !important;
    padding: 4px 18px;
    color: var(--ink-secondary);
    font-style: italic;
    margin: 1.5em 0;
}
.post-content ul,
.post-content ol {
    padding-left: 1.4em;
}
.post-content li {
    margin: 0.4em 0;
}
.post-content hr {
    border: 0;
    border-top: 1px solid var(--rule);
    margin: 2em 0;
}

/* Links — editorial dotted underline that turns solid + accent on hover  */
.post-content a,
.post-content a:visited {
    color: var(--accent);
    text-decoration: none;
    border-bottom: 1px dotted var(--accent);
    transition: border-bottom-style 0.12s ease, background-color 0.12s ease;
}
.post-content a:hover {
    border-bottom-style: solid;
    background-color: var(--accent-soft);
}
body.dark .post-content a:hover {
    background-color: rgba(224, 123, 91, 0.12);
}
.post-content a code {
    color: var(--accent);
}

/* Code ---------------------------------------------------------------- */
.post-content code {
    font-family: var(--font-mono);
    font-size: 0.88em;
    background-color: var(--code-bg) !important;
    color: var(--ink) !important;
    padding: 2px 5px;
    border-radius: 0 !important;
}
.post-content pre {
    background-color: var(--code-block-bg) !important;
    border-radius: 0 !important;
    border: 0 !important;
    padding: 14px 16px !important;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    line-height: 1.55;
    overflow-x: auto;
}
.post-content pre code {
    background: transparent !important;
    color: #f0e9d9 !important;
    padding: 0;
}

/* Tags + breadcrumbs --------------------------------------------------- */
.post-tags a,
.post-tags li a {
    background-color: transparent !important;
    border: 1px solid var(--rule) !important;
    border-radius: 0 !important;
    color: var(--ink-secondary) !important;
    font-family: var(--font-body) !important;
    font-size: 0.78rem !important;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 4px 10px !important;
}
.post-tags a:hover,
.post-tags li a:hover {
    color: var(--accent) !important;
    border-color: var(--accent) !important;
    background-color: transparent !important;
}
.breadcrumbs,
.breadcrumbs a {
    font-family: var(--font-mono) !important;
    font-size: 0.78rem !important;
    color: var(--ink-muted) !important;
    text-transform: none !important;
}
.breadcrumbs a:hover { color: var(--accent) !important; }

/* Pagination ----------------------------------------------------------- */
.pagination a,
.page-link,
.post-nav .next,
.post-nav .prev,
.next-prev a {
    background: transparent !important;
    border: 1px solid var(--rule) !important;
    border-radius: 0 !important;
    color: var(--ink-secondary) !important;
    font-family: var(--font-body) !important;
}
.pagination a:hover {
    color: var(--accent) !important;
    border-color: var(--accent) !important;
}

/* Footer --------------------------------------------------------------- */
.footer {
    background-color: var(--paper) !important;
    color: var(--ink-muted) !important;
    border-top: 1px solid var(--rule);
    font-family: var(--font-body);
    font-size: 0.85rem;
}
.footer a {
    color: var(--accent) !important;
}

/* TOC ----------------------------------------------------------------- */
.toc {
    background-color: transparent !important;
    border: 0 !important;
    border-left: 3px solid var(--accent) !important;
    border-radius: 0 !important;
    padding: 14px 18px !important;
    font-size: 0.88rem;
    font-family: var(--font-body);
}
.toc summary {
    color: var(--accent) !important;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.72rem;
    font-weight: 700;
}
.toc a { color: var(--ink-secondary) !important; }
.toc a:hover { color: var(--accent) !important; }

/* Theme switcher button ------------------------------------------------ */
#theme-toggle {
    color: var(--ink-secondary) !important;
}
#theme-toggle:hover { color: var(--accent) !important; }

/* Search --------------------------------------------------------------- */
#searchbox input {
    background-color: var(--paper) !important;
    border: 1px solid var(--rule) !important;
    color: var(--ink) !important;
    font-family: var(--font-body);
    border-radius: 0 !important;
}
#searchResults li {
    border-radius: 0 !important;
}

/* Cover images, if any, inside posts — keep them but neutralize chrome  */
.entry-cover {
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* Top-page profile mode (PaperMod option) — quiet down the hero       */
.profile_inner h1 {
    font-family: var(--font-display);
    color: var(--ink) !important;
}