/*
	Theme Name: IronHorse
	Theme URI: https://iron.lo-el.com/
	Author: StylemixThemes
	Author URI: http://stylemixthemes.com/
	Description: IronHorse Motorcycles — child theme of Motors. Holds the IRONHORSE design system and template overrides.
	Version: 4.0
	License: GNU General Public License v2 or later
	License URI: http://www.gnu.org/licenses/gpl-2.0.html
	Text Domain: ironhorse-child
	Template: motors
*/

/* =====================================================================
   IRONHORSE MOTORCYCLES — Consolidated Design System
   ---------------------------------------------------------------------
   This single file replaces the CSS that was previously scattered across
   individual page/listing "Custom CSS" boxes. It is ADDITIVE and safe:
   nothing here overwrites Motors core styles — it only defines the brand
   tokens + custom classes your WPBakery pages already reference.

   Structure:
     1. Font loading (fallback — Theme Options is the preferred method)
     2. Canonical brand tokens (:root)          ← single source of truth
     3. Legacy-variable aliases                  ← keeps existing pages working
     4. Per-brand accent scoping                 ← CFMoto red / RE heritage-warm
     5. Typography (Rajdhani)
     6. Components (.hero-kicker, .btn-*, .hero-dark-overlay, .stats-grid)
     7. Price suppression (reversible — see block 7)
   ===================================================================== */


/* ── 1. FONTS ─────────────────────────────────────────────────────────
   PREFERRED: set the heading font to "Rajdhani" in
   Motors → Theme Options → Typography (loads it the WordPress way).
   This @import is a self-contained fallback so the brand font is present
   even before Theme Options is configured. Remove it once Theme Options
   is set, to avoid loading Rajdhani twice.                              */
@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');


/* ── 2. CANONICAL BRAND TOKENS (from IRONHORSE brand guidelines) ─────── */
:root {
	/* Core palette */
	--ih-black:        #0D0D0D;   /* Jet Black  — primary background        */
	--ih-charcoal:     #1F1F1F;   /* Charcoal   — secondary surfaces        */
	--ih-steel:        #6B6B6B;   /* Steel Gray — neutral accent            */
	--ih-white:        #F2F2F2;   /* Arctic White — typography / highlights */
	--ih-red:          #E30613;   /* Race Red   — PRIMARY performance accent*/
	--ih-orange:       #FF4D00;   /* Energy Orange — secondary / motion     */

	/* Heritage warm (Royal Enfield treatment only) */
	--ih-amber:        #D4A574;
	--ih-amber-bright: #E8C391;
	--ih-ember:        #871A0D;

	/* Working surfaces / lines / text */
	--ih-bg:           var(--ih-black);
	--ih-surface:      #141414;
	--ih-surface-2:    #1A1A1A;
	--ih-surface-3:    #232323;
	--ih-text:         var(--ih-white);
	--ih-muted:        #8A8680;
	--ih-line:         rgba(245,241,234,0.08);
	--ih-line-strong:  rgba(245,241,234,0.18);
	--ih-pad-x:        clamp(20px, 5vw, 80px);

	/* Fonts */
	--ih-f-display:    "Rajdhani", "Bebas Neue", Impact, sans-serif;
	--ih-f-body:       "Inter", system-ui, sans-serif;
	--ih-f-mono:       "JetBrains Mono", ui-monospace, monospace;

	/* PER-BRAND ACCENT — defaults to Race Red; overridden per page below */
	--ih-accent:        var(--ih-red);
	--ih-accent-bright: var(--ih-orange);
}


/* ── 3. LEGACY-VARIABLE ALIASES ──────────────────────────────────────
   Your existing pages reference these un-prefixed / cyan variables.
   Re-pointing them here harmonizes the whole site with zero page edits. */
:root {
	--amber:        var(--ih-accent);
	--amber-bright: var(--ih-accent-bright);
	--ember:        var(--ih-ember);
	--chrome:       var(--ih-white);
	--bg:           var(--ih-bg);
	--surface:      var(--ih-surface);
	--surface-2:    var(--ih-surface-2);
	--surface-3:    var(--ih-surface-3);
	--text:         var(--ih-text);
	--muted:        var(--ih-muted);
	--line:         var(--ih-line);
	--line-strong:  var(--ih-line-strong);
	--pad-x:        var(--ih-pad-x);
	--f-display:    var(--ih-f-display);
	--f-body:       var(--ih-f-body);
	--f-mono:       var(--ih-f-mono);

	/* Neutralize the deprecated CFMoto cyan set — any lingering
	   reference now renders on-brand red instead of #00E5FF */
	--cf-accent:    var(--ih-accent);
	--cf-accent-2:  var(--ih-accent-bright);
	--cf-bg:        var(--ih-bg);
	--cf-panel:     var(--ih-surface);
	--cf-panel-2:   var(--ih-surface-2);
	--cf-text:      var(--ih-text);
	--cf-muted:     var(--ih-muted);
	--cf-line:      var(--ih-line);
}


/* ── 4. PER-BRAND ACCENT SCOPING ─────────────────────────────────────
   WordPress adds a .page-id-XXXX class to <body> automatically.
   Royal Enfield (page #4683) → heritage-warm accent.
   CFMoto (#4442) + everything else → Race Red (the :root default).
   NOTE: confirm page IDs match your install if you rebuild the pages. */
body.page-id-4683 {
	--ih-accent:        var(--ih-amber);
	--ih-accent-bright: var(--ih-amber-bright);
}


/* ── 5. TYPOGRAPHY ───────────────────────────────────────────────────
   Motors applies .heading-font to headings, prices and UI chrome.
   Rajdhani reads best slightly tightened and medium-weight.            */
.heading-font,
h1, h2, h3, h4, h5, h6 {
	font-family: var(--ih-f-display);
	letter-spacing: 0.005em;
}
h1, h2 { font-weight: 700; }


/* ── 6. COMPONENTS (consolidated from the per-page Custom CSS boxes) ── */

/* Section kicker / eyebrow label */
.hero-kicker {
	font-family: var(--ih-f-mono);
	font-size: 12px;
	color: var(--ih-accent);
	letter-spacing: 0.25em;
	text-transform: uppercase;
	margin-bottom: 22px;
	display: flex;
	align-items: center;
	gap: 14px;
}
.hero-kicker::before {
	content: '';
	width: 40px;
	height: 1px;
	background: var(--ih-accent);
}

/* Button system */
.btn {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 12px 26px;
	margin-right: 16px;
	border-radius: 999px;
	font-family: var(--ih-f-body);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
	line-height: 1;
	border: 1px solid transparent;
	cursor: pointer;
	transition: transform .25s ease, background .25s ease, color .25s ease, border-color .25s ease;
}
.btn svg { width: 14px; height: 14px; }

.btn-amber        { background: var(--ih-accent); color: #1A1A1A !important; }
.btn-amber:hover  { background: var(--ih-accent-bright); transform: translateY(-1px); color: #1A1A1A !important; }

.btn-ghost        { background: transparent; color: var(--ih-white) !important; border-color: var(--ih-white); }
.btn-ghost:hover  { border-color: var(--ih-accent); color: var(--ih-accent) !important; }

.btn-ember        { background: var(--ih-ember); color: var(--ih-white) !important; }
.btn-ember:hover  { background: var(--ih-orange); transform: translateY(-1px); color: var(--ih-white) !important; }

/* Hero with darkened parallax background */
.hero-dark-overlay { position: relative; }
.hero-dark-overlay .vc_parallax-inner { filter: brightness(0.72) contrast(1.1); }
.hero-dark-overlay .vc_row,
.hero-dark-overlay .wpb_column { position: relative; z-index: 2; }

/* Animated stat / counter grid */
.stats-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
	gap: 15px;
	padding-top: 30px;
	border-top: 1px solid var(--ih-line-strong);
}
.stat { text-align: left; }
.num {
	font-family: var(--ih-f-display);
	font-size: 42px;
	font-weight: 300;
	display: flex;
	align-items: baseline;
	gap: 2px;
}
.count { color: var(--ih-accent); }
.num small { font-size: 16px; opacity: 0.7; color: var(--ih-white); }
.lbl {
	font-family: var(--ih-f-mono);
	font-size: 13px;
	opacity: 0.7;
	margin-top: 5px;
	letter-spacing: 0.05em;
}

/* Red hairline separators used across the pages */
.vc_separator .vc_sep_holder .vc_sep_line {
	height: 1px !important;
	border: none !important;
	background-color: var(--ih-accent) !important;
	display: block;
}
.septext { color: var(--ih-accent) !important; }

/* Manifesto card hover */
.ih-card:hover,
.vc_custom_1780140296240:hover {
	border-color: var(--ih-amber-bright) !important;
	transition: border-color 0.3s ease !important;
}


/* ── 7. PRICE SUPPRESSION ─────────────────────────────────────────────
   Client has not set prices yet. This hides all price output on cards
   and single listings WITHOUT deleting any data. To re-enable prices
   later, simply delete this whole block (block 7) — nothing else needed. */
.stm-listing-single-price-title,           /* single listing price/title area */
.single-car-listing .price,                /* single listing price value      */
.stm_moto_single_grid_item .price,         /* motorcycle card price           */
.listing-item .price,                      /* generic listing card price      */
.car-listing-row .price,                   /* list-view price column          */
.archive_request_price,                    /* "request price" CTA on cards     */
.car-price-form-label,
.stm-listing-single-price-title .price {
	display: none !important;
}
/* Keep the title readable now that the price row is hidden */
.stm-listing-single-price-title + .stm-single-title-wrap,
.stm-single-title-wrap { margin-top: 0; }