/* ===========================================
   theme.css — Marmite blog theme overrides
   Loaded AFTER pico.min.css, marmite.css, custom.css
   =========================================== */

/* ── Root overrides ── */
:root {
  --pico-font-size: 100%;
  --pico-container-max-width: 90ch;
  --pico-typography-spacing-vertical: 0.75rem;
  --pico-tag: var(--pico-color-azure-50);
  --pico-bg-menu: var(--pico-background-color);
  --pico-home: var(--pico-color-slate-500);
  --pico-menu-selected: #48536b;
  --pico-menu: #5d6b89;
  /* Pico color tokens (re-declared to match production overrides) */
  --pico-color-grey-50: #f1f1f1;
  --pico-color-azure-50: #e9f2fc;
  --pico-color-azure-200: #9bccfd;
  --pico-color-grey-700: #474747;
  --pico-color-slate-500: #687899;
  --pico-color-slate-750: #333c4e;
  --pico-color-slate-800: #2a3140;
  --pico-color-slate-850: #202632;
  --pico-color-azure-550: #0172ad;
  --pico-color-azure-650: #015887;
}
body > main { padding-block: revert; }
h1, h2, h3, h4, h5, h6 {
  --pico-typography-spacing-top: revert;
}
a { text-decoration: none; }
a:hover { text-decoration: underline; color: var(--pico-primary); }

@media only screen and (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --pico-tag: var(--pico-color-slate-850);
    --pico-bg-menu: var(--pico-background-color);
    --pico-home: var(--pico-color-slate-500);
    --pico-menu-selected: #b3b9c5;
    --pico-menu: #969eaf;
  }
}
[data-theme="dark"] {
  --pico-tag: var(--pico-color-slate-850);
  --pico-bg-menu: var(--pico-background-color);
  --pico-home: var(--pico-color-slate-500);
  --pico-menu-selected: #b3b9c5;
  --pico-menu: #969eaf;
}

/* ── Inline code / pre ── */
.marmite-code { margin: .45rem 0; }
pre.marmite-code {
  padding: .5rem .7rem;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.marmite-code .marmite-code-inner { font-size: .85em; }
.marmite-code .marmite-code-inner:not(.language-mermaid) {
  background: transparent;
  padding: 0;
}
:not(pre) > code {
  display: inline;
  padding: .08rem .22rem;
  line-height: inherit;
  vertical-align: baseline;
  overflow-wrap: anywhere;
}

/* ── Draft warning ── */
.draft-warning {
  background-color: #fff3cd;
  border: 1px solid #ffeaa7;
  border-radius: 4px;
  padding: 12px;
  margin-bottom: 20px;
  color: #856404;
}

/* ── Content block layout ── */
.content-html {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: break-word;
}
.content-html img,
.content-html svg,
.content-html video,
.content-html iframe {
  max-width: 100%; height: auto;
}
.content-html a,
.content-html code {
  overflow-wrap: anywhere;
}
.content-html table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.content-html pre {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
pre.marmite-code,
.marmite-code {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ── Blockquote ── */
blockquote {
  padding: 0 1rem 0.01rem 1rem;
}

/* ── ToC sidebar ── */
.content-with-toc {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
}
.content-article-area {
  flex: 1;
  min-width: 0;
  max-width: 72ch;
  overflow-x: auto;
}
.content-toc-right {
  width: 200px;
  flex-shrink: 0;
  position: sticky;
  top: 2rem;
  max-height: calc(100vh - 4rem);
  overflow-y: auto;
  font-size: .8rem;
  line-height: 1.5;
  padding-top: .5rem;
}
.content-toc-right nav ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}
.content-toc-right nav ul ul {
  padding-left: .6rem;
}
.content-toc-right nav ul li {
  margin: .2rem 0;
}
.content-toc-right nav ul li a {
  color: var(--pico-muted-color);
  text-decoration: none;
  display: block;
  padding: 2px 4px;
  border-radius: 3px;
  transition: background-color .15s, color .15s;
  word-break: break-word;
}
.content-toc-right nav ul li a:hover {
  background-color: rgba(53,120,229,.08);
  color: var(--pico-primary);
  text-decoration: none;
}

/* ── Content typography ── */
.content-html p {
  line-height: 1.55;
}

/* ── Code / tables ── */
pre.marmite-code {
  font-size: .9em;
  line-height: 1.45;
  margin: .65rem 0 .85rem;
  padding: .62rem .78rem;
}
.marmite-code .marmite-code-inner {
  font-size: 1em;
  line-height: 1.45;
}
.content-html table {
  margin: .65rem 0 .85rem;
  border-spacing: 0;
  scrollbar-width: thin;
}
.content-html th,
.content-html td {
  padding: .42rem .58rem;
  line-height: 1.45;
  vertical-align: top;
}
.content-html thead th {
  white-space: nowrap;
}
.content-html blockquote {
  margin: .75rem 0;
  padding: .58rem .8rem .58rem .95rem;
  border-left: .18rem solid var(--pico-muted-border-color);
}
.content-html blockquote > :first-child { margin-top: 0; }
.content-html blockquote > :last-child { margin-bottom: 0; }

/* ── Markdown alerts ── */
.markdown-alert {
  margin: .85rem 0;
  padding: .7rem .85rem .72rem .9rem;
  border: 1px solid color-mix(in srgb, var(--a) 25%, transparent);
  border-left: .28rem solid var(--a);
  border-radius: .38rem;
  background: color-mix(in srgb, var(--a) 12%, transparent);
  color: var(--ac);
  font-family: inherit;
  line-height: 1.5;
  box-shadow: none;
}
.markdown-alert > :first-child { margin-top: 0; }
.markdown-alert > :last-child { margin-bottom: 0; }
.markdown-alert p { margin: .45rem 0; }
.markdown-alert-title {
  margin: 0 0 .32rem;
  color: var(--at);
  font-size: .95rem;
  font-weight: 700;
  line-height: 1.35;
}

.markdown-alert-note {
  --a: #54c7ec;
  --at: #1a7a8a;
  --ac: #1c4e58;
}
.markdown-alert-tip {
  --a: #00a400;
  --at: #006b00;
  --ac: #003a00;
}
.markdown-alert-important {
  --a: #3578e5;
  --at: #1a5bbd;
  --ac: #0d3066;
}
.markdown-alert-warning {
  --a: #ffba00;
  --at: #946200;
  --ac: #4d3800;
}
.markdown-alert-caution {
  --a: #fa383e;
  --at: #b3261e;
  --ac: #5c1113;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --markdown-alert-note-at: #8bd8ef;
    --markdown-alert-note-ac: #d8f4ff;
    --markdown-alert-tip-at: #7ee787;
    --markdown-alert-tip-ac: #dff7df;
    --markdown-alert-important-at: #8bb9ff;
    --markdown-alert-important-ac: #d0e2ff;
    --markdown-alert-warning-at: #ffd76a;
    --markdown-alert-warning-ac: #fff0bf;
    --markdown-alert-caution-at: #ff9aa2;
    --markdown-alert-caution-ac: #ffe0e3;
  }
}
[data-theme="dark"] {
  --markdown-alert-note-at: #8bd8ef;
  --markdown-alert-note-ac: #d8f4ff;
  --markdown-alert-tip-at: #7ee787;
  --markdown-alert-tip-ac: #dff7df;
  --markdown-alert-important-at: #8bb9ff;
  --markdown-alert-important-ac: #d0e2ff;
  --markdown-alert-warning-at: #ffd76a;
  --markdown-alert-warning-ac: #fff0bf;
  --markdown-alert-caution-at: #ff9aa2;
  --markdown-alert-caution-ac: #ffe0e3;
}
.markdown-alert-note  { --at: var(--markdown-alert-note-at, #1a7a8a);  --ac: var(--markdown-alert-note-ac, #1c4e58); }
.markdown-alert-tip   { --at: var(--markdown-alert-tip-at, #006b00);   --ac: var(--markdown-alert-tip-ac, #003a00); }
.markdown-alert-important { --at: var(--markdown-alert-important-at, #1a5bbd); --ac: var(--markdown-alert-important-ac, #0d3066); }
.markdown-alert-warning   { --at: var(--markdown-alert-warning-at, #946200); --ac: var(--markdown-alert-warning-ac, #4d3800); }
.markdown-alert-caution   { --at: var(--markdown-alert-caution-at, #b3261e); --ac: var(--markdown-alert-caution-ac, #5c1113); }

/* ── Details/Summary ── */
.content-html details {
  margin: .85rem 0;
  padding: .7rem .85rem .72rem .9rem;
  border: 1px solid var(--pico-muted-border-color);
  border-left: .28rem solid var(--pico-primary);
  border-radius: .38rem;
  background: var(--pico-card-background-color);
  color: var(--pico-color);
  line-height: 1.5;
}
.content-html details summary {
  cursor: pointer;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: .35rem;
}
.content-html details summary::-webkit-details-marker,
.content-html details summary::marker {
  display: none;
  content: "";
}
/* Clear Marmite's default chevron ::after to prevent double arrows */
.content-html details summary::after {
  display: none !important;
  content: none !important;
}
.content-html details summary::before {
  content: "▶";
  font-size: .72em;
  display: inline-block;
  width: 1.1rem;
  text-align: center;
  color: var(--pico-muted-color);
  transition: transform .15s;
  flex-shrink: 0;
}
.content-html details[open] summary::before {
  content: "▼";
}
.content-html details[open] summary {
  margin-bottom: .4rem;
}
.content-html details details {
  margin: .55rem 0 .55rem .5rem;
}
.content-html details > :last-child { margin-bottom: 0; }
.content-html details > :first-child { margin-top: 0; }

/* ── Tags / footer ── */
.data-tags-footer {
  margin-top: 1.25rem;
  padding-top: .75rem;
  border-top: 1px solid var(--pico-muted-border-color);
}
.content-authors-flex {
  gap: .75rem;
  align-items: flex-start;
}
.date-tags-container {
  gap: .35rem .7rem;
  flex-wrap: wrap;
  align-items: flex-start;
}
.data-tags-footer .content-date,
.data-tags-footer .content-date small {
  line-height: 1.45;
}
.content-tags {
  gap: .22rem .35rem;
  align-items: center;
  margin: .03rem 0 0;
  padding-left: 0;
}
.content-tags li {
  padding: .08rem .28rem;
  line-height: 1.35;
}
.content-tags li::before {
  content: "#";
  margin-right: .05rem;
}

/* ── Misc ── */
.prev-next-nav {
  display: flex;
  justify-content: space-between;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
  .content-with-toc {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }
  .content-toc-right { display: none; }
  .content-article-area {
    width: 100%;
    max-width: 100%;
    overflow-x: visible;
  }
}
@media (max-width: 768px) {
  .content-html table {
    font-size: .875rem;
    margin-right: -.25rem;
    padding-bottom: .15rem;
  }
  .content-html th,
  .content-html td {
    padding: .38rem .5rem;
  }
  .content-html details {
    margin: .72rem 0;
    padding: .62rem .72rem .64rem .78rem;
  }
  .content-html blockquote {
    margin: .68rem 0;
    padding: .52rem .7rem .52rem .82rem;
  }
  pre.marmite-code {
    font-size: .88em;
    margin: .58rem 0 .78rem;
    padding: .58rem .68rem;
  }
  .markdown-alert {
    margin: .72rem 0;
    padding: .62rem .72rem .64rem .78rem;
  }
  .data-tags-footer {
    margin-top: 1rem;
    padding-top: .65rem;
  }
  .content-tags li {
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .group-details details { margin-bottom: .7rem; }
  .group-details li.h-entry { margin-bottom: .24rem; }
  .group-details li.h-entry small {
    display: inline-block;
    margin-left: .3rem;
  }
}