/* Codecraft house style on top of Material/Zensical.
 * Carries the original Jekyll look: Barlow Condensed headings, Open Sans body,
 * the signature brown palette, plus printable-without-sidebar and mobile rules.
 * Source of truth lives at assets/css/zensical-extra.css; build_site.py copies
 * it into the build tree as stylesheets/extra.css.
 */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

:root {
  /* Brand palette (light scheme). */
  --md-primary-fg-color: #491705;
  --md-primary-fg-color--light: #765043;
  --md-primary-fg-color--dark: #310f03;
  --md-accent-fg-color: #914f37;
  --md-typeset-a-color: #914f37;

  /* Fonts. */
  --md-text-font: "Open Sans";
  --md-text-font-family: "Open Sans", -apple-system, system-ui, sans-serif;
}

/* Body text. */
.md-typeset {
  font-family: "Open Sans", -apple-system, system-ui, sans-serif;
  font-weight: 400;
  color: #444;
}

/* Headings: condensed display face, signature browns. */
.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4 {
  font-family: "Barlow Condensed", "Open Sans", sans-serif;
}
.md-typeset h1 {
  font-weight: 500;
  color: #491705;
}
.md-typeset h2 {
  font-weight: 400;
}
.md-typeset h3 {
  font-weight: 300;
  color: #666;
}

/* Header site title: match the h1 "Codecraft" on the page — same face, size,
   weight and colour (the header background is light, so the brown is visible). */
.md-header__title,
.md-header__title .md-ellipsis {
  font-family: "Barlow Condensed", "Open Sans", sans-serif;
  font-weight: 500;
  font-size: 1.6rem;          /* ≈ the h1; tune if needed */
  line-height: 1.2;
  color: #491705;
}

/* Links: one faint underline, no visited distinction, clearer on hover.
   (border-bottom is reset so it doesn't stack with Material's text-decoration —
   that was the double/triple-underline bug.) */
.md-typeset a,
.md-typeset a:visited {
  color: #914f37;
  border-bottom: none;
  text-decoration: underline;
  text-decoration-color: rgba(145, 79, 55, 0.3);   /* very faint */
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}
.md-typeset a:hover {
  color: #491705;
  text-decoration-color: #491705;                  /* clearer on hover */
}

/* "← back" link at the top of every essay (to the TOC). */
.md-typeset .back-link {
  margin: 0 0 1.4em;
  font-size: 0.85rem;
}

/* Figure captions. */
.md-typeset figcaption {
  font-size: 85%;
  font-style: italic;
  color: #777;
}

/* Cap displayed images at 512px (the simple illustrations look silly full-size),
   but never exceed the container on narrow screens. */
.md-typeset img {
  max-width: min(100%, 512px);
  height: auto;
}

/* Strip the chrome for a clean essay site:
   - left nav sidebar (home page lists everything + search covers the rest)
   - right "On this page" sidebar
   - the book-icon logo and empty drawer/repo controls in the header */
.md-sidebar--primary,
.md-sidebar--secondary,
.md-header__button.md-logo,
.md-header__button[for="__drawer"],
.md-header__source {
  display: none !important;
}

/* Now that both sidebars are gone, center the reading column at ~720px as soon
   as the viewport exceeds it (Material otherwise keeps it full-width until
   ~1220px). Only the content grid — the header stays full-width. */
.md-main__inner {
  max-width: 45rem;     /* ≈ 720px; where centering begins */
  margin-left: auto;
  margin-right: auto;
}

/* Homepage TOC (index.md only, via the .toc-index wrapper): tight, single-line
   list spacing between entries. */
.md-typeset .toc-index ul {
  margin-top: 0.3em;
  margin-bottom: 0.7em;
}
.md-typeset .toc-index li {
  margin-top: 0;
  margin-bottom: 0;
}

/* index.md only: the top bar already shows "Codecraft", so hide the duplicate
   page-title h1 on screen. It's restored for print below (where the top bar is
   hidden), so a printed home page still carries its title. */
.md-typeset .toc-index > h1 {
  display: none;
}
/* …so start the intro just below the header (≈ the gap after an h1). On print the
   h1 reappears and its own bottom margin provides the spacing. */
.md-typeset .toc-index > h1 + * {
  margin-top: 0;
}

/* ---- Print: clean, sidebar-free, full-width essay ---- */
@media print {
  .md-header,
  .md-tabs,
  .md-sidebar,
  .md-footer,
  .md-nav,
  .md-content__button,
  .md-source,
  .md-top,
  .back-link {
    display: none !important;
  }
  .md-main__inner,
  .md-content,
  .md-content__inner {
    margin: 0 !important;
    padding: 0 !important;
    max-width: 100% !important;
  }
  .md-grid {
    max-width: 100% !important;
  }
  .md-typeset {
    color: #000;
  }
  /* index.md: the top bar doesn't print, so bring its "Codecraft" title back. */
  .md-typeset .toc-index > h1 {
    display: block;
  }
  /* Images: centered, capped at half the text-column width, when printed. */
  .md-typeset img {
    max-width: 50% !important;
    display: block;
    margin: 0.6em auto;
  }
  /* Expand the collapsed "Original discussion" block so it prints in full. */
  .md-typeset details {
    display: block;
  }
  .md-typeset details > summary {
    display: none;
  }
}