/**
 * Mobile Global Fix CSS
 * Corrige problemas globais de mobile em todas as páginas
 * Principalmente a faixa branca causada pelo padding-top do menu desktop
 */

/* ===============================================
   CORREÇÃO GLOBAL PARA MOBILE
=============================================== */

@media (max-width: 768px) {
    /* CORREÇÃO PRINCIPAL: Remover padding-top do body que causa faixa branca */
    body {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }

    /* Garantir que o conteúdo principal comece imediatamente após o header mobile */
    .main-content,
    main,
    .container:first-of-type,
    section:first-of-type,
    .content-wrapper {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    /* Ajustar containers principais */
    .container-fluid {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Garantir que não há overflow horizontal */
    html, body {
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Corrigir qualquer espaçamento extra superior */
    .row:first-child {
        margin-top: 0 !important;
    }

    /* Hero sections devem começar do topo */
    .hero-section,
    .banner-section,
    .intro-section,
    .header-section {
        margin-top: 0 !important;
        padding-top: 2rem !important; /* Espaçamento mínimo do menu mobile */
    }

    /* Ajustar espaçamento do menu mobile simple */
    .simple-mobile-header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 1050 !important;
        background: white !important;
        border-bottom: 1px solid #e0e0e0 !important;
    }

    /* Garantir que o conteúdo não fica sob o menu mobile */
    body:has(.simple-mobile-header) {
        padding-top: 70px !important;
    }

    /* Fallback para navegadores que não suportam :has() */
    body {
        padding-top: 70px !important;
    }

    /* Mas para páginas específicas que já têm hero sections, remover padding */
    body:has(.newsletter-hero),
    body:has(.podcast-hero),
    body:has(.livros-hero),
    body:has(.sobre-hero) {
        padding-top: 0 !important;
    }
}

/* ===============================================
   CORREÇÕES ESPECÍFICAS POR PÁGINA
=============================================== */

@media (max-width: 768px) {
    /* Página de Podcast */
    .podcast-container,
    .podcast-wrapper,
    .podcast-hero {
        margin-top: 0 !important;
    }

    /* Página de Livros - primeira seção após header */
    body[class*="livros"] .container:first-of-type,
    body[class*="livros"] section:first-of-type,
    .livros-container,
    .livros-wrapper,
    .books-container {
        margin-top: 0 !important;
        padding-top: 100px !important; /* Espaço para menu mobile */
    }

    /* Página Sobre - primeira seção após header */
    body[class*="sobre"] .container:first-of-type,
    body[class*="sobre"] section:first-of-type,
    .sobre-container,
    .sobre-wrapper,
    .about-container {
        margin-top: 0 !important;
        padding-top: 100px !important;
    }

    /* Páginas que começam com seção hero */
    .page-with-hero {
        padding-top: 0 !important;
    }

    .page-with-hero .hero-section {
        padding-top: 80px !important;
        min-height: calc(100vh - 80px) !important;
    }

    /* Correção específica para containers que vem logo após o header */
    .custom-menu-container ~ .container:first-of-type:not(.hero-section):not(.newsletter-hero),
    .custom-menu-container ~ section:first-of-type:not(.hero-section):not(.newsletter-hero) {
        padding-top: 100px !important;
        margin-top: 0 !important;
    }
}

/* ===============================================
   AJUSTES PARA MENU MOBILE SIMPLES
=============================================== */

@media (max-width: 768px) {
    /* Quando menu mobile simples está ativo */
    .simple-mobile-header + * {
        margin-top: 0 !important;
    }

    /* Ajustar conteúdo que vem logo após o header */
    .custom-menu-container + section,
    .custom-menu-container + main,
    .custom-menu-container + .container {
        margin-top: 0 !important;
        padding-top: 20px !important;
    }

    /* Para páginas sem hero section específica */
    .container:first-of-type:not(.hero-section):not(.newsletter-hero) {
        padding-top: 100px !important;
    }
}

/* ===============================================
   CORREÇÕES PARA DIFERENTES LAYOUTS
=============================================== */

@media (max-width: 768px) {
    /* Layout com sidebar */
    .main-with-sidebar {
        padding-top: 80px !important;
    }

    /* Layout de blog */
    .blog-layout {
        padding-top: 80px !important;
    }

    /* Layout de página simples */
    .simple-page-layout {
        padding-top: 80px !important;
    }

    /* Garantir que cards e elementos não tenham margin-top excessivo */
    .card:first-child,
    .post:first-child,
    .article:first-child {
        margin-top: 0 !important;
    }
}

/* ===============================================
   DEBUG MODE (TEMPORÁRIO)
=============================================== */

/* Descomente para debug - adiciona border vermelha para identificar elementos problemáticos */
/*
@media (max-width: 768px) {
    body {
        border-top: 3px solid red !important;
    }

    .container:first-of-type {
        border: 2px solid blue !important;
    }

    section:first-of-type {
        border: 2px solid green !important;
    }
}
*/

/* ===============================================
   FORCE CORRECTIONS (ÚLTIMA INSTÂNCIA)
=============================================== */

@media (max-width: 768px) {
    /* Se nada mais funcionar, forçar correção */
    .force-mobile-fix {
        margin-top: 0 !important;
        padding-top: 80px !important;
    }

    /* Classe utilitária para aplicar manualmente */
    .no-top-space {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    .mobile-safe-top {
        padding-top: 80px !important;
    }
}