/* ==================================================
FILE : /assets/01-mstr-tmplet/03-jz-desktop/css-v2/dsktop-w02-jz-title-h1-hmpg.css
LINK : <link rel="stylesheet" href="/assets/01-mstr-tmplet/03-jz-desktop/css-v2/dsktop-w02-jz-title-h1-hmpg.css">
PURPOSE : DESKTOP WIDGET 02 (HOMEPAGE) - Isolated Variables & Classes
VERSION: v1.0 - DATE CREATED: 2026-04-05 - Studio Typography Wiring & H1/H2/H3 SEO Injection
==================================================== */

/* ==================================================
   🛠️ BRAT TWEAKS: LOCAL VISUAL CONTROLS
   ================================================== */
.jz-dsktop-w02-hmpg-wrapper {
  /* --- 🌓 ISOLATED STATIC LINE CONTROLS --- */
  --w02-hmpg-static-text-dark: #00cc00; /* <-- Brat Tweak: Neon Green for Dark Mode */
  --w02-hmpg-static-text-light: #008800; /* <-- Brat Tweak: Deeper Green for Light Mode legibility */

  --w02-hmpg-rgb-speed: 16s; /* <-- Brat Tweak: Speed of main outer RGB border */
  --w02-hmpg-rgb-border: 3px; /* <-- Brat Tweak: Thickness of main RGB border */
  --w02-hmpg-rgb-colors:
    #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #9400d3, #ff0000; /* <-- Brat Tweak: Main 8 colors */

  --w02-hmpg-pill-speed: 10s; /* <-- Brat Tweak: Speed of individual pills */
  --w02-hmpg-pill-colors:
    #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #9400d3, #ff0000; /* <-- Brat Tweak: Colors for individual pills */

  width: 100%;
  max-width: var(--jzn-max-width) !important;
  box-sizing: border-box !important;
  margin: var(--w02-margin-top, 15px) auto var(--w02-margin-bottom, 15px) auto !important;
  padding: var(--w02-wrapper-pad, 10px);
}

/* ==================================================
   SECTION 1: THE INNER RGB BOX (HMPG)
   ================================================== */
.jz-dsktop-w02-hmpg-rgb-box {
  position: relative;
  background: transparent;
  border-radius: 12px;
  width: 100%;
  min-height: 100px; /* <-- Brat Tweak: COMPRESSED from 150px */
  box-sizing: border-box !important;
  padding: 15px 20px; /* <-- Brat Tweak: COMPRESSED inner padding (was 30px top/bottom) */
  display: flex;
  align-items: center;
  justify-content: center;
}

.jz-dsktop-w02-hmpg-rgb-box::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: var(--w02-hmpg-rgb-border);
  background: linear-gradient(90deg, var(--w02-hmpg-rgb-colors));
  background-size: 400% 400%;
  animation: jz-hmpg-rgbFlow var(--w02-hmpg-rgb-speed) linear infinite;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  z-index: -1;
}

/* ==================================================
   SECTION 2: CONTENT & TYPOGRAPHY (HMPG)
   ================================================== */
.jz-dsktop-w02-hmpg-content {
  text-align: center;
  color: var(--jzn-text);
  z-index: 2;
  width: 100%;
}

.jz-dsktop-w02-hmpg-heading {
  font-family: var(--jzn-active-heading-font); /* <-- Brat Tweak: Studio Heading Font */
  color: var(--jzn-heading-color);
  /* 👇 SHIFTED TO H3 VARIABLE FOR COMPACT PREMIUM LOOK */
  font-size: var(--jzn-size-h3);
  font-weight: var(--jzn-font-weight-heading);
  margin: 0 0 4px 0;
  text-transform: uppercase;
  line-height: 1.1;
}

.jz-dsktop-w02-hmpg-subheading {
  font-family: var(--jzn-active-heading-font);
  color: var(--jzn-subtext-color);
  /* 👇 SHIFTED TO TEXT VARIABLE FOR COMPACT PREMIUM LOOK */
  font-size: var(--jzn-size-text);
  font-weight: var(--jzn-font-weight-heading);
  opacity: 0.8;
  margin: 0 0 8px 0;
  text-transform: uppercase;
}

.jz-hmpg-universal-static-line {
  font-family: var(--jzn-active-heading-font);
  color: var(--w02-active-static-text) !important;
  /* 👇 SHIFTED TO SUB VARIABLE FOR COMPACT PREMIUM LOOK */
  font-size: var(--jzn-size-sub);
  font-weight: var(--jzn-font-weight-heading);
  text-transform: uppercase;
  margin: 0 0 15px 0;
  letter-spacing: 1px;
}

/* ==================================================
   SECTION 3: INDIVIDUAL PILLS (HMPG)
   ================================================== */
.jz-w02-hmpg-pills-row {
  display: flex;
  flex-direction: row !important;
  justify-content: center;
  align-items: center;
  gap: 12px; /* <-- Brat Tweak: COMPRESSED space between pills (was 20px) */
  width: 100%;
}
.jz-w02-hmpg-individual-pill {
  position: relative;
  border-radius: 50px;
  padding: 3px; /* <-- Brat Tweak: Thickness of RGB border on pills */
  z-index: 1;
  display: inline-flex !important;
  width: max-content !important;
}
.jz-w02-hmpg-individual-pill::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--w02-hmpg-pill-colors));
  background-size: 400% 400%;
  animation: jz-hmpg-rgbFlow var(--w02-hmpg-pill-speed) linear infinite;
  z-index: -1;
}
.jz-hmpg-pill-inner {
  background: var(--jzn-container);
  border-radius: 50px;
  padding: 6px 16px;
  font-family: var(--jzn-active-font); /* <-- Brat Tweak: Studio Font Engine */
  font-size: var(--jzn-size-micro); /* <-- Brat Tweak: Studio Fluid Micro Size (Shrunk per request) */
  font-weight: var(--jzn-font-weight-body); /* <-- Brat Tweak: Studio Body Weight */
  color: var(--jzn-text); /* <-- Brat Tweak: Studio Body Text Color */
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ==================================================
   SECTION 4: THE IMAGE SIZER (N/A for HMPG)
   ================================================== */
/* Reserved to maintain section parity with W02-Tool */

/* ==================================================
   SECTION 5: THE GLOBAL OVERRIDE BRIDGE (HMPG)
   ================================================== */
/* 🌙 Default to Dark Mode */
body div.jz-dsktop-w02-hmpg-wrapper.jzn-container {
  background: var(--jzn-container) !important; /* <-- Brat Tweak: Studio Background tint */
  border: var(--w02-glass-border-dark) !important; /* <-- Brat Tweak: Universal Control File */
  --w02-active-static-text: var(--w02-hmpg-static-text-dark); /* <-- Brat Tweak: Flips static line to Dark Mode color */
}
body div.jz-dsktop-w02-hmpg-wrapper.jzn-container::before {
  box-shadow: var(--w02-glow-dark) !important; /* <-- Brat Tweak: Universal Control File */
}

/* ☀️ Light Mode Overrides */
html[data-palette='13'] div.jz-dsktop-w02-hmpg-wrapper.jzn-container,
html[data-palette='14'] div.jz-dsktop-w02-hmpg-wrapper.jzn-container,
html[data-palette='15'] div.jz-dsktop-w02-hmpg-wrapper.jzn-container,
html[data-palette='16'] div.jz-dsktop-w02-hmpg-wrapper.jzn-container,
html[data-palette='17'] div.jz-dsktop-w02-hmpg-wrapper.jzn-container,
html[data-palette='18'] div.jz-dsktop-w02-hmpg-wrapper.jzn-container {
  background: var(--jzn-container) !important; /* <-- Brat Tweak: Studio Background tint */
  border: var(--w02-glass-border-light) !important; /* <-- Brat Tweak: Universal Control File */
  --w02-active-static-text: var(--w02-hmpg-static-text-light); /* <-- Brat Tweak: Flips static line to Light Mode color */
}

html[data-palette='13'] div.jz-dsktop-w02-hmpg-wrapper.jzn-container::before,
html[data-palette='14'] div.jz-dsktop-w02-hmpg-wrapper.jzn-container::before,
html[data-palette='15'] div.jz-dsktop-w02-hmpg-wrapper.jzn-container::before,
html[data-palette='16'] div.jz-dsktop-w02-hmpg-wrapper.jzn-container::before,
html[data-palette='17'] div.jz-dsktop-w02-hmpg-wrapper.jzn-container::before,
html[data-palette='18'] div.jz-dsktop-w02-hmpg-wrapper.jzn-container::before {
  box-shadow: var(--w02-glow-light) !important; /* <-- Brat Tweak: Universal Control File */
}

/* ==================================================
   SECTION 6: KEYFRAMES (HMPG)
   ================================================== */
@keyframes jz-hmpg-rgbFlow {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 400% 50%;
  }
}