/* ==========================================================================
   PINHALMED PSI — TOP BAR RESPONSIVA (dois telefones)
   Squad Digital — www.squaddigital.pt

   A barra tem três zonas: Área pessoal (esquerda), Pinhalmed.com (centro),
   e "Ligue-nos! 212 361 699 / 931 637 576" (direita).

   Com dois números, em ecrã pequeno não cabe tudo numa linha. Este ficheiro
   reduz o conteúdo por etapas, à medida que o ecrã aperta, para nada
   transbordar nem empilhar de forma desordenada. Carregado depois do CSS
   principal, por isso ganha sem !important.
   ========================================================================== */

/* Nenhum lado encolhe abaixo do seu conteúdo (evita sobreposições). */
.pm-topbar-side { min-width: auto; }

/* O bloco dos telefones nunca quebra em várias linhas. */
.pm-tel {
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  white-space: nowrap;
}

.pm-tel-number { white-space: nowrap; }

/* Só o item central encolhe, e só em último recurso. */
.pm-topbar-cta { min-width: 0; flex-shrink: 1; }
.pm-topbar-cta span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* -------- Tablet: apertar espaçamentos -------- */
@media (max-width: 1000px) {
  .pm-topbar { gap: 12px; }
  .pm-topbar-link { gap: 6px; }
  .pm-tel { gap: 5px; }
}

/* -------- Abaixo de 900px: esconder Pinhalmed.com (fica nos botões e no
   rodapé) para dar espaço aos telefones, que são o mais acionável -------- */
@media (max-width: 900px) {
  .pm-topbar-cta { display: none; }
  .pm-topbar { justify-content: space-between; }
}

/* -------- Telemóvel (≤640px): fica só o ícone da Área pessoal e, à direita,
   "Ligue-nos!" + os dois números. Reduz-se a fonte e o espaçamento. -------- */
@media (max-width: 640px) {
  .pm-topbar {
    gap: 8px;
    padding-left: 12px;
    padding-right: 12px;
    font-size: 12px;
  }
  .pm-topbar-label { display: none; }
  .pm-topbar-icon { width: 15px; height: 15px; }
  .pm-tel { gap: 4px; }
}

/* -------- Telemóvel estreito (≤520px): sai o "Ligue-nos!"; ficam os dois
   números com o ícone de telefone. -------- */
@media (max-width: 520px) {
  .pm-tel-label { display: none; }
  .pm-topbar { font-size: 11.5px; }
  .pm-tel-number { font-size: 11.5px; }
}

/* -------- Muito estreito (≤400px): fica só o número principal (o segundo
   esconde-se, com o separador). O primeiro é o fixo da clínica. -------- */
@media (max-width: 400px) {
  .pm-tel-sep,
  .pm-tel-number:last-of-type { display: none; }
  .pm-topbar { font-size: 11.5px; padding-left: 10px; padding-right: 10px; }
  .pm-topbar-side { flex-shrink: 0; }
}