/* ===========================================
   Blog styles — Protesilaos-inspired
   Light: modus-operandi palette
   Dark: modus-vivendi palette
   =========================================== */

/* --- Base --- */
.blog-page,
#content {
    max-width: 760px;
    margin: 0 auto;
    background: transparent;
    border: none;
    padding: var(--space-lg) 0;
    font-family: serif;
    font-size: 1rem;
    line-height: 1.7;
    color: #000000;
}

/* =============================================
   FIX: org-publish title <header> gets blue bg
   from style.css header{background:blue}
   ============================================= */

#content header {
    background: none !important;
    padding: 0 !important;
    box-shadow: none !important;
    margin: 0;
}

/* =============================================
   HEADINGS — proportional hierarchy
   title > h1 > h2 > h3 > h4
   No underlines, no backgrounds, just bold+size
   ============================================= */

.blog-page h1,
.blog-page h2,
.blog-page h3,
.blog-page h4,
#content h1,
#content h2,
#content h3,
#content h4 {
    font-family: serif;
    font-weight: bold;
    color: #000000 !important;
    border: none !important;
    border-bottom: none !important;
    background: none !important;
    padding: 0 !important;
    margin-bottom: 0.4em;
}

/* Title (post page h1.title, or index h1) */
.blog-page h1,
#content h1.title {
    font-size: 1.8em;
    margin-top: 0;
}

/* Header 1 (h2 in org, since title takes h1) */
.blog-page h2,
#content h2 {
    font-size: 1.4em;
    margin-top: 1.5em;
}

/* Header 2 */
.blog-page h3,
#content h3 {
    font-size: 1.15em;
    margin-top: 1.3em;
}

/* Header 3 */
.blog-page h4,
#content h4 {
    font-size: 1.0em;
    margin-top: 1.2em;
}

/* =============================================
   SUBTITLE
   ============================================= */

.blog-subtitle {
    font-size: 0.95em;
    color: #505050;
    margin-bottom: 1.5em;
    line-height: 1.5;
}

/* =============================================
   LINKS — hover bg always matches text color
   Uses outline trick so visited links get
   purple bg automatically
   ============================================= */

.blog-page a,
#content a {
    color: #0000ee;
    text-decoration: none;
    background: none;
    padding: 1px 3px;
    margin: -1px -3px;
    border-radius: 2px;
    transition: all 0.12s;
}

.blog-page a:visited,
#content a:visited {
    color: #551a8b;
}

.blog-page a:hover,
.blog-page a:visited:hover,
#content a:hover,
#content a:visited:hover {
    background-color: currentColor;
    -webkit-text-fill-color: #ffffff;
    text-decoration: none;
}

/* =============================================
   BODY TEXT
   ============================================= */

.blog-page p,
#content p {
    font-family: serif;
    font-size: 1rem;
    color: #000000;
    margin-bottom: 1em;
    line-height: 1.7;
}

/* =============================================
   CODE BLOCKS — yellow tinted light, readable dark
   ============================================= */

.blog-page pre,
.blog-page pre.src,
.blog-page .org-src-container pre,
#content pre,
#content pre.src,
#content .org-src-container pre {
    background-color: #fff8dc !important;
    border: 1px solid #e6d9a0 !important;
    border-radius: 3px;
    padding: 0.8em 1em !important;
    overflow-x: auto;
    font-family: "Courier New", "Courier", monospace !important;
    font-size: 0.88em;
    line-height: 1.5;
    margin: 1em 0;
    color: #000000 !important;
}

.blog-page pre code,
.blog-page .org-src-container pre code,
#content pre code,
#content .org-src-container pre code {
    background: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0;
    font-family: inherit !important;
    font-size: inherit;
    color: inherit !important;
}

/* Inline code */
.blog-page code,
#content code {
    background-color: #fff8dc;
    border: 1px solid #e6d9a0;
    border-radius: 2px;
    padding: 0.1em 0.35em;
    font-family: "Courier New", "Courier", monospace;
    font-size: 0.88em;
    color: #000000;
}

/* Org src container */
.blog-page .org-src-container,
#content .org-src-container {
    position: relative;
    margin: 1em 0;
}

.blog-page .org-src-container > pre,
#content .org-src-container > pre {
    margin: 0;
}

.blog-page .org-src-container label,
#content .org-src-container label {
    font-family: "Courier New", monospace;
    font-size: 0.75em;
    color: #808080;
    position: absolute;
    top: 0.3em;
    right: 0.6em;
}

/* =============================================
   IMAGES AND CAPTIONS
   ============================================= */

.blog-page figure,
#content figure {
    margin: 1.5em 0;
    padding: 0;
    text-align: center;
}

.blog-page figure img,
#content figure img {
    max-width: 100%;
    height: auto;
    border: 1px solid #d0d0d0;
    border-radius: 3px;
}

.blog-page figcaption,
#content figcaption {
    font-family: serif;
    font-size: 0.85em;
    color: #505050;
    font-style: italic;
    margin-top: 0.5em;
    line-height: 1.4;
}

.blog-page img,
#content img {
    max-width: 100%;
    height: auto;
}

/* =============================================
   LATEST POSTS — yellow box
   ============================================= */

.blog-latest-box {
    background-color: #fff8dc;
    border: 1px solid #e6d9a0;
    border-radius: 3px;
    padding: 1em 1.2em;
    margin-bottom: 1.8em;
}

.blog-latest-box h2 {
    margin-top: 0;
    margin-bottom: 0.5em;
    font-size: 1.1em;
}

/* =============================================
   POST LISTS
   ============================================= */

.blog-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.blog-list li {
    margin-bottom: 0.15em;
    line-height: 1.6;
    font-family: serif;
    font-size: 0.95em;
}

.blog-tag {
    font-size: 0.85em;
    color: #808080;
}

.blog-preview {
    font-size: 0.9em;
    color: #505050;
}

/* =============================================
   SECTION INDEX — :: pattern
   ============================================= */

.blog-sections {
    list-style: disc;
    padding-left: 1.3em;
    margin-bottom: 1em;
}

.blog-sections li {
    margin-bottom: 0.7em;
    line-height: 1.6;
    font-family: serif;
    font-size: 0.95em;
}

/* =============================================
   ORG EXPORT ELEMENTS
   ============================================= */

#content .outline-2,
#content .outline-3 {
    margin-top: 1.5em;
}

#content .post-date {
    font-size: 0.9em;
    color: #808080;
    margin-bottom: 0.3em;
}

#content .taglist {
    margin-top: 2em;
    font-size: 0.85em;
    color: #808080;
}

/* #############################################
   DARK MODE — modus-vivendi palette
   ############################################# */

[data-theme="dark"] .blog-page,
[data-theme="dark"] #content {
    color: #ffffff;
}

[data-theme="dark"] #content header {
    background: none !important;
}

[data-theme="dark"] .blog-page p,
[data-theme="dark"] #content p {
    color: #ffffff;
}

[data-theme="dark"] .blog-subtitle {
    color: #989898;
}

/* --- Dark title: white --- */
[data-theme="dark"] .blog-page h1,
[data-theme="dark"] #content h1.title {
    color: #ffffff !important;
    background: none !important;
    border: none !important;
}

/* --- Dark headers: #f8dec0 warm peach --- */
[data-theme="dark"] .blog-page h2,
[data-theme="dark"] .blog-page h3,
[data-theme="dark"] .blog-page h4,
[data-theme="dark"] #content h2,
[data-theme="dark"] #content h3,
[data-theme="dark"] #content h4 {
    color: #f8dec0 !important;
    background: none !important;
    border: none !important;
}

/* --- Dark links: cyan --- */
[data-theme="dark"] .blog-page a,
[data-theme="dark"] #content a {
    color: #00d3d0;
}

[data-theme="dark"] .blog-page a:visited,
[data-theme="dark"] #content a:visited {
    color: #b6a0ff;
}

/* Dark hover: bg auto-matches link color */
[data-theme="dark"] .blog-page a:hover,
[data-theme="dark"] .blog-page a:visited:hover,
[data-theme="dark"] #content a:hover,
[data-theme="dark"] #content a:visited:hover {
    background-color: currentColor;
    -webkit-text-fill-color: #000000;
    text-decoration: none;
}

/* --- Dark yellow box --- */
[data-theme="dark"] .blog-latest-box {
    background-color: #3d3520;
    border-color: #5a4f30;
}

[data-theme="dark"] .blog-latest-box h2 {
    color: #fec43f !important;
}

[data-theme="dark"] .blog-latest-box .blog-list li {
    color: #ffffff;
}

[data-theme="dark"] .blog-latest-box a {
    color: #00d3d0;
}

[data-theme="dark"] .blog-latest-box a:visited {
    color: #b6a0ff;
}

[data-theme="dark"] .blog-latest-box .blog-tag {
    color: #989898;
}

/* --- Dark code blocks: readable modus-vivendi style --- */
[data-theme="dark"] .blog-page pre,
[data-theme="dark"] .blog-page .org-src-container pre,
[data-theme="dark"] #content pre,
[data-theme="dark"] #content .org-src-container pre {
    background-color: #2b2b2b !important;
    border-color: #505050 !important;
    color: #e0e0e0 !important;
}

[data-theme="dark"] .blog-page pre code,
[data-theme="dark"] .blog-page .org-src-container pre code,
[data-theme="dark"] #content pre code,
[data-theme="dark"] #content .org-src-container pre code {
    color: #e0e0e0 !important;
}

/* Remap org-publish inline syntax colors for dark mode readability */
/* Comments: modus-operandi #7f0000 -> modus-vivendi #989898 gray */
[data-theme="dark"] #content pre span[style*="color: #7f0000"],
[data-theme="dark"] #content .org-src-container pre span[style*="color: #7f0000"] {
    color: #989898 !important;
}

/* Strings: modus-operandi #3548cf -> modus-vivendi #79a8ff blue */
[data-theme="dark"] #content pre span[style*="color: #3548cf"],
[data-theme="dark"] #content .org-src-container pre span[style*="color: #3548cf"] {
    color: #79a8ff !important;
}

/* Keywords/builtins: modus-operandi #8f0075 -> modus-vivendi #feacd0 pink */
[data-theme="dark"] #content pre span[style*="color: #8f0075"],
[data-theme="dark"] #content .org-src-container pre span[style*="color: #8f0075"] {
    color: #feacd0 !important;
}

/* Types: modus-operandi #005e8b -> modus-vivendi #6ae4b9 green */
[data-theme="dark"] #content pre span[style*="color: #005e8b"],
[data-theme="dark"] #content .org-src-container pre span[style*="color: #005e8b"] {
    color: #6ae4b9 !important;
}

/* Variables: modus-operandi #005f5f -> modus-vivendi #00d3d0 cyan */
[data-theme="dark"] #content pre span[style*="color: #005f5f"],
[data-theme="dark"] #content .org-src-container pre span[style*="color: #005f5f"] {
    color: #00d3d0 !important;
}

/* Constants: modus-operandi #0000b0 -> modus-vivendi #b6a0ff purple */
[data-theme="dark"] #content pre span[style*="color: #0000b0"],
[data-theme="dark"] #content .org-src-container pre span[style*="color: #0000b0"] {
    color: #b6a0ff !important;
}

/* Function names: modus-operandi #721045 -> modus-vivendi #feacd0 pink */
[data-theme="dark"] #content pre span[style*="color: #721045"],
[data-theme="dark"] #content .org-src-container pre span[style*="color: #721045"] {
    color: #feacd0 !important;
}

/* Preprocessor: modus-operandi #884900 -> modus-vivendi #fec43f yellow */
[data-theme="dark"] #content pre span[style*="color: #884900"],
[data-theme="dark"] #content .org-src-container pre span[style*="color: #884900"] {
    color: #fec43f !important;
}

/* Doc strings: modus-operandi #2a486a -> modus-vivendi #b0d6f5 light blue */
[data-theme="dark"] #content pre span[style*="color: #2a486a"],
[data-theme="dark"] #content .org-src-container pre span[style*="color: #2a486a"] {
    color: #b0d6f5 !important;
}

/* Warning/negation: modus-operandi #a60000 -> modus-vivendi #ff8059 orange-red */
[data-theme="dark"] #content pre span[style*="color: #a60000"],
[data-theme="dark"] #content .org-src-container pre span[style*="color: #a60000"] {
    color: #ff8059 !important;
}

[data-theme="dark"] .blog-page code,
[data-theme="dark"] #content code {
    background-color: #2b2b2b;
    border-color: #505050;
    color: #e0e0e0;
}

/* --- Dark images --- */
[data-theme="dark"] .blog-page figure img,
[data-theme="dark"] #content figure img {
    border-color: #646464;
}

[data-theme="dark"] .blog-page figcaption,
[data-theme="dark"] #content figcaption {
    color: #989898;
}

/* --- Dark misc --- */
[data-theme="dark"] .blog-preview {
    color: #989898;
}

[data-theme="dark"] .blog-tag {
    color: #989898;
}

[data-theme="dark"] .blog-sections li {
    color: #ffffff;
}

[data-theme="dark"] #content .post-date {
    color: #989898;
}

[data-theme="dark"] #content .taglist {
    color: #989898;
}