/**
 * RESPONSIVE BASE CSS - ATLANTIDA DMC
 * Estilos responsivos comuns para todas as páginas
 * Inclui: Header, Footer, Navegação, Utilitários
 */

/* ===== RESET E VARIÁVEIS ===== */
:root {
    --mobile-max: 767px;
    --tablet-min: 768px;
    --tablet-max: 1023px;
    --desktop-min: 1024px;
    --container-mobile: 95%;
    --container-tablet: 90%;
    --container-desktop: 1200px;
}

* {
    box-sizing: border-box;
}

img {
    max-width: 100%;
    height: auto;
}

/* ===== CONTAINER RESPONSIVO ===== */
.container-responsive {
    width: 100%;
    max-width: var(--container-desktop);
    margin: 0 auto;
    padding: 0 20px;
}

@media (max-width: 767px) {
    .container-responsive {
        width: var(--container-mobile);
        padding: 0 15px;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .container-responsive {
        width: var(--container-tablet);
        padding: 0 30px;
    }
}

/* ===== HEADER RESPONSIVO - CORRIGIDO ===== */
@media (max-width: 767px) {
    /* NÃO FORÇAR ESTILOS NO HEADER - deixar sistema original funcionar */
    
    /* Apenas garantir que o menu desktop seja escondido */
    .main-menu {
        display: none !important;
    }
    
    /* Garantir que elementos mobile sejam visíveis */
    .mobile-menu-toggle {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    header .logo {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    header .logo img {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    .language-selector {
        margin-left: 5px !important;
        position: relative !important;
        z-index: 9999 !important;
    }
    
    /* Dropdown do seletor de idiomas */
    .language-selector .dropdown,
    .language-selector .language-dropdown,
    .language-selector select,
    .language-selector ul {
        position: absolute !important;
        top: 100% !important;
        right: 0 !important;
        left: auto !important;
        background: white !important;
        border: 1px solid #ddd !important;
        border-radius: 6px !important;
        box-shadow: 0 4px 15px rgba(0,0,0,0.2) !important;
        z-index: 10000 !important;
        min-width: 120px !important;
        max-width: 150px !important;
        margin-top: 5px !important;
    }
    
    .language-selector .dropdown-item,
    .language-selector li,
    .language-selector option {
        padding: 10px 15px !important;
        font-size: 13px !important;
        color: #333 !important;
        text-decoration: none !important;
        display: block !important;
        border-bottom: 1px solid #eee !important;
        transition: background-color 0.3s ease !important;
    }
    
    .language-selector .dropdown-item:hover,
    .language-selector li:hover {
        background: #f5f5f5 !important;
        color: var(--primary-color) !important;
    }
    
    .language-selector .dropdown-item:last-child,
    .language-selector li:last-child {
        border-bottom: none !important;
        border-radius: 0 0 6px 6px !important;
    }
    
    .language-selector .dropdown-item:first-child,
    .language-selector li:first-child {
        border-radius: 6px 6px 0 0 !important;
    }
    
    /* Botão do seletor de idiomas */
    .language-selector button,
    .language-selector .language-btn {
        background: transparent !important;
        border: 1px solid rgba(255,255,255,0.3) !important;
        color: white !important;
        padding: 6px 10px !important;
        border-radius: 4px !important;
        font-size: 12px !important;
        cursor: pointer !important;
        transition: all 0.3s ease !important;
    }
    
    .language-selector button:hover,
    .language-selector .language-btn:hover {
        background: rgba(255,255,255,0.1) !important;
        border-color: rgba(255,255,255,0.5) !important;
    }
    
    .btn-informe-se {
        padding: 8px 12px !important;
        font-size: 12px !important;
    }
    
    /* Garantir que o dropdown seja sempre visível */
    .language-selector.active .dropdown,
    .language-selector.open .dropdown,
    .language-selector:hover .dropdown,
    .language-selector .dropdown.show {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Ajustar posição se estiver muito próximo da borda */
    @media (max-width: 480px) {
        .language-selector .dropdown,
        .language-selector .language-dropdown {
            right: -10px !important;
            min-width: 100px !important;
        }
    }
    
    /* Para telas muito pequenas */
    @media (max-width: 360px) {
        .language-selector .dropdown,
        .language-selector .language-dropdown {
            right: -20px !important;
            min-width: 90px !important;
        }
        
        .language-selector .dropdown-item,
        .language-selector li {
            padding: 8px 10px !important;
            font-size: 12px !important;
        }
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    header .logo img {
        max-width: 220px !important;
    }
    
    .main-menu li {
        margin: 0 15px !important;
    }
    
    .main-menu a {
        font-size: 14px !important;
    }
}

/* ===== NAVEGAÇÃO MOBILE ===== */
@media (max-width: 767px) {
    .mobile-menu {
        position: fixed !important;
        top: 50px !important;
        left: -100% !important;
        width: 100% !important;
        height: 100vh !important;
        background: var(--primary-dark) !important;
        z-index: 9999 !important;
        transition: left 0.3s ease !important;
        padding: 80px 20px 20px !important;
    }
    
    .mobile-menu.active {
        left: 0 !important;
    }
    
    .mobile-menu ul {
        list-style: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    .mobile-menu li {
        margin-bottom: 15px !important;
    }
    
    .mobile-menu a {
        color: white !important;
        text-decoration: none !important;
        font-size: 16px !important;
        font-weight: 500 !important;
        display: block !important;
        padding: 12px 0 !important;
        border-bottom: 1px solid rgba(255,255,255,0.1) !important;
    }
}

/* ===== FOOTER RESPONSIVO ===== */
@media (max-width: 767px) {
    footer {
        padding: 30px 15px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    footer .container {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 10px !important;
        margin: 0 auto !important;
    }
    
    footer .container > div {
        flex-direction: column !important;
        text-align: center !important;
        gap: 25px !important;
        width: 100% !important;
        align-items: left !important;
        justify-content: left!important;
        
    }
    
    footer .logo {
        order: 1 !important;
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
    }
    
    footer .logo img {
        max-width: 180px !important;
        position: relative !important;
        margin: 0 auto !important;
        display: block !important;
    }
    
    footer h3 {
        font-size: 14px !important;
        margin-bottom: 10px !important;
    }
    
    footer p {
        font-size: 12px !important;
        margin: 2px 0 !important;
    }
    
    footer a {
        font-size: 12px !important;
    }
    
    /* Seções do footer centralizadas */
    footer .footer-section,
    footer .footer-column,
    footer > div,
    footer section {
        width: 100% !important;
        text-align: center !important;
        padding: 0 10px !important;
        box-sizing: border-box !important;
    }
    
    /* Links e textos centralizados */
    footer ul {
        list-style: none !important;
        padding: 0 !important;
        margin: 0 auto !important;
        text-align: center !important;
    }
    
    footer li {
        text-align: center !important;
        margin: 5px 0 !important;
    }
    
    /* Copyright e informações legais */
    footer .copyright,
    footer .legal-info {
        width: 100% !important;
        text-align: center !important;
        padding: 10px !important;
        margin: 0 auto !important;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    footer .container > div {
        gap: 30px !important;
    }
    
    footer .logo img {
        max-width: 200px !important;
    }
}

/* ===== TYPOGRAPHY RESPONSIVA ===== */
@media (max-width: 767px) {
    h1 { 
        font-size: 1.8rem !important; 
        line-height: 1.2 !important;
        margin-bottom: 15px !important;
    }
    h2 { 
        font-size: 1.4rem !important; 
        line-height: 1.3 !important;
        margin-bottom: 12px !important;
    }
    h3 { 
        font-size: 1.2rem !important; 
        margin-bottom: 10px !important;
    }
    p { 
        font-size: 14px !important; 
        line-height: 1.5 !important;
        margin-bottom: 15px !important;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    h1 { 
        font-size: 2.2rem !important; 
        line-height: 1.2 !important;
    }
    h2 { 
        font-size: 1.6rem !important; 
        line-height: 1.3 !important;
    }
    h3 { 
        font-size: 1.3rem !important; 
    }
    p { 
        font-size: 15px !important; 
        line-height: 1.6 !important;
    }
}

/* ===== BOTÕES RESPONSIVOS ===== */
@media (max-width: 767px) {
    .btn, button, .button {
        padding: 10px 15px !important;
        font-size: 14px !important;
        border-radius: 6px !important;
    }
    
    .btn-primary {
        width: 100% !important;
        text-align: center !important;
    }
}

/* ===== UTILITÁRIOS ===== */
.hide-mobile {
    display: block;
}

.show-mobile {
    display: none;
}

.hide-tablet {
    display: block;
}

.show-tablet {
    display: none;
}

@media (max-width: 767px) {
    .hide-mobile {
        display: none !important;
    }
    
    .show-mobile {
        display: block !important;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .hide-tablet {
        display: none !important;
    }
    
    .show-tablet {
        display: block !important;
    }
}

/* ===== OVERLAY MENU RESPONSIVO ===== */
@media (max-width: 767px) {
    nav.active {
        padding: 40px 20px !important;
    }
    
    nav.active .container > div {
        flex-direction: column !important;
        gap: 25px !important;
    }
    
    nav.active ul {
        gap: 15px !important;
    }
    
    nav.active a {
        font-size: 20px !important;
        letter-spacing: 1px !important;
    }
    
    nav.active p {
        font-size: 14px !important;
        text-align: center !important;
        line-height: 1.4 !important;
    }
    
    nav.active button {
        top: 20px !important;
        right: 20px !important;
        font-size: 30px !important;
    }
    
    nav.active img {
        width: 200px !important;
        top: 20px !important;
        left: 20px !important;
    }
}