/* bastien.css — bzg.fr-inspired design for Org-mode HTML export
 *
 * Palette (Ashes / monochrome embers):
 *   Charcoal  #333333  body text
 *   Near-black #1a1a1a  headings
 *   Ash grey  #666666  muted / UI
 *   Ember blue #004d99  links
 *   Smoke     #f7f7f7  code / alt backgrounds
 *   Soot      #cecece  borders
 *
 * Typography: system monospace throughout (Consolas → Monaco → Menlo)
 */

:root {
    --text:     #333333;
    --heading:  #1a1a1a;
    --muted:    #666666;
    --link:     #004d99;
    --link-h:   #003366;
    --border:   #cecece;
    --border-h: #aaaaaa;
    --bg:       #f5f5f5;
    --bg-card:  #ffffff;
    --bg-alt:   #eeeeee;
    --font: Consolas, "Monaco", "Liberation Mono", Menlo, Courier, monospace;
}

* { box-sizing: border-box; }

/* ── Base ───────────────────────────────────────────────── */

body {
    font-family: var(--font);
    font-size: 1rem;
    line-height: 1.65;
    color: var(--text);
    background: var(--bg);
    margin: 0;
    padding: 0;
}

/* ── Page wrapper (injected by left-menu.js) ────────────── */

#page-wrapper {
    display: flex;
    gap: 3rem;
    align-items: flex-start;
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* Fallback when JS is disabled */
body > #content {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

body > #postamble {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* ── Left sidebar ───────────────────────────────────────── */

#left-menu {
    flex: 0 0 160px;
    position: sticky;
    top: 2rem;
    padding-top: 2.75rem;
    font-size: .88rem;
}

#left-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

#left-menu > ul > li {
    border-top: 1px solid var(--border);
    padding-top: .45em;
    margin-bottom: .6em;
}

#left-menu > ul > li > a {
    color: var(--heading);
    text-decoration: none;
    display: block;
}

#left-menu > ul > li > a:hover { color: var(--link); }

#left-menu ul ul {
    margin-top: .25em;
    padding-left: .9em;
}

#left-menu ul ul li { margin-bottom: .15em; }

#left-menu ul ul a {
    color: var(--muted);
    font-size: .82rem;
    text-decoration: none;
}

#left-menu ul ul a:hover { color: var(--link); }

#page-wrapper > #content {
    flex: 1 1 0;
    min-width: 0;
    background: var(--bg-card);
    padding: 0 1.75rem 2rem;
}

/* ── Header / title ─────────────────────────────────────── */

div#content > header {
    padding: 2rem 0 .75rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 2rem;
}

h1 {
    font-size: 1.5rem;
    font-weight: normal;
    color: var(--heading);
    margin: 0;
    letter-spacing: 0;
    background: none;
    padding: 0;
}

/* Hide Org section numbers */
.section-number-2,
.section-number-3,
.section-number-4 {
    display: none;
}

/* ── Headings ───────────────────────────────────────────── */

h2 {
    font-size: 1.3rem;
    font-weight: bold;
    color: var(--heading);
    margin: 2.25rem 0 .5rem;
    padding-bottom: .2rem;
    border-bottom: 1px solid var(--border);
}

h3 {
    font-size: 1.1rem;
    font-weight: bold;
    color: var(--heading);
    margin: 1.75rem 0 .4rem;
}

h4 {
    font-size: 1rem;
    font-weight: bold;
    margin: 1.4rem 0 .3rem;
}

h5, h6 {
    font-size: 1rem;
    font-weight: normal;
    font-style: italic;
    margin: 1rem 0 .25rem;
}

/* ── Links ──────────────────────────────────────────────── */

a {
    color: var(--link);
    text-decoration: none;
}

a:hover {
    color: var(--link-h);
    text-decoration: underline;
}

/* ── Navigation bar (org home/up) ───────────────────────── */

div#org-div-home-and-up {
    font-size: .85rem;
    padding: .4em 0;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--border);
    color: var(--muted);
}

div#org-div-home-and-up a { color: var(--muted); }
div#org-div-home-and-up a:hover { color: var(--link); }

/* ── Inline code & pre ──────────────────────────────────── */

code, tt {
    font-family: var(--font);
    font-size: .9em;
    background: #f0f0f0;
    padding: .1em .3em;
    border-radius: 2px;
    color: var(--heading);
}

pre {
    font-family: var(--font);
    font-size: .9em;
    background: #f0f0f0;
    border-left: 3px solid var(--border);
    padding: 1em 1.25em;
    overflow: auto;
    line-height: 1.5;
    color: var(--text);
    margin: 1rem 0;
}

pre code {
    background: none;
    padding: 0;
    border: none;
    font-size: 1em;
    color: inherit;
}

/* ── Blockquote ─────────────────────────────────────────── */

blockquote {
    margin: 1.25em 0;
    padding: .1em 0 .1em 1em;
    border-left: 3px solid var(--border);
    color: var(--muted);
    font-style: italic;
}

/* ── Tables ─────────────────────────────────────────────── */

table {
    border-collapse: collapse;
    width: 100%;
    font-size: .95rem;
    margin: 1rem 0;
}

th, td {
    text-align: left;
    padding: .35em .6em;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
}

th {
    font-weight: bold;
    color: var(--heading);
    border-bottom: 2px solid var(--border-h);
}

/* ── Figure / image ─────────────────────────────────────── */

figure {
    margin: 1.5em 0;
    text-align: center;
}

/* Org-mode wraps standalone images in <figure>. When the img has an
   inline float style, the figure collapses to zero height and the layout
   breaks. Fix: float the figure itself so content wraps around it. */
div#content figure:has(> img[style*="float:left"]) {
    float: left;
    width: fit-content;
    margin: 0 1.5em 1em 0;
    text-align: left;
}
div#content figure:has(> img[style*="float:right"]) {
    float: right;
    width: fit-content;
    margin: 0 0 1em 1.5em;
    text-align: right;
}

figcaption {
    font-size: .85rem;
    color: var(--muted);
    margin-top: .4em;
}

article img,
div#content img {
    display: block;
    margin: 1em auto;
    max-width: 100%;
}

/* ── Postamble / footer ─────────────────────────────────── */

div#postamble {
    margin-top: 3rem;
    padding: 1rem 0;
    border-top: 1px solid var(--border);
    text-align: center;
    font-size: .85rem;
    color: var(--muted);
}

div#postamble p { margin: .15em 0; }
div#postamble a { color: var(--muted); }
div#postamble a:hover { color: var(--link); text-decoration: underline; }

/* ── Verbatim block ─────────────────────────────────────── */

.verbatim { margin: .75em 0; }
.verbatim pre { margin: 0; }

.verbatim-caption {
    font-size: .8rem;
    color: var(--muted);
    padding: .15em 0;
}

/* ── Floated sidebar ────────────────────────────────────── */

.sidebar {
    float: right;
    width: 18em;
    background: var(--bg-alt);
    border-left: 3px solid var(--border);
    margin: 0 0 1em 2em;
    padding: 1em 1.25em;
    font-size: .9rem;
    color: var(--text);
}

.sidebar a { color: var(--link); }

/* ── Org-mode: todo / done / tags ───────────────────────── */

.todo {
    font-family: var(--font);
    font-size: .75em;
    color: #8a4a4a;
    background: #f7eded;
    padding: .1em .4em;
    border-radius: 2px;
}

.done {
    font-family: var(--font);
    font-size: .75em;
    color: #4a7a5e;
    background: #edf5f0;
    padding: .1em .4em;
    border-radius: 2px;
}

.timestamp     { color: var(--muted); }
.timestamp-kwd { color: var(--heading); font-weight: bold; }

.tag {
    font-size: .72em;
    background: var(--bg-alt);
    color: var(--muted);
    border: 1px solid var(--border);
    padding: .1em .4em;
    border-radius: 2px;
    vertical-align: middle;
}

.target { color: var(--muted); }

/* ── Utilities ──────────────────────────────────────────── */

span.underline { text-decoration: underline; }
.fixme         { background: #f7f2e8; font-weight: bold; padding: .1em .3em; }
.ra            { text-align: right; }

/* ── Syntax highlighting (Org HTML export) ──────────────── */

.org-comment,
.org-comment-delimiter   { color: var(--muted); font-style: italic; }
.org-string              { color: #4a7a5e; }
.org-keyword             { color: var(--heading); font-weight: bold; }
.org-function-name       { color: var(--link); }
.org-variable-name       { color: #8a7040; }
.org-type                { color: #4a6f8a; }
.org-constant            { color: #4a6f8a; }
.org-builtin,
.org-preprocessor        { color: var(--muted); }
.org-bold                { font-weight: bold; }
.org-italic              { font-style: italic; }
.org-underline           { text-decoration: underline; }
.org-bold-italic         { font-weight: bold; font-style: italic; }

.org-org-todo            { color: #8a4a4a; font-weight: bold; }
.org-org-done            { color: #4a7a5e; font-weight: bold; }
.org-org-date,
.org-org-sexp-date       { color: var(--muted); text-decoration: underline; }
.org-org-tag             { color: var(--muted); }
.org-org-verbatim        { color: var(--muted); }
.org-org-warning,
.org-warning             { color: #8a4a4a; font-weight: bold; }
.org-org-link,
.org-link                { color: var(--link); text-decoration: underline; }
.org-match,
.org-highlight           { background: #f7f2e8; }
.org-lazy-highlight      { background: var(--bg-alt); }
.org-info-search-highlight { background: var(--bg-alt); font-weight: bold; }

/* ── Numbered list items as cards ───────────────────────── */
/*
 * In Org-mode, a numbered list like:
 *   1. First item
 *   2. Second item
 * exports as <ol class="org-ol"><li>...</li></ol>
 * The styles below render each <li> as a bordered card.
 */

ol.org-ol {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0;
    counter-reset: card-n;
}

ol.org-ol > li {
    position: relative;
    counter-increment: card-n;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 1.1rem 1.25rem 1.1rem 3.25rem;
    margin-bottom: .75rem;
    transition: border-color .12s, box-shadow .12s;
}

ol.org-ol > li:hover {
    border-color: var(--border-h);
    box-shadow: 0 2px 6px rgba(0,0,0,.06);
}

ol.org-ol > li::before {
    content: counter(card-n);
    position: absolute;
    left: 1.1rem;
    top: 1.15rem;
    font-size: .78rem;
    font-weight: bold;
    color: var(--muted);
    line-height: 1;
}