@import "tailwindcss";

@layer components {
  .container {
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  @media (width >= 480px) {
    .container {
      max-width: 450px !important;
    }
  }

  @media (width >= 640px) {
    .container {
      max-width: 580px !important;
    }
  }

  @media (width >= 768px) {
    .container {
      max-width: 700px !important;
    }
  }

  @media (width >= 1024px) {
    .container {
      max-width: 900px !important;
    }
  }

  @media (width >= 1280px) {
    .container {
      max-width: 1100px !important;
    }
  }

  @media (width >= 1536px) {
    .container {
      max-width: 1300px !important;
    }
  }
}

@layer base {
  :root {
    --background: red;
    --foreground: #4a4a4a;
    --primary: #102d23;
    --primary-foreground: #ffffff;
    --accent-dark: #135e2c;
    --accent-yellow: #ffc857;
    --supporting-green: #135e2c;
    --border: #e5e7eb;
    --card: #ffffff;
    --card-foreground: #4a4a4a;
  }

  .dark {
    --background: #10221b;
    --foreground: #ededed;
    --primary: #102d23;
    --primary-foreground: #ffffff;
    --accent-dark: #135e2c;
    --accent-yellow: #ffc857;
    --supporting-green: #135e2c;
    --border: #374151;
    --card: #10221b;
    --card-foreground: #ededed;
  }
}

@theme inline {
  --color-primary: #102d23;
  --color-accent-dark: #135e2c;
  --color-accent-yellow: #ffc857;
  --color-background-dark: #10221b;
  --color-text-body: #4a4a4a;
  --color-supporting-green: #135e2c;
  --color-medium-green: #2d8f4b;
  --color-dark-green: #135e2c;
  --color-card-light: #ffffff;
  --color-card-dark: #1a2c24;

  --font-family-display: var(--font-dm-sans, "DM Sans"), system-ui,
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;

  --radius: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;

  --breakpoint-xs: 400px;
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;
}

body {
  color: var(--foreground);
  font-family: var(--font-dm-sans, "DM Sans"), system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.external-link-icon {
  font-size: 8px !important;
  width: 8px;
  height: 8px;
  line-height: 1;
  display: inline-block;
  vertical-align: super;
  margin-left: 2px;
  position: relative;
  top: -2px;
}

/* Stagger Animations */
@keyframes staggerSlideIn {
  from {
    opacity: 0;
    transform: translateX(-32px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes staggerFadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes staggerScaleX {
  from {
    opacity: 0;
    transform: scaleX(0);
  }
  to {
    opacity: 1;
    transform: scaleX(1);
  }
}

.menu-item-stagger {
  animation: staggerSlideIn 0.5s ease-out forwards;
  opacity: 0;
}

.menu-item-stagger:nth-child(1) {
  animation-delay: 0.1s;
}

.menu-item-stagger:nth-child(2) {
  animation-delay: 0.15s;
}

.menu-item-stagger:nth-child(3) {
  animation-delay: 0.2s;
}

.menu-item-stagger:nth-child(4) {
  animation-delay: 0.25s;
}

.menu-item-stagger:nth-child(5) {
  animation-delay: 0.3s;
}

.menu-content-stagger {
  animation: staggerFadeIn 0.6s ease-out forwards;
  opacity: 0;
}

.separator-stagger {
  animation: staggerScaleX 0.5s ease-out forwards;
  opacity: 0;
  transform-origin: left;
}

/* Hide scrollbar for horizontal scroll on mobile tabs */
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

/* Horizontal bounce animation for scroll indicator */
@keyframes bounce-x {
  0%,
  100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(4px);
  }
}

.animate-bounce-x {
  animation: bounce-x 1s ease-in-out infinite;
}

/* Blog Content Styles */
.blog-content {
  @apply text-gray-700 leading-relaxed;
}

.blog-content h1,
.blog-content h2,
.blog-content h3,
.blog-content h4,
.blog-content h5,
.blog-content h6 {
  @apply font-bold text-gray-900 mt-8 mb-4;
}

.blog-content h1 {
  @apply text-3xl;
}

.blog-content h2 {
  @apply text-2xl;
}

.blog-content h3 {
  @apply text-xl;
}

.blog-content h4 {
  @apply text-lg;
}

.blog-content p {
  @apply mb-4;
}

.blog-content ul,
.blog-content ol {
  @apply mb-4 pl-6;
}

.blog-content ul {
  @apply list-disc;
}

.blog-content ol {
  @apply list-decimal;
}

.blog-content li {
  @apply mb-2;
}

.blog-content strong {
  @apply font-semibold text-gray-900;
}

.blog-content em {
  @apply italic;
}

.blog-content a {
  @apply text-primary hover:underline;
}

.blog-content blockquote {
  @apply border-l-4 border-primary pl-4 italic my-4 text-gray-600;
}

.blog-content code {
  @apply bg-gray-100 px-2 py-1 rounded text-sm font-mono;
}

.blog-content pre {
  @apply bg-gray-100 p-4 rounded-lg overflow-x-auto mb-4;
}

.blog-content pre code {
  @apply bg-transparent p-0;
}

.blog-content img {
  @apply rounded-lg my-4 max-w-full h-auto;
}

/* Footer Menu Stilleri */
.footer-menu li a {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.875rem;
  transition: color 0.2s;
}

.footer-menu li a:hover {
  color: white;
}

@media (min-width: 1024px) {
  .footer-menu li a {
    color: #4a4a4a;
    font-size: 1rem;
  }

  .footer-menu li a:hover {
    color: #0b0b0b;
  }
}