/* ==========================================================================
   TUPPA MA — global.css
   Reset, tipografia, layout generale (sidebar fissa + contenuto scrollabile).
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--bg);
  color: var(--fg);
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  min-height: 100vh;
  transition: background 0.25s ease, color 0.25s ease;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: var(--fg);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  transition: border-color 0.15s ease;
}

a:hover,
a:focus-visible {
  border-bottom-color: var(--line-strong);
}

:focus-visible {
  outline: 1px solid var(--line-strong);
  outline-offset: 3px;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   Layout generale
   Desktop: sidebar fissa a sinistra, contenuto che scrolla a destra.
   -------------------------------------------------------------------------- */

.layout {
  display: flex;
  min-height: 100vh;
}

.content {
  flex: 1;
  margin-left: 260px;           /* larghezza sidebar */
  padding: 72px 64px 96px;
  max-width: 1080px;
}

/* --------------------------------------------------------------------------
   Tipografia comune
   -------------------------------------------------------------------------- */

.page-title {
  font-size: clamp(32px, 5.2vw, 58px);
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  line-height: 1.08;
  color: var(--fg);
  margin-bottom: 48px;
}

h1,
h2,
h3 {
  font-weight: 600;
  line-height: 1.25;
}

.prose {
  max-width: 960px;
}

.prose p {
  font-size: 17px;
  font-weight: 300;
  line-height: 1.7;
  letter-spacing: 0.01em;
}

.prose strong {
  font-weight: 600;
}

.prose::after {
  content: "";
  display: table;
  clear: both;
}

.prose p + p {
  margin-top: 1.3em;
}

hr {
  border: none;
  border-top: 1px solid var(--line);
  margin: 48px 0;
}

/* Movimento ridotto: nessuna transizione per chi lo richiede */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
}

/* --------------------------------------------------------------------------
   Mobile: la sidebar diventa header in alto (vedi header.css),
   il contenuto perde il margine laterale.
   -------------------------------------------------------------------------- */

@media (max-width: 860px) {
  .layout {
    display: block;
  }

  .content {
    margin-left: 0;
    padding: 96px 20px 64px;    /* padding-top > altezza header fisso */
    max-width: none;
  }

  .page-title {
    margin-bottom: 32px;
  }
}

/* ==========================================================================
   Tooltip su hover per le icone (Spotify, YouTube, Scarica, Testo...)
   Etichetta minimale in stile sito, non il tooltip di sistema del browser.
   Qui perche' compare anche nel footer, presente su ogni pagina.
   ========================================================================== */

[data-tooltip] {
  position: relative;
}

[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translate(-50%, -6px);
  white-space: nowrap;
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--line);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 10px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 20;
}

[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::after {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -10px);
}

/* I tooltip non servono su schermi touch: niente hover reale li attiva */
@media (max-width: 860px) {
  [data-tooltip]::after {
    display: none;
  }
}