/*
Theme Name:   Skewart Child
Theme URI:    https://cybersampa.com.br/
Description:  Tema filho personalizado para a campanha CyberSampa.
Author:       Netrunner
Template:     skewart
Version:      1.0.0
*/

/* ==========================================================================
   Suas customizações começam aqui (Ex: Correção do Título Inclinado)
   ========================================================================== */

/* Ocultar menu e calendário na página 3 */
.page-id-3 .cyber-menu,
.page-id-3 .main-navigation,
.page-id-3 .site-header,
.page-id-3 header,
.page-id-3 #wp-calendar,
.page-id-3 .widget_calendar,
.page-id-3 .widget-area {
    display: none !important;
}




.entry-title, .page-title, h1.title {
    transform: none !important;
}


/* Container Mestre (Força centralização e expansão de largura) */
.wp-block-group.folha-bloco-unico {
    background-color: #0a0a0c;
    border: 1px dashed #ff0055;
    padding: 0;
    width: 100% !important; 
    max-width: 1300px !important; /* Aumentado para ocupar mais espaço na tela */
    margin: 40px auto !important; /* O 'auto' força o alinhamento central */
    display: block !important;
    box-sizing: border-box !important;
}


/* Reset extremo de espaçamento superior para a página 404 */
body.error404 .site-content,
body.error404 #content,
body.error404 #primary,
body.error404 #main,
body.error404 .site-main,
body.error404 .content-area,
body.error404 .wrap,
body.error404 article.not-found {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* Remove margem inferior do cabeçalho principal do site, se existir */
body.error404 header.site-header,
body.error404 .site-header {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Garante que o header interno da 404 não tenha recuos invisíveis */
body.error404 #page-header {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* ==========================================================================
   Estilização do Novo Menu Cyberpunk
   ========================================================================== */

/* Container do Menu */
.cyber-menu {
    background: #0a0a0c;
    border-bottom: 2px solid #00f0ff;
    padding: 10px 20px;
    margin-bottom: 20px;
    font-family: 'Orbitron', monospace;
}

/* Lista */
.lista-cyberpunk {
    list-style: none;
    display: flex;
    gap: 20px;
    padding: 0;
    margin: 0;
}

/* Links do Menu */
.lista-cyberpunk li a {
    color: #c0caf5;
    text-transform: uppercase;
    text-decoration: none;
    font-size: 13px;
    letter-spacing: 1px;
    padding: 5px 10px;
    border: 1px solid transparent;
    transition: all 0.3s ease;
}

/* Efeito de Hover */
.lista-cyberpunk li a:hover {
    color: #00f0ff;
    border-bottom: 1px solid #00f0ff;
    text-shadow: 0 0 5px #00f0ff;
}

/* Estilo para item ativo */
.lista-cyberpunk .current-menu-item a {
    color: #ff0055;
    border-bottom: 1px solid #ff0055;
}




/* Ajuste de margem superior para o título da página */
.entry-title, 
h1 {
    margin-top: 50px !important; /* Ajuste este valor conforme necessário (ex: 30px, 80px) */
}



@media only screen and (max-width: 768px) {
    /* Selecione a classe do seu menu mobile. 
       Se você não souber a classe exata, tente as que estão abaixo: */
    
    .lista-cyberpunk, 
    .mobile-menu, 
    .nav-menu,
    .skew-menu { /* Substitua pelo seletor real do seu menu */
        transform: none !important;
        -webkit-transform: none !important;
        skew: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}






/* Reduz a fonte, o espaçamento e impede a quebra de linha no menu principal */
.main-navigation a,
.nav-menu a,
.menu-item a {
    font-size: 14px !important; /* Ajuste o tamanho da fonte conforme necessário */
    white-space: nowrap !important; /* Impede que o texto quebre para a linha de baixo */
    padding-left: 12px !important; /* Reduz o espaço à esquerda do item */
    padding-right: 12px !important; /* Reduz o espaço à direita do item */
}

/* Garante que o contêiner do item não restrinja a largura da palavra */
.main-navigation li,
.nav-menu li,
.menu-item {
    word-break: normal !important;
    overflow-wrap: normal !important;
}





@media only screen and (max-width: 768px) {
    /* Força o contêiner do menu a alinhar os itens em coluna */
    .main-navigation ul,
    .nav-menu,
    .menu {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
    }

    /* Define cada item para ocupar a linha inteira */
    .main-navigation li,
    .nav-menu li,
    .menu-item {
        display: block !important;
        width: 100% !important;
        margin-bottom: 20px !important; /* Ajuste o espaço entre as linhas */
        text-align: left !important; /* Altera para 'center' se preferir centralizado */
    }
}


@media only screen and (max-width: 768px) {
    /* Força o contêiner flex a alinhar os itens no início (esquerda) */
    .main-navigation ul,
    .nav-menu,
    .menu {
        align-items: flex-start !important;
        padding-left: 20px !important; /* Adiciona um pequeno respiro na borda esquerda, ajuste se necessário */
    }

    /* Força o texto dentro do item e do link para a esquerda */
    .main-navigation li,
    .nav-menu li,
    .menu-item,
    .main-navigation a,
    .nav-menu a,
    .menu-item a {
        text-align: left !important;
        justify-content: flex-start !important; /* Necessário caso o link use flexbox internamente */
        width: 100% !important;
    }
}