/* ═══════════════════════════════════════════════════════════════════
   JVPNG · CARBON-FIBER DARK-GREEN OVERLAY (v2)
   Replaces picnic-jvpng-overlay.css. Drops red entirely. Uses brushed
   carbon-fiber background, multi-stop dark-green ramp, cream as the
   only contrast color. Adds spotlight + glow utility classes for the
   GSAP/tsParticles viz pack.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  /* Dark-green ramp (8 stops, brushed-carbon family) */
  --cf-0:#020806;          /* near-black olive */
  --cf-1:#031a0e;          /* deep forest */
  --cf-2:#0a2614;          /* carbon dark */
  --cf-3:#142d18;          /* carbon mid */
  --cf-4:#1f4521;          /* carbon light */
  --cf-5:#2d5d31;          /* moss */
  --cf-6:#3d7541;          /* highlight green */
  --cf-7:#56a061;          /* glow green */
  --cf-8:#7fc887;          /* pulse green */

  /* Cream / parchment ramp (the only non-green contrast) */
  --cm-1:#fbf8f2;
  --cm-2:#e9e1c8;
  --cm-3:#c8c0a4;
  --cm-4:#a49b79;
  --cm-5:#7a6c34;
  --cm-6:#594515;

  /* Backgrounds — base + brushed carbon-fiber pattern overlay */
  --bg-0:var(--cf-0);
  --bg-1:var(--cf-1);
  --bg-2:var(--cf-2);

  /* Re-map the cyberfix gold ramp onto cream/khaki — no yellow gold */
  --gold-hi:var(--cm-1);
  --gold-1:var(--cm-2);
  --gold-2:var(--cm-3);
  --gold-3:var(--cm-4);
  --gold-4:var(--cm-5);
  --gold-5:var(--cm-6);

  /* Greens */
  --gr-1:var(--cf-7);
  --gr-2:var(--cf-5);
  --gr-3:var(--cf-3);
  --gr-4:var(--cf-1);

  --silver-1:var(--cm-1);
  --silver-2:var(--cm-2);
  --silver-3:var(--cm-3);
  --ivory:var(--cm-1);
  --body:var(--cm-2);
  --body-dim:var(--cm-3);

  --frame-outer:var(--cf-5);
  --frame-inner:var(--cf-3);
  --strip:var(--cf-1);

  --headline:var(--cm-1);
  --sub-headline:var(--cm-2);
  --tactical-glow:var(--cf-7);

  --logo-src:url(/wp-content/plugins/arkos-jvpng/assets/picnic-logo-white.png);
}

body[data-p="light"]{
  --cf-0:#f9f3e9; --cf-1:#efe8db; --cf-2:#dcd6c2;
  --bg-0:var(--cf-0); --bg-1:var(--cf-1); --bg-2:var(--cf-2);

  --cm-1:#142d18; --cm-2:#1f4521; --cm-3:#2d5d31; --cm-4:#3d7541; --cm-5:#56a061; --cm-6:#7fc887;

  --gold-hi:#142d18; --gold-1:#1f4521; --gold-2:#2d5d31; --gold-3:#3d7541; --gold-4:#56a061; --gold-5:#7fc887;
  --gr-1:#1f4521; --gr-2:#142d18; --gr-3:#031a0e; --gr-4:#020806;

  --silver-1:#142d18; --silver-2:#2d5d31; --silver-3:#3d7541;
  --body:#142d18; --body-dim:#2d5d31;
  --frame-outer:#2d5d31; --frame-inner:#142d18; --strip:#142d18;
  --headline:#142d18; --sub-headline:#1f4521; --tactical-glow:#3d7541;

  --logo-src:url(/wp-content/plugins/arkos-jvpng/assets/picnic-logo-black.png);
}

/* ─── BRUSHED CARBON-FIBER BACKGROUND ─────────────────────────────── */
/* Layered: base color → tight crosshatch weave → diagonal brush → soft vignette */
body, .jvpng-plaque-canvas{
  background-color:var(--bg-0);
  background-image:
    /* Tight 4px x 4px carbon weave */
    linear-gradient(45deg, var(--cf-2) 25%, transparent 25%),
    linear-gradient(-45deg, var(--cf-2) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--cf-2) 75%),
    linear-gradient(-45deg, transparent 75%, var(--cf-2) 75%),
    /* Diagonal brushed sheen */
    repeating-linear-gradient(135deg, transparent 0 2px, rgba(86,160,97,0.04) 2px 3px),
    /* Soft top-down depth */
    linear-gradient(180deg, var(--cf-2) 0%, var(--cf-1) 40%, var(--cf-0) 100%);
  background-size: 4px 4px, 4px 4px, 4px 4px, 4px 4px, 100% 100%, 100% 100%;
  background-position: 0 0, 0 2px, 2px -2px, -2px 0px, 0 0, 0 0;
  background-attachment: fixed;
}
body[data-p="light"], body[data-p="light"] .jvpng-plaque-canvas{
  background-color:#f9f3e9;
  background-image:
    linear-gradient(45deg, rgba(31,69,33,0.06) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(31,69,33,0.06) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(31,69,33,0.06) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(31,69,33,0.06) 75%),
    repeating-linear-gradient(135deg, transparent 0 2px, rgba(31,69,33,0.025) 2px 3px),
    linear-gradient(180deg, #f9f3e9, #efe8db);
  background-size: 4px 4px, 4px 4px, 4px 4px, 4px 4px, 100% 100%, 100% 100%;
  background-position: 0 0, 0 2px, 2px -2px, -2px 0px, 0 0, 0 0;
}

/* ─── RIBBON: NO RED, just dark forest with cream stripes ────────── */
.ribbon{
  background:linear-gradient(180deg, var(--cf-5), var(--cf-3) 50%, var(--cf-1));
  border:1.5px solid var(--cf-7);
  color:var(--cm-1);
  text-shadow:0 1px 0 rgba(0,0,0,.45);
  position:relative;
}
.ribbon::before,.ribbon::after{background:var(--cf-1)}
/* Stars: cream not red */
.stars{color:var(--cm-2);text-shadow:0 0 8px rgba(127,200,135,.30)}
body[data-p="light"] .stars{color:#1f4521;text-shadow:none}
.est{color:var(--cm-2)}
body[data-p="light"] .est{color:#1f4521}

/* ─── BUTTON: brushed gilt → brushed cream-on-green ──────────────── */
.btn-gilt, .explore{
  background:linear-gradient(180deg, var(--cm-1) 0%, var(--cm-2) 25%, var(--cm-3) 60%, var(--cm-4) 100%);
  border:1px solid var(--cf-3);
  color:var(--cf-1);
  text-shadow:0 1px 0 rgba(255,255,255,.25);
}
.btn-gilt::before{
  background:linear-gradient(100deg, transparent, rgba(127,200,135,.55), transparent);
}

/* ─── BARE LOGO (no medallion circle) ────────────────────────────── */
.jvp-pic-medallion-bare .jvp-pic-logo{
  display:block;
  width:clamp(160px,18vw,260px);
  height:auto;
  margin:0 auto 18px;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.55));
}
body[data-p="light"] .jvp-pic-medallion-bare .jvp-pic-logo{
  filter:drop-shadow(0 4px 10px rgba(20,45,24,.30));
}
.hero::before{display:none}

/* ─── SPOTLIGHT / GLOW UTILITIES (driven by GSAP elsewhere) ──────── */
.cf-spotlight{
  position:relative;
  isolation:isolate;
}
.cf-spotlight::after{
  content:"";
  position:absolute;inset:-12px;
  border-radius:inherit;
  background:radial-gradient(circle at center, rgba(127,200,135,.35), transparent 70%);
  opacity:.85;
  z-index:-1;
  pointer-events:none;
  animation: cf-pulse 2.6s ease-in-out infinite;
}
@keyframes cf-pulse{
  0%,100%{opacity:.55;transform:scale(1)}
  50%{opacity:.95;transform:scale(1.04)}
}
.cf-glow-edge{
  box-shadow:
    inset 0 0 0 1px rgba(127,200,135,.25),
    0 0 24px rgba(127,200,135,.18),
    0 0 48px rgba(86,160,97,.08);
}
body[data-p="light"] .cf-glow-edge{
  box-shadow:
    inset 0 0 0 1px rgba(20,45,24,.20),
    0 0 18px rgba(31,69,33,.12);
}
.cf-fade-up{ opacity:0; transform:translateY(20px); }
.cf-fade-in{ opacity:0; }

/* ─── BRIEF-BAR: green pulse, no red ────────────────────────────── */
.brief-bar{color:var(--cf-7)}
.brief-bar .live::before{background:var(--cf-7);box-shadow:0 0 8px var(--cf-7)}
.brief-lines li::before{color:var(--cf-7);text-shadow:0 0 6px var(--cf-7)}
body[data-p="light"] .brief-bar{color:#1f4521;border-color:rgba(31,69,33,.30)}
body[data-p="light"] .brief-bar .live::before{background:#1f4521;box-shadow:0 0 6px #1f4521}
body[data-p="light"] .brief-lines li::before{color:#1f4521}

/* ─── CAP TILE: green glow, brushed-green frame ─────────────────── */
.cap.open{
  border-color:var(--cm-3);
  box-shadow:
    inset 0 0 0 3px var(--cf-0),
    inset 0 0 0 4px var(--cf-3),
    0 0 30px rgba(127,200,135,.18);
}
body[data-p="light"] .cap.open{
  box-shadow:
    inset 0 0 0 3px var(--bg-0),
    inset 0 0 0 4px var(--cf-3),
    0 0 16px rgba(31,69,33,.20);
}

/* ─── CART (stat card) — readable on carbon ─────────────────────── */
.cart{
  background:linear-gradient(180deg, rgba(20,45,24,.55), rgba(2,8,6,.75));
  border:1px solid var(--cm-4);
}
body[data-p="light"] .cart{
  background:linear-gradient(180deg, rgba(249,243,233,.95), rgba(220,214,194,.85));
}

/* ─── tsParticles + canvas backdrops sit at z-index:-2 ──────────── */
#tsparticles, #ts-bg, .cf-particles{
  position:fixed;inset:0;z-index:-2;pointer-events:none;
}
#matrix-canvas, #dust-canvas{display:none !important;}

/* ─── HERO numbers / cart numbers — let them count up cleanly ───── */
.cart .num{transition:none}

/* ─── BRUSHED GOLD ON ALL FORWARD-FACING HEADLINES ────────────────
   The same gold treatment we use on JVPNG MEETING — applied to every
   public-facing big headline so the typeface reads consistently
   "JVPNG" across picnic, check-in TV, and future plaque pages. */
.hero-word, .hero-sub, .section-head h3, .cart .num, .tv-title h1, .proclaim h3{
  background:linear-gradient(180deg,#fff4c4 0%,#ffe38a 25%,#e8c070 50%,#c09240 78%,#7a5a1c 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.65)) drop-shadow(0 0 18px rgba(232,192,112,.18));
}
body[data-p="light"] .hero-word, body[data-p="light"] .hero-sub,
body[data-p="light"] .section-head h3, body[data-p="light"] .cart .num,
body[data-p="light"] .tv-title h1, body[data-p="light"] .proclaim h3{
  background:linear-gradient(180deg,#7a5a1c 0%,#a67b20 30%,#c89630 60%,#7a5a1c 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 1px 1px rgba(255,255,255,.4));
}

/* Script eyebrow ("The annual" / "Welcome to today's") in soft gold */
.eyebrow, .section-head .k, .proclaim .k, .tv-title .k{ color:#e8c070 !important; text-shadow:0 2px 6px rgba(0,0,0,.5) }
body[data-p="light"] .eyebrow, body[data-p="light"] .section-head .k,
body[data-p="light"] .proclaim .k, body[data-p="light"] .tv-title .k{ color:#7a5a1c !important; text-shadow:none }

/* Subline directly under hero-sub stays gold-ish, not cream */
.ptag, .tv-title .sub{ color:#e8c070 !important; text-shadow:0 1px 4px rgba(0,0,0,.55) }
body[data-p="light"] .ptag, body[data-p="light"] .tv-title .sub{ color:#7a5a1c !important; text-shadow:none }

/* ─── Footstrip / SOT footer — match new palette ─────────────────── */
.footstrip{background:linear-gradient(180deg, var(--cf-1), rgba(2,8,6,.7));border-top:2px solid var(--cf-5)}
/* Footer link names (incl BRAD KELLAM) in gold — !important + :link/:visited
   so it beats the cyberfix base `a{color:...}` rule at every specificity level */
.footstrip .row1 a,
.footstrip .row1 a:link,
.footstrip .row1 a:visited,
.footstrip .row1 a:hover{
  background:linear-gradient(180deg,#fff4c4 0%,#ffe38a 30%,#e8c070 60%,#c09240 100%) !important;
  -webkit-background-clip:text !important; background-clip:text !important;
  -webkit-text-fill-color:transparent !important; color:transparent !important;
  text-decoration:none !important;
}
body[data-p="light"] .footstrip .row1 a,
body[data-p="light"] .footstrip .row1 a:link,
body[data-p="light"] .footstrip .row1 a:visited{
  background:linear-gradient(180deg,#7a5a1c 0%,#a67b20 50%,#7a5a1c 100%) !important;
  -webkit-background-clip:text !important; background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
}
.footstrip .row1 a:hover{filter:brightness(1.15)}
.footstrip .row1 .pipe{color:var(--cm-4)}
.footstrip .row2{color:var(--cm-3)}
.sot-footer{color:var(--cm-3)}
.sot-footer .sot-hit{color:#e8c070;font-weight:700}
body[data-p="light"] .sot-footer .sot-hit{color:#7a5a1c}

/* Picnic page contact email link (e.g., bk@jvpng.com) — gold */
.jvp-picnic-foundation-note a{color:#e8c070 !important}
body[data-p="light"] .jvp-picnic-foundation-note a{color:#7a5a1c !important}