/* ============================================================================
   TechDream Africa Portal — custom styles layered on top of Tailwind CDN.
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root {
  --font-display: 'Sora', ui-sans-serif, system-ui, sans-serif;
  --font-body: 'Inter', ui-sans-serif, system-ui, sans-serif;
}

body { font-family: var(--font-body); }
h1, h2, h3, h4, .font-display { font-family: var(--font-display); }

/* ---------------------------------------------------------------- Scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #94a3b8; border-radius: 999px; }
.dark ::-webkit-scrollbar-thumb { background: #475569; }

/* -------------------------------------------------------------- Glassmorph */
.glass {
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.4);
}
.dark .glass {
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid rgba(148, 163, 184, 0.12);
}

/* ------------------------------------------------------------------- Hero */
.hero-mesh {
  background:
    radial-gradient(60% 50% at 15% 10%, rgba(15,118,110,0.18), transparent 60%),
    radial-gradient(50% 45% at 90% 15%, rgba(37,99,235,0.16), transparent 60%),
    radial-gradient(70% 60% at 50% 100%, rgba(15,118,110,0.10), transparent 60%);
}

/* -------------------------------------------------------------- Line clamp */
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ------------------------------------------------------------- Animations */
@keyframes fade-in-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.animate-fade-in-up { animation: fade-in-up 0.5s ease-out both; }

@keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
.animate-pulse-dot { animation: pulse-dot 1.4s ease-in-out infinite; }

/* ---------------------------------------------------------------- Kanban -- */
.kanban-column { min-height: 200px; }
.kanban-card { cursor: grab; }
.kanban-card.sortable-ghost { opacity: 0.4; }
.kanban-card.sortable-chosen { box-shadow: 0 8px 24px rgba(15, 23, 42, 0.15); }

/* ----------------------------------------------------------- Progress rail */
.pipeline-rail { position: relative; }
.pipeline-rail::before {
  content: '';
  position: absolute;
  left: 15px; top: 0; bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, #0F766E, #2563EB);
  opacity: 0.25;
}

/* --------------------------------------------------------------- Focus ---- */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid #2563EB;
  outline-offset: 2px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}