/* Testata del sito di un'agenzia (agencies/agency_bar.html): stessa base di .top (header.css), con logo e nome al posto del marchio.
   La carica ogni pagina che la mostra: home e lista dell'agenzia, pagine a blocchi, scheda e contatti nel sito dell'agenzia. */

@layer components {
  /* Il menu resta anche su telefono: e' l'unica navigazione del sito dell'agenzia */
  .top.ag-bar nav { display: block; }

  .ag-brand {
    display: flex;
    flex: 0 1 auto;
    align-items: center;
    gap: 12px;
    min-width: 0;
    color: inherit;
    text-decoration: none;

    & img {
      flex: none;
      width: auto;
      max-width: 140px;
      height: 44px;
      object-fit: contain;
      transition: height var(--dur) var(--ease);
    }
  }
  .top.is-stuck .ag-brand img { height: 34px; }
  .ag-name {
    font-family: var(--display);
    font-size: var(--step-lead);
    font-weight: 500;
    line-height: var(--lh-head);
    overflow-wrap: anywhere;
  }

  @media (max-width: 700px) {
    .top.ag-bar { flex-wrap: wrap; gap: 8px 12px; }
    .ag-bar .ag-brand { flex: 1 1 0; }
    .ag-brand img { height: 36px; max-width: 96px; }
    .ag-name { font-size: var(--step-body, 1rem); }
    .ag-bar nav { order: 3; flex: 1 0 100%; }
    .ag-bar nav ul { justify-content: flex-start; overflow-x: auto; scrollbar-width: none; }  /* tante voci: scorrono, non si schiacciano */
    .ag-bar nav li { flex: 0 0 auto; text-align: center; }
  }
}