/* O menu Marcas da navegação (Menu.html, menu-marcas.js). --marcas-cor: a cor da barra de navegação da farmácia.
   Tudo começa por "#topnavigation.navbar ul.navbar-nav li": o tema pinta com esse caminho os links da navegação
   (brancos, ao centro) e carrega depois deste ficheiro. */

#topnavigation.navbar ul.navbar-nav li .menu-marcas-painel {
  --marcas-cor: #003b4b;
  padding: 18px 0 20px;
  background: #fff;
  color: #212529;
  text-align: left;
}
/* The theme makes the navbar's containers flex, which would shrink the list to its widest name. */
#topnavigation.navbar ul.navbar-nav li .menu-marcas-painel > .container { display: block; }

/* Fica aberto enquanto se escreve na procura, ou no telemóvel depois de um toque. */
#topnavigation.navbar ul.navbar-nav li.menu-marcas.marcas-aberto > .dropdown-menu { display: block; }

#topnavigation.navbar ul.navbar-nav li .menu-marcas-painel .marcas-topo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid #e9ecef;
}

#topnavigation.navbar ul.navbar-nav li .menu-marcas-painel .marcas-procura { position: relative; flex: 0 1 280px; min-width: 220px; }
#topnavigation.navbar ul.navbar-nav li .menu-marcas-painel .marcas-procura i {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #8a9399; pointer-events: none;
}
#topnavigation.navbar ul.navbar-nav li .menu-marcas-painel .marcas-procurar { padding-left: 36px; height: 40px; border-radius: 20px; }

#topnavigation.navbar ul.navbar-nav li .menu-marcas-painel .marcas-letras { display: flex; flex-wrap: wrap; gap: 2px; flex: 1 1 auto; }
#topnavigation.navbar ul.navbar-nav li .menu-marcas-painel .marcas-letra {
  min-width: 28px; height: 28px; padding: 0 6px;
  border: 0; border-radius: 14px; background: transparent;
  font-size: 13px; font-weight: 600; line-height: 28px; color: var(--marcas-cor); cursor: pointer;
}
#topnavigation.navbar ul.navbar-nav li .menu-marcas-painel .marcas-letra:hover { background: #eef2f4; }
#topnavigation.navbar ul.navbar-nav li .menu-marcas-painel .marcas-letra.ativa { background: var(--marcas-cor); color: #fff; }
#topnavigation.navbar ul.navbar-nav li .menu-marcas-painel .marcas-letra.sem { color: #c4c9cc; cursor: default; background: transparent; }

#topnavigation.navbar ul.navbar-nav li .menu-marcas-painel .marcas-rodape { display: flex; justify-content: flex-end; padding-top: 12px; border-top: 1px solid #e9ecef; }
#topnavigation.navbar ul.navbar-nav li .menu-marcas-painel .marcas-todos { font-weight: 600; color: var(--marcas-cor); white-space: nowrap; }

/* A lista: grupos por letra em colunas lidas de cima para baixo; o painel não passa da altura do ecrã. */
#topnavigation.navbar ul.navbar-nav li .menu-marcas-painel .marcas-lista { max-height: calc(100vh - 300px); min-height: 160px; overflow-y: auto; padding-top: 14px; }
#topnavigation.navbar ul.navbar-nav li .menu-marcas-painel .marcas-colunas { column-width: 180px; column-gap: 28px; }
#topnavigation.navbar ul.navbar-nav li .menu-marcas-painel .marcas-grupo { margin-bottom: 12px; }
/* Um grupo pequeno (menu-marcas.js: marcas-curto) não se parte entre colunas; os grandes partem-se, para as colunas
   ficarem equilibradas. */
#topnavigation.navbar ul.navbar-nav li .menu-marcas-painel .marcas-grupo.marcas-curto { break-inside: avoid; }
#topnavigation.navbar ul.navbar-nav li .menu-marcas-painel .marcas-grupo-letra {
  font-size: 15px; font-weight: 700; color: var(--marcas-cor);
  /* a table: a block, so break-after keeps the letter with its first brand, as narrow as the letter */
  border-bottom: 2px solid var(--marcas-cor); display: table; min-width: 22px; margin-bottom: 4px;
  break-after: avoid; page-break-after: avoid;
}
#topnavigation.navbar ul.navbar-nav li .menu-marcas-painel .marcas-link {
  display: block; padding: 3px 0; font-size: 14px; line-height: 1.3; color: #212529; text-align: left; break-inside: avoid;
}
#topnavigation.navbar ul.navbar-nav li .menu-marcas-painel .marcas-link:hover,
#topnavigation.navbar ul.navbar-nav li .menu-marcas-painel .marcas-link:focus { color: var(--marcas-cor); text-decoration: underline; }
#topnavigation.navbar ul.navbar-nav li .menu-marcas-painel .marcas-link[hidden],
#topnavigation.navbar ul.navbar-nav li .menu-marcas-painel .marcas-grupo[hidden] { display: none; }

/* Uma letra escolhida: as marcas por baixo dela, 4 por coluna (--marcas-linhas: menu-marcas.js sobe-o quando são mais
   do que as que cabem à largura em colunas de 4). */
#topnavigation.navbar ul.navbar-nav li.menu-marcas.marcas-uma-letra .marcas-colunas { columns: auto; }
#topnavigation.navbar ul.navbar-nav li.menu-marcas.marcas-uma-letra .marcas-grupo-marcas {
  display: grid; grid-auto-flow: column; grid-template-rows: repeat(var(--marcas-linhas, 4), auto);
  grid-auto-columns: 180px; column-gap: 28px; justify-content: start;
}

/* Enquanto se procura: uma só lista, sem as letras dos grupos a separar. */
#topnavigation.navbar ul.navbar-nav li.menu-marcas.marcas-a-procurar .marcas-grupo { margin-bottom: 0; }
#topnavigation.navbar ul.navbar-nav li.menu-marcas.marcas-a-procurar .marcas-grupo-letra { display: none; }

#topnavigation.navbar ul.navbar-nav li .menu-marcas-painel .marcas-vazio { display: none; color: #6c757d; padding: 8px 0; }
#topnavigation.navbar ul.navbar-nav li .menu-marcas-painel .marcas-vazio a { color: var(--marcas-cor); text-decoration: underline; }

/* Telemóvel: o painel dentro do menu recolhido, sem limite de altura (a página faz scroll). */
@media (max-width: 767.98px) {
  #topnavigation.navbar ul.navbar-nav li .menu-marcas-painel {
    /* the theme's collapsed menu is a flex item that grows to its content: the A–Z bar would stretch it */
    padding: 12px 0; border-radius: 6px; width: 100% !important; max-width: calc(100vw - 32px); overflow-x: hidden;
  }
  /* the theme takes the right padding off (.menu-f-width .container) */
  #topnavigation.navbar ul.navbar-nav li .menu-marcas-painel > .container { padding: 0 14px !important; }
  #topnavigation.navbar ul.navbar-nav li .menu-marcas-painel .marcas-procura { flex: 1 1 100%; min-width: 0; }
  #topnavigation.navbar ul.navbar-nav li .menu-marcas-painel .marcas-letras { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; max-width: 100%; }
  #topnavigation.navbar ul.navbar-nav li .menu-marcas-painel .marcas-letra { flex: 0 0 auto; }
  #topnavigation.navbar ul.navbar-nav li .menu-marcas-painel .marcas-lista { max-height: none; }
  #topnavigation.navbar ul.navbar-nav li .menu-marcas-painel .marcas-colunas { columns: 2; column-gap: 16px; }
  #topnavigation.navbar ul.navbar-nav li.menu-marcas.marcas-uma-letra .marcas-grupo-marcas {
    grid-auto-columns: calc(50% - 8px); column-gap: 16px;
  }
  #topnavigation.navbar ul.navbar-nav li .menu-marcas-painel .marcas-link { padding: 6px 0; font-size: 15px; }
  #topnavigation.navbar ul.navbar-nav li .menu-marcas-painel .marcas-rodape { justify-content: flex-start; }
}