/* CosmosIQ Global Styles */
* {
  box-sizing: border-box;
}

body {
  font-family: 'Inter', sans-serif;
  background-color: #0A0E1A;
  color: #ffffff;
}

/* Fix: all text inputs must show white text on dark background */
input[type="text"],
input[type="search"],
input[type="email"],
input[type="password"],
input[type="number"],
textarea {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background-color: transparent;
}
input[type="text"]::-webkit-input-placeholder,
input[type="search"]::-webkit-input-placeholder {
  color: rgba(255,255,255,0.35) !important;
  -webkit-text-fill-color: rgba(255,255,255,0.35) !important;
}
/* Autofill override - Chrome changes background to white */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-text-fill-color: #ffffff !important;
  -webkit-box-shadow: 0 0 0px 1000px rgba(255,255,255,0.07) inset !important;
  transition: background-color 5000s ease-in-out 0s;
}


/* Custom scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: rgba(255,255,255,0.05);
}
::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.2);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,0.3);
}

/* Hide scrollbar utility */
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

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

/* Smooth transitions */
a, button {
  transition: all 0.2s ease;
}

/* Glass effect */
.glass {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Gradient text */
.gradient-text {
  background: linear-gradient(135deg, #0052CC, #7B2FBE, #F72585);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Pulse animation for live indicators */
@keyframes pulse-soft {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.pulse-soft {
  animation: pulse-soft 2s ease-in-out infinite;
}

/* Card hover effects */
.card-hover {
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.card-hover:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(0, 82, 204, 0.15);
}

/* Range input styling */
input[type="range"] {
  -webkit-appearance: none;
  height: 6px;
  border-radius: 3px;
  background: rgba(255,255,255,0.1);
  outline: none;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0052CC, #7B2FBE);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,82,204,0.5);
}

/* Select styling */
select option {
  background: #0D1B2A;
  color: white;
}

/* Number counter animation */
@keyframes countUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Progress bar animation */
@keyframes fillBar {
  from { width: 0; }
}

.progress-fill {
  animation: fillBar 1s ease-out forwards;
}

/* Button press effect */
button:active {
  transform: scale(0.98);
}

/* Loading skeleton */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* Floating animation */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}

.floating {
  animation: float 4s ease-in-out infinite;
}

/* Marquee (auto-scroll) animation */
@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes marquee-reverse {
  0%   { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}

.animate-marquee {
  animation: marquee 32s linear infinite;
  width: max-content;
}

.animate-marquee-reverse {
  animation: marquee-reverse 32s linear infinite;
  width: max-content;
}

.animate-marquee:hover,
.animate-marquee-reverse:hover {
  animation-play-state: paused;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
  h1 { font-size: 2.5rem; }
  h2 { font-size: 2rem; }
}

/* ── ACCESSIBILITY FIXES ─────────────────────────────────── */

/* Minimum touch target size (44×44px) per WCAG 2.5.5 — only for standalone icon buttons */
/* Do NOT apply min-height to all <a> tags as it breaks navbar and text links layout */
.btn,
input[type="submit"],
input[type="button"],
input[type="reset"] {
  min-height: 44px;
}
/* Touch-friendly CTA buttons and key interactive elements */
.btn-cta, .btn-primary, .btn-secondary {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* Icon-only buttons need 44px target */
button[aria-label]:not(:has(span:not(.sr-only))),
.icon-btn {
  min-height: 44px;
  min-width: 44px;
}

/* Accessible focus ring */
:focus-visible {
  outline: 2px solid #7B2FBE;
  outline-offset: 2px;
  border-radius: 4px;
}

/* Skip to main content link (screen reader + keyboard users) */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #7B2FBE;
  color: white;
  padding: 8px 16px;
  z-index: 9999;
  border-radius: 0 0 4px 0;
  text-decoration: none;
  font-weight: 600;
}
.skip-link:focus {
  top: 0;
}

/* High contrast text — ensures AA/AAA contrast ratio */
.text-accessible {
  color: #e2e8f0; /* contrast ratio >4.5:1 on dark bg */
}
.text-accessible-muted {
  color: #94a3b8; /* contrast ratio >3:1 */
}

/* Accessible button with visible label */
button[aria-label],
button[title] {
  position: relative;
}

/* sr-only utility (for screen-reader-only text) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── PERFORMANCE OPTIMISATIONS ───────────────────────────── */

/* Reduce CLS: reserve space for images before they load */
img {
  content-visibility: auto;
}

/* Contain layout/paint for heavy sections - but NOT contain for sections with sticky/fixed children */
article, aside {
  contain: layout style;
}

/* GPU acceleration for animated elements only */
.floating,
.animate-marquee,
.animate-marquee-reverse,
.card-hover {
  will-change: transform;
  transform: translateZ(0);
}

/* font-display: swap fallback (for system fonts while web fonts load) */
@font-face {
  font-family: 'Inter';
  font-display: swap;
  src: local('Inter');
}
@font-face {
  font-family: 'Poppins';
  font-display: swap;
  src: local('Poppins');
}

/* Prevent invisible text during font load (FOIT → FOUT) */
body {
  font-display: swap;
}

/* Lazy-load offscreen images */
img[loading="lazy"] {
  content-visibility: auto;
}

/* ── CONTRAST IMPROVEMENTS ───────────────────────────────── */

/* Muted grey text on dark bg — now ≥ 4.5:1 contrast */
.text-gray-400 { color: #9ca3af !important; } /* 5.74:1 on #0A0E1A */
.text-gray-500 { color: #6b7280 !important; } /* 4.61:1 on #0A0E1A */

/* Badge/pill text contrast */
.badge-text {
  color: #1e1b4b;
  background-color: #a5b4fc;
}

/* Link contrast on dark background */
a:not([class]) {
  color: #93c5fd; /* WCAG AA compliant on dark bg */
  text-decoration: underline;
  text-underline-offset: 2px;
}
a:not([class]):hover {
  color: #bfdbfe;
}