/* ============================================================
   STYLE.CSS — foglio di stile condiviso da TUTTE le pagine del blog
   ============================================================
   Questo file è collegato da ogni pagina HTML (index.html, diary.html,
   mood-board.html, favorites.html, about.html) tramite:
     <link rel="stylesheet" href="style.css">

   Se cambi qui un colore o uno stile, cambia su TUTTO il sito in una volta.
   Non serve modificare ogni singola pagina.

   INDICE DEL FILE (cerca questi titoli con CTRL+F):
     1. VARIABILI COLORE (:root)
     2. STILI DI BASE (body, link)
     3. EFFETTO SCINTILLE DEL CURSORE
     4. DECORAZIONI DI SFONDO FLUTTUANTI
     5. MARQUEE (striscia di testo che scorre)
     6. HEADER + MENU DI NAVIGAZIONE
     7. LAYOUT GENERALE (colonna principale + sidebar)
     8. ARTICOLI DEL DIARIO (.post)
     9. FOTO / MOOD BOARD (.photo-slot)
     10. TAG
     11. SIDEBAR (widget)
     12. FOOTER
   ============================================================ */


/* ---------- 1. VARIABILI COLORE ----------
   Cambia questi codici colore per cambiare la palette di TUTTO il sito. */
:root {
  --cream: #FAF3E9;
  --blush: #F2D9DC;
  --blush-soft: #F7E9EA;
  --wine: #7B2D3E;
  --gold: #C9A66B;
  --taupe: #C9BDB4;
  --ink: #3B2A2E;
  --ink-soft: #6E5A57;
}

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


/* ---------- 2. STILI DI BASE ---------- */
body {
  background: var(--cream);
  background-image:
    radial-gradient(circle at 15% 20%, var(--blush-soft) 0%, transparent 35%),
    radial-gradient(circle at 85% 10%, var(--blush) 0%, transparent 30%),
    radial-gradient(circle at 90% 80%, var(--taupe) 0%, transparent 28%);
  background-attachment: fixed;
  color: var(--ink);
  font-family: 'EB Garamond', serif;
  cursor: default;
  overflow-x: hidden;
}

a { color: var(--wine); text-decoration: none; }
a:hover { text-decoration: underline; }


/* ---------- 3. EFFETTO SCINTILLE DEL CURSORE ----------
   Gestito da script.js, qui c'è solo l'aspetto grafico. */
#sparkle-layer {
  position: fixed; inset: 0; pointer-events: none; z-index: 999;
}
.sparkle {
  position: absolute;
  font-size: 13px;
  color: var(--wine);
  opacity: 0;
  animation: floatUp 2.2s ease-out forwards;
}
@keyframes floatUp {
  0% { opacity: 0; transform: translateY(0) scale(0.6) rotate(0deg); }
  15% { opacity: 0.9; }
  100% { opacity: 0; transform: translateY(-65px) scale(1.05) rotate(90deg); }
}


/* ---------- 4. DECORAZIONI DI SFONDO FLUTTUANTI ----------
   Le piccole ✦ ♡ 🎀 che fluttuano dietro al contenuto. */
.bg-deco {
  position: fixed; font-size: 20px; opacity: 0.28; z-index: 0;
  color: var(--gold);
  animation: drift 9s ease-in-out infinite;
}
@keyframes drift {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-16px) rotate(8deg); }
}


/* ---------- 5. MARQUEE (striscia di testo che scorre) ---------- */
.marquee-wrap {
  background: var(--ink);
  color: var(--blush-soft);
  font-family: 'Prata', serif;
  font-size: 15px;
  letter-spacing: 1.5px;
  padding: 7px 0;
  overflow: hidden;
  white-space: nowrap;
  border-bottom: 2px solid var(--gold);
}
.marquee-track {
  display: inline-block;
  animation: scrollLeft 26s linear infinite;
}
@keyframes scrollLeft {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}


/* ---------- 6. HEADER + MENU DI NAVIGAZIONE ---------- */
header {
  text-align: center;
  padding: 55px 20px 30px;
  position: relative;
  z-index: 1;
}
.blog-title {
  font-family: 'Bonheur Royale', cursive;
  font-size: 78px;
  color: var(--wine);
  text-shadow: 2px 2px 0 #fff, 4px 4px 0 var(--blush);
  line-height: 1;
}
.blog-tagline {
  font-family: 'Prata', serif;
  font-style: italic;
  font-size: 16px;
  color: var(--ink-soft);
  margin-top: 12px;
  letter-spacing: 1px;
}
.blog-tagline::before, .blog-tagline::after { content: "✦ "; color: var(--gold); }

nav {
  margin-top: 26px;
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}
nav a {
  background: #fff;
  border: 1px solid var(--gold);
  border-radius: 2px;
  padding: 7px 20px;
  font-family: 'Prata', serif;
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ink);
  box-shadow: 3px 3px 0 var(--blush);
  transition: transform .15s ease;
}
nav a:hover {
  transform: translateY(-2px);
  text-decoration: none;
  background: var(--blush-soft);
}
/* Voce di menu della pagina in cui ci si trova attualmente.
   Viene applicata mettendo class="active" sul link <a> nella pagina HTML. */
nav a.active {
  background: var(--wine);
  color: #fff;
  border-color: var(--wine);
}


/* ---------- 7. LAYOUT GENERALE ----------
   Colonna principale (articoli) + sidebar. Su schermi stretti
   (sotto 800px) la sidebar scende sotto agli articoli. */
.container {
  max-width: 1100px;
  margin: 30px auto;
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 34px;
  padding: 0 20px;
  position: relative;
  z-index: 1;
}
@media (max-width: 800px) {
  .container { grid-template-columns: 1fr; }
}

/* Variante di layout usata dalle pagine senza sidebar (es. about, mood-board)
   quando si vuole il contenuto centrato su tutta la larghezza. */
.container.single-column {
  grid-template-columns: 1fr;
  max-width: 800px;
}


/* ---------- 8. ARTICOLI DEL DIARIO (.post) ----------
   Ogni voce di diario è un blocco ".post". Vedi i commenti "EDIT HERE"
   dentro index.html / diary.html per sapere come aggiungerne uno nuovo. */
.post {
  background: #fff;
  border: 1px solid var(--blush);
  border-radius: 4px;
  padding: 30px 32px;
  margin-bottom: 30px;
  position: relative;
  box-shadow: 6px 6px 0 var(--taupe);
}
.ribbon {
  position: absolute;
  top: -14px; left: 32px;
  font-size: 22px;
  color: var(--wine);
  background: var(--cream);
  padding: 0 6px;
}
.post-date {
  font-family: 'Prata', serif;
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--gold);
}
.post-title {
  font-family: 'Bonheur Royale', cursive;
  font-size: 38px;
  color: var(--ink);
  margin: 6px 0 14px;
}
.post-body {
  font-size: 17px;
  line-height: 1.8;
  color: var(--ink-soft);
}
.post-body p { margin-bottom: 14px; }


/* ---------- 9. FOTO / MOOD BOARD (.photo-slot) ----------
   Riquadro segnaposto per una foto. Per mettere una foto vera,
   basta aggiungere dentro: <img src="nome-foto.jpg" alt="descrizione">
   e il riquadro si riempirà automaticamente (vedi regola ".photo-slot img"). */
.photo-slot {
  width: 100%;
  min-height: 180px;
  border: 1px dashed var(--gold);
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Prata', serif;
  color: var(--ink-soft);
  background: linear-gradient(135deg, var(--blush-soft), #fff);
  margin: 16px 0;
  font-size: 13px;
  text-align: center;
}
.photo-slot img { width: 100%; height: 100%; object-fit: cover; border-radius: 2px; }

.mood-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.mood-grid .photo-slot { min-height: 70px; font-size: 10px; margin: 0; }

/* Griglia più grande usata nella pagina "mood board" dedicata. */
.mood-grid.large { gap: 12px; }
.mood-grid.large .photo-slot { min-height: 150px; font-size: 12px; }


/* ---------- 10. TAG ---------- */
.tags {
  margin-top: 18px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.tag {
  font-size: 11px;
  letter-spacing: .5px;
  background: var(--blush-soft);
  color: var(--wine);
  padding: 4px 13px;
  border-radius: 20px;
  font-family: 'Prata', serif;
  text-transform: uppercase;
}

.post-footer {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--blush);
  font-family: 'Prata', serif;
  font-size: 13px;
  color: var(--ink-soft);
  display: flex;
  justify-content: space-between;
  letter-spacing: .5px;
}


/* ---------- 11. SIDEBAR (widget) ----------
   La sidebar è fatta di blocchi ".widget" ripetuti (profilo, mood,
   playlist, archivio, tag...). Puoi riordinarli o riusarli su qualunque
   pagina semplicemente copiando il blocco HTML corrispondente. */
.widget {
  background: #fff;
  border: 1px solid var(--taupe);
  border-radius: 4px;
  padding: 22px 24px;
  margin-bottom: 26px;
  box-shadow: 5px 5px 0 var(--blush);
}
.widget h3 {
  font-family: 'Prata', serif;
  font-size: 15px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--wine);
  margin-bottom: 14px;
  border-bottom: 1px solid var(--blush);
  padding-bottom: 8px;
}

.profile-pic {
  width: 104px; height: 104px;
  border-radius: 50%;
  border: 2px solid var(--gold);
  margin: 0 auto 16px;
  background: linear-gradient(135deg, var(--blush), var(--taupe));
  display: flex; align-items: center; justify-content: center;
  font-family: 'Prata', serif;
  color: #fff;
  font-size: 12px;
  text-align: center;
  overflow: hidden;
}
.profile-pic img { width: 100%; height: 100%; object-fit: cover; }
.widget.profile { text-align: center; }
.profile p { font-size: 15px; line-height: 1.7; color: var(--ink-soft); font-style: italic; }

/* Foto profilo più grande, usata nella pagina "about me". */
.profile-pic.large { width: 80px; height: 80px; font-size: 14px; }

.taglist { display: flex; flex-wrap: wrap; gap: 8px; }

.playlist-item {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 0;
  font-size: 15px;
  font-style: italic;
  border-bottom: 1px dotted var(--blush);
}
.playlist-item:last-child { border: none; }
.playlist-item .note { color: var(--wine); font-style: normal; }

.archive-list { list-style: none; font-size: 15px; }
.archive-list li { padding: 5px 0; }
.archive-list li::before { content: "✦ "; color: var(--gold); }
.archive-list li a { color: var(--ink); }
.archive-list li a:hover { color: var(--wine); }


/* ---------- 12. FOOTER ---------- */
footer {
  text-align: center;
  padding: 40px 20px 60px;
  position: relative;
  z-index: 1;
}
.badge-strip {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.seal {
  width: 78px; height: 78px;
  border-radius: 50%;
  border: 1px solid var(--gold);
  background: var(--blush-soft);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Prata', serif;
  font-size: 10px;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--wine);
  text-align: center;
  line-height: 1.3;
}

footer p {
  font-family: 'Prata', serif;
  font-size: 13px;
  letter-spacing: .5px;
  color: var(--ink-soft);
}

/* Piccolo link "torna su" facoltativo, usato nelle pagine più lunghe. */
.back-to-top {
  display: inline-block;
  margin-top: 6px;
  font-family: 'Prata', serif;
  font-size: 12px;
  letter-spacing: .5px;
  color: var(--ink-soft);
}

/* ============================================================
   MESSAGGI DA MITTENTE IGNOTO (.a-note)
   ============================================================
   Blocco pensato per sembrare "ricevuto" e incollato nel diario,
   non scritto da chi tiene il blog. Stessa spaziatura di ".post"
   (per stare in fila con le altre voci del diario allo stesso modo),
   ma tutto rosa pieno, SENZA bordo né ombra intorno: niente
   "contenitore" visibile, solo il colore.

   COME USARLO — incolla questo HTML dove vuoi far comparire un
   messaggio (tra due post, in fondo a una pagina, ecc.):

     <div class="a-note">
       <span class="a-note-label">received — unknown sender</span>
       <p>testo del messaggio...</p>
       <span class="a-signature">— A</span>
     </div>

   Puoi ripetere il blocco quante volte vuoi, cambiando solo il
   testo dentro <p>. Se vuoi più paragrafi, aggiungi più <p>.
   ============================================================ */
.a-note {
  background: var(--blush);
  border-radius: 4px;
  padding: 30px 32px;
  margin-bottom: 30px;
}
.a-note-label {
  display: block;
  font-family: 'Prata', serif;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--wine);
  margin-bottom: 12px;
}
.a-note p {
  font-family: 'Prata', serif;
  font-style: italic;
  font-size: 16px;
  line-height: 1.8;
  color: var(--ink);
}
.a-signature {
  display: block;
  margin-top: 16px;
  text-align: right;
  font-family: 'Prata', serif;
  font-style: normal;
  letter-spacing: 3px;
  text-transform: uppercase;
  font-size: 13px;
  color: var(--wine);
}
/* ============================================================
   AVVISO CASUALE "— A" (toast in basso a destra)
   ============================================================
   Stessa logica del blocco sopra: colori del tema (blush/wine/taupe)
   invece della vecchia palette scura, e l'ombra "sfalsata" tipica
   di .post/.widget invece di un bagliore, per restare in stile. */
.a-alert {
  position: fixed;
  bottom: 24px;
  right: 24px;
  max-width: 280px;
  background: var(--blush-soft);
  border: 1px solid var(--blush);
  border-left: 4px solid var(--wine);
  border-radius: 4px;
  padding: 16px 20px;
  box-shadow: 4px 4px 0 var(--taupe);
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;      /* non blocca i click sulla pagina sotto */
  transition: opacity .6s ease, transform .6s ease;
  z-index: 1000;
}
.a-alert.show {
  opacity: 1;
  transform: translateY(0);
}
.a-alert-label {
  display: block;
  font-family: 'Prata', serif;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--wine);
  margin-bottom: 6px;
}
.a-alert p {
  font-family: 'Prata', serif;
  font-style: italic;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink);
  margin: 0;
}