/* =========================================================
   PHASE 6.1 — TWILIGHT RUN CORE FRAMEWORK (UNBREAKABLE BASE)
   Scope: Global Structure • Helix Normalization • Header System
   Purpose: Preserve structural integrity & prevent layout cascade
========================================================= */

/* ---------- 0. ROOT VARIABLES ---------- */
:root {
  --accent-gold: #ffd65c;
  --accent-cyan: #00eaff;
  --accent-crimson: #ff4a4a;
  --accent-silver: #cfcfcf;

  --base-bg: #000;
  --base-text: #e0e0e0;
  --panel-bg: rgba(22,22,30,0.75);
}

/* ---------- 1. GLOBAL RESET (SAFE) ---------- */
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  min-height: 100%;
  background: var(--base-bg);
  color: var(--base-text);
  font-family: 'Montserrat', sans-serif;
  overflow-x: hidden;
}

*, *::before, *::after { box-sizing: border-box; }

img, svg {
  display: block;
  max-width: 100%;
  height: auto;
  border: 0;
  filter: brightness(0.96) contrast(1.08);
  transition: filter 0.35s ease;
}
img:hover {
  filter: brightness(1.08) contrast(1.1)
          drop-shadow(0 0 10px rgba(255,214,92,0.4));
}

/* =========================================================
   2. HELIX / JOOMLA NORMALIZATION
   Neutralizes deep container nesting & inline padding
========================================================= */

/* -- Flatten wrappers within Helix sections -- */
.body-wrapper,
.body-innerwrapper,
.sp-pagebuilder,
.sppb-section,
.sppb-row,
.sp-row,
.container,
.container-inner,
.sp-column,
.sp-module,
.sp-module-content,
.mod-custom {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;
  background: none !important;
  position: relative !important;
}

/* -- Container Lock Attribute (safe to apply per module) -- */
[data-phase6-container="lock"] > * {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: none !important;
}

/* -- Remove Helix padding offset above main body -- */
body > .body-innerwrapper,
#sp-main-body {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* =========================================================
   3. LAYOUT SYSTEM (TRU-ROW / COLUMN)
========================================================= */

/* Legacy rows remain safe but non-global */
.tru-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 30px;
  width: 100%;
  margin: 0 auto;
}

.tru-column {
  flex: 1 1 100%;
  padding: 0 15px;
  box-sizing: border-box;
}

.tru-col-2 { flex: 0 0 50%; max-width: 50%; }
.tru-col-3 { flex: 0 0 33.333%; max-width: 33.333%; }
.tru-col-4 { flex: 0 0 25%; max-width: 25%; }

/* Responsive Collapse */
@media (max-width: 900px) {
  .tru-col-2, .tru-col-3, .tru-col-4 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* =========================================================
   4. HEADER SYSTEM (STICKY & SEALED)
========================================================= */

/* -- Core header container -- */
#sp-header,
#sp-header .sp-row,
#sp-header .sp-column {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  margin: 0 auto !important;
  background: linear-gradient(180deg, rgba(10,10,15,0.98), rgba(6,6,8,0.95));
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(255,255,255,0.05);
  box-shadow: 0 4px 20px rgba(0,0,0,0.85);
  z-index: 9999;
}

/* -- Sticky state lock -- */
body.js-sticky-header-active #sp-header {
  position: fixed !important;
  top: 0; left: 0;
  width: 100%;
  z-index: 9999;
  box-shadow: 0 6px 18px rgba(0,0,0,0.8);
}

/* -- Placeholder neutralized -- */
.sticky-header-placeholder {
  display: block !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* =========================================================
   5. RESPONSIVE SAFEGUARDS
========================================================= */
@media (max-width: 767px) {
  #sp-header { flex-direction: column; }
  .tru-row { flex-direction: column; }
  .tru-column,
  .tru-col-2,
  .tru-col-3,
  .tru-col-4 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* =========================================================
   END OF PHASE 6.1 — STRUCTURAL CORE
   (No visual modules below this line)
========================================================= */