/* ==================================================
FILE : /assets/01-mstr-tmplet/03-jz-desktop/css-v3/dsktop-w02-jz-title-h1-tool-2w2c.css
LINK : <link rel="stylesheet" href="/assets/01-mstr-tmplet/03-jz-desktop/css-v3/dsktop-w02-jz-title-h1-tool-2w2c.css">
PURPOSE : DESKTOP WIDGET 02 (TOOLS PAGE) - Isolated Variables & Classes.
VERSION: v1.0 - DATE MODIFIED: 2026-04-05 - Full Symmetrical Compression Rewrite
VERSION: v2.0 - DATE MODIFIED: 2026-04-19 - Section 2 - Order Rewrite
==================================================== */

/* ==================================================
   🛠️ BRAT TWEAKS: LOCAL VISUAL CONTROLS
   ================================================== */
.jz-dsktop-w02-tool-master-grid {
  /* --- 📐 GRID & SIZING CONTROLS --- */
  --w02-tool-left-width: 25%; /* <-- Brat Tweak: Width of Left Icon Column */
  --w02-tool-right-width: 75%; /* <-- Brat Tweak: Width of Right Text Column */

  /* --- 📏 COMPRESSION CONTROLS (NEW) --- */
  --w02-tool-icon-size: 80px; /* <-- Brat Tweak: Reduced from 80px to prevent height stretching */
  --w02-tool-min-height: 80px; /* <-- Brat Tweak: Lowered to keep boxes compact */
  --w02-tool-pad-y: 10px; /* <-- Brat Tweak: Top/Bottom gap inside the RGB box */
  --w02-tool-pad-x: 20px; /* <-- Brat Tweak: Left/Right gap inside the RGB box */

  /* --- 🌓 ISOLATED STATIC LINE CONTROLS --- */
  --w02-tool-static-text-dark: #00cc00; /* <-- Brat Tweak: Neon Green for Dark Mode */
  --w02-tool-static-text-light: #008800; /* <-- Brat Tweak: Deeper Green for Light Mode */

  /* --- 🌈 RGB BORDER CONTROLS --- */
  --w02-tool-rgb-speed: 16s;
  --w02-tool-rgb-border: 3px;
  --w02-tool-rgb-colors: #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #9400d3, #ff0000;

  --w02-tool-pill-speed: 10s;
  --w02-tool-pill-colors: #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #9400d3, #ff0000;

  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;

  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important; /* <-- Restored to STRETCH so columns always match height perfectly */
  gap: var(--w02-col-gap, 20px) !important; /* WIRED TO UNIVERSAL CSS */
}

/* ==================================================
   SECTION 1: THE GLASS COLUMNS & INNER RGB BOX (TOOL)
   ================================================== */
.jz-w02-tool-col-left,
.jz-w02-tool-col-right {
  padding: var(--w02-wrapper-pad, 10px); /* <-- Gap between wrapper and RGB border */
  display: flex;
  flex-direction: column;
  box-sizing: border-box !important;
}

.jz-w02-tool-col-left {
  width: calc(var(--w02-tool-left-width) - (var(--w02-col-gap, 20px) / 2)) !important;
  flex: 0 0 calc(var(--w02-tool-left-width) - (var(--w02-col-gap, 20px) / 2)) !important;
}

.jz-w02-tool-col-right {
  width: calc(var(--w02-tool-right-width) - (var(--w02-col-gap, 20px) / 2)) !important;
  flex: 0 0 calc(var(--w02-tool-right-width) - (var(--w02-col-gap, 20px) / 2)) !important;
}

.jz-w02-tool-rgb-box {
  position: relative;
  background: transparent;
  border-radius: 12px;
  width: 100%;
  height: 100%;
  min-height: var(--w02-tool-min-height); /* <-- Wired to Compression Tweaks */
  box-sizing: border-box !important;
  padding: var(--w02-tool-pad-y) var(--w02-tool-pad-x); /* <-- Wired to Compression Tweaks */
  display: flex;
  align-items: center;
  justify-content: center;
}

.jz-w02-tool-rgb-box::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: var(--w02-tool-rgb-border);
  background: linear-gradient(90deg, var(--w02-tool-rgb-colors));
  background-size: 400% 400%;
  animation: jz-tool-rgbFlow var(--w02-tool-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 (TOOL)
   VERSION: v3.0 - CALIBRATED FOR CSS-V3 & SEO
   ================================================== */
.jz-dsktop-w02-tool-content {
  /* --- 🛠️ BRAT TWEAKS: SPACING CONTROLS --- */
  --w02-gap-h1-h2: 4px;
  --w02-gap-sections: 15px;
  --w02-lh-h1: 1.1;
  --w02-lh-h2: 1.2;
  --w02-lh-static: 1.4;

  text-align: center;
  color: var(--jzn-text);
  z-index: 2;
  width: 100%;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

#jz-w02-text-cargo {
  order: 1 !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  margin-bottom: var(--w02-gap-sections) !important;
}

h1.jz-dsktop-w02-tool-heading {
  order: 1 !important;
  font-family: var(--jzn-active-heading-font);
  color: var(--jzn-heading-color);
  font-size: var(--jzn-size-h3); /* <-- Keeps the compact Industrial look */
  font-weight: var(--jzn-font-weight-heading);
  margin: 0 0 var(--w02-gap-h1-h2) 0 !important;
  text-transform: uppercase;
  line-height: var(--w02-lh-h1) !important;
}

/* Selector changed to p (was h2) */
p.jz-dsktop-w02-tool-subheading {
  order: 2 !important;
  font-family: var(--jzn-active-heading-font);
  color: var(--jzn-subtext-color);
  font-size: var(--jzn-size-text);
  font-weight: var(--jzn-font-weight-heading);
  opacity: 0.8;
  margin: 0 !important;
  text-transform: uppercase;
  line-height: var(--w02-lh-h2) !important;
}

/* Selector changed to p (was h3) */
p.jz-tool-universal-static-line {
  order: 2 !important;
  font-family: var(--jzn-active-heading-font);
  color: var(--w02-active-static-text) !important;
  font-size: var(--jzn-size-sub);
  font-weight: var(--jzn-font-weight-heading);
  text-transform: uppercase;
  margin: 0 0 var(--w02-gap-sections) 0 !important;
  letter-spacing: 1px;
  line-height: var(--w02-lh-static) !important;
}

/* ==================================================
   SECTION 3: INDIVIDUAL PILLS (TOOL)
   ================================================== */
.jz-w02-tool-pills-row {
  display: flex;
  flex-direction: row !important;
  justify-content: center;
  align-items: center;
  gap: 12px;
  width: 100%;
}
.jz-w02-tool-individual-pill {
  position: relative;
  border-radius: 50px;
  padding: 3px;
  z-index: 1;
  display: inline-flex !important;
  width: max-content !important;
}
.jz-w02-tool-individual-pill::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--w02-tool-pill-colors));
  background-size: 400% 400%;
  animation: jz-tool-rgbFlow var(--w02-tool-pill-speed) linear infinite;
  z-index: -1;
}
.jz-tool-pill-inner {
  background: var(--jzn-container);
  border-radius: 50px;
  padding: 6px 16px;
  font-family: var(--jzn-active-font);
  font-size: var(--jzn-size-micro);
  font-weight: var(--jzn-font-weight-body);
  color: var(--jzn-text);
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ==================================================
   SECTION 4: THE IMAGE SIZER (TOOL)
   ================================================== */
.jz-w02-tool-icon-img {
  width: var(--w02-tool-icon-size) !important; /* <-- FORCED lock to Brat Tweak */
  max-width: var(--w02-tool-icon-size) !important; /* <-- Prevents global theme overrides */
  height: auto !important;
  object-fit: contain;
  display: block;
  margin: 0 auto;
  flex-shrink: 0; /* <-- Prevents the wrapper's flexbox from stretching or squishing the image */
}

/* ==================================================
   SECTION 5: THE GLOBAL OVERRIDE BRIDGE (TOOL)
   ================================================== */
/* 🌙 Default to Dark Mode */
body div.jzn-container.jz-w02-tool-col-left,
body div.jzn-container.jz-w02-tool-col-right {
  background: var(--jzn-container) !important;
  border: var(--w02-glass-border-dark) !important;
  --w02-active-static-text: var(--w02-tool-static-text-dark);
}
body div.jzn-container.jz-w02-tool-col-left::before,
body div.jzn-container.jz-w02-tool-col-right::before {
  box-shadow: var(--w02-glow-dark) !important;
}

/* ☀️ Light Mode Overrides */
html[data-palette='13'] div.jzn-container.jz-w02-tool-col-left,
html[data-palette='13'] div.jzn-container.jz-w02-tool-col-right,
html[data-palette='14'] div.jzn-container.jz-w02-tool-col-left,
html[data-palette='14'] div.jzn-container.jz-w02-tool-col-right,
html[data-palette='15'] div.jzn-container.jz-w02-tool-col-left,
html[data-palette='15'] div.jzn-container.jz-w02-tool-col-right,
html[data-palette='16'] div.jzn-container.jz-w02-tool-col-left,
html[data-palette='16'] div.jzn-container.jz-w02-tool-col-right,
html[data-palette='17'] div.jzn-container.jz-w02-tool-col-left,
html[data-palette='17'] div.jzn-container.jz-w02-tool-col-right,
html[data-palette='18'] div.jzn-container.jz-w02-tool-col-left,
html[data-palette='18'] div.jzn-container.jz-w02-tool-col-right {
  background: var(--jzn-container) !important;
  border: var(--w02-glass-border-light) !important;
  --w02-active-static-text: var(--w02-tool-static-text-light);
}

html[data-palette='13'] div.jzn-container.jz-w02-tool-col-left::before,
html[data-palette='13'] div.jzn-container.jz-w02-tool-col-right::before,
html[data-palette='14'] div.jzn-container.jz-w02-tool-col-left::before,
html[data-palette='14'] div.jzn-container.jz-w02-tool-col-right::before,
html[data-palette='15'] div.jzn-container.jz-w02-tool-col-left::before,
html[data-palette='15'] div.jzn-container.jz-w02-tool-col-right::before,
html[data-palette='16'] div.jzn-container.jz-w02-tool-col-left::before,
html[data-palette='16'] div.jzn-container.jz-w02-tool-col-right::before,
html[data-palette='17'] div.jzn-container.jz-w02-tool-col-left::before,
html[data-palette='17'] div.jzn-container.jz-w02-tool-col-right::before,
html[data-palette='18'] div.jzn-container.jz-w02-tool-col-left::before,
html[data-palette='18'] div.jzn-container.jz-w02-tool-col-right::before {
  box-shadow: var(--w02-glow-light) !important;
}

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