/**
 * SKHAI Website Personalization — Funnel-Stage CSS
 *
 * Prevents flash of unstyled personalized content (FOUPC):
 * Elements with data-skhai-show are hidden until JS applies the stage class.
 *
 * Class-based visibility for stage-specific CSS styling:
 *   .skhai-tof  = Top of Funnel
 *   .skhai-mof  = Middle of Funnel
 *   .skhai-bof  = Bottom of Funnel
 */

/* ── Anti-flash: hide personalized elements until JS runs ── */
[data-skhai-show] {
  display: none;
}

/* Once JS has applied the stage, show the matching elements */
.skhai-p-ready [data-skhai-show] {
  /* JS handles display via inline style; this ensures specificity doesn't fight */
}

/* ── Class-based visibility shortcuts ── */
/* Use these classes directly in HTML: class="show-tof" etc. */

.show-tof,
.show-mof,
.show-bof {
  display: none;
}

.skhai-tof .show-tof { display: block; }
.skhai-mof .show-mof { display: block; }
.skhai-bof .show-bof { display: block; }

/* Inline variants for flex/inline contexts */
.skhai-tof .show-tof-inline { display: inline; }
.skhai-mof .show-mof-inline { display: inline; }
.skhai-bof .show-bof-inline { display: inline; }

.skhai-tof .show-tof-flex { display: flex; }
.skhai-mof .show-mof-flex { display: flex; }
.skhai-bof .show-bof-flex { display: flex; }

/* Hide specific stages */
.skhai-tof .hide-tof { display: none !important; }
.skhai-mof .hide-mof { display: none !important; }
.skhai-bof .hide-bof { display: none !important; }

/* ── Mutual exclusion: only one stage visible at a time ── */
.skhai-tof .show-mof,
.skhai-tof .show-bof { display: none !important; }

.skhai-mof .show-tof,
.skhai-mof .show-bof { display: none !important; }

.skhai-bof .show-tof,
.skhai-bof .show-mof { display: none !important; }

/* ── Personalized CTA section styles ── */
.skhai-cta-personalized {
  transition: opacity 0.3s ease;
}

/* BoF: emphasize direct contact CTAs */
.skhai-bof .skhai-cta-urgent {
  border-left: 3px solid #c9a84c;
  padding-left: 16px;
}

/* ── Responsive: ensure nothing breaks on mobile ── */
@media (max-width: 768px) {
  .skhai-tof .show-tof-flex,
  .skhai-mof .show-mof-flex,
  .skhai-bof .show-bof-flex {
    flex-direction: column;
  }
}