/* ============================================================
   pumita's blog — Chicago7-inspired skin for Quarto
   Look & feel ported from https://github.com/akopdev/hugo-theme-chicago7
   (monochrome palette, hard shadows, double-line rules) — keeping our
   own font-family instead of the theme's "ChicagoFLF" pixel font.
   ============================================================ */

:root {
  --chi-ink: #000;
  --chi-paper: #fff;
  --chi-muted: #646b79;
  --chi-border: #dfe3eb;
  --chi-shadow: 2px 2px 0px var(--chi-ink);
}

/* Monochrome palette override (was flatly's navy/teal) */
:root,
.quarto-light {
  --bs-primary: var(--chi-ink);
  --bs-primary-rgb: 0, 0, 0;
  --bs-link-color: var(--chi-ink);
  --bs-link-color-rgb: 0, 0, 0;
  --bs-link-hover-color: var(--chi-ink);
  --bs-body-color: #111;
}

a {
  color: var(--chi-ink);
  text-decoration: underline;
  text-decoration-thickness: 0.5px;
  text-underline-offset: 0.2em;
}
a:hover {
  color: var(--chi-ink);
  opacity: 0.65;
}

/* Justify prose while leaving interface labels and card metadata untouched. */
.content > p,
.content section > p,
.content :is(h1, h2, h3, h4, h5, h6),
#title-block-header .description {
  text-align: justify;
  text-justify: inter-word;
}

/* ---------------- Header / navbar ---------------- */
/* Quarto's `pinned: false` navbar uses Headroom: it remains fixed but
   slides away while scrolling. Make it a normal document-flow element. */
body.nav-fixed {
  /* Quarto sets this offset inline with JavaScript for fixed headers. */
  padding-top: 0 !important;
}
#quarto-header.fixed-top {
  position: static !important;
  transform: none !important;
  transition: none;
  will-change: auto;
}

#quarto-header .navbar {
  background: var(--chi-paper) !important;
  border-bottom: medium double var(--chi-ink);
  box-shadow: none;
  color-scheme: light;
  --bs-navbar-color: var(--chi-ink);
  --bs-navbar-hover-color: var(--chi-ink);
  --bs-navbar-active-color: var(--chi-ink);
  --bs-navbar-brand-color: var(--chi-ink);
  --bs-navbar-brand-hover-color: var(--chi-ink);
  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.navbar-brand .navbar-title {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--chi-ink) !important;
}

#quarto-header .navbar-nav .nav-link {
  color: var(--chi-ink) !important;
  text-decoration: none;
  font-weight: 500;
}
#quarto-header .navbar-nav .nav-link:hover,
#quarto-header .navbar-nav .nav-link.active {
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

/* Remove the navigation bar; retain Quarto's search control at top right. */
#quarto-header.fixed-top {
  position: relative !important;
  height: 0;
}
#quarto-header .navbar {
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent !important;
}
#quarto-header .navbar-brand-container,
#quarto-header .navbar-toggler,
#quarto-header .navbar-collapse,
#quarto-header .quarto-navbar-tools {
  display: none !important;
}
#quarto-header #quarto-search {
  position: absolute;
  z-index: 2;
  top: 1.25rem;
  right: 1.75rem;
}
#quarto-search .aa-SubmitIcon {
  width: 16px;
  height: 16px;
}
.back-button {
  position: absolute;
  z-index: 2;
  text-decoration: none;
  top: 1.25rem;
  left: 1.75rem;
  font-weight: 500;
}

/* ---------------- Rules (hr) with the Chicago "§" flourish ---------------- */
main hr {
  border: none;
  border-top: medium double var(--chi-ink);
  color: var(--chi-ink);
  text-align: center;
  overflow: visible;
  margin: 3rem 0;
  position: relative;
}
main hr::after {
  content: "§";
  display: inline-block;
  position: relative;
  top: -0.9em;
  padding: 0 0.35em;
  background: var(--chi-paper);
  font-size: 1.2em;
}

/* ---------------- Buttons / pill links (categories, tags) ---------------- */
.quarto-title .quarto-categories .quarto-category,
.article-footer-meta .quarto-category,
.listing-categories .listing-category {
  border: 1px solid var(--chi-ink);
  box-shadow: var(--chi-shadow);
  border-radius: 4px;
  background: var(--chi-paper);
  color: var(--chi-ink);
  font-weight: 500;
  text-transform: none;
}
.listing-categories .listing-category:hover {
  cursor: pointer;
  background: var(--chi-ink);
  color: var(--chi-paper);
}

.btn,
.page-navigation a {
  box-shadow: var(--chi-shadow);
  border-radius: 4px;
}

/* ---------------- Blockquotes ---------------- */
.content blockquote,
blockquote.blockquote {
  border-left: 4px solid var(--chi-ink);
  background: rgba(0, 0, 0, 0.03);
  border-radius: 0;
  padding: 0.75rem 1.1rem;
  color: inherit;
  font-style: italic;
}

/* ---------------- Code blocks ---------------- */
/* Border/shadow must live on the element that actually scrolls
   (div.sourceCode wraps quarto's syntax-highlighted blocks; a plain
   `pre` handles raw fenced blocks like http:). If both the scroll
   container AND its wider inner content had their own border, the
   inner border would visibly "travel" with the horizontal scroll,
   looking like a second box sliding inside the first one. */
div.sourceCode,
pre.http,
.content pre:not(div.sourceCode pre) {
  border: 1px solid var(--chi-ink);
  box-shadow: var(--chi-shadow);
  border-radius: 4px;
  overflow-x: auto;
}
div.sourceCode pre.sourceCode {
  border: none;
  box-shadow: none;
  border-radius: 0;
}
.content :not(pre) > code {
  background: var(--chi-ink);
  color: var(--chi-paper);
  border-radius: 3px;
  padding: 0.1em 0.35em;
}

/* ---------------- Post title / meta ---------------- */
#title-block-header .title {
  /* Padding is part of the title's grid cell, so the breathing room is visible. */
  margin: 0;
  padding: 2rem 0 1rem;
  font-size: 2.25rem;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-weight: 700;
}

/* Post metadata: date on the left and categories on the right under the subtitle. */
#title-block-header.quarto-title-block.default {
  display: grid;
  margin-top: 1.5rem;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 1rem;
  row-gap: 0.5rem;
}
#title-block-header.quarto-title-block.default .quarto-title,
#title-block-header.quarto-title-block.default > div:has(> .description) {
  display: contents;
}
#title-block-header.quarto-title-block.default .title,
#title-block-header.quarto-title-block.default .description {
  grid-column: 1 / -1;
}
#title-block-header.quarto-title-block.default .description {
  text-align: center;
}
#title-block-header.quarto-title-block.default .quarto-categories {
  grid-column: 2;
  grid-row: 3;
  justify-self: end;
  align-self: center;
  margin: 0;
}
#title-block-header.quarto-title-block.default .quarto-title-meta {
  grid-column: 1;
  grid-row: 3;
  display: flex;
  justify-content: flex-start;
  font-size: 0.8rem;
}
#title-block-header.quarto-title-block.default .quarto-title-meta > div {
  display: flex;
  align-items: baseline;
  gap: 0.4em;
}
#title-block-header.quarto-title-block.default .quarto-title-meta-heading {
  margin-top: 0;
}
#title-block-header.quarto-title-block.default .quarto-title-meta p {
  margin-bottom: 0;
}
.post-reading-tools {
  grid-column: 1 / -1;
  grid-row: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.75rem;
  margin-bottom: 1rem;
}
.reading-stats {
  color: var(--chi-muted);
  /* Match Quarto's rendered date text, not its larger metadata container. */
  font-size: 0.72rem;
}
.article-footer-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 2rem;
  margin-bottom: 0.5rem;
}
.article-footer-meta .quarto-title-meta {
  display: flex;
  justify-content: flex-start;
  font-size: 0.8rem;
}
.article-footer-meta .quarto-title-meta > div {
  display: flex;
  align-items: baseline;
  gap: 0.4em;
}
.article-footer-meta .quarto-title-meta-heading,
.article-footer-meta .quarto-title-meta p {
  margin: 0;
}
.article-footer-meta .quarto-categories {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.3rem;
  margin: 0;
}
/* Keep footer categories and the copy control visually identical. */
.article-footer-meta .quarto-category,
.copy-markdown-button {
  box-sizing: border-box;
  border: 1px solid var(--chi-ink);
  border-radius: 4px;
  box-shadow: var(--chi-shadow);
  appearance: none;
  background: var(--chi-paper);
  color: var(--chi-ink);
  padding: 0.25em 0.75em;
  font: inherit;
  font-size: 0.65em;
  font-weight: 500;
  line-height: normal;
  opacity: 0.6;
  text-transform: none;
}

.quarto-title-meta,
.listing-date,
time {
  color: var(--chi-muted);
}

@media (max-width: 576px) {
  #title-block-header.quarto-title-block.default .quarto-title-meta,
  #title-block-header.quarto-title-block.default .quarto-categories {
    grid-column: 1 / -1;
    justify-self: start;
  }
  #title-block-header.quarto-title-block.default .quarto-categories {
    grid-row: 4;
  }
  .post-reading-tools {
    grid-row: 5;
    align-items: center;
    flex-direction: row;
    justify-content: space-between;
  }
  .article-footer-meta {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* ---------------- Post listing cards ---------------- */
.quarto-grid-item {
  border: 1px solid var(--chi-border);
  border-radius: 6px;
  overflow: hidden;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.quarto-grid-item:hover {
  transform: translateY(-3px);
  box-shadow: var(--chi-shadow);
  border-color: var(--chi-ink);
}

.listing-title {
  text-align: center;
  margin-bottom: 2rem;
  text-transform: uppercase;
}

/* Place home-page categories at the top of the text content. */
.quarto-grid-item .post-contents {
  display: flex;
  flex-direction: column;
}
.quarto-grid-item .listing-categories {
  order: -1;
  justify-content: center;
  margin-bottom: 0.75rem;
  text-align: center;
}
.quarto-grid-item .listing-categories .listing-category {
  padding: 0.25em 0.75em;
  font-size: 0.65em;
  text-transform: none;
}
#quarto-margin-sidebar .category {
  font-size: 0.765rem;
}
/* Refine the vertical rhythm of title, summary, and date in listing cards. */
.quarto-grid-item .listing-title {
  margin-bottom: 0.6rem !important;
  font-size: 0.94rem;
  font-weight: 700;
  text-align: center;
}
.quarto-grid-item .listing-description {
  font-size: 0.765rem;
  text-align: justify;
  text-justify: inter-word;
}
.quarto-grid-item .listing-description p {
  margin-bottom: 0;
}
.quarto-grid-item .card-attribution {
  padding-top: 0.6rem;
}
.quarto-grid-item .card-attribution,
.quarto-grid-item .listing-date {
  font-size: 0.72rem;
  text-transform: none;
}

@media (min-width: 992px) {
  /* Align the home-page category filter with the page heading. */
  #quarto-margin-sidebar:not(:empty) {
    margin-top: 5rem;
  }
}

/* Center and soften images inside posts */
.content img {
  display: block;
  margin: 1.5rem auto;
  border-radius: 6px;
  max-width: 100%;
  height: auto;
}
/* Listing thumbnails should fill their card edge-to-edge, without post-image spacing. */
.quarto-grid-item .thumbnail-image {
  margin: 0;
}

/* ---------------- Footer ---------------- */
/* Quarto reserves a 60px empty grid row beneath content. Posts already have
   their metadata at the end, so keep just a small gap before the footer. */
#quarto-content:has(.article-footer-meta) {
  grid-template-rows: [content-top] minmax(max-content, 1fr) [content-bottom] minmax(8px, max-content) [page-bottom];
}
#quarto-content:has(.article-footer-meta) main.content {
  margin-bottom: 0;
}

#quarto-footer,
.page-footer,
footer.footer {
  border-top: medium double var(--chi-ink);
  margin-top: 0.5rem;
  padding-top: 1.5rem;
  text-align: center;
  color: var(--chi-muted);
}
footer.footer a {
  color: var(--chi-ink);
}

@media (max-width: 576px) {
  footer.footer {
    padding-top: 0.5rem;
  }
  /* Quarto's footer nav has a 3.5em minimum height by default. */
  footer.footer .nav-footer {
    min-height: 0;
    padding-top: 0;
    padding-bottom: 0;
  }
  footer.footer .nav-footer-center .footer-items {
    padding-top: 0;
    padding-bottom: 0;
  }
}