/* docs/stylesheets/theme.css: the site takes its colours from the banner.
 *
 * banner.svg draws the name in white on a #17212b panel over a #0e1621
 * background, and uses Telegram blue #2aabee for the panel's border and the
 * outgoing message bubbles. These are the colours of Telegram Archive's own
 * site, on purpose: this server is its companion. mkdocs.yml sets primary and
 * accent to custom, so nothing is painted until these variables exist.
 */
:root {
  --md-primary-fg-color: #0e1621; /* banner background */
  --md-primary-fg-color--light: #17212b; /* banner name panel */
  --md-primary-fg-color--dark: #070c12;
  --md-primary-bg-color: #f2f6fa; /* text on the header */
  --md-primary-bg-color--light: #8fa3b5;

  --md-accent-fg-color: #2aabee; /* banner accent */
  --md-accent-fg-color--transparent: #2aabee1a;
}

/* Dark scheme: the page body uses the banner background too, so the header
   and the page read as one surface. #2aabee on #0e1621 is 7.1:1. */
[data-md-color-scheme="slate"] {
  --md-default-bg-color: #0e1621;
  --md-code-bg-color: #17212b;
  --md-typeset-a-color: #2aabee;
}

/* Light scheme: #2aabee on white is 2.6:1, too faint for body links.
   #0f7ab8 is the same hue at 4.7:1. */
[data-md-color-scheme="default"] {
  --md-typeset-a-color: #0f7ab8;
}

/* Fixed logo size so it does not crowd the site name. */
.md-header__button.md-logo img,
.md-header__button.md-logo svg {
  height: 1.6rem;
  width: 1.6rem;
}

/* The site name, set the way banner.svg sets it: white and heavy.
   Only the first topic is styled; Material puts the page title in a second
   .md-header__topic and swaps them on scroll. */
.md-header__topic:first-child .md-ellipsis {
  color: #ffffff;
  font-weight: 800;
  letter-spacing: -0.01em;
}

/* Keep the mark and the name close, so they read as one unit. */
.md-header__button.md-logo {
  padding-right: 0.2rem;
}

.md-header__title {
  margin-left: 0.2rem;
}

/* Buttons. Material paints .md-button in the header colour, which on the
   dark page is also the page background. Outline buttons take the link
   colour instead. */
.md-typeset .md-button {
  color: var(--md-typeset-a-color);
  border-color: var(--md-typeset-a-color);
  border-radius: 0.5rem;
}

.md-typeset .md-button:focus,
.md-typeset .md-button:hover {
  background-color: var(--md-typeset-a-color);
  border-color: var(--md-typeset-a-color);
  color: #ffffff;
}

.md-typeset .md-button--primary,
.md-typeset .md-button--primary:focus,
.md-typeset .md-button--primary:hover {
  /* White on #2aabee is 2.6:1. #0f7ab8 -> #0f6fa8 keeps every point above
     4.5:1. */
  background: linear-gradient(90deg, #0f7ab8 0%, #0f6fa8 100%);
  border-color: transparent;
  color: #ffffff;
}

.md-typeset .md-button--primary:focus,
.md-typeset .md-button--primary:hover {
  box-shadow: 0 0.2rem 0.8rem #2aabee59;
}

/* Grid cards: the border picks up the accent on hover, matching the links. */
.md-typeset .grid.cards > ul > li,
.md-typeset .grid > .card {
  border-radius: 0.5rem;
}

.md-typeset .grid.cards > ul > li:focus-within,
.md-typeset .grid.cards > ul > li:hover,
.md-typeset .grid > .card:focus-within,
.md-typeset .grid > .card:hover {
  border-color: #2aabee;
}

/* The home page keeps an H1 for search, screen readers and the browser tab.
   The banner under it already shows the name, so the H1 is hidden visually.
   Use it as: # telegram-archive-mcp { .tam-visually-hidden } */
.md-typeset h1.tam-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Variable and tool names in tables, such as TELEGRAM_ARCHIVE_PASS or
   get_messages_by_date, must not wrap mid-word. */
.md-typeset table:not([class]) code {
  word-break: normal;
}