/* Custom CSS for AkashBR Website */

/* Base styles */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}

/* Modular text styles based on the specified pattern */
.content-text {
  @apply mb-8 md:mb-10 w-full max-w-[40rem] text-zinc-700 text-lg md:text-xl leading-8 md:leading-9;
}

.content-text a {
  @apply text-zinc-800 cursor-pointer font-bold underline hover:text-zinc-900 transition-colors;
}

/* Navigation styles */
.nav-link {
  @apply text-sm font-medium text-zinc-500 hover:text-zinc-900 transition-colors;
}

.nav-brand {
  @apply text-xl font-semibold text-zinc-900 hover:text-zinc-700 transition-colors;
}

/* Button styles */
.btn-primary {
  @apply bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-lg transition-colors;
}

.btn-secondary {
  @apply bg-zinc-100 hover:bg-zinc-200 text-zinc-900 font-medium py-2 px-4 rounded-lg transition-colors;
}

/* Card styles */
.card {
  @apply bg-zinc-50 rounded-lg p-6 hover:bg-zinc-100 transition-colors;
}

.card-title {
  @apply text-sm font-semibold text-zinc-900 mb-3;
}

.card-text {
  @apply text-zinc-700 mb-4;
}

.card-link {
  @apply text-zinc-800 hover:text-zinc-900 font-medium transition-colors underline decoration-zinc-200 hover:decoration-zinc-600;
}

/* Hero section styles */
.hero-title {
  @apply text-5xl md:text-6xl lg:text-7xl font-bold text-zinc-900 leading-tight mb-12 md:mb-16;
}

.hero-highlight {
  @apply text-blue-600;
}

.hero-subtitle {
  @apply text-lg text-zinc-600 leading-7 mb-8;
}

/* Section styles */
.section-title {
  @apply text-2xl md:text-3xl font-bold text-zinc-900 mb-12 md:mb-16;
}

.section-divider {
  @apply border-t border-zinc-200 pt-16 md:pt-20;
}

/* Footer styles */
.footer-text {
  @apply text-zinc-600 text-sm;
}

.social-link {
  @apply text-zinc-600 hover:text-zinc-900 transition-colors;
}

/* Layout utilities */
.container {
  @apply max-w-4xl mx-auto px-8 md:px-12 lg:px-16;
}

.content-wrapper {
  @apply max-w-3xl;
}

/* Mobile menu button */
.mobile-menu-btn {
  @apply text-zinc-600 hover:text-zinc-900 focus:outline-none transition-colors md:hidden;
}

/* Responsive grid */
.feature-grid {
  @apply grid md:grid-cols-2 gap-8;
}

/* Smooth transitions */
.smooth-transition {
  @apply transition-colors duration-300;
}

/* Typography improvements */
.prose {
  @apply text-zinc-700;
}

.prose h1 {
  @apply text-zinc-900 font-bold;
}

.prose h2 {
  @apply text-2xl md:text-3xl font-bold text-zinc-900 mb-4 mt-8;
}

.prose p {
  @apply text-lg leading-relaxed text-zinc-700;
}

.prose a {
  @apply text-blue-600 hover:text-blue-700 font-semibold underline transition-colors duration-200;
}

/* Zigzag divider */
.zigzag-divider {
  position: relative;
  height: 20px;
  background: linear-gradient(45deg, transparent 33.333%, #d1d5db 33.333%, #d1d5db 66.667%, transparent 66.667%),
              linear-gradient(-45deg, transparent 33.333%, #d1d5db 33.333%, #d1d5db 66.667%, transparent 66.667%);
  background-size: 20px 40px;
  background-position: 0 0, 0 20px;
  margin: 2rem 0;
}

.zigzag-divider::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 20px;
  background: linear-gradient(45deg, transparent 33.333%, #d1d5db 33.333%, #d1d5db 66.667%, transparent 66.667%),
              linear-gradient(-45deg, transparent 33.333%, #d1d5db 33.333%, #d1d5db 66.667%, transparent 66.667%);
  background-size: 20px 40px;
  background-position: 0 0, 0 20px;
}

/* Wave hand animation */
.wave-hand {
  display: inline-block;
  transform-origin: 70% 70%; /* pivot around the palm */
  animation: wave-hand-wiggle 2.5s ease-in-out infinite;
}

@keyframes wave-hand-wiggle {
  0% { transform: rotate(0deg); }
  10% { transform: rotate(14deg); }
  20% { transform: rotate(-8deg); }
  30% { transform: rotate(14deg); }
  40% { transform: rotate(-4deg); }
  50% { transform: rotate(10deg); }
  60% { transform: rotate(0deg); }
  100% { transform: rotate(0deg); }
}

@media (prefers-reduced-motion: reduce) {
  .wave-hand { animation: none; }
  html.allow-motion .wave-hand { animation: wave-hand-wiggle 2.5s ease-in-out infinite; }
}