/* WindForge 1.4.8 (w2) — JG skin + accent sweep for EXISTING blocks.
 * Coordinator: merge/enqueue this AFTER the Tailwind dist stylesheet.
 * It only styles blocks that explicitly opt in (skin prop or accent prop),
 * so existing pages without those props are untouched.
 * Tokens use the JG values below as fallbacks; if the JG system already
 * defines these variables, its values win through the cascade. */

:root {
  --wf-jg-accent: #e11d2e;
  --wf-jg-sale: #f59e0b;
  --wf-jg-success: #22c55e;
  --wf-jg-glass-bg: rgba(255, 255, 255, 0.04);
  --wf-jg-glass-border: rgba(255, 255, 255, 0.10);
  --wf-jg-radius: 18px;
}

/* ---------- Dark / glass skins (opt-in via skin="dark"|"glass") ---------- */

.wf-jg-skin-dark {
  background-color: #0a0a14 !important;
  color: #f4f4f6;
}

.wf-jg-skin-glass {
  background-color: rgba(10, 10, 20, 0.72) !important;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  color: #f4f4f6;
}

.wf-jg-skin-dark h2,
.wf-jg-skin-dark h3,
.wf-jg-skin-glass h2,
.wf-jg-skin-glass h3 {
  color: #ffffff;
}

/* Cards that opted into a skin (PHP adds wf-jg-card only when skin is set). */
.wf-jg-skin-dark .wf-jg-card,
.wf-jg-skin-glass .wf-jg-card {
  background: var(--wf-jg-glass-bg, rgba(255, 255, 255, 0.04)) !important;
  border-color: var(--wf-jg-glass-border, rgba(255, 255, 255, 0.10)) !important;
  border-radius: var(--wf-jg-radius, 18px) !important;
  color: #f4f4f6;
}

/* Eyebrow / kicker lines inside a skinned section use the JG accent. */
.wf-jg-skin-dark p[class*="tracking-widest"],
.wf-jg-skin-glass p[class*="tracking-widest"] {
  color: var(--wf-jg-accent, #e11d2e);
}

/* Marquee band under a skin: the band classes (bg-gray-950 / bg-gray-100)
   would otherwise win, so the skin background is forced here. */
.wf-jg-skin-dark.tc-marquee {
  background-color: #0a0a14 !important;
  color: rgba(255, 255, 255, 0.9);
}

.wf-jg-skin-glass.tc-marquee {
  background-color: rgba(10, 10, 20, 0.6) !important;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  color: rgba(255, 255, 255, 0.9);
}

/* ---------- Accent sweep (opt-in via accent / accent_color prop) ----------
 * The PHP templates put --wf-accent on the section and inline styles on
 * the main accent surfaces (nodes, badges, CTAs, headline tail). This sweep
 * covers the remaining sky/cyan surfaces the templates cannot reach with
 * inline styles, such as timeline centre spines (::before gradients) and
 * hover lines. It only runs under .wf-jg-accent-set, and every such
 * section defines --wf-accent, so no fallback is needed here. */

.wf-jg-accent-set .text-sky-600,
.wf-jg-accent-set .text-sky-500,
.wf-jg-accent-set .text-sky-400 {
  color: var(--wf-accent);
}

.wf-jg-accent-set .from-sky-500,
.wf-jg-accent-set .from-sky-600,
.wf-jg-accent-set .from-cyan-400 {
  --tw-gradient-from: var(--wf-accent);
}

.wf-jg-accent-set .to-cyan-400,
.wf-jg-accent-set .to-cyan-500,
.wf-jg-accent-set .to-cyan-300,
.wf-jg-accent-set .via-cyan-400 {
  --tw-gradient-to: var(--wf-accent);
  --tw-gradient-via: var(--wf-accent);
}

.wf-jg-accent-set .before\:from-sky-500::before,
.wf-jg-accent-set .before\:via-cyan-400::before {
  --tw-gradient-from: var(--wf-accent);
  --tw-gradient-via: var(--wf-accent);
}

.wf-jg-accent-set .bg-sky-500\/10 {
  background-color: color-mix(in oklab, var(--wf-accent) 10%, transparent);
}

/* ---------- Marquee countdown pill (backup for the inline styles) ----------
 * The pill itself carries inline styles, so it renders even if this file
 * is not enqueued; this class keeps it styled if inline styles are ever
 * stripped by a sanitizer. */

.wf-jg-countdown-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.75rem auto 0;
  padding: 0.4rem 1rem;
  border: 1px solid var(--wf-jg-glass-border, rgba(255, 255, 255, 0.10));
  border-radius: 999px;
  background: var(--wf-jg-glass-bg, rgba(255, 255, 255, 0.04));
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--wf-jg-accent, #e11d2e);
}