/* kl-polish.css — UI/UX polish layer for KynectLocal new-site/
   Additive only. Never removes or overrides layout. */

/* ─── 1. BUTTON HOVER SYSTEM ─────────────────────────────────────────────── */

/* Base transition applied to all classified buttons via kl-polish.js */
.kl-btn {
  transition:
    transform .22s cubic-bezier(.2,.7,.2,1),
    box-shadow .22s ease,
    background-color .22s ease,
    filter .22s ease,
    opacity .22s ease !important;
  will-change: transform;
}

/* Teal fill — "Schedule a Demo", primary CTAs */
.kl-btn-teal:hover {
  transform: scale(1.025) translateY(-2px);
  box-shadow: 0 10px 32px -6px rgba(34,211,238,.42);
}

/* Teal outline / ghost teal border */
.kl-btn-teal-outline:hover {
  background: rgba(34,211,238,.1) !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px -6px rgba(34,211,238,.28);
}

/* Purple fill */
.kl-btn-purple:hover {
  transform: scale(1.025) translateY(-2px);
  box-shadow: 0 10px 32px -6px rgba(168,85,247,.4);
}

/* Gradient fill */
.kl-btn-gradient:hover {
  transform: scale(1.025) translateY(-2px);
  box-shadow: 0 10px 32px -6px rgba(168,85,247,.35);
  filter: brightness(1.08);
}

/* Outline / ghost buttons */
.kl-btn-outline:hover {
  background: rgba(255,255,255,.08) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px -4px rgba(255,255,255,.12);
}

/* Nav pill CTAs — smaller, tighter treatment */
.kl-btn-nav:hover {
  filter: brightness(1.12);
  transform: scale(1.04) translateY(-1px);
}

/* Remove transform interference on data-mag elements (kl-motion.js owns those) */
[data-mag].kl-btn {
  will-change: transform;
}

/* ─── 2. FLOAT ANIMATION ─────────────────────────────────────────────────── */

@keyframes kl-float {
  0%   { transform: translateY(0) rotate(0deg); }
  50%  { transform: translateY(-10px) rotate(.25deg); }
  100% { transform: translateY(0) rotate(0deg); }
}

.kl-float {
  animation: kl-float 6s ease-in-out infinite;
  will-change: transform;
}

/* Float doesn't compound with data-mag — feature page imgs won't have data-mag */

@media (prefers-reduced-motion: reduce) {
  .kl-float { animation: none; }
  .kl-btn   { transition: none !important; }
}

/* ─── 3. REVEAL TIMING — align feature pages with kl-motion.js ───────────── */
/* Feature pages inline style sets .65s ease; upgrade to match main pages.
   transition-property only (no transition-delay) so inline stagger delays are preserved. */

.reveal {
  transition-duration: .9s, .9s !important;
  transition-timing-function: cubic-bezier(.2,.7,.2,1), cubic-bezier(.2,.7,.2,1) !important;
  transition-property: opacity, transform !important;
}

/* ─── 4. SECTION DIVIDER LINE ────────────────────────────────────────────── */

@keyframes kl-line-in {
  from { transform: scaleX(0); opacity: 0; }
  to   { transform: scaleX(1); opacity: 1; }
}

.kl-section-line {
  height: 1px;
  background: linear-gradient(90deg, transparent, #22D3EE 30%, #A855F7 70%, transparent);
  transform-origin: left;
  opacity: 0;
}

.kl-section-line.visible {
  animation: kl-line-in .9s cubic-bezier(.2,.7,.2,1) both;
}

/* ─── 5. HERO GLOW LAYER ─────────────────────────────────────────────────── */

.kl-hero-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(
    600px circle at 30% 40%,
    var(--kl-glow, rgba(34,211,238,.13)),
    transparent 60%
  );
}

/* ─── 6. PER-PAGE HERO ACCENT GROUPS (via data-kl-page on <body>) ─────────── */

/* Governance / Compliance group — indigo shift */
body[data-kl-page="governance"]   { --kl-glow: rgba(99,102,241,.18); }
body[data-kl-page="audit-log"]    { --kl-glow: rgba(99,102,241,.18); }
body[data-kl-page="team"]         { --kl-glow: rgba(99,102,241,.18); }
body[data-kl-page="product-strategist"] { --kl-glow: rgba(99,102,241,.18); }

/* Analytics / Data group — blue-purple midpoint */
body[data-kl-page="analytics"]    { --kl-glow: rgba(139,92,246,.2); }
body[data-kl-page="digital-impact"] { --kl-glow: rgba(139,92,246,.2); }
body[data-kl-page="leads"]        { --kl-glow: rgba(139,92,246,.2); }
body[data-kl-page="bulk-editor"]  { --kl-glow: rgba(139,92,246,.2); }

/* Content / Publishing group — warm cyan */
body[data-kl-page="blog"]          { --kl-glow: rgba(6,182,212,.18); }
body[data-kl-page="dynamic-content"] { --kl-glow: rgba(6,182,212,.18); }
body[data-kl-page="page-builder"]  { --kl-glow: rgba(6,182,212,.18); }

/* Location / Discovery group — blue-teal shift */
body[data-kl-page="locations"]     { --kl-glow: rgba(14,165,233,.17); }
body[data-kl-page="location-seo"]  { --kl-glow: rgba(14,165,233,.17); }
body[data-kl-page="media"]         { --kl-glow: rgba(14,165,233,.17); }
body[data-kl-page="reviews"]       { --kl-glow: rgba(14,165,233,.17); }
body[data-kl-page="services"]      { --kl-glow: rgba(14,165,233,.17); }

/* Communication group — teal-to-green */
body[data-kl-page="messages"]      { --kl-glow: rgba(16,185,129,.17); }
body[data-kl-page="integrations"]  { --kl-glow: rgba(16,185,129,.17); }

/* Navigation — teal-violet blend */
body[data-kl-page="navigation"]    { --kl-glow: rgba(168,85,247,.18); }

/* AI Search — strongest teal (already excellent on index) */
body[data-kl-page="ai-search"]     { --kl-glow: rgba(34,211,238,.18); }

/* ─── 7. HORIZONTAL REVEAL DIRECTION ────────────────────────────────────── */
/* data-r-dir="left"|"right" set on elements before kl-motion.js initializes */
/* kl-motion.js will reset transform to 'none' on intersection — works natively */

[data-r-dir="left"]  { transform: translateX(-24px) !important; }
[data-r-dir="right"] { transform: translateX(24px) !important; }

/* After reveal — kl-motion.js sets opacity:1 and transform:none inline */
/* So these selectors only apply to pre-reveal state */

/* ─── 8. STAGGER ENHANCEMENT — cap/signal cards on feature pages ──────────── */
/* transition-delay is set inline by kl-polish.js / patch-personality2.js.
   Opacity:0 base is already handled by the inline .reveal rule on each page.
   No additional opacity rule here — it would beat .reveal.visible at equal specificity. */

/* ─── 9. PLATFORM PAGE — feature list horizontal reveal ─────────────────── */
/* Applied via data-r-dir="left" on .feature-list-item by kl-polish.js */

/* ─── 10. SECTION LINE OBSERVER TRIGGER ─────────────────────────────────── */
/* kl-polish.js adds .kl-section-line to hr/divider elements and watches them */

/* ─── 11. PHONE GRIDS ───────────────────────────────────────────────────── */
/* Section layouts are inline fixed-column grids that never collapse, so on phones they run off
   the right edge. Two- and three-column layouts stack; four-column stat rows go to 2×2.
   Both spellings are listed because the reveal scripts rewrite style attributes with spaces. */
@media (max-width: 640px) {
  [style*="grid-template-columns:1fr 1fr;"], [style*="grid-template-columns: 1fr 1fr;"],
  [style$="grid-template-columns:1fr 1fr"], [style$="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns:repeat(2,1fr)"], [style*="grid-template-columns: repeat(2, 1fr)"],
  [style*="grid-template-columns:repeat(3,1fr)"], [style*="grid-template-columns: repeat(3, 1fr)"],
  [style*="grid-template-columns:5fr 7fr"], [style*="grid-template-columns: 5fr 7fr"] {
    grid-template-columns: minmax(0, 1fr) !important;
    column-gap: 0 !important;
  }
  [style*="grid-template-columns:repeat(4,1fr)"], [style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 16px !important;
  }
}
/* Home FAQ list spans 2 of the auto-fit columns; once they collapse to one (below ~860px) the span adds a phantom column */
@media (max-width: 860px) { .kl-faq-list { grid-column: auto !important; } }

/* Sticky side columns stack on small screens; unstick them so content doesn't scroll underneath.
   Full-height scroll scenes (top:0) keep their sticky behaviour. */
@media (max-width: 900px) {
  [style*="position:sticky;top:1"],
  [style*="position: sticky;top:1"] { position: static !important; }
}