/*
Theme Name: 8X Gear
Theme URI: https://8xgear.com
Description: Flatsome child theme for 8X Gear. Carries the design tokens, base
  typography and shared components ported from the static prototype. Replaces the
  Kozmozracing-derived sg-metal child theme.
Author: 8X Gear
Template: flatsome
Version: 1.5.2
*/

/* ==========================================================================
   1. Design tokens
   Names are kept identical to the prototype (`--ct-*`) so component CSS can be
   pasted across from tools/custom/* without a rename pass.
   ========================================================================== */
:root{
  --ct-cream:#F3EEE6;      /* warm page surface / band background */
  --ct-ink:#191D20;        /* page ink */
  --ct-deep:#0F1113;       /* deeper ink — the only value the brand red clears AA on */
  --ct-red:#FF0C0C;        /* display value: large type, rules, icons */
  --ct-red-ink:#C81010;    /* the red that may carry small text or a white-on-red fill */
  --ct-line:rgba(0,0,0,.14);
  --ct-quiet:rgba(0,0,0,.64);
}

/* ==========================================================================
   2. Base typography
   Inter for everything; the display voice is weight + tight tracking, not a
   second family. Flatsome sets its own stacks in theme options, so these rules
   are scoped to body and headings rather than a blanket * selector.
   ========================================================================== */
body{
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:rgba(0,0,0,.81);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5,h6,.heading-font{
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:#0E1013;
  letter-spacing:-.03em;
}
h1,h2{font-weight:900;line-height:1.02;}
h3,h4{font-weight:800;line-height:1.2;}

/* The prototype's section eyebrow. */
.x-kicker{
  margin:0 0 14px;color:var(--ct-red-ink);
  font-size:10px;font-weight:900;letter-spacing:.24em;text-transform:uppercase;
}

/* ==========================================================================
   3. Links, buttons and interaction states
   Rule for every state below: the foreground never moves toward the background.
   Hover shifts the surface, the border or the position instead.
   ========================================================================== */
a{color:inherit;}

.button,.button.primary,button[type=submit],input[type=submit]{
  border-radius:0;
  font-family:inherit;
  font-size:12px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;
  min-height:52px;padding:0 26px;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  border:1px solid var(--ct-deep);
  background-color:var(--ct-deep);color:#fff;
  box-shadow:none;text-shadow:none;
  transition:background-color .18s ease,color .18s ease,border-color .18s ease;
}
/* Solid button inverts both layers in one rule — ink on cream stays above 4.5:1. */
.button:hover,.button.primary:hover,button[type=submit]:hover,input[type=submit]:hover{
  background-color:var(--ct-cream);color:#0E1013;border-color:var(--ct-deep);
}
.button.secondary,.button.is-outline{
  background-color:transparent;color:#0E1013;border-color:var(--ct-deep);
}
.button.secondary:hover,.button.is-outline:hover{
  background-color:var(--ct-deep);color:#fff;
}
/* Disabled is the only state allowed to reduce contrast. */
.button[disabled],.button.disabled{opacity:.45;cursor:not-allowed;}

:focus-visible{outline:3px solid var(--ct-red-ink);outline-offset:3px;}
.dark :focus-visible,.bg-fill-dark :focus-visible{outline-color:#fff;}

/* ==========================================================================
   4. Prose page template (page-kz-prose.php)
   Three published pages already point at this template, so the filename and the
   class names are preserved; only the visual language changes.
   ========================================================================== */
.kzp-page-hd{background:var(--ct-deep);color:#fff;padding:34px 0 46px;}
.kzp-page-hd .kz-wrap{max-width:1280px;margin:0 auto;padding:0 28px;}
.kzp-bread{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;}
.kzp-bread a{color:rgba(255,255,255,.66);text-decoration:none;}
.kzp-bread a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px;}
.kzp-sep{color:rgba(255,255,255,.38);padding:0 9px;}
.kzp-bread > span:last-child{color:var(--ct-red);}
.kzp-title{
  margin:22px 0 0;color:var(--ct-cream);
  font-size:clamp(34px,5.4vw,72px);line-height:.9;font-weight:900;letter-spacing:-.05em;
  text-transform:uppercase;
}
.kzp-meta{
  margin:18px 0 0;color:rgba(255,255,255,.58);
  font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
}
.kzp-meta b{color:#fff;}

.kzp-main{padding:56px 0 72px;}
.kzp-main .kz-wrap{max-width:1280px;margin:0 auto;padding:0 28px;}
.kzp-layout{display:block;}
.kzp-prose{max-width:74ch;}
.kzp-prose p,.kzp-prose li{font-size:16px;line-height:1.75;color:var(--ct-quiet);}
.kzp-prose h2{
  margin:34px 0 12px;font-size:clamp(20px,2.3vw,27px);line-height:1.15;
  font-weight:900;letter-spacing:-.03em;color:#0E1013;
}
.kzp-prose h3{margin:26px 0 10px;font-size:15px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:#0E1013;}
.kzp-prose a{color:var(--ct-red-ink);text-decoration:underline;text-underline-offset:3px;}
.kzp-prose a:hover{color:var(--ct-deep);}
.kzp-prose table{width:100%;border-collapse:collapse;border:1px solid var(--ct-line);margin:22px 0;}
.kzp-prose th,.kzp-prose td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--ct-line);font-size:14px;line-height:1.55;}
.kzp-prose thead th{background:var(--ct-deep);color:#fff;font-size:10px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;}

@media (max-width:860px){
  .kzp-page-hd{padding:24px 0 34px;}
  .kzp-page-hd .kz-wrap,.kzp-main .kz-wrap{padding:0 20px;}
  .kzp-main{padding:40px 0 52px;}
}

/* ==========================================================================
   5. Flatsome surface alignment
   Small overrides so stock Flatsome chrome does not fight the tokens before the
   header and footer are rebuilt in a later phase.
   ========================================================================== */
.page-title-inner,.shop-page-title{background:var(--ct-cream);}
.dark,.bg-fill-dark{background-color:var(--ct-deep);}
.badge-inner{background-color:var(--ct-red-ink);}
.woocommerce-message,.woocommerce-info{border-top-color:var(--ct-red-ink);}