/* =====================================================================
   SHIM-ME Hub — Global Tokens (Bucket C)
   Loads on every front-end page when the plugin is active.
   Owns: design tokens (CSS vars), font wiring, base resets,
   reusable utility classes (.eyebrow, .h2, .lead, .hl, .mono, .btn).
   Colors are TOKENS, not palette IDs — front-end is independent of
   Total palettes. Use Total palettes for the row chrome (wpex_bg_color).
   ===================================================================== */

:root {
  --shim-bg:        #0B0B0B;
  --shim-bg-2:      #131313;
  --shim-bg-3:      #1A1A1A;
  --shim-surface:   #1C1C1C;
  --shim-surface-2: #232323;
  --shim-line:      #2A2A2A;
  --shim-line-2:    #3A3A3A;
  --shim-text:      #F5F5F4;
  --shim-text-dim:  #A8A6A2;
  --shim-text-mute: #6E6C68;
  --shim-red:       #E31D1E;
  --shim-red-deep:  #B81718;
  --shim-red-glow:  rgba(227, 29, 30, 0.35);
  --shim-grid-line: rgba(255, 255, 255, 0.04);

  --shim-display: "Barlow Condensed", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --shim-body:    "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --shim-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --shim-container: 1320px;
  --shim-gutter:    40px;
}

/* ---------- Total container-width safeguard --------------------------
   Total uses --wpex-container-width for the actual container WIDTH and
   --wpex-container-max-width only as the desktop cap. When the theme's
   "Container Width" Customizer field is set to a fixed px value, Total
   hard-pins --wpex-container-width to that px on :root, so .container and
   its nested wrappers (#content-wrap, #primary, #content, #single-blocks,
   .single-page-content) can no longer shrink below it on mobile — content
   overflows the viewport and a blank/black gutter appears.

   Restore fluid width while keeping the 1280px desktop cap. !important
   wins over Total's plain declaration regardless of source order (Total
   injects #wpex-css inline AFTER this stylesheet — see §0 note below).

   PERMANENT FIX (this CSS is only a safeguard): set Appearance → Customize
   → General → Container Width to a percentage (100%), not a fixed 1280px.
   -------------------------------------------------------------------- */
:root,
.site-boxed.wpex-responsive #wrap {
  --wpex-container-width: 100% !important;
  --wpex-container-max-width: 1280px !important;
}

/* ---------- Base typography (scoped to .shim-scope to avoid clobbering
   Total/admin defaults; every shortcode wrapper gets .shim-scope)

   §0 note: Total injects inline <style> blocks AFTER our stylesheet, so
   tied-specificity selectors lose on source order. Using  body .shim-scope
   as the prefix and !important on every color/font prop ensures the plugin
   wins regardless of what Total or WPBakery loads after us.
   -------------------------------------------------------------------- */
.shim-scope,
.shim-scope * { box-sizing: border-box; }

body .shim-scope {
  font-family: var(--shim-body) !important;
  font-size: 16px;
  line-height: 1.55;
  color: var(--shim-text) !important;
  -webkit-font-smoothing: antialiased;
}
.shim-scope img { display: block; max-width: 100%; }
body .shim-scope a   { color: inherit; text-decoration: none; }
body .shim-scope button { font: inherit; cursor: pointer; }

/* ---------- Utility classes (re-used across shortcodes + header) ----- */
body .shim-scope .shim-eyebrow {
  font-family: var(--shim-mono) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.22em !important;
  color: var(--shim-red) !important;
  margin: 0 0 18px;
}
body .shim-scope .shim-eyebrow--light { color: var(--shim-text-dim) !important; }

body .shim-scope .shim-h2 {
  font-family: var(--shim-display) !important;
  font-weight: 800 !important;
  font-size: clamp(40px, 5.2vw, 76px) !important;
  line-height: 0.98 !important;
  letter-spacing: -0.01em !important;
  text-transform: uppercase !important;
  color: var(--shim-text) !important;
  margin: 0 0 28px;
}

body .shim-scope .shim-lead {
  font-size: 18px !important;
  line-height: 1.6 !important;
  color: var(--shim-text-dim) !important;
  max-width: 60ch;
}

body .shim-scope .shim-hl   { color: var(--shim-red) !important; }
body .shim-scope .shim-mono {
  font-family: var(--shim-mono) !important;
  letter-spacing: 0.02em !important;
}

/* ---------- Buttons (shared by header + hero + calculator) ----------- */
body .shim-scope .shim-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: 2px;
  font-family: var(--shim-body) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  border: 1px solid transparent;
  transition: transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
  white-space: nowrap;
}
body .shim-scope .shim-btn--sm    { padding: 10px 16px; font-size: 12px !important; }
body .shim-scope .shim-btn--lg    { padding: 18px 28px; font-size: 15px !important; }
body .shim-scope .shim-btn--red   { background: var(--shim-red); color: #fff !important; }
body .shim-scope .shim-btn--red:hover  { background: var(--shim-red-deep); transform: translateY(-1px); }
body .shim-scope .shim-btn--ghost { background: transparent; border-color: var(--shim-line-2); color: var(--shim-text) !important; }
body .shim-scope .shim-btn--ghost:hover { border-color: #fff; background: rgba(255, 255, 255, 0.04); }
body .shim-scope .shim-btn--link  { background: transparent; padding: 6px 0; color: var(--shim-text-dim) !important; text-transform: none !important; letter-spacing: 0 !important; font-weight: 500 !important; }
body .shim-scope .shim-btn--link:hover  { color: var(--shim-red) !important; }
body .shim-scope .shim-btn__arrow { font-family: var(--shim-mono) !important; }