/* Temple of Curiosity — hand-written theme CSS. Keep this file under 30 KB. */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body, h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; }
img, svg { max-width: 100%; display: block; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; }

/* ---------- Theme tokens ---------- */
:root {
  --color-bg: #fbfaf7;
  --color-bg-raised: #ffffff;
  --color-text: #1c1b19;
  --color-text-muted: #5b574f;
  --color-border: #e4e0d8;
  --color-accent: #9a6b1f;
  --color-accent-contrast: #ffffff;
  --color-link: #7a4e12;
  --color-link-visited: #8a5e22;
  --color-code-bg: #f1efe8;
  --color-focus: #1a5fb4;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --measure: 70ch;
  --radius: 6px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: #171614;
    --color-bg-raised: #201f1c;
    --color-text: #ece8e0;
    --color-text-muted: #b2ab9d;
    --color-border: #39362f;
    --color-accent: #e8b54a;
    --color-accent-contrast: #171614;
    --color-link: #f0c468;
    --color-link-visited: #d9ac57;
    --color-code-bg: #221f1b;
    --color-focus: #6cb6ff;
  }
}

:root[data-theme="dark"] {
  --color-bg: #171614;
  --color-bg-raised: #201f1c;
  --color-text: #ece8e0;
  --color-text-muted: #b2ab9d;
  --color-border: #39362f;
  --color-accent: #e8b54a;
  --color-accent-contrast: #171614;
  --color-link: #f0c468;
  --color-link-visited: #d9ac57;
  --color-code-bg: #221f1b;
  --color-focus: #6cb6ff;
}

/* ---------- Base ---------- */
html { color-scheme: light dark; }
body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* Sticky footer: on short pages <main> grows to fill the viewport, so the
     footer sits at the bottom of the screen instead of mid-page. */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

a { text-decoration-color: var(--color-border); text-underline-offset: 0.15em; }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.top-accent {
  height: 4px; width: 16rem; max-width: 60vw; background: var(--color-accent);
}

.skip-link {
  position: absolute; left: 0; top: 0; background: var(--color-accent);
  color: var(--color-accent-contrast); padding: 0.9em 1.25em; z-index: 100;
  min-width: 16rem; min-height: 44px; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center;
  text-align: center; font-weight: 600;
  transform: translateY(-100%);
}
/* :focus-visible, not :focus, so a mouse click doesn't reveal it -- only
   keyboard navigation (Tab) does. translateY(-100%) hides it by its own
   rendered height, instead of a guessed pixel offset that left a sliver
   of it peeking into view and clickable. */
.skip-link:focus-visible { transform: translateY(0); }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ---------- Header ---------- */
.site-header {
  border-bottom: 1px solid var(--color-border);
  padding: 1rem 1.25rem;
}
.header-row { display: flex; align-items: center; justify-content: space-between; }
.site-brand {
  font-weight: 700; font-size: 1.05rem; text-decoration: none;
  display: inline-flex; align-items: center;
  padding: 0.6rem 0.25rem; margin: -0.6rem -0.25rem; /* bigger tap target, same visual spacing */
}
.nav-toggle { display: none; font-size: 1.25rem; padding: 0.25rem; }

.site-nav {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  margin-top: 0.75rem; font-size: 0.95rem;
}
.site-nav a { text-decoration: none; color: var(--color-text-muted); }
.site-nav a:hover { color: var(--color-text); }

/* Center column: the primary links. Right column: search, language toggle,
   theme button, grouped together. The empty first column balances the grid
   so the middle column is genuinely centered in the header, not just
   centered within the leftover space after the right column. */
.nav-links { grid-column: 2; display: flex; gap: 1rem; justify-self: center; }
.nav-links a {
  font-weight: 700; display: inline-flex; align-items: center;
  padding: 0.6rem 0.25rem; margin: -0.6rem -0.25rem; /* bigger tap target, same visual spacing */
}
.nav-controls { grid-column: 3; display: flex; align-items: center; gap: 1rem; justify-self: end; }
#theme-toggle { font-size: 1.1rem; }
.rss-icon { display: inline-flex; color: var(--color-text-muted); }
.rss-icon:hover { color: var(--color-accent); }

.lang-switch { display: flex; align-items: center; gap: 0.4rem; font-size: 0.9rem; }
.lang-switch a { text-decoration: none; color: var(--color-text-muted); }
.lang-switch a:hover { color: var(--color-text); }
.lang-switch .lang-current { color: var(--color-text); font-weight: 600; }
.lang-switch .lang-sep { color: var(--color-border); }

.nav-search { position: relative; }
#search-input {
  width: 11rem; padding: 0.4em 0.7em; border: 1px solid var(--color-border);
  border-radius: var(--radius); background: var(--color-bg-raised); color: var(--color-text);
  font-size: 0.9rem; margin-top: 0;
}
#search-input::placeholder { color: var(--color-text-muted); }
#search-input:focus { outline: 2px solid var(--color-focus); outline-offset: 1px; }

@media (max-width: 640px) {
  .nav-toggle { display: block; }
  .site-nav { display: none; }
  .site-nav.is-open { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; }
  .nav-links { grid-column: auto; flex-direction: column; align-items: flex-start; gap: 0.75rem; justify-self: start; }
  .nav-controls { grid-column: auto; flex-wrap: wrap; justify-self: start; width: 100%; }
  #search-input { width: 100%; }
}

/* ---------- Layout ---------- */
/* flex: 1 fills the leftover height (sticky footer); width: 100% because a
   flex item with auto side margins would otherwise shrink to its content. */
main { display: block; flex: 1 0 auto; width: 100%; max-width: calc(var(--measure) + 30rem); margin: 0 auto; padding: 2rem 1.25rem 4rem; }

.page-heading { max-width: var(--measure); margin: 0 auto 1.5rem; font-size: 1.6rem; }

/* ---------- Post list / cards ---------- */
.post-list { max-width: var(--measure); margin: 0 auto; display: flex; flex-direction: column; gap: 1.25rem; }
.card-title { font-size: 1.3rem; line-height: 1.3; }
.card-title a { text-decoration: none; }
.card-title a:hover { text-decoration: underline; }

/* ---------- Hashtags ---------- */
.hashtags { margin: 0.15rem 0 0.6rem; }
.hashtag {
  display: inline-block; color: var(--color-accent); text-decoration: none;
  margin-right: 0.6em; font-size: 0.8em;
}
.hashtag:hover { text-decoration: underline; }

/* ---------- Pagination ---------- */
.pagination {
  max-width: var(--measure); margin: 2rem auto 0; display: flex;
  justify-content: space-between; align-items: center; font-size: 0.9rem;
}
.pagination-status { color: var(--color-text-muted); }

/* ---------- Post ---------- */
.post { max-width: var(--measure); margin: 0 auto; position: relative; }
.post-title { font-size: 2rem; line-height: 1.25; margin-bottom: 0.2rem; }
.post-date { color: var(--color-text-muted); font-size: 0.95rem; }

.post-body { margin-top: 1.75rem; }
.post-body h2 { font-size: 1.4rem; margin: 2.2rem 0 0.8rem; }
.post-body h3 { font-size: 1.15rem; margin: 1.8rem 0 0.6rem; }
.post-body p { margin: 1em 0; }
.post-body ul, .post-body ol { margin: 1em 0 1em 1.4em; }
.post-body blockquote {
  border-left: 3px solid var(--color-accent); margin: 1.4em 0; padding: 0.2em 1em;
  color: var(--color-text-muted);
}
.post-body a { color: var(--color-link); }
.post-body a:visited { color: var(--color-link-visited); }
.post-body code { background: var(--color-code-bg); padding: 0.15em 0.35em; border-radius: 4px; font-family: var(--font-mono); font-size: 0.9em; }
.post-body pre { background: var(--color-code-bg); padding: 1em; border-radius: var(--radius); overflow-x: auto; }
.post-body pre code { background: none; padding: 0; }
.post-body .headerlink { margin-left: 0.4em; opacity: 0; text-decoration: none; color: var(--color-text-muted); }
.post-body h2:hover .headerlink, .post-body h3:hover .headerlink { opacity: 1; }
.post-body img { border-radius: var(--radius); margin: 1.2em 0; }

/* ---------- Table of contents (left outline, Google Docs style) ---------- */
/* Only shown where there's room for a margin column beside the centered
   text; on narrower screens the article reads on its own. */
.toc-outline { display: none; }
.post-body :is(h2, h3, h4) { scroll-margin-top: 1.5rem; }

@media (min-width: 1200px) {
  /* Three columns: outline | text | empty mirror column, so the text stays
     centered exactly where it is on pages without an outline. */
  .post-layout.has-toc {
    display: grid; column-gap: 2rem;
    grid-template-columns: minmax(0, 1fr) minmax(0, var(--measure)) minmax(0, 1fr);
  }
  .post-layout.has-toc .post { grid-column: 2; margin: 0; }
  .toc-outline {
    display: block; grid-column: 1; grid-row: 1; justify-self: end; align-self: start;
    position: sticky; top: 1.5rem; width: 100%; max-width: 13rem;
    max-height: calc(100vh - 3rem); overflow-y: auto; font-size: 0.85rem; line-height: 1.4;
  }
  .toc-outline .toc > ul { margin-top: 5.5rem; } /* roughly level with the first body text */
  .toc-outline ul { list-style: none; margin: 0; padding: 0; }
  .toc-outline ul ul { padding-left: 0.9rem; }
  .toc-outline a {
    display: block; padding: 0.3rem 0.6rem; border-left: 2px solid transparent;
    color: var(--color-text-muted); text-decoration: none;
  }
  .toc-outline a:hover { color: var(--color-text); }
  .toc-outline a.is-active { color: var(--color-link); border-left-color: var(--color-accent); font-weight: 600; }
}

/* ---------- Archive ---------- */
.archive-year { max-width: var(--measure); margin: 0 auto 1.75rem; }
.archive-year h2 { font-size: 1.2rem; color: var(--color-text-muted); margin-bottom: 0.5rem; }
.archive-list { list-style: none; display: flex; flex-direction: column; gap: 0.4rem; }
.archive-list time { color: var(--color-text-muted); font-size: 0.9rem; margin-right: 0.75rem; display: inline-block; width: 3.5rem; }
.archive-list a { text-decoration: none; }
.archive-list a:hover { text-decoration: underline; }

/* ---------- Tags ---------- */
.tag-cloud { max-width: var(--measure); margin: 0 auto; list-style: none; display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem; }
.tag-cloud a { text-decoration: none; color: var(--color-accent); }
.tag-count { color: var(--color-text-muted); font-size: 0.85em; }

/* ---------- Comments ---------- */
.comments { max-width: var(--measure); margin: 2.5rem auto 0; }
.comments-heading { font-size: 1.1rem; margin-bottom: 1rem; }

/* ---------- Search results dropdown ---------- */
.search-results {
  list-style: none; position: absolute; top: calc(100% + 0.4rem); right: 0; z-index: 200;
  width: 20rem; max-width: 80vw; max-height: 60vh; overflow-y: auto;
  background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius);
  padding: 0.75rem; display: flex; flex-direction: column; gap: 0.9rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}
.search-results[hidden] { display: none; }
.search-results a { text-decoration: none; }
.search-results a:hover { text-decoration: underline; }
.search-results p { color: var(--color-text-muted); font-size: 0.9rem; margin-top: 0.2rem; }
.search-results mark { background: var(--color-accent); color: var(--color-accent-contrast); }

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid var(--color-border); margin-top: 3rem; padding: 1.5rem 1.25rem;
  text-align: center; color: var(--color-text-muted); font-size: 0.9rem;
}
.site-footer a { text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.site-footer-copyright { margin-top: 0.4rem; font-size: 0.78rem; color: var(--color-text-muted); }

/* ---------- 404 ---------- */
.not-found { max-width: var(--measure); margin: 3rem auto; text-align: center; }
.not-found h1 { font-size: 3rem; }