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

@font-face {
  font-family: 'Gill Sans Nova';
  src: url("/assets/gillsans/gillsansnova_extrabold-6c4c9417.woff") format('woff'),
       url("gillsans/gillsansnova_extrabold.woff2") format('woff2');
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Gill Sans Nova';
  src: url("/assets/gillsans/gillsansnova_ultrabold-cecce23b.woff2") format('woff2');
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Gill Sans Nova Heavy';
  src: url("/assets/gillsans/gillsansnova_heavy-b3f72c21.woff") format('woff');
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Gill Sans Nova Book';
  src: url("/assets/gillsans/gillsansnova_book-ef4bfec4.woff2") format('woff2');
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Gill Sans Nova Condensed Medium';
  src: url("/assets/gillsans/gillsansnova_cnmedium-0f4c284d.woff") format('woff');
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Gill Sans Nova Extrabold';
  src: url("/assets/gillsans/gillsansnova_extrabold-6c4c9417.woff") format('woff');
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Bebas Neue';
  src: url("/assets/Bebas_Neue/BebasNeue-Regular-2e8dbea4.woff2") format('woff2');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'Nexa Heavy';
  src: url("/assets/Nexa-Heavy-330ed363.ttf") format('truetype');
  font-style: normal;
  font-weight: 900;
  font-display: swap;
}

@font-face {
  font-family: 'Nexa Bold';
  src: url("/assets/Nexa-Bold-10cae520.otf") format('opentype');
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

.bg-vanaOrange {
  background-color: #FF4F00;
}

@layer components {
    .translate-x-0 {
      transform: translateX(0);
    }

    .-translate-x-20 {
      transform: translateX(-5rem);
    }

    /* Sortable ghost class for dragged elements */
    .sortable-ghost {
      @apply border-2 border-orange-500 opacity-60;
    }

    /* Audit history styles */
    .date-group-header {
      @apply transition-colors duration-150;
    }

    .date-group-header:hover {
      @apply bg-gray-50;
    }

    /* Blog content — renders Tely HTML cleanly */
    .blog-content h1,
    .blog-content h2,
    .blog-content h3,
    .blog-content h4 {
      @apply font-bold text-gray-900 mt-10 mb-4;
      letter-spacing: -0.025em;
    }
    .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 text-base text-gray-700 leading-relaxed mb-5;
    }

    .blog-content a {
      @apply font-medium underline;
      color: #FF4F00;
    }
    .blog-content a:hover {
      color: #D94300;
    }

    .blog-content img {
      @apply w-full rounded-lg my-8;
    }

    .blog-content ul,
    .blog-content ol {
      @apply mb-5 pl-6 text-gray-700;
    }
    .blog-content ul { @apply list-disc; }
    .blog-content ol { @apply list-decimal; }
    .blog-content li { @apply mb-2 leading-relaxed; }

    .blog-content blockquote {
      @apply border-l-4 pl-5 my-6 italic text-gray-600;
      border-color: #FF4F00;
    }

    .blog-content pre {
      @apply bg-gray-50 rounded-lg p-5 overflow-x-auto my-6 text-sm;
    }
    .blog-content code {
      @apply bg-gray-100 rounded px-1.5 py-0.5 text-sm;
    }
    .blog-content pre code {
      @apply bg-transparent p-0;
    }

    .blog-content table {
      @apply w-full border-collapse my-6 text-sm;
    }
    .blog-content th {
      @apply text-left font-semibold text-gray-900 bg-gray-50 px-4 py-3 border-b border-gray-200;
    }
    .blog-content td {
      @apply px-4 py-3 border-b border-gray-100 text-gray-700;
    }

    .blog-content hr {
      @apply my-10 border-gray-200;
    }

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

    .blog-content em,
    .blog-content i {
      @apply italic;
    }

    /* Blog card polish — Textora-style diffuse shadow + smooth transitions */
    .blog-card {
      transition: transform 0.4s cubic-bezier(.44,0,.56,1),
                  box-shadow 0.4s cubic-bezier(.44,0,.56,1);
      box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    }
    .blog-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 8px 30px rgba(0,0,0,0.10);
    }

    /* Scroll-reveal entrance animation for blog elements */
    .blog-reveal {
      opacity: 0;
      transform: translateY(24px);
      transition: opacity 0.6s cubic-bezier(.44,0,.56,1),
                  transform 0.6s cubic-bezier(.44,0,.56,1);
    }
    .blog-reveal.revealed {
      opacity: 1;
      transform: translateY(0);
    }

    /* Stagger delays for grid cards */
    .blog-reveal-d1 { transition-delay: 0.08s; }
    .blog-reveal-d2 { transition-delay: 0.16s; }
    .blog-reveal-d3 { transition-delay: 0.24s; }
    .blog-reveal-d4 { transition-delay: 0.32s; }
    .blog-reveal-d5 { transition-delay: 0.40s; }

    /* Blog sources collapsible toggle */
    .blog-sources-toggle {
      @apply mt-10 border border-slate-200 rounded-xl overflow-hidden;
    }

    .blog-sources-summary {
      @apply flex items-center justify-between px-5 py-4 cursor-pointer select-none font-bold text-lg;
      color: #1e293b;
      letter-spacing: -0.025em;
      list-style: none;
    }

    .blog-sources-summary::-webkit-details-marker {
      display: none;
    }

    .blog-sources-summary:hover {
      background: #f8fafc;
    }

    .blog-sources-chevron {
      @apply transition-transform duration-200;
      color: #94a3b8;
    }

    .blog-sources-toggle[open] .blog-sources-chevron {
      transform: rotate(180deg);
    }

    .blog-sources-content {
      @apply px-5 pb-5 border-t border-slate-100;
    }

    .blog-sources-content p {
      @apply text-sm leading-relaxed;
      color: #64748b;
    }

    .blog-sources-content a {
      @apply text-sm break-all;
    }

    .blog-sources-content ul,
    .blog-sources-content ol {
      @apply text-sm;
    }

    /* Infinite scroll loading spinner */
    .loading-spinner {
      @apply w-8 h-8 border-4 border-gray-200 border-t-blue-600 rounded-full;
      animation: spin 0.8s linear infinite;
    }

    @keyframes spin {
      to { transform: rotate(360deg); }
    }


}