/* =====================================================================
   avatar.css — Avatars amb inicials (8/9/2026)

   ⚠️ Va en un fitxer PROPI i es carrega SEMPRE (front i admin), no dins de
   campus-alumne.css: aquell només s'encua a la pàgina del compte, i els
   avatars surten a molts més llocs, començant per la barra d'administració
   de dalt, que apareix a totes les pàgines.
   ===================================================================== */

/* ---- Avatar d'inicials (v. inc/avatar-inicials.php) -------------------
   L'alumne no pot pujar foto enlloc, així que en comptes de la silueta
   grisa del WordPress es pinta un cercle amb les seves inicials. */
.passa-avatar {
  /* --passa-av ve en línia (mida demanada per qui crida get_avatar).
     --passa-av-ctx el pot posar un contenidor per manar-hi per damunt:
     una variable EN LÍNIA guanya a qualsevol full, però una d'HEREDADA
     del pare no, i per això l'ordre és aquest. */
  width: var(--passa-av-ctx, var(--passa-av, 40px));
  height: var(--passa-av-ctx, var(--passa-av, 40px));
  font-size: var(--passa-av-fs-ctx, var(--passa-av-fs, 17px));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #fff;                 /* blanc sobre els 4 tons: mínim 7:1 */
  font-weight: 700;
  line-height: 1;
  /* ⚠️ Res de letter-spacing: afegeix l'espai DARRERE l'última lletra i
     desplaça el text cap a l'esquerra dins del cercle. Amb tres inicials
     es notava. */
  letter-spacing: 0;
  /* Centrat ÒPTIC: la caixa de línia inclou l'espai dels descendents, que
     una majúscula no fa servir, així que geomètricament centrada la lletra
     es veu una mica alta. Aquest desplaçament ho compensa. */
  padding-top: .06em;
  font-family: var(--passa-font-heading, inherit);
  overflow: hidden;
  flex: 0 0 auto;
  vertical-align: middle;
}

/* Al compte, el Kadence reserva 50px per a l'avatar i limita el seu <img> a
   40px. Aquí es fa el mateix amb la variable, sense !important. */
.kadence-customer-image { --passa-av-ctx: 40px; --passa-av-fs-ctx: 17px; }

/* ---- Barra d'administració ------------------------------------------
   ⚠️ El WordPress té `#wpadminbar * { width:auto; height:auto }`, que guanya
   a `.passa-avatar` per especificitat: l'avatar sortia de 8x32px i sense
   arrodonir. Aquesta regla té el mateix prefix, així que sí que mana.
   Només la veu qui pot entrar al tauler, però sortia trencada. */
#wpadminbar .passa-avatar {
  width: 16px;
  height: 16px;
  font-size: 8px;
  border-radius: 50%;
  padding-top: 0;
  vertical-align: middle;
}

/* ---- Perfil de LearnDash (/perfil/) · 2/10 ------------------------------
   El contenidor fa 150px amb una vora grisa de 5px (border-box) i l'avatar
   també en feia 150: el cercle morat sortia de l'anella per baix a la dreta.
   Que ompli només l'interior. */
.ld-profile-avatar { --passa-av-ctx: 100%; }