/* ==========================================================================
   Vazto — o selector de idiomas nas barras que não o tinham

   A Home desenha o selector na sua própria folha. Esta serve as páginas de
   produto, o Go-to-Market e as páginas soltas do site, onde o CSS é inline e
   não havia onde pôr as regras.

   Os selectores são deliberadamente restritos ao contexto de cada barra: uma
   regra `.langs` solta iria colidir com a da Home, que já está aprovada.
   ========================================================================== */
.masthead__row .langs,
.fhead__row .langs{
  display:flex; align-items:center; gap:5px; margin-inline-start:auto;
}
.masthead__row .langs img,
.fhead__row .langs img{
  inline-size:24px; block-size:17px; object-fit:cover; border-radius:2px;
  opacity:.62; transition:opacity .2s ease, transform .2s ease;
}
.masthead__row .langs a:hover img,
.fhead__row .langs a:hover img,
.masthead__row .langs a[aria-current] img,
.fhead__row .langs a[aria-current] img{ opacity:1; transform:translateY(-1px) }

/* Nestas barras o botão de contacto vem a seguir ao selector; sem isto o
   `margin-inline-start:auto` empurrava os dois para a direita colados. */
.masthead__row .langs + .btn-ghost{ margin-inline-start:16px }

/* Num telemóvel a barra tem três coisas onde antes tinha duas. As bandeiras
   encolhem para o botão de contacto não perder espaço — media-se: sem este
   bloco o botão passava de 38px para 44px de altura. */
@media (max-width:560px){
  .masthead__row .langs,
  .fhead__row .langs{ gap:3px; margin-inline:auto 10px }
  .masthead__row .langs img,
  .fhead__row .langs img{ inline-size:19px; block-size:13px }
  /* O botão de contacto quebrava em duas linhas mesmo antes do selector
     existir. Com o espaço agora repartido a três, passa a caber numa linha —
     que é como estava desenhado para se ler. */
  .masthead__row .langs + .btn-ghost{
    margin-inline-start:0; padding-inline:13px; font-size:13px;
    white-space:nowrap; min-block-size:36px;
  }
}

/* BANDEIRA-SVG */
/* A de Portugal é SVG e as outras duas são PNG recortados a 41×28. Sem isto o
   SVG desenha-se com a sua própria proporção (2:3) e fica mais alto do que as
   vizinhas na mesma fila. */
.langs img[src$=".svg"]{ object-fit:fill }
/* BANDEIRA-SVG */

/* SELECTOR-4 */
/* O selector tem quatro bandeiras e mostra três: o motor esconde a do idioma
   em uso. Um <a hidden> já não se desenha, mas as barras põem display nos
   filhos e display ganha a hidden — esta regra devolve-lhe a última palavra. */
.langs a[hidden], .drawer__langs a[hidden]{ display:none }
/* SELECTOR-4 */