/* Custom Styles for MicroChef */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

iframe {
  margin: auto;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
}

/* Navigation Styles */
.nav-link {
  @apply relative py-2 px-0 text-gray-300 hover:text-blue-400 transition duration-300;
}

.nav-link::after {
  @apply absolute bottom-0 left-0 w-0 h-0.5 bg-blue-500 transition-all duration-300;
  content: '';
}

.nav-link:hover::after,
.nav-link.active::after {
  @apply w-full;
}

/* Card Hover Effect */
.card-hover {
  @apply transition-all duration-300;
}

.card-hover:hover {
  @apply border-blue-400/60 shadow-lg shadow-blue-500/20 scale-105;
}

/* Hero Visual Animation */
.hero-visual {
  animation: float 6s ease-in-out infinite;
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-20px);
  }
}

/* Gradient Text */
.gradient-text {
  @apply text-blue-400;
}

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

/* Fade In Animation */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in {
  animation: fadeIn 0.6s ease-out;
}

/* Glass Morphism Effect */
.glass {
  @apply bg-white/5 backdrop-blur-md border border-white/10;
}

/* Button Styles */
button,
a.button {
  @apply transition-all duration-300 ease-out;
}

button:active,
a.button:active {
  @apply scale-95;
}

/* Input Focus States */
input:focus,
textarea:focus,
select:focus {
  @apply outline-none ring-2 ring-blue-400/50;
}

/* Text Selection */
::selection {
  @apply bg-blue-500/30 text-cyan-300;
}

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

::-webkit-scrollbar-track {
  @apply bg-slate-900;
}

::-webkit-scrollbar-thumb {
  @apply bg-blue-500/40 rounded-full hover:bg-blue-500/60;
}

/* Mobile Menu Animation */
#mobile-menu {
  animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* FAQ Accordion */
.faq-item {
  @apply cursor-pointer;
}

.faq-item:hover {
  @apply border-blue-400/60;
}

.faq-item i {
  @apply transition-transform duration-300;
}

.faq-item.active i {
  @apply rotate-180;
}

.faq-answer {
  @apply overflow-hidden transition-all duration-300;
}

.faq-answer.show {
  @apply block;
}

/* Form Success Message */
.form-success {
  @apply bg-green-500/20 border border-green-500/40 text-green-300 p-4 rounded-lg;
}

.form-error {
  @apply bg-red-500/20 border border-red-500/40 text-red-300 p-4 rounded-lg;
}

/* Link Hover Effect */
a {
  @apply relative;
}

a:not(.nav-link):not(.button) {
  @apply transition-colors duration-200;
}

/* Typography */
h1,
h2,
h3,
h4,
h5,
h6 {
  @apply font-bold;
}

p {
  @apply leading-relaxed;
}

/* Container */
.container {
  @apply max-w-6xl mx-auto px-4;
}

/* Gradient Underline */
.gradient-underline {
  @apply border-b-2 border-gradient-to-r from-blue-500 to-cyan-400 pb-2;
}

/* Responsive Images */
img {
  @apply max-w-full h-auto;
}

/* Code Block Styling (if needed) */
code {
  @apply bg-slate-800/40 px-2 py-1 rounded text-cyan-300 text-sm;
}

pre {
  @apply bg-slate-800/40 p-4 rounded-lg overflow-x-auto;
}

/* Table Styling */
table {
  @apply w-full border-collapse;
}

th {
  @apply bg-blue-500/10 border border-blue-500/20 px-4 py-2 text-left;
}

td {
  @apply border border-blue-500/10 px-4 py-2;
}

/* Loading Animation */
@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Utility Classes */
.text-gradient {
  @apply text-blue-400;
}

.border-gradient {
  @apply border-2 border-l-blue-400 border-t-blue-400 border-r-cyan-400 border-b-cyan-400;
}

.shadow-glow {
  @apply shadow-lg shadow-blue-500/30;
}

/* Responsive Design */
@media (max-width: 768px) {
  .container {
    @apply px-4;
  }

  h1 {
    @apply text-3xl;
  }

  h2 {
    @apply text-2xl;
  }

  .card-hover {
    @apply scale-100 !important;
  }

  .card-hover:hover {
    @apply scale-100;
  }
}

/* Dark Mode (Already integrated) */
body {
  @apply bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900;
}

/* Print Styles */
@media print {
  nav,
  footer {
    @apply hidden;
  }

  body {
    @apply bg-white text-black;
  }
}