/* Kudly CMS — global styles supplement to Tailwind CDN */

/* ── Color CSS variables for dynamic blog category colors ── */
:root {
  --c-indigo:        #6366f1; --c-indigo-light:   #ede9fe;
  --c-violet:        #8b5cf6; --c-violet-light:   #f3e8ff;
  --c-cyan:          #06b6d4; --c-cyan-light:     #ecfeff;
  --c-emerald:       #10b981; --c-emerald-light:  #d1fae5;
  --c-amber:         #f59e0b; --c-amber-light:    #fef3c7;
  --c-rose:          #f43f5e; --c-rose-light:     #ffe4e6;
  --c-blue:          #3b82f6; --c-blue-light:     #dbeafe;
  --c-orange:        #f97316; --c-orange-light:   #ffedd5;
  --c-pink:          #ec4899; --c-pink-light:     #fce7f3;
  --c-teal:          #14b8a6; --c-teal-light:     #ccfbf1;
}

/* ── Float animation for hero blobs ── */
@keyframes float {
  0%, 100% { transform: translateY(0) scale(1); }
  50%       { transform: translateY(-18px) scale(1.03); }
}

/* ── Gradient text ── */
.gradient-text {
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(135deg, #6366f1 0%, #a855f7 50%, #ec4899 100%);
  padding-bottom: 0.2em;
}

/* ── Scroll-reveal ── */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s cubic-bezier(.16,1,.3,1),
              transform 0.65s cubic-bezier(.16,1,.3,1);
}
[data-reveal].revealed            { opacity: 1; transform: none; }
[data-reveal][data-reveal-delay="100"] { transition-delay: .10s; }
[data-reveal][data-reveal-delay="200"] { transition-delay: .20s; }
[data-reveal][data-reveal-delay="300"] { transition-delay: .30s; }
[data-reveal][data-reveal-delay="400"] { transition-delay: .40s; }
[data-reveal][data-reveal-delay="500"] { transition-delay: .50s; }

/* ── Glass card ── */
.glass {
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(255,255,255,.6);
}

/* ── Wave divider ── */
.wave-bottom {
  position: absolute; bottom: -1px; left: 0; right: 0;
  overflow: hidden; line-height: 0;
}
.wave-bottom svg { display: block; width: calc(100% + 1.3px); height: 40px; }

/* ── Richtext ── */
.richtext h2 {
  font-size: 1.5rem; font-weight: 700;
  margin: 2rem 0 .75rem; color: #1e1b4b;
  padding-left: .875rem;
  border-left: 3px solid #6366f1;
}
.richtext h3 {
  font-size: 1.2rem; font-weight: 600;
  margin: 1.5rem 0 .5rem; color: #312e81;
}
.richtext p, .richtext li {
  line-height: 1.85; margin-bottom: .75rem; color: #374151;
}
.richtext ol { list-style: decimal; padding-left: 1.5rem; }
.richtext ul { list-style: disc;    padding-left: 1.5rem; }
.richtext a  { color: #4f46e5; text-decoration: underline; text-underline-offset: 3px; }
.richtext strong { color: #111827; font-weight: 700; }
.richtext hr { border: none; border-top: 1px solid #e5e7eb; margin: 2rem 0; }
.richtext blockquote {
  border-left: 4px solid #a855f7; padding: .75rem 1.25rem;
  background: #faf5ff; border-radius: 0 .5rem .5rem 0;
  margin: 1.5rem 0; color: #4c1d95; font-style: italic;
}
.richtext code {
  font-family: 'Fira Code', monospace; font-size: .875em;
  background: #f1f5f9; padding: .15em .4em;
  border-radius: .25rem; color: #4f46e5;
}

/* ── Blog body extras ── */
.blog-body .richtext p  { font-size: 1.0625rem; line-height: 1.9; }
.blog-body .richtext h2 { font-size: 1.875rem; margin-top: 2.5rem; }
.blog-body .richtext h3 { font-size: 1.4rem;   margin-top: 2rem; }
.blog-body .richtext pre {
  padding: 1.25rem; background: #0f172a; color: #e2e8f0;
  border-radius: .75rem; overflow-x: auto; margin: 1.5rem 0;
}
.blog-body .richtext pre code { background: none; color: inherit; padding: 0; }

/* ── Line-clamp utility (for post cards) ── */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Lucide icon sizing helper ── */
[data-lucide] { display: inline-block; vertical-align: middle; }

/* ── Smooth font rendering ── */
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }