/* ============================================================================
   ApnaMechanic — Ride N Repair PREMIUM brand layer
   ----------------------------------------------------------------------------
   CSS-ONLY, additive, LAST-loaded override. Flips the inherited WordPress
   ReHub/Elementor/Foxiz PURPLE theme (#8035be / #de1414 / #c21010 / #1a0533 /
   #ffc300) to the RnR premium palette: primary red #f42222 over near-black
   #0d0d0d, Poppins (body) + Roboto Condensed (headings).

   ZERO content/markup/heading/schema changes. Tokens resolved from
   /home/lk/production/ridenrepair-clean/src/styles/abstract/_variables.scss.
   Implements docs/02_PREMIUM_BRAND_DESIGN_SYSTEM.md.
   ========================================================================== */

/* ── 4.1 Self-hosted fonts (Poppins body + Roboto Condensed headings) ──
   If the .woff2 files are absent (no network at author time), browsers fall
   back gracefully to the sans-serif stack declared on each face — no FOIT,
   no hard 404 styling break. Drop the files listed in /fonts/README to enable. */
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;
  src:url('/fonts/poppins-400.woff2') format('woff2');}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;
  src:url('/fonts/poppins-600.woff2') format('woff2');}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;
  src:url('/fonts/poppins-700.woff2') format('woff2');}
@font-face{font-family:'Poppins';font-style:normal;font-weight:800;font-display:swap;
  src:url('/fonts/poppins-800.woff2') format('woff2');}
@font-face{font-family:'Roboto Condensed';font-style:normal;font-weight:700;font-display:swap;
  src:url('/fonts/roboto-condensed-700.woff2') format('woff2');}
@font-face{font-family:'Roboto Condensed';font-style:normal;font-weight:800;font-display:swap;
  src:url('/fonts/roboto-condensed-800.woff2') format('woff2');}

/* ── 4.2 Token layer + cross-walk that REMAPS inherited theme vars ──
   These win because this sheet is loaded LAST. The var remap neutralises
   ~90% of the purple without touching any source rule. */
:root{
  /* RnR brand tokens (resolved from _variables.scss) */
  --am-primary:#f42222;
  --am-dark:#0d0d0d;
  --am-dark-pure:#000;
  --am-white:#fff;
  --am-gray-bg:#f7f7f7;
  --am-border:#e8e8e8;
  --am-text-primary:#0d0d0d;
  --am-text-body:#555;
  --am-text-muted:#6d6d6d; /* AA small-text on BOTH white (5.3:1) and #f7f7f7 cards (4.9:1) */
  --am-primary-text:#d11414; /* AA-passing red (4.9:1) for SMALL red text on white; large/bold brand elements keep #f42222 */
  --am-success:#1a7a1a; --am-success-bg:#eaffea;

  --am-font-body:'Poppins','Helvetica Neue',-apple-system,system-ui,BlinkMacSystemFont,'Segoe UI',sans-serif;
  /* Headings: Poppins (one cohesive geometric family — condensed read budget) */
  --am-font-head:'Poppins','Helvetica Neue',-apple-system,system-ui,sans-serif;

  --am-radius-sm:12px; --am-radius-md:16px; --am-radius-lg:20px;
  --am-radius-pill:50px; --am-radius-img:18px;

  --am-shadow-card:0 2px 12px rgba(0,0,0,.05);
  --am-shadow-card-hover:0 8px 32px rgba(0,0,0,.1);
  --am-shadow-cta:0 8px 32px rgba(244,34,34,.45);     /* the RED CTA GLOW */
  --am-shadow-highlight:0 16px 48px rgba(244,34,34,.5);

  /* Premium red/black hero gradient (replaces purple #1a0533→#8035be) */
  --am-hero-grad:linear-gradient(135deg,#0d0d0d 0%,#1a0000 60%,#f42222 100%);
  --am-hero-grad-v:linear-gradient(180deg,#0d0d0d 0%,#2a0000 50%,#0d0d0d 100%);

  /* ════════ CROSS-WALK: ReHub purple → RnR red ════════ */
  --rehub-main-color:#f42222;       /* was #8035be */
  --rehub-secondary-color:#0d0d0d;  /* was #000000 */
  --rehub-button-color:#f42222;     /* was #de1414 */
  --rehub-button-text:#ffffff;
  --rehub-link-color:#f42222;       /* was #c21010 */

  /* ════════ CROSS-WALK: Elementor globals → RnR red ════════ */
  --e-global-color-primary:#f42222;   /* was #8035be (elementor-pages.css:21) */
  --e-global-color-secondary:#0d0d0d; /* was #000000 */
  --e-global-color-accent:#d11414;    /* AA red for accent TEXT at body size (buttons force #f42222 bg separately) */
  /* --e-global-color-text:#111111 left as-is (body text, not brand) */

  /* Bootstrap bridge for booking pages */
  --bs-primary:#f42222;
  --bs-primary-rgb:244,34,34;
  --bs-link-color:#f42222;
  --bs-link-hover-color:#c41010;
}

/* ── 4.3 Premium polish on inherited primitives (no DOM change) ── */

/* Typeface upgrade — same DOM, premium fonts */
body{font-family:var(--am-font-body);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
h1,h2,h3,h4,h5,h6{font-family:var(--am-font-head);letter-spacing:-.01em;}

/* ReHub primary button → pill + red glow (DOM stays .rh-btn) */
.rh-btn{
  background:var(--am-primary)!important;color:#fff!important;
  border-radius:var(--am-radius-pill)!important;
  /* 19px bold = WCAG "large text" → white-on-#f42222 passes AA (3:1) */
  font-family:var(--am-font-head);font-weight:800;font-size:19px!important;letter-spacing:.5px;
  padding:11px 28px!important;border:none!important;
  box-shadow:var(--am-shadow-cta);
  transition:transform .2s,box-shadow .2s,opacity .2s;}
.rh-btn:hover{transform:translateY(-1px);
  box-shadow:0 12px 40px rgba(244,34,34,.55);opacity:1!important;color:#fff!important;}

/* Premium dark surfaces — recolor existing dark UI to true near-black */
.site-footer,.blog-footer,.blog-nav{background:var(--am-dark)!important;}
.header-topbar{background:var(--am-dark)!important;}   /* kills #1a0533 purple-black topbar */

/* ── WCAG AA for inherited-content brand-red text ──
   Body-size red text at #f42222 on white is 4.11:1 (< 4.5 AA small-text).
   These rules shift SMALL red text to the AA-passing #d11414 while large/bold
   brand surfaces keep pure #f42222. */
span[style="color: #f42222;"], span[style="color:#f42222;"],
span[style="color: #f42222"], span[style="color:#f42222"]{color:var(--am-primary-text)!important;}
.elementor-headline-dynamic-text{color:var(--am-primary-text)!important;}
/* Content tables: header row is dark — its text must be white (inherited
   tables used thead>td>strong which resolved to near-black on near-black) */
table thead td, table thead th, table thead strong{color:#fff!important;}
/* Elementor content buttons → brand pill at WCAG large-text size */
.elementor-button{background-color:var(--am-primary)!important;color:#fff!important;}
.elementor-button .elementor-button-text{color:#fff!important;font-weight:800;font-size:19px;}
/* Dark footers: keep bold text legible (never near-black on near-black) */
.site-footer strong,.blog-footer strong{color:#fff;}
/* In-paragraph links must not rely on color alone (WCAG 1.4.1).
   !important: the layout's hoisted a{text-decoration:none} loads after us. */
p > a:not([class]), li > a:not([class]),
nav[style] a{text-decoration:underline!important;}
/* Re-scope the Elementor primary var to the AA red on TEXT elements only —
   backgrounds are declared on container divs, which keep pure #f42222 */
.elementor-widget-container :where(a,span,p,li,h1,h2,h3,h4,h5,h6,strong,em){
  --e-global-color-primary:#d11414;}

/* Links / nav hovers follow brand red (vars remapped; this catches literals) */
/* Buttons/CTAs keep their own hover colors — a blanket a:hover here made
   red-button text turn red-on-red (invisible) on hover */
a:not([class*="btn"]):not([class*="cta"]):not([class*="wa"]):not([class*="badge"]):hover,
.header-nav li a:hover,.header-nav li.current a,
.blog-nav li a:hover{color:var(--am-primary)!important;}

/* ── 4.4 Out-specifying the hard-coded purple literals ──
   Source files untouched; we out-specify from this last-loaded sheet by the
   exact Elementor section selectors that render the purple gradients/literals
   (verified against public/css/elementor-pages.css). */

/* Purple hero / section gradients → premium red-black diagonal */
.elementor-76 .elementor-element-46174fa,           /* was 135deg #1a0533→#8035be */
.elementor-53509 .elementor-element-ddd1aa1{        /* was 135deg #1a0533→#3b0764→#8035be */
  background:var(--am-hero-grad)!important;
  background-image:var(--am-hero-grad)!important;}

.elementor-33 .elementor-element-0541a9d,           /* was 180deg #1a0533→#3b0764→#1a0533 */
.elementor-76 .elementor-element-15a4942{
  background:var(--am-hero-grad-v)!important;
  background-image:var(--am-hero-grad-v)!important;}

/* Careers section: purple background-color behind a bg image */
.elementor-1888 .elementor-element-24bf610{
  background-color:var(--am-dark)!important;}        /* was #1a0533 */

/* Purple text/heading/icon literals → brand red */
.elementor-76 .elementor-element-03b8ab4 .elementor-heading-title{color:var(--am-primary)!important;} /* was #1a0533 */
.elementor-76 .elementor-element-3449233 .elementor-icon-box-title,
.elementor-83216 .elementor-counter-number-wrapper,
.awsm-job-specification-item{color:var(--am-primary)!important;}                                      /* were #8035be */
.elementor-76 .elementor-element-1f4dfd1 .elementor-icon-list-icon svg{fill:var(--am-primary)!important;} /* was #8035be */
.awsm-job-search:focus{border-color:var(--am-primary)!important;}                                     /* was #8035be */

/* Foxiz blog: accent #ffc300 hover (4.3 nav covers nav; this catches any
   remaining accent links) → brand red */
.blog-nav li a:hover,
.foxiz-container a:not([class*="btn"]):not([class*="cta"]):not([class*="wa"]):hover{color:var(--am-primary)!important;}

/* 5.2 Blog "Book Service" inline #de1414 anchor (BlogLayout). It is styled via
   an inline style= attribute, so we out-specify with an attribute-targeted
   override — no markup/href/content change. */
.blog-header a[href="/booking/"]{
  background:var(--am-primary)!important;
  border-radius:var(--am-radius-pill)!important;
  font-family:var(--am-font-head)!important;
  box-shadow:var(--am-shadow-cta);}
/* Blog newsletter Subscribe button (inline #de1414) */
.blog-footer form[action*="formspree"] button{
  background:var(--am-primary)!important;
  border-radius:var(--am-radius-pill)!important;}

/* 5.3 Bootstrap bridge — booking-page CTAs match brand */
.btn-primary,.btn-danger{
  background:var(--am-primary)!important;border-color:var(--am-primary)!important;
  border-radius:var(--am-radius-pill)!important;
  font-family:var(--am-font-head);font-weight:700;}
.btn-primary:hover,.btn-danger:hover{box-shadow:var(--am-shadow-cta);}
.text-primary{color:var(--am-primary)!important;}
.bg-primary{background-color:var(--am-primary)!important;}

/* ============================================================================
   4.5 The .am-* premium component library (1:1 port of .rr-* from
   _premium-base.scss; rr- → am-, SCSS vars → --am-* custom props).
   OPT-IN — used only on new/enhanced hero & CTA blocks, never forced onto
   exported content.
   ========================================================================== */

/* ── Dark cinematic hero (port of .rr-premium-hero) ── */
.am-hero{position:relative;min-height:90vh;display:flex;align-items:center;
  justify-content:center;overflow:hidden;background:var(--am-dark);}
.am-hero--compact{min-height:50vh;}
.am-hero__bg-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.am-hero__overlay{position:absolute;inset:0;z-index:1;background:
  radial-gradient(1200px 520px at 50% 70%,rgba(0,0,0,0),rgba(0,0,0,.45)),
  linear-gradient(180deg,rgba(0,0,0,.40) 0%,rgba(0,0,0,.35) 100%);}
.am-hero__vehicle-overlay{position:absolute;bottom:6%;left:50%;
  transform:translateX(-50%);z-index:1;width:58vw;max-width:720px;opacity:.42;
  pointer-events:none;filter:drop-shadow(0 10px 30px rgba(0,0,0,.45));}
.am-hero__vehicle-overlay img{width:100%;height:auto;display:block;}
.am-hero__content{position:relative;z-index:2;text-align:center;
  padding:96px 20px 56px;max-width:860px;} /* tighter bottom — band below felt detached */
.am-hero__badge{display:inline-block;background:var(--am-primary-text);color:#fff;
  font:700 13px/1 var(--am-font-head);letter-spacing:1.5px;text-transform:uppercase;
  padding:6px 18px;border-radius:30px;margin-bottom:24px;} /* #d11414 bg: AA on small white text */
@media (max-width:480px){
  .am-hero__badge{font-size:11px;letter-spacing:1px;padding:6px 14px;white-space:nowrap;}
}
.am-hero__h1{color:#fff;font:800 clamp(2.2rem,5vw,4rem)/1.15 var(--am-font-head);
  margin:0 0 16px;text-shadow:0 2px 8px rgba(0,0,0,.5);}
.am-hero__price{display:block;color:var(--am-primary);font-size:clamp(2.5rem,6vw,4.5rem);}
.am-hero__subtitle{color:rgba(255,255,255,.95);font-size:clamp(1rem,2vw,1.2rem);
  max-width:600px;margin:0 auto 32px;line-height:1.7;}

/* ── Pill CTAs + glow (port of premium-cta-primary mixin) ── */
.am-cta-primary{display:inline-block;background:var(--am-primary);color:#fff;
  padding:15px 36px;border-radius:var(--am-radius-pill);
  /* 19px bold = WCAG "large text" → the white-on-#f42222 brand pair passes AA (3:1) */
  font:800 19px var(--am-font-head);letter-spacing:.5px;text-decoration:none;
  box-shadow:var(--am-shadow-cta);min-height:48px;border:none;cursor:pointer;
  transition:transform .2s,box-shadow .2s;}
.am-cta-primary:hover{transform:translateY(-1px);
  box-shadow:0 12px 40px rgba(244,34,34,.55);color:#fff!important;}
.am-cta-secondary{display:inline-block;background:transparent;color:#fff;
  padding:16px 36px;border-radius:var(--am-radius-pill);font-weight:700;
  border:2px solid rgba(255,255,255,.5);min-height:48px;text-decoration:none;
  transition:background .2s,border-color .2s;}
.am-cta-secondary:hover{background:rgba(255,255,255,.08);border-color:#fff;color:#fff!important;}
/* Secondary CTA variant for LIGHT sections (ink outline) */
.am-cta-secondary--ink{color:var(--am-text-primary)!important;border-color:rgba(13,13,13,.35);}
.am-cta-secondary--ink:hover{background:rgba(13,13,13,.05);border-color:var(--am-text-primary);color:var(--am-text-primary)!important;}

/* ── Customer Speaks (original WP testimonials, premium presentation) ── */
.am-testi-rating{display:flex;align-items:center;justify-content:center;gap:10px;}
.am-testi-stars{color:#f5a623;font-size:18px;letter-spacing:2px;}
/* Balanced 5-card layout: 3 + 2 centered (a bare 3-col grid left 2 orphans) */
.am-testi-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:20px;margin-top:36px;}
.am-testi-grid .am-testi{flex:0 1 calc((100% - 40px)/3);min-width:280px;}
.am-testi{margin:0;padding:26px;display:flex;flex-direction:column;gap:18px;background:#fff;}
.am-testi__quote{margin:0;font-size:14.5px;line-height:1.75;color:var(--am-text-body);position:relative;}
.am-testi__quote::before{content:'\201C';display:block;font:800 42px/0.5 Georgia,serif;
  color:var(--am-primary);margin-bottom:14px;}
.am-testi__who{display:flex;align-items:center;gap:12px;margin-top:auto;}
.am-testi__who img{width:56px;height:56px;border-radius:50%;object-fit:cover;
  border:2px solid var(--am-border);}
.am-testi__who strong{display:block;font-family:var(--am-font-head);font-size:15px;
  color:var(--am-text-primary);}
.am-testi__who small{color:var(--am-text-muted);font-size:12.5px;}
@media (max-width:640px){.am-testi-grid .am-testi{flex-basis:100%;}}

/* Cars cards: exactly 3 SKUs — center them instead of a ragged 4-col grid */
.am-svc-grid--three .am-svc-grid{grid-template-columns:repeat(3,1fr);max-width:980px;margin-left:auto;margin-right:auto;}
@media (max-width:900px){.am-svc-grid--three .am-svc-grid{grid-template-columns:1fr;max-width:420px;}}

/* "As Featured In" press strip */
.am-press{list-style:none;margin:30px 0 0;padding:0;display:flex;flex-wrap:wrap;
  gap:22px 40px;justify-content:center;align-items:center;}
.am-press__item img{height:64px;width:auto;object-fit:contain;border-radius:8px;
  filter:grayscale(35%);transition:filter .2s;}
.am-press__item img:hover{filter:none;}

/* City/brand pages: their per-page Elementor width CSS was never exported, so
   icon-box "services" rows collapsed to a stacked single column. Restore a
   responsive row for any container whose children are image-box widgets. */
.e-con-inner:has(> .e-con.e-child > .elementor-widget-image-box){
  display:flex;flex-direction:row;flex-wrap:wrap;gap:26px;justify-content:center;}
.e-con.e-child:has(> .elementor-widget-image-box){flex:1 1 200px;min-width:170px;max-width:260px;}

/* Section hubs (/bikes/ and /cars/): structure first, articles after */
.am-hub{padding-top:28px;}
.am-hub__h{font:800 22px var(--am-font-head);color:var(--am-text-primary);margin:26px 0 4px;}
.am-hub__h--articles{margin-top:40px;border-top:1px solid var(--am-border);padding-top:32px;}
.am-hub__strip{justify-content:flex-start;margin-top:12px;}

/* Cities interlink strip */
.am-city-strip{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:28px;}
.am-city-chip{padding:8px 18px;border:1px solid var(--am-border);border-radius:999px;
  font-size:13.5px;font-weight:600;color:var(--am-text-primary)!important;background:#fff;
  transition:border-color .2s,color .2s;}
.am-city-chip:hover{border-color:var(--am-primary);color:var(--am-primary-text)!important;}
.am-city-chip--all{background:var(--am-dark);color:#fff!important;border-color:var(--am-dark);}
.am-city-chip--all:hover{background:var(--am-primary);border-color:var(--am-primary);color:#fff!important;}

/* Franchise: retire the past-founders/award gallery (post-acquisition) */
.elementor-element-623649b{display:none!important;}
figure:has(img[src*="apaward2"]),figure:has(img[src*="APaward"]),
.elementor-element:has(> .elementor-widget-container > .elementor-image > img[src*="apaward"]){display:none!important;}

/* ── ThePlus "Unfold" read-more widgets shipped without their JS: content sat
   clipped+faded with a dead toggle (About page). Force fully unfolded. ── */
.tp-unfold-description,.tp-unfold-description-inner{
  max-height:none!important;height:auto!important;overflow:visible!important;
  -webkit-mask-image:none!important;mask-image:none!important;}
.tp-unfold-toggle,.tp-unfold-last-toggle{display:none!important;}

/* ── WhatsApp floating contact (sitewide, wa.me/917302224253) ── */
.am-wa-float{position:fixed;right:18px;bottom:18px;z-index:9999;
  width:56px;height:56px;border-radius:50%;background:#25d366;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 24px rgba(37,211,102,.45);
  transition:transform .2s,box-shadow .2s;}
.am-wa-float:hover{transform:scale(1.08);box-shadow:0 10px 32px rgba(37,211,102,.55);}
.am-wa-float svg{width:30px;height:30px;fill:#fff;}
@media (max-width:600px){.am-wa-float{right:14px;bottom:14px;width:52px;height:52px;}}
@media print{.am-wa-float{display:none;}}

/* ── Frosted glass trust bubbles (port of .rr-trust-bubble) ── */
.am-trust-bubbles{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;}
.am-trust-bubble{background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.15);border-radius:var(--am-radius-sm);
  padding:12px 20px;text-align:center;min-width:110px;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);}
.am-trust-bubble__value{display:block;color:#fff;font-weight:800;font-size:18px;
  font-family:var(--am-font-head);}
.am-trust-bubble__label{display:block;color:rgba(255,255,255,.7);font-size:12px;margin-top:2px;}

/* ── Hover-lift white card (port of premium-card mixin) ── */
.am-card{background:#fff;border:1px solid var(--am-border);
  border-radius:var(--am-radius-md);box-shadow:var(--am-shadow-card);
  transition:box-shadow .2s,transform .2s;}
.am-card:hover{box-shadow:var(--am-shadow-card-hover);transform:translateY(-2px);}

/* ── Glass pricing card (port of .rr-pricing-card) ── */
.am-pricing-card{background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.12);border-radius:var(--am-radius-lg);
  padding:36px 28px 32px;position:relative;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);}
.am-pricing-card--highlight{background:var(--am-primary);
  box-shadow:var(--am-shadow-highlight);transform:scale(1.04);}
.am-pricing-card__price{font:800 clamp(2rem,4vw,2.8rem)/1 var(--am-font-head);color:#fff;}

/* ── Step cards (port of .rr-step-card) ── */
.am-step-card{background:#fff;border:1px solid var(--am-border);
  border-radius:var(--am-radius-md);padding:28px 24px;text-align:center;
  box-shadow:var(--am-shadow-card);transition:box-shadow .2s,transform .2s;}
.am-step-card:hover{box-shadow:var(--am-shadow-card-hover);transform:translateY(-2px);}
.am-step-card__num{display:inline-flex;align-items:center;justify-content:center;
  width:48px;height:48px;border-radius:50%;background:var(--am-primary);color:#fff;
  font:800 20px var(--am-font-head);margin-bottom:16px;}

/* ── Comparison table (port of .rr-comparison) ── */
.am-comparison{width:100%;border-collapse:collapse;border-radius:var(--am-radius-md);
  overflow:hidden;box-shadow:var(--am-shadow-card);}
.am-comparison th{background:var(--am-dark);color:#fff;
  font-family:var(--am-font-head);padding:16px;text-align:left;}
.am-comparison td{padding:14px 16px;border-bottom:1px solid var(--am-border);}
.am-comparison tr:nth-child(even) td{background:var(--am-gray-bg);}

/* ── FAQ accordion (port of .rr-faq) ── */
.am-faq__item{border:1px solid var(--am-border);border-radius:var(--am-radius-sm);
  margin-bottom:12px;overflow:hidden;background:#fff;}
.am-faq__q{padding:18px 22px;font-family:var(--am-font-head);font-weight:700;
  cursor:pointer;display:flex;justify-content:space-between;align-items:center;}
.am-faq__a{padding:0 22px 18px;color:var(--am-text-body);line-height:1.7;}

/* ── Dark final-CTA band (port of .rr-final-cta) ── */
.am-final-cta{background:linear-gradient(135deg,var(--am-dark) 0%,#1a0000 100%);
  border-top:4px solid var(--am-primary);padding:72px 20px;text-align:center;}
.am-final-cta__h2{color:#fff;font:800 clamp(1.5rem,3vw,2.2rem)/1.25 var(--am-font-head);margin:0 0 12px;}
.am-final-cta__sub{color:rgba(255,255,255,.85);max-width:560px;margin:0 auto 28px;line-height:1.7;}

/* ── Blog card (port of .rr-blog-card) ── */
.am-blog-card{background:#fff;border:1px solid var(--am-border);
  border-radius:var(--am-radius-md);overflow:hidden;box-shadow:var(--am-shadow-card);
  transition:box-shadow .2s,transform .2s;}
.am-blog-card:hover{box-shadow:var(--am-shadow-card-hover);transform:translateY(-2px);}
.am-blog-card__body{padding:22px;}
.am-blog-card__title{font:700 1.15rem/1.3 var(--am-font-head);color:var(--am-text-primary);margin:0 0 10px;}

/* ── Testimonial (port of .rr-testimonial) ── */
.am-testimonial{background:#fff;border:1px solid var(--am-border);
  border-radius:var(--am-radius-md);padding:28px 26px;box-shadow:var(--am-shadow-card);}
.am-testimonial__stars{color:var(--am-primary);font-size:18px;letter-spacing:2px;margin-bottom:12px;}

/* ── Section kicker / heading helpers (port of premium-kicker/h2) ── */
.am-kicker{display:inline-block;color:var(--am-primary-text);font-family:var(--am-font-head);
  font-weight:800;letter-spacing:1.5px;text-transform:uppercase;font-size:13px;margin-bottom:10px;}
.am-h2{font:800 clamp(1.6rem,3.5vw,2.5rem)/1.2 var(--am-font-head);color:var(--am-text-primary);margin:0 0 14px;}
.am-subtitle{font-size:17px;color:var(--am-text-body);line-height:1.7;max-width:640px;}

/* ── Responsive: relax cinematic hero on small screens ── */
@media (max-width:768px){
  .am-hero{min-height:70vh;}
  .am-hero__content{padding:90px 18px 60px;}
  .am-hero__vehicle-overlay{width:78vw;opacity:.35;}
}

/* ============================================================================
   4.6 Acquisition endorsement + trust layer (docs/04 §2.1–§2.3, §3)
   ADDITIVE ONLY — appended below existing rules; alters nothing above.
   Quiet, premium "house of brands" endorsement. ApnaMechanic stays the
   primary brand; Ride N Repair reads as the trusted parent/network.
   ========================================================================== */

/* ── Footer endorsement line (all three layouts) ──
   A single muted, small-caps-kicker line appended after the existing
   copyright block. Reads as restraint, never a banner. */
.am-endorse{
  margin-top:10px;
  font-family:var(--am-font-body);
  font-size:13px;line-height:1.6;
  color:#8c8c8c;
  letter-spacing:.2px;}
.am-endorse__brand{
  font-family:var(--am-font-head);
  font-weight:700;
  letter-spacing:.4px;
  color:#bdbdbd;}
.am-endorse a{
  color:#cfcfcf;
  text-decoration:none;
  border-bottom:1px solid rgba(244,34,34,.55);
  transition:color .2s,border-color .2s;}
.am-endorse a:hover{
  color:var(--am-primary)!important;
  border-color:var(--am-primary);}
.am-endorse__sub{
  display:block;
  margin-top:3px;
  font-size:12px;
  color:#9a9a9a;} /* AA on the #0d0d0d footer (was #6f6f6f at 3.86:1) */

/* Booking-funnel minimal endorsement strip (BookingLayout has no footer).
   Slim, centered, never competes with the booking CTA. */
.am-endorse-strip{
  margin:0;padding:14px 20px;
  text-align:center;
  background:var(--am-dark);
  border-top:1px solid rgba(255,255,255,.08);}
.am-endorse-strip .am-endorse{margin-top:0;color:#9a9a9a;}

/* ── Trust badge strip (reusable TrustBadges.astro) ── */
.am-trust{font-family:var(--am-font-body);}
.am-trust__badges{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;gap:12px;
  justify-content:center;}
.am-trust__badge{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 16px;
  border-radius:var(--am-radius-pill);
  font-size:13px;font-weight:600;
  line-height:1;white-space:nowrap;}
.am-trust__icon{font-size:15px;line-height:1;}
.am-trust__caption{
  margin:16px 0 0;text-align:center;
  font-size:13px;color:var(--am-text-muted);}
.am-trust__caption a{
  color:var(--am-primary-text);text-decoration:none;font-weight:600;}
.am-trust__caption a:hover{text-decoration:underline;}

/* Panel variant — light page sections (glass card on light bg) */
.am-trust--panel .am-trust__badge{
  background:#fff;
  border:1px solid var(--am-border);
  color:var(--am-text-primary);
  box-shadow:var(--am-shadow-card);}

/* Light variant — over dark hero surfaces (frosted glass) */
.am-trust--light .am-trust__badge{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16);
  color:#fff;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);}
.am-trust--light .am-trust__caption{color:rgba(255,255,255,.75);}
.am-trust--light .am-trust__caption a{color:#fff;}

/* Homepage trust strip wrapper (sits below the hero content-area) */
.am-trust-hero{
  padding:30px 20px 8px;
  background:transparent;}

/* ── About-page "Now part of Ride N Repair" trust section ── */
.am-acq{
  margin:48px 0 8px;
  padding:36px 32px;
  background:var(--am-gray-bg);
  border:1px solid var(--am-border);
  border-left:4px solid var(--am-primary);
  border-radius:var(--am-radius-md);}
.am-acq__kicker{
  display:inline-block;
  font-family:var(--am-font-head);font-weight:800;
  letter-spacing:1.5px;text-transform:uppercase;
  font-size:12px;color:var(--am-primary-text);
  margin-bottom:10px;}
.am-acq__h{
  font:800 clamp(1.4rem,3vw,2rem)/1.25 var(--am-font-head);
  color:var(--am-text-primary);
  margin:0 0 14px;}
.am-acq__lead{
  font-size:16px;line-height:1.7;color:var(--am-text-body);
  max-width:720px;margin:0 0 22px;}
.am-acq__lead strong{color:var(--am-text-primary);}
.am-acq__list{
  list-style:none;margin:0;padding:0;
  display:grid;gap:12px;}
.am-acq__list li{
  position:relative;padding-left:28px;
  font-size:15px;line-height:1.6;color:var(--am-text-body);}
.am-acq__list li::before{
  content:'✓';position:absolute;left:0;top:0;
  color:var(--am-primary);font-weight:800;}
.am-acq__list li strong{color:var(--am-text-primary);}
.am-acq__trust{margin-top:26px;}

@media (max-width:768px){
  .am-acq{padding:28px 22px;}
  .am-trust__badge{font-size:12px;padding:8px 13px;}
}

/* ============================================================================
   5.4 Booking funnel login hero (DEFECT FIX)
   ----------------------------------------------------------------------------
   /booking/ (BookingLayout, Bootstrap) ships an OFF-BRAND GREEN left/hero
   panel: the carousel slides carry Bootstrap utility classes bg-success
   (green), bg-secondary (grey) and bg-danger (red), which the var cross-walk
   above does NOT reach (utility classes set a literal background-color, not a
   token). Below we recolor ONLY the carousel slides inside the booking
   .left-box to the RnR premium dark→red hero, leaving the per-slide
   background-image illustration untouched and legible. The status/discount
   bg-success badges elsewhere (booking-status, service-history,
   general-service) are intentionally NOT touched — green is meaningful there.
   ========================================================================== */
.left-box .carousel,
.left-box .carousel-inner{
  background:var(--am-dark);
  border-radius:0 0 0 var(--am-radius-lg);
  overflow:hidden;}
.left-box .carousel-item{
  /* Premium near-black → red gradient replaces the green/grey/red utilities.
     The inline per-slide background-image sits ON TOP of this color, so the
     illustration stays visible; this only repaints the empty surface. */
  background-color:var(--am-dark)!important;
  background-blend-mode:normal;}
/* Override the Bootstrap utility colors specifically on the booking slides. */
.left-box .carousel-item.bg-success,
.left-box .carousel-item.bg-secondary,
.left-box .carousel-item.bg-danger{
  background-color:var(--am-dark)!important;}
/* Cinematic gradient veil so any slide reads as the RnR dark/red hero and the
   white caption text stays legible over the illustration. */
.left-box .carousel-item::before{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(135deg,rgba(13,13,13,.92) 0%,rgba(42,0,0,.78) 55%,rgba(244,34,34,.55) 100%);}
.left-box .carousel-item > *{position:relative;z-index:1;}
.left-box .carousel-caption{color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.55);}
.left-box .carousel-caption h5{
  font-family:var(--am-font-head);font-weight:800;letter-spacing:.3px;}
.left-box .carousel-indicators [data-bs-target]{
  background-color:#fff;opacity:.55;}
.left-box .carousel-indicators .active{
  background-color:var(--am-primary);opacity:1;}

/* The "Login" CTA (.text-div a.custom-fw1) → red pill with glow. */
.right-box .text-div a.custom-fw1{
  display:inline-block;
  background:var(--am-primary)!important;color:#fff!important;
  font-family:var(--am-font-head);font-weight:800;letter-spacing:.5px;
  text-transform:uppercase;font-size:19px!important; /* WCAG large text on brand red */
  padding:8px 26px;border-radius:var(--am-radius-pill);
  box-shadow:var(--am-shadow-cta);
  transition:transform .2s,box-shadow .2s;}
.right-box .text-div a.custom-fw1:hover{
  transform:translateY(-1px);
  box-shadow:0 12px 40px rgba(244,34,34,.55);color:#fff!important;}
/* Kill the legacy grey underline pseudo-element on the Login link. */
.right-box .text-div a.custom-fw1::after{display:none!important;}
/* The submit button (.btn1) carries a legacy #c21010 !important inline-ish
   rule in login.css; re-skin it to brand red + glow, keep its 85% width. */
.right-box .btn1{
  background-color:var(--am-primary)!important;
  border-radius:var(--am-radius-pill)!important;
  font-family:var(--am-font-head);font-weight:800;letter-spacing:.5px;
  box-shadow:var(--am-shadow-cta);border:none!important;}

/* Store badges (DEFECT FIX): align Play + App Store badges by a shared height,
   keep them crisp (SVG / hi-dpi PNG) and tidy. */
.store-badges{gap:12px;}
.store-badge{height:46px;width:auto;display:block;}
@media (max-width:768px){
  .store-badge{height:42px;}
}

/* ============================================================================
   homepage — premium homepage composition (src/pages/index.astro).
   APPEND-ONLY. Builds on the .am-* component library above; adds only the
   section scaffolding + grids the new homepage needs. Light-DOM classes so
   the global last-loaded sheet applies (Astro scoped styles can't reach a
   .astro that imports this global file).
   ========================================================================== */

/* ── Section rhythm + helpers ── */
.am-section{padding:64px 0;}
.am-section .rh-container{max-width:1180px;margin:0 auto;padding:0 20px;}
.am-bg-light{background:var(--am-gray-bg);}
.am-bg-dark{background:var(--am-hero-grad-v);}
.am-center{text-align:center;}
.am-block{display:block;}
.am-mx-auto{margin-left:auto;margin-right:auto;}
.am-on-dark{color:#fff!important;}
.am-on-dark-sub{color:rgba(255,255,255,.85)!important;}
.am-center-flex{justify-content:center;}

/* ── Mobile nav: one app-like swipeable row instead of 3 wrapped rows ── */
@media (max-width:768px){
  .header-nav ul{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;}
  .header-nav ul::-webkit-scrollbar{display:none;}
  .header-nav li a{white-space:nowrap;}
}

/* ── Hero composition ── */
.am-home-hero{min-height:78vh;background:var(--am-hero-grad);}
/* Homepage bike accent: soft right-anchored ghost instead of a stretched photo */
.am-home-hero .am-hero__vehicle-overlay{left:auto;right:-4%;bottom:0;
  transform:none;width:42vw;max-width:520px;opacity:.34;}
@media (max-width:768px){
  .am-home-hero .am-hero__vehicle-overlay{right:-18%;width:78vw;opacity:.22;}
}
.am-home-hero .am-hero__content{max-width:920px;}
.am-hero__actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:30px;}
.am-hero__trust{margin-top:8px;}
.am-home-hero .am-trust__badges{gap:10px;}

/* ── Brands strip ── */
.am-brands-strip .am-subtitle{margin-bottom:28px;}
.am-brands{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;
  gap:18px 34px;justify-content:center;align-items:center;}
.am-brands__item img{height:46px;width:auto;object-fit:contain;
  filter:grayscale(1);opacity:.65;transition:filter .2s,opacity .2s;}
.am-brands__item img:hover{filter:grayscale(0);opacity:1;}

/* ── Value props ── */
.am-valueprops{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:36px;}
.am-vp{padding:30px 26px;text-align:center;}
.am-vp__icon{font-size:34px;display:block;margin-bottom:14px;}
.am-vp__title{font:800 1.15rem var(--am-font-head);color:var(--am-text-primary);margin:0 0 8px;}
.am-vp p{color:var(--am-text-body);line-height:1.65;margin:0;}

/* ── Service category grid ── */
.am-cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:36px;}
.am-cat{display:flex;flex-direction:column;text-decoration:none;overflow:hidden;
  padding:0 0 18px;}
.am-cat__media{display:block;height:150px;overflow:hidden;background:var(--am-gray-bg);}
.am-cat__media img{width:100%;height:100%;object-fit:cover;transition:transform .3s;}
.am-cat:hover .am-cat__media img{transform:scale(1.05);}
.am-cat__title{font:700 1.05rem var(--am-font-head);color:var(--am-text-primary);
  margin:16px 18px 0;}

/* ── Service price cards (ServiceCards.astro) ── */
.am-svc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:38px;}
.am-svc-card{display:flex;flex-direction:column;padding:30px 24px 26px;position:relative;}
.am-svc-card--highlight{border:2px solid var(--am-primary);
  box-shadow:0 12px 40px rgba(244,34,34,.18);}
.am-svc-card__flag{position:absolute;top:-12px;left:50%;transform:translateX(-50%);
  background:var(--am-primary-text);color:#fff;font:800 11px var(--am-font-head);
  letter-spacing:.8px;text-transform:uppercase;padding:5px 14px;border-radius:30px;
  white-space:nowrap;}
.am-svc-card__title{font:800 1.2rem var(--am-font-head);color:var(--am-text-primary);margin:0 0 6px;}
.am-svc-card__examples{color:var(--am-text-muted);font-size:13.5px;margin:0 0 16px;line-height:1.5;}
.am-svc-card__price{font:800 2.1rem var(--am-font-head);color:var(--am-text-primary);
  margin:0 0 18px;line-height:1;}
.am-svc-card__from{font:600 13px var(--am-font-body);color:var(--am-text-muted);
  text-transform:uppercase;letter-spacing:.5px;}
.am-svc-card__features{list-style:none;margin:0 0 22px;padding:0;flex:1;}
.am-svc-card__features li{position:relative;padding-left:24px;font-size:14px;
  color:var(--am-text-body);line-height:1.5;margin-bottom:9px;}
.am-svc-card__features li::before{content:'✓';position:absolute;left:0;top:0;
  color:var(--am-primary);font-weight:800;}
.am-svc-card__cta{text-align:center;width:100%;}

/* ── Steps ── */
.am-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:38px;}
.am-step__title{font:800 1.1rem var(--am-font-head);color:var(--am-text-primary);margin:0 0 8px;}
.am-step-card p{color:var(--am-text-body);line-height:1.6;margin:0;font-size:14.5px;}

/* ── Why-choose grid ── */
.am-why-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:36px;}
.am-why{padding:28px 26px;border-left:4px solid var(--am-primary);}
.am-why__title{font:800 1.15rem var(--am-font-head);color:var(--am-text-primary);margin:0 0 10px;}
.am-why p{color:var(--am-text-body);line-height:1.65;margin:0;}

/* ── Comparison ── */
.am-comparison-wrap{margin-top:36px;overflow-x:auto;}
.am-comparison td:nth-child(2){color:var(--am-success);font-weight:600;}
.am-comparison td:nth-child(3){color:var(--am-text-muted);}

/* ── Long-form prose ── */
.am-prose{max-width:880px;}
.am-prose h3{font:800 1.3rem var(--am-font-head);color:var(--am-text-primary);margin:30px 0 12px;}
.am-prose p{color:var(--am-text-body);line-height:1.8;font-size:15.5px;margin:0 0 18px;}

/* ── FAQ wrap + accordion polish (native <details>) ── */
.am-faq-wrap{max-width:820px;}
.am-faq{margin-top:34px;}
.am-faq__item{transition:box-shadow .2s;}
.am-faq__item[open]{box-shadow:var(--am-shadow-card);}
.am-faq__q{list-style:none;}
.am-faq__q::-webkit-details-marker{display:none;}
.am-faq__icon{color:var(--am-primary);font-size:24px;font-weight:300;line-height:1;
  transition:transform .2s;flex-shrink:0;margin-left:16px;}
.am-faq__item[open] .am-faq__icon{transform:rotate(45deg);}

/* ── Blog grid ── */
.am-blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:38px;}
.am-blog-card__excerpt{color:var(--am-text-body);font-size:14px;line-height:1.6;}
.am-blog-card__excerpt p{margin:0;}

/* ── Responsive ── */
@media (max-width:960px){
  .am-cat-grid,.am-svc-grid,.am-steps{grid-template-columns:repeat(2,1fr);}
  .am-blog-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:768px){
  .am-section{padding:48px 0;}
  .am-valueprops,.am-why-grid,.am-blog-grid{grid-template-columns:1fr;}
}
@media (max-width:560px){
  .am-cat-grid,.am-svc-grid,.am-steps{grid-template-columns:1fr;}
  .am-svc-card--highlight{transform:none;}
}