/*
 * MkDocs Material colour + type mapping onto the canonical brand tokens
 * (brand.css, loaded first via extra_css). Green header/nav/link surface on a
 * cream page, Source Serif 4 headings, Inter body. Non-brand UI grays
 * (#6a6a62, #c9c9c9) are left untouched — they are not brand colours.
 */

:root,
[data-md-color-scheme="default"] {
  /* Primary brand surface (header background, active nav indicator). */
  --md-primary-fg-color: var(--brand-green);
  --md-primary-fg-color--light: var(--brand-green);
  --md-primary-fg-color--dark: var(--brand-green-strong);
  --md-primary-bg-color: #ffffff;
  --md-primary-bg-color--light: rgba(255, 255, 255, 0.9);

  /* Page surface (brand cream), matching the marketing background. */
  --md-default-bg-color: var(--brand-cream);
  /* Muted secondary text (nav section titles, "Obsah" label). Material's
   * default rgba(0,0,0,0.54) composites to ~#70706c on cream — only 4.46:1,
   * just under AA. Pin it to the marketing muted token #6a6a62 (4.90:1 on
   * cream). Darkening only improves contrast wherever this token is used. */
  --md-default-fg-color--light: #6a6a62;

  /* Brand body face (Inter) ahead of the system fallback chain. */
  --md-text-font-family: var(--brand-font-body);
  --md-code-font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;

  /* Inline links + active navigation entries. The brand green #2d5a27 clears
   * AA on cream (~7.7:1), so link/nav text uses it directly. */
  --md-accent-fg-color: var(--brand-green);
  --md-typeset-a-color: var(--brand-green);

  /* Footer muted text (Made with / copyright separator). */
  --md-footer-fg-color--light: #c9c9c9;
  --md-footer-fg-color--lighter: #c9c9c9;
}

/* Serif display face for headings; body/nav text stays Inter. */
.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4,
.md-typeset h5,
.md-typeset h6 {
  font-family: var(--brand-font-display);
  font-weight: 700;
  color: #1b1c19;
}

/*
 * Active-nav-link color explicit override — Material applies a CSS
 * variable cascade that defaults the active state to
 * --md-primary-fg-color--light. Force the brand green so the active
 * link meets contrast on the cream surface.
 */
.md-nav__link--active,
.md-nav__link--active code {
  color: var(--brand-green);
}

.md-typeset a {
  color: var(--brand-green);
  /* Underline so links inside paragraph text are distinguishable
   * without relying on color (axe: link-in-text-block). */
  text-decoration: underline;
}

.md-typeset a:hover,
.md-typeset a:focus {
  color: var(--brand-green);
  text-decoration: none;
}

/*
 * Header — align with the marketing landing chrome. Cream surface + hairline
 * bottom border instead of the green bar; the green monkey + Source Serif 4
 * "Danito" wordmark + hairline divider + muted section label are rendered as
 * one lockup inside overrides(-en)/partials/logo.html (the label varies per
 * language there, so this stylesheet stays byte-identical across both trees).
 * Material's default site-name title is hidden so only the lockup shows.
 */
.md-header {
  background-color: var(--brand-cream);
  color: var(--brand-green);
  border-bottom: 1px solid var(--brand-green-wash);
  box-shadow: none;
}

.md-header__title {
  display: none;
}

.md-header__button.md-logo {
  display: flex;
  align-items: center;
  padding: 0.4rem;
}

.brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 1.1rem;
  line-height: 1;
}

.md-header__button.md-logo .brand-mark {
  height: 1.5em;
  width: auto;
  color: var(--brand-green);
}

.brand-wordmark {
  font-family: var(--brand-font-display);
  font-weight: 700;
  font-size: 1em;
  letter-spacing: -0.01em;
  color: var(--brand-green);
}

.brand-divider {
  width: 1px;
  height: 1.25rem;
  background-color: var(--brand-green-wash);
}

.brand-section {
  font-family: var(--brand-font-label);
  font-size: 0.7rem;
  font-weight: 500;
  color: #42493e;
}

/* Search field — lightened for the cream header: green icon, dark text. */
.md-search__form {
  background-color: color-mix(in srgb, var(--brand-green) 6%, #ffffff);
  box-shadow: none;
}

.md-search__form:hover {
  background-color: color-mix(in srgb, var(--brand-green) 12%, #ffffff);
}

.md-search__input {
  color: var(--md-default-fg-color);
}

.md-search__input::placeholder {
  color: #6a6a62;
}

.md-search__icon {
  color: var(--brand-green);
}

/*
 * Body copy at 18px (0.9rem on the 20px MkDocs root) to match the landing
 * page. Material sizes headings in em relative to this container, so the bump
 * would scale them too; pin each heading in rem to keep it at its prior size.
 */
.md-typeset {
  font-size: 0.9rem;
  color: #42493e;
}

.md-typeset h1 {
  font-size: 1.6rem;
}

.md-typeset h2 {
  font-size: 1.25rem;
}

.md-typeset h3 {
  font-size: 1rem;
}

.md-typeset h4 {
  font-size: 0.8rem;
}

.md-typeset h5,
.md-typeset h6 {
  font-size: 0.64rem;
}