/* =============================================================
   🎨 BODY.CSS - ESTILOS GLOBAIS E TEMA
   =============================================================
   Este arquivo define:
   - Reset global para consistência entre navegadores
   - Estilos base do HTML e BODY
   - Sistema de tema claro/escuro
   - Estilos para páginas de texto/políticas
   ============================================================= */

/* =============================================================
   🔄 RESET GLOBAL
   Faz todos os elementos incluírem borda e padding no cálculo
   de largura/altura, evitando estouros de layout.
   ============================================================= */
* {
    box-sizing: border-box;
}

/* =============================================================
   📄 HTML E BODY - ESTILOS BASE
   Define o tamanho, fonte padrão, cor de fundo e
   a transição suave para a troca de tema.
   overflow: hidden impede o scroll — a garrafa ocupa a tela toda.
   ============================================================= */
html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;

    /* Fonte padrão do Google */
    font-family: "Google Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings: "GRAD" 0;

    /* Cor de fundo padrão (tema claro) */
    background-color: white;
    
    /* Transição suave ao alternar temas */
    transition: filter 0.5s ease, background-color 0.5s ease;
}

/* =============================================================
   🌓 TEMA ALTERNATIVO (MODO ESCURO)
   Inverte todas as cores do body com filtro CSS.
   hue-rotate(180deg) garante que as cores fiquem naturais
   após a inversão (ex: o azul da água não vira laranja).
   
   Ativado pela classe 'alt-theme' no body.
   ============================================================= */
body.alt-theme {
    filter: invert(100%) hue-rotate(180deg);
}

/* O menu recebe uma inversão dupla para cancelar a herança do body,
   mantendo suas cores originais mesmo com o tema ativo. */
body.alt-theme .dropdown-content {
    filter: invert(100%) hue-rotate(180deg);
}

body.alt-theme #svg-garrafa {
    filter: invert(100%) hue-rotate(180deg);
}

/* =============================================================
   📝 CONTAINER DE TEXTO
   Usado nas páginas de políticas (privacy.html, service.html, etc)
   Centraliza o conteúdo com scroll vertical
   ============================================================= */
.text {
    text-align: center;
    padding: 20px;
    max-width: 720px;
    height: 100vh;
    overflow-y: auto;          /* Permite scroll vertical */
    margin: 0 auto;            /* Centraliza horizontalmente */
    line-height: 1.6;
    color: #333;
    box-sizing: border-box;
    scrollbar-width: none;     /* Oculta scrollbar no Firefox */
}

/* Oculta scrollbar no Chrome, Safari e Edge */
.text::-webkit-scrollbar {
  display: none;
}

/* =============================================================
   🔘 BOTÃO DE TEXTO
   Estilo para botões dentro de páginas de texto/políticas
   ============================================================= */
.text-button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #000000;
    color: white;
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.3s ease;
    cursor: pointer;
}

/* =============================================================
   🎭 OVERLAY ESCURO
   Camada semi-transparente atrás da garrafa
   Melhora o contraste da garrafa sobre fundos personalizados
   ============================================================= */
body::before {
  content: "";
  position: fixed;
  inset: 0;                         /* Cobre toda a tela */
  background: rgba(0,0,0,0.1);      /* Preto 10% opaco */
  z-index: -1;   
  
  transition: filter 0.10s ease, background-color 0.10s ease;/* Fica atrás de tudo */
}

::-moz-selection {
  background-color: black;
  color: white;
}

::selection {
  background-color: black;
  color: white;
}

header {
    width: 100%;
    height: 70px;
    background-color: white;
    position: absolute;
    top: 0;
    z-index: 2;

    display: flex;
    align-items: center;          /* centraliza verticalmente */
    justify-content: space-between; /* h1 à esquerda, botão à direita */
    padding: 0 0 0 16px;
}

.letreiro-container {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    height: 100%;
    display: flex;
    align-items: center;
}

.letreiro {
    white-space: nowrap;        /* impede quebra de linha */
    overflow: hidden;           /* esconde o texto fora da tela */
    animation: letreiro 8s linear infinite;
}

@keyframes letreiro {
    from { transform: translateX(100%); }   /* entra pela direita */
    to   { transform: translateX(-100%); }   /* sai pela esquerda */
}

header h1 {
    margin: 0;
    font-size: 3rem;
    white-space: nowrap;
    flex-shrink: 0;
}