/* Page style for pages that ox-html exports. */

:root {
  --text: #1f2328;
  --muted: #6e7781;
  --border: #d0d7de;
  --code-bg: #f6f8fa;
  --link: #0969da;
}

body {
  max-width: 46rem;
  margin: 0 auto;
  padding: 2rem 1rem 4rem;
  font: 17px/1.65 system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--text);
}

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

/* Site header and footer (layout/header.html, layout/footer.html) */
#preamble {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
  margin: 0;
}
.site-logo img { display: block; width: 3rem; height: 3rem; border-radius: 50%; }
.site-info { flex: 1; line-height: 1.35; }
.site-title { color: var(--text); font-weight: 600; font-size: 1.1rem; text-decoration: none; }
.site-desc { margin: 0; color: var(--muted); font-size: 0.9rem; }
@media (max-width: 600px) {
  .site-menu { flex-basis: 100%; }
}
.site-menu, .site-contacts, .sidebar-menu { display: flex; gap: 1rem; }
.site-menu a, .site-contacts a, .sidebar-menu a { text-decoration: none; }
.site-menu a[aria-current] { color: var(--text); font-weight: 600; }
#postamble {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin: 3rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.9rem;
}
#postamble p { margin: 0; }

/* Sidebar (see blog-add-sidebar in publish.el): a copy of the table of
   contents, the links to the post lists, and the tag cloud, with lines
   between them.  On narrow screens, only the tag cloud, below the page
   content (the header and the footer have the post list links).  On wide screens, a left column that stays
   on the screen and scrolls independently of the page. */
.sidebar { margin-top: 3rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.sidebar-toc, .sidebar .sidebar-menu { display: none; }
.sidebar-title, .sidebar-toc h2 { margin: 0 0 0.6rem; font-size: 1rem; }
.sidebar-title a { color: var(--text); text-decoration: none; }
.sidebar .tag-cloud { margin: 0; gap: 0.2rem 0.8rem; }
@media (min-width: 64rem) {
  body:has(> .sidebar) {
    display: grid;
    grid-template-columns: 16rem minmax(0, 1fr);
    column-gap: 3rem;
    align-items: start;
    max-width: 66rem;
  }
  body:has(> .sidebar) > #preamble, body:has(> .sidebar) > #postamble { grid-column: 1 / -1; }
  body:has(> .sidebar) > #content { grid-column: 2; grid-row: 2; }
  body:has(> .sidebar) #content > #table-of-contents { display: none; }
  .sidebar {
    grid-column: 1;
    grid-row: 2;
    position: sticky;
    top: 0;
    max-height: 100vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    box-sizing: border-box;
    margin-top: 0;
    padding: 1.5rem 0.5rem 1.5rem 0;
    border-top: none;
  }
  .sidebar > :not(:first-child) { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border); }
  .sidebar .sidebar-menu { display: flex; }
  .sidebar-toc { display: block; font-size: 0.9rem; line-height: 1.45; }
  .sidebar-toc ul { margin: 0; padding-left: 1rem; }
  .sidebar-toc > div > ul { padding-left: 0; list-style: none; }
  .sidebar-toc li { margin: 0.25rem 0; }
  .sidebar-toc a { text-decoration: none; }
}

h2,h3,h4,h5,h6 {
  /* color: #A5573E; */
  color: #000000;
}
h1.title {
  text-align: left;
  margin-bottom: 0.2rem;
}
.subtitle { text-align: left; }

/* Post lists on the index pages (see blog-sitemap-entry in publish.el) */
.post-list dt { margin-top: 1.2rem; font-weight: 600; }
.post-list dd { margin: 0.2rem 0 0; color: var(--muted); }
.post-list time { margin-right: 0.5rem; font-variant-numeric: tabular-nums; }

/* Tags (see blog-tags.el) */
.tag-cloud { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 1.1rem; padding: 0; list-style: none; }
.tag-cloud a { text-decoration: none; }
.post-tags { margin-top: 2.5rem; color: var(--muted); font-size: 0.95em; }
.post-tags a { margin-right: 0.4rem; }
.subtitle { color: var(--muted); margin-top: 0; }

/* Table of contents */
#table-of-contents {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.5rem 1rem;
  margin: 1.5rem 0;
  font-size: 0.95em;
}
#table-of-contents h2 { font-size: 1rem; margin: 0.3rem 0; }
#table-of-contents ul { padding-left: 1.2rem; margin: 0.2rem 0; }

/* Folding sections (see setupFolding in blog.js) */
.fold-toggle { cursor: pointer; }
.fold-toggle::before {
  content: "\25BE";
  display: inline-block;
  width: 1.1em;
  color: var(--muted);
}
.is-folded > .fold-toggle::before { content: "\25B8"; }
.is-folded > :not(.fold-toggle) { display: none; }

.tag { float: right; font-size: 0.7em; color: var(--muted); font-weight: normal; }
.tag .folded { display: none; }

/* Code */
code, pre { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.88em; }
:not(pre) > code { background: var(--code-bg); padding: 0.1em 0.3em; border-radius: 4px; }
pre { overflow-x: auto; }

/* Code boxes: source (.org-src-container) and example (pre.example) blocks.
Override org.css style to have the gray background and no shadow. */
.org-src-container, pre.example {
  background: var(--code-bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: none;
}
.org-src-container { padding: 0.1rem 1rem; }
.org-src-container > pre { margin: 0.5em 0; font-size: inherit; }
pre.example {
  font-size: var(--code-size);
  padding: 0.5em 1rem;
}

/* Code colors: htmlize outputs one "org-<face>" class per Emacs face. */
.org-keyword, .org-builtin { color: #cf222e; }
.org-string { color: #0a3069; }
.org-doc, .org-comment, .org-comment-delimiter { color: #6e7781; font-style: italic; }
.org-function-name { color: #8250df; }
.org-variable-name, .org-constant { color: #0550ae; }
.org-type, .org-preprocessor { color: #953800; }
/* Copy button (see setupCopyButtons in blog.js).  At the bottom, because
   org.css puts the language label at the top right corner. */
.copy-button {
  position: absolute;
  bottom: 0.4rem;
  right: 0.4rem;
  font-size: 0.75rem;
  padding: 0.15rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: white;
  cursor: pointer;
  opacity: 0;
}
.org-src-container:hover .copy-button, .copy-button:focus { opacity: 1; }

/* File preview dialog (see static/config-preview.js) */
.file-preview { width: min(60rem, 90vw); padding: 0; border: 1px solid var(--border); border-radius: 6px; }
.file-preview::backdrop { background: rgb(0 0 0 / 0.3); }
.file-preview-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 1rem;
  border-bottom: 1px solid var(--border);
}
.file-preview-bar form { margin: 0; }
.file-preview pre { margin: 0; padding: 1rem; font-size: var(--code-size); }

/* Images, videos, tables */
img, video { max-width: 100%; height: auto; }
.figure { text-align: center; margin: 1.5rem 0; }
.figure p:last-child { color: var(--muted); font-size: 0.9em; }
table {
  border-collapse: collapse;
  margin: 1rem 0;
  border: none;
}
th, td { border: 1px solid var(--border); padding: 0.3rem 0.7rem; }
blockquote { border-left: 4px solid var(--border); margin-left: 0; padding-left: 1rem; color: var(--muted); }

/* Folded blocks: #+begin_details / #+begin_summary in org.
   normalize.css sets summary to display: block, which hides the marker. */
details { margin: 1em 0; }
summary { display: list-item; cursor: pointer; }
summary > p { display: inline; margin: 0; }