/*
  Link "Accedi" / "Ciao, {Nome}" nell'header pubblico del sito (stesso su
  tutte le pagine, homepage inclusa — header.php è condiviso). File
  indipendente da main.css/style.css del tema, non li tocca. Riusa le
  classi .cta-button/.cta-button--ghost/.cta-button--primary già esistenti
  nel tema (src/styles/main.css) solo per dimensioni più contenute in
  questo contesto (header, non hero).
*/
.site-header__account {
  display: flex;
  align-items: center;
  position: relative;
  margin-left: auto;
}

.site-header__inner .account-link {
  padding: 0.5rem 1rem;
  font-size: 0.8rem;
  white-space: nowrap;
}

/* Barra scrollata (nera, vedi .site-header.is-scrolled in main.css): il
   pulsante da outline trasparente diventa pieno bianco con scritta rossa,
   per restare leggibile sopra lo sfondo nero. */
.site-header.is-scrolled .site-header__inner .account-link {
  background: #fff;
  color: var(--color-red, #D6000F);
  border-color: #fff;
}

/* Hover: sempre sfondo rosso pieno con scritta bianca, sia a barra bianca
   che nera (regola dedicata per ciascuno stato per vincere sempre
   sull'idle, indipendentemente dall'ordine/specificità delle due). */
.site-header__inner .account-link:hover,
.site-header.is-scrolled .site-header__inner .account-link:hover {
  background: var(--color-red, #D6000F);
  color: #fff;
  border-color: var(--color-red, #D6000F);
}

/* Dropdown "voci dell'area riservata": pannello bianco con scritte nere,
   l'opposto della barra scura da cui si apre — sempre leggibile a
   prescindere dallo stato (bianca/nera) dell'header. Mostrato solo se
   autenticato (header-account.js rimuove [hidden] dopo aver letto il
   token) e solo in hover/focus del contenitore. */
.account-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 0;
  min-width: 200px;
  display: grid;
  gap: 0;
  background: #fff;
  color: var(--color-black, #000);
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: var(--radius-sm, 0.4rem);
  /* Nessun margin-top: deve toccare subito il bordo inferiore del
     pulsante, altrimenti muovendo il mouse in verticale per raggiungerlo
     si esce dall'area in hover (.site-header__account) nello spazio
     vuoto in mezzo e la tendina si chiude prima di poterci cliccare. Lo
     spazio visivo dal pulsante è dato dal padding-top invece del
     margin, che resta comunque dentro l'area cliccabile/hoverable. */
  padding: 0.5rem 0.35rem 0.35rem;
  box-shadow: var(--shadow-soft, 0 8px 30px rgba(0, 0, 0, 0.12));
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease, visibility 180ms ease;
  z-index: 20;
}

.account-dropdown a,
.account-dropdown button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.55rem 0.6rem;
  font: inherit;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-black, #000);
  background: none;
  border: 0;
  border-radius: 0.35rem;
  cursor: pointer;
}

.account-dropdown a:hover,
.account-dropdown button:hover {
  background: rgba(214, 0, 15, 0.08);
  color: var(--color-red, #D6000F);
}

.site-header__account:hover .account-dropdown:not([hidden]),
.site-header__account:focus-within .account-dropdown:not([hidden]) {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

/* Stesso breakpoint di .desktop-nav/.mobile-toggle in main.css (768px):
   sotto quella soglia il link passa al pannello del menu mobile (niente
   dropdown hover, non ha senso su touch). */
@media (max-width: 768px) {
  .site-header__account {
    display: none;
  }
}

.account-link--mobile {
  display: inline-flex;
  margin: 0.5rem 0 1.25rem;
  align-self: flex-start;
}

/* Voci "Area riservata" / "Pannello gestione": visibili solo a chi ha anche un ruolo di gestione. */
[data-ti-gestione-link][hidden],
[data-ti-area-link][hidden] { display: none !important; }