/* ==========================================================================
   secao-cabecalho.css
   CABEÇALHO  ·  #header  ·  Maria

   CSS desta seção e de mais nenhuma. Use sempre os tokens do tokens.css,
   nunca valor solto.
   ========================================================================== */

.cabecalho {
   position: sticky;
   top: 0;
   z-index: 10;
   width: 100%;
   height: var(--altura-cabecalho);
   background-color: var(--color-bg);
   border: var(--stroke-2) solid var(--color-heading);
}

.cabecalho__nav {
   display: none;
}

.cabecalho__interno {
   display: flex;
   align-items: center;
   justify-content: space-between;
   height: 100%;
}

.cabecalho__logo img {
   height: calc(var(--space-8) + 5px);
   width: auto;
   display: block;
}

.cabecalho__menu {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   width: var(--control-height);
   height: var(--control-height);
   padding: calc(var(--space-3) + 2px) var(--space-3);
   background: transparent;
   border: var(--stroke-2) solid var(--color-heading);
   border-radius: var(--radius);
   cursor: pointer;
}

.cabecalho__barra {
   width: 100%;
   height: var(--stroke-2);
   background-color: var(--color-heading);
   border-radius: var(--radius);

   transition: transform var(--duracao-lenta) var(--curva-padrao),
      opacity var(--duracao-lenta) var(--curva-padrao);
}

/* ==========================================================================
   MENU MOBILE
   ========================================================================== */

/* Trava a rolagem da página quando o menu mobile está aberto */
body.menu-aberto {
   overflow: hidden;
}

body.menu-aberto .cabecalho__barra:nth-child(1) {
   transform: translateY(calc(var(--space-2) - 2px)) rotate(45deg);
}

body.menu-aberto .cabecalho__barra:nth-child(2) {
   opacity: 0;
}

body.menu-aberto .cabecalho__barra:nth-child(3) {
   transform: translateY(calc(var(--space-2) * -1)) rotate(-45deg);
}

/* O estado FECHADO é o padrão, e quem abre é a classe .menu-mobile--aberto.
   Antes era o contrário: o fechado morava em .menu-mobile[hidden], então
   remover a classe não mudava nada, nenhuma transição começava e o menu.js
   tinha de adivinhar o fim com um setTimeout. Agora a saída é uma transição
   de verdade e o JS espera o transitionend.

   O atributo hidden entra só no fim dessa saída. Aí o [hidden] do base.css
   aplica display: none e tira o painel do fluxo e do caminho do Tab. */
.menu-mobile {
   position: fixed;
   top: var(--altura-cabecalho, 80px);
   left: 0;
   width: 100%;
   height: calc(100vh - var(--altura-cabecalho, 80px));
   background-color: var(--color-bg);
   z-index: 100;
   overflow-y: auto;
   padding: var(--space-4) var(--gutter);

   opacity: 0;
   visibility: hidden;
   /* Desce 8px a partir da base do cabeçalho. Era scale(0.98), mas a página
      não usa escala em lugar nenhum: movimento curto e direto, como o resto.
      O transform-origin saiu junto, só existia por causa da escala. */
   transform: translateY(calc(var(--space-2) * -1));
   pointer-events: none;
   transition: opacity var(--duracao-media) var(--curva-padrao),
      transform var(--duracao-media) var(--curva-padrao),
      visibility var(--duracao-media) var(--curva-padrao);
}

.menu-mobile--aberto {
   opacity: 1;
   visibility: visible;
   transform: none;
   pointer-events: auto;
}

.menu-mobile__fechar {
   display: none;
}

.menu-mobile__lista {
   display: flex;
   flex-direction: column;
   gap: var(--space-4);
   list-style: none;
   padding: 0;
   margin-top: var(--space-4);
   margin-bottom: var(--space-6);
}

.menu-mobile__lista a {
   font-family: var(--font-family);
   font-size: var(--fs-h4);
   font-weight: var(--weight-semibold);
   color: var(--color-heading);
   text-decoration: none;
}

.menu-mobile__lista a:hover {
   color: var(--color-action-hover);
}

.menu-mobile__lista li {
   border-bottom: var(--stroke-1) solid var(--color-divider);
   padding: var(--space-3) 0;
}

.menu-mobile .botao {
   display: flex;
   justify-content: center;
   align-items: center;
   width: 100%;
   max-width: calc(var(--space-32) * 2.5);
   margin: var(--space-4) auto 0 auto;
   text-align: center;
}

/* ==========================================================================
   TELAS MAIORES
   ========================================================================== */

@media (min-width: 64rem) {

   .cabecalho__menu,
   .menu-mobile {
      display: none !important;
   }

   .cabecalho__logo img {
      display: none;
   }

   /* Aplica o logo de desktop como background */
   .cabecalho__logo {
      display: block;
      width: calc(var(--space-8) * 5);
      height: var(--space-8);
      background-image: url("../img/logo-color.svg");
      background-size: contain;
      background-repeat: no-repeat;
      background-position: left center;
   }

   .cabecalho__nav {
      display: flex;
      align-items: center;
      gap: var(--space-6);
   }

   .cabecalho__lista {
      display: flex;
      align-items: center;
      gap: var(--space-6);
      list-style: none;
      margin: 0;
      padding: 0;
   }

   .cabecalho__lista a {
      position: relative;
      font-family: var(--font-family);
      font-size: var(--fs-body);
      font-weight: var(--weight-semibold);
      color: var(--color-text);
      text-decoration: none;
   }

   .cabecalho__lista a::after {
      content: '';
      position: absolute;
      width: 0;
      height: var(--stroke-2);
      bottom: 0;
      left: 0;
      background-color: var(--color-text);
      transition: width var(--duracao-lenta) var(--curva-padrao);
   }

   .cabecalho__lista a:hover::after {
      width: 100%;
   }
}