/*---------------------------------------- ESTILO GLOBAL ----------------------------------------*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600&family=Outfit:wght@500;700&display=swap');

:root {
    /* Fundos */
    --cor-fundo-pagina: #1b182c; /* Roxo escuro */
    --cor-fundo-card: #282440; 
    --cor-fundo-card-esquerdo: #211e33;  /* Roxo um pouco mais claro para destacar os cards */
    --cor-borda: #454158;        /* Roxo acinzentado para bordas subtis */
    
    /* Cores de Destaque */
    --cor-rosa: #ff95d6;         /* rosa (para bordas principais e destaques) */
    --cor-azul-ceu: #8be9fd;     /* azul céu (para links, botões e ícones) */
    --cor-banana: #ffe97d;       /* amarelo banana (para títulos principais) */
    --cor-roxo-claro: #bd93f9;   /* roxo claro (para subtítulos) */
    
    /* Texto */
    --cor-texto-principal: #e0def4; /*branco gelo (melhor para leitura) */
    
    /* Fontes */
    --fonte-titulo: 'Outfit', sans-serif;
    --fonte-texto: 'Inter', sans-serif;
}

/*---------------------------------------- DEFINICOES TAGS ----------------------------------------*/

body {
    background-color: var(--cor-fundo-pagina);
    color: var(--cor-texto-principal);
    font-family: var(--fonte-texto);
    margin: 0;
}

h1, h2, h3, h4 {
    font-family: var(--fonte-titulo);
    color: var(--cor-banana);
}

/*---------------------------------------- HEADER ----------------------------------------*/

/*header grande*/
.cabecalho {
    width: 100%;
    background: transparent;
    margin: 0;
    padding: 0;
    border: none;
    box-shadow: none;
    border-radius: 0;
    max-width: 100%;
}

/*header pequena (barra fixa de navegação)*/
.nav-bar {
    position: sticky; /* Faz a barra colar no topo */
    top: 0;
    z-index: 1000;    /* Garante que fica em cima de tudo */
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    /* Efeito de vidro fosco */
    background-color: rgba(27, 24, 44, 0.9); 
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--cor-borda);
    
    padding: 15px 40px;
    width: 100%;
    box-sizing: border-box;
}

/* Links da Esquerda (Projects, About) */
.menu-links a {
    color: var(--cor-texto-principal);
    margin-right: 25px;
    font-weight: 500;
    font-size: 0.95rem;
    transition: color 0.3s;
}

.menu-links a:hover,
.menu-links a.link-ativo {
    color: var(--cor-rosa);
}

/* Ferramentas da direita (icones e botões) */
.menu-ferramentas {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* Estilo para os ícones */
.menu-ferramentas a {
    color: var(--cor-azul-ceu);
    font-size: 1.2rem;
    display: flex;           /* Ajuda a alinhar o ícone verticalmente ao centro */
    align-items: center;
    transition: transform 0.3s, color 0.3s; /* animação de movimento */
}

/* se tiver mouse, no celular essa regra e ignorada */
@media (hover: hover) {
    .menu-ferramentas a:hover {
        color: var(--cor-rosa);
        transform: translateY(-3px); /* O "pulo" para cima */
    }
}

/* pro telefone: enquanto o dedo ta pressionando no icone ele fica rosa */
.menu-ferramentas a:active {
    color: var(--cor-rosa);
    transform: scale(0.90);       /* Encolhe um pouquinho (efeito de botão físico) */
    transition: transform 0.1s;   /* Uma transição mais rápida para parecer ágil */
}

.divisor {
    color: var(--cor-borda);
}

/* Botões (ENG, Light Theme) */
.btn-toggle {
    background: transparent;
    border: 1px solid var(--cor-borda);
    color: var(--cor-texto-principal);
    padding: 5px 10px;
    border-radius: 6px;
    cursor: pointer;
    font-family: var(--fonte-texto);
    transition: 0.3s;
}

.btn-toggle:hover {
    border-color: var(--cor-rosa);
    color: var(--cor-rosa);
}

/*---------------------------------------- PERFIL (ainda na header) ----------------------------------------*/
.perfil {
    padding: 60px 20px 40px 20px;
    text-align: center;
    
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    
    /* Degradê suave no fundo para separar do conteúdo */
    background: linear-gradient(to bottom, rgba(40, 36, 64, 0.5), transparent);
    border-bottom: 1px solid var(--cor-borda);
    margin-bottom: 40px;
}

.foto-perfil {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    border: 3px solid var(--cor-azul-ceu);
    box-shadow: 0 0 20px rgba(139, 233, 253, 0.2);
    object-fit: cover;
}

.texto-perfil h1 {
    font-size: 2.5rem;
    margin: 0;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.texto-perfil p {
    color: var(--cor-rosa);
    font-size: 1.2rem;
    margin-top: 5px;
    font-weight: 600;
}

/* Área dos stats (github-stats) */
.github-stats {
    display: flex;
    flex-direction: row;      
    gap: 20px;                
    justify-content: center;
    align-items: center;
    margin-top: 25px;
    flex-wrap: wrap; 
}

.github-stats img {
    height: 150px; 
    width: auto;
    max-width: 100%;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.3));
    transition: transform 0.3s;
}

.github-stats img:hover {
    transform: translateY(-5px); 
}

/* ---------------------------------------- CSS GRID DO LAYOUT DASHBOARD ---------------------------------------- */

.layout-dashboard {
    display: grid;
    grid-template-columns: 280px 1fr; /* Coluna 1 (Sidebar): 280px fixos | Coluna 2 (Conteúdo): O resto do espaço (1fr) */
    gap: 40px; /* Espaço entre a sidebar e os projetos */
    
    max-width: 1200px; /* Aumentar a largura total para caber tudo */
    margin: 40px auto; /* Centraliza a grelha na página */
    padding: 0 20px;
}
/* ---------------------------------------- BARRA LATERAL ---------------------------------------- */

.barra-lateral {
    display: flex;
    flex-direction: column;
    gap: 40px;
    padding: 20px 0;

    /*configs pra barra ficar fixa*/
    height: fit-content; /* Altura ajusta-se ao conteúdo */
    position: sticky; /* Ela cola na tela */
    top: 110px; /* Cola 110px abaixo do topo (para não bater na Header que já tem uns 90px) */
}

.grupo-filtro {
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.grupo-filtro label {
    font-size: 0.75REM;
    color: var(--cor-roxo-claro);
    font-weight: bold;
    letter-spacing: 1px;

}

.dropdown-escola, .dropdown-tecnologias {
    padding: 12px;
    background-color: var(--cor-fundo-card-esquerdo);
    color: var(--cor-texto-principal);
    border: 1px solid var(--cor-borda);
    border-radius: 8px;
    outline: none;
    cursor: pointer;
    font-family: var(--fonte-texto);
    font-size: 0.9rem;
    width: 100%;
    box-sizing: border-box;
}

.dropdown-escola focus, .dropdown-tecnologias focus {
    border-color: var(--cor-rosa); /*o dropdown nao ta rosa porque o website ta estatico ainda eu acho*/
}

/*---lista de projetos no menu lateral---*/
.secao-projetos h3 {
    color: var(--cor-banana);
    font-size: 1.1rem;
    margin-bottom: 15px;
    padding-left: 10px;
    border-left: 3px solid var(--cor-banana);
}

.lista-projetos {
    list-style: none;
    padding: 0;
    margin: 0;
}

.item-projeto {
    padding: 15px;
    border-radius: 10px;
    margin-bottom: 10px;
    cursor: pointer;
    border: 1px solid transparent; 
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
}

.item-projeto span {
    font-weight: 600;
    font-size: 1rem;
    color: var(--cor-texto-principal);
}

.item-projeto small {
    font-size: 0.8rem;
    color: var(--cor-borda);
    margin-top: 4px;
}

.item-projeto:hover {
    background-color: rgba(255, 255, 255, 0.05);
    transform: translateX(5px);
}

.item-projeto.ativo {
    background-color: rgba(139, 233, 253, 0.1);
    border-color: var(--cor-azul-ceu);
}

.item-projeto.ativo span {
    color: var(--cor-azul-ceu);
}

.item-projeto.ativo small {
    color: var(--cor-azul-ceu);
    opacity: 0.7;
}

/* basicamente a mesma coisa que fazer na tag main mas agora quem controla é o grid */
.conteudo-principal {
    margin: 0; 
    padding: 0;
    max-width: 100%;
}

/*---------------------------------------- PROJETOS 42 ----------------------------------------*/

.titulo-projetos-42 {
    text-transform: uppercase;
    color: var(--cor-banana);
    margin-top: 40px;
    margin-bottom: 20px;
    font-size: 1.8rem;
    border-left: 5px solid var(--cor-rosa);
    padding-left: 15px;
}

.projeto-42 {
    display: grid; /*usando o grid para dividir o card em 2 colunas*/
    grid-template-columns: 1fr 3fr; /* Coluna da esquerda (1 parte) e Coluna da direita (3 partes) */
    border: 3px solid var(--cor-borda);
    border-radius: 20px;
    background-color: var(--cor-fundo-card);
    overflow: hidden; /* Garante que o fundo azul não saia das bordas arredondadas */
    margin-bottom: 30px;
}

.lado-esquerdo {
    background-color: var(--cor-fundo-card-esquerdo);
    border-right: 3px solid var(--cor-borda); /* Linha divisória vertical */
    padding: 20px;
    
    /* Utilizacao do FLEX para centrar a imagem e o botão verticalmente */
    display: flex;
    flex-direction: column; /* Um embaixo do outro */
    align-items: center;    /* Centrado horizontalmente */
    justify-content: center; /* Centrado verticalmente */
    gap: 15px;
}

.img-projeto-42 {
    width: 100%;
    max-width: 200px; /* Impede que a imagem fique gigante */
    border-radius: 10px;
    border: 2px solid var(--cor-borda);
    box-shadow: 0 5px 15px rgba(0,0,0,0.5); /* Sombra simples */
}

/* Estilo do Botão do Repositório */
.btn-repo {
    background-color: transparent;
    color: var(--cor-azul-ceu);
    border: 2px solid var(--cor-azul-ceu);
    padding: 10px 15px;
    text-decoration: none; /* Tira o sublinhado do link */
    border-radius: 5px;
    font-weight: bold;
    text-align: center;
    transition: 0.3s;
}

.btn-repo:hover {
    background-color: var(--cor-azul-ceu); /* Muda de cor quando passa o rato */
    color: var(--cor-fundo-pagina);
    box-shadow: 0 0 15px var(--cor-azul-ceu);
}

.lado-direito {
    padding: 30px;
    display: flex;
    flex-direction: column;
    gap: 20px; /* Espaço entre o topo, o meio e o baixo */
}

.info-topo h3 {
    margin: 0;
    font-size: 2rem;
}

.definicao {
    color: var(--cor-roxo-claro);
    font-style: italic;
    margin-top: 5px;
}

/* Criamos um terceiro grid para dividir a explicacao para um lado (esquerda), e os conceitos do outro (direita) */
.info-meio {
    display: grid;
    grid-template-columns: 2fr 1fr; /* Explicação ocupa o dobro do espaço dos conceitos */
    gap: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--cor-borda); /* Linha fina cinza para separar */
}

.explicacao p {
    text-align: justify;
    line-height: 1.5;
}

.conceitos h4 {
    margin-top: 0;
    margin-bottom: 0;
    color: var(--cor-rosa);
}

.conceitos ul {
    padding-left: 20px; /* Recuo para a lista */
    margin-top: 5px;
}

.info-baixo {
    display: flex; /* Ícones lado a lado */
    align-items: center;
    gap: 10px;
}

.info-baixo h4 {
    margin: 0;
    color: var(--cor-azul-ceu);
    font-size: 1rem;
    margin-right: 10px;
}

/*---------------------------------------- RODAPÉ (FOOTER) ----------------------------------------*/

.rodape {
    margin-top: 80px;
    border-top: 1px solid var(--cor-borda);
    padding: 40px 20px 20px 20px; /* Mais espaço em cima */
    background-color: rgba(27, 24, 44, 0.5);
    font-size: 0.9rem;
}

/* Container Flex (3 colunas) */
.rodape-conteudo {
    max-width: 1200px;
    margin: 0 auto; /* Centraliza no ecrã */
    display: flex;
    justify-content: space-between; /* Empurra um para cada ponta e um no meio */
    align-items: center;
    flex-wrap: wrap; /* Se o ecrã for pequeno, quebra linha */
    gap: 20px;
    padding-bottom: 30px; /* Espaço antes do copyright */
}

/* 1. Lado Esquerdo (Texto) */
.rodape-info strong {
    color: var(--cor-banana); /* Destaque no nome */
}

/* 2. Centro (Links) */
.rodape-menu {
    display: flex;
    gap: 30px;
}

.rodape-menu a {
    color: var(--cor-texto-principal);
    font-weight: 600;
    transition: color 0.3s;
}

.rodape-menu a:hover {
    color: var(--cor-rosa);
}

/* 3. Lado Direito (Botões Sociais) */
.rodape-social {
    display: flex;
    gap: 10px;
}

.btn-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--cor-borda);
    border-radius: 8px; /* Cantos ligeiramente arredondados */
    color: var(--cor-azul-ceu);
    background-color: rgba(255, 255, 255, 0.05);
    transition: all 0.3s;
}

.btn-footer:hover {
    border-color: var(--cor-rosa);
    color: var(--cor-rosa);
    transform: translateY(-2px);
}

/* Parte do copyright */
.rodape-copyright {
    border-top: 1px solid var(--cor-borda); /* Linha divisória fina */
    padding-top: 20px;
    text-align: center;
    font-size: 0.75rem;
    color: var(--cor-borda); /* Cinzento escuro */
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.7;
}

/* Responsividade: para telemóvel, empilha tudo */
@media (max-width: 768px) {
    .rodape-conteudo {
        flex-direction: column;
        text-align: center;
    }
}

/* ---------------------------------------- PAGINA ABOUT ME ---------------------------------------- */

.about-hero {
    margin-bottom: 60px;  
}

.hero-content {
    display: flex;
    gap: 40px;
    margin-bottom: 60px;
    flex-wrap: wrap; /*se tiver no celular a foto vai ficar em cima do texto*/
}

.foto-container img {
    width: 280px;      /* Um pouco maior, como na imagem */
    height: 320px;
    object-fit: cover;
    border-radius: 20px;
    margin-top: 20px; /*resolveu e alinhou img com o texto!!*/
    
    /* efeito NEON da imagem */
    border: 3px solid var(--cor-rosa);
    box-shadow: 0 0 30px rgba(255, 149, 214, 0.4); 
    
    transition: transform 0.3s;
}

.foto-container img:hover {
    transform: scale(1.02); /* Pequeno zoom ao passar o rato */
}

.bio-texto {
    flex: 1;
}

.titulo-neon {
    font-size: 3rem;   /* Título grande */
    margin-top: 0;
    margin-bottom: 20px;
    text-transform: uppercase;
    
    /* Sombra de texto para dar brilho */ 
    text-shadow: 0 0 10px rgba(255, 233, 125, 0.3);
}

.destaque-texto {
    font-size: 1.2rem;
    line-height: 1.6;
    margin-bottom: 20px;
    font-weight: 300;
}

/* O texto normal da bio */
.bio-texto p {
    color: var(--cor-texto-principal);
    line-height: 1.8;
    margin-bottom: 15px;
    text-align: justify; /* Texto justificado fica mais elegante */
}

.texto-rosa {
    color: var(--cor-rosa);
    font-weight: 700;
}

/*widgets laterais do topo da pagina about*/

.barra-lateral-about {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 10px;
}

.widget-about {
    background-color: var(--cor-fundo-card-esquerdo);
    border: 1px solid var(--cor-borda);
    border-radius: 16px; /* Cantos bem arredondados */
    padding: 25px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); /* Sombra suave */
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.widget-about:hover {
    border-color: var(--cor-roxo-claro);
    transform: translateY(-2px);
}

/* Títulos (Atualmente / Idiomas) */
.widget-titulo {
    color: var(--cor-banana); /* Amarelo */
    font-size: 1rem;
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
    
    /* Aquele detalhe da bolinha amarela antes do título */
    display: flex;
    align-items: center;
    gap: 10px;
}

/* --- LISTA "ATUALMENTE" --- */
.lista-status {
    list-style: none;
    padding: 0;
    margin: 0;
}

.lista-status li {
    display: flex;
    align-items: center; /* Alinha ícone e texto */
    gap: 15px;
    margin-bottom: 15px;
    color: var(--cor-texto-principal);
    font-size: 0.9rem;
    line-height: 1.4;
}

.icone-status {
    color: var(--cor-roxo-claro); /* Ícones roxos */
    font-size: 1.1rem;
    width: 20px; /* Garante que todos os ícones ocupam o mesmo espaço */
    text-align: center;
}

/* --- BARRAS DE IDIOMAS --- */
.skill-bar {
    margin-bottom: 15px;
}

.skill-bar .info {
    display: flex;
    justify-content: space-between; /*so da para usar com o display flex ein nao esquecer*/
    font-size: 0.85rem;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--cor-texto-principal);
}

.skill-bar .nivel {
    color: var(--cor-roxo-claro); /* Texto do nível (ex: Nativo) em roxo */
    font-size: 0.75rem;
    opacity: 0.9;
}

/* ---------------------------------------- RESPONSIVIDADE ---------------------------------------- */

/* TABLET E ECRÃ DIVIDIDO (Abaixo de 1024px) */
@media (max-width: 1024px) {

    .layout-dashboard {
        display: flex;
        flex-direction: column;
        gap: 40px;
        padding-top: 20px;
    }

    .sidebar-about, 
    .barra-lateral {
        width: 100%;       /* Ocupa a largura toda */
        height: auto;      /* Altura automática (cresce com o conteúdo) */
        position: relative; /* desliga o 'sticky' ou 'fixed' que causa sobreposição */
        top: 0;
        margin-bottom: 20px;
        
        /* põe os widgets lado a lado */
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
    }

    .widget-about {
        flex: 1;           /* Divide o espaço igualmente */
        min-width: 250px;  /* Mas não deixa ficar muito pequeno */
    }

    .hero-content {
        /* Garante que o texto vai para baixo da foto se não houver espaço */
        flex-direction: column; 
        align-items: center;
    }

    .foto-container {
        /* Dá espaço entre a foto e o texto */
        margin-bottom: 30px; 
    }

    .bio-texto {
        width: 100%; /* Garante que o texto não tenta flutuar */
    }

    .titulo-neon {
        text-align: center;
        font-size: 2.5rem;
    }
}

/* TELEMÓVEL (Abaixo de 768px) */
@media (max-width: 768px) {
    
    .nav-bar {
        flex-direction: column;
        gap: 15px;
        padding: 15px;
    }

    /* Sidebar volta a empilhar (um widget em cima do outro) */
    .sidebar-about {
        flex-direction: column;
    }

    /* Títulos menores */
    .titulo-neon {
        font-size: 2rem;
    }

    .github-stats img {
        height: auto;
        width: 70%;
        max-width: 100%;
    }
    /* Ajuste na margem do conteúdo */
    .layout-dashboard {
        padding: 0 10px; /* Margem lateral pequena para não colar no ecrã */
    }

    /* transformar as duas colunas do card em uma */
    .projeto-42 {
        grid-template-columns: 1fr; /* empilha as 2 colunas uma em cima da outra */
        height: auto; /* Deixa a altura crescer conforme o texto */
    }

    .lado-esquerdo {
        border-bottom: 3px solid var(--cor-borda); /* Adiciona linha pra dividir as  a coluna da img da do texto*/
        padding: 30px 20px;
    }

    .img-projeto-42 {
        max-width: 100%; /* Garante que a imagem não vaza */
        width: 250px;    /* Tamanho ideal para o telemóvel */
    }

    .lado-direito {
        padding: 20px; /* Menos padding  pra ficar mais harmonioso no mobile*/
    }

    .info-topo h3 {
        font-size: 1.5rem; /* Diminui um pouco o título */
        text-align: center;
    }
    
    .definicao {
        text-align: center;
    }
     /*Corrigir o grid do texto, para colocar o conceito em baixo da explicação em vez de lado a lado*/
    .info-meio {
        grid-template-columns: 1fr; /* usamos isso dnv para transformar td numa coluna só */
        gap: 30px;
    }
}