/* 
Theme Name: TecDropz Custom Styles
Description: Estilos estruturais, correções de plugins e comportamentos de UI.
Version: 5.0
*/

/* =========================================
   1. WORDPRESS CORE & UTILS
   ========================================= */

/* Ajuste da Barra de Admin do WordPress para não cobrir o Header */
body.admin-bar header { top: 48px; }
@media (min-width: 782px) { 
    body.admin-bar header { top: 32px; } 
}

/* Alinhamento Total (Gutenberg) */
.alignfull { 
    width: 100vw; 
    margin-left: calc(50% - 50vw); 
}

/* Utilitário: Esconder Scrollbar (usado na Galeria) */
.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

/* =========================================
   2. GLASSMORPHISM & UI (O Visual do Tema)
   ========================================= */

.glass-panel {
    /* Fallback para navegadores antigos ou se a var falhar */
    background: #121212; 
    /* Uso de variável se disponível (definida no dynamic-styles.php) */
    background: rgba(var(--color-surface-rgb, 18, 18, 18), 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--color-border);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}

/* Ajuste para Modo Claro */
body.light-mode .glass-panel {
    background: rgba(255, 255, 255, 0.85);
    border-color: #e5e7eb;
}

/* =========================================
   3. HEADER & NAVEGAÇÃO
   ========================================= */

/* Comportamento Sticky (Controlado via Painel) */
header.sticky { position: sticky; }
header.relative { position: relative; }

/* Menu Mobile: Linhas divisórias */
.mobile-menu li { 
    width: 100%; 
    border-bottom: 1px solid var(--color-border); 
}
.mobile-menu li a { 
    display: block; 
    padding: 15px 0; 
    font-size: 1.2rem; 
    font-family: 'Orbitron', sans-serif; 
    color: var(--color-text); 
}

/* =========================================
   3. MENU DE IDIOMA (PT | EN)
   ========================================= */
.td-lang-pill {
    display: flex;
    align-items: center;
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--color-border);
    border-radius: 99px;
    padding: 3px;
    gap: 2px;
}
.td-lang-pill a {
    display: inline-block;
    padding: 3px 8px;
    font-size: 10px;
    font-weight: 800;
    color: #888;
    text-decoration: none;
    border-radius: 99px;
    line-height: 1;
    transition: all 0.2s;
    text-transform: uppercase;
}
.td-lang-pill a:hover,
.td-lang-pill a.active {
    background: var(--color-primary);
    color: white;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

/* =========================================
   4. MENU USUÁRIO (DROPDOWN)
   ========================================= */
#user-dropdown {
    /* Estado inicial: oculto pelo JS */
    /* Quando o JS der toggle, ele remove a classe hidden do Tailwind se houver, ou adiciona estilo inline block */
    position: absolute;
    top: 120%; /* Afasta um pouco */
    right: 0;
    min-width: 200px;
    z-index: 9999;
}

/* =========================================
   6. BARRA DE AVISO (HEADER ALERT)
   ========================================= */

.header-alert { 
    background: linear-gradient(90deg, var(--color-primary), var(--color-accent)); 
    color: white; 
    font-size: 12px; 
    font-weight: bold; 
    text-transform: uppercase; 
    letter-spacing: 1px;
    position: relative;
    z-index: 60;
}

/* Animação do Gradiente */
.background-animate { 
    background-size: 200%; 
    animation: gradientBody 5s ease infinite; 
}
@keyframes gradientBody { 
    0% { background-position: 0% 50% } 
    50% { background-position: 100% 50% } 
    100% { background-position: 0% 50% } 
}

/* =========================================
   7. SISTEMA DE NOTIFICAÇÕES (TOASTS)
   ========================================= */

/* Container fixo que não bloqueia cliques na página */
#toast-container { 
    pointer-events: none; 
}
/* O toast em si deve aceitar cliques (se tiver botão fechar) */
#toast-container > div { 
    pointer-events: auto; 
}

/* =========================================
   8. COMENTÁRIOS (Hierarquia)
   ========================================= */

.comment-list .children { 
    list-style: none; 
    margin-left: 0; 
    padding-left: 0; 
}

/* Linha lateral para respostas */
.comment-list .children > li { 
    margin-left: 10px; 
    padding-left: 10px; 
    border-left: 2px solid var(--color-primary); 
    position: relative;
}

/* Ajuste para Desktop */
@media (min-width: 768px) { 
    .comment-list .children > li { 
        margin-left: 40px; 
        padding-left: 20px; 
    } 
}

/* Impede quebra de layout com textos longos */
.comment-body, .comment-content { 
    max-width: 100%; 
    overflow-wrap: break-word; 
    word-wrap: break-word; 
}

/* =========================================
   9. PAGINAÇÃO
   ========================================= */
.pagination-wrapper .page-numbers {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    gap: 8px;
}
.pagination-wrapper .page-numbers li {
    margin: 0;
}
.pagination-wrapper .page-numbers a,
.pagination-wrapper .page-numbers span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--color-border);
    background: rgba(255,255,255,0.05);
    border-radius: 8px;
    font-size: 14px;
    font-weight: bold;
    color: var(--color-text);
    text-decoration: none;
    transition: all 0.2s ease-in-out;
}

.pagination-wrapper .page-numbers a:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(var(--color-primary-rgb), 0.3);
}

.pagination-wrapper .page-numbers .current {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: white;
    cursor: default;
    box-shadow: 0 4px 10px rgba(var(--color-primary-rgb), 0.3);
}

.pagination-wrapper .page-numbers .dots {
    background: transparent;
    border: none;
    letter-spacing: 2px;
}