/* =========================
   LIGHT A VIRTUAL CANDLE
   V6 UI FIX — STABLE CENTER SYSTEM (CLEAN)
========================= */

/* ROOT */
:root{
  --bg:#f6f1ea;
  --card:rgba(255,255,255,0.78);
  --text:#1e1a16;
  --gold:#b08a4a;
  --shadow:rgba(0,0,0,0.08);
}

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

body{
  font-family:'Source Sans 3', sans-serif;
  background: radial-gradient(circle at top, #ffffff 0%, var(--bg) 60%);
  color:var(--text);
  line-height:1.7;
  transition:0.6s ease;
  text-align:center;
}

/* =========================
   GLOBAL CENTER SYSTEM
========================= */

.container{
  max-width:900px;
  margin:0 auto;
  padding:20px;
  display:flex;
  flex-direction:column;
  align-items:center;
}

/* CARD */
.card{
  width:100%;
  max-width:850px;
  background:var(--card);
  border-radius:18px;
  padding:25px;
  margin:18px auto;
  box-shadow:0 10px 30px var(--shadow);

  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;

  transition:0.3s ease;
}

.card:hover{
  transform:translateY(-3px);
  box-shadow:0 18px 40px rgba(0,0,0,0.10);
}

/* TEXT STABILITY (IMPORTANT FIX) */
.card p,
.card h1,
.card h2,
.card h3{
  max-width:720px;
  margin:10px auto;
  text-align:center;
  word-break:break-word;
}

/* =========================
   TITLES
========================= */

h1,h2,h3{
  font-family:'Cormorant Garamond', serif;
  font-weight:600;
  letter-spacing:0.5px;
}

/* COMMUNITY TITLE FIX (IMPORTANT VISIBILITY FIX) */
.community-title{
  margin-top:18px;
  font-family:'EB Garamond', serif;
  font-size:1.6rem;
  font-weight:600;
  text-align:center;
  letter-spacing:1px;
  color:var(--text); /* FIX: era quasi invisibile su sfondi chiari */
  text-transform:uppercase;
  line-height:1.5;
}

.community-title .cross{
  display:inline-block;
  margin:0 8px;
  color:var(--gold);
  font-size:1.2em;
  vertical-align:middle;
  text-shadow:0 0 10px rgba(255,200,120,0.5);
}

/* =========================
   HERO
========================= */

.hero{
  text-align:center;
  padding:40px 20px;
}

.hero h1{
  font-size:3rem;
  margin-bottom:10px;
}

.hero p{
  max-width:750px;
  margin:auto;
}

/* =========================
   CANDLE
========================= */

.main-candle{
  width:70px;
  height:160px;
  margin:25px auto;
  position:relative;
}

.wax{
  position:absolute;
  bottom:0;
  left:50%;
  transform:translateX(-50%);
  width:22px;
  height:110px;
  border-radius:12px;
  background:linear-gradient(to bottom,#f5ead7,#d6c2a2);
}

.flame{
  position:absolute;
  top:0;
  left:50%;
  transform:translateX(-50%);
  width:18px;
  height:28px;
  border-radius:50%;
  background:radial-gradient(circle, #fff7c2, #ffb300 60%, #ff6a00);
  animation:breathe 3.8s ease-in-out infinite;
}

@keyframes breathe{
  0%,100%{transform:translateX(-50%) scale(0.95);opacity:0.8;}
  50%{transform:translateX(-50%) scale(1.15);opacity:1;}
}

/* GLOW */
.main-candle::after{
  content:"";
  position:absolute;
  top:-50px;
  left:50%;
  transform:translateX(-50%);
  width:120px;
  height:120px;
  background:radial-gradient(circle, rgba(255,200,120,0.25), transparent 70%);
  animation:glowPulse 3s infinite ease-in-out;
}

@keyframes glowPulse{
  0%,100%{opacity:0.4; transform:translateX(-50%) scale(1);}
  50%{opacity:0.9; transform:translateX(-50%) scale(1.2);}
}

/* =========================
   FORM
========================= */

label{
  display:block;
  margin-top:15px;
  font-size:0.9rem;
  opacity:0.8;
  text-align:left;
  width:100%;
  max-width:720px;
}

input,textarea,select{
  width:100%;
  max-width:720px;
  padding:12px;
  border-radius:12px;
  border:1px solid rgba(176,138,74,0.25);
  font-family:'Source Sans 3', sans-serif;
  background:rgba(255,255,255,0.6);
}

textarea{
  min-height:140px;
}

/* =========================
   BUTTONS
========================= */

.primary-btn,
.donation-btn{
  font-family:'Source Sans 3', sans-serif;
  font-size:1rem;
  font-weight:600;
  cursor:pointer;
  transition:0.3s;
}

.primary-btn{
  margin-top:20px;
  width:100%;
  max-width:720px;
  padding:14px;
  border:none;
  border-radius:14px;
  background:linear-gradient(135deg,var(--gold),#8c6a35);
  color:white;
}

.primary-btn:hover{
  transform:translateY(-2px);
}

.donation-btn{
  display:inline-block;
  margin-top:18px;
  padding:14px 18px;
  border-radius:14px;
  background:linear-gradient(135deg,#1a73e8,#0b5ed7);
  color:white;
  text-decoration:none;
}

/* =========================
   SCHEDULE (FIX STABILITY)
========================= */

.schedule{
  list-style:none;
  padding:0;
  margin:20px auto;
  width:100%;
  max-width:520px;

  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
}

.schedule li{
  text-align:center;
  width:100%;
}

/* =========================
   PRAYER WALL
========================= */

#wall{
  display:flex;
  flex-direction:column;
  gap:14px;
  width:100%;
  max-width:720px;
}

.prayer-item{
  display:flex;
  gap:12px;
  padding:16px;
  border-radius:14px;
  background:rgba(255,255,255,0.55);
  border:1px solid rgba(176,138,74,0.15);
  animation:fadeIn 0.6s ease;
}

.prayer-text{
  font-family:'Source Sans 3', sans-serif;
  text-align:left;
}

.candle-icon{
  font-size:20px;
}

/* =========================
   FOOTER
========================= */

.footer{
  text-align:center;
  padding:40px 20px;
}

.footer-links{
  display:flex;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
}

/* =========================
   UTILITIES
========================= */

.hidden{display:none;}
.show{display:block;}

/* TOAST */
.soft-toast{
  position:fixed;
  top:20px;
  left:50%;
  transform:translateX(-50%);
  background:rgba(0,0,0,0.85);
  color:white;
  padding:10px 16px;
  border-radius:12px;
  animation:fadeToast 3s ease forwards;
}

@keyframes fadeToast{
  0%{opacity:0; transform:translate(-50%,-10px);}
  10%{opacity:1;}
  100%{opacity:0; transform:translate(-50%,-20px);}
}

/* =========================
   THEMES
========================= */

body.advent{background:#0b1a2e;color:#dbe7ff;}
body.christmas{background:#1a0000;color:#ffe6c7;}
body.lent{background:#1b1b1b;color:#e0d6c8;}
body.easter{background:#ffffff;color:#1e1a16;}
body.ordinary{background:#f6f1ea;}


/* =========================
   🌟 FIX SFONDO ANIMATO (ROBUSTO)
========================= */

/* BODY BASE (IMPORTANTE: UNA SOLA REGOLA PULITA) */
body{
  position: relative;
  background: radial-gradient(circle at top, #ffffff 0%, #f6f1ea 60%);
  overflow-x: hidden;
}

/* 🌟 SFONDO ANIMATO SPIRITUALE */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -1; /* fondamentale: dietro tutto */
  pointer-events: none;

  background:
    radial-gradient(circle at 20% 30%, rgba(255, 220, 160, 0.35), transparent 45%),
    radial-gradient(circle at 80% 70%, rgba(255, 200, 120, 0.22), transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.12), transparent 60%);

  animation: spiritualGlow 12s ease-in-out infinite;
}

/* 🔥 ANIMAZIONE LUCE */
@keyframes spiritualGlow{
  0%{
    transform: scale(1);
    opacity: 0.55;
  }
  50%{
    transform: scale(1.06);
    opacity: 1;
  }
  100%{
    transform: scale(1);
    opacity: 0.55;
  }
}

/* 🧱 ISOLAMENTO CONTENUTI (IMPORTANTISSIMO) */
.container,
.card,
.hero,
footer,
.lang-switch{
  position: relative;
  z-index: 1;
}

/* 🧯 SICUREZZA EXTRA (evita overlay invisibili) */
body::after{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -2;
  background: transparent;
}

/* =========================
   📱 MOBILE OPTIMIZATION
========================= */

@media (max-width: 768px){

  body{
    font-size: 15px;
    line-height: 1.6;
  }

  /* HERO */
  .hero h1{
    font-size: 2rem;
  }

  .hero p{
    font-size: 0.95rem;
    padding: 0 10px;
  }

  /* COMMUNITY TITLE */
  .community-title{
    font-size: 1.2rem;
    letter-spacing: 0.5px;
  }

  /* CANDLE */
  .main-candle{
    transform: scale(0.85);
    margin: 15px auto;
  }

  /* CARDS */
  .card{
    padding: 18px;
    margin: 12px auto;
    border-radius: 14px;
  }

  .card p,
  .card h1,
  .card h2,
  .card h3{
    font-size: 0.95rem;
    max-width: 100%;
  }

  /* FORM */
  input, textarea, select{
    font-size: 16px; /* evita zoom automatico iPhone */
  }

  textarea{
    min-height: 120px;
  }

  label{
    font-size: 0.85rem;
  }

  .primary-btn,
  .donation-btn{
    font-size: 0.95rem;
    padding: 12px;
  }

  /* SCHEDULE (ORARI) */
  .schedule{
    max-width: 100%;
    font-size: 0.9rem;
  }

  .schedule li{
    padding: 6px 0;
  }

  /* BLOG TABELLE */
  table{
    font-size: 0.9rem;
  }

  td{
    padding: 10px 6px;
  }

  /* FOOTER */
  .footer{
    padding: 25px 15px;
    font-size: 0.85rem;
  }

  .footer-links{
    flex-direction: column;
    gap: 8px;
  }
}

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">