/* ============ THEME ============ */
:root{
  --primary-color:#ffffff; --accent-color:#333333;
  --background-color:#0b0b0f; --surface-color:#111318;
  --text-color:#ffffff; --text-color-secondary:#bbbbbb;
  --box-shadow:0 8px 30px rgba(0,0,0,.25); --shadow:rgba(0,0,0,.45);
  --link:#7bd4ff; --card-radius:12px;

  /* Gradiente scuro adattivo, a tutta viewport */
  --page-gradient: radial-gradient(120% 140% at 50% 20%, #1a1530 0%, #0b0b0f 60%, #08080d 100%);

  /* Card (dark) */
  --card-bg:#000; --card-fg:#fff;

  /* Palette / bordi progetto */
  --tickets-accent:#ffd24d;
  --liltalks-border:#4a90e2; --cinelilo-border:#d81313; --autog-border:#9c5bff;
  --liloscambio-base:#ba454f; --liloscambio-hover:#8b0014;
}

/* Tema chiaro */
[data-theme="light"]{
  --primary-color:#101010; --accent-color:#e9e9e9;
  --background-color:#f4f7fb; --surface-color:#ffffff;
  --text-color:#121212; --text-color-secondary:#555;
  --box-shadow:0 8px 30px rgba(0,0,0,.10); --shadow:rgba(0,0,0,.12);
  --link:#0066cc;

  --page-gradient: radial-gradient(120% 140% at 50% 20%, #ffffff 0%, #f5f8ff 45%, #e7efff 100%);
  --card-bg:#ffffff; --card-fg:#111111;
}

/* Variabili per animazioni */
@property --angle { syntax:"<angle>"; inherits:false; initial-value:0deg; }

*{box-sizing:border-box}
html,body{
  margin:0; padding:0; font-family:'Poppins',sans-serif; line-height:1.6;
  min-height:100%;
  background:var(--page-gradient);
  background-attachment:fixed; /* copre sempre tutta la viewport */
  color:var(--text-color); overflow-x:hidden;
}

/* ============ HEADER ============ */
.header{
  position:fixed; inset:0 0 auto 0; height:64px;
  display:flex; align-items:center; justify-content:space-between;
  background:rgba(17,19,24,.85); box-shadow:var(--box-shadow);
  backdrop-filter:blur(6px); padding:0 .75rem; z-index:1000;
}
[data-theme="light"] .header{ background:rgba(255,255,255,.85); }
.brand a{ text-decoration:none; color:var(--text-color); font-weight:600; font-size:clamp(1rem,2.4vw,1.1rem); }
.iconbtn{ all:unset; cursor:pointer; padding:.55rem .7rem; border-radius:.8rem; }
.iconbtn:hover{ background:rgba(255,255,255,.06); }
[data-theme="light"] .iconbtn:hover{ background:rgba(0,0,0,.06); }
.right{ display:flex; align-items:center; gap:.25rem; }

/* ============ SIDEBAR (effetto bubble) ============ */
.sidebar{
  position:fixed;
  top:0; left:0;
  height:100dvh; width:min(290px,85vw);
  background:rgba(17,19,24,.9);
  backdrop-filter:blur(10px);
  border-right:2px solid rgba(255,255,255,.08);
  border-radius:0 18px 18px 0;
  box-shadow:
    0 8px 25px rgba(0,0,0,.35),
    inset 0 0 15px rgba(255,255,255,.04);
  transform:translateX(-100%);
  transition:transform .28s ease, box-shadow .3s ease, border-color .3s ease, opacity .25s ease;
  opacity:0;
  z-index:1100;
  display:flex; flex-direction:column; padding:16px;
}
[data-theme="light"] .sidebar{
  background:rgba(255,255,255,.88);
  border-right:2px solid rgba(0,0,0,.08);
  box-shadow:
    0 6px 22px rgba(0,0,0,.12),
    inset 0 0 10px rgba(255,255,255,.3);
}
.sidebar.open{
  transform:translateX(0);
  opacity:1;
  box-shadow:
    0 10px 28px rgba(0,0,0,.45),
    inset 0 0 18px rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.15);
}
.side-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:6px 4px 10px 4px;
}
.side-title a{
  color:var(--text-color); text-decoration:none; font-weight:600;
}
.side-links{
  display:flex; flex-direction:column; gap:.6rem; padding:10px 4px;
}
.side-links a{
  text-decoration:none;
  color:var(--text-color);
  padding:.75rem 1rem;
  border-radius:1rem;
  border:1.5px solid rgba(255,255,255,.08);
  background:color-mix(in oklab, var(--surface-color) 90%, transparent);
  box-shadow:
    inset 0 0 8px rgba(255,255,255,.03),
    0 2px 8px rgba(0,0,0,.25);
  transition:all .25s ease;
}
.side-links a:hover{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.18);
  transform:translateY(-1px);
  box-shadow:
    inset 0 0 12px rgba(255,255,255,.05),
    0 3px 12px rgba(0,0,0,.3);
}
[data-theme="light"] .side-links a{
  border:1.5px solid rgba(0,0,0,.06);
  background:rgba(255,255,255,.75);
  box-shadow:
    inset 0 0 8px rgba(0,0,0,.03),
    0 2px 8px rgba(0,0,0,.1);
}
[data-theme="light"] .side-links a:hover{
  background:rgba(255,255,255,.95);
  border-color:rgba(0,0,0,.1);
  transform:translateY(-1px);
  box-shadow:
    inset 0 0 12px rgba(0,0,0,.05),
    0 4px 10px rgba(0,0,0,.12);
}

/* ============ LAYOUT BASE ============ */
.main-content{ padding-top:80px; }
.hero{ display:grid; place-items:center; margin:28px 0 6px; }
.hero-logo{
  background-image:url(/img/logo-comitatolilo.png);
  width:220px; height:220px; border-radius:50%; background-size:cover; background-position:center;
  box-shadow:0 0 200px var(--shadow);
}
.main-title{ text-align:center; font-size:clamp(2rem,5vw,4rem); font-weight:700; margin:1.2rem 0 2rem; color:var(--primary-color); }

.content-container{
  max-width:980px; margin:0 auto; background:rgba(17,19,24,.75);
  backdrop-filter:blur(8px); border-radius:var(--card-radius); overflow:hidden;
  box-shadow:0 8px 24px rgba(0,0,0,.25);
}
[data-theme="light"] .content-container{ background:rgba(255,255,255,.7); box-shadow:0 8px 20px rgba(0,0,0,.08); }

.button-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; padding:2.2rem; background:transparent; }

/* ============ CARD ============ */
.nav-card{
  position:relative; background:var(--card-bg); border:2px solid transparent; border-radius:var(--card-radius);
  padding:1.4rem; text-align:center; transition:transform .2s ease, background .2s ease, color .2s ease;
  overflow:hidden; color:var(--card-fg); height:240px; display:flex; flex-direction:column; justify-content:center; align-items:center;
  isolation:isolate;
}
.nav-card > *{ position:relative; z-index:1; }
.nav-card h3{ margin:.6rem 0 0; font-weight:700; color:var(--card-fg); }
.nav-card:hover{ transform:translateY(-2px); }

/* Bordi statici progetto */
.nav-liltalks{ border-color:var(--liltalks-border); }
.nav-cinelilo{ border-color:var(--cinelilo-border); }
.nav-autog{ border-color:var(--autog-border); }
.nav-liloscambio{ border-color:var(--liloscambio-base); }

/* Hover fill */
.nav-liltalks:hover{ background:#0a2b4f; color:#fff; }
.nav-cinelilo:hover{ background:#4a0a0a; color:#fff; }
.nav-autog:hover{ background:linear-gradient(135deg,#6c2cff 0%, #4b1fa8 100%); color:#fff; box-shadow:0 10px 28px rgba(76,32,170,.45); }
.nav-liloscambio:hover{ background:var(--liloscambio-hover); color:#fff; }
.nav-card:hover h3, .nav-card:hover p{ color:#fff; }

/* ============ TICKETS: bordo arcobaleno animato ============ */
.nav-tickets{ background:var(--card-bg); border-color:transparent; overflow:visible; }
.nav-tickets::before{
  content:""; position:absolute; inset:-7px; border-radius:calc(var(--card-radius) + 7px);
  background:conic-gradient(from var(--angle),
    #ff004c,#ff7a00,#ffd400,#21d300,#00d0ff,#7a00ff,#ff00a8,#ff004c);
  padding:7px;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  animation:rainbowShift 5s linear infinite; z-index:0;
}
@keyframes rainbowShift{ to{ --angle:360deg; } }
.nav-tickets::after{
  content:""; position:absolute; inset:6px; border-radius:calc(var(--card-radius) - 2px);
  background:transparent; transition:background .25s ease; z-index:0;
}
.nav-tickets:hover::after{
  background:linear-gradient(135deg,#fffbe8 0%,#ffeaa6 18%,#ffd96a 38%,#ffcf3c 55%,#f7b80a 75%,#e0a000 100%);
}
.nav-tickets:hover{ color:#111; }
.nav-tickets:hover h3, .nav-tickets:hover p, .nav-tickets:hover div{ color:#111; }

/* Testo arcobaleno per “Feste” */
.rainbow-text{
  background:conic-gradient(from var(--angle),
    #ff004c,#ff7a00,#ffd400,#21d300,#00d0ff,#7a00ff,#ff00a8,#ff004c);
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
  animation:rainbowShift 5s linear infinite; font-weight:800;
  text-shadow:0 0 .8px rgba(0,0,0,.25);
}

/* ============ SEZIONI TESTO ============ */
.section{
  background:rgba(17,19,24,.75); backdrop-filter:blur(8px);
  border-radius:var(--card-radius); box-shadow:0 8px 24px rgba(0,0,0,.25);
  padding:20px; margin:26px auto; max-width:980px;
}
[data-theme="light"] .section{ background:rgba(255,255,255,.7); box-shadow:0 8px 20px rgba(0,0,0,.08); }
.section h2{ margin:.2rem 0 1rem; font-weight:700; color:var(--primary-color); }
.section p{ margin:.4rem 0; color:var(--text-color); }
.section a{ color:var(--link); text-decoration:none; }
.section a:hover{ text-decoration:underline; }

/* ============ FOOTER ============ */
footer{
  margin:24px auto; max-width:980px; padding:16px 20px; color:var(--text-color-secondary);
  display:flex; flex-wrap:wrap; gap:10px 18px; align-items:center; justify-content:space-between;
  background:rgba(17,19,24,.75); backdrop-filter:blur(6px); border-radius:12px;
}
[data-theme="light"] footer{ background:rgba(255,255,255,.75); }
.footer-links{ display:flex; gap:14px; flex-wrap:wrap; }
.footer-links a{ color:var(--text-color-secondary); text-decoration:none; }
.footer-links a:hover{ text-decoration:underline; }

/* ============ UTILI ============ */
.cardlink, .cardlink:visited, .cardlink:hover, .cardlink:active, .cardlink:focus{ text-decoration:none; color:inherit; display:block; }

/* ============ RESPONSIVE ============ */
@media (max-width:900px){
  .button-grid{ grid-template-columns:1fr; padding:1.2rem; }
  .nav-card{ height:auto; min-height:180px; }
  .hero-logo{ width:180px; height:180px; }
  footer{ padding:16px; }
  .nav-liloscambio{ min-height:200px; padding-block:1.6rem; }
  .nav-liloscambio img{ width:84px; height:84px; object-fit:contain; }
}