/* Custom styles for rajbandi.dev */

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Background grid pattern */
.bg-grid-pattern {
  background-image:
    linear-gradient(rgba(255, 153, 51, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 153, 51, 0.03) 1px, transparent 1px);
  background-size: 50px 50px;
}

/* Skill tags */
.skill-tag {
  @apply text-xs text-zinc-400 bg-zinc-800 px-2.5 py-1 rounded font-mono transition-colors;
}

.skill-card:hover .skill-tag {
  @apply text-saffron-400 bg-saffron-400/10;
}

/* Scrollbar styling */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #09090b;
}

::-webkit-scrollbar-thumb {
  background: #27272a;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #3f3f46;
}

/* Selection color */
::selection {
  background: rgba(255, 153, 51, 0.3);
  color: #fafafa;
}

/* Light mode overrides */
html:not(.dark) body {
  background: #fafafa;
  color: #3f3f46;
}

html:not(.dark) #navbar {
  background: rgba(250, 250, 250, 0.8);
  border-color: rgba(228, 228, 231, 0.5);
}

html:not(.dark) #mobile-menu {
  background: rgba(250, 250, 250, 0.95);
  border-color: rgba(228, 228, 231, 0.5);
}

html:not(.dark) .bg-zinc-900,
html:not(.dark) .bg-zinc-900\/50 {
  background: #ffffff;
}

html:not(.dark) .border-zinc-800,
html:not(.dark) .border-zinc-800\/50 {
  border-color: #e4e4e7;
}

html:not(.dark) .text-zinc-100 {
  color: #18181b;
}

html:not(.dark) .text-zinc-200 {
  color: #27272a;
}

html:not(.dark) .text-zinc-300 {
  color: #3f3f46;
}

html:not(.dark) .text-zinc-400 {
  color: #71717a;
}

html:not(.dark) .text-zinc-500 {
  color: #a1a1aa;
}

html:not(.dark) .bg-zinc-800 {
  background: #f4f4f5;
}

html:not(.dark) .bg-zinc-950 {
  background: #fafafa;
}

html:not(.dark) .ring-zinc-950 {
  --tw-ring-color: #fafafa;
}

html:not(.dark) .skill-tag {
  background: #f4f4f5;
  color: #71717a;
}

html:not(.dark) .skill-card:hover .skill-tag {
  background: rgba(255, 153, 51, 0.1);
  color: #dd5a0a;
}

html:not(.dark) .text-saffron-400 {
  color: #dd5a0a;
}

html:not(.dark) .bg-saffron-400 {
  background: #ff9933;
}

html:not(.dark) ::-webkit-scrollbar-track {
  background: #fafafa;
}

html:not(.dark) ::-webkit-scrollbar-thumb {
  background: #d4d4d8;
}

/* Blog article prose styles */
.prose h1 { font-size: 2rem; font-weight: 700; margin-bottom: 1rem; color: #fafafa; font-family: 'JetBrains Mono', monospace; }
.prose h2 { font-size: 1.5rem; font-weight: 600; margin-top: 2rem; margin-bottom: 0.75rem; color: #fafafa; font-family: 'JetBrains Mono', monospace; }
.prose h3 { font-size: 1.25rem; font-weight: 600; margin-top: 1.5rem; margin-bottom: 0.5rem; color: #e4e4e7; font-family: 'JetBrains Mono', monospace; }
.prose p { margin-bottom: 1rem; line-height: 1.75; }
.prose a { color: #ff9933; text-decoration: underline; text-underline-offset: 2px; }
.prose a:hover { color: #ffbc4b; }
.prose code { background: #27272a; padding: 0.125rem 0.375rem; border-radius: 0.25rem; font-size: 0.875rem; font-family: 'JetBrains Mono', monospace; }
.prose pre { background: #18181b; border: 1px solid #27272a; border-radius: 0.5rem; padding: 1rem; overflow-x: auto; margin-bottom: 1rem; }
.prose pre code { background: none; padding: 0; }
.prose ul { list-style: disc; padding-left: 1.5rem; margin-bottom: 1rem; }
.prose ol { list-style: decimal; padding-left: 1.5rem; margin-bottom: 1rem; }
.prose li { margin-bottom: 0.25rem; }
.prose blockquote { border-left: 3px solid #ff9933; padding-left: 1rem; color: #a1a1aa; font-style: italic; margin-bottom: 1rem; }
.prose img { border-radius: 0.5rem; margin: 1rem 0; }
.prose hr { border-color: #27272a; margin: 2rem 0; }

html:not(.dark) .prose h1,
html:not(.dark) .prose h2 { color: #18181b; }
html:not(.dark) .prose h3 { color: #27272a; }
html:not(.dark) .prose code { background: #f4f4f5; }
html:not(.dark) .prose pre { background: #f8f8f8; border-color: #e4e4e7; }
html:not(.dark) .prose a { color: #dd5a0a; }
html:not(.dark) .prose blockquote { color: #71717a; }

/* Fade-in animation for scroll */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Blog card hover effect */
.blog-card {
  transition: all 0.3s ease;
}

.blog-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 153, 51, 0.5);
}