/* Header and footer approved on the Home page — canonical site-wide shell. */
.air-header,
.air-header__inner { height: 96px; }

/* Header fixo ao rolar. `sticky` mantem o header no fluxo, entao nao e preciso
   compensar a altura no conteudo como um `fixed` exigiria.
   Reverte o `position: relative` de design.css, que anulava o `fixed` de header.css. */
.air-header { position: sticky; top: 0; z-index: 100; }

/* Dropdown arredondado. */
.air-nav__menu .sub-menu { border-radius: 10px; overflow: hidden; }

/* Itens do submenu em caixa alta, como os do primeiro nivel. */
.air-nav__menu .sub-menu a { text-transform: uppercase; }

/* Chevron aponta para cima enquanto o submenu esta aberto. */
.air-nav__menu > li.menu-item-has-children:hover > a::before,
.air-nav__menu > li.menu-item-has-children:focus-within > a::before {
  transform: rotate(-135deg);
  margin-top: -2px;
}
.air-header .air-logo { width: 174px; height: auto; }
.air-nav__menu > li > a {
  font-family: 'area-normal', Arial, sans-serif;
  font-size: 10px;
  font-weight: 500;
  padding: 10px 12px;
}
/* Reserva espaco para o chevron: vence os `padding` das folhas por pagina
   (body.home / body.air-page-about / body.air-page-governance). */
body .air-nav__menu > li.menu-item-has-children > a { padding-right: 26px; }
.air-header__controls { width: 41px; padding: 0 8px 0 0; margin: 0; border: 0; }
.air-header__globe,
.air-header__globe img { display: block; width: 33px; height: 16px; }

.air-footer { height: 485px; min-height: 485px; padding-top: 66px; background: #202f38; }
.air-footer > .air-container { position: relative; height: 419px; }
.air-footer__grid { grid-template-columns: 206px 103px 174px 135px 174px 135px 277px; gap: 0; padding: 0; border: 0; }
.air-footer__col:nth-child(1) { grid-column: 1; }
.air-footer__col:nth-child(2) { grid-column: 3; }
.air-footer__col:nth-child(3) { grid-column: 5; }
.air-footer__col:nth-child(4) { grid-column: 7; }
.air-footer__logo { margin: 0; padding-top: 8px; }
.air-footer__logo .air-logo { width: 206px; height: 62.207px; }
.air-footer__col-title,
.air-footer__contact-label { font-family: 'area-normal', Arial, sans-serif; font-size: 14px; font-weight: 900; line-height: 1.43; color: #fff; }
.air-footer__col-title { margin: 0 0 25px; letter-spacing: 0; text-transform: none; }
.air-footer__nav { gap: 13px; }
.air-footer__nav a,
.air-footer__contact-value,
.air-footer__location-cities,
.air-footer__location-country { font-family: 'area-normal', Arial, sans-serif; font-size: 14px; line-height: 1.43; color: #c3d3ce; }
.air-footer__nav a,
.air-footer__contact-value,
.air-footer__location-cities { font-weight: 700; }
.air-footer__contact { gap: 24px; }
.air-footer__contact-item { gap: 2px; }
.air-footer__location-country,
.air-footer__contact-label { color: #fff; letter-spacing: 0; text-transform: none; }
.air-footer__locations { gap: 22px; }
.air-footer__social { gap: 23px; margin-top: 188px; }
.air-footer__social-link { width: 24px; height: 24px; border: 0; border-radius: 0; color: #fff; }
.air-footer__social-link svg { width: 24px; height: 24px; }
.air-footer__bottom { position: absolute; left: 0; bottom: 26px; padding: 0; }
.air-footer__copyright { width: 361px; font-family: Arial, sans-serif; font-size: 10px; line-height: normal; color: #fff; }
.air-footer__bottom-links { display: none; }

@media (min-width: 1024px) and (max-width: 1279px) {
  .air-footer__grid { grid-template-columns: 18% 8% 15% 8% 16% 8% 27%; }
}

@media (max-width: 1023px) {
  .air-header,
  .air-header__inner { height: 74px; }
  .air-header .air-logo { width: 120px; }
  .air-footer { height: auto; min-height: 0; padding: 55px 0 25px; }
  .air-footer > .air-container { height: auto; }
  .air-footer__grid { grid-template-columns: 1fr 1fr; gap: 40px; }
  .air-footer__col:nth-child(n) { grid-column: auto; }
  .air-footer__bottom { position: static; margin-top: 40px; }
}

@media (max-width: 767px) {
  .air-header,
  .air-header__inner { height: 50px; }
  .air-header .air-logo { width: 84px; }
  .air-footer { height: 1182px; min-height: 1182px; padding: 45px 0 0; }
  .air-footer > .air-container { height: 1137px; }
  .air-footer__grid { grid-template-columns: 1fr; gap: 45px; }
  .air-footer__col:first-child { display: block; }
  .air-footer__logo { padding-top: 0; }
  .air-footer__logo .air-logo { width: 132px; height: auto; }
  .air-footer__col-title,
  .air-footer__contact-label { font-size: 10px; }
  .air-footer__nav a,
  .air-footer__contact-value,
  .air-footer__location-country,
  .air-footer__location-cities { font-size: 10px; line-height: 1.55; }
  .air-footer__col-title { margin-bottom: 20px; }
  .air-footer__nav { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 28px; }
  .air-footer__contact { gap: 10px; }
  .air-footer__locations { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
  .air-footer__social { position: absolute; left: 0; bottom: 65px; margin: 0; }
  .air-footer__bottom { position: absolute; bottom: 26px; margin: 0; padding: 0; text-align: center; }
  .air-footer__copyright { width: auto; font-size: 8px; }
}

/* ============================================================
   Footer mobile (<= 767px) — layout aprovado em
   "footer-correto-mobile".
   Carregado por ultimo no enqueue: `body[class]` empata em
   especificidade com as folhas por pagina (body.home,
   body.air-page-about, ...) e vence pela ordem, sem !important.
   Nada aqui afeta o desktop, ja aprovado.
   ============================================================ */

/* Icones sociais existem no markup apenas para o mobile;
   o desktop aprovado nao os exibe. */
.air-footer__social { display: none; }

@media (max-width: 767px) {
  /* A altura fixa do Zeplin (~1182px) sobrava como area vazia.
     O conteudo agora define a altura. */
  body[class] .air-footer { height: auto; min-height: 0; padding: 45px 0 26px; }
  body[class] .air-footer > .air-container { height: auto; }

  /* Links rapidos preenchem coluna a coluna (Homepage..Equipamentos
     na esquerda), como na referencia — nao linha a linha. */
  body[class] .air-footer__nav {
    grid-auto-flow: column;
    grid-template-rows: repeat(5, auto);
    grid-template-columns: 1fr 1fr;
  }

  /* Social e copyright voltam ao fluxo, centralizados. */
  body[class] .air-footer__social {
    position: static;
    display: flex;
    justify-content: center;
    gap: 23px;
    margin: 0;
    padding-top: 55px;
  }
  body[class] .air-footer__social-link { transform: none; }

  /* Carreira e Contato ainda trazem `left:50%; transform:translateX(-50%)`
     para o bloco social — herança de quando ele era posicionado de forma
     absoluta. Agora que ele esta no fluxo e centralizado por `justify-content`,
     esse transform so o empurrava 50% da largura para fora da tela.
     O seletor inclui `.air-footer` para empatar em especificidade com
     `.air-page-carreira + .air-footer .air-footer__social`; como esta folha
     carrega por ultimo, o empate resolve aqui. */
  body[class] .air-footer .air-footer__social { left: auto; transform: none; }

  body[class] .air-footer__bottom {
    position: static;
    margin: 0;
    padding: 28px 0 0;
    text-align: center;
  }
  body[class] .air-footer__copyright { width: auto; margin: 0 auto; font-size: 8px; }
}

/* ============================================================
   Tamanho de fonte por dispositivo (painel de conteudo).

   O painel grava dois valores por texto: o tamanho de desktop sai
   como `font-size` inline, e o de mobile como a variavel
   `--air-fs-m` no mesmo atributo `style`. Um `font-size` inline
   venceria qualquer media query; uma variavel, nao — ela so e
   consumida pela regra abaixo, que vale apenas no mobile.

   O `!important` existe para vencer o `font-size` inline do
   desktop, que e a unica coisa que disputa esta declaracao.
   Campo de mobile vazio no painel: nada e emitido, a regra nao
   casa, e o tamanho do mobile continua vindo do CSS do tema.
   ============================================================ */
@media (max-width: 767px) {
  [style*="--air-fs-m"] { font-size: var(--air-fs-m) !important; }
}

/* ============================================================
   Quebra de linha so no mobile, controlada pelo editor.

   No campo de titulo, a barra vertical `|` marca uma quebra que
   vale apenas no celular. Cada trecho vira um `<span class="air-line">`
   (ver air_title_html() em inc/helpers.php): inline no desktop, onde
   os trechos se juntam com espaco e nada muda; block no mobile, onde
   cada um ocupa a sua linha.

   Restrito ao H1, como pedido — outros titulos seguem quebrando
   pela largura disponivel.
   ============================================================ */
/* O `.air-line` e um `span` dentro do H1, e algumas paginas estilizam
   `span` de forma ampla — em Sobre, `.about-head span` e a regra do
   eyebrow (12px, letter-spacing 2.7px) e acabava pegando os trechos do
   titulo. `font: inherit` devolve a tipografia do proprio H1. */
h1 .air-line {
  /* `display: inline` tambem faz parte do isolamento: em Sobre, a regra do
     eyebrow e `.about-head span { display: block }`, que quebraria o titulo
     em todas as telas — inclusive no desktop. */
  display: inline;
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  margin: 0;
}

@media (max-width: 767px) {
  h1 .air-line { display: block; }
  /* Os spans ja quebram sozinhos aqui; o `<br>` do desktop deixaria
     uma linha vazia no meio do titulo. */
  h1 .air-br-d { display: none; }
}