/* Typography polish to match the original GitBook feel.
 * GitBook uses Inter with tight tracking and bold high-contrast headings.
 * Material's defaults are looser/softer — these rules nudge it closer. */

/* Inter looks best with these OpenType features enabled. */
body {
  font-feature-settings: "cv11", "ss01", "ss03";
}

/* Headings: tighter tracking, bold, full-contrast color. */
.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4,
.md-typeset h5,
.md-typeset h6 {
  letter-spacing: -0.02em;
  font-weight: 700;
  color: var(--md-default-fg-color);
}

/* H1 (page title): solid color, big, bold, balanced wrapping like GitBook.
 * Override Material's faded rgba(0,0,0,0.54) with a more specific selector. */
.md-typeset h1,
.md-content .md-typeset h1 {
  font-size: 2.1rem;
  letter-spacing: -0.025em;
  text-wrap: balance;
  font-weight: 700;
  margin-bottom: 1rem;
  color: var(--md-default-fg-color);
}

/* H2 — slightly bigger than Material default. */
.md-typeset h2 {
  font-size: 1.5rem;
}

/* Body text: bump from Material's 0.8rem default, matching GitBook. */
.md-typeset {
  font-size: 0.85rem;
  line-height: 1.65;
}

/* Sidebar section dividers (with navigation.sections enabled): the section
 * label is rendered as <label class="md-nav__link"> inside an
 * <li class="md-nav__item--section md-nav__item--nested">. */
.md-sidebar--primary .md-nav__item--section > label.md-nav__link {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--md-default-fg-color);
  margin-top: 1rem;
}

/* "HeyOz Docs" site title at top of sidebar — full contrast. */
.md-sidebar--primary > .md-sidebar__scrollwrap > .md-sidebar__inner > .md-nav > .md-nav__title {
  color: var(--md-default-fg-color);
  font-weight: 700;
}

/* Sidebar leaf links — keep readable, sentence case. */
.md-nav__link {
  font-size: 0.78rem;
}

/* Homepage hero banner — image already has the headline baked in. */
.heyoz-hero {
  margin: 0 0 2rem;
  border-radius: 0.5rem;
  overflow: hidden;
}
.heyoz-hero img {
  width: 100%;
  height: auto;
  display: block;
}