@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .nav-link { @apply font-medium text-purple-dark transition-colors hover:text-purple-primary focus:outline-none focus:ring-2 focus:ring-purple-primary focus:ring-offset-4; }
  .mobile-nav-link { @apply block rounded-lg px-3 py-2 font-medium text-purple-dark hover:bg-purple-bg; }
  .footer-link { @apply text-sm text-purple-light transition-colors hover:text-white focus:outline-none focus:ring-2 focus:ring-white; }
  .skip-link { @apply fixed left-4 top-4 z-[100] -translate-y-24 rounded-lg bg-white px-4 py-3 font-semibold text-purple-dark shadow-xl transition-transform focus:translate-y-0; }
}

.hero-orb { position: absolute; border-radius: 9999px; filter: blur(3px); opacity: .22; }
.hero-orb-one { width: 22rem; height: 22rem; left: -8rem; top: 15%; background: #8b6b9e; }
.hero-orb-two { width: 28rem; height: 28rem; right: -12rem; bottom: 5%; background: #604074; }
.hero-orb-one { animation: hero-drift 10s ease-in-out infinite alternate; }
.hero-orb-two { animation: hero-drift 13s ease-in-out infinite alternate-reverse; }
.hero-grid { position: absolute; inset: 0; opacity: .2; background-image: radial-gradient(#604074 1px, transparent 1px); background-size: 30px 30px; mask-image: linear-gradient(to bottom, transparent, black 25%, black 75%, transparent); animation: grid-drift 24s linear infinite; }
@keyframes hero-drift { to { transform: translate3d(3rem, -2rem, 0) scale(1.08); } }
@keyframes grid-drift { to { background-position: 30px 30px; } }

.blog-content { font-family: 'Anek Tamil', system-ui, sans-serif; }
.article-body { font-size: 1.125rem; line-height: 2; text-align: justify; overflow-wrap: anywhere; }
.article-body p { margin: 1.25rem 0; }
.article-body h2 { margin: 2.5rem 0 1rem; font-size: 1.9rem; font-weight: 700; color: #4a2f5a; }
.article-body h3 { margin: 2rem 0 .75rem; font-size: 1.5rem; font-weight: 700; color: #4a2f5a; }
.article-body ul { margin: 1rem 0; list-style: disc; padding-left: 1.75rem; }
.article-body ol { margin: 1rem 0; list-style: decimal; padding-left: 1.75rem; }
.article-body blockquote { margin: 1.5rem 0; border-left: 4px solid #604074; background: #f5f0f7; padding: 1rem 1.25rem; }
.article-body img { margin: 2rem auto; max-width: 100%; height: auto; border-radius: 1rem; }
.article-body a { color: #604074; text-decoration: underline; }
.rich-editor:focus { outline: 2px solid #604074; outline-offset: 2px; }
.rich-editor:empty::before { content: attr(data-placeholder); color: #6b7280; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}