/* ==========================================================================
   Struttura: header, hero, sezioni narrative, footer
   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.
   ========================================================================== */

/* ==========================================================================
   Layout strutturale — template custom (Home, Pagina Mondo, header/footer)
   ========================================================================== */

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

/* --- Header --- */
/* Contenitore e margine laterale presi dai token, identici a quelli di
   sezioni e footer (29/08/2026): prima erano 1200px + 40px di padding
   contro i 1240px + 20px del resto, quindi logo e menu non cadevano mai
   sulla stessa verticale del contenuto sotto. Nessun override per
   template: l'intelaiatura deve essere la stessa su tutte le pagine. */
.sacc-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  padding: 20px var(--gutter);
}
.sacc-header-inner {
  display: flex; align-items: center; justify-content: space-between;
  max-width: var(--container-wide); margin: 0 auto;
}
.sacc-logo {
  font-family: var(--font-display); font-size: 1.4rem; color: var(--sacc-ivory);
  text-decoration: none; letter-spacing: .5px;
}
.sacc-header--solid { background-color: var(--sacc-black); }
.sacc-menu { list-style: none; display: flex; gap: 28px; margin: 0; padding: 0; }
.sacc-menu a {
  color: var(--sacc-ivory); text-decoration: none; font-size: .85rem;
  letter-spacing: .5px; text-transform: uppercase;
}
.sacc-menu a:hover { color: var(--sacc-gold); }
.sacc-menu ul { list-style: none; padding: 10px 0; margin: 8px 0 0; background: var(--sacc-black); position: absolute; z-index: 10; }
.sacc-menu li { position: relative; }
.sacc-menu ul a { display: block; padding: 6px 20px; white-space: nowrap; }

/* Sottomenu nascosto a riposo, mostrato su hover/focus (tastiera e touch) */
.sacc-nav li.menu-item-has-children > .sub-menu {
  opacity: 0; visibility: hidden;
  transition: opacity .18s ease, visibility .18s;
}
.sacc-nav li.menu-item-has-children:hover > .sub-menu,
.sacc-nav li.menu-item-has-children:focus-within > .sub-menu {
  opacity: 1; visibility: visible;
}

/* --- Hero --- */
.sacc-hero {
  position: relative; min-height: 80vh; display: flex; align-items: center;
  justify-content: center; text-align: center; color: var(--sacc-ivory);
  background-color: var(--sacc-black);
  background-image: linear-gradient(160deg, #14120c, #0a0a0a 60%, #1a1508);
  background-size: cover; background-position: center; background-repeat: no-repeat;
}
/* Quando c'è una foto reale (style inline background-image), il gradiente
   di fallback viene sovrascritto automaticamente dall'inline style. */
/* Sprint 04: fallback "cinematografico" solo per la Hero Home (senza
   foto — vedi inventario immagini) — una luce calda che si addensa verso
   destra, dove siederà il pianoforte non appena la fotografia sarà
   disponibile, invece del gradiente diagonale piatto generico condiviso
   con le pagine mondo (non toccate in questo sprint). */
.sacc-hero--home:not(.has-image) {
  background-image:
    radial-gradient(ellipse 60% 70% at 78% 55%, rgba(212,175,55,.16), transparent 68%),
    linear-gradient(100deg, #0a0806 0%, #100d08 45%, #1c160a 100%);
}
.sacc-hero--mondo { min-height: 45vh; }
/* Hero più basso quando non c'è ancora una foto (nessuna classe "has-image") */
.sacc-hero:not(.has-image) { min-height: 55vh; }
.sacc-hero--mondo { min-height: 50vh; }

/* Hero Home: 92svh su desktop, altezza mobile ridotta ma gestibile.
   Unità "svh" (small viewport height) evita il salto di layout dato dalla
   barra indirizzi dei browser mobile che si espande/riduce allo scroll;
   dichiarata dopo "vh" come fallback progressivo per browser che non la
   supportano (la ignorano e restano sul valore vh). */
body.page-template-page-home-php .sacc-hero {
  min-height: 92vh;
  min-height: 92svh;
}
@media (max-width: 782px) {
  body.page-template-page-home-php .sacc-hero {
    min-height: 78vh;
    min-height: 78svh;
  }
}
/* Sprint 04: su desktop l'altezza fissa a 92svh risultava eccessiva sugli
   schermi più alti (il testo "galleggiava" isolato). Range cinematografico
   fisso invece di una percentuale pura, come richiesto dal brief
   (760–900px), solo da 1024px in su — sotto quella soglia resta il
   comportamento invariato basato su svh. */
@media (min-width: 1024px) {
  body.page-template-page-home-php .sacc-hero {
    min-height: clamp(760px, 82vh, 900px);
    min-height: clamp(760px, 82svh, 900px);
  }
}
.sacc-hero-overlay {
  position: absolute; inset: 0; background: rgba(10,10,10,.55);
}
/* Sprint 04: overlay graduato solo sulla Hero Home (non tocca le pagine
   mondo, fuori scope) — più scuro dove si sovrappone al testo, sempre più
   trasparente verso destra, dove in futuro emergerà il soggetto
   fotografico del pianoforte. Sostituisce l'overlay piatto solo qui. */
@media (min-width: 1024px) {
  .sacc-hero--home .sacc-hero-overlay {
    background: linear-gradient(100deg,
      rgba(6,5,3,.86) 0%,
      rgba(8,7,4,.68) 32%,
      rgba(10,9,6,.4) 58%,
      rgba(10,9,6,.12) 100%);
  }
}
.sacc-hero-content { position: relative; z-index: 1; max-width: 720px; padding: 0 20px; }
.sacc-hero h1 { font-size: 2.6rem; line-height: 1.3; margin-bottom: 20px; }
.sacc-hero-tag {
  display: block; font-family: var(--font-ui); font-size: .75rem;
  letter-spacing: 2px; text-transform: uppercase; color: var(--sacc-gold);
  margin-bottom: 16px;
}
.sacc-hero-cta {
  font-family: var(--font-ui); font-size: .8rem; letter-spacing: 1px;
  color: var(--sacc-ivory); text-decoration: none; border-bottom: 1px solid var(--sacc-gold);
  padding-bottom: 4px;
}

/* --- Narrative --- */
.sacc-narrative {
  padding: 70px var(--gutter); text-align: center; max-width: var(--container-text); margin: 0 auto;
  font-size: 1.15rem; line-height: 1.8;
}
.sacc-narrative a { color: var(--sacc-gold-dark); font-family: var(--font-ui); font-size: .85rem; }

/* --- 4 mondi --- */
.sacc-worlds { padding: 60px 20px; background: var(--sacc-ivory-alt); }
.sacc-worlds h2 { text-align: center; margin-bottom: 40px; }
.sacc-worlds-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
  max-width: var(--container-content); margin: 0 auto;
}
.sacc-world-card {
  height: 220px; border-radius: var(--radius); display: flex; flex-direction: column;
  justify-content: flex-end; padding: 20px; color: #fff; text-decoration: none;
  background-color: var(--world-base);
  background-image:
    linear-gradient(135deg, color-mix(in srgb, var(--world-base) 55%, transparent), color-mix(in srgb, var(--world-accent) 65%, transparent)),
    var(--sacc-card-img, none);
  background-size: cover; background-position: center; background-repeat: no-repeat;
  transition: transform .3s ease, box-shadow .25s ease;
  position: relative; overflow: hidden;
}
.sacc-world-card:hover { color: #fff; transform: translateY(-3px); box-shadow: 0 6px 18px rgba(0,0,0,.12); }
.sacc-world-card b { font-family: var(--font-display); font-size: 1.3rem; font-weight: 400; }
.sacc-world-card span { font-family: var(--font-ui); font-size: .8rem; opacity: .85; margin-top: 4px; }
@media (max-width: 1023px) { .sacc-worlds-grid { grid-template-columns: 1fr; } }

/* --- Showroom --- */
.sacc-showroom { padding: 70px 20px; background: var(--sacc-black); color: var(--sacc-ivory); text-align: center; }
.sacc-showroom-img { max-width: var(--container-prose); margin: 0 auto 30px; }
.sacc-showroom-img img { width: 100%; border-radius: var(--radius); }
/* Sprint 04: nessuna foto reale disponibile — la sezione ora mostra sempre
   uno slot fotografico (mai un pannello nero senza nulla, come richiesto
   esplicitamente dal brief), con un gradiente pronto per la sostituzione. */
.sacc-showroom-img--placeholder {
  aspect-ratio: 4 / 3;
  background-color: var(--sacc-black);
  background-image: var(--gradient-cinematic);
}
.sacc-showroom p { max-width: 600px; margin: 0 auto; line-height: 1.8; color: var(--gray-100); font-size: 1.05rem; }

/* --- CTA finale pagina mondo --- */
.sacc-cta-final { text-align: center; padding: 20px 20px 80px; }
/* Testo nero, non bianco (corretto 18/08/2026, TODO.md sezione Accessibilita').
   Il bottone e' sempre su --world-accent, cioe' uno dei quattro ori/sabbia dei
   mondi (#a09060 Bechstein, #c9986b Heilmann, #c9964a Fender, #d4af37
   Multimarca). Il bianco dava 2.10:1 sul Multimarca, sotto la soglia WCAG di
   3:1 anche per soli componenti UI; il nero da' almeno 6.8:1 su tutti e quattro
   (il piu' scuro e' Bechstein) senza toccare l'identita' cromatica. */
.sacc-cta-button {
  display: inline-block; padding: 14px 32px; color: var(--sacc-black); text-decoration: none;
  font-family: var(--font-ui); font-size: .85rem; letter-spacing: 1px; text-transform: uppercase;
  border-radius: var(--radius);
  transition: background-color .2s ease, transform .15s ease;
}
.sacc-cta-button:hover, .sacc-cta-button:active { color: var(--sacc-black); }
.sacc-cta-button:active { transform: scale(0.97); }

/* --- Footer --- */
/* Sprint 04: densità/allineamento (non struttura) — griglia allineata al
   container principale invece di un blocco flex centrato e stretto
   (max-width:1000px lasciava molto margine laterale non intenzionale sui
   desktop larghi), più spazio tra titoli e link per una gerarchia più
   leggibile. */
.sacc-footer { background: var(--sacc-black); color: var(--sacc-ivory); padding: 64px var(--gutter) 40px; font-family: var(--font-ui); font-size: .85rem; }
.sacc-footer-cols { display: grid; grid-template-columns: 1fr; gap: 40px; max-width: var(--container-wide); margin: 0 auto 40px; text-align: left; }
.sacc-footer-cols > div { min-width: 0; }
.sacc-footer-cols p { line-height: 2; margin: 0 0 4px; }
.sacc-footer-title {
  display: block; color: var(--sacc-gold); font-family: var(--font-display); font-size: 1rem;
  letter-spacing: .3px; margin-bottom: 16px;
}
.sacc-footer-cols a { color: var(--gray-200); text-decoration: none; }
.sacc-footer-cols a:hover { color: var(--sacc-gold); }
@media (min-width: 700px) {
  .sacc-footer-cols { grid-template-columns: repeat(2, 1fr); gap: 40px 32px; }
}
@media (min-width: 1024px) {
  .sacc-footer-cols { grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 56px; }
}
.sacc-social-icons { display: flex; gap: 10px; }
.sacc-social-icons a {
  width: 32px; height: 32px; border: 1px solid var(--gray-800); display: flex; align-items: center;
  justify-content: center; font-size: .7rem; color: var(--sacc-gold);
}
.sacc-footer-bottom { text-align: center; border-top: 1px solid var(--gray-900); padding-top: 20px; color: var(--gray-400); font-size: .75rem; }
.sacc-footer-bottom a { color: var(--gray-300); }