/* =====================================================================
   Jersey Teamwear — SITE THEME SKINS (v26, 2026-10-16)
   Companion to jt-themes.js. Every rule here is inert unless a skin
   is active: accent retints are applied by the applier as inline CSS
   variables on <html data-theme="…"> (single source = the config
   palette); this file carries the banner, the motifs, the hero-glow
   retint, and the featured-pattern pointer ring. Motifs live ONLY in
   the banner and the homepage hero glow — never on the jersey canvas,
   the wizard, or any control surface.
   ===================================================================== */

/* ---- the banner strip ---- */
.jt-theme-banner {
  position: relative;
  background: var(--jt-bannerbg, #0a5c1e);
  color: var(--jt-bannerink, #ffffff);
  font-family: inherit;
  font-size: 13.5px;
  line-height: 1.45;
  text-align: center;
  padding: 10px 48px 10px 16px;
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.22);
  overflow: hidden;
}
.jt-theme-banner .jt-tb-text { position: relative; z-index: 1; }
.jt-theme-banner strong { font-weight: 800; letter-spacing: 0.01em; }
.jt-theme-banner a { color: inherit; font-weight: 700; text-decoration: underline; }
.jt-tb-partner { font-weight: 600; }
.jt-tb-x {
  position: absolute; z-index: 2;
  top: 50%; right: 8px; transform: translateY(-50%);
  width: 32px; height: 32px;
  border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  color: inherit; font-size: 18px; line-height: 1;
  cursor: pointer; padding: 0;
}
.jt-tb-x:hover { background: rgba(255, 255, 255, 0.3); }

/* ---- motifs: a translucent layer inside the banner only ---- */
.jt-theme-banner::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
}
.jt-theme-banner[data-motif="dots"]::before {
  background-image:
    radial-gradient(circle, var(--jt-pop, #f59e0b) 1.7px, transparent 1.8px),
    radial-gradient(circle, rgba(255, 255, 255, 0.5) 1.2px, transparent 1.3px);
  background-size: 30px 30px, 30px 30px;
  background-position: 0 0, 15px 15px;
  opacity: 0.5;
}
.jt-theme-banner[data-motif="snow"]::before {
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, 0.95) 1.8px, transparent 1.9px),
    radial-gradient(circle, rgba(255, 255, 255, 0.6) 1.2px, transparent 1.3px),
    radial-gradient(circle, rgba(255, 255, 255, 0.75) 1.4px, transparent 1.5px);
  background-size: 46px 46px, 30px 30px, 64px 64px;
  background-position: 0 0, 11px 17px, 23px 5px;
  opacity: 0.55;
}
.jt-theme-banner[data-motif="sparkle"]::before {
  background-image:
    radial-gradient(circle, var(--jt-pop, #e3b505) 2px, transparent 2.1px),
    radial-gradient(circle, rgba(255, 255, 255, 0.85) 1.1px, transparent 1.2px);
  background-size: 52px 52px, 26px 26px;
  background-position: 0 0, 13px 13px;
  opacity: 0.55;
}
.jt-theme-banner[data-motif="steps"]::before {
  background-image:
    repeating-linear-gradient(45deg, transparent 0 11px, rgba(255, 255, 255, 0.13) 11px 13px),
    repeating-linear-gradient(-45deg, transparent 0 11px, rgba(255, 255, 255, 0.13) 11px 13px);
  opacity: 0.8;
}
.jt-theme-banner[data-motif="stars"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cpath d='M16 5 L19.2 12.4 L27.2 12.8 L21.2 17.8 L23 25.6 L16 21.6 L9 25.6 L10.8 17.8 L4.8 12.8 L12.8 12.4 Z' fill='%23F5C542' fill-opacity='0.5'/%3E%3Cpath d='M46 36 L47.6 39.9 L51.8 40.1 L48.4 42.7 L49.5 46.9 L46 44.5 L42.5 46.9 L43.6 42.7 L40.2 40.1 L44.4 39.9 Z' fill='%23FFFFFF' fill-opacity='0.55'/%3E%3C/svg%3E");
  background-size: 64px 64px;
  opacity: 0.8;
}

/* ---- hero zone: the homepage glow retints toward the skin ---- */
html[data-theme] .glow-hero {
  background:
    radial-gradient(620px 320px at 12% -4%, color-mix(in srgb, var(--jt-pop, #96eb0d) 20%, transparent), transparent 62%),
    radial-gradient(760px 420px at 88% 6%, color-mix(in srgb, var(--color-greenmid, #43a047) 20%, transparent), transparent 64%),
    radial-gradient(900px 500px at 50% 115%, color-mix(in srgb, var(--color-green, #0a5c1e) 8%, transparent), transparent 60%);
}

/* ---- featured-pattern pointer ring (Studio picker) ---- */
.patterns button.theme-pick {
  border-color: var(--jt-pop, #e3b505);
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 5px var(--jt-pop, #e3b505);
}