/* =========================================================================
   Learning Tracks — refined editorial theme over Material for MkDocs.
   Ink-on-paper, serif display headings, a single deep-teal accent.
   Scoped entirely to Material's CSS custom properties so no template
   overrides are needed and the Cloudflare build stays plugin-free.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Newsreader:opsz,wght@6..72,400;6..72,500;6..72,600;6..72,700&display=swap');

/* ---------------------------------------------------------------- palette */

:root {
  --lt-teal:        #0f766e;   /* primary accent  */
  --lt-teal-bright: #14b8a6;   /* dark-mode accent */
  --lt-ink:         #1d2021;
  --lt-paper:       #faf8f3;   /* warm off-white   */
  --lt-paper-2:     #f3efe6;   /* card / panel     */
  --lt-line:        #e4ddcf;   /* hairline borders */

  --md-text-font: "Public Sans";
  --md-code-font: "JetBrains Mono";
}

/* Light scheme ------------------------------------------------------------ */
[data-md-color-scheme="default"] {
  --md-primary-fg-color:        var(--lt-ink);
  --md-primary-fg-color--light: #33393b;
  --md-primary-fg-color--dark:  #121516;
  --md-accent-fg-color:         var(--lt-teal);

  --md-default-bg-color:        var(--lt-paper);
  --md-default-fg-color:        #26292b;
  --md-default-fg-color--light: #4c5052;

  --md-typeset-a-color:         var(--lt-teal);

  --md-code-bg-color:           #f1ece1;
  --md-code-fg-color:           #3a3f41;

  --md-footer-bg-color:         var(--lt-ink);
}

/* Dark scheme ------------------------------------------------------------- */
[data-md-color-scheme="slate"] {
  --md-hue: 200;
  --md-primary-fg-color:  #15191c;
  --md-accent-fg-color:   var(--lt-teal-bright);
  --md-default-bg-color:  #16191c;
  --md-typeset-a-color:   var(--lt-teal-bright);
  --md-code-bg-color:     #1d2226;
}

/* ----------------------------------------------------------- typography */

body {
  font-feature-settings: "kern", "liga", "calt";
  -webkit-font-smoothing: antialiased;
}

/* Always reserve the viewport scrollbar. Without this, navigating between a
   tall page and a short one toggles the scrollbar, which shifts the sticky
   sidebar sideways — the "shake" when clicking nav items. */
html {
  overflow-y: scroll;
  scrollbar-gutter: stable;
}

.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-header__topic .md-ellipsis {
  font-family: "Newsreader", Georgia, serif;
  letter-spacing: -0.01em;
}

.md-typeset h1 {
  font-weight: 600;
  font-size: 2.1rem;
  line-height: 1.15;
  margin-bottom: .4em;
}
.md-typeset h2 {
  font-weight: 600;
  border-bottom: 1px solid var(--lt-line);
  padding-bottom: .25em;
  margin-top: 2.2em;
}
[data-md-color-scheme="slate"] .md-typeset h2 { border-color: #2a3035; }

.md-typeset h3 { font-weight: 600; }

/* readable measure for prose */
.md-typeset { line-height: 1.7; }

/* ----------------------------------------------------------- header */

.md-header {
  border-bottom: 1px solid rgba(255,255,255,.07);
  box-shadow: none;
}
.md-header__title { font-weight: 600; }

/* ----------------------------------------------------------- tables */

.md-typeset table:not([class]) {
  border: 1px solid var(--lt-line);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,.03);
  font-size: .76rem;
}
[data-md-color-scheme="slate"] .md-typeset table:not([class]) { border-color: #2a3035; }

.md-typeset table:not([class]) th {
  background: var(--lt-paper-2);
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: none;
  border-bottom: 2px solid var(--lt-line);
}
[data-md-color-scheme="slate"] .md-typeset table:not([class]) th { background: #1d2226; }

.md-typeset table:not([class]) tr:hover td {
  background: rgba(15,118,110,.04);
}

/* ----------------------------------------------------------- code */

.md-typeset code {
  border-radius: 4px;
  padding: .1em .4em;
}

/* ----------------------------------------------------------- admonitions */

.md-typeset .admonition,
.md-typeset details {
  border-radius: 8px;
  border-left-width: 3px;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
  font-size: .76rem;
}

/* ----------------------------------------------------------- nav sidebar */

.md-nav__title { font-weight: 600; }

/* Hide the redundant "Learning Tracks" site title at the top of the left
   sidebar on desktop (the header already shows it). Kept on the mobile drawer,
   where it serves as the drawer header. */
@media screen and (min-width: 76.25em) {
  .md-sidebar--primary .md-nav--primary > .md-nav__title {
    display: none;
  }
}

.md-nav__link--active,
.md-nav__item .md-nav__link--active {
  font-weight: 600;
  color: var(--md-accent-fg-color);
}

/* Top-level section headings (navigation.sections) — bigger, underlined, with
   clear vertical spacing above each group. Indentation is left to Material's
   defaults so nested items stay aligned. */
.md-sidebar--primary .md-nav--primary > .md-nav__list > .md-nav__item--section {
  margin-top: 1.9rem;
}
.md-sidebar--primary .md-nav--primary > .md-nav__list > .md-nav__item--section:first-child {
  margin-top: .4rem;
}
.md-sidebar--primary .md-nav--primary > .md-nav__list > .md-nav__item--section
  > .md-nav__link {
  font-family: "Newsreader", Georgia, serif;
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--md-default-fg-color);
  margin-bottom: .5rem;
  padding-bottom: .4rem;
  border-bottom: 1px solid var(--lt-line);
}
[data-md-color-scheme="slate"]
  .md-sidebar--primary .md-nav--primary > .md-nav__list > .md-nav__item--section
  > .md-nav__link {
  border-bottom-color: #2a3035;
}

/* A little more vertical room per nav item. */
.md-sidebar--primary .md-nav__item .md-nav__link {
  padding-top: .3rem;
  padding-bottom: .3rem;
}

/* ----------------------------------------------------------- breadcrumbs */

.lt-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem .5rem;
  margin: 0 0 1.2rem;
  font-size: .68rem;
  letter-spacing: .01em;
  color: var(--md-default-fg-color--light);
}
.lt-crumbs__item {
  color: var(--md-default-fg-color--light);
  text-decoration: none;
}
a.lt-crumbs__item:hover { color: var(--md-accent-fg-color); }
.lt-crumbs__item--plain { opacity: .8; }
.lt-crumbs__sep { opacity: .4; }

/* ------------------------------------------------------- read / unread */

/* Pages you've already opened fade back; unread pages stay full-strength. */
.md-nav__link.lt-read { opacity: .55; }
.md-nav__link.lt-read:hover { opacity: 1; }

/* ----------------------------------------------------------- grid cards */

.md-typeset .grid.cards > ul > li {
  border: 1px solid var(--lt-line);
  border-radius: 12px;
  padding: 1.1rem 1.2rem;
  background: var(--md-default-bg-color);
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
[data-md-color-scheme="slate"] .md-typeset .grid.cards > ul > li { border-color: #2a3035; }

.md-typeset .grid.cards > ul > li:hover {
  border-color: var(--md-accent-fg-color);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(15,118,110,.10);
}
.md-typeset .grid.cards > ul > li > hr {
  margin: .6rem 0;
  border-color: var(--lt-line);
}
.md-typeset .grid.cards .twemoji,
.md-typeset .grid.cards .md-icon {
  color: var(--md-accent-fg-color);
}

/* ======================================================= landing hero === */

.lt-hero {
  margin: 0 0 2.5rem;
  padding: 2.6rem 0 2.2rem;
  border-bottom: 1px solid var(--lt-line);
}
[data-md-color-scheme="slate"] .lt-hero { border-color: #2a3035; }

.lt-hero__eyebrow {
  font-family: "JetBrains Mono", monospace;
  font-size: .68rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--md-accent-fg-color);
  margin: 0 0 .6rem;
}
.md-typeset .lt-hero h1 {
  font-size: 2.9rem;
  line-height: 1.05;
  margin: 0 0 .5rem;
  font-weight: 700;
}
.lt-hero__lede {
  font-size: 1.0rem;
  max-width: 42rem;
  color: var(--md-default-fg-color--light);
  margin: 0;
}

/* small stat strip */
.lt-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 2.2rem;
  margin-top: 1.6rem;
}
.lt-stats div { line-height: 1.2; }
.lt-stats b {
  display: block;
  font-family: "Newsreader", serif;
  font-size: 1.7rem;
  font-weight: 600;
  color: var(--md-default-fg-color);
}
.lt-stats span {
  font-size: .7rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--md-default-fg-color--light);
}

/* inline stat strip used inside pages (e.g. market signal) */
.lt-signal {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: .8rem;
  margin: 1.2rem 0 1.6rem;
}
.lt-signal > div {
  border: 1px solid var(--lt-line);
  border-left: 3px solid var(--md-accent-fg-color);
  border-radius: 8px;
  padding: .8rem 1rem;
  background: var(--md-default-bg-color);
}
[data-md-color-scheme="slate"] .lt-signal > div { border-color: #2a3035; border-left-color: var(--md-accent-fg-color); }
.lt-signal b {
  display: block;
  font-family: "Newsreader", serif;
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.1;
}
.lt-signal span {
  font-size: .72rem;
  color: var(--md-default-fg-color--light);
}