/*
 Theme Name:   Miraculous Child
 Theme URI:    https://kamleshyadav.com/wp/miraculous/lightversion/
 Description:  Miraculous Child Theme
 Author:       kamleshyadav
 Author URI:   https://themeforest.net/user/kamleshyadav
 Template:     miraculous
 Version: 2.0.7
 License:      Themeforest Split Licence
 License URI:  LICENSE
 Tags:         custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready
 Text Domain:  miraculous-child
*/

/* ============================================================
   ANGOLA MUSICAS – SIDEBAR & MOBILE MENU FIXES
   Aplicado via Child Theme para não alterar ficheiros do tema pai
   ============================================================ */

/* --- 1. Overlay escuro quando o menu lateral abre no mobile --- */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    pointer-events: none;
}
body.slide_menu::before {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
}

/* --- 2. Garantir z-index correto do sidebar sobre o overlay --- */
.ms_sidemenu_wrapper {
    z-index: 10000 !important;
}

/* --- 3. Botão de fechar (×) maior e mais fácil de tocar no mobile --- */
.ms_nav_close {
    cursor: pointer;
    min-width: 44px;
    min-height: 44px;
    display: flex !important;
    align-items: center;
    justify-content: center;
}

/* --- 4. Suavizar animação de abertura/fecho do sidebar no mobile --- */
@media (max-width: 991px) {
    .ms_sidemenu_wrapper {
        transform: translateX(0);
        transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        -webkit-transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        will-change: left;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
    }

    /* Garante que a sidebar fecha completamente (sem ficar com borda visível) */
    .ms_sidemenu_wrapper:not(.open_menu) {
        left: -260px !important;
        box-shadow: none;
    }

    /* Quando aberta: ocupa largura confortável e fica visível */
    .ms_sidemenu_wrapper.open_menu {
        left: 0 !important;
        width: 260px !important;
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.35);
    }
    .ms_sidemenu_wrapper.open_menu .ms_sidemenu_inner {
        width: 260px !important;
    }

    /* Conteúdo principal não deve deslocar no mobile */
    .ms_content_wrapper {
        margin-left: 0 !important;
    }
    .ms_header {
        left: 0 !important;
    }

    /* Submenus: scroll interno em vez de overflow escondido */
    .ms_nav_wrapper {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 100px;
    }
}

/* --- 5. Submenu lateral no desktop: evita corte fora da tela --- */
@media (min-width: 992px) {
    .ms_nav_wrapper ul li ul.sub-menu {
        left: 100%;
        top: 0;
        min-width: 200px;
        max-height: 80vh;
        overflow-y: auto;
    }
    /* Se o item for dos últimos, o submenu abre para cima */
    .ms_nav_wrapper ul li:nth-last-child(-n+3) ul.sub-menu {
        top: auto;
        bottom: 0;
    }
}

/* --- 6. Items do menu lateral com área de toque adequada (≥44px) ---
   CORREÇÃO (auditoria ago/2026): a regra original usava o seletor
   ".ms_sidemenu_wrapper a", que também atinge o link da logo
   (.ms_logo a / .ms_logo_open a) e os submenus do DESKTOP — não só os
   itens de menu no mobile, que era a intenção. Isso forçava
   "display:flex" fora do contexto do problema (toque no mobile),
   podendo desalinhar a logo e os submenus em telas grandes.
   Corrigido: seletor restrito ao menu de navegação (.ms_nav_wrapper) e
   a regra só entra dentro do breakpoint mobile (≤991px). */
@media (max-width: 991px) {
    .ms_nav_wrapper a {
        min-height: 44px;
        display: flex !important;
        align-items: center;
    }
}

/* --- 7. Ícone de toggle do menu (hamburger) visível no mobile --- */
@media (max-width: 991px) {
    .ms_nav_close {
        position: fixed !important;
        top: 10px !important;
        left: 10px !important;
        z-index: 10001;
        background: rgba(27, 32, 57, 0.92);
        border-radius: 50%;
        width: 44px;
        height: 44px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.4);
    }

    /* Quando o menu abre, o botão vai junto com a sidebar */
    .ms_sidemenu_wrapper.open_menu .ms_nav_close {
        left: 215px !important;
        background: transparent;
        box-shadow: none;
    }
}

/* --- 8. Evitar scroll horizontal no body quando o menu está fechado --- */
body:not(.slide_menu) {
    overflow-x: hidden;
}

/* --- 9. Correções de modal popup no mobile pequeno --- */
@media (max-width: 580px) {
    .modal-dialog .close {
        right: 6px;
        top: 3px;
    }
}
@media (max-width: 991px) {
    .ms_register_popup .modal-content {
        max-height: 500px;
    }
}
@media (max-width: 375px) {
    .popup_forgot {
        margin-top: 25px;
        text-align: center;
    }
}

/* ============================================================
   AUDITORIA DE DESIGN E RESPONSIVIDADE — ago/2026 (Izua Digital)
   Correções adicionais encontradas na revisão do tema pai + child.
   ============================================================ */

/* --- 10. Empate de z-index entre o player fixo e o menu mobile ---
   O tema define ".ms_player_wrapper" (barra de áudio fixa no rodapé)
   com z-index:10000. O item 2 deste child theme também definiu
   ".ms_sidemenu_wrapper" com z-index:10000. Com o mesmo valor, quem
   fica visualmente por cima passa a depender só da ordem no HTML — não
   é garantido — e em alguns aparelhos o player pode cobrir a parte de
   baixo do menu aberto, tornando itens inacessíveis ao toque.
   Corrigido: o menu, seu botão de fechar e o overlay escuro (item 1)
   sobem numa camada acima do player, de forma explícita e garantida. */
.ms_sidemenu_wrapper {
    z-index: 10050 !important;
}
.ms_nav_close {
    z-index: 10051 !important;
}
body.slide_menu::before {
    z-index: 10040; /* overlay: acima do player (10000), abaixo do menu (10050) */
}

/* --- 11. Rodapé coberto pelo player em telas muito pequenas ---
   O tema compensa a barra do player fixa no rodapé com
   ".ms_footer_wrapper { margin-bottom: 75px }" no desktop, e reduz
   para 70px a partir de 768px. Só que em telas bem pequenas o próprio
   tema AUMENTA a altura do player (120px em ≤513px, 110px em ≤414px)
   sem atualizar essa margem — resultado: nos celulares mais comuns
   (ex.: 360–414px de largura), uns 40-50px do fim do rodapé (links,
   copyright) ficam escondidos atrás da barra de áudio quando ela está
   aberta. Corrigido abaixo, acompanhando a altura real do player. */
@media (max-width: 513px) {
    .ms_footer_wrapper {
        margin-bottom: 130px;
    }
}
@media (max-width: 414px) {
    .ms_footer_wrapper {
        margin-bottom: 120px;
    }
}

/* --- 12. Estilo visual + responsivo para os recursos novos do Passo 5
   (ranking [izua_ranking], agenda [izua_agenda], denúncia [izua_denuncia])
   ---
   Esses três shortcodes foram adicionados sem nenhum CSS próprio, então
   herdam só o estilo padrão do navegador: lista numerada branca sobre
   fundo escuro, formulário sem identidade visual nenhuma. Como o tema
   inteiro é escuro com destaque vermelho/âmbar da marca (Passo 6), o
   contraste ficava ruim e a aparência destoava do resto do site.
   Estilo abaixo usa as mesmas cores já aplicadas na marca
   (#BE3636 terracota / #E09B2D âmbar) e é responsivo por padrão, sem
   precisar de media queries extras (empilha naturalmente em telas
   pequenas por já usar largura fluida). */

/* Ranking (Mais Ouvidas / Mais Baixadas) */
.izua-ranking-list {
    list-style: none;
    counter-reset: izua-rank;
    margin: 0;
    padding: 0;
    max-width: 100%;
}
.izua-ranking-item {
    counter-increment: izua-rank;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    margin-bottom: 6px;
    background: rgba(255, 255, 255, 0.04);
    border-left: 3px solid #BE3636;
    border-radius: 4px;
    min-height: 44px;
}
.izua-ranking-item::before {
    content: counter(izua-rank);
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #BE3636;
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    border-radius: 50%;
}
.izua-ranking-item a {
    color: #fff;
    text-decoration: none;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.izua-ranking-item a:hover {
    color: #E09B2D;
}
.izua-ranking-count {
    flex: 0 0 auto;
    font-size: 12px;
    color: #b8b8b8;
    white-space: nowrap;
}

/* Agenda de shows */
.izua-agenda-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.izua-agenda-item {
    padding: 14px 16px;
    margin-bottom: 8px;
    background: rgba(255, 255, 255, 0.04);
    border-left: 3px solid #E09B2D;
    border-radius: 4px;
    color: #e5e5e5;
    line-height: 1.6;
}
.izua-agenda-item strong {
    color: #fff;
    font-size: 15px;
}
.izua-agenda-item a {
    color: #E09B2D;
    text-decoration: underline;
}

/* Formulário de denúncia de conteúdo */
.izua-denuncia-form {
    max-width: 500px;
    width: 100%;
    background: rgba(255, 255, 255, 0.04);
    padding: 20px;
    border-radius: 6px;
}
.izua-denuncia-form label {
    color: #fff;
    font-size: 14px;
    font-weight: 600;
}
.izua-denuncia-form input[type="url"],
.izua-denuncia-form input[type="email"],
.izua-denuncia-form select,
.izua-denuncia-form textarea {
    margin-top: 6px;
    padding: 10px 12px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    color: #fff;
    font-size: 14px;
    min-height: 44px;
    box-sizing: border-box;
}
.izua-denuncia-form textarea {
    min-height: 90px;
    resize: vertical;
}
.izua-denuncia-form button[type="submit"] {
    background: #BE3636;
    color: #fff;
    border: none;
    padding: 12px 24px;
    border-radius: 4px;
    font-weight: 600;
    cursor: pointer;
    min-height: 44px;
    width: 100%;
    transition: background 0.2s ease;
}
.izua-denuncia-form button[type="submit"]:hover {
    background: #a02e2e;
}
@media (max-width: 480px) {
    .izua-denuncia-form {
        padding: 15px;
    }
}

/* --- 13. Botão "Baixar Música" na página da faixa ---
   Reaproveita a classe ".ms_btn" (mesma do botão "Reproduzir"), só ajusta
   o ícone. Não precisa de mais nada: herda cor, tamanho e espaçamento
   automaticamente do próprio tema, incluindo em telas pequenas. */
.izua_download_btn .fa-download {
    margin-right: 6px;
}