/* ---------- Tipografia base (site inteiro) ---------- */

body,
.md-typeset {
  font-family: 'Newsreader', Georgia, 'Times New Roman', serif;
}

.md-typeset {
  font-size: 1.05rem;
  line-height: 1.75;
}

.md-typeset code,
.md-typeset pre,
.md-typeset kbd {
  font-family: 'Courier New', monospace;
}

.md-tabs__link {
  font-size: 0.85rem;
}

.md-nav {
  font-size: 0.92rem;
}

/* Titulos de secao na sidebar (ex: "Indice") vem brancos por padrao
   do Material, destoando dos links azuis abaixo. */
.md-nav__title {
  color: var(--md-accent-fg-color);
}

/* Titulo da secao ativa na sidebar principal (ex: "Projetos", fixo no
   topo ao rolar) nao usa ".md-nav__title" e sim esse seletor mais
   especifico do modo "lifted", que sobrescreve de volta pra cor
   padrao mesmo com ".md-nav__link" ja sendo azul. */
.md-nav--lifted > .md-nav__list > .md-nav__item > [for] {
  color: var(--md-accent-fg-color);
}

.md-header__title {
  display: none;
}

.md-header__button.md-logo img {
  height: 2rem;
}

/* O titulo escondido tinha flex-grow:1 e empurrava busca/GitHub pra
   direita -- sem ele, os dois recuavam pra perto do logo. Refaz esse
   espacamento no elemento seguinte (toggle de tema). */
.md-header__option {
  margin-left: auto;
}

/* Branco em tudo que for texto/icone do cabecalho e das abas */
.md-header,
.md-tabs {
  color: #ffffff;
}

/* Cabecalho e abas mais compactos, pra ler como uma barra so mesmo
   sendo dois elementos empilhados (tentativa de sobrepor via CSS
   entrou em conflito com o JS do Material, que esconde as abas
   sozinho quando a posicao delas na tela muda - reduzir a altura e
   mais seguro e chega perto do efeito visual). */
.md-tabs__item {
  height: 1.9rem;
}
.md-tabs__link {
  margin-top: 0.5rem;
}


/* ---------- Paletas Material (light/dark) ----------
   As variaveis abaixo replicam o conjunto completo que o Material define
   para os esquemas nativos "default" e "slate", em vez de so as 4-5 mais
   obvias. Isso evita que --md-typeset-color e outras variaveis derivadas
   (declaradas originalmente em :root) fiquem "congeladas" no valor claro
   quando so sobrescrevemos --md-default-fg-color no proprio body. */

[data-md-color-scheme="an-light"] {
  --md-default-fg-color: #1f1e1d;
  --md-default-fg-color--light: #3a3936;
  --md-default-fg-color--lighter: #87867f;
  --md-default-fg-color--lightest: #d1cfc5;
  --md-default-bg-color: #f0eee6;
  --md-default-bg-color--light: #f0eee6b3;
  --md-default-bg-color--lighter: #f0eee64d;
  --md-default-bg-color--lightest: #f0eee61f;
  --md-code-fg-color: #3a3936;
  --md-code-bg-color: #e4e1d6;
  --md-code-hl-name-color: var(--md-code-fg-color);
  --md-code-hl-operator-color: var(--md-default-fg-color--light);
  --md-code-hl-punctuation-color: var(--md-default-fg-color--light);
  --md-code-hl-comment-color: var(--md-default-fg-color--light);
  --md-code-hl-generic-color: var(--md-default-fg-color--light);
  --md-code-hl-variable-color: var(--md-default-fg-color--light);
  --md-typeset-color: #4a67b5;
  --md-typeset-a-color: #4a67b5;
  --md-typeset-mark-color: #4a67b54d;
  --md-typeset-table-color: #1f1e1d1f;
  --md-typeset-table-color--light: rgba(31, 30, 29, .035);
  --md-admonition-fg-color: var(--md-default-fg-color);
  --md-admonition-bg-color: var(--md-default-bg-color);
  --md-accent-fg-color: #4a67b5;
  --md-accent-fg-color--transparent: #4a67b51a;
  --md-accent-bg-color: #fff;
  --md-accent-bg-color--light: #ffffffb3;
  --md-primary-fg-color: #4a67b5;
  --md-primary-bg-color: #ffffff;
  --md-primary-bg-color--light: #ffffffb3;
}

[data-md-color-scheme="an-dark"] {
  --md-default-fg-color: #f0eee6;
  --md-default-fg-color--light: #d1cfc5;
  --md-default-fg-color--lighter: #87867f;
  --md-default-fg-color--lightest: #3d3d3a;
  --md-default-bg-color: #1f1e1d;
  --md-default-bg-color--light: #1f1e1dba;
  --md-default-bg-color--lighter: #1f1e1d54;
  --md-default-bg-color--lightest: #1f1e1d1f;
  --md-code-fg-color: #d1cfc5;
  --md-code-bg-color: #2a2927;
  --md-code-hl-name-color: var(--md-code-fg-color);
  --md-code-hl-operator-color: var(--md-default-fg-color--light);
  --md-code-hl-punctuation-color: var(--md-default-fg-color--light);
  --md-code-hl-comment-color: var(--md-default-fg-color--light);
  --md-code-hl-generic-color: var(--md-default-fg-color--light);
  --md-code-hl-variable-color: var(--md-default-fg-color--light);
  --md-typeset-color: #6b85c4;
  --md-typeset-a-color: #6b85c4;
  --md-typeset-mark-color: #6b85c44d;
  --md-typeset-table-color: #f0eee61f;
  --md-typeset-table-color--light: rgba(240, 238, 230, .035);
  --md-admonition-fg-color: var(--md-default-fg-color);
  --md-admonition-bg-color: var(--md-default-bg-color);
  --md-accent-fg-color: #6b85c4;
  --md-accent-fg-color--transparent: #6b85c41a;
  --md-accent-bg-color: #1f1e1d;
  --md-accent-bg-color--light: #1f1e1db3;
  --md-primary-fg-color: #4a67b5;
  --md-primary-bg-color: #ffffff;
  --md-primary-bg-color--light: #ffffffb3;
}

/* ---------- Hero (home) ---------- */

/* a home deve caber na tela sem scroll: margem do main zerada
   e padding do hero reduzido (so a home tem .pf-hero) */
.md-main__inner:has(.pf-hero) {
  margin-top: 0.2rem;
}
.md-content__inner:has(.pf-hero) {
  max-width: 50rem;
  margin: 0 auto;
  padding-top: 0;
}

.pf-hero {
  display: flex;
  align-items: flex-start;
  gap: 2rem;
  padding: 0.6rem 0 0.6rem 0;
  flex-wrap: wrap;
}
/* sem nome no hero: o wordmark do cabecalho ja identifica o site,
   entao a foto cresce e vira o peso visual da primeira dobra.
   Retangular e grande, encostada na direita, em vez do circulo pequeno.
   Alinhada ao topo (nao ao centro) e maior pra acompanhar a bio, que
   agora tem varios paragrafos e deixa a foto pequena isolada no topo. */
.pf-hero-photo {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  flex-shrink: 0;
  margin-left: auto;
}
.pf-hero-avatar {
  width: 340px;
  height: 440px;
  border-radius: 12px;
  object-fit: cover;
}
/* flex-basis definido pra nao quebrar em coluna no desktop; o wrap so
   acontece quando sobra menos de 260px pro conteudo (mobile).
   Seletores com .md-typeset na frente pra ganhar do h1 e p do Material,
   que tem especificidade maior e sobrescreviam margem, cor e peso. */
.pf-hero-content {
  flex: 1 1 260px;
  min-width: 0;
}
/* zera a margem do Material no primeiro paragrafo pra alinhar
   exatamente com o topo da foto (senao o texto comeca mais baixo) */
.md-typeset .pf-hero-content > p:first-child {
  margin-top: 0;
}

/* Pilulas de contato abaixo da foto (email, linkedin, github) */
.pf-hero-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.pf-hero-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  padding: 0.35rem 0.9rem;
  border: 1px solid var(--md-accent-fg-color);
  border-radius: 999px;
  color: var(--md-accent-fg-color);
  text-decoration: none !important;
  transition: background 0.15s ease;
}
.pf-hero-link svg { flex-shrink: 0; }
/* .md-typeset na frente pra ganhar do ".md-typeset a:hover" do Material,
   que tem mais especificidade (conta o elemento "a") e sobrescrevia a cor */
.md-typeset .pf-hero-link:hover {
  background: var(--md-accent-fg-color);
  color: var(--md-primary-bg-color);
}
@media (max-width: 560px) {
  .pf-hero { gap: 1.2rem; padding: 1rem 0 0.8rem 0; }
  .pf-hero-photo { width: 100%; margin-left: 0; }
  .pf-hero-avatar { width: 100%; height: auto; max-width: 260px; }
}

/* ---------- Cards de projetos ---------- */

.pf-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.1rem;
  margin-top: 1.6rem;
}
.pf-card {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: 1.3rem 1.4rem;
  border: 1px solid var(--md-typeset-table-color);
  border-radius: 8px;
  background: var(--md-default-bg-color);
  text-decoration: none !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.pf-card:hover {
  transform: translateY(-3px);
  border-color: var(--md-accent-fg-color);
  box-shadow: 0 8px 24px -10px rgba(0, 0, 0, 0.25);
}
.pf-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.pf-card-title {
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--md-accent-fg-color);
}
.pf-card-arrow {
  font-size: 1.1rem;
  color: var(--md-default-fg-color--light);
  transition: transform 0.18s ease, color 0.18s ease;
}
.pf-card:hover .pf-card-arrow {
  color: var(--md-accent-fg-color);
  transform: translateX(3px);
}
.pf-card-desc {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 300;
  line-height: 1.55;
  color: var(--md-default-fg-color--light);
  flex-grow: 1;
}
.pf-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.2rem;
}

@media (prefers-reduced-motion: reduce) {
  .pf-card, .pf-card-arrow { transition: none; }
  .pf-card:hover { transform: none; }
  .pf-card:hover .pf-card-arrow { transform: none; }
}

/* ---------- Componentes pf-* (bio, listas, skills) ---------- */

.pf-bio {
  font-weight: 300;
  line-height: 1.6;
}
.pf-bio p { margin-bottom: 0.6rem; }
.pf-bio p:last-child { margin-bottom: 0; }

.md-typeset h1,
.md-typeset h2 {
  color: var(--md-accent-fg-color);
}

.pf-title-hidden {
  display: none;
}

/* Tag de tecnologia (usada nos cards de projetos) */
.pf-skill-tag {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--md-default-fg-color);
  background: transparent;
  border: 1px solid var(--md-accent-fg-color);
  border-radius: 4px;
  padding: 0.1rem 0.5rem;
  line-height: 1.6;
  white-space: nowrap;
}