/* Travelmesh Classic Docs -- a light, quiet theme over Material.
   One accent colour; the header stays white so screenshots carry the colour. */

:root {
  --kb-accent: #0f7c84;
  --kb-accent-strong: #0a5f66;
}

[data-md-color-primary="custom"] {
  --md-primary-fg-color: #ffffff;
  --md-primary-fg-color--light: #ffffff;
  --md-primary-fg-color--dark: #f4f6f7;
  --md-primary-bg-color: #1d2a2e;
  --md-primary-bg-color--light: #5b6b70;
}
[data-md-color-accent="custom"] {
  --md-accent-fg-color: var(--kb-accent-strong);
  --md-accent-fg-color--transparent: rgba(15, 124, 132, .1);
}
[data-md-color-scheme="default"] {
  --md-default-bg-color: #ffffff;
  --md-typeset-a-color: var(--kb-accent);
  --md-code-bg-color: #f4f6f7;
}
[data-md-color-scheme="slate"][data-md-color-primary="custom"] {
  --md-primary-fg-color: #151b1d;
  --md-primary-fg-color--light: #151b1d;
  --md-primary-fg-color--dark: #0f1416;
  --md-primary-bg-color: #e6ecee;
  --md-primary-bg-color--light: #9fb0b5;
  --md-default-bg-color: #12181a;
  --md-typeset-a-color: #4fc1c9;
}

/* White header: hairline instead of a shadow band; tabs get the same. */
.md-header, .md-tabs { border-bottom: 1px solid rgba(0, 0, 0, .07); box-shadow: none; }
[data-md-color-scheme="slate"] .md-header,
[data-md-color-scheme="slate"] .md-tabs { border-bottom-color: rgba(255, 255, 255, .08); }
.md-header__button.md-logo .md-icon, .md-header__button.md-logo svg { fill: var(--kb-accent); }
.md-tabs__link--active, .md-tabs__link:hover { color: var(--kb-accent); }
[data-md-color-scheme="default"] .md-search__form { background: #f1f4f5; }

.md-typeset h1 { font-weight: 600; color: inherit; }

/* Screenshots: contained, with a soft frame so white UI does not melt into the page. */
.md-typeset img:not(.icon):not(.twemoji) {
  border-radius: 6px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .08), 0 2px 8px rgba(0, 0, 0, .06);
}
.md-typeset img.icon { vertical-align: text-bottom; box-shadow: none; }

/* Migrated videos and embeds (YouTube, Google Slides): full width, 16:9. */
.md-typeset video,
.md-typeset .embed iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
  border-radius: 8px;
  background: #000;
  margin: 1em 0;
}

.md-typeset .grid.cards > ul > li { border-radius: 10px; }
.md-typeset .grid.cards .lg { color: var(--kb-accent); }

/* Old WordPress content pastes wide tables; let them scroll, not overflow. */
.md-typeset__table { max-width: 100%; }

/* Home page cards: one link per line, compact. */
.md-typeset .grid.cards > ul > li ul { list-style: none; margin: 0; }
.md-typeset .grid.cards > ul > li ul li { margin: .15em 0; }