/* =========================================================
   01. VARIÁVEIS DE TEMA
   ---------------------------------------------------------
   Define as cores utilizadas em todo o site.

   O bloco :root representa o tema claro.
   O bloco [data-theme="dark"] sobrescreve essas variáveis
   quando o usuário seleciona o tema escuro.
   ========================================================= */

:root {
  --bg: #ffffff;
  --surface: #f6f8fa;
  --text: #1f2328;
  --secondary-text: #59636e;
  --border: #d0d7de;
  --link: #0969da;
  --code-bg: #f6f8fa;
}

[data-theme="dark"] {
  --bg: #0d1117;
  --surface: #161b22;
  --text: #f0f6fc;
  --secondary-text: #8b949e;
  --border: #30363d;
  --link: #58a6ff;
  --code-bg: #161b22;
}


/* =========================================================
   02. CONFIGURAÇÕES GLOBAIS
   ---------------------------------------------------------
   Normaliza o comportamento dos elementos da página e
   estabelece configurações gerais de rolagem e dimensões.
   ========================================================= */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}


/* =========================================================
   03. CORPO DA PÁGINA
   ---------------------------------------------------------
   Define fonte, cores, espaçamento e transição entre os
   temas claro e escuro.
   ========================================================= */

body {
  margin: 0;

  background: var(--bg);
  color: var(--text);

  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Helvetica,
    Arial,
    sans-serif,
    "Apple Color Emoji",
    "Segoe UI Emoji";

  line-height: 1.6;

  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}


/* =========================================================
   04. BARRA SUPERIOR
   ---------------------------------------------------------
   Barra fixa no topo do site contendo o nome do portfólio
   e o controle de seleção entre Light e Dark Mode.
   ========================================================= */

.site-toolbar {
  position: sticky;
  top: 0;
  z-index: 100;

  background: var(--bg);
  border-bottom: 1px solid var(--border);
}

.toolbar-container {
  width: min(1000px, calc(100% - 40px));
  min-height: 64px;

  margin: 0 auto;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 20px;
}

.site-name {
  color: var(--text);

  font-size: 18px;
  font-weight: 600;

  text-decoration: none;
}

.site-name:hover {
  color: var(--link);
}


/* =========================================================
   05. SELETOR LIGHT / DARK MODE
   ---------------------------------------------------------
   Formatação do botão utilizado para alternar entre os
   temas claro e escuro.
   ========================================================= */

.theme-toggle {
  width: 42px;
  height: 42px;

  display: flex;
  align-items: center;
  justify-content: center;

  background: var(--surface);
  color: var(--text);

  border: 1px solid var(--border);
  border-radius: 50%;

  font-size: 18px;

  cursor: pointer;

  transition:
    transform 0.15s ease,
    background-color 0.2s ease;
}

.theme-toggle:hover {
  transform: scale(1.05);
}


/* =========================================================
   06. CONTAINER PRINCIPAL
   ---------------------------------------------------------
   Controla largura máxima, centralização e espaçamento do
   conteúdo carregado a partir do README.
   ========================================================= */

.page-container {
  width: min(1000px, calc(100% - 40px));

  margin: 0 auto;
  padding: 48px 0 80px;
}


/* =========================================================
   07. CONTEÚDO MARKDOWN
   ---------------------------------------------------------
   Configurações-base aplicadas ao conteúdo do README após
   sua conversão de Markdown para HTML.
   ========================================================= */

.markdown-body {
  color: var(--text);
  font-size: 16px;
}


/* =========================================================
   08. TÍTULOS
   ---------------------------------------------------------
   Define hierarquia visual dos títulos provenientes do
   README.
   ========================================================= */

.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4 {
  color: var(--text);

  line-height: 1.25;
  font-weight: 600;
}

.markdown-body h1 {
  margin-top: 0;
  margin-bottom: 24px;
  padding-bottom: 12px;

  font-size: 2em;

  border-bottom: 1px solid var(--border);
}

.markdown-body h2 {
  margin-top: 48px;
  margin-bottom: 20px;
  padding-bottom: 10px;

  font-size: 1.5em;

  border-bottom: 1px solid var(--border);
}

.markdown-body h3 {
  margin-top: 32px;
  margin-bottom: 16px;

  font-size: 1.25em;
}


/* =========================================================
   09. PERFIL NO TÍTULO PRINCIPAL
   ---------------------------------------------------------
   Posiciona a imagem de perfil ao lado esquerdo do nome
   "Caroline Matiazi Xavier" no primeiro H1 do site.

   A imagem é adicionada dinamicamente pelo index.html.
   ========================================================= */

.profile-title {
  display: flex;
  align-items: center;

  gap: 18px;
}

.markdown-body img.profile-title-image {
  width: 84px;
  height: 84px;

  flex: 0 0 auto;

  margin: 0;

  object-fit: contain;

  border: 0;
}


/* =========================================================
   10. TEXTOS
   ---------------------------------------------------------
   Formatação de parágrafos e textos destacados dentro do
   conteúdo do README.
   ========================================================= */

.markdown-body p {
  margin-top: 0;
  margin-bottom: 16px;
}

.markdown-body strong {
  color: var(--text);
  font-weight: 600;
}


/* =========================================================
   11. LINKS
   ---------------------------------------------------------
   Define aparência padrão e comportamento visual dos links.
   ========================================================= */

.markdown-body a {
  color: var(--link);
  text-decoration: none;
}

.markdown-body a:hover {
  text-decoration: underline;
}


/* =========================================================
   12. LISTAS
   ---------------------------------------------------------
   Formatação das listas ordenadas e não ordenadas
   provenientes do README.
   ========================================================= */

.markdown-body ul,
.markdown-body ol {
  margin-top: 0;
  margin-bottom: 20px;

  padding-left: 2em;
}

.markdown-body li {
  margin: 5px 0;
}


/* =========================================================
   13. SEPARADORES
   ---------------------------------------------------------
   Controla os divisores horizontais utilizados para
   separar visualmente as seções do README.
   ========================================================= */

.markdown-body hr {
  height: 1px;

  margin: 32px 0;
  padding: 0;

  background: var(--border);

  border: 0;
}


/* =========================================================
   14. IMAGENS E BADGES
   ---------------------------------------------------------
   Garante responsividade das imagens e preserva o formato
   original dos badges gerados pelo Shields.io.
   ========================================================= */

.markdown-body img {
  max-width: 100%;
  height: auto;
}

.markdown-body img[src*="shields.io"] {
  display: inline-block;

  width: auto;
  max-width: none;

  vertical-align: middle;
}


/* =========================================================
   15. CONTEÚDO CENTRALIZADO DO README
   ---------------------------------------------------------
   Mantém centralizados os blocos HTML que utilizam
   align="center", como os botões de contato.
   ========================================================= */

.markdown-body p[align="center"],
.markdown-body div[align="center"] {
  text-align: center;
}


/* =========================================================
   16. BLOCOS DE CÓDIGO
   ---------------------------------------------------------
   Formatação de código inline e blocos de código presentes
   futuramente na documentação de projetos.
   ========================================================= */

.markdown-body code {
  padding: 0.2em 0.4em;

  background: var(--code-bg);

  border-radius: 6px;
}

.markdown-body pre {
  overflow: auto;

  padding: 16px;

  background: var(--code-bg);

  border: 1px solid var(--border);
  border-radius: 8px;
}

.markdown-body pre code {
  padding: 0;

  background: transparent;
}


/* =========================================================
   17. TABELAS
   ---------------------------------------------------------
   Mantém tabelas legíveis e permite rolagem horizontal
   quando o conteúdo ultrapassa a largura disponível.
   ========================================================= */

.markdown-body table {
  display: block;

  width: max-content;
  max-width: 100%;

  overflow: auto;

  border-spacing: 0;
  border-collapse: collapse;
}

.markdown-body th,
.markdown-body td {
  padding: 8px 13px;

  border: 1px solid var(--border);
}


/* =========================================================
   18. RESPONSIVIDADE
   ---------------------------------------------------------
   Ajustes específicos para telas menores, principalmente
   smartphones e dispositivos com largura de até 700px.
   ========================================================= */

@media (max-width: 700px) {

  /* Reduz as margens laterais do site */

  .toolbar-container,
  .page-container {
    width: calc(100% - 24px);
  }


  /* Reduz o espaçamento superior do conteúdo */

  .page-container {
    padding-top: 30px;
  }


  /* Ajusta tamanho geral do conteúdo Markdown */

  .markdown-body {
    font-size: 15px;
  }


  /* Ajusta hierarquia dos títulos */

  .markdown-body h1 {
    font-size: 1.7em;
  }

  .markdown-body h2 {
    font-size: 1.4em;
  }


  /* Ajusta avatar e espaçamento do título principal */

  .profile-title {
    gap: 12px;
  }

  .markdown-body img.profile-title-image {
    width: 64px;
    height: 64px;
  }
}