/* =========================================================
   BetaBots — styles.css
   Warm editorial palette · Dark charcoal navbar · Neutral body
   ========================================================= */

/* ---------- Fonts ---------- */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ---------- Design tokens ---------- */

:root {
  --color-bg:            #f5f5f3;   /* neutral off-white, faint warm undertone */
  --color-surface:       #ededea;   /* slightly deeper for pills, cards */
  --color-border:        #d8d8d4;   /* neutral divider */
  --color-border-light:  #e2e2de;   /* lighter rule */

  --color-nav-bg:        #272920;   /* dark charcoal navbar */
  --color-nav-border:    #3a3c32;   /* subtle navbar bottom edge */
  --color-nav-text:      #c8c4ba;   /* muted cream nav links */
  --color-nav-hover:     #f0ece3;   /* bright cream on hover */
  --color-nav-active:    #b0a493;   /* warm stone active indicator */

  --color-text-primary:  #27231b;   /* near-black warm */
  --color-text-secondary:#6C757D;   /* mid-tone warm brown */
  --color-text-muted:    #7a7062;   /* metadata / captions */

  --color-accent:        #9c9080;   /* warm stone — links, active states */
  --color-accent-hover:  #7a6f62;   /* deeper stone on hover */

  --color-heading:       #1f1c15;   /* richest dark for titles */

  --color-pill-bg:       #e8e8e4;
  --color-pill-border:   #ccccc8;
  --color-pill-text:     #5a5a55;

  /* Code block tokens — warm off-white, paired with .ai-turn */
  --code-bg:             #fafaf8;   /* matches .ai-turn background */
  --code-border:         #d8d8d4;
  --code-text:           #27231b;
  --code-inline-bg:      #ededea;   /* inline code, slightly deeper */
  --code-inline-text:    #3d3830;
  --code-header-bg:      #f0f0ee;   /* fold button bar */
  --code-comment:        #8a8275;
  --code-keyword:        #7a5a3a;   /* warm brown for keywords */
  --code-string:         #5a6b3a;   /* muted olive for strings */
  --code-number:         #8a5a4a;   /* warm rust for numbers */
  --code-function:       #4a5a6b;   /* slate blue for functions */
}

/* ---------- Base ---------- */

body {
  font-family: 'Inter', sans-serif;
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--color-text-primary);
  background: var(--color-bg);
}

h1, h2, h3, h4, h5, h6 {
  color: var(--color-heading);
  font-weight: 700;
  line-height: 1.2;
}

p, li {
  max-width: 68ch;
}

a {
  color: var(--color-accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.12em;
}

a:hover {
  color: var(--color-accent-hover);
}

/* ---------- Header ---------- */

.navbar {
  background: var(--color-nav-bg);
  border-bottom: 1px solid var(--color-nav-border);
  padding-top: 0.85rem;
  padding-bottom: 0.85rem;
}

.navbar-brand,
.navbar-title {
  font-weight: 600;
  letter-spacing: 0.01em;
  font-size: 1.05rem;
  color: #f0ece3 !important;
}

.navbar-nav .nav-link {
  font-weight: 500;
  color: var(--color-nav-text) !important;
  transition: color 0.15s ease;
}

.navbar-nav .nav-link:hover {
  color: var(--color-nav-hover) !important;
}

.navbar-nav .nav-link.active {
  color: var(--color-nav-active) !important;
}

.navbar .nav-link,
.navbar .quarto-navigation-tool {
  color: var(--color-nav-text) !important;
}

.navbar .quarto-navigation-tool:hover {
  color: var(--color-nav-hover) !important;
}

/* ---------- Global width ---------- */

main.content {
  max-width: 780px !important;
}

.container,
.container-fluid,
.quarto-container,
#quarto-content,
#quarto-document-content {
  max-width: 100% !important;
}

#quarto-content {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

#quarto-content .content,
.page-layout-article .content,
.page-layout-full .content {
  margin-left: auto;
  margin-right: auto;
}

/* ---------- Hide the empty title block (homepage only) ---------- */

body.home .quarto-title-block {
  display: none;
}

/* ---------- Hide right-side category panel ---------- */

.quarto-listing-category {
  display: none !important;
}

/* ---------- Listing wrapper — medium width ---------- */

.quarto-listing-container-default,
.quarto-listing-container-default .list,
.quarto-listing-container-default .listing {
  width: 100%;
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
}

/* ---------- Post rows — horizontal card ---------- */

div.quarto-post.image-right {
  display: grid;
  grid-template-columns: 1fr 180px;
  grid-template-rows: auto auto 1fr;
  grid-template-areas:
    "body  thumb"
    "meta  thumb"
    ".     thumb";
  column-gap: 1.75rem;
  align-items: start;
  width: 100%;
  padding: 1.5rem 0 0 0;
  border-bottom: 1px solid var(--color-border);
}

div.quarto-post.image-left,
div.quarto-post:not(.image-right) {
  display: grid;
  grid-template-columns: 180px 1fr;
  grid-template-rows: auto auto 1fr;
  grid-template-areas:
    "thumb body"
    "thumb meta"
    "thumb .";
  column-gap: 1.75rem;
  align-items: start;
  width: 100%;
  padding: 1.5rem 0 0 0;
  border-bottom: 1px solid var(--color-border);
}

/* Thumbnail */
div.quarto-post .thumbnail {
  grid-area: thumb;
  width: 100%;
}

div.quarto-post .thumbnail img,
div.quarto-post .thumbnail-image {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 0.25rem;
}

/* Body */
div.quarto-post .body {
  grid-area: body;
  min-width: 0;
  width: 100%;
}

/* Metadata — date, placed in meta area */
div.quarto-post .metadata {
  grid-area: meta;
  font-size: 0.88rem;
  line-height: 1.4;
  color: var(--color-text-muted);
  padding: 0.2rem 0 1.25rem 0;
  align-self: start;
}

/* No thumbnails in use, so force plain block flow. Quarto's default listing
   makes .quarto-post a flex column and gives .metadata `margin-block-start:auto`
   to pin the date to the bottom of the card (so dates align across a row). When
   a card is taller than its content that floats the date down, opening the gap
   above it. block flow + margin:0 cancel both. */
div.quarto-post,
div.quarto-post.image-right,
div.quarto-post.image-left {
  display: block !important;
}

div.quarto-post .metadata {
  margin-top: 0 !important;
  padding-top: 0.3rem;
}

/* Title */
div.quarto-post .listing-title,
div.quarto-post .title,
.quarto-listing .listing-title {
  font-size: 1.32rem;
  line-height: 1.18;
  font-weight: 700;
  margin-bottom: 0.4rem;
  color: var(--color-heading);
}

div.quarto-post .listing-title a,
div.quarto-post .title a,
.quarto-listing .listing-title a {
  color: var(--color-heading);
  text-decoration: none;
}

div.quarto-post .listing-title a:hover,
div.quarto-post .title a:hover,
.quarto-listing .listing-title a:hover {
  color: var(--color-accent);
}

/* Tags — sit between title and description */
.quarto-listing .listing-categories,
div.quarto-post .listing-categories {
  margin-top: 0.55rem;
  margin-bottom: 0.6rem;
}

/* Description. Do NOT put -webkit-line-clamp on the .listing-description
   wrapper: its child is a wrapping <a>, not text, so the clamp RESERVES ~3
   lines of height — which is the empty gap above the date on wide windows
   (where the text is only 1 line). Clamp the <p> only; it holds the text
   directly, so it clamps without reserving. */
div.quarto-post .listing-description {
  color: var(--color-text-secondary);
  max-width: 100%;
  margin-bottom: 0.5rem;
}

div.quarto-post .listing-description p {
  margin: 0;
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Hide author name */
div.quarto-post .metadata .listing-author {
  display: none;
}


/* ---------- Hero section ---------- */

.hero {
  padding: 4rem 0 3rem 0;
  max-width: 52rem;
}

.hero h1 {
  font-size: 3rem;
  line-height: 1.1;
  margin-bottom: 1rem;
}

.hero p {
  font-size: 1.2rem;
  margin-bottom: 1.25rem;
}

.hero-btn {
  display: inline-block;
  padding: 0.5rem 1rem;
  margin-right: 0.75rem;
  border-radius: 0.5rem;
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
}

.hero-btn-primary {
  background: #0d6efd;
  color: white;
}

.hero-btn-primary:hover {
  background: #0b5ed7;
  color: #fff;
}


/* ---------- Post title banner ---------- */

/* Use the native `subtitle` for the visible line (the look you liked). Hide the
   duplicate `description` that Quarto also renders in the banner — it stays in
   the front matter to drive SEO meta tags + the listing cards. */
.quarto-title-banner .description {
  display: none;
}

.quarto-title-banner .subtitle {
  color: var(--color-text-secondary);
  font-weight: 300;
}

/* Banner mode leaves a large gap before the author/date — tighten it. */
.quarto-title-banner {
  padding-bottom: 1rem;
}

.quarto-title-meta {
  margin-top: 0.75rem;
}

.hero-btn-secondary {
  border: 1px solid #ccc;
  color: inherit;
}


/* ---------- Category pills ---------- */

.listing-category,
.quarto-category {
  display: inline-block;
  border: 1px solid var(--color-pill-border);
  background: var(--color-pill-bg);
  color: var(--color-pill-text);
  border-radius: 0.42rem;
  padding: 0.08rem 0.42rem;
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1.2;
  margin-right: 0.4rem;
  margin-bottom: 0.35rem;
  letter-spacing: 0.03em;
}

/* ---------- About page header ---------- */

.about-header {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
  margin: 0.5rem 0 1rem 0;
}

.about-photo-wrap {
  flex-shrink: 0;
}

.about-photo-wrap img {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0;
}

.about-bio {
  flex: 1;
  min-width: 0;
}

.about-bio p:first-child {
  margin-top: 0;
}

@media (max-width: 600px) {
  .about-header {
    flex-direction: column;
    gap: 1.25rem;
  }
  .about-photo-wrap img {
    width: 160px;
    height: 160px;
  }
}

/* ---------- Article content ---------- */

.page-layout-article .content,
.page-layout-full .content {
  max-width: 860px;
}

.about-page p,
main p {
  font-family: 'Inter', sans-serif;
  font-size: 1.08rem;
  line-height: 1.6;
  color: var(--color-text-secondary);
}

main h1, main h2, main h3,
main h4, main h5, main h6 {
  color: var(--color-heading);
}

/* ---------- Code blocks ---------- */

/* Block-level code: warm off-white, pairs with .ai-turn */
div.sourceCode,
pre.sourceCode,
pre {
  background: var(--code-bg) !important;
  color: var(--code-text);
  border: 1px solid var(--code-border);
  border-radius: 6px;
  margin: 1.5rem 0;
  overflow: hidden;
}

pre {
  padding: 1rem 1.2rem;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.88rem;
  line-height: 1.55;
  overflow-x: auto;
}

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

/* Inline code: small pill, deeper background to stand apart from .ai-turn */
code:not(pre code) {
  background: var(--code-inline-bg);
  color: var(--code-inline-text);
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.86em;
  padding: 0.12em 0.38em;
  border-radius: 4px;
  border: 1px solid var(--color-border-light);
}

/* Quarto syntax highlighting — warm editorial palette */
pre code .co,                       /* comments */
pre code span.co {
  color: var(--code-comment);
  font-style: italic;
}

pre code .kw,                       /* keywords */
pre code span.kw,
pre code .cf,                       /* control flow */
pre code span.cf {
  color: var(--code-keyword);
  font-weight: 500;
}

pre code .st,                       /* strings */
pre code span.st,
pre code .vs,                       /* verbatim strings */
pre code span.vs {
  color: var(--code-string);
}

pre code .dv,                       /* decimal values */
pre code span.dv,
pre code .fl,                       /* floats */
pre code span.fl,
pre code .bn,                       /* base-n numbers */
pre code span.bn {
  color: var(--code-number);
}

pre code .fu,                       /* functions */
pre code span.fu,
pre code .bu,                       /* built-ins */
pre code span.bu {
  color: var(--code-function);
}

pre code .va,                       /* variables */
pre code span.va,
pre code .at,                       /* attributes */
pre code span.at {
  color: var(--code-text);
}

pre code .op,                       /* operators */
pre code span.op {
  color: var(--color-text-secondary);
}

/* Per-block opt-in wrapping */
.wrap-code pre,
.wrap-code pre code {
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* ---------- Code folding (Quarto-generated + manual) ---------- */

/* Quarto wraps folded code in <details> — sometimes with .code-fold,
   sometimes without. Target details inside source code containers too. */
details.code-fold,
div.sourceCode details,
.quarto-source-code-container details {
  background: var(--code-bg);
  border: 1px solid var(--code-border);
  border-radius: 6px;
  margin: 1.5rem 0;
  overflow: hidden;
}

details.code-fold > div.sourceCode,
details.code-fold > pre,
details.code-fold pre.sourceCode,
div.sourceCode details > div.sourceCode,
div.sourceCode details > pre,
.quarto-source-code-container details > div.sourceCode,
.quarto-source-code-container details > pre {
  margin: 0;
  border: none;
  border-radius: 0;
  border-top: 1px solid var(--code-border);
}

/* Flatten nested frames inside code-fold details */
details.code-fold div.sourceCode,
details.code-fold pre,
details.code-fold pre.sourceCode {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
}

/* The fold toggle */
details.code-fold > summary,
div.sourceCode details > summary,
.quarto-source-code-container details > summary {
  background: var(--code-header-bg);
  color: var(--color-text-secondary);
  font-family: 'Inter', sans-serif;
  font-size: 0.82rem;
  font-weight: 500;
  padding: 0.55rem 1rem 0.55rem 2rem;
  cursor: pointer;
  list-style: none;
  position: relative;
  user-select: none;
  transition: background 0.15s ease, color 0.15s ease;
}

details.code-fold > summary:hover,
div.sourceCode details > summary:hover,
.quarto-source-code-container details > summary:hover {
  background: #e8e8e4;
  color: var(--color-text-primary);
}

/* Hide native disclosure marker */
details > summary::-webkit-details-marker { display: none; }
details > summary::marker { content: ''; }

/* Custom chevron */
details.code-fold > summary::before,
div.sourceCode details > summary::before,
.quarto-source-code-container details > summary::before {
  content: '';
  position: absolute;
  left: 0.85rem;
  top: 50%;
  width: 0.45rem;
  height: 0.45rem;
  border-right: 1.5px solid var(--color-text-muted);
  border-bottom: 1.5px solid var(--color-text-muted);
  transform: translateY(-65%) rotate(-45deg);
  transition: transform 0.18s ease;
}

details.code-fold[open] > summary::before,
div.sourceCode details[open] > summary::before,
.quarto-source-code-container details[open] > summary::before {
  transform: translateY(-30%) rotate(45deg);
}

/* ---------- Per-block wrapping (broader selectors) ---------- */

.wrap-code pre,
.wrap-code pre code,
div.sourceCode.wrap-code pre,
div.sourceCode.wrap-code pre code,
details.wrap-code pre,
details.wrap-code pre code {
  white-space: pre-wrap !important;
  word-wrap: break-word;
  overflow-wrap: break-word;
  line-height: 1.65;
}

/* ---------- Copy buttons ---------- */

div.sourceCode,
pre,
details.code-fold,
.wrap-code {
  position: relative;
}

.code-copy-button,
.custom-copy-button {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background: var(--code-header-bg);
  border: 1px solid var(--code-border);
  color: var(--color-text-muted);
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
  font-weight: 500;
  padding: 0.3rem 0.55rem;
  border-radius: 4px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  line-height: 1;
}

div.sourceCode:hover .code-copy-button,
div.sourceCode:hover .custom-copy-button,
pre:hover .code-copy-button,
details:hover .custom-copy-button {
  opacity: 1;
}

.code-copy-button:hover,
.custom-copy-button:hover {
  background: #e8e8e4;
  color: var(--color-text-primary);
}

.code-copy-button.code-copy-button-checked,
.custom-copy-button.copied {
  color: var(--code-string);
}

/* Inside folded blocks, position relative to details */
details .custom-copy-button {
  top: 0.4rem;
  right: 0.5rem;
}

/* ---------- Footer ---------- */

/* Outer wrapper — transparent, no border */
footer.footer {
  background: transparent !important;
  border: none !important;
  margin-top: 0 !important;
  padding: 0 !important;
  min-height: auto !important;
}

/* Inner bar — styled */
.nav-footer {
  background: #f0f0ee !important;
  border-top: 1px solid var(--color-border) !important;
  border-bottom: none !important;
  color: var(--color-text-muted) !important;
  margin-top: 3rem !important;
  padding: 0.85rem 1.2rem 0.9rem 1.2rem !important;
  min-height: auto !important;
}

.nav-footer,
.nav-footer *,
.nav-footer a,
.nav-footer .nav-footer-left,
.nav-footer .nav-footer-center,
.nav-footer .nav-footer-right {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.8rem !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
  color: var(--color-text-muted) !important;
}

.nav-footer .nav-footer-left,
.nav-footer .nav-footer-center,
.nav-footer .nav-footer-right {
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
}

.nav-footer a:hover {
  color: var(--color-accent) !important;
  text-decoration: underline;
}

/* ---------- LLM Conversation blocks ---------- */

.conversation {
  margin: 2rem 0;
}

.user-turn::before {
  content: "Me";
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #c8c4ba;
  margin-bottom: 4px;
}
.ai-turn::before {
  content: "Claude";
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 6px;
}

.user-turn,
.user-turn p {
  background: #4a4a47;
  color: #f5f2ee !important;
  padding: 12px 18px;
  border-radius: 18px 18px 4px 18px;
  margin: 0 0 20px auto;
  max-width: 85%;
  width: fit-content;
  font-size: 1rem;
  line-height: 1.55;
}

.user-turn p {
  margin: 0;
  padding: 0;
  background: transparent;
  border-radius: 0;
  width: auto;
  max-width: none;
}

.ai-turn {
  background: #fafaf8;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 16px 20px;
  margin: 0 0 12px 2rem;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--color-text-primary);
}

.ai-turn p {
  color: var(--color-text-primary) !important;
  margin-bottom: 0.75rem;
}

.ai-turn p:last-child {
  margin-bottom: 0;
}

/* Code blocks inside .ai-turn — slightly deeper bg so they stand out from the turn */
.ai-turn pre,
.ai-turn div.sourceCode {
  background: #f0f0ee !important;
  border-color: #e0e0dc;
}

.ai-turn code:not(pre code) {
  background: #ededea;
}

/* ---------- Table of Contents ---------- */

/* Space below "On this page" heading */
#toc-title {
  margin-bottom: 0.90rem;
}

/* Increase spacing between TOC items */
#TOC li {
  margin-bottom: 0.5rem;
}

/* TABLE OF CONTENTS */
#TOC > ul > li {
  padding-left: 0.05rem;
  margin-bottom: 0.40rem;
}

/* Optional: slightly less space for H3 sub-items */
#TOC > ul > li > ul > li {
  margin-bottom: 0.10rem;
}

/* Increase indent for H3 sub-items */
#TOC > ul > li > ul {
  padding-left: 1.10rem;
}

/* If you have H4s, indent those further */
#TOC > ul > li > ul > li > ul {
  padding-left: 1.25rem;
}

/* ---------- Medium screens ---------- */

@media (max-width: 1280px) {
  #quarto-content .content,
  .page-layout-article .content,
  .page-layout-full .content {
    max-width: 860px;
  }
}

/* ---------- Narrow desktop / tablet ---------- */

@media (max-width: 1024px) {
  #quarto-content {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  div.quarto-post .listing-title,
  div.quarto-post .title,
  .quarto-listing .listing-title {
    font-size: 1.2rem;
  }
}

/* ---------- Mobile ---------- */

@media (max-width: 520px) {
  .navbar {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }

  #quarto-content {
    padding-left: 0.9rem;
    padding-right: 0.9rem;
  }

  div.quarto-post.image-right,
  div.quarto-post.image-left,
  div.quarto-post {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas:
      "thumb"
      "body"
      "meta";
    padding: 0 0 0 0;
  }

  div.quarto-post .thumbnail {
    width: 100%;
    margin-bottom: 0.5rem;
  }

  div.quarto-post .metadata {
    padding: 0.2rem 0 1rem 0;
  }

  div.quarto-post .listing-title,
  div.quarto-post .title,
  .quarto-listing .listing-title {
    font-size: 1.08rem;
  }

  pre {
    font-size: 0.82rem;
    padding: 0.85rem 1rem;
  }
}