@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: #f16700;
}

@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: #F6513B;
    }
    .blog-content a:hover {
      color: #D9412D;
    }

    .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: #F6513B;
    }

    .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;
    }

    /* 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); }
    }


}