/* Barra de navegação e rodapé sempre visíveis (#000032), nas páginas administrativas
   e públicas que incluem este arquivo (com layout_fixo.js).

   Usa position: sticky, e não fixed: as barras continuam ocupando o seu espaço no
   fluxo da página, então nenhum conteúdo fica permanentemente escondido atrás delas
   (no fim da rolagem o rodapé está na sua posição natural, abaixo do conteúdo).
   Funciona porque a navbar é o primeiro elemento de <main> (ou de <body>) e o rodapé
   é filho de <body>, sem ancestrais com overflow.

   As alturas reais são medidas por layout_fixo.js (variáveis abaixo) e usadas no
   scroll-padding: âncoras (#pergunta-12) e scrollIntoView() param fora das barras. */
:root {
    --layout-nav-altura: 56px;
    --layout-rodape-altura: 36px;
}

html {
    scroll-padding-top: calc(var(--layout-nav-altura) + 8px);
    scroll-padding-bottom: calc(var(--layout-rodape-altura) + 8px);
}

body > nav.navbar,
body > main > nav.navbar {
    position: sticky;
    top: 0;
    z-index: 1030; /* acima do conteúdo e de .sticky-top; abaixo de modais (1055) */
}

footer.footer-info {
    position: sticky;
    bottom: 0;
    z-index: 1020;
    background-color: #f8f9fa; /* opaco: as páginas podem redefinir a cor */
}

/* Separação visível enquanto há conteúdo passando por baixo (layout_fixo.js). */
nav.navbar.layout-fixo-rolado {
    box-shadow: 0 .125rem .35rem rgba(0, 0, 0, .12) !important;
}
footer.footer-info.layout-fixo-rolado {
    box-shadow: 0 -.125rem .35rem rgba(0, 0, 0, .08);
}

/* Telas muito baixas (celular deitado): as barras fixas tomariam boa parte da área
   útil; voltam a rolar com a página. */
@media (max-height: 480px) {
    body > nav.navbar,
    body > main > nav.navbar,
    footer.footer-info {
        position: static;
    }
    html {
        scroll-padding-top: 0;
        scroll-padding-bottom: 0;
    }
}

@media print {
    body > nav.navbar,
    body > main > nav.navbar,
    footer.footer-info {
        position: static !important;
        box-shadow: none !important;
    }
}