/* RESET E CONFIGURAÇÕES GLOBAIS */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ==========================================================================
   BODY (GLOBAL)
   ========================================================================== */


body {
    background:
        radial-gradient(ellipse at 100vw 1vh,
            oklch(19.204% 0.00509 174.036 / 0.548) 1%,
            transparent 20%),

        conic-gradient(from 170deg at 100vw 1vh,
            transparent 0deg,
            oklch(34.335% 0.04677 116.964 / 0.438) 30deg,
            oklch(34.824% 0.05257 133.285 / 0.425) 35deg,
            oklch(34.567% 0.03946 164.435 / 0.342) 40deg,
            transparent 45deg),

        radial-gradient(ellipse at 100vw 1vh,
            oklch(35.10% 0.036 184.57) 30%,
            transparent 50%),

        radial-gradient(ellipse at 100vw 1vh,
            oklch(31.06% 0.021 191.30) 50%,
            transparent 70%),

        radial-gradient(ellipse at 100vw 1vh,
            oklch(28.53% 0.006 156.86) 70%,
            transparent 90%),

        radial-gradient(ellipse at 100vw 1vh,
            oklch(26.04% 0.024 186.93) 90%,
            transparent 100%),

        radial-gradient(ellipse at 100vw 1vh,
            oklch(19.20% 0.005 173.79) 100%,
            transparent 100%),

        oklch(29.82% 0.016 196.31);


    color: white;
    font-family: 'IM Fell English SC', serif;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
}

/* ==========================================================================
   HEADER (GLOBAL)
   ========================================================================== */
header {
    width: 100%;
    display: flex;
    flex-direction: column;
    /* Força Nome, Cargo e Menu a ficarem um abaixo do outro */
    align-items: center;
    /* Centraliza tudo horizontalmente */
    position: relative;
    /* Permite que os ícones sociais flutuem na direita */
    padding: 50px 0 0 0;
    /* Espaço no topo */
    z-index: 100;
}

.header-main {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
    padding-bottom: 35px;
    position: relative !important
}

/* Subtítulo (Senior 3D Generalist) */
.header-main p {
    font-family: 'Gentium Book Basic', serif !important;
    font-size: 26px;
    color: #bbb;
    margin-top: 15px !important;
    text-transform: none;
    line-height: 1;
    text-decoration: none !important;
    /* Remove o sublinhado do texto */
}

/* Esta classe você só usará nas páginas Tarsila, VFX, Advertising, etc. */
.header-internal {
    display: flex;
    flex-direction: column;
    /* Nome em cima, Cargo embaixo */
    align-items: center;
    text-align: center;
    width: 100%;
    background-color: oklch(21.88% 0.024 186.34 / 0.4);
}

/* Estilização do Título no Header */

.site-title {
    margin: 0;
    line-height: 1;
}

.site-title a {
    font-family: 'IM Fell English SC', serif !important;
    font-size: 50px;
    color: white;
    text-decoration: none;
    /* Tira o sublinhado do link */
    text-transform: none;
    /* Mantém as letras como você digitou */
    font-weight: 400;
    letter-spacing: 0.5px;
    display: block;
    /* Melhora a área de clique */
}

.site-title .correct-c {
    font-family: 'IM Fell English', serif !important;
    /* Versão sem o SC no final */
    text-transform: none !important;
    /* Ajuste fino: como a SC é naturalmente mais "robusta", 
       talvez precise aumentar um pouquinho o tamanho do C normal 
       para ele não parecer menor que as outras letras */
    font-size: 31px;
    position: relative;
    top: 0.5px;
    /* Ajuste se a letra parecer "caída" em relação às outras */
}

/* Submenu com a linha divisória correta */
.submenu {
    width: 90%;
    display: flex;
    justify-content: center!important;
    border-top: 1px solid oklch(78.591% 0.08184 94.396 / 0.2);
    /* A linha aparece aqui */
    gap: 60px;
    padding: 20px 0;
    align-items: center;    
}

.submenu a {
    text-decoration: none;
    color: rgb(226, 226, 226);
    font-family: 'IM Fell English SC', serif;
    font-size: 22px;
    opacity: 1;
    transition: opacity 0.3s;
    text-transform: lowercase;
}

.submenu a:hover {
    opacity: 1;
    color: oklch(78.591% 0.08184 94.396);
}

/* REDES SOCIAIS */
.top-nav {
    position: absolute;
    right: 2%;
    top: 70px;
    display: flex;
    gap: 15px;
    align-items: center;
}

.social-icons {
    display: flex;
    gap: 10px;
}

.social-icons img {
    width: 35px;
    height: auto;
}

/* RABOUT */

.about-font {
    font-family: 'Gentium Book Basic', serif !important;
    font-size: 20px;
    /* Tamanho confortável para leitura */
    color: white;
    /* Ou a cor que você definiu para o menu */
    text-decoration: none;
    /* Remove o sublinhado padrão de links */
    text-transform: none;
    transition: opacity 0.3s ease;
    /* Efeito suave ao passar o mouse */
    letter-spacing: 0.5px;
}

/* ==========================================================================
   FOOTER (GLOBAL)
   ========================================================================== */

footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 50px;
    /* Altura fixa para o rodapé */
    text-align: center;
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
}

footer p {
    display: flex;
    gap: 15px;
    /* Espaço entre as partes do texto */
    align-items: center;
}

/* Fonte US Declaration (Laranja) */
.font-declaration {
    font-family: 'US Declaration', serif;
    font-size: 14px;
    text-transform: none;
    color: gray;
}

/* Fonte Byron (Amarela/Central) */
.font-byron {
    font-family: 'Byron', cursive;
    font-size: 34px;
    /* Geralmente fontes cursivas precisam ser maiores */
    text-transform: none;
    margin: 0 1px;
    display: inline-block;
    /* Necessário para o transform funcionar bem */
    transform: translateY(2px);
    /* Ajuste o 5px (aumente se precisar descer mais) */
    color: gray;
}

@font-face {
    font-family: 'US Declaration';
    src: url('/_fonts/USDeclaration.ttf') format('truetype');
    /* Verifique se o nome do arquivo está igual */
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Byron';
    src: url('/_fonts/ByronTrial.ttf') format('truetype');
    /* Verifique se o nome do arquivo está igual */
    font-weight: normal;
    font-style: normal;
}

/* Cor do link quando a página está ativa */
.submenu a.active {
    color: oklch(78.59% 0.082 94.39); /* Cor de destaque */    
}

/* ==========================================================================
   MOBILE RESPONSIVITY (Telas até 768px)
   ========================================================================== */
@media (max-width: 768px) {

    /* Centraliza o título e subtítulo */
    header {
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
        padding: 20px 10px !important;
        position: relative !important;
        /* Garante que não flutue sobre outros elementos */
    }

    /* 2. O bloco do Título e Subtítulo */
    .header-main {
        position: relative !important;
        margin-bottom: -10px !important;
        /* Empurra tudo o que estiver abaixo */
        width: 100%;
        text-align: center;

    }

    /* 3. O bloco de links (About e Social) */
    .top-nav {
        position: relative !important;
        /* Remove qualquer absolute que cause sobreposição */
        top: 0 !important;
        /* Zera posições fixas */
        right: 0 !important;
        display: flex !important;
        flex-direction: row !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 15px !important;
        width: 100% !important;
    }

    /* 4. Ajuste dos ícones sociais para não ficarem colados */
    .social-icons {
        display: flex !important;
        justify-content: center !important;
        gap: 10px !important;
        margin-top: 1px;
    }  

    .site-title a {
        font-size: 30px !important;
        margin-bottom: 5px;
    }

    .site-title .correct-c {
        font-size: 20px !important;
    }

    .header-main p {
        font-size: 17px;
        margin-bottom: 1px;
    }

    .about-font {
        font-size: 18px;
        letter-spacing: 1px;
    }

    footer {
        height: auto;
        /* Permite que o footer cresça se necessário */
        padding: 20px 0;
        position: relative;
        /* Evita que o absolute o esconda */
        margin-top: 50px;
    }

    footer p {
        flex-direction: row;
        /* Mantém em uma linha só */
        flex-wrap: nowrap;
        /* Proíbe quebrar linha */
        justify-content: center;
        width: 95%;
        /* Usa quase toda a largura */
        gap: 5px;
        /* Reduz o espaço entre os textos */
        margin: 0 auto;
    }

    /* Redução agressiva para caber em uma linha */
    .font-declaration {
        font-size: 10px !important;
        /* Estilo gray */
    }

    .font-byron {
        font-size: 20px !important;
        /* Estilo Byron amarela */
        transform: translateY(1px) !important;
        /* Ajuste fino de altura */
    }


   .submenu {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        border: none !important;      /* Remove a barra amarela original */
        background: none !important;  /* Remove fundos extras */
        padding: 0 !important;
        margin: 0 !important;
        gap: 0 !important;           /* Remove qualquer espaço entre os itens */
    }

    /* 2. Ajuste dos Links (Aproximando eles) */
    .submenu a {
        display: none !important;    /* Escondido por padrão */
        width: 100% !important;
        padding: 5px 0 !important;   /* Valor bem pequeno para ficarem grudados */
        margin: 0 !important;        /* Remove margens de desktop */
        font-size: 18px !important;  /* Ajuste de tamanho para mobile */
        border: none !important;      /* Limpa bordas de desktop */
    }

    /* 3. Linha amarela apenas no TOPO do primeiro item */
    .submenu a:first-of-type {
        display: none !important; /* Mantém a lógica de abrir/fechar */
        border-top: 1px solid oklch(78.591% 0.08184 94.396 / 0.4) !important;
        margin-top: 30px !important; /* Espaço para o hamburguer não cobrir o texto */
        padding-top: 20px !important;
    }

    /* Mostra os links quando o menu está ativo */
    .submenu.active a {
        display: block !important;
    }

    /* 4. Posicionamento do Hambúrguer no Canto Superior Direito */
   .mobile-menu-icon {
    display: flex !important;
    position: absolute !important; /* Muda de FIXED para ABSOLUTE */
    top: 25px !important; 
    right: 20px !important;
    z-index: 9999 !important;
    flex-direction: column;
    gap: 5px;
}

    .mobile-menu-icon span {
        width: 30px;
        height: 3px;
        background-color: white;
    }
}