/*
	Theme Name: Motors - Child Theme
	Theme URI: http://motors.stylemixthemes.com/
	Author: StylemixThemes
	Author URI: http://stylemixthemes.com/
	Description: Motors Child theme
	Version: 10.15.1
	License: GNU General Public License v2 or later
	License URI: http://www.gnu.org/licenses/gpl-2.0.html
	Text Domain: motors-child
	Template: motors
*/

/* =====================================================================
   IRONHORSE MOTORCYCLES — Consolidated Design System
   ---------------------------------------------------------------------
   Single source of truth for all custom CSS. Replaces the per-page
   WPBakery "Custom CSS" boxes. Every rule is scoped to a brand class or
   a Motors selector — nothing leaks into unrelated pages.

   Structure:
     1. Font loading
     2. Canonical brand tokens (:root)
     3. Legacy-variable aliases
     4. Per-brand accent scoping
     5. Typography — Greek-safe overrides
     6. Global components
     7. Brand page shell — hero, category grid, inventory, story
     8. Royal Enfield page — accent-specific overrides only
     9. Price suppression (reversible)

   NOTE ON SECTION 7: originally written for CF Moto only. The selectors
   are now shared between both brand pages, because the two layouts use
   an identical skeleton and only differ by accent colour and by which
   taxonomy drives the category tiles. Section 8 holds the small number
   of rules that are genuinely Royal-Enfield-specific.
   ===================================================================== */


/* ── 1. FONTS ─────────────────────────────────────────────────────────
   Roboto Condensed is the display + body face. It carries full Greek and
   Greek Extended coverage, unlike Exo 2 / Rajdhani which have none and
   caused Greek text to fall back to the browser serif (Times New Roman).
   The css2 endpoint serves Greek automatically — no subset param needed.

   PREFERRED: also set Roboto Condensed in Motors → Theme Options →
   Typography, so the theme stops downloading Exo 2 on every page load. */
/* FONTS ARE NO LONGER IMPORTED HERE.
   An @import at the top of a stylesheet is a serial, render-blocking
   request: the browser must fetch and parse this file before it even
   learns the font exists. inc/enqueue.php now loads Roboto Condensed
   and JetBrains Mono via wp_enqueue_style, in parallel, with preconnect
   hints. Do not restore the @import — it would fetch them twice. */


/* ── 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);

	/* Alias — CF Moto block references --ih-char */
	--ih-char:         var(--ih-charcoal);

	/* Fonts — Roboto Condensed carries Greek; Exo 2 and Rajdhani do not */
	--ih-f-display:    "Roboto Condensed", Arial, sans-serif;
	--ih-f-body:       "Roboto Condensed", Arial, 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);

	/* Ink used on top of a filled accent button. Race Red needs white,
	   heritage amber needs near-black. Overridden alongside the accent
	   in section 4, so buttons stay legible on either brand page. */
	--ih-accent-ink:    #FFFFFF;
}


/* ── 3. LEGACY-VARIABLE ALIASES ──────────────────────────────────────
   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 ─────────────────────────────────────
   DECISION: strict IRONHORSE brand across the whole site. Both brand
   pages run Race Red / Energy Orange from the :root defaults above.
   There is no per-page accent override.

     CF Moto        → Race Red  (:root default)
     Royal Enfield  → Race Red  (:root default)
     Everything else → Race Red

   The heritage-warm tokens (--ih-amber / --ih-amber-bright) stay
   DEFINED in section 2 but are unreferenced. They cost nothing and keep
   the option open if the client later wants the two marques visually
   separated. To switch Royal Enfield to heritage amber, uncomment the
   block below and confirm the page ID — nothing else needs to change.

   body.page-id-4754 {
       --ih-accent:        var(--ih-amber);
       --ih-accent-bright: var(--ih-amber-bright);
       --ih-accent-ink:    #1A1A1A;
   }
*/


/* ── 5. TYPOGRAPHY ───────────────────────────────────────────────────
   Motors hardcodes "Exo 2, Arial" on body and all headings. Exo 2 has no
   Greek glyphs, so Greek text fell back to the browser serif. These rules
   force Roboto Condensed sitewide. The !important flags can be dropped
   once Theme Options → Typography is set to Roboto Condensed.          */
body,
p, li, td, th, dd, dt,
input, select, textarea,
.normal_font,
.wpb_text_column,
.wpb_text_column p {
	font-family: var(--ih-f-body) !important;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.heading-font,
.vc_custom_heading,
.vc_do_custom_heading,
.button, .vc_btn3, .btn, button,
input[type="submit"],
.car-title, .stm-title {
	font-family: var(--ih-f-display) !important;
	letter-spacing: 0.005em;
}

h1, h2 { font-weight: 700; }

/* Greek optical correction — Greek lowercase has a shorter x-height than
   Latin at the same size, so it needs more leading to avoid reading
   cramped against the condensed display face. */
:lang(el) body,
:lang(el) .wpb_text_column p {
	line-height: 1.7;
}


/* ── 6. GLOBAL COMPONENTS ────────────────────────────────────────────── */

/* Section kicker / eyebrow label — mono face reads as technical
   instrumentation and matches the "03 — ΤΟ MANIFESTO" treatment.
   Accent-token driven, so it recolours per brand page automatically. */
.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-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: var(--ih-accent-ink) !important; }
.btn-amber:hover  { background: var(--ih-accent-bright); transform: translateY(-1px); color: var(--ih-accent-ink) !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;
}

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

/* Motors' own colour separator, used in the story sections.
   Previously this fell back to the theme's default colour on both
   brand pages; now it tracks the accent token like everything else. */
.stm_color_separator,
.stm-color-separator,
.stm_color_separator span,
.stm-color-separator span {
	background-color: var(--ih-accent) !important;
	border-color: var(--ih-accent) !important;
}

/* Manifesto card hover — was hardcoded to amber-bright, which read as an
   orphan warm accent on the red pages. Now accent-driven. */
.ih-card:hover,
.vc_custom_1780140296240:hover {
	border-color: var(--ih-accent-bright) !important;
	transition: border-color 0.3s ease !important;
}


/* =====================================================================
   7. BRAND PAGE SHELL — CF MOTO + ROYAL ENFIELD
   ---------------------------------------------------------------------
   Both brand pages share this skeleton:

     [Section .ih-hero]        kicker / H1 / lede / two buttons
     [Row #series | #capacity] heading + stm_inventory_categories tiles
     [Row #inventory]          stm_classic_filter + search results
     [Row story]               heading + separator + copy + button

   Selectors are doubled (.vc_custom_cf_* , .vc_custom_re_*) rather than
   genericised, because those class names come from the hand-written css=
   attributes in each page's shortcode and cannot be renamed without
   re-pasting both pages.
   ===================================================================== */

/* ── 7a. HERO — STATIC IMAGE ─────────────────────────────────────────
   WPBakery setup:
     [Section]  ← Extra class: ih-hero
                  Section stretch: Stretch section
                  Full height section: unchecked
                  Design Options → Background image: hero JPG
                  Background style: Cover / Position: Center center
       └── [Row]     ← Row stretch: Default, no full height
             └── [Column] → kicker, H1, paragraph, buttons

   The scrim is a ::before pseudo-element, so no extra markup is needed
   and there is no positioning-context or z-index chain to debug.       */

.vc_section.ih-hero {
	position: relative !important;
	min-height: 100vh !important;
	display: flex !important;
	flex-direction: column !important;
	justify-content: flex-end !important;
	background-color: var(--ih-black);
	background-size: cover !important;
	background-position: center center !important;
	background-repeat: no-repeat !important;
}

/* WPBakery's stretch JavaScript appends an empty .vc_row-full-width div
   as the last flex child. With justify-content: flex-end it steals the
   bottom slot and pushes the content row upward. Hiding it is the fix. */
.vc_section.ih-hero > .vc_row-full-width { display: none !important; }

/* Readability scrim — horizontal wash behind the left-aligned copy,
   vertical wash anchoring the bottom edge */
.vc_section.ih-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background:
		linear-gradient(to right,
			rgba(13,13,13,0.88) 0%,
			rgba(13,13,13,0.50) 45%,
			rgba(13,13,13,0.08) 75%),
		linear-gradient(to top,
			rgba(13,13,13,0.82) 0%,
			rgba(13,13,13,0.12) 55%);
}

/* Content sits above the scrim */
.vc_section.ih-hero > .vc_row {
	position: relative !important;
	z-index: 2 !important;
	width: 100% !important;
	padding-bottom: 90px !important;
}

.ih-hero h1 {
	letter-spacing: -0.02em;
	text-shadow: 0 2px 24px rgba(0,0,0,0.5);
}

.ih-hero .wpb_text_column p {
	max-width: 620px;
	font-size: 17px;
	line-height: 1.7;
	color: rgba(242,242,242,0.88);
}

.ih-hero .vc_btn3 {
	font-weight: 600 !important;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 14px 32px !important;
	transition: all 0.25s ease;
}
.ih-hero .vc_btn3-container { margin-right: 12px; }


/* ── 7b. CATEGORY GRID ───────────────────────────────────────────────
   CF Moto: four 1/4 tiles driven by category_type (series).
   Royal Enfield: two 1/2 tiles driven by displacement-band (κυβισμός),
   because RE has no series terms in this install.                     */
.vc_custom_cf_series_h,
.vc_custom_re_series_h {
	font-size: 32px !important;
	letter-spacing: 0.02em;
	margin-bottom: 36px !important;
}

.stm_mc-image-category {
	position: relative;
	overflow: hidden;
	background: var(--ih-charcoal);
	transition: transform 0.3s ease;
}
.stm_mc-image-category:hover { transform: translateY(-4px); }

.stm_mc-image-category .inner img {
	width: 100%;
	height: auto;
	display: block;
	transition: transform 0.4s ease;
}
.stm_mc-image-category:hover .inner img { transform: scale(1.05); }

.stm_mc-image-category .links a {
	font-family: var(--ih-f-display) !important;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--ih-white) !important;
}
.stm_mc-image-category:hover .links a { color: var(--ih-accent) !important; }


/* ── 7c. INVENTORY BLOCK ─────────────────────────────────────────────── */
.vc_custom_cf_inv .stm-filter-tabs-skewed a,
.vc_custom_re_inv .stm-filter-tabs-skewed a {
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

/* Card hover and active filter states follow the page accent, so the
   grid reads red on CF Moto and amber on Royal Enfield. */
.vc_custom_cf_inv .stm-listing-directory-list-loop:hover,
.vc_custom_re_inv .stm-listing-directory-list-loop:hover,
.vc_custom_cf_inv .stm-car-listing-wrapper:hover,
.vc_custom_re_inv .stm-car-listing-wrapper:hover {
	border-color: var(--ih-accent) !important;
}
.vc_custom_cf_inv .stm-car-title a:hover,
.vc_custom_re_inv .stm-car-title a:hover {
	color: var(--ih-accent) !important;
}


/* ── 7d. STORY SECTION ───────────────────────────────────────────────
   CF Moto runs copy-left / image-right. Royal Enfield mirrors it —
   the flip is handled by column order in the shortcode itself, so no
   flex-direction override is needed here.                             */
.vc_custom_cf_story_h,
.vc_custom_re_story_h { letter-spacing: -0.01em; }

.vc_custom_cf_story .wpb_text_column p,
.vc_custom_re_story .wpb_text_column p {
	font-size: 16px;
	line-height: 1.75;
	color: rgba(242,242,242,0.85);
	max-width: 560px;
}


/* ── 7e. BRAND PAGE RESPONSIVE ───────────────────────────────────────── */
@media (max-width: 782px) {
	.vc_section.ih-hero { min-height: 72vh !important; }
	.vc_section.ih-hero > .vc_row { padding-bottom: 50px !important; }

	.ih-hero h1 { font-size: 34px !important; line-height: 38px !important; }
	.ih-hero .wpb_text_column p { font-size: 15px; }

	/* Vertical-only scrim on narrow screens — the horizontal wash is
	   pointless once the copy spans the full width */
	.vc_section.ih-hero::before {
		background: linear-gradient(to top,
			rgba(13,13,13,0.92) 0%,
			rgba(13,13,13,0.55) 60%,
			rgba(13,13,13,0.35) 100%);
	}

	.vc_custom_cf_series_h,
	.vc_custom_re_series_h { font-size: 24px !important; }

	/* RE's two half-width tiles stack rather than sit flush */
	.vc_custom_re_series .vc_col-sm-6 { margin-bottom: 18px; }
}


/* =====================================================================
   8. ROYAL ENFIELD PAGE (#4754)
   ---------------------------------------------------------------------
   Deliberately short. The hero, kicker, buttons, tiles and separators
   are inherited from sections 6 and 7, and run Race Red like the rest
   of the site.

   The two pages are differentiated STRUCTURALLY, not chromatically:
   CF Moto has four series tiles and a copy-left story; Royal Enfield
   has two capacity tiles and a mirrored story. Only the small tonal
   adjustments that survive a shared palette live here.
   ===================================================================== */

/* ── 8a. HERO TONE ───────────────────────────────────────────────────
   Warmer and less compressed than CF Moto's. Same .ih-hero scaffold,
   softer scrim, looser letterspacing — heritage marque, not race bike. */
body.page-id-4754 .vc_section.ih-hero::before {
	background:
		linear-gradient(to right,
			rgba(13,13,13,0.86) 0%,
			rgba(13,13,13,0.46) 48%,
			rgba(20,15,10,0.10) 78%),
		linear-gradient(to top,
			rgba(13,13,13,0.80) 0%,
			rgba(13,13,13,0.10) 58%);
}
body.page-id-4754 .ih-hero h1 {
	letter-spacing: -0.005em;   /* vs CF Moto's tighter -0.02em */
	font-weight: 600;
}

/* ── 8b. CAPACITY TILES ──────────────────────────────────────────────
   Two half-width tiles carry more visual weight than CF Moto's four
   quarter tiles, so they get a border and a restrained desaturation
   that clears on hover. Base styling inherited from 7b.              */
.vc_custom_re_series .stm_mc-image-category {
	border: 1px solid var(--ih-line-strong);
}
.vc_custom_re_series .stm_mc-image-category:hover {
	border-color: var(--ih-accent);
}
.vc_custom_re_series .stm_mc-image-category .inner img {
	filter: grayscale(0.2) contrast(1.04);
	transition: filter 0.35s ease, transform 0.4s ease;
}
.vc_custom_re_series .stm_mc-image-category:hover .inner img {
	filter: none;
}

/* ── 8c. HARDCODED BUTTON HEX → TOKEN ────────────────────────────────
   WPBakery writes literal hex values into vc_btn custom_background /
   custom_text attributes, which bypass the variable system entirely.
   These rules pull the RE page's buttons back onto --ih-accent so the
   palette stays controlled from one place. This is belt-and-braces:
   the shortcode already carries #E30613, but if anyone edits a button
   in the visual editor and the colour picker writes a different hex,
   this catches it.                                                    */
body.page-id-4754 .vc_btn3.vc_btn3-style-custom {
	background-color: var(--ih-accent) !important;
	color: var(--ih-accent-ink) !important;
}
body.page-id-4754 .vc_btn3.vc_btn3-style-custom:hover {
	background-color: var(--ih-accent-bright) !important;
	color: var(--ih-accent-ink) !important;
}
body.page-id-4754 .vc_btn3.vc_btn3-style-outline-custom:hover {
	background-color: var(--ih-accent) !important;
	color: var(--ih-accent-ink) !important;
	border-color: var(--ih-accent) !important;
}


/* ── 9. PRICE SUPPRESSION ─────────────────────────────────────────────
   Client has not set prices yet. This hides all price output on cards,
   single listings, the carousel and the sidebar filter WITHOUT deleting
   any data. To re-enable prices later, delete this entire block —
   nothing else needs to change.

   The 9b group was added after the live CF Moto page was found still
   rendering the classic-filter price dropdown (showing USD amounts).
   Motors uses different markup for the classic filter than for the
   sidebar widget, so both have to be targeted.                        */

/* 9a — cards, single listings, carousel */
.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,
.price-holder {                            /* carousel card price slot        */
	display: none !important;
}

/* 9b — filter controls (sidebar widget AND classic filter bar) */
.stm-filter_price,
.stm-single-filter.stm-filter_price,
.stm-classic-filter .stm-filter_price,
.stm-classic-filter-wrapper .stm-filter_price,
.stm-filter-price,
.stm_price_filter,
.stm-classic-filter [data-filter="price"],
.stm-classic-filter [class*="filter_price"],
.stm-classic-filter [class*="filter-price"] {
	display: none !important;
}

/* 9c — price sorting options in the "Sort by" dropdown.
   Hiding the control alone leaves price-ordered results reachable via
   URL, which is harmless, but the visible options look broken when the
   figures they sort by are hidden everywhere else. */
.stm-sort-by option[value*="price"],
.stm-sort-by li[data-value*="price"],
.stm-listing-sorting option[value*="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; }