/* Chillmas theme styles */
@import url('https://fonts.googleapis.com/css2?family=Mulish:wght@300;400;600;800&family=Mountains+of+Christmas:wght@400;700&display=swap');

:root{
  --red:#b91c1c;
  --green:#047857;
  --cream:#fff7ed;
  --glass: rgba(255,255,255,0.6);
}

@keyframes gradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.animate-gradient {
  background-size: 200% auto;
  animation: gradient 4s linear infinite;
}body{
	font-family: 'Mulish', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
	background: radial-gradient(circle at 10% 10%, #fff7f7 0%, #ffecec 30%, #fff 100%);
	color:#111827;
}

h1, h2, h3{
	font-family: 'Mountains of Christmas', cursive;
}

.rounded-2xl{border-radius:1rem}

/* Global smooth scrolling for anchor links */
html {
  scroll-behavior: smooth;
}

/* Global styles */
.snowflake{
	position:fixed;
	top:-10px;
	z-index:9999;
	pointer-events:none;
	color: #fff;
	opacity:0.9;
	font-size:14px;
	animation: fall linear infinite;
}
@keyframes fall{
	to{transform: translateY(110vh) rotate(360deg);}
}

/* Meme gallery */
.meme-img{height:160px;object-fit:cover;border:4px solid rgba(255,255,255,0.6);box-shadow:0 6px 20px rgba(0,0,0,0.08)}

/* Modal */
.meme-modal{position:fixed;inset:0;background:rgba(0,0,0,0.6);display:flex;align-items:center;justify-content:center;z-index:2000}
.meme-modal .content{background:var(--cream);padding:1rem;border-radius:12px;max-width:90%;max-height:90%;display:flex;align-items:center;justify-content:center}
.meme-modal img{max-width:100%;max-height:80vh;border-radius:8px}
.meme-modal .close{position:absolute;top:20px;right:20px;background:var(--red);color:white;border-radius:999px;padding:6px 9px;cursor:pointer}

/* Navbar & footer simple overrides */
custom-navbar{display:block}
custom-footer{display:block}

/* Responsive tweaks */
@media (min-width:768px){
	.meme-img{height:200px}
}

.btn-ghost{background:transparent;border:2px solid rgba(255,255,255,0.15);padding:.6rem 1rem;border-radius:999px}

.stat-card{transition:transform .18s ease, box-shadow .18s ease}
.stat-card:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(0,0,0,0.08)}

.twinkle{filter:drop-shadow(0 0 8px rgba(255,255,255,0.6))}

/* utility */
.text-red-600{color:var(--red)}

/* Big Memes gallery */
#big-memes-grid img{width:100%;height:160px;object-fit:cover;border-radius:12px;border:4px solid rgba(255,255,255,0.6)}

/* Advent calendar */
#advent-grid{margin-top:8px}
.advent-tile{background:linear-gradient(180deg,#fff,#ffecec);border-radius:8px;padding:10px;display:flex;align-items:center;justify-content:center;cursor:pointer;border:2px solid rgba(0,0,0,0.05);box-shadow:0 6px 18px rgba(0,0,0,0.06)}
.advent-tile.locked{opacity:0.45;cursor:not-allowed}
.advent-tile.open{background:linear-gradient(180deg,#fffbe6,#fff);transform:scale(1.03)}
.advent-tile span{font-weight:800;font-size:1rem}
#advent-display img{max-width:90%;max-height:60vh;border-radius:12px;display:block;margin:0 auto}

/* Countdown banner */
.countdown-banner{background:linear-gradient(90deg,var(--red),var(--green));color:white;padding:12px;border-radius:12px;display:flex;gap:12px;align-items:center;justify-content:center;font-weight:700}

#big-countdown{max-width:900px;margin:0 auto;padding:18px;border-radius:14px}
#big-countdown .time{font-size:2.4rem;font-weight:900}

#months .advent-tile{height:80px;display:flex;align-items:center;justify-content:center}
#months img{max-width:100%;border-radius:8px}
#months #oct-grid .advent-tile{height:64px;font-weight:700}
#months #nov-grid .advent-tile{height:72px;font-weight:800}
#months #dec-grid .advent-tile{height:88px;font-weight:900}

.euphoric-1{background:linear-gradient(180deg,#fff,#fff7f0)}
.euphoric-2{background:linear-gradient(180deg,#fff7f0,#fff2e6);box-shadow:0 10px 30px rgba(255,140,0,0.06)}
.euphoric-3{background:linear-gradient(180deg,#fff2e6,#fff9f0);box-shadow:0 18px 60px rgba(255,94,0,0.08);transform:scale(1.02)}

/* make dec grid look like pyramid: center items visually by larger tiles */
#dec-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
#oct-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
#nov-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}

/* Carousel styles */
.carousel-container{position:relative}
.carousel{display:flex;gap:12px;padding:12px}
.carousel img{width:300px;height:200px;object-fit:cover;border-radius:12px;flex:0 0 auto;cursor:pointer}
.carousel-btn{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,0.5);color:white;border:none;padding:8px 10px;border-radius:8px;cursor:pointer;font-size:1.6rem}
.carousel-btn.left-2{left:8px}
.carousel-btn.right-2{right:8px}

/* Focus outlines for accessibility */
.carousel-btn:focus, .lightbox .close:focus, .lightbox .nav:focus, #carousel:focus, a:focus, button:focus {
	outline: 3px solid rgba(255,255,255,0.9);
	outline-offset: 2px;
	box-shadow: 0 6px 20px rgba(0,0,0,0.12);
}

/* Make keyboard focus visible on advent tiles */
.advent-tile:focus{
	outline: 3px dashed rgba(185,28,28,0.9);
	outline-offset: 4px;
}

/* Lightbox */
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,0.85);display:flex;align-items:center;justify-content:center;z-index:3000}
.lightbox .inner{position:relative;max-width:95%;max-height:95%;display:flex;align-items:center;justify-content:center}
.lightbox img{max-width:100%;max-height:100%;border-radius:8px}
.lightbox .close{position:absolute;top:12px;right:12px;background:rgba(255,255,255,0.08);color:white;padding:6px 10px;border-radius:6px;cursor:pointer}
.lightbox .nav{position:absolute;top:50%;transform:translateY(-50%);color:white;font-size:2rem;cursor:pointer;padding:8px}
.lightbox .nav.prev{left:12px}
.lightbox .nav.next{right:12px}

/* full-res gallery thumbnails */
#big-memes-grid img{height:200px;object-fit:cover}