/* =========================
   Van4Opportunity (v4o) - BUTTONS (TEST)
   Versione con headline oro
   ========================= */

/* Reset + base identica per <a> e <button> */
a.v4o-btn,
button.v4o-btn{
  all: unset;
  box-sizing: border-box;

  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  padding: 10px 22px;
  gap: 2px;

  border-radius: 999px;

  font-weight: 800;
  letter-spacing: .6px;
  line-height: 1.05;
  font-size: 15px;

  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;

  transition: 0.2s ease;
}

/* WordPress inserisce <br /> automaticamente */
.v4o-btn br{
  display: none;
}

/* Righe interne */
.v4o-btn span,
.v4o-btn .v4o-btn-line1,
.v4o-btn .v4o-btn-line2{
  display: block;
  margin: 0;
  padding: 0;
  line-height: 1.05;
}

/* ===== PRIMA RIGA (ORO) ===== */
.v4o-btn .v4o-btn-line1,
.v4o-btn span:first-child{
  font-size: 17px;   /* prima era 15px base → +2px */
  color: #f29a1a;              /* oro/arancio del brand */
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}

/* ===== SECONDA RIGA ===== */
.v4o-btn .v4o-btn-line2,
.v4o-btn span:last-child{
  font-size: .86em;
  font-weight: 700;
  letter-spacing: .3px;
  opacity: .95;
  color: #fff;
}

/* Focus accessibile */
a.v4o-btn:focus-visible,
button.v4o-btn:focus-visible{
  outline: 2px solid rgba(255,255,255,.55);
  outline-offset: 3px;
}

/* Variante ARANCIONE piena (eventuale uso futuro) */
a.v4o-btn:not(.v4o-btn--ghost),
button.v4o-btn:not(.v4o-btn--ghost){
  background:#f29a1a;
  color:#111;
  box-shadow: 0 8px 18px rgba(242,154,26,.18);
  text-shadow: none;
}

/* ===== Variante GHOST (hero + quiz) ===== */
a.v4o-btn.v4o-btn--ghost,
button.v4o-btn.v4o-btn--ghost{
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.26);
  box-shadow: 0 10px 26px rgba(0,0,0,0.28);
}

/* Hover ghost */
a.v4o-btn.v4o-btn--ghost:hover,
button.v4o-btn.v4o-btn--ghost:hover{
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.38);
}

/* Mobile */
@media (max-width: 768px){
  a.v4o-btn,
  button.v4o-btn{
    padding: 8px 16px;
    font-size: 14px;
  }

  .v4o-btn .v4o-btn-line2,
  .v4o-btn span:last-child{
    font-size: .88em;
  }
}