/* ==================================================
FILE : /assets/01-mstr-tmplet/01-jzn-global-mstr/css/jzn-global-mstr-v3.css
LINK : <link rel="stylesheet" href="/assets/01-mstr-tmplet/01-jzn-global-mstr/css/jzn-global-mstr-v3.css">
PURPOSE : THE ONE TRUE MASTER - Global Layout, Breakpoints & 2-Zone Logic
VERSION: v1.0 - DATE CREATED: 2026-02-21 - Modular Reset
VERSION: v2.0 - DATE MODIFIED: 2026-02-24 - Implemented 1200px Max & 2-Zone Split
VERSION: v3.0 - DATE MODIFIED: 2026-05-28 - SEO Refactor & Element-Agnostic Wrapper Alignment
VERSION: v4.0 - DATE MODIFIED: 2026-05-28 - Final JXTA Namespace Isolate System Release
==================================================== */

/* ==================================================
   THE MASTER Z-INDEX SWITCHBOARD (STAYS AS IS)
   Purpose: Centralized control to prevent "Z-Index Wars"
   ================================================== */
:root {
  --z-canvas: 0; /* <-- Brat Tweak: Base Layer */
  --z-bg-layer: 1; /* Deep Background */
  --z-content: 100; /* Main Page Content */
  --z-search-overlay: 900; /* Downstairs from TopBar */
  --z-topbar-king: 1000; /* The King Floor (Main Nav) */
  --z-logo-engine: 1001; /* <-- Brat Tweak: The Logo Floor (King + 1) */
  --z-dropdowns: 1100; /* Inside/Above the King's Floor */
  --z-hamburger: 1200; /* The Topmost Toggle */

  /* Layout Constraints */
  --jzn-max-width: 1200px; /* <-- Brat Tweak: The Global Hard Limit */
}

/* ==================================================
   SECTION 1: ATOMIC RESET
   ================================================== */
* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background-color: var(--jzn-bg) !important;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--jzn-font-body, sans-serif);
  color: var(--jzn-text);
  line-height: 1.6;
  overflow-x: hidden;
  position: relative;
  z-index: var(--z-content);
}

/* ==================================================
   SECTION 2: GLOBAL CONTAINERS & CANVAS (JXTA Isolate System)
   ================================================== */
.jxta-mstr-container {
  width: 100%;
  max-width: var(--jzn-max-width);
  margin: 0 auto !important;
  padding: 0 20px;
  position: relative;
}

.jxta-bg-layer {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: var(--z-bg-layer) !important;
  pointer-events: none;
  display: block !important;
  background-color: var(--jzn-bg);
}

/* ==================================================
   SECTION 3: ZONE 1 - MOBILE & SMALL TABLET (300px - 767px)
   ================================================== */
@media (max-width: 767px) {
  body {
    padding-top: 60px !important; /* <-- Brat Tweak: Mobile TopBar Height */
  }

  .jxta-desktop-only {
    display: none !important;
  }
  .jxta-mobile-only {
    display: block !important;
  }

  /* Grid Adjustment for Mobile Widgets mapped to JXTA Workspace Space */
  .jxta-mstr-grid {
    display: flex;
    flex-direction: column; /* Stacks everything vertically */
    gap: 15px;
  }
}

/* ==================================================
   SECTION 4: ZONE 2 - DESKTOP & IPAD (768px - 1200px+)
   ================================================== */
@media (min-width: 768px) {
  body {
    padding-top: var(--jzn-topbar-h-desktop, 150px) !important; /* <-- Brat Tweak: Dynamic Sync */
  }

  .jxta-desktop-only {
    display: block !important;
  }
  .jxta-mobile-only {
    display: none !important;
  }

  /* REFACTORED SECURE LOCK: Completely pure class hooks, totally agnostic of native tags */
  .jxta-mstr-container,
  .jxta-container {
    max-width: var(--jzn-max-width);
    margin: 0 auto !important;
  }
}

/* ==================================================
   SECTION 5: UTILS (Premium Glass Scrollbar)
   ================================================== */
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--jzn-glass-border);
  border-radius: 10px;
  border: 1px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--jzn-hover);
}