section.nav-container {
  display: flex;
  width: 100%;
}

div.header-logo {
  display: flex;
  flex: 0 1 12.5rem;
  justify-content: center;
  align-items: center;
}

/* -- Definição do logo */
/* Fonte global para os elementos de texto do logo */
.logo-text {
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  text-anchor: middle;
}

/* Título Principal (STUDY LAB) */
.logo-title {
  font-size: 76px;
  font-weight: 800;
  letter-spacing: 1px;
}

/* Parte "STUDY" - Cor customizada por variável */
.logo-title-study {
  fill: var(--texto-study);
}

/* Parte "LAB" - Aplicando o gradiente tecnológico */
.logo-title-lab {
  fill: url(#techGrad);
}

/* Slogan / Subtítulo */
.logo-subtitle {
  font-size: 20px;
  font-weight: 500;
  fill: #718096;
  letter-spacing: 4px;
}

/* -- Fim logo -- */

nav.nav-menu {
  justify-content: center;
  align-items: center;
}

div.header-controls {
  display: flex;
  flex: 0 1 12.5rem;
  justify-content: right;
  align-items: center;
  margin-right: 0.5rem;
}

/* ----------- Botão de mudança de tema claro/escuro ----------- */
/* Esconde o quadradinho do checkbox */
.theme-checkbox {
  display: none;
}

/* --- ESTILIZAÇÃO DO BOTÃO DE ALTERNAR TEMA --- */

.theme-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 0.5rem;
  cursor: pointer;
  font-size: 1.2rem;
  transition: transform 0.2s ease, background-color 0.3s, border-color 0.3s;
  user-select: none;
}

/* Efeito sutil ao passar o mouse */
.theme-button:hover {
  transform: scale(1.08);
}

/* ÍCONE PADRÃO (Modo Claro): Mostra a Lua */
.theme-button::before {
  content: "🌙";
}

/* ÍCONE ALTERNADO (Modo Escuro): Quando marcado, vira o Sol */
:root:has(.theme-checkbox:checked) .theme-button::before {
  content: "☀️";
}

@media only screen and (max-width: 717px) {

  div.header-logo,
  div.header-controls {
    flex: 1 1 50%;
  }
}