/* =================================================================
   global.css — FOLHA DE ESTILOS ÚNICA DO SITE
   Ricardo Borém | Estratégia & Tecnologia

   COMO USAR EM QUALQUER PÁGINA:
       <link rel="stylesheet" href="global.css">

   Para adicionar estilos EXCLUSIVOS de uma página, crie um segundo
   arquivo e inclua DEPOIS do global:
       <link rel="stylesheet" href="global.css">
       <link rel="stylesheet" href="minha-pagina.css">

   ÍNDICE:
    1.  Variáveis de tema (cores dark e light)
    2.  Tipografia global (fonte, tamanho, peso)
    3.  Reset e box-model
    4.  Links — nunca ficam roxos
    5.  Body — flexbox para footer sempre no fundo
    6.  Topbar fixa
    7.  Menu hambúrguer (esquerda)
    8.  Controles do lado direito (tema + tradutor)
    9.  Botão de tema
   10.  Botão e dropdown do tradutor
   11.  Conteúdo principal (.pagina-conteudo)
   12.  Seção de perfil (index)
   13.  Grid de cards (index — Explore mais)
   14.  Rodapé / copyright
   15.  Suprimir barra do Google Translate
   16.  Responsividade (tablet e celular)
================================================================= */


/* =================================================================
   1. VARIÁVEIS DE TEMA
   ─────────────────────────────────────────────────────────────────
   PARA MUDAR AS CORES DO SITE INTEIRO: edite aqui.
   Cada variável começa com "--" e é usada em todo o CSS abaixo.
================================================================= */

/* --- TEMA ESCURO (abre por padrão na primeira visita) --- */
[data-theme="dark"] {
    --cor-fundo:          #0b0f1a;   /* Fundo principal da página */
    --cor-container:      #111827;   /* Cards, menus, dropdowns */
    --cor-borda:          #1e2d45;   /* Bordas sutis */
    --cor-texto:          #cbd5e1;   /* Texto corrido */
    --cor-titulo:         #b8860b;   /* Ouro Matte — títulos e nome */
    --cor-destaque:       #2e5a88;   /* Azul Sereno — badges, cargo */
    --cor-destaque-texto: #ffffff;   /* Texto sobre fundo azul */
    --cor-footer-fundo:   #0b0f1a;
    --cor-footer-texto:   #4a5568;
    --cor-card-hover:     #1a2540;
    --sombra-menu:        0 8px 32px rgba(0, 0, 0, 0.6);
}

/* --- TEMA CLARO — papel reciclado escurecido --- */
[data-theme="light"] {
    --cor-fundo:          #dcd5c5;
    --cor-container:      #cfc8b8;
    --cor-borda:          #b0a898;
    --cor-texto:          #334155;   /* Cinza chumbo — NUNCA preto puro */
    --cor-titulo:         #7a5c00;   /* Ouro mais escuro para contraste */
    --cor-destaque:       #2e5a88;
    --cor-destaque-texto: #ffffff;
    --cor-footer-fundo:   #c8c0af;
    --cor-footer-texto:   #5a6070;
    --cor-card-hover:     #c4bcab;
    --sombra-menu:        0 8px 32px rgba(0, 0, 0, 0.18);
}


/* =================================================================
   2. TIPOGRAFIA GLOBAL
   ─────────────────────────────────────────────────────────────────
   PARA MUDAR A FONTE DO SITE INTEIRO: edite as linhas abaixo.
   Tamanho base 20px se aplica a descrições, cargo e certificações.
================================================================= */

:root {
    --fonte-principal: Georgia, serif;
    --tamanho-base:    20px;
    --peso-base:       bold;
    --altura-linha:    1.7;
}


/* =================================================================
   3. RESET E BOX-MODEL
================================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}


/* =================================================================
   4. LINKS — NUNCA FICAM ROXOS EM NENHUMA PÁGINA
================================================================= */

a,
a:link,
a:visited,
a:hover,
a:active,
a:focus {
    color: inherit;
    text-decoration: none;
}


/* =================================================================
   5. BODY
   flex-direction: column + min-height: 100vh garante que o footer
   fique SEMPRE no fundo, independente do tamanho do conteúdo.
================================================================= */

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;

    background-color: var(--cor-fundo);
    color: var(--cor-texto);

    font-family: var(--fonte-principal);
    font-weight: var(--peso-base);
    font-size: var(--tamanho-base);
    line-height: var(--altura-linha);

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


/* =================================================================
   6. TOPBAR FIXA
   justify-content: space-between separa menu (esquerda) e
   controles (direita) — sem risco de sobreposição.
================================================================= */

.topbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;

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

    padding: 20px 28px;
    z-index: 9999;

    background-color: var(--cor-fundo);
    border-bottom: 1px solid var(--cor-borda);
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* Lado esquerdo — âncora para o dropdown do menu */
.topbar-esquerda {
    position: relative;
}

/* Lado direito — tema + tradutor lado a lado */
.topbar-direita {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}


/* =================================================================
   7. MENU HAMBÚRGUER (ESQUERDA)
================================================================= */

/* Botão ☰ — sem aparência de botão padrão */
.menu-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--cor-texto);
    font-size: 2rem;
    line-height: 1;
    padding: 4px;
    transition: color 0.2s ease;
}

.menu-btn:hover {
    color: var(--cor-titulo);
}

/* Dropdown — oculto até receber .active via JS */
.menu-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    width: 240px;

    background-color: var(--cor-container);
    border: 1px solid var(--cor-borda);
    border-radius: 14px;
    padding: 10px 0;
    box-shadow: var(--sombra-menu);
    transition: background-color 0.3s ease;
}

.menu-dropdown.active {
    display: block;
}

/* Links do menu — conteúdo gerenciado no global.js */
.menu-dropdown a {
    display: block;
    padding: 12px 22px;
    font-size: 1rem;
    color: var(--cor-texto);
    transition: background-color 0.15s ease, color 0.15s ease;
}

.menu-dropdown a:hover {
    background-color: var(--cor-borda);
    color: var(--cor-titulo);
}

/* Separador visual entre grupos de links no menu */
.menu-dropdown .menu-separador {
    height: 1px;
    background-color: var(--cor-borda);
    margin: 6px 14px;
}


/* =================================================================
   8. CONTROLES DO LADO DIREITO (tema + tradutor)
   Cada botão: ícone em cima, label embaixo — flex-direction: column
================================================================= */

/* Estilo base compartilhado pelos dois botões */
.btn-controle {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--cor-texto);

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;

    padding: 4px;
    font-family: var(--fonte-principal);
    font-weight: var(--peso-base);
    transition: color 0.2s ease;

    position: relative; /* âncora para dropdowns */
}

.btn-controle:hover {
    color: var(--cor-titulo);
}

.btn-controle .icone {
    font-size: 1.7rem;
    line-height: 1;
}

.btn-controle .label {
    font-size: 0.65rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    line-height: 1;
}


/* =================================================================
   9. BOTÃO DE TEMA
   Lua amarela brilhante com drop-shadow simulando luminária.
================================================================= */

#themeToggle .icone {
    filter: drop-shadow(0 0 8px #fff9c4) drop-shadow(0 0 18px #ffe44d);
}

/* Sol no tema claro */
[data-theme="light"] #themeToggle .icone {
    filter: drop-shadow(0 0 6px #ffcf00) drop-shadow(0 0 14px #ffaa00);
}


/* =================================================================
   10. BOTÃO E DROPDOWN DO TRADUTOR
================================================================= */

.translate-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    right: 0;           /* Alinha pela direita — não sai da tela */
    width: 210px;

    background-color: var(--cor-container);
    border: 1px solid var(--cor-borda);
    border-radius: 14px;
    padding: 10px 0;
    box-shadow: var(--sombra-menu);
    z-index: 9999;
}

.translate-dropdown.active {
    display: block;
}

/* Cada opção de idioma */
.translate-dropdown button {
    display: block;
    width: 100%;
    text-align: left;

    background: none;
    border: none;
    cursor: pointer;

    padding: 11px 22px;
    font-family: var(--fonte-principal);
    font-size: 0.9rem;
    font-weight: var(--peso-base);
    color: var(--cor-texto);

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

.translate-dropdown button:hover,
.translate-dropdown button.ativo {
    background-color: var(--cor-borda);
    color: var(--cor-titulo);
}

/* Marca o idioma selecionado com ✓ */
.translate-dropdown button.ativo::after {
    content: " ✓";
    color: var(--cor-titulo);
}


/* =================================================================
   11. CONTEÚDO PRINCIPAL
   flex: 1 faz crescer e empurra o footer ao fundo.
   Todas as páginas devem usar <main class="pagina-conteudo">.
================================================================= */

.pagina-conteudo {
    flex: 1;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding: 120px 28px 60px;  /* 120px compensam a topbar fixa */
}

/* Variação para páginas de aplicativo que precisam de largura total */
.pagina-conteudo.largura-total {
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
}


/* =================================================================
   12. SEÇÃO DE PERFIL (apenas index.html)
================================================================= */

.perfil {
    text-align: center;
    margin-bottom: 70px;
}

/* Foto circular */
.foto-perfil {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: url('foto_perfil.jpg') center / cover no-repeat;
    background-color: var(--cor-borda); /* fallback sem foto */
    border: 4px solid var(--cor-destaque);
    margin: 0 auto 28px;
}

/* Badge de certificações */
.badge-cert {
    display: inline-block;
    background-color: var(--cor-destaque);
    color: var(--cor-destaque-texto);
    padding: 6px 22px;
    border-radius: 50px;
    font-size: var(--tamanho-base);
    font-weight: var(--peso-base);
    letter-spacing: 0.03em;
    margin-bottom: 18px;
}

/* Nome principal */
.nome-principal {
    font-size: 45px;
    font-weight: var(--peso-base);
    color: var(--cor-titulo);
    line-height: 1.2;
    margin-bottom: 12px;
}

/* Cargo / subtítulo */
.cargo {
    font-size: var(--tamanho-base);
    color: var(--cor-destaque);
    font-weight: var(--peso-base);
    margin-bottom: 36px;
}

/* Parágrafos de biografia */
.biografia {
    text-align: justify; /* muda para left no mobile — ver seção 16 */
    font-size: var(--tamanho-base);
}

.biografia p + p {
    margin-top: 20px;
}


/* =================================================================
   13. GRID DE CARDS — "Explore mais" (apenas index.html)
   4 colunas desktop | 2 tablet | 1 celular
   NUNCA vira faixa horizontal em telas largas.
================================================================= */

.explore {
    margin-bottom: 60px;
}

.explore-titulo {
    font-size: 28px;
    color: var(--cor-titulo);
    font-weight: var(--peso-base);
    margin-bottom: 28px;
}

.cards-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.card {
    display: block;
    background-color: var(--cor-container);
    border: 1px solid var(--cor-borda);
    border-radius: 14px;
    padding: 24px 20px;
    overflow-wrap: break-word;
    word-break: break-word;
    transition: background-color 0.2s ease,
                border-color 0.2s ease,
                transform 0.18s ease;
}

.card:hover {
    background-color: var(--cor-card-hover);
    border-color: var(--cor-destaque);
    transform: translateY(-3px);
}

.card h3 {
    font-size: 1rem;
    color: var(--cor-titulo);
    margin-bottom: 10px;
    line-height: 1.3;
}

.card p {
    font-size: 0.8rem;
    color: var(--cor-texto);
    line-height: 1.5;
    font-weight: normal;
}


/* =================================================================
   14. RODAPÉ / COPYRIGHT
   Injetado automaticamente pelo global.js em todas as páginas.
   Sempre no fundo graças ao flex do body.
================================================================= */

.rodape {
    background-color: var(--cor-footer-fundo);
    color: var(--cor-footer-texto);
    border-top: 1px solid var(--cor-borda);
    text-align: center;
    padding: 22px 28px;
    font-size: 0.8rem;
    font-weight: normal;
    letter-spacing: 0.03em;
    transition: background-color 0.3s ease;
}


/* =================================================================
   15. SUPRIMIR BARRA PADRÃO DO GOOGLE TRANSLATE
   O widget injeta uma barra amarela e empurra o body com margin-top.
   Estas regras eliminam tudo isso — só nosso dropdown é exibido.
================================================================= */

#google_translate_element { display: none !important; }

.goog-te-banner-frame,
.skiptranslate         { display: none !important; }

body {
    top:       0 !important;
    margin-top: 0 !important;
}

iframe.goog-te-menu-frame { display: none !important; }

.goog-tooltip,
.goog-tooltip:hover    { display: none !important; }

.goog-text-highlight {
    background: none !important;
    box-shadow: none !important;
}


/* =================================================================
   16. RESPONSIVIDADE
================================================================= */

/* --- TABLET (até 768px): grid vira 2 colunas --- */
@media (max-width: 768px) {

    .cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .biografia {
        text-align: left;
    }

    .pagina-conteudo {
        padding-top: 110px;
    }
}

/* --- CELULAR (até 480px): grid vira 1 coluna --- */
@media (max-width: 480px) {

    .cards-grid {
        grid-template-columns: 1fr;
    }

    .biografia {
        text-align: left;
    }

    .nome-principal {
        font-size: 32px;
    }

    .pagina-conteudo {
        padding-top: 100px;
        padding-left: 18px;
        padding-right: 18px;
    }

    .topbar {
        padding: 16px 18px;
    }

    .topbar-direita {
        gap: 12px;
    }
}