/* ==========================================================================
   STHEFANY — barra de abas do celular
   barra.css · v0.2.0
   --------------------------------------------------------------------------
   Navegação em barra fixa no rodapé, no formato de aplicativo. Cinco destinos,
   que é o teto antes do alvo de toque ficar estreito demais em tela de 360px.

   Só aparece abaixo de 60rem. No desktop a navegação é a do cabeçalho.
   ========================================================================== */

.sp-abas { display: none; }

@media (max-width: 60rem) {
  .sp-abas {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 60;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    background: rgba(11, 5, 5, .92);
    --sp-acento-texto: var(--sp-acento-claro);
    backdrop-filter: blur(18px) saturate(150%);
    border-block-start: 1px solid var(--sp-linha);
    padding-block-end: env(safe-area-inset-bottom, 0);
  }

  .sp-aba {
    appearance: none;
    border: 0;
    background: none;
    font-family: inherit;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: var(--sp-abas);
    padding-block: var(--sp-e-2);
    color: var(--sp-texto-3);
    font-size: 0.6875rem;
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none;
    transition: color var(--sp-transicao);
  }

  .sp-aba i {
    font-size: 1.375rem;
    line-height: 1;
  }

  .sp-aba:hover { color: var(--sp-texto-2); }

  .sp-aba[aria-current="page"] { color: var(--sp-acento-texto); }

  /* Marca do destino ativo. Fica no topo da aba, encostada na borda da barra,
     que é onde o polegar não cobre. */
  .sp-aba[aria-current="page"]::before {
    content: "";
    position: absolute;
    top: -1px;
    width: 2.25rem;
    height: 2px;
    border-radius: 0 0 2px 2px;
    background: var(--sp-acento);
  }

  .sp-aba { position: relative; }

  /* A aba de ação não é um destino: é a conversão do site. Ganha o único
     preenchimento da barra, para não competir em peso com as outras. */
  .sp-aba--acao { color: var(--sp-texto); }
  .sp-aba--acao i {
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    margin-block-start: -2px;
    border-radius: var(--sp-raio-botao);
    background: var(--sp-acento);
    color: #fff;
    font-size: 1.25rem;
  }
  .sp-aba--acao::before { display: none; }

  /* Espaço para a barra não cobrir o fim do conteúdo. */
  body { padding-block-end: calc(var(--sp-abas) + env(safe-area-inset-bottom, 0px)); }
}