/* =========================================================
   PRIME ELECTRONICS REPAIR — CUSTOM STYLES
   Tailwind handles utility classes; this file covers effects
   Tailwind's CDN build can't express as utilities.
   ========================================================= */

[x-cloak] { display: none !important; }

html { scroll-behavior: smooth; }

body { font-family: 'Inter', sans-serif; }
h1, h2, h3, h4, .font-heading { font-family: 'Poppins', sans-serif; }

/* Focus states for accessibility */
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;
}

/* Glassmorphism card */
.glass-card {
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(226, 232, 240, 0.8);
}

/* Hero gradient overlay */
.hero-overlay {
  background: linear-gradient(120deg, rgba(15,23,42,0.72) 0%, rgba(37,99,235,0.55) 55%, rgba(15,118,110,0.45) 100%);
}

/* Soft section divider wave */
.wave-divider {
  display: block;
  width: 100%;
  height: 60px;
}

/* Animated counter number */
.counter-number { font-variant-numeric: tabular-nums; }

/* FAQ accordion chevron rotation */
.faq-trigger[aria-expanded="true"] .faq-chevron { transform: rotate(180deg); }
.faq-chevron { transition: transform 0.25s ease; }

/* Before/After slider handle */
.ba-slider { position: relative; overflow: hidden; touch-action: none; }
.ba-slider__after { position: absolute; inset: 0; overflow: hidden; }
.ba-slider__handle {
  position: absolute; top: 0; bottom: 0; width: 3px; background: #fff;
  box-shadow: 0 0 0 2px rgba(0,0,0,0.15); cursor: ew-resize;
}
.ba-slider__handle::after {
  content: '\2194'; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%); width: 36px; height: 36px;
  background: #fff; border-radius: 9999px; display: flex; align-items: center;
  justify-content: center; font-weight: 700; color: #2563EB; box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

/* Card hover lift */
.hover-lift { transition: transform 0.25s ease, box-shadow 0.25s ease; }
.hover-lift:hover { transform: translateY(-4px); }

/* Line clamp utility (in case Tailwind CDN plugin unavailable) */
.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

/* Skip link for keyboard users */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: #2563EB; color: #fff; padding: 10px 16px; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }