/*
 * Faktory Studios components.
 * Requires tokens.css. Components reference semantic theme tokens only, so they
 * work in both the default dark theme and data-theme="light".
 * Every class is prefixed `fs-` so it can be dropped into Kajabi without
 * colliding with theme styles.
 */

/* ---------- Base ---------- */

.fs-root, .fs-root *, .fs-root *::before, .fs-root *::after { box-sizing: border-box; }
/* Components are also used outside .fs-root (e.g. Kajabi Custom Code blocks). */
[class^="fs-"], [class*=" fs-"], [class^="fs-"]::before, [class*=" fs-"]::before, [class^="fs-"]::after, [class*=" fs-"]::after { box-sizing: border-box; }

.fs-root {
  font-family: var(--fs-font-family-body);
  font-size: var(--fs-font-size-base);
  line-height: var(--fs-font-leading-normal);
  color: var(--fs-text);
  background: var(--fs-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.fs-root--sky {
  background-color: var(--fs-bg);
  background-image: var(--fs-gradient-sky);
  background-repeat: no-repeat;
  background-size: 100% 1400px;
}
[data-theme="light"] .fs-root--sky,
[data-theme="light"].fs-root--sky { background: var(--fs-bg); }

.fs-root :where(h1, h2, h3, h4) {
  font-family: var(--fs-font-family-display);
  font-weight: var(--fs-font-weight-bold);
  letter-spacing: var(--fs-font-tracking-tight);
  line-height: var(--fs-font-leading-snug);
  margin: 0 0 var(--fs-space-3);
  text-wrap: balance;
}
.fs-root h1 { font-size: var(--fs-font-size-4xl); line-height: var(--fs-font-leading-tight); }
.fs-root h2 { font-size: var(--fs-font-size-3xl); }
.fs-root h3 { font-size: var(--fs-font-size-xl); letter-spacing: var(--fs-font-tracking-snug); }
.fs-root h4 { font-size: var(--fs-font-size-lg); letter-spacing: var(--fs-font-tracking-snug); }
.fs-root p { margin: 0 0 var(--fs-space-4); text-wrap: pretty; }
.fs-root a { color: var(--fs-link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.fs-root a:hover { color: var(--fs-accent-hover); }
.fs-root code, .fs-root kbd { font-family: var(--fs-font-family-mono); font-size: 0.9em; }
.fs-root ::selection { background: var(--fs-accent); color: var(--fs-on-accent); }

.fs-root :focus-visible {
  outline: 2px solid var(--fs-focus);
  outline-offset: 3px;
  border-radius: var(--fs-radius-sm);
}

/* ---------- Typography helpers ---------- */

.fs-display {
  font-family: var(--fs-font-family-display);
  font-size: var(--fs-font-size-5xl);
  font-weight: var(--fs-font-weight-bold);
  line-height: var(--fs-font-leading-tight);
  letter-spacing: var(--fs-font-tracking-tight);
}

.fs-lead { font-size: var(--fs-font-size-md); color: var(--fs-text-muted); max-width: var(--fs-layout-prose); }
.fs-muted { color: var(--fs-text-muted); }
.fs-small { font-size: var(--fs-font-size-sm); }

.fs-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--fs-space-2);
  font-family: var(--fs-font-family-mono);
  font-size: var(--fs-font-size-xs);
  font-weight: var(--fs-font-weight-semibold);
  letter-spacing: var(--fs-font-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fs-accent);
  margin-bottom: var(--fs-space-3);
}
[data-theme="light"] .fs-eyebrow { color: var(--fs-link); }
.fs-eyebrow::before { content: ""; width: 1.5em; height: 1px; background: currentColor; }

.fs-gradient-text {
  background: var(--fs-gradient-beam);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- Layout ---------- */

.fs-container { width: 100%; max-width: var(--fs-layout-container); margin-inline: auto; padding-inline: var(--fs-layout-gutter); }
.fs-section { padding-block: clamp(var(--fs-space-12), 8vw, var(--fs-space-24)); position: relative; }
.fs-stack { display: flex; flex-direction: column; gap: var(--fs-space-4); }
.fs-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--fs-space-3); }
.fs-grid { display: grid; gap: var(--fs-space-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }

.fs-divider {
  height: 1px;
  border: 0;
  margin: var(--fs-space-8) 0;
  background: linear-gradient(90deg, transparent, var(--fs-border-strong), transparent);
}
.fs-divider--beam { height: 2px; background: var(--fs-gradient-beam); opacity: 0.8; }

/* Neon blueprint grid, the signature Faktory background. Put on a positioned parent. */
.fs-grid-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(0, 245, 255, 0.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(168, 85, 247, 0.14) 1px, transparent 1px);
  background-size: 40px 40px;
  -webkit-mask-image: radial-gradient(90% 60% at 50% 0%, #000, transparent);
  mask-image: radial-gradient(90% 60% at 50% 0%, #000, transparent);
  opacity: 0.6;
}
[data-theme="light"] .fs-grid-bg { opacity: 0.35; }

/* ---------- Buttons ---------- */

.fs-btn {
  --_bg: var(--fs-accent);
  --_fg: var(--fs-on-accent);
  --_bd: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--fs-space-2);
  min-height: 44px;
  padding: var(--fs-space-3) var(--fs-space-6);
  border: 1px solid var(--_bd);
  border-radius: var(--fs-radius-pill);
  background: var(--_bg);
  color: var(--_fg);
  font: inherit;
  font-weight: var(--fs-font-weight-semibold);
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    transform var(--fs-motion-duration-fast) var(--fs-motion-easing-out),
    box-shadow var(--fs-motion-duration-base) var(--fs-motion-easing-out),
    background-color var(--fs-motion-duration-base) var(--fs-motion-easing-out),
    border-color var(--fs-motion-duration-base) var(--fs-motion-easing-out);
}
.fs-root a.fs-btn { color: var(--_fg); text-decoration: none; }
.fs-btn:hover { transform: translateY(-1px); box-shadow: var(--fs-shadow-glow-signal); }
.fs-btn:active { transform: translateY(0); }
.fs-btn:disabled, .fs-btn[aria-disabled="true"] { opacity: 0.45; pointer-events: none; }
.fs-btn .fs-btn__arrow { transition: transform var(--fs-motion-duration-base) var(--fs-motion-easing-out); }
.fs-btn:hover .fs-btn__arrow { transform: translateX(3px); }

.fs-btn--primary:hover { --_bg: var(--fs-accent-hover); }

.fs-btn--secondary { --_bg: var(--fs-accent-2-fill); --_fg: var(--fs-on-accent-2); }
.fs-btn--secondary:hover { box-shadow: var(--fs-shadow-glow-plasma); }

.fs-btn--outline { --_bg: transparent; --_fg: var(--fs-text); --_bd: var(--fs-border-strong); }
.fs-btn--outline:hover { --_bd: var(--fs-accent); --_bg: var(--fs-accent-soft); }

.fs-btn--ghost { --_bg: transparent; --_fg: var(--fs-text-muted); }
.fs-btn--ghost:hover { --_fg: var(--fs-text); --_bg: var(--fs-accent-soft); box-shadow: none; }

/* Hero-only: one beam button per view. */
.fs-btn--beam {
  --_bg: var(--fs-gradient-beam);
  --_fg: var(--fs-color-void-950);
  background: var(--fs-gradient-beam);
  background-size: 140% 100%;
  background-position: 0% 50%;
  transition: background-position var(--fs-motion-duration-slow) var(--fs-motion-easing-out), transform var(--fs-motion-duration-fast) var(--fs-motion-easing-out), box-shadow var(--fs-motion-duration-base) var(--fs-motion-easing-out);
}
.fs-btn--beam:hover { background-position: 100% 50%; box-shadow: var(--fs-shadow-glow-plasma); }

.fs-btn--sm { min-height: 36px; padding: var(--fs-space-2) var(--fs-space-4); font-size: var(--fs-font-size-sm); }
.fs-btn--lg { min-height: 52px; padding: var(--fs-space-4) var(--fs-space-8); font-size: var(--fs-font-size-md); }
.fs-btn--block { display: flex; width: 100%; }

/* ---------- Cards ---------- */

.fs-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--fs-space-3);
  padding: var(--fs-space-6);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01)), var(--fs-surface);
  border: 1px solid var(--fs-border);
  border-radius: var(--fs-radius-lg);
  box-shadow: var(--fs-shadow-md), var(--fs-shadow-inset-hairline);
  overflow: hidden;
}
[data-theme="light"] .fs-card { background: var(--fs-surface); box-shadow: var(--fs-shadow-sm); }
.fs-card > :last-child { margin-bottom: 0; }

.fs-card--interactive {
  transition:
    transform var(--fs-motion-duration-base) var(--fs-motion-easing-out),
    border-color var(--fs-motion-duration-base) var(--fs-motion-easing-out),
    box-shadow var(--fs-motion-duration-base) var(--fs-motion-easing-out);
}
.fs-card--interactive:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--fs-accent) 45%, transparent);
  box-shadow: var(--fs-shadow-lg), var(--fs-shadow-glow-signal);
}

/* Gradient hairline border for featured items (one per group). */
.fs-card--featured { border-color: transparent; }
.fs-card--featured::after {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: var(--fs-gradient-beam);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* Subtle CRT scanlines, a nod to the original site. Decorative only. */
.fs-card--scan::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(transparent 49%, rgba(255, 255, 255, 0.035) 50%, transparent 51%);
  background-size: 100% 6px;
}

.fs-card__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--fs-radius-md);
  background: var(--fs-accent-soft);
  color: var(--fs-accent);
  border: 1px solid color-mix(in srgb, var(--fs-accent) 30%, transparent);
}
[data-theme="light"] .fs-card__icon { color: var(--fs-link); }
.fs-card__title { font-family: var(--fs-font-family-display); font-size: var(--fs-font-size-lg); font-weight: var(--fs-font-weight-semibold); margin: 0; }
.fs-card__body { color: var(--fs-text-muted); margin: 0; }
.fs-card__footer { margin-top: auto; padding-top: var(--fs-space-3); }

.fs-media {
  aspect-ratio: 16 / 9;
  border-radius: var(--fs-radius-md);
  background: var(--fs-surface-2);
  border: 1px solid var(--fs-border);
  overflow: hidden;
}
.fs-media > img, .fs-media > video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- Tags, badges, stats ---------- */

.fs-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--fs-space-1);
  padding: var(--fs-space-1) var(--fs-space-3);
  border: 1px solid var(--fs-border);
  border-radius: var(--fs-radius-pill);
  font-size: var(--fs-font-size-xs);
  font-weight: var(--fs-font-weight-medium);
  color: var(--fs-text-muted);
  background: rgba(255, 255, 255, 0.02);
}

.fs-badge {
  --_c: var(--fs-accent);
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 2px var(--fs-space-2);
  border-radius: var(--fs-radius-xs);
  font-family: var(--fs-font-family-mono);
  font-size: var(--fs-font-size-xs);
  font-weight: var(--fs-font-weight-semibold);
  letter-spacing: var(--fs-font-tracking-wide);
  text-transform: uppercase;
  color: var(--_c);
  background: color-mix(in srgb, var(--_c) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--_c) 30%, transparent);
}
[data-theme="light"] .fs-badge { --_c: var(--fs-link); }
.fs-badge--plasma { --_c: var(--fs-accent-2); }
.fs-badge--success { --_c: var(--fs-success); }
.fs-badge--warning { --_c: var(--fs-warning); }
.fs-badge--danger { --_c: var(--fs-danger); }
.fs-badge--info { --_c: var(--fs-info); }
[data-theme="light"] .fs-badge--plasma { --_c: var(--fs-accent-2); }
[data-theme="light"] .fs-badge--success { --_c: var(--fs-success); }
[data-theme="light"] .fs-badge--warning { --_c: var(--fs-warning); }
[data-theme="light"] .fs-badge--danger { --_c: var(--fs-danger); }
[data-theme="light"] .fs-badge--info { --_c: var(--fs-info); }

/* Glowing live dot, from the original site's .fx-dot. */
.fs-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--fs-color-pulse-400);
  box-shadow: 0 0 10px rgba(231, 76, 255, 0.6);
  flex: none;
}
.fs-dot--signal { background: var(--fs-accent); box-shadow: 0 0 10px rgba(0, 245, 255, 0.6); }

.fs-stat { display: flex; flex-direction: column; gap: var(--fs-space-1); }
.fs-stat__value {
  font-family: var(--fs-font-family-display);
  font-size: var(--fs-font-size-3xl);
  font-weight: var(--fs-font-weight-bold);
  letter-spacing: var(--fs-font-tracking-tight);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.fs-stat__label { font-size: var(--fs-font-size-sm); color: var(--fs-text-muted); }

/* ---------- Forms ---------- */

.fs-field { display: flex; flex-direction: column; gap: var(--fs-space-2); }
.fs-label { font-size: var(--fs-font-size-sm); font-weight: var(--fs-font-weight-medium); color: var(--fs-text); }
.fs-hint { font-size: var(--fs-font-size-xs); color: var(--fs-text-muted); }

.fs-input {
  width: 100%;
  min-height: 44px;
  padding: var(--fs-space-3) var(--fs-space-4);
  font: inherit;
  color: var(--fs-text);
  background: var(--fs-bg-raised);
  border: 1px solid var(--fs-border-strong);
  border-radius: var(--fs-radius-md);
  transition: border-color var(--fs-motion-duration-base), box-shadow var(--fs-motion-duration-base);
}
.fs-input::placeholder { color: var(--fs-text-subtle); }
.fs-input:hover { border-color: var(--fs-text-subtle); }
.fs-input:focus { outline: none; border-color: var(--fs-accent); box-shadow: 0 0 0 3px var(--fs-accent-soft); }
.fs-input[aria-invalid="true"] { border-color: var(--fs-danger); }

/* Inline opt-in: input + button on one row, stacks on mobile. */
.fs-optin {
  display: flex;
  gap: var(--fs-space-2);
  padding: var(--fs-space-2);
  background: var(--fs-bg-raised);
  border: 1px solid var(--fs-border-strong);
  border-radius: var(--fs-radius-pill);
}
.fs-optin .fs-input { border: 0; background: transparent; box-shadow: none; border-radius: var(--fs-radius-pill); }
.fs-optin:focus-within { border-color: var(--fs-accent); box-shadow: 0 0 0 3px var(--fs-accent-soft); }
@media (max-width: 480px) {
  .fs-optin { flex-direction: column; border-radius: var(--fs-radius-lg); }
}

/* ---------- Callouts ---------- */

.fs-callout {
  --_c: var(--fs-info);
  display: flex;
  gap: var(--fs-space-3);
  padding: var(--fs-space-4) var(--fs-space-5);
  border-radius: var(--fs-radius-md);
  background: color-mix(in srgb, var(--_c) 8%, var(--fs-surface));
  border: 1px solid color-mix(in srgb, var(--_c) 28%, transparent);
  border-left: 3px solid var(--_c);
}
.fs-callout__title { font-weight: var(--fs-font-weight-semibold); margin: 0 0 var(--fs-space-1); }
.fs-callout p { margin: 0; color: var(--fs-text-muted); }
.fs-callout--success { --_c: var(--fs-success); }
.fs-callout--warning { --_c: var(--fs-warning); }
.fs-callout--danger { --_c: var(--fs-danger); }
.fs-callout--plasma { --_c: var(--fs-accent-2); }

/* ---------- Navigation ---------- */

.fs-nav {
  position: sticky;
  top: 0;
  z-index: var(--fs-z-sticky);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fs-space-6);
  padding: var(--fs-space-3) var(--fs-layout-gutter);
  background: color-mix(in srgb, var(--fs-bg) 72%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--fs-border);
}
.fs-nav__links { display: flex; align-items: center; gap: var(--fs-space-1); list-style: none; margin: 0; padding: 0; }
.fs-root .fs-nav__link {
  display: inline-flex;
  padding: var(--fs-space-2) var(--fs-space-3);
  border-radius: var(--fs-radius-sm);
  color: var(--fs-text-muted);
  font-size: var(--fs-font-size-sm);
  font-weight: var(--fs-font-weight-medium);
  text-decoration: none;
}
.fs-root .fs-nav__link:hover, .fs-root .fs-nav__link[aria-current="page"] { color: var(--fs-text); background: var(--fs-accent-soft); }
@media (max-width: 768px) { .fs-nav__links { display: none; } }

/* ---------- Code ---------- */

.fs-code {
  font-family: var(--fs-font-family-mono);
  font-size: var(--fs-font-size-sm);
  line-height: 1.7;
  padding: var(--fs-space-5);
  background: var(--fs-color-void-950);
  color: var(--fs-color-void-100);
  border: 1px solid var(--fs-border);
  border-radius: var(--fs-radius-md);
  overflow-x: auto;
}
.fs-root kbd {
  padding: 1px 6px;
  border: 1px solid var(--fs-border-strong);
  border-bottom-width: 2px;
  border-radius: var(--fs-radius-xs);
  background: var(--fs-surface-2);
}

/* ---------- Motion safety ---------- */

@media (prefers-reduced-motion: reduce) {
  .fs-root *, .fs-root *::before, .fs-root *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
  .fs-btn:hover, .fs-card--interactive:hover { transform: none; }
}