/* ==========================================================================
   Joshua Jackai — ACSS override layer
   ACSS 4.0.0-rc-3

   This file is loaded AFTER automatic.css and retunes ACSS's variables to the
   design's actual token values. Everything is SCOPED to body.jackai, so any
   other page on the site keeps its existing ACSS configuration untouched.
   The class is added by the body_class filter in functions-snippet.php. Every ACSS utility (.section--m, .text--l,
   .btn--primary, .bg--dark, .grid--3) then produces design-correct output, so
   native Bricks sections match the prototype without per-element styling.

   Variable names here were read from the site's generated automatic.css.
   Only the values change — no ACSS internals are redefined.
   ========================================================================== */

body.jackai {

  /* ---- Palette -------------------------------------------------------- */
  /* Signal orange. Accents and active states — never a button fill. */
  --primary:              #F4450C;
  --primary-hover:        #FB724F;
  --primary-ultra-light:  #FFF0E4;   /* spark highlight */
  --primary-light:        #F0A08A;   /* pearl inset */
  --primary-semi-light:   #FB724F;
  --primary-semi-dark:    #C23507;
  --primary-dark:         #C23507;
  --primary-ultra-dark:   #7A2104;

  /* Ink. The dark surfaces, lightest to darkest. */
  --base:                 #181818;
  --base-hover:           #202020;
  --base-ultra-light:     #464646;
  --base-light:           #202020;
  --base-semi-light:      #202020;
  --base-semi-dark:       #181818;
  --base-dark:            #0E0E0E;
  --base-ultra-dark:      #0B0B0B;

  /* Paper and greys. */
  --neutral:              #B1B1B1;
  --neutral-hover:        #D2D2D2;
  --neutral-ultra-light:  #F6F6F5;
  --neutral-light:        #D2D2D2;
  --neutral-semi-light:   #B1B1B1;
  --neutral-semi-dark:    #8B8B8B;
  --neutral-dark:         #666666;
  --neutral-ultra-dark:   #464646;

  /* ---- Dark as the default context ------------------------------------ */
  color-scheme: dark;

  --body-bg-color:        #0E0E0E;
  --text-light:           #F6F6F5;
  --text-light-muted:     #B1B1B1;   /* solid, not alpha — keeps contrast */
  --text-dark:            #181818;
  --text-dark-muted:      #464646;
  --text-color:           var(--text-light-muted);
  --heading-color:        var(--text-light);

  /* ---- Background utilities ------------------------------------------- */
  --bg-ultra-dark:        #0B0B0B;
  --bg-dark:              #181818;
  --bg-light:             #202020;
  --bg-ultra-light:       #F6F6F5;

  --bg-ultra-dark-text:   var(--text-light-muted);
  --bg-dark-text:         var(--text-light-muted);
  --bg-light-text:        var(--text-light-muted);
  --bg-ultra-light-text:  #464646;

  --bg-ultra-dark-heading:  var(--text-light);
  --bg-dark-heading:        var(--text-light);
  --bg-light-heading:       var(--text-light);
  --bg-ultra-light-heading: #181818;

  --bg-ultra-dark-icon:   dark;
  --bg-dark-icon:         dark;
  --bg-light-icon:        dark;
  --bg-ultra-light-icon:  light;

  /* ---- Layout --------------------------------------------------------- */
  --content-width:        70rem;      /* 1120px */
  --gutter:               clamp(1.25rem, 4vw, 2.5rem);

  /* Section rhythm. The design runs 96px standard, 112px on major sections. */
  --section-space-xs:     clamp(2.5rem,  4vw, 3.5rem);   /*  40 →  56 */
  --section-space-s:      clamp(3.5rem,  5vw, 4.5rem);   /*  56 →  72 */
  --section-space-m:      clamp(4rem,    7vw, 6rem);     /*  64 →  96  ← standard */
  --section-space-l:      clamp(4.5rem,  8vw, 7rem);     /*  72 → 112  ← major */
  --section-space-xl:     clamp(5.5rem, 10vw, 9rem);     /*  88 → 144 */

  --space-xs:             0.5rem;     /*  8px */
  --space-s:              0.75rem;    /* 12px */
  --space-m:              1rem;       /* 16px */
  --space-l:              1.5rem;     /* 24px */
  --space-xl:             2rem;       /* 32px */
  --space-xxl:            3rem;       /* 48px */

  --content-gap:          var(--space-m);
  --container-gap:        var(--space-xl);
  --grid-gap:             var(--space-l);

  /* ---- Type ----------------------------------------------------------- */
  --text-xs:  clamp(0.6875rem, 0.66rem + 0.14vw, 0.75rem);    /* 11 → 12 */
  --text-s:   clamp(0.8125rem, 0.78rem + 0.16vw, 0.875rem);   /* 13 → 14 */
  --text-m:   clamp(0.9375rem, 0.91rem + 0.14vw, 1rem);       /* 15 → 16  ← body */
  --text-l:   clamp(1.0625rem, 1.02rem + 0.2vw,  1.125rem);   /* 17 → 18  ← lead */
  --text-xl:  clamp(1.25rem,   1.17rem + 0.4vw,  1.375rem);   /* 20 → 22  ← card heading */
  --text-xxl: clamp(1.5rem,    1.34rem + 0.8vw,  1.75rem);    /* 24 → 28 */

  --text-line-height:     1.58;
  --base-text-lh:         1.58;
  --text-m-line-height:   1.6;
  --text-text-wrap:       pretty;

  /* Heading scale, verbatim from the design's clamps. */
  --h1: clamp(38px, 5.2vw, 64px);
  --h2: clamp(30px, 3.6vw, 44px);
  --h3: clamp(24px, 2.6vw, 32px);
  --h4: 1.375rem;    /* 22px — card headings */
  --h5: 1.125rem;    /* 18px */
  --h6: 0.9375rem;   /* 15px */

  --heading-color:        var(--text-light);
  --heading-font-weight:  600;      /* the design never uses 700 */
  --heading-line-height:  1.1;
  --base-heading-lh:      1.1;
  --h4-line-height:       1.36;
  --heading-text-wrap:    balance;
  --heading-spacing:      1em;

  /* ---- Radii ---------------------------------------------------------- */
  --radius:               16px;     /* cards and panels */
  --radius-m:             16px;
  /* --radius-circle (50vw) is the pill radius for buttons — ACSS default */

  /* ---- Borders and dividers ------------------------------------------- */
  --border-color-light:   rgba(246, 246, 245, 0.16);
  --border-color-dark:    rgba(11, 11, 11, 0.5);
  --border:               1px solid rgba(246, 246, 245, 0.16);
  --border-light:         1px solid rgba(246, 246, 245, 0.16);

  --divider-color-light:  rgba(246, 246, 245, 0.16);
  --divider:              1px solid rgba(246, 246, 245, 0.16);
  --divider-light:        1px solid rgba(246, 246, 245, 0.16);

  /* ---- Links ---------------------------------------------------------- */
  --link-color:           #F6F6F5;
  --link-color-hover:     #FB724F;
  --link-decoration:      none;
  --link-weight:          inherit;

  /* ---- Buttons -------------------------------------------------------- */
  --btn-font-size:        var(--text-m);
  --btn-font-weight:      600;
  --btn-line-height:      1;
  --btn-padding-block:    0.85em;
  --btn-padding-inline:   1.4em;
  --btn-min-width:        auto;
  --btn-border-width:     1px;
  --btn-border-radius:    var(--radius-circle);
  --btn-radius:           var(--radius-circle);
  --btn-letter-spacing:   -0.01em;

  /* ---- Icons ---------------------------------------------------------- */
  --icon-color:           #B1B1B1;
  --icon-color-hover:     #F6F6F5;
  --icon-background:      rgba(246, 246, 245, 0.07);
  --icon-background-hover: rgba(246, 246, 245, 0.12);
  --icon-border-color:    rgba(246, 246, 245, 0.16);
  --icon-radius:          999px;
  --icon-size-s:          16px;
  --icon-size-m:          20px;

  /* ---- Motion --------------------------------------------------------- */
  --transition-duration:  0.22s;
  --transition-timing:    var(--ease-snappy);
  --transition:           0.22s cubic-bezier(0.16, 1, 0.3, 1) 0s;

  /* ---- Focus ---------------------------------------------------------- */
  --focus-color:          #FB724F;
  --focus-width:          2px;
  --focus-offset:         2px;

  /* ---- Shadows -------------------------------------------------------- */
  --box-shadow-1: 0 8px 24px rgba(0, 0, 0, 0.35);
  --box-shadow-2: 0 18px 48px rgba(0, 0, 0, 0.50);
  --box-shadow-3: 0 28px 72px rgba(0, 0, 0, 0.60);
}

/* ==========================================================================
   Buttons — design variants

   The design's primary button is Paper fill with Ink text. Signal orange is
   an accent colour, not a button background.

   ACSS's contextual rules (.bg--dark [class*="btn--"]) carry higher
   specificity than .btn--primary, so each variant is declared twice: once
   plainly, once inside the dark background contexts.
   ========================================================================== */

body.jackai .btn--primary,
body.jackai .bg--dark [class*="btn--"]:not(.unrelate).btn--primary,
body.jackai .bg--ultra-dark [class*="btn--"]:not(.unrelate).btn--primary {
  --btn-background:         #F6F6F5;
  --btn-background-hover:   #FFFFFF;
  --btn-text-color:         #181818;
  --btn-text-color-hover:   #181818;
  --btn-border-color:       #F6F6F5;
  --btn-border-color-hover: #FFFFFF;
  --focus-color:            #FB724F;
}

/* Secondary — the translucent pill used beside every primary CTA. */
body.jackai .btn--secondary,
body.jackai .bg--dark [class*="btn--"]:not(.unrelate).btn--secondary,
body.jackai .bg--ultra-dark [class*="btn--"]:not(.unrelate).btn--secondary {
  --btn-background:         rgba(246, 246, 245, 0.07);
  --btn-background-hover:   rgba(246, 246, 245, 0.12);
  --btn-text-color:         #F6F6F5;
  --btn-text-color-hover:   #F6F6F5;
  --btn-border-color:       rgba(246, 246, 245, 0.16);
  --btn-border-color-hover: rgba(246, 246, 245, 0.28);
}

/* 44px minimum hit target on every button. ACSS has no variable for this. */
body.jackai [class*="btn--"]:where(:not(.btn--none, .wp-block-button)) {
  min-block-size: 44px;
}

/* ==========================================================================
   Pasted Code elements

   Sections inside Bricks Code elements carry their own inline padding, gap and
   radii from the prototype. ACSS's zero-specificity :where() defaults lose to
   those inline styles, but its section gap and image radius would still apply
   where the markup happens not to set them. Neutralise both inside code
   blocks only.
   ========================================================================== */

body.jackai .brxe-code section {
  --container-gap: 0;
  --content-gap: 0;
}

body.jackai .brxe-code :where(img, figure) {
  border-radius: 0;
}

/* ==========================================================================
   Fonts and keyframes — the only rules that can't be variables
   ========================================================================== */

body.jackai {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

body.jackai ::selection {
  background: #F4450C;
  color: #F6F6F5;
}

/* Sitewide starfield backdrop. Fixed behind everything, non-interactive.
   This is the prototype's ambient layer — it belongs in CSS rather than as a
   Bricks element, so it survives on every page without being rebuilt. */
body.jackai::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image:
    radial-gradient(1px 1px at 12% 18%, rgba(246,246,245,.55) 50%, transparent 51%),
    radial-gradient(1px 1px at 68% 9%,  rgba(246,246,245,.45) 50%, transparent 51%),
    radial-gradient(1px 1px at 82% 36%, rgba(246,246,245,.40) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 30% 62%, rgba(246,246,245,.35) 50%, transparent 51%),
    radial-gradient(1px 1px at 52% 44%, rgba(246,246,245,.50) 50%, transparent 51%),
    radial-gradient(1px 1px at 91% 74%, rgba(246,246,245,.40) 50%, transparent 51%),
    radial-gradient(1px 1px at 8% 86%,  rgba(246,246,245,.40) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 44% 92%, rgba(246,246,245,.30) 50%, transparent 51%),
    radial-gradient(1px 1px at 22% 40%, rgba(246,246,245,.35) 50%, transparent 51%),
    radial-gradient(1px 1px at 76% 58%, rgba(246,246,245,.30) 50%, transparent 51%);
  background-size: 900px 700px;
}

body.jackai #brx-content,
body.jackai .brx-body {
  position: relative;
  z-index: 1;
}

/* Section top-edge treatment used on major sections. Add class .jj-edge to a
   Bricks section to get the Signal hairline plus its glow. */
body.jackai .jj-edge {
  position: relative;
}

body.jackai .jj-edge::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  opacity: 0.8;
  background: linear-gradient(90deg, transparent 5%, #F4450C 50%, transparent 95%);
}

body.jackai .jj-edge::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 70%;
  height: 160px;
  pointer-events: none;
  background: radial-gradient(60% 100% at 50% 0%, rgba(244,69,12,.22), rgba(246,246,245,.04) 45%, transparent 75%);
}

/* Gradient-clipped headings. The design's h2s fade Paper → grey top to bottom.
   Add .jj-grad to any heading. */
body.jackai .jj-grad {
  background: linear-gradient(180deg, #F6F6F5 0%, #B1B1B1 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Pill badge above section headings — the design's eyebrow treatment. */
body.jackai .jj-badge {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(246, 246, 245, 0.16);
  background: rgba(246, 246, 245, 0.04);
  font-size: 13px;
  font-weight: 500;
  color: #D2D2D2;
}

/* Keep the canvas dark through Bricks' own wrappers. */
body.jackai #brx-content,
body.jackai .brxe-container,
body.jackai .brxe-section {
  background: transparent;
}

@keyframes jjMarquee {
  to { transform: translateX(-50%); }
}

@keyframes jjSpark {
  0%   { opacity: 0;   transform: translate(0, 0) rotate(var(--spark-angle)) scaleX(0.4); }
  8%   { opacity: 0.38; }
  14%  { opacity: 0.7; background: #FFF0E4; box-shadow: 0 0 3px #FFF0E4; }
  20%  { opacity: 0.3; }
  50%  { opacity: 0.18; }
  100% { opacity: 0;   transform: translate(var(--spark-x), var(--spark-fall)) rotate(var(--spark-angle)) scaleX(0.1); }
}

@keyframes jjIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}