/* ==================================================
FILE : /assets/01-mstr-tmplet/jzn-global-mstr/css/jzn-global-mstr.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
==================================================== */

/* ==================================================
   THE MASTER Z-INDEX SWITCHBOARD
   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
   ================================================== */
.jzn-mstr-container {
  width: 100%;
  max-width: var(--jzn-max-width);
  margin: 0 auto !important;
  padding: 0 20px;
  position: relative;
}

.jzn-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 */
  }

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

  /* Grid Adjustment for Mobile Widgets */
  .jzn-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 {
    /* Updated to sync with the new 150px TopBar height */
    padding-top: var(
      --jzn-topbar-h-desktop,
      150px
    ) !important; /* <-- Brat Tweak: Dynamic Sync */
  }

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

  /* Constraint for very large screens - Centering the site */
  .jzn-mstr-container,
  .jzn-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);
}