/* ==========================================================================
   TWILIGHTRUN CSS SUITE — 01/06 · CORE FRAMEWORK (UNBREAKABLE BASE)
   File: /templates/visualin/css/custom-core.css
   Scope: Global structure • Helix normalization • Header system
   Purpose: Preserve structural integrity & prevent layout cascade
   Compatibility: Joomla (Helix)
   Load Order: 1 of 6 (must load first)
   Depends On: —
   Affects: All downstream layers (layout, theme, sections, membership, overrides)
   Edit Policy: Stable; keep visual/module styles out of core
   Author: TwilightRun.com
   Last Updated: 2025-10-20
   ========================================================================== */

/* ==========================================================================
   SECTION 00/06 · ROOT VARIABLES
   What: Global CSS custom properties (tokens: color, backgrounds, spacing)
   Policy: Tokens only—no selectors or layout here
   ========================================================================== */
: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);
}

/* ==========================================================================
   SECTION 01/06 · GLOBAL RESET (SAFE)
   What: Base html/body, universal box-sizing, media defaults
   Policy: Minimal reset; do not override component visuals here
   ========================================================================== */
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));
}

/* ==========================================================================
   SECTION 02/06 · HELIX / JOOMLA NORMALIZATION
   What: Neutralize deep wrappers, inline paddings, placeholders
   Policy: Structural only; avoid visual styling
   Notes: Includes container-lock attribute & top-offset fixes
   ========================================================================== */

/* -- 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;
}

/* ==========================================================================
   SECTION 03/06 · LAYOUT SYSTEM (TRU ROW/COLUMN)
   What: .tru-row, .tru-column primitives, fixed-width cols, gaps
   Policy: Pure layout; no colors/typography
   Notes: Responsive collapse handled here
   ========================================================================== */

/* 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%;
  }
}

/* ==========================================================================
   SECTION 04/06 · HEADER SYSTEM (STICKY & SEALED)
   What: #sp-header structure, sticky state, placeholder behavior
   Policy: Structural and state only; theme visuals live in theme.css
   ========================================================================== */

/* -- 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;
}

/* ==========================================================================
   SECTION 05/06 · RESPONSIVE SAFEGUARDS
   What: Mobile fallbacks for header and layout primitives
   Policy: Keep narrowly scoped to prevent bleed
   ========================================================================== */
@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 FILE · PHASE 6.1 — STRUCTURAL CORE
   Guardrail: No visual modules below this line
   ========================================================================== */