/* Todos os estilos críticos já foram movidos para o inline CSS no head do HTML */

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

@layer utilities {
  .skew-minus-20 {
    transform: skew(-20deg);
  }
  
  .bg-noise {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  }
}

@layer base {
  :root {
    --background: 248 98% 50%;
    --foreground: 210 40% 98%;
    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;
    --primary: 248 98% 50%;
    --primary-foreground: 210 40% 98%;
    --secondary: 271 100% 70%;
    --secondary-foreground: 222.2 47.4% 11.2%;
    --muted: 248 90% 95%;
    --muted-foreground: 215.4 16.3% 90%;
    --accent: 325 100% 50%;
    --accent-foreground: 210 40% 98%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 222.2 84% 4.9%;
    --radius: 0.75rem;
    --sidebar-background: 0 0% 98%;
    --sidebar-foreground: 240 5.3% 26.1%;
    --sidebar-primary: 240 5.9% 10%;
    --sidebar-primary-foreground: 0 0% 98%;
    --sidebar-accent: 240 4.8% 95.9%;
    --sidebar-accent-foreground: 240 5.9% 10%;
    --sidebar-border: 220 13% 91%;
    --sidebar-ring: 217.2 91.2% 59.8%;
  }

  html {
    scroll-behavior: smooth;
    scroll-padding-top: 120px;
  }

  .glass { @apply bg-white/20 backdrop-blur-md border border-white/20; }
  .glass-dark { @apply bg-black/10 backdrop-blur-md border border-white/10; }
  .text-balance { text-wrap: balance; }
  .text-gradient { @apply bg-clip-text text-transparent bg-gradient-to-r from-pink-500 to-purple-500; }
  
  .highlight-link { @apply relative inline-block text-white transition-colors duration-300; }
  .highlight-link::after {
    content: ''; @apply absolute left-0 right-0 bottom-0 h-[1px] bg-white scale-x-0 transition-transform duration-300 origin-bottom-right;
  }
  .highlight-link:hover::after { @apply scale-x-100 origin-bottom-left; }
  
  .btn-shine { @apply relative overflow-hidden bg-accent text-white shadow-md; }
  .btn-shine::before {
    content: ''; @apply absolute top-0 left-[-100%] w-[100%] h-full bg-white/20 skew-minus-20;
    transition: all 0.6s ease;
  }
  .btn-shine:hover::before { @apply left-[100%]; }
  .bg-hero-gradient { background: linear-gradient(to right, #4800ff, rgba(106, 0, 255, 0.8)); }
  
  /* Blog Post Styles */
  .blog-article { @apply leading-relaxed text-gray-800; }
  .blog-article h1 { @apply text-3xl md:text-4xl font-bold text-[#1403fc] mb-6; }
  .blog-article h2 { @apply text-2xl font-bold text-[#1403fc] mt-8 mb-4; }
  .blog-article h3 { @apply text-xl font-semibold text-[#1403fc] mt-6 mb-3; }
  .blog-article p { @apply text-gray-800 mb-4; }

  /* Listas alinhadas e limpas */
  .blog-article ul,
  .blog-article ol {
    @apply mb-6;
    padding-left: 2rem;
    margin-left: 0;
    list-style-position: outside;
  }
  .blog-article ul { list-style-type: disc; }
  .blog-article ol { list-style-type: decimal; }

  .blog-article ul li,
  .blog-article ol li {
    @apply mb-2;
    margin-left: 0;
    padding-left: 0;
    line-height: 1.6;
    display: list-item;
  }

  /* Apenas elementos problemáticos viram inline */
  .blog-article ul li > p,
  .blog-article ul li > div,
  .blog-article ul li > span,
  .blog-article ul li > strong,
  .blog-article ul li > em,
  .blog-article ul li > b,
  .blog-article ul li > i,
  .blog-article ul li > a,
  .blog-article ol li > p,
  .blog-article ol li > div,
  .blog-article ol li > span,
  .blog-article ol li > strong,
  .blog-article ol li > em,
  .blog-article ol li > b,
  .blog-article ol li > i,
  .blog-article ol li > a {
    display: inline !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: inherit;
  }

  /* Listas aninhadas */
  .blog-article li > ul,
  .blog-article li > ol {
    display: block;
    list-style: inherit;
    padding-left: 1.5rem;
    margin-top: .25rem;
    margin-bottom: .25rem;
  }

  /* Oculta li vazios */
  .blog-article ul li:empty,
  .blog-article ol li:empty { display: none; }

  /* Oculta li com p vazio ou apenas br */
  .blog-article ul li:has(> p:only-child:empty),
  .blog-article ol li:has(> p:only-child:empty),
  .blog-article ul li:has(> br:only-child),
  .blog-article ol li:has(> br:only-child) { display: none; }

  /* Fallback sem :has() */
  .blog-article ul li > p:only-child:empty,
  .blog-article ol li > p:only-child:empty,
  .blog-article ul li > br:only-child,
  .blog-article ol li > br:only-child { display: none; }

  .blog-article blockquote { @apply border-l-4 border-[#1403fc] pl-4 italic my-8 text-gray-700; }
  .blog-article a { @apply text-[#1403fc] font-medium hover:underline; }
  .blog-article img { @apply rounded-lg my-6 mx-auto; }
  
  .blog-meta { @apply flex items-center flex-wrap gap-3 text-sm text-gray-500; }
  .blog-tag { @apply bg-gray-100 hover:bg-gray-200 text-[#1403fc] px-3 py-1 rounded-full text-sm flex items-center transition-colors cursor-pointer; }
}