/* ==========================================================
   MANUALI DEL PIACERE – TEMPLATE PAGINE SINGOLE
   File: /css/manuale-template.css
   Usato solo nei 30 manuali
========================================================== */

/* ----------------------------------------------------------
   COLORI TEMA MANUALI
   (Fondamenti, Tecniche, Potere, Fantasie, Orizzonti)
---------------------------------------------------------- */

:root {
  --tema-fondamenti: #f06464;
  --tema-tecniche:   #4d0f0f;
  --tema-potere:     #000d22;
  --tema-fantasie:   #3a1c57;
  --tema-orizzonti:  #24786f;
}

/* Helper tema per le sezioni */
.fondamenti h2,
.fondamenti .s1-serie { color: var(--tema-fondamenti); }

.tecniche h2,
.tecniche .s1-serie   { color: var(--tema-tecniche); }

.potere h2,
.potere .s1-serie     { color: var(--tema-potere); }

.fantasie h2,
.fantasie .s1-serie   { color: var(--tema-fantasie); }

.orizzonti h2,
.orizzonti .s1-serie  { color: var(--tema-orizzonti); }

/* ----------------------------------------------------------
   STRUTTURA BASE SEZIONI 1–8
---------------------------------------------------------- */

.sezione1,
.sezione2,
.sezione3,
.sezione4,
.sezione5,
.sezione6,
.sezione7,
.sezione8 {
  width: 90%;
  max-width: 1100px;
  margin: 0 auto 40px auto;
  padding: 40px 20px;
}

/* Titoli di sezione */
.sezione2 h2,
.sezione3 h2,
.sezione4 h2,
.sezione5 h2,
.sezione6 h2,
.sezione7 h2,
.sezione8 h2 {
  text-align: center;
  font-family: var(--font-display, "Playfair Display", serif);
  font-size: clamp(26px, 3vw, 32px);
  margin: 0 0 24px 0;
}

/* Testo paragrafi generici sezione */
.sezione2 p,
.sezione3 p,
.sezione4 p,
.sezione5 p,
.sezione6 p,
.sezione7 p,
.sezione8 p {
  font-size: 16px;
  line-height: 1.7;
}

/* Liste standard dentro le sezioni */
.sezione2 ul,
.sezione5 ul {
  margin: 0;
  padding-left: 20px;
}

.sezione2 li,
.sezione5 li {
  margin-bottom: 8px;
  line-height: 1.6;
}

/* ----------------------------------------------------------
   SEZIONE 1 — HERO MANUALE
---------------------------------------------------------- */

.sezione1.hero-manuale {
  color: #ffffff;
  padding-top: 60px;  /* spazio sotto header sticky */
}

.s1-wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 40px;
}

.s1-left {
  flex: 0 0 320px;
}

.s1-right {
  flex: 1 1 260px;
}

/* Copertina */
.s1-cover {
  width: 100%;
  max-width: 320px;
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(0,0,0,0.35);
  display: block;
}

/* Titolo e testo */
.s1-right h1 {
  font-family: var(--font-display, "Playfair Display", serif);
  font-size: clamp(30px, 4.5vw, 42px);
  margin: 0 0 8px 0;
}

.s1-serie {
  font-size: 17px;
  opacity: 0.85;
  margin-bottom: 18px;
}

.s1-intro {
  font-size: 16px;
  line-height: 1.7;
  max-width: 600px;
  margin-bottom: 24px;
}

/* Mobile */
@media (max-width: 768px) {
  .sezione1.hero-manuale {
    text-align: center;
  }

  .s1-wrapper {
    flex-direction: column;
  }

  .s1-left,
  .s1-right {
    flex: 1 1 100%;
  }

  .s1-intro {
    margin-left: auto;
    margin-right: auto;
  }
}

/* ----------------------------------------------------------
   PULSANTE AMAZON (unico per i manuali)
---------------------------------------------------------- */

.btn-amazon {
  display: inline-block;
  text-decoration: none;
  text-align: center;
  background: #ff9900;
  color: #111111;
  font-weight: 700;
  font-size: 18px;
  padding: 14px 22px;
  border-radius: 10px;
  margin-top: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.20);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

.btn-amazon:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 22px rgba(0,0,0,0.28);
  filter: brightness(1.03);
}

.amazon-icon {
  height: 24px;
  width: auto;
  vertical-align: middle;
  margin-right: 8px;
}

/* ----------------------------------------------------------
   SEZIONE 2 — COSA IMPARERAI
---------------------------------------------------------- */

.sezione2 {
  background: rgba(255,255,255,0.25);
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}

.s2-lista {
  list-style: disc;
}

.s2-lista li::marker {
  color: currentColor;
}

/* ----------------------------------------------------------
   SEZIONE 3 — FRAMMENTI DAL MANUALE
---------------------------------------------------------- */

.sezione3 {
  background: rgba(255,255,255,0.20);
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}

.s3-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}

/* Box base */
.s3-box {
  background: #f7f4ff;
  border-radius: 12px;
  padding: 16px 18px;
  font-style: italic;
  font-size: 15px;
  line-height: 1.6;
  border-left: 4px solid var(--gp-lavender, #d9c6ff);
  box-shadow: 0 4px 10px rgba(0,0,0,0.06);
}

/* Bordo sinistro colorato per tema */
.sezione3.fondamenti .s3-box { border-left-color: var(--tema-fondamenti); }
.sezione3.tecniche   .s3-box { border-left-color: var(--tema-tecniche); }
.sezione3.potere     .s3-box { border-left-color: var(--tema-potere); }
.sezione3.fantasie   .s3-box { border-left-color: var(--tema-fantasie); }
.sezione3.orizzonti  .s3-box { border-left-color: var(--tema-orizzonti); }

/* ----------------------------------------------------------
   SEZIONE 4 — AUTORE
---------------------------------------------------------- */

.sezione4 {
  text-align: center;
  background: rgba(255,255,255,0.20);
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}

.s4-text {
  max-width: 720px;
  margin: 0 auto;
  font-size: 16px;
  line-height: 1.7;
}

/* ----------------------------------------------------------
   SEZIONE 5 — A CHI È CONSIGLIATO
---------------------------------------------------------- */

.sezione5 {
  background: rgba(255,255,255,0.15);
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}

.s5-lista {
  list-style: disc;
}

/* ----------------------------------------------------------
   SEZIONE 6 — INVITO AL PIACERE
---------------------------------------------------------- */

.sezione6 {
  text-align: center;
  background: rgba(255,255,255,0.15);
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.10);
}

.s6-text {
  max-width: 680px;
  margin: 0 auto 18px auto;
  font-size: 17px;
  line-height: 1.7;
}

/* ----------------------------------------------------------
   SEZIONE 7 — FAQ (solo dentro le pagine manuali)
---------------------------------------------------------- */

.sezione7 {
  background: rgba(255,255,255,0.10);
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.10);
}

/* Wrapper FAQ */
.sezione7 .faq {
  margin-top: 10px;
}

/* Card FAQ isolata, NON interferisce con altre pagine */
.sezione7 .faq-item {
  margin-bottom: 18px;
  padding: 14px 16px;
  border-radius: 10px;
  background: #f2edff;
  border: 1px solid #d9c6ff;
  box-shadow: 0 3px 10px rgba(0,0,0,0.05);
}

.sezione7 .faq-item h3 {
  margin: 0 0 6px 0;
  font-size: 17px;
  color: var(--gp-violet, #3a1c57);
}

.sezione7 .faq-item p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
}

.sezione7 .faq-item:hover {
  background: #e9ddff;
  transition: background .25s ease;
}

/* ----------------------------------------------------------
   SEZIONE 8 — I CONSIGLI DEL MESE
   (usa #consigli-mese + .manuali-speciali)
---------------------------------------------------------- */

.sezione8 {
  background: transparent;
}

/* Titolo sezione consigli */
.consigli-titolo {
  text-align: center;
  margin-bottom: 20px;
}

/* Griglia consigli (3/2/1 colonne) */
#consigli-mese.manuali-speciali {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 30px;
  max-width: 1000px;
  margin: 10px auto 30px;
  padding: 0 10px;
}

/* Ogni item */
#consigli-mese .special-item {
  text-align: center;
}

/* Immagini dei manuali consigliati */
#consigli-mese .special-item img {
  width: 100%;
  max-width: 260px;
  margin: 0 auto;
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.18);
  display: block;
}

/* Titoli premium per i consigli */
#consigli-mese .special-item h3 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 10px;
  padding: 8px 14px;
  position: relative;
  display: inline-block;
  background: #f7f4ff;
  border: 2px solid #d9c6ff;
  border-radius: 8px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.10);
  text-shadow: 0 0 4px rgba(255,255,255,0.35);
}

/* Sottolineatura animata sotto il titolo */
#consigli-mese .special-item h3::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -4px;
  width: 0%;
  height: 2px;
  background: var(--gp-violet, #3a1c57);
  transition: width .25s ease, left .25s ease;
}

#consigli-mese .special-item:hover h3::after {
  width: 100%;
  left: 0;
}

/* Link testo titolo dentro le card consigli (se aggiungi span) */
#consigli-mese .special-item span {
  display: block;
  margin-top: 8px;
  font-size: 15px;
}

/* ----------------------------------------------------------
   MEDIA QUERY – RIFINITURE MOBILE
---------------------------------------------------------- */

@media (max-width: 600px) {

  .sezione2,
  .sezione3,
  .sezione4,
  .sezione5,
  .sezione6,
  .sezione7 {
    padding: 30px 16px;
  }

  .s6-text {
    font-size: 16px;
  }

}

/* ===========================================================
   OVERRIDE: s1-serie come badge a tema
   =========================================================== */

/* Rimuovo il colore del tema applicato dal template */
.fondamenti .s1-serie,
.tecniche .s1-serie,
.potere .s1-serie,
.fantasie .s1-serie,
.orizzonti .s1-serie {
  color: #ffffff !important; /* come H1 */
  background-color: transparent !important; /* tolgo eventuali residui */
}

/* Creo il riquadro a tema */
.s1-serie {
  display: inline-block;
  padding: 6px 12px;
  font-size: 16px;
  border-radius: 8px;
  font-weight: 600;
  color: #ffffff; /* sempre bianco */
}

/* Singoli colori per tema */
.fondamenti .s1-serie {
  background-color: var(--tema-fondamenti) !important;
}

.tecniche .s1-serie {
  background-color: var(--tema-tecniche) !important;
}

.potere .s1-serie {
  background-color: var(--tema-potere) !important;
}

.fantasie .s1-serie {
  background-color: var(--tema-fantasie) !important;
}

.orizzonti .s1-serie {
  background-color: var(--tema-orizzonti) !important;
}