/* Cores ao estilo do Notion: preto no branco e branco no preto, sem cor de destaque. */

/* Inter com os números e letras alternativos que a tornam mais limpa. */
.md-typeset {
  font-feature-settings: "cv11", "ss01", "ss03";
  font-size: 0.85rem;
  line-height: 1.7;
}

.md-typeset h1 { letter-spacing: -0.02em; }
.md-typeset h2,
.md-typeset h3 { letter-spacing: -0.01em; }

[data-md-color-scheme="default"] {
  --notion-bg: #ffffff;
  --notion-fg: #37352f;
  --notion-muted: rgba(55, 53, 47, 0.65);
  --notion-border: rgba(55, 53, 47, 0.09);
  --notion-hover: rgba(55, 53, 47, 0.06);
  --notion-code-bg: #f7f6f3;
  --notion-code-fg: #eb5757;
}

[data-md-color-scheme="slate"] {
  --notion-bg: #191919;
  --notion-fg: rgba(255, 255, 255, 0.81);
  --notion-muted: rgba(255, 255, 255, 0.46);
  --notion-border: rgba(255, 255, 255, 0.094);
  --notion-hover: rgba(255, 255, 255, 0.055);
  --notion-code-bg: #202020;
  --notion-code-fg: #ff7369;
  --md-hue: 0;
}

[data-md-color-scheme="default"],
[data-md-color-scheme="slate"] {
  --md-default-bg-color: var(--notion-bg);
  --md-default-fg-color: var(--notion-fg);
  --md-default-fg-color--light: var(--notion-muted);
  --md-default-fg-color--lighter: var(--notion-border);
  --md-default-fg-color--lightest: var(--notion-hover);

  /* Cabeçalho com a mesma cor do fundo, como no Notion. */
  --md-primary-fg-color: var(--notion-bg);
  --md-primary-fg-color--light: var(--notion-bg);
  --md-primary-fg-color--dark: var(--notion-bg);
  --md-primary-bg-color: var(--notion-fg);
  --md-primary-bg-color--light: var(--notion-muted);

  --md-accent-fg-color: var(--notion-fg);
  --md-accent-fg-color--transparent: var(--notion-hover);

  --md-typeset-color: var(--notion-fg);
  --md-typeset-a-color: var(--notion-fg);
  --md-typeset-table-color: var(--notion-border);

  --md-code-bg-color: var(--notion-code-bg);
  --md-code-fg-color: var(--notion-fg);

  --md-footer-bg-color: var(--notion-bg);
  --md-footer-bg-color--dark: var(--notion-bg);
  --md-footer-fg-color: var(--notion-muted);
  --md-footer-fg-color--light: var(--notion-muted);
}

.md-header,
.md-footer {
  border-color: var(--notion-border);
  border-style: solid;
  border-width: 0;
  box-shadow: none;
}
.md-header { border-bottom-width: 1px; }
.md-footer { border-top-width: 1px; }

.md-search__form { background-color: var(--notion-hover); }
.md-search__form:hover { background-color: var(--notion-border); }

/* Links sublinhados, como no Notion, em vez de coloridos. */
.md-typeset a {
  text-decoration: underline;
  text-decoration-color: var(--notion-muted);
  text-underline-offset: 2px;
}
.md-typeset a:hover { text-decoration-color: var(--notion-fg); }
.md-typeset .headerlink { text-decoration: none; }

/* Títulos com mais peso e menos cinzento. */
.md-typeset h1,
.md-typeset h2,
.md-typeset h3 {
  color: var(--notion-fg);
  font-weight: 700;
}

/* Código inline com o vermelho do Notion; blocos de código com fundo neutro. */
.md-typeset :not(pre) > code {
  color: var(--notion-code-fg);
  background-color: var(--notion-hover);
}

.md-typeset table:not([class]) {
  border: 1px solid var(--notion-border);
  box-shadow: none;
}
.md-typeset table:not([class]) th { background-color: var(--notion-code-bg); }

/* Página inicial: título grande e os guias em cartões. */
.ud-hero {
  padding: 3.5rem 0 2.5rem;
  border-bottom: 1px solid var(--notion-border);
  margin-bottom: 2rem;
}
.md-typeset .ud-hero h1 {
  font-size: 3.2rem;
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1.05;
  margin: 0;
}
.md-typeset .ud-hero h1 .headerlink { display: none; }
.md-typeset .ud-section {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--notion-muted);
  margin: 0 0 0.8rem;
}

.md-typeset .grid.ud-cards > ul > li {
  position: relative;
  border: 1px solid var(--notion-border);
  border-radius: 10px;
  padding: 1.1rem 1.2rem;
  background: var(--notion-bg);
  box-shadow: none;
  transition: background-color 120ms ease, border-color 120ms ease, transform 120ms ease;
}
.md-typeset .grid.ud-cards > ul > li:hover {
  background: var(--notion-hover);
  border-color: var(--notion-muted);
  transform: translateY(-2px);
  box-shadow: none;
}
.md-typeset .grid.ud-cards > ul > li > p { margin: 0.35rem 0 0; }
.md-typeset .grid.ud-cards > ul > li > p:last-child {
  color: var(--notion-muted);
  font-size: 0.78rem;
  line-height: 1.55;
}
.md-typeset .grid.ud-cards .twemoji.lg,
.md-typeset .grid.ud-cards .lg svg {
  height: 1.6rem;
  width: 1.6rem;
  color: var(--notion-fg);
}
/* O cartão inteiro é clicável. */
.md-typeset .grid.ud-cards a {
  text-decoration: none;
}
.md-typeset .grid.ud-cards a::after {
  content: "";
  position: absolute;
  inset: 0;
}

@media screen and (max-width: 44.9375em) {
  .ud-hero { padding: 2rem 0 1.5rem; }
  .md-typeset .ud-hero h1 { font-size: 2.4rem; }
}

/* Cartões com largura fixa, mesmo quando há poucos guias. */
.md-typeset .grid.ud-cards {
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}

/* Rodapé sem o "Made with Material for MkDocs" (desligado no mkdocs.yml). */
.md-footer-meta { display: none; }

/* Índice à esquerda: títulos discretos, o atual em destaque, como na barra do Notion. */
.md-nav__link {
  color: var(--notion-muted);
}
.md-nav__link:hover,
.md-nav__link:focus {
  color: var(--notion-fg);
}
.md-nav__link--active,
.md-nav__item--active > .md-nav__link {
  color: var(--notion-fg);
  font-weight: 600;
}
.md-nav--integrated > .md-nav__list > .md-nav__item--active .md-nav--secondary {
  border-left: 1px solid var(--notion-border);
  margin-left: 0.6rem;
}