/* assets/css/pwa-layout.css */

/* Adiciona padding de rolagem para evitar que o conteúdo fique atrás do header/footer fixos.
   Isso é mais performático que manipular o padding via JavaScript. O valor do rodapé foi aumentado para garantir que o conteúdo não seja sobreposto. */
body {
    scroll-padding-top: 56px; /* Altura aproximada do header. Ajuste se necessário. */
    scroll-padding-bottom: 60px; /* Altura aproximada do footer. Ajuste se necessário. */
}

/* Aplica o layout fixo para header e footer em todas as visualizações (Desktop, Mobile, PWA) */
.pwa-header {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1030; /* Valor padrão do Bootstrap para fixed-top */
    /* Reduz o padding vertical do Bootstrap para um header mais compacto */
    --bs-navbar-padding-y: 0.2rem; 
}

.pwa-footer {
    position: fixed;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 1030; /* Z-index para ficar sobre o conteúdo */
    padding-top: 0.3rem; /* Reduz o padding vertical para um footer mais compacto */
    padding-bottom: 0.3rem; /* Reduz o padding vertical para um footer mais compacto */
}

/* Estilo para o botão de instalação do PWA no rodapé */
#install-pwa-btn {
    animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Adiciona padding ao conteúdo principal para evitar que seja ocultado pelo header e footer fixos */
.main-content {
    padding-top: 56px; /* Ajuste para a nova altura do cabeçalho */
    padding-bottom: 60px; /* Ajuste para a nova altura do rodapé */
}