/* ==========================================================================
   Logo e nome nell'intestazione

   Lo stemma e il nome stanno affiancati: il tondo, alla dimensione
   dell'header, è riconoscibile come marchio ma le sue scritte sono
   illeggibili, quindi da solo non dice chi sei.
   ========================================================================== */

/* Il selettore ripete #site-logo perche OceanWP dichiara
   #site-logo #site-logo-inner { display: table-cell } con due ID: con un ID
   solo la nostra regola perde e logo e nome restano impilati invece che
   affiancati. Verificato nel browser. */
#site-logo #site-logo-inner {
  display: flex;
  align-items: center;
  gap: .8rem;
}

/* L'immagine del logo non deve essere schiacciata dal flex */
#site-logo #site-logo-inner .custom-logo-link {
  flex: 0 0 auto;
  display: block;
  line-height: 0;
}
#site-logo #site-logo-inner .custom-logo {
  display: block;
  width: auto;
  height: 52px;
}

.cbt-logo-testo {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-decoration: none;
  line-height: 1.2;
}
.cbt-logo-testo:hover .cbt-logo-nome,
.cbt-logo-testo:focus-visible .cbt-logo-nome {
  color: var(--cbt-primario-hover);
}

.cbt-logo-nome {
  font-family: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  font-size: 21px;
  font-weight: 700;
  color: var(--cbt-primario);
  letter-spacing: -.01em;
  white-space: nowrap;
}

/* Qualifica: dice cosa fa l'associazione a chi arriva per la prima volta.
   Sotto i 1024px sparisce, perché lì lo spazio serve al menu. */
.cbt-logo-qualifica {
  font-size: 12px;
  color: var(--cbt-testo-tenue);
  letter-spacing: .02em;
}
@media (max-width: 1024px) {
  .cbt-logo-qualifica {
    display: none;
  }
}

/* Su schermo stretto lo stemma si riduce e il nome resta leggibile */
@media (max-width: 480px) {
  #site-logo #site-logo-inner {
    gap: .55rem;
  }
  #site-logo #site-logo-inner .custom-logo {
    height: 42px;
  }
  .cbt-logo-nome {
    font-size: 17px;
  }
}