/**
 * SamSantos Portfolio - Core Styles
 * UX: Gerenciamento de Temas e Consistência de Navegação
 */

/* --- COMPORTAMENTOS GLOBAIS --- */
html,
body {
    margin: 0;
    padding: 0;
    min-height: 100%;
}

body {
    transition: background-color 0.6s cubic-bezier(0.4, 0, 0.2, 1), color 0.4s ease;
}

/* --- LOGICA DE TEMAS (BACKGROUNDS) --- */

/* Temas Claros (Home, Arte e Contato) */
body.theme-home,
body.theme-art,
body.theme-contato {
    background-color: #f8f9fa !important;
}

/* Temas Escuros (Dev, Libras e Admin) - RESOLVE PROBLEMA DO FUNDO CLARO */
body.theme-dev,
body.theme-libras,
body.theme-admin {
    background-color: #0b0e14 !important;
}

/* --- VISIBILIDADE DE TEXTO (RESOLVE TÍTULO INVISÍVEL) --- */
body.theme-dev h1,
body.theme-dev h2,
body.theme-dev h3,
body.theme-libras h1,
body.theme-libras h2,
body.theme-admin h1 {
    color: #ffffff !important;
}

#app>div {
    padding-left: 1.5rem;
    /* px-6 do Tailwind */
    padding-right: 1.5rem;
    width: 100%;
    box-sizing: border-box;
}

/* Ajuste fino para a seção Hero da Home no Mobile */
@media (max-width: 640px) {
    h1 {
        word-wrap: break-word;
        overflow-wrap: break-word;
        hyphens: auto;
        /* Adiciona hifens se necessário em palavras longas */
    }
}


/* --- NAVEGAÇÃO FIXA (SEMPRE CLARA) --- */
nav#main-nav {
    background-color: rgba(255, 255, 255, 0.98) !important;
    border-bottom: 1px solid #e5e7eb !important;
    color: #1c1e24 !important;
    z-index: 1000;
    /* Garante que fique acima de qualquer elemento do conteúdo */
}

/* Links da Nav sempre escuros para contraste com o branco */
nav#main-nav a:not(.admin-btn) {
    color: #4b5563 !important;
}

nav#main-nav a:hover {
    color: #000000 !important;
}

/* Botão Admin na Nav Clara */
.admin-btn {
    border-color: #1c1e24 !important;
    color: #1c1e24 !important;
}

.admin-btn:hover {
    background-color: #1c1e24 !important;
    color: #ffffff !important;
}

/* --- UTILITÁRIOS --- */
.fade-in {
    animation: fadeIn 0.8s ease-out forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Scrollbar Customizada */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #5b7b7a;
    border-radius: 10px;
}

/* Garante que o menu mobile apareça por cima de tudo */
#mobile-menu {
    height: calc(100vh - 5rem);
    /* Ocupa a altura da tela menos o header */
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

/* Evita que o conteúdo da Home ( Hero ) brilhe através do menu */
#main-nav {
    background-color: white !important;
}

/* Transição suave de entrada */
.animate-fade-in {
    animation: fadeInMenu 0.3s ease-out forwards;
}

@keyframes fadeInMenu {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Ajuste de Padding para o App não ficar colado na Nav em telas pequenas */
@media (max-width: 768px) {
    #app {
        padding-top: 5rem;
        /* 80px para dar espaço à nav fixa */
    }
}

.preserve-format {
    white-space: pre-wrap;
    /* Preserva quebras de linha e espaços */
    word-wrap: break-word;
    /* Garante que palavras longas não quebrem o layout */
    overflow-wrap: break-word;
}

/* Garante que a tabela do admin não quebre o layout em celulares */
@media (max-width: 768px) {
    .admin-input {
        font-size: 16px !important;
        /* Evita o zoom automático do iOS ao focar no input */
    }

    /* Faz a tabela ser scrollável lateralmente no mobile */
    .overflow-x-auto {
        -webkit-overflow-scrolling: touch;
    }
}

/* Container da imagem para evitar quebras de layout durante a troca */
.art-image-container {
    perspective: 1000px;
}

/* Estado padrão da imagem */
.art-card-img {
    transition: opacity 0.4s ease-in-out, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 1;
    transform: scale(1);
}

/* Classe aplicada via JS durante a troca */
.art-card-img.changing {
    opacity: 0;
    transform: scale(0.95);
}