/* Custom styles for Vymo Intranet */

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}

/* Sticky sidebar */
.sticky-sidebar {
  position: sticky;
  top: 2rem;
  height: fit-content;
}

/* Animation classes */
@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Smooth transitions */
.transition-all {
  transition: all 0.3s ease;
}

.transition-colors {
  transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}

.transition-transform {
  transition: transform 0.3s ease;
}

/* Hover effects */
.hover\:scale-\[1\.03\]:hover {
  transform: scale(1.03);
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #f1f5f9;
}

::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* Focus styles */
.focus-visible\:outline-2:focus-visible {
  outline: 2px solid;
  outline-offset: 2px;
}

.focus-visible\:outline-red-400:focus-visible {
  outline-color: #f87171;
}

.focus-visible\:outline-red-600:focus-visible {
  outline-color: #dc2626;
}

.focus-visible\:outline-blue-500:focus-visible {
  outline-color: #3b82f6;
}

/* Modal backdrop */
.modal-backdrop {
  backdrop-filter: blur(4px);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .sticky-sidebar {
    position: static;
  }
}

/* Print styles */
@media print {
  .header-bg {
    background: #667eea !important;
    -webkit-print-color-adjust: exact;
  }
  
  button, .hover\:scale-\[1\.03\] {
    transform: none !important;
  }
}

h1{
    font-family: "Plus Jakarta Sans", sans-serif;
}
p{
    font-family: "Inter", sans-serif;
}

.header-bg {
    background: 
    linear-gradient(
        rgba(0, 16, 33, 0.2),
        rgba(0, 16, 33, 0.2)
    ),
    url('img/bg-main.avif') no-repeat center/cover;
}
/* For card image fade overlay text */
.fade-overlay {
    background: linear-gradient(to top, rgba(0,0,0,0.6), transparent);
}
/* Focus outline overrides for keyboard navigation */
.focus-visible:focus {
    outline: 2px solid #f87171; /* Tailwind red-400 */
    outline-offset: 2px;
}

.sticky-sidebar {
    position: sticky;
    top: 2rem;
    height: fit-content;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
}
.weblink{
    background: url('img/pattern.png')  no-repeat right/contain;
}