/* Pauliner Makeup — Hub (linktree)
   Palette + font allineati al sito Symfony (assets/styles/_variables.scss) */
:root {
  /* Colori (identici al sito) */
  --c-cream:      #FAF7F4;
  --c-white:      #FFFFFF;
  --c-black:      #1A1A1A;
  --c-charcoal:   #2C2C2C;
  --c-gold:       #C9A07C;
  --c-gold-dark:  #A07850;
  --c-gold-light: #E8D5C4;
  --c-nude:       #D4B5A0;
  --c-nude-light: #EDE0D7;
  --c-muted:      #888888;
  --c-bg-alt:     #F5F0EB;

  /* Font (identici al sito) */
  --f-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --f-sans:  'Raleway', 'Helvetica Neue', Arial, sans-serif;

  /* Ombre (identiche al sito) */
  --shadow-sm: 0 4px 20px rgba(0,0,0,0.06);
  --shadow-md: 0 16px 50px rgba(0,0,0,0.10);

  --radius: 14px;
  --maxw: 520px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--f-sans);
  background: var(--c-cream);
  color: var(--c-charcoal);
  min-height: 100vh;
  display: flex;
  justify-content: center;
  padding: 2.5rem 1.25rem;
  -webkit-font-smoothing: antialiased;
}

.hub {
  width: 100%;
  max-width: var(--maxw);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.75rem;
}

.hub__head { text-align: center; display: flex; flex-direction: column; align-items: center; gap: .5rem; }
.hub__avatar { width: 110px; height: 110px; border-radius: 50%; object-fit: cover; border: 3px solid var(--c-gold); box-shadow: var(--shadow-sm); }
/* Avatar/logo sono popolati da app.js (prima sono [hidden]). Invece di
   collassare il box (display:none) lo teniamo nel flusso ma invisibile:
   lo spazio resta riservato → nome/bio/footer non si spostano (CLS=0). */
.hub__avatar[hidden] { display: block; visibility: hidden; }
/* min-height = altezza reale del testo: l'h1/p vuoti pre-JS riservano già
   la riga finale, niente shift quando app.js inserisce il testo. */
.hub__name { font-family: var(--f-serif); font-size: 2.1rem; font-weight: 600; letter-spacing: .01em; color: var(--c-black); min-height: 41px; }
.hub__bio { font-size: .8rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--c-muted); min-height: 15px; }

.hub__links { width: 100%; display: flex; flex-direction: column; gap: .85rem; min-height: 349px; }

.hub__btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: 1rem 3rem;
  background: var(--c-white);
  color: var(--c-charcoal);
  border: 1px solid var(--c-gold-light);
  border-radius: var(--radius);
  text-decoration: none;
  font-family: var(--f-sans);
  font-weight: 600;
  font-size: .8rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  transition: transform .25s cubic-bezier(0.25,0.46,0.45,0.94), box-shadow .25s, border-color .25s, background-color .25s, color .25s;
}
.hub__btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
  border-color: var(--c-gold);
  background: var(--c-bg-alt);
}
.hub__btn:active { transform: translateY(0); }
/* Navigazione tastiera: anello focus visibile (solo focus da tastiera, non click) */
.hub__btn:focus-visible {
  outline: 2px solid var(--c-gold-dark);
  outline-offset: 3px;
  border-color: var(--c-gold);
}

/* Icona ancorata a sinistra, label centrata otticamente */
.hub__icon {
  position: absolute;
  left: 1.1rem;
  flex: 0 0 auto;
  color: var(--c-gold-dark);
  transition: color .25s;
}
.hub__btn:hover .hub__icon { color: var(--c-gold); }
.hub__label { line-height: 1; }

/* Bottone "Prossimamente": disabilitato, smorzato, non cliccabile */
.hub__btn--soon {
  cursor: default;
  opacity: .55;
  background: var(--c-bg-alt);
}
.hub__btn--soon:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--c-gold-light);
  background: var(--c-bg-alt);
}
.hub__btn--soon:hover .hub__icon { color: var(--c-gold-dark); }
.hub__badge {
  position: absolute;
  right: 1.1rem;
  font-size: .6rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-white);
  background: var(--c-gold);
  padding: .2rem .5rem;
  border-radius: 999px;
}

.hub__foot { margin-top: 1rem; display: flex; flex-direction: column; align-items: center; gap: .6rem; }
.hub__logo { width: 190px; height: 190px; opacity: .85; }
/* Stesso trucco dell'avatar: box riservato anche da nascosto. */
.hub__logo[hidden] { display: block; visibility: hidden; }
.hub__foot small { color: var(--c-muted); font-size: .8rem; letter-spacing: .04em; }