/*
 * Utility compatibility layer
 * ---------------------------
 * Templates and a share of the published editorial content were authored
 * against a Tailwind build that this theme no longer ships. Without those
 * declarations every `p-*`, `gap-*` and `grid-cols-*` class was inert, so
 * copy sat flush against its panel edge and multi-column blocks stacked into
 * a single overflowing column.
 *
 * This file re-implements only the classes that the templates and the
 * published content actually use, remapped onto the light FoxyPulse tokens.
 * Dark-surface utilities (`bg-slate-900`, `bg-[#0B0F1A]`, `text-white`, …)
 * resolve to light surfaces and readable ink here — the markup that carries
 * them was written for the old night skin.
 *
 * Load order matters: this file is enqueued after style.css so utilities win
 * over component defaults, the same way they would in a real Tailwind build.
 */

:root {
  --fp-u-xs: 4px;
  --fp-u-sm: 8px;
  --fp-u-md: 12px;
  --fp-u-lg: 20px;
  --fp-u-xl: 28px;
  --fp-danger: #b3261e;
  --fp-danger-soft: #fdecec;
  --fp-tint: #f6f8f6;
  --fp-tint-strong: #eef2ee;
}

/* ── Display & box ──────────────────────────────────────────────────── */

.block { display: block; }
.inline-block { display: inline-block; }
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.grid { display: grid; }
.hidden { display: none; }
.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;
}

.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.flex-grow { flex-grow: 1; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }

.relative { position: relative; }
.absolute { position: absolute; }
.top-0 { top: 0; }
.left-0 { left: 0; }
.right-0 { right: 0; }
.-top-4 { top: -16px; }
.-right-4 { right: -16px; }
.z-10 { z-index: 10; }

.overflow-hidden { overflow: hidden; }
.overflow-x-auto { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Grid tracks always use minmax(0, …) so a wide child — an image, a table,
   a long descriptor string — cannot push the track past the viewport. */
.grid-cols-1 { grid-template-columns: minmax(0, 1fr); }
.col-span-full { grid-column: 1 / -1; }

/* ── Spacing ────────────────────────────────────────────────────────── */

.p-xs { padding: var(--fp-u-xs); }
.p-sm { padding: var(--fp-u-sm); }
.p-md { padding: var(--fp-u-md); }
.p-lg { padding: var(--fp-u-lg); }
.p-xl { padding: var(--fp-u-xl); }
.p-1 { padding: 4px; }
.p-3 { padding: 12px; }
.p-4 { padding: 16px; }
.p-5 { padding: 20px; }
.p-6 { padding: 24px; }

.px-xs { padding-inline: var(--fp-u-xs); }
.px-sm { padding-inline: var(--fp-u-sm); }
.px-md { padding-inline: var(--fp-u-md); }
.px-lg { padding-inline: var(--fp-u-lg); }
.px-6 { padding-inline: 24px; }
.px-8 { padding-inline: 32px; }

.py-xs { padding-block: var(--fp-u-xs); }
.py-sm { padding-block: var(--fp-u-sm); }
.py-xl { padding-block: var(--fp-u-xl); }
.py-0\.5 { padding-block: 2px; }
.py-1 { padding-block: 4px; }
.py-3 { padding-block: 12px; }
.py-4 { padding-block: 16px; }
.py-12 { padding-block: 48px; }

.pt-sm { padding-top: var(--fp-u-sm); }
.pb-xs { padding-bottom: var(--fp-u-xs); }
.pb-sm { padding-bottom: var(--fp-u-sm); }
.pb-md { padding-bottom: var(--fp-u-md); }
.pl-4 { padding-left: 16px; }

.m-0 { margin: 0; }
.mx-auto { margin-inline: auto; }
.mt-1 { margin-top: 4px; }
.mt-2 { margin-top: 8px; }
.mt-lg { margin-top: var(--fp-u-lg); }
.mt-xl { margin-top: var(--fp-u-xl); }
.mb-0\.5 { margin-bottom: 2px; }
.mb-2 { margin-bottom: 8px; }
.mb-3 { margin-bottom: 12px; }
.mb-6 { margin-bottom: 24px; }
.mb-xs { margin-bottom: var(--fp-u-xs); }
.mb-sm { margin-bottom: var(--fp-u-sm); }
.mb-md { margin-bottom: var(--fp-u-md); }
.mb-lg { margin-bottom: var(--fp-u-lg); }
.my-6 { margin-block: 24px; }
.my-8 { margin-block: 32px; }
.my-lg { margin-block: var(--fp-u-lg); }
.my-xl { margin-block: var(--fp-u-xl); }

.gap-xs { gap: var(--fp-u-xs); }
.gap-sm { gap: var(--fp-u-sm); }
.gap-md { gap: var(--fp-u-md); }
.gap-lg { gap: var(--fp-u-lg); }
.gap-xl { gap: var(--fp-u-xl); }
.gap-gutter { gap: 24px; }
.gap-2 { gap: 8px; }
.gap-4 { gap: 16px; }
.gap-6 { gap: 24px; }

.space-y-1 > * + * { margin-top: 4px; }
.space-y-2 > * + * { margin-top: 8px; }
.space-y-4 > * + * { margin-top: 16px; }
.space-y-md > * + * { margin-top: var(--fp-u-md); }
.space-y-lg > * + * { margin-top: var(--fp-u-lg); }

/* The old build shipped a page gutter through these two. The theme shell
   already owns the gutter, so they must stay inert rather than double it. */
.px-margin-mobile,
.md\:px-margin-desktop { padding-inline: 0; }

/* ── Sizing ─────────────────────────────────────────────────────────── */

.w-full { width: 100%; }
.w-1\/3 { width: 33.3333%; }
.w-1\.5 { width: 6px; }
.w-2 { width: 8px; }
.h-0\.5 { height: 2px; }
.h-1 { height: 4px; }
.h-1\.5 { height: 6px; }
.h-2 { height: 8px; }
.min-h-\[48px\] { min-height: 48px; }
.min-h-\[250px\] { min-height: 250px; }
.min-h-\[280px\] { min-height: 280px; }
.min-h-\[300px\] { min-height: 300px; }
.max-w-sm { max-width: 24rem; }
.max-w-3xl,
.max-w-4xl,
.max-w-screen-2xl { max-width: var(--fp-max); margin-inline: auto; }

/* ── Borders, radius, shadow ────────────────────────────────────────── */

.border,
.border-outline-variant,
.border-outline-variant\/30,
.border-outline-variant\/50,
.border-primary-container,
.border-primary-container\/30,
.border-secondary-container,
.border-white\/5,
.border-white\/10,
.border-white\/15,
.border-slate-700,
.border-slate-800,
.border-\[\#00E676\],
.border-\[\#00E676\]\/30,
.border-\[\#00E676\]\/40,
.border-\[\#00E5FF\]\/30,
.border-\[\#00E5FF\]\/40,
.border-\[\#FFC107\]\/30,
.border-amber-500\/30,
.border-emerald-500\/30,
.border-emerald-800\/40,
.border-rose-500\/30,
.border-rose-800\/40 { border: 1px solid var(--fp-line); }

.border-\[\#00E676\],
.border-\[\#00E676\]\/30,
.border-\[\#00E676\]\/40,
.border-emerald-500\/30,
.border-emerald-800\/40 { border-color: rgba(11, 122, 69, 0.28); }
.border-\[\#FFC107\]\/30,
.border-amber-500\/30 { border-color: rgba(154, 75, 0, 0.28); }
.border-rose-500\/30,
.border-rose-800\/40 { border-color: rgba(179, 38, 30, 0.28); }
.border-\[\#00E5FF\]\/30,
.border-\[\#00E5FF\]\/40 { border-color: rgba(11, 95, 115, 0.28); }

.border-t { border-top: 1px solid var(--fp-line); }
.border-b { border-bottom: 1px solid var(--fp-line); }
.border-r { border-right: 1px solid var(--fp-line); }
.border-t-2 { border-top: 2px solid var(--fp-line); }
.border-t-outline-variant { border-top-color: var(--fp-line); }
.border-collapse { border-collapse: collapse; }
.divide-y > * + * { border-top: 1px solid var(--fp-line); }
.divide-white\/5 > * + * { border-top-color: var(--fp-line); }

.border-l-4 { border-left: 4px solid var(--fp-line); }
.border-l-primary-container { border-left-color: var(--fp-accent); }
.border-l-secondary-container { border-left-color: var(--fp-info); }
.border-l-tertiary-container { border-left-color: var(--fp-warn); }

.rounded-sm { border-radius: 6px; }
.rounded,
.rounded-DEFAULT,
.rounded-md { border-radius: 10px; }
.rounded-lg { border-radius: 12px; }
.rounded-xl { border-radius: var(--fp-radius); }
.rounded-full { border-radius: 999px; }

.shadow-inner { box-shadow: inset 0 1px 3px rgba(18, 24, 20, 0.06); }
.shadow-md,
.shadow-lg { box-shadow: var(--fp-shadow); }
.shadow-xl,
.shadow-2xl { box-shadow: 0 14px 40px rgba(18, 24, 20, 0.1); }

/* ── Surfaces ───────────────────────────────────────────────────────── */

/* Every dark panel colour from the retired night skin resolves to a light
   surface. Left as-is they rendered near-black boxes with near-black text. */
.bg-\[\#060912\],
.bg-\[\#070912\],
.bg-\[\#070A12\],
.bg-\[\#080C16\],
.bg-\[\#0A0508\],
.bg-\[\#0A0D18\],
.bg-\[\#0A0E18\],
.bg-\[\#0B0F1A\],
.bg-\[\#0E0C17\],
.bg-\[\#0F1424\],
.bg-\[\#12080D\],
.bg-black\/80,
.bg-slate-800,
.bg-slate-900,
.bg-surface-container-low,
.bg-surface-container-high,
.cyber-panel { background: var(--fp-surface); color: var(--fp-ink); }

.bg-slate-900\/40,
.bg-slate-900\/50,
.bg-slate-900\/60,
.bg-slate-900\/80,
.bg-slate-900\/90,
.bg-outline-variant { background: var(--fp-tint); color: var(--fp-ink); }

.bg-\[\#00E676\],
.bg-emerald-950\/20,
.bg-emerald-950\/40,
.bg-\[\#00E676\]\/10,
.bg-\[\#00E676\]\/15 { background: var(--fp-accent-soft); color: var(--fp-ink); }
.bg-\[\#FFC107\],
.bg-\[\#FFC107\]\/15,
.bg-amber-500,
.bg-tertiary-container\/10 { background: var(--fp-warn-soft); color: var(--fp-ink); }
.bg-\[\#00E5FF\],
.bg-\[\#00E5FF\]\/15 { background: var(--fp-info-soft); color: var(--fp-ink); }
.bg-rose-500,
.bg-rose-500\/10,
.bg-rose-950\/20,
.bg-rose-950\/40 { background: var(--fp-danger-soft); color: var(--fp-ink); }

/* Gradient utilities are decorative hairlines in this markup. Neutralise the
   colour stops so they do not paint a dark band across a light panel. */
.bg-gradient-to-r {
  background-image: linear-gradient(90deg, transparent, var(--fp-line), transparent);
}
.from-transparent,
.from-\[\#00E676\],
.from-amber-950\/40,
.via-\[\#00E676\],
.via-\[\#00E5FF\],
.via-\[\#FFC107\],
.via-rose-500,
.to-transparent,
.to-\[\#FFC107\],
.to-slate-900\/80 { --tw-unused: 0; }

/* ── Ink ────────────────────────────────────────────────────────────── */

.text-white,
.text-slate-200,
.text-slate-950,
.text-\[\#061210\],
.text-text-primary,
.text-on-surface { color: var(--fp-ink); }

.text-slate-300,
.text-text-secondary,
.text-on-surface-variant,
.text-body-sm,
.text-body-md,
.text-body-lg { color: var(--fp-muted); }

.text-slate-400,
.text-slate-500,
.text-text-muted,
.text-outline-variant { color: var(--fp-faint); }

.text-\[\#00E676\],
.text-emerald-400,
.text-primary,
.text-primary-container,
.text-status-verified { color: var(--fp-accent); }

.text-\[\#FFC107\],
.text-amber-300,
.text-amber-400,
.text-status-caution,
.text-tertiary-container { color: var(--fp-warn); }

.text-\[\#00E5FF\],
.text-cyan-400,
.text-secondary-container { color: var(--fp-info); }

.text-rose-300,
.text-rose-400 { color: var(--fp-danger); }

/* ── Type scale ─────────────────────────────────────────────────────── */

.text-\[10px\] { font-size: 10px; }
.text-\[11px\] { font-size: 11px; }
.text-xs { font-size: 12px; }
.text-sm { font-size: 14px; }
.text-\[16px\], .text-base { font-size: 16px; }
.text-lg { font-size: 18px; }
.text-\[20px\], .text-xl { font-size: 20px; }
.text-2xl { font-size: 24px; }
.text-\[48px\] { font-size: 40px; }
.text-4xl { font-size: clamp(1.9rem, 6vw, 2.4rem); }
.text-\[100px\] { font-size: clamp(3rem, 16vw, 6.25rem); line-height: 1; }

.text-label-caps,
.font-label-caps {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.text-headline-sm { font-size: clamp(1.2rem, 4vw, 1.4rem); }
.text-headline-md { font-size: clamp(1.35rem, 4.6vw, 1.75rem); }
.text-display-lg,
.text-display-lg-mobile { font-size: clamp(1.8rem, 7vw, 2.8rem); line-height: 1.12; }

.font-display,
.font-display-lg,
.font-headline-md,
.font-headline-sm { font-family: var(--fp-display); }
.font-body,
.font-body-sm,
.font-body-lg { font-family: var(--fp-body); }
.font-mono,
.font-code-snippet { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.font-extrabold { font-weight: 800; }
.italic { font-style: italic; }
.not-italic { font-style: normal; }
.uppercase { text-transform: uppercase; }
.tracking-wider { letter-spacing: 0.06em; }
.leading-relaxed { line-height: 1.7; }
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.underline { text-decoration: underline; }
.whitespace-nowrap { white-space: nowrap; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-disc { list-style: disc; }
.opacity-50 { opacity: 0.5; }
.cursor-pointer { cursor: pointer; }
.transition-all,
.transition-colors,
.transition-opacity { transition: all 180ms ease; }
.accent-\[\#00E5FF\] { accent-color: var(--fp-info); }

/* ── Hover / focus states ───────────────────────────────────────────── */

.hover\:underline:hover { text-decoration: underline; }
.hover\:text-white:hover { color: var(--fp-ink); }
.hover\:text-primary-container:hover { color: var(--fp-accent); }
.hover\:text-tertiary-container:hover { color: var(--fp-warn); }
.hover\:bg-white\/5:hover,
.hover\:bg-primary-container\/10:hover,
.hover\:bg-secondary-container\/10:hover { background: var(--fp-tint-strong); }
.hover\:bg-rose-500\/20:hover { background: var(--fp-danger-soft); }
.hover\:bg-\[\#00FF87\]:hover,
.hover\:bg-\[\#80D8FF\]:hover,
.hover\:bg-\[\#FFE082\]:hover,
.hover\:bg-amber-400:hover { filter: brightness(0.97); }
.hover\:border-\[\#FFC107\]:hover { border-color: var(--fp-warn); }
.hover\:border-t-tertiary-container:hover { border-top-color: var(--fp-warn); }
.focus\:outline-none:focus { outline: none; }
.focus\:border-\[\#00E5FF\]:focus { border-color: var(--fp-info); }
.group:hover .group-hover\:opacity-100 { opacity: 1; }
.group:hover .group-hover\:text-\[\#FFC107\] { color: var(--fp-warn); }
.group:hover .group-hover\:bg-primary-container { background: var(--fp-accent-soft); }

/* ── Arbitrary child variants used by the editorial renderer ────────── */

.\[\&\>h2\]\:font-headline-md > h2,
.\[\&\>h2\]\:font-headline-sm > h2,
.\[\&\>h3\]\:font-headline-sm > h3 { font-family: var(--fp-display); }
.\[\&\>h2\]\:mt-lg > h2,
.\[\&\>h3\]\:mt-lg > h3 { margin-top: var(--fp-u-lg); }
.\[\&\>h2\]\:mt-xl > h2 { margin-top: var(--fp-u-xl); }
.\[\&\>h2\]\:mb-sm > h2,
.\[\&\>h3\]\:mb-sm > h3 { margin-bottom: var(--fp-u-sm); }
.\[\&\>h2\]\:mb-md > h2 { margin-bottom: var(--fp-u-md); }
.\[\&\>h2\]\:text-text-primary > h2,
.\[\&\>h3\]\:text-text-primary > h3 { color: var(--fp-ink); }
.\[\&\>p\]\:mb-md > p { margin-bottom: var(--fp-u-md); }
.\[\&\>ul\]\:mb-md > ul { margin-bottom: var(--fp-u-md); }
.\[\&\>ul\]\:list-disc > ul { list-style: disc; }
.\[\&\>ul\]\:pl-xl > ul { padding-left: var(--fp-u-xl); }
.\[\&\>a\]\:text-primary-container > a { color: var(--fp-accent); }
.\[\&\>a\:hover\]\:underline > a:hover { text-decoration: underline; }

/* ── Responsive variants ────────────────────────────────────────────── */

@media (min-width: 640px) {
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 768px) {
  .md\:flex-row { flex-direction: row; }
  .md\:items-end { align-items: flex-end; }
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .md\:col-span-2 { grid-column: span 2; }
  .md\:gap-sm { gap: var(--fp-u-sm); }
  .md\:p-lg { padding: var(--fp-u-lg); }
  .md\:p-xl { padding: var(--fp-u-xl); }
  .md\:text-xl { font-size: 20px; }
  .md\:text-2xl { font-size: 24px; }
  .md\:text-3xl { font-size: 28px; }
  .md\:text-display-lg { font-size: clamp(2.2rem, 5vw, 3rem); }
}

@media (min-width: 1024px) {
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lg\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .lg\:col-span-4 { grid-column: span 4; }
  .lg\:col-span-8 { grid-column: span 8; }
}

/* ── Content tables ─────────────────────────────────────────────────── */

/* Comparison tables ship from the editor at a fixed column count. On a phone
   they are wider than the viewport, so they scroll inside their own box
   instead of dragging the page sideways. */
.fp-main table,
#main-content table,
.fp-article-reading-canvas table,
.fp-prose table,
table.border-collapse {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-collapse: collapse;
}
.fp-main table th,
.fp-main table td,
#main-content table th,
#main-content table td,
.fp-article-reading-canvas table th,
.fp-article-reading-canvas table td,
.fp-prose table th,
.fp-prose table td,
table.border-collapse th,
table.border-collapse td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--fp-line);
  text-align: left;
  vertical-align: top;
}
.fp-main table th,
#main-content table th,
.fp-article-reading-canvas table th,
.fp-prose table th,
table.border-collapse th { color: var(--fp-ink); font-weight: 700; }

/* ── Editorial content components ───────────────────────────────────── */

/* Classes the publishing scripts emit into post_content. They were never
   given declarations, so CTA links rendered as bare underlined text and
   comparison tables lost their frame. */

.fp-cta-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px 22px;
  border: 1px solid var(--fp-accent);
  border-radius: 999px;
  background: var(--fp-accent);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-decoration: none;
}

.fp-cta-button:hover { filter: brightness(1.08); }

.fp-cta-button--secondary {
  background: var(--fp-surface);
  color: var(--fp-accent);
}

.fp-cta-block,
.fp-vs-cta-block,
.foxy-cta-box {
  margin: 28px 0;
  padding: 20px;
  border: 1px solid var(--fp-line);
  border-left: 4px solid var(--fp-accent);
  border-radius: var(--fp-radius);
  background: var(--fp-surface);
}

.fp-cta-block > p:last-child,
.fp-vs-cta-block > p:last-child { margin-bottom: 0; font-size: 13px; }

.fp-vs-cta-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 16px 0;
}

.fp-vs-cta-buttons p { margin: 0; }

/* Comparison tables keep a readable frame and scroll inside their own box
   rather than widening the page on a phone. */
.fp-vs-table {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 20px 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-collapse: collapse;
  font-size: 15px;
}

.fp-vs-table th,
.fp-vs-table td {
  padding: 12px;
  border-bottom: 1px solid var(--fp-line);
  text-align: left;
  vertical-align: top;
}

.fp-vs-table th {
  background: var(--fp-tint);
  color: var(--fp-ink);
  font-weight: 700;
  white-space: nowrap;
}

.fp-vs-table .fp-vs-explanation-row td {
  background: var(--fp-tint);
  color: var(--fp-muted);
  font-size: 14px;
}

.fc-intro {
  font-size: 1.0625rem;
  color: var(--fp-ink);
}

.foxypulse-context-figure {
  margin: 24px 0;
}

.foxypulse-context-figure figcaption,
.wp-element-caption {
  margin-top: 8px;
  color: var(--fp-faint);
  font-size: 13px;
}

/* Inline CTA injected between two paragraphs of an article. */
.fp-contextual-inline-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 24px 0;
  padding: 16px;
  border: 1px solid var(--fp-line);
  border-radius: 12px;
  background: var(--fp-surface);
}

.fp-contextual-inline-cta-copy {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.fp-contextual-inline-cta-copy strong {
  display: block;
  color: var(--fp-ink);
}

.fp-contextual-inline-cta-label {
  display: block;
  color: var(--fp-accent);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Published articles carry hand-authored two-column grids as inline styles
   (`style="display:grid;grid-template-columns:1fr 1fr"`). A `1fr` track cannot
   shrink below its items' min-content, so on a phone those blocks pushed the
   whole page ~50px sideways. Inline styles outrank any class, so the override
   has to be marked — it is scoped to the article body and to narrow viewports
   only, and it does not touch the desktop layout the author intended. */
@media (max-width: 720px) {
  .fp-article-reading-canvas [style*="grid-template-columns"],
  .fp-prose [style*="grid-template-columns"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}