/* ==========================================================
   BASE: reset, tipografia e layout geral.
   Aqui ficam só as regras "globais" (valem para a página toda).
   Componentes (navbar, hero, cards...) ficam em components.css.
   ========================================================== */

/* ----- Reset simples -----
   Cada navegador tem margens e paddings padrão diferentes; zeramos tudo.
   box-sizing: border-box deixa o padding e a borda DENTRO da largura. */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;                  /* rolagem suave nos links #ancora */
  scroll-padding-top: var(--navbar-height); /* a navbar fixa não cobre o título */
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.65;
  overflow-x: hidden; /* nada vaza para os lados */
  -webkit-font-smoothing: antialiased;
  /* a troca de tema anima as cores em vez de "piscar" */
  transition: background-color var(--dur) ease, color var(--dur) ease;
}

img,
svg,
canvas {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

/* Botões herdam a fonte da página (por padrão eles não herdam!) */
button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.015em;
  text-wrap: balance;
  /* SOFT arredonda as serifas da Fraunces: fica mais orgânica */
  font-variation-settings: "SOFT" 100, "opsz" 96;
}

p {
  text-wrap: pretty;
}

code {
  font-family: var(--font-mono);
}

::selection {
  background: var(--accent);
  color: var(--accent-ink);
}

/* Foco visível pra quem navega por teclado (acessibilidade!)
   Não mexemos no border-radius aqui: isso mudaria o formato do
   elemento (ex.: um botão redondo ficaria quadrado ao receber foco).
   Nos navegadores atuais o outline já acompanha o arredondamento. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* Link "pular para o conteúdo": só aparece quando recebe foco pelo Tab */
.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 200;
  padding: var(--space-xs) var(--space-sm);
  background: var(--accent);
  color: var(--accent-ink);
  border-radius: var(--radius-sm);
  transform: translateY(-150%);
  transition: transform var(--dur-fast) var(--ease-out);
}

.skip-link:focus-visible {
  transform: translateY(0);
}

/* ==========================================================
   LAYOUT
   ========================================================== */

/* .container centraliza o conteúdo e limita a largura máxima */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 20px; /* respiro nas laterais no celular */
}

/* Mobile first: primeiro o celular, depois @media (min-width) para telas maiores */
.section {
  padding-block: var(--space-lg);
  border-top: 1px solid var(--line);
}

/* Título de seção = uma linha de código Java + o nome da seção.
   Ex.:  diego.getProjects();  // List<Project>
         Projetos
   A linha de código é decorativa (aria-hidden no HTML). */
.section__title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
  margin-bottom: var(--space-sm);
}

.section__code {
  display: inline-block; /* inline-block (e não flex) preserva os espaços do texto */
  max-width: 100%;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  font-family: var(--font-mono);
  /* a chamada Java É o título: grande, em fonte mono */
  font-size: clamp(1.45rem, 4.2vw, 2.5rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.2;
  font-variation-settings: normal;
}

/* cursor de editor que aparece no fim da linha quando o mouse passa */
.section__code::after {
  content: "";
  display: inline-block;
  vertical-align: -0.2em;
  width: 0.55em;
  height: 1.1em;
  margin-left: 0.15em;
  /* margem negativa = largura + margem: o cursor não "ocupa" espaço,
     então nunca empurra o título para uma segunda linha */
  margin-right: -0.7em;
  background: var(--accent);
  opacity: 0;
  transition: opacity var(--dur-fast);
}

/* Títulos longos (ex.: List<Project> projects = diego.getProjects();)
   podem quebrar linha em vez de serem cortados com "..." */
.section__code--wrap {
  white-space: normal;
  overflow: visible;
  /* os h2 usam text-wrap: balance (equilibra as linhas), mas em código
     isso quebraria a linha à toa. Aqui só quebra se não couber. */
  text-wrap: wrap;
}

/* o "// List<Project>" do título de projetos fica pequeno ao lado */
.section__code .code__comment {
  font-size: 0.45em;
  font-weight: 400;
  letter-spacing: 0;
  vertical-align: middle;
  margin-left: 0.6em;
}

@media (max-width: 480px) {
  .section__code .code__comment {
    display: none; /* no celular não cabe */
  }
}

.section__label {
  font-size: var(--text-2xl);
  transition: translate var(--dur) var(--ease-out);
}

/* ----- Cores de "syntax highlight" (usadas nos títulos e no contato) ----- */
.code__obj,
.code__var,
.code__string { color: var(--fg); }
.code__method { color: var(--accent); }
.code__type,
.code__const { color: var(--warm); }
.code__keyword {
  color: var(--accent);
  font-weight: 500;
}
.code__punct { color: var(--muted); }
.code__comment {
  color: var(--muted);
  font-style: italic;
  opacity: 0.8;
}

@media (hover: hover) {
  .section__title:hover .section__code::after {
    opacity: 1;
    animation: blink 1.05s steps(1) infinite;
  }

  .section__title:hover .section__label {
    translate: 4px 0;
  }
}

.section__intro {
  color: var(--muted);
  max-width: 60ch;
  margin-bottom: var(--space-md);
}

@media (min-width: 768px) {
  .container {
    padding-inline: var(--space-md);
  }

  .section {
    padding-block: var(--space-xl);
  }
}

/* Esconde visualmente, mas o leitor de tela continua lendo.
   Usado no nome das seções: na tela aparece "diego.getAbout();",
   e o leitor de tela anuncia "Sobre mim". */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}