/* ==========================================================================
wp-content\themes\gtmotor\assets\css\base.css
GTM — Base primitives
   Scope: global tokens, light reset, generic utilities (no component styles)
   ========================================================================== */

/* Tokens */
:root {
  --c-text: #333333;
  --c-border: #DFDFDF;
  --c-primary: #342E37;

  /* Brand Colors */
  --brand-ducati: #CB1517;
  --brand-honda: #CC0000;
  --brand-yamaha: #001489;
  --brand-kawasaki: #5BB715;
  --brand-gt: #342E37;

  /* Default dynamic accent = GT dark. body.brand-* overrides below. */
  --c-active-brand: var(--brand-gt);

  --space-2: .125rem;
  --space-4: .25rem;
  --space-8: .5rem;
  --space-10: .625rem;
  --space-12: .75rem;
  --space-16: 1rem;
  --space-24: 1.5rem;
  --space-30: 1.875rem;
  --space-40: 2.5rem;
  --space-64: 4rem;
}

/* Apply Brand Context based on Body Class */
body.brand-ducati {
  --c-active-brand: var(--brand-ducati);
}

body.brand-honda {
  --c-active-brand: var(--brand-honda);
}

body.brand-yamaha {
  --c-active-brand: var(--brand-yamaha);
}

body.brand-kawasaki {
  --c-active-brand: var(--brand-kawasaki);
}

:root{
  --brand-scrambler: #FFC424; /*  Scrambler yellow ? */
}

/* override the active accent when Ducati + Scrambler context */
body.brand-ducati.family-scrambler{
  --c-active-brand: var(--brand-scrambler);
}

/* OPTIONAL: if you want .bg-brand blocks to switch too
   (bg-brand currently hard-wires Ducati red) :contentReference[oaicite:1]{index=1} */
body.brand-ducati.family-scrambler .bg-brand{
  background-color: var(--brand-scrambler);
}

/* Reset-ish */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  overflow-x: clip; /* contain off-canvas drawers + any minor overflow; clip (not hidden) keeps position:sticky working */
}


html body {
  margin: 0;
  color: var(--c-text);
  line-height: 1.6;
  background: #fff;
  font-family: "Figtree", Arial, sans-serif;
}


/* Media defaults */
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}
section .section{
  width:100%;
}

/* Links: keep underlines available for content, let components override */
a {
  color: inherit;
  text-decoration-thickness: .08em;
  text-underline-offset: .15em;
}

/* Typography helpers (generic; not brand/hero specific) */
.figtree-regular {
  
  font-weight: 400;
}

.figtree-light {
  
  font-weight: 300;
}

.figtree-bold {
  
  font-weight: 700;
}

.figtree-black {
  
  font-weight: 1000;
}

.fw-900 {
  font-weight: 900 !important;
}

.fs-40 {
  font-size: 40px !important;
}

.ta-center {
  text-align: center !important;
}

.br-10 {
  border-radius: 10px;
}

.mt-20 {
  margin-top: var(--space-20, 20px) !important;
}

.mt-40 {
  margin-top: var(--space-40) !important;
}

.mt-64 {
  margin-top: var(--space-64) !important;
}

.mt-neg10 {
  margin-top: -10px !important;
}

.mt-neg43 {
  margin-top: -43px !important;
}

.mt-neg98 {
  margin-top: -98px !important;
}

.mb-16 {
  margin-bottom: var(--space-16) !important;
}

.mb-30 {
  margin-bottom: var(--space-30) !important;
}

.p-10 {
  padding: var(--space-10) !important;
}

.pt-24 {
  padding-top: var(--space-24) !important;
}

.pt-40 {
  padding-top: var(--space-40) !important;
}

.pb-64 {
  padding-bottom: var(--space-64) !important;
}

.pr-10 {
  padding-right: var(--space-10) !important;
}

.pr-14 {
  padding-right: 14px !important;
}

.img-cover {
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  width: 100% !important;
  padding-bottom: 0 !important;
}

.toplogo {
  z-index: 6;
  text-align: center;
  padding: 15px !important;
}

.toplogo-image,
.explore-image {
  margin: 0 auto;
  display: block;
}

.tech-spec-tabs {
  padding: 10px !important;
  border-right: 1px solid var(--c-border) !important;
  border-left: 1px solid var(--c-border) !important;
}

.webkit-1px {
  -webkit-text-stroke: 1px #fff;
}

.gradient-background {
  position: relative;
  height: 50px;
  background: linear-gradient(to top, #fff, rgba(255, 255, 255, 0));
  z-index: 2;
}

.spacing {
  height: 90px;
}

.row [class^='col-'] {
  margin-top: 0;
}

/* --- Finance Teaser Styling (Override Plugin Defaults) --- */

/* 1. Kill the plugin's default hover effect (the red rectangle) */
.cmfc-amount::after {
  display: none !important;
}

/* 2. Style the button/pill */
.cmfc-amount {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 6px 16px !important;
  border-radius: 99px !important;
  /* Force Pill Shape */

  /* Brand Color Background */
  background-color: var(--c-active-brand, #342E37) !important;
  color: #ffffff !important;

  
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;

  /* Smooth transition for lift & shadow */
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;

  margin: 0 4px;
  box-shadow: none;
  /* No shadow by default */
}

/* 3. Hover State: Lift + Shadow (Keep Color/Shape) */
.cmfc-amount:hover {
  background-color: var(--c-active-brand, #342E37) !important;
  /* Keep brand color */
  color: #ffffff !important;
  transform: translateY(-2px);
  /* Slight lift */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
  /* Soft shadow */
  opacity: 1 !important;
}

/* 4. Layout alignment */
.cmfc-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  
  font-size: 14px;
  color: #333;
  margin-top: 8px;
}

.cmfc-from,
.cmfc-per {
  font-weight: 600;
  color: #666;
  text-transform: uppercase;
  font-size: 12px;
}

/* Utility: Horizontally center an image */
.img-h-center {
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* --- CRITICAL GLOBAL LAYOUT FIXES --- */

/* 1. Fix Float Collapse: Force main containers to create a block formatting context */
#primary,
.site-main,
.content-area {
  display: flow-root !important;
  width: 100%;
  height: auto;
  min-height: auto;
  overflow: visible;
}

/* 2. Fix Footer Interaction */
#site-footer,
footer.footer-section {
  clear: both !important;
  /* Push below any stray floats */
  position: relative !important;
  z-index: 10 !important;
  width: 100%;
  margin-top: 0;
  display: block !important;
}

/* 3. Reset Legacy Absolute Positioning (Safety Net) */
.inStock-Woocommerce-Product,
.section {
  position: relative !important;
  top: auto !important;
  left: auto !important;
}

/* 4. Image Centering Helper (Used in Meet Team etc) */
.img-h-center {
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
}