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

    /* ===== Blog Page — navbar override ===== */
    .blog-page #navbar {
      background: white !important;
      box-shadow: 0 4px 6px -1px rgba(0,0,0,.07), 0 2px 4px -2px rgba(0,0,0,.05) !important;
    }
    .blog-page #navbar .navbar-link { color: #374151 !important; }
    .blog-page #navbar .navbar-link:hover { color: #FF4F00 !important; }
    .blog-page #navbar [data-controller="hamburger"] button { color: #374151 !important; }
    .blog-page #navbar [data-navbar-target="userMenu"] button,
    .blog-page #navbar [data-navbar-target="loginButton"] button { color: #374151 !important; }

    /* ===== Blog Typography ===== */
    .blog-heading {
      color: #1e293b;
      letter-spacing: -0.025em;
    }
    .blog-heading-hero { line-height: 1.1; }
    .blog-heading-title { line-height: 1.15; }
    .blog-heading-card { line-height: 1.2; }

    .blog-subtext { color: #64748b; }
    .blog-meta { color: #94a3b8; }
    .blog-author { color: #475569; }

    /* ===== Blog Links & Transitions ===== */
    .blog-link {
      color: #475569;
      transition: color 0.4s cubic-bezier(.44,0,.56,1);
    }
    .blog-breadcrumb-link {
      color: #64748b;
      transition: color 0.4s cubic-bezier(.44,0,.56,1);
    }
    .blog-title-link {
      transition: color 0.4s cubic-bezier(.44,0,.56,1);
    }

    /* ===== Blog Category Tags ===== */
    .blog-category-tag {
      color: #FF4F00;
      text-decoration-color: #FF4F00;
      transition: text-decoration 0.2s;
    }
    .blog-category-pill {
      color: #FF4F00;
      background: rgba(255,79,0,0.08);
      transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
    }
    .blog-category-link {
      color: #FF4F00;
      text-decoration-color: #FF4F00;
      transition: text-decoration 0.2s;
    }
    .blog-empty-link { color: #FF4F00; }

    /* ===== Blog Accent Blocks ===== */
    .blog-accent-orange { background: #FF4F00; }
    .blog-accent-blue { background: #3b82f6; }

    /* ===== Blog Image Hover ===== */
    .blog-image-hover {
      transition: transform 0.6s cubic-bezier(.44,0,.56,1);
    }

    /* ===== Blog Sections ===== */
    .blog-section-grey { background: #f8fafc; }

    /* ===== Blog Card extras ===== */
    .blog-card-placeholder {
      background: linear-gradient(135deg, rgba(30,64,175,0.06) 0%, rgba(59,130,246,0.06) 100%);
    }
    .blog-card-footer {
      color: #94a3b8;
      border-top: 1px solid rgba(226,232,240,0.6);
    }

    /* ===== Blog Sidebar ===== */
    .blog-sidebar-cta {
      background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
      border: 1px solid #bfdbfe;
    }
    .blog-sidebar-cta-btn { background: #FF4F00; }
    .blog-sidebar-count {
      color: #94a3b8;
      background: rgba(148,163,184,0.1);
    }

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


}