/* =============================================================================
   VIVEIRO VILLA GARDEN - CORREÇÕES FINAIS CSS
   Desenvolvido por: Jay C Designer
   Website: jaycdesigner.com.br
   Copyright © 2025 Jay C Designer
   
   Correções para conflitos de CSS e melhorias de responsividade
============================================================================= */

/* CORREÇÃO 1: Loader sem scroll e sem corte da imagem */
.loader {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    overflow: hidden !important;
    z-index: 9999 !important;
}

.loader-content {
    text-align: center !important;
    padding: 30px !important;
    overflow: visible !important;
}

.loader-logo {
    width: 80px !important;
    height: 80px !important;
    margin-bottom: 30px !important;
    overflow: visible !important;
    transform-origin: center !important;
}

/* CORREÇÃO 2: Header responsivo melhorado */
.header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 1001 !important;
}

/* CORREÇÃO 2.1: Proteção automática contra sobreposição do menu */
.hero .container {
    position: relative !important;
    z-index: 10 !important;
    padding-top: calc(var(--header-height, 80px) + var(--safe-padding, 20px) * 3) !important;
}

.hero-title {
    position: relative !important;
    z-index: 15 !important;
}

/* Sistema de proteção automática para todas as seções */
section:not(.hero) {
    position: relative !important;
    z-index: 1 !important;
}

section[id]:not(.hero)::before {
    content: "" !important;
    display: block !important;
    height: calc(var(--header-height, 80px) + var(--safe-padding, 20px)) !important;
    margin-top: calc(-1 * (var(--header-height, 80px) + var(--safe-padding, 20px))) !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* CORREÇÃO 3: Logo responsiva para telas grandes */
@media (min-width: 1440px) {
    .logo-desktop {
        height: 70px !important;
    }
    
    .nav-brand {
        height: 70px !important;
    }
    
    .navbar {
        padding: 15px 0 !important;
    }
}

@media (min-width: 1200px) and (max-width: 1439px) {
    .logo-desktop {
        height: 65px !important;
    }
    
    .nav-brand {
        height: 65px !important;
    }
    
    .navbar {
        padding: 12px 0 !important;
    }
}

@media (min-width: 769px) and (max-width: 1199px) {
    .logo-desktop {
        height: 60px !important;
    }
    
    .nav-brand {
        height: 60px !important;
    }
    
    .navbar {
        padding: 10px 0 !important;
    }
}

/* CORREÇÃO 4: Menu mobile perfeito */
@media (max-width: 768px) {
    .nav-menu {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100vh !important;
        background: var(--primary-color) !important;
        padding: 80px 20px 20px !important;
        transform: translateX(-100%) !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transition: all 0.3s ease !important;
        z-index: 1000 !important;
        overflow: hidden !important;
    }
    
    .nav-menu.active {
        transform: translateX(0) !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    .nav-toggle {
        display: flex !important;
        z-index: 1003 !important;
        position: relative !important;
    }
    
    .nav-toggle span {
        background: var(--secondary-color) !important;
        width: 25px !important;
        height: 3px !important;
    }
    
    /* Remove completamente a barra ::after dos links no mobile */
    .nav-link::after {
        display: none !important;
        content: none !important;
        width: 0 !important;
        height: 0 !important;
    }
    
    .nav-brand {
        height: 70px !important;
        z-index: 1002 !important;
    }
    
    .logo-mobile {
        height: 60px !important;
    }
    
    .navbar {
        padding: 10px 0 !important;
    }
}

/* CORREÇÃO 5: Containers responsivos sem conflitos */
.container {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
}

@media (min-width: 1440px) {
    .container {
        max-width: 1400px !important;
        padding: 0 30px !important;
    }
}

@media (max-width: 768px) {
    .container {
        padding: 0 15px !important;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 10px !important;
    }
}

/* CORREÇÃO 6: Prevenção de overflow horizontal universal */
html, body {
    overflow-x: hidden !important;
}

/* CORREÇÃO 7: Nav links proporcionais */
@media (min-width: 1440px) {
    .nav-list {
        gap: 35px !important;
    }
    
    .nav-link {
        font-size: 17px !important;
        padding: 12px 18px !important;
    }
}

@media (min-width: 1200px) and (max-width: 1439px) {
    .nav-list {
        gap: 30px !important;
    }
    
    .nav-link {
        font-size: 16px !important;
        padding: 11px 16px !important;
    }
}

@media (min-width: 769px) and (max-width: 1199px) {
    .nav-list {
        gap: 25px !important;
    }
    
    .nav-link {
        font-size: 15px !important;
        padding: 10px 14px !important;
    }
}

/* CORREÇÃO 8: Z-index hierárquico perfeito */
.loader { z-index: 9999 !important; }
.nav-toggle { z-index: 1003 !important; }
.nav-brand { z-index: 1002 !important; }
.header { z-index: 1001 !important; }
.nav-menu { z-index: 1000 !important; }

/* CORREÇÃO 9: Força funcionamento dos hovers nos botões do hero */
.hero-buttons .btn {
    pointer-events: auto !important;
    cursor: pointer !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
}

.hero-buttons .btn:hover {
    pointer-events: auto !important;
    transition: all 0.3s ease !important;
}

/* Remove qualquer interferência de eventos */
.hero-buttons .btn * {
    pointer-events: none !important;
}