/* ==========================================================================
   Reset, tipografia di base, stati dei link, focus
   Estratto da variables.css il 18/08/2026: il file era un monolite di 1107
   righe con token, reset, layout, componenti e tre generazioni di homepage
   sovrapposte. Vedi functions.php per l'ordine di caricamento.
   ========================================================================== */

/* Base tipografica */
body {
  font-family: var(--font-ui);
  background: var(--sacc-ivory);
  color: var(--sacc-black);
}

h1, h2, h3, h4, .sacc-display {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0.2px;
}

/* Bottoni / elementi world-aware: usano --world-accent quando presente */
.sacc-world-accent {
  color: var(--world-accent, var(--sacc-gold));
  border-color: var(--world-accent, var(--sacc-gold));
}
.sacc-world-accent-bg {
  background-color: var(--world-accent, var(--sacc-gold));
}

/* Header: trasparente di default, opaco dopo lo scroll (classe aggiunta
   via JS da saccuman-motion-fx) */
.sacc-header {
  background: transparent;
  transition: background-color .3s ease;
}
.sacc-header.sacc-header--solid {
  background-color: var(--sacc-black);
}

/* Angoli quasi vivi ovunque, coerente con lo stile boutique scelto */
.elementor-widget-container img,
.elementor-button,
.elementor-widget-image-box .elementor-image-box-img {
  border-radius: var(--radius);
}

/* --- Stati dei link: identità esplicita e uniforme (mini sprint) ---------
   Il tema parent Hello Elementor (reset.css) definisce già colori propri
   sugli anchor: "a{color:#c36}" (un rosa/cremisi — verosimilmente
   l'origine del "rosa" segnalato) e "a:active,a:hover{color:#336}". Per
   sovrascriverli servono selettori della stessa famiglia/specificità,
   caricati dopo (questo foglio dipende da hello-elementor in functions.php,
   quindi stampa sempre dopo: a parità di specificità vince per ordine).

   - "a" nudo (0,0,1) batte "a{color:#c36}" del parent (stessa specificità,
     vince per ordine di stampa) — copre anche gli stati :link/:visited,
     che il parent non sovrascrive separatamente.
   - "a:link"/"a:visited" sono comunque dichiarati esplicitamente ma dentro
     :where() (specificità azzerata a 0,0,0): sono ridondanti col valore
     already imposto da "a", servono solo a rendere lo stato esplicito come
     richiesto, senza rischiare di scavalcare una singola classe (0,1,0) —
     verificato che senza :where() romperebbe .sacc-hero-cta-primary.
   - "a:hover"/"a:active" nudi (0,1,1) battono "a:hover,a:active{color:#336}"
     del parent per lo stesso motivo. Usano "color:inherit" anziché un
     colore fisso: eredita il colore reale della sezione (nero su sfondo
     chiaro, avorio su sfondo scuro — le sezioni scure impostano già
     "color:ivory" a livello di sezione), quindi funziona ovunque nel sito
     senza rischiare testo invisibile sui CTA chiari su sfondo scuro
     (showroom, footer, CTA hero/finale secondarie) che non hanno un
     proprio ":hover" dedicato. L'opacità dà comunque un feedback visibile
     anche quando "inherit" restituisce lo stesso colore di riposo.
   - Qualunque classe del tema più specifica (.sacc-menu a:hover, ecc., già
     tutte ≥ 0,2,0) continua a vincere come prima, invariata. */
a {
  color: var(--sacc-gold-dark);
  text-decoration: none;
}
:where(a:link) {
  color: var(--sacc-gold-dark);
}
:where(a:visited) {
  color: var(--sacc-gold-dark); /* identico a :link — mai il viola/rosa di default */
}
a:hover {
  color: inherit;
  opacity: .82;
}
a:focus {
  outline: none; /* l'anello va solo su :focus-visible, vedi sotto */
}
a:active {
  color: inherit;
  opacity: .65;
}

/* Focus da tastiera sempre visibile (mancava una regola globale prima di
   questo mini sprint). Deve restare DOPO "a:focus" sopra: stessa
   specificità (0,1,1), a parità vince l'ultima dichiarata — così l'anello
   nativo resta rimosso su :focus generico ma torna visibile su
   :focus-visible (navigazione da tastiera). */
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--sacc-gold-dark);
  outline-offset: 3px;
}

/* Le animazioni di ingresso sono globali (ogni template le usa), non
   della sola homepage: spostate qui da pages-home.css il 18/08/2026. */

/* --- Animazioni di ingresso: sacc-fade-in / reveal-on-scroll (17/08/2026) -
   Le classi erano già scritte in ogni template ma senza CSS a implementarle
   (zero effetto). Vedi reveal.js per l'attivazione via IntersectionObserver.
   Lo stato "nascosto" si applica SOLO tramite la classe `will-animate`
   aggiunta da JS: senza JavaScript (o se lo script fallisce/è bloccato) il
   contenuto resta sempre visibile fin da subito, mai nascosto per chi non
   esegue script — nessun rischio di pagina vuota. */
.sacc-fade-in.will-animate {
  opacity: 0;
}
.sacc-fade-in.will-animate.sacc-fade-in--ready {
  animation: sacc-fade-in var(--duration) var(--ease) forwards;
}
@keyframes sacc-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.reveal-on-scroll.will-animate {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.reveal-on-scroll.will-animate.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .sacc-fade-in.will-animate { opacity: 1; animation: none; }
  .reveal-on-scroll.will-animate { opacity: 1; transform: none; transition: none; }
}