/* ==========================================================================
   KRP Automotive — Mobile-First Redesign Layer
   Non-destructive progressive-enhancement overlay for the static Elementor
   export. Adds a modern mobile conversion system (top action bar, fixed
   bottom navigation, slide-in menu drawer, location call sheet) plus light
   global polish, without altering existing markup, URLs, or SEO content.
   Design reference: conversion-focused service-business UX (A1 Garage-style)
   adapted to KRP branding. Mobile is the primary target; desktop is enhanced.
   ========================================================================== */

:root {
  --krp-red: #d62128;
  --krp-red-dark: #aa191f;
  --krp-blue: #34a0cf;
  --krp-blue-dark: #277eab;
  --krp-ink: #1a1a1a;
  --krp-ink-soft: #444a52;
  --krp-line: #e6e8ec;
  --krp-bg-soft: #f5f7fa;
  --krp-white: #ffffff;

  --krp-shadow-sm: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .1);
  --krp-shadow-md: 0 4px 12px rgba(16, 24, 40, .08), 0 2px 4px rgba(16, 24, 40, .06);
  --krp-shadow-lg: 0 12px 32px rgba(16, 24, 40, .16);

  --krp-radius: 14px;
  --krp-radius-sm: 10px;
  --krp-bottomnav-h: 62px;
  --krp-safe-b: env(safe-area-inset-bottom, 0px);

  --krp-font: "Poppins", "Inter", system-ui, -apple-system, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;
}

/* ---- Prevent horizontal overflow site-wide (mobile hygiene) ---------- */
html.krp-enhanced,
html.krp-enhanced body { max-width: 100%; overflow-x: hidden; }

/* Reserve space so the fixed bottom nav never covers page-ending content.
   Applied only where the nav is visible (<=1024px) to avoid desktop CLS. */
@media (max-width: 1024px) {
  html.krp-enhanced body {
    padding-bottom: calc(var(--krp-bottomnav-h) + var(--krp-safe-b)) !important;
  }
}

/* ==========================================================================
   1. GLOBAL POLISH  (kept conservative so existing Elementor layouts survive)
   ========================================================================== */

/* Smoother, tappable primary buttons across the site */
.krp-enhanced .elementor-button,
.krp-enhanced button[onclick*="AutoOps"] {
  border-radius: var(--krp-radius-sm) !important;
  font-weight: 600 !important;
  letter-spacing: .01em;
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
  min-height: 44px;
}
.krp-enhanced .elementor-button:hover,
.krp-enhanced button[onclick*="AutoOps"]:hover {
  transform: translateY(-1px);
  box-shadow: var(--krp-shadow-md);
}

/* Visible focus states for accessibility (keyboard users) */
.krp-enhanced a:focus-visible,
.krp-enhanced button:focus-visible,
.krp-enhanced [role="button"]:focus-visible {
  outline: 3px solid var(--krp-blue);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ==========================================================================
   2. MOBILE TOP ACTION BAR  (sticky, high-visibility Call + Book)
   Sits above content on small screens; hidden on desktop where the full
   header/nav takes over.
   ========================================================================== */
.krp-actionbar { display: none; }

@media (max-width: 1024px) {
  .krp-actionbar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 10px;
    background: var(--krp-white);
    border-bottom: 1px solid var(--krp-line);
    box-shadow: var(--krp-shadow-sm);
  }
  html.krp-enhanced .krp-actionbar__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    padding: 0 12px;
    border-radius: var(--krp-radius-sm) !important;
    font: 600 15px/1 var(--krp-font) !important;
    text-decoration: none !important;
    border: 1.5px solid transparent !important;
    box-shadow: none !important;
    cursor: pointer;
    width: 100%;
  }
  html.krp-enhanced .krp-actionbar__btn svg { width: 18px; height: 18px; flex: none; }
  html.krp-enhanced .krp-actionbar__call {
    background: var(--krp-red) !important;
    color: #fff !important;
  }
  html.krp-enhanced .krp-actionbar__call:active { background: var(--krp-red-dark) !important; }
  html.krp-enhanced .krp-actionbar__book {
    background: #fff !important;
    color: var(--krp-red) !important;
    border-color: var(--krp-red) !important;
  }
}

/* ==========================================================================
   3. FIXED BOTTOM NAVIGATION  (flagship mobile component)
   ========================================================================== */
.krp-bottomnav { display: none; }

@media (max-width: 1024px) {
  .krp-bottomnav {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 950;
    background: var(--krp-white);
    border-top: 1px solid var(--krp-line);
    box-shadow: 0 -6px 20px rgba(16, 24, 40, .1);
    padding-bottom: var(--krp-safe-b);
    height: calc(var(--krp-bottomnav-h) + var(--krp-safe-b));
  }
  html.krp-enhanced .krp-bottomnav__item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 6px 2px;
    text-decoration: none !important;
    color: var(--krp-ink-soft) !important;
    font: 600 10.5px/1 var(--krp-font);
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    min-height: 44px;
  }
  .krp-bottomnav__item svg { width: 22px; height: 22px; }
  .krp-bottomnav__item span { letter-spacing: .01em; }
  .krp-bottomnav__item:active { background: var(--krp-bg-soft) !important; }
  html.krp-enhanced .krp-bottomnav__call,
  html.krp-enhanced .krp-bottomnav__book,
  html.krp-enhanced .krp-bottomnav__item.is-active { color: var(--krp-red) !important; }
  .krp-bottomnav__item.is-active::before {
    content: "";
    position: absolute;
    top: 0;
    width: 34px;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: var(--krp-red);
  }
  /* Book + Call are the two primary conversion actions — both get an emphasized
     solid ring so they read as the money buttons in the bar. */
  html.krp-enhanced .krp-bottomnav__call .krp-bottomnav__callring,
  html.krp-enhanced .krp-bottomnav__book .krp-bottomnav__bookring {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--krp-red) !important;
    color: #fff !important;
    margin-top: -3px;
    box-shadow: 0 4px 12px rgba(214, 33, 40, .34);
  }
  html.krp-enhanced .krp-bottomnav__book .krp-bottomnav__bookring {
    background: linear-gradient(135deg, var(--krp-red), var(--krp-red-dark)) !important;
  }
  .krp-bottomnav__call .krp-bottomnav__callring svg,
  .krp-bottomnav__book .krp-bottomnav__bookring svg { width: 18px; height: 18px; }
  .krp-bottomnav__book:active .krp-bottomnav__bookring,
  .krp-bottomnav__call:active .krp-bottomnav__callring { transform: scale(.92); }
}

/* ==========================================================================
   4. OVERLAY + PANELS (menu drawer & call sheet share the scrim)
   ========================================================================== */
.krp-scrim {
  position: fixed;
  inset: 0;
  background: rgba(16, 24, 40, .5);
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
  z-index: 960;
}
.krp-scrim.is-open { opacity: 1; visibility: visible; }

/* ---- Slide-in Menu Drawer (right side) -------------------------------- */
.krp-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(88vw, 380px);
  background: var(--krp-white);
  z-index: 970;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform .28s cubic-bezier(.4, 0, .2, 1), visibility .28s ease;
  display: flex;
  flex-direction: column;
  box-shadow: var(--krp-shadow-lg);
  will-change: transform;
}
.krp-drawer.is-open { transform: translateX(0); visibility: visible; }

.krp-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--krp-line);
  background: var(--krp-ink);
}
.krp-drawer__head img { height: 40px; width: auto; }
.krp-drawer__brand { color: #fff; font: 700 16px/1.1 var(--krp-font); }
.krp-drawer__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  cursor: pointer;
  flex: none;
}
.krp-drawer__close svg { width: 20px; height: 20px; }

.krp-drawer__body {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  flex: 1;
  padding: 8px 0 16px;
  overscroll-behavior: contain;
}

/* CTA row pinned near the top of the drawer for quick conversion */
.krp-drawer__cta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 14px 16px;
}
html.krp-enhanced .krp-drawer__cta a,
html.krp-enhanced .krp-drawer__cta button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  border-radius: var(--krp-radius-sm) !important;
  font: 700 14px/1 var(--krp-font) !important;
  text-decoration: none !important;
  border: 1.5px solid var(--krp-red) !important;
  box-shadow: none !important;
  cursor: pointer;
}
html.krp-enhanced .krp-drawer__cta .krp-cta-call { background: var(--krp-red) !important; color: #fff !important; }
html.krp-enhanced .krp-drawer__cta .krp-cta-book { background: #fff !important; color: var(--krp-red) !important; }
.krp-drawer__cta svg { width: 17px; height: 17px; }

.krp-nav { list-style: none; margin: 0; padding: 0; }
.krp-nav__section-label {
  padding: 14px 18px 6px;
  font: 700 11px/1 var(--krp-font);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--krp-blue-dark);
}
.krp-nav__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 13px 18px;
  color: var(--krp-ink);
  text-decoration: none;
  font: 600 16px/1.2 var(--krp-font);
  border-bottom: 1px solid var(--krp-line);
}
.krp-nav__link:active { background: var(--krp-bg-soft); }
.krp-nav__link svg { width: 18px; height: 18px; color: var(--krp-red); flex: none; }

/* Collapsible groups (Services / Locations) */
.krp-acc__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 10px;
  padding: 13px 18px;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--krp-line);
  color: var(--krp-ink);
  font: 700 16px/1.2 var(--krp-font);
  cursor: pointer;
  text-align: left;
}
.krp-acc__chev {
  width: 20px;
  height: 20px;
  color: var(--krp-red);
  transition: transform .2s ease;
  flex: none;
}
.krp-acc__toggle[aria-expanded="true"] .krp-acc__chev { transform: rotate(180deg); }
.krp-acc__panel {
  display: none;
  background: var(--krp-bg-soft);
}
.krp-acc__panel.is-open { display: block; }
.krp-acc__panel a {
  display: block;
  padding: 12px 18px 12px 30px;
  color: var(--krp-ink-soft);
  text-decoration: none;
  font: 500 15px/1.2 var(--krp-font);
  border-bottom: 1px solid var(--krp-line);
}
.krp-acc__panel a:active { background: #edf1f6; }

/* ---- Location Call Sheet (bottom sheet) ------------------------------- */
.krp-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 970;
  background: var(--krp-white);
  border-radius: 18px 18px 0 0;
  transform: translateY(100%);
  visibility: hidden;
  transition: transform .28s cubic-bezier(.4, 0, .2, 1), visibility .28s ease;
  box-shadow: var(--krp-shadow-lg);
  padding-bottom: calc(12px + var(--krp-safe-b));
  max-height: 80vh;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.krp-sheet.is-open { transform: translateY(0); visibility: visible; }
.krp-sheet__grip {
  width: 40px;
  height: 4px;
  border-radius: 4px;
  background: #d3d7de;
  margin: 10px auto 4px;
}
.krp-sheet__title {
  text-align: center;
  font: 700 17px/1.2 var(--krp-font);
  color: var(--krp-ink);
  margin: 4px 0 10px;
}
.krp-sheet__list { padding: 0 12px; }
.krp-sheet__row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 12px;
  border: 1px solid var(--krp-line);
  border-radius: var(--krp-radius);
  margin-bottom: 10px;
  text-decoration: none;
  color: var(--krp-ink);
}
.krp-sheet__row:active { background: var(--krp-bg-soft); }
.krp-sheet__ic {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--krp-red);
  color: #fff;
  flex: none;
}
.krp-sheet__ic svg { width: 20px; height: 20px; }
.krp-sheet__meta { display: flex; flex-direction: column; gap: 2px; }
.krp-sheet__city { font: 700 15px/1.1 var(--krp-font); }
.krp-sheet__num { font: 600 14px/1.1 var(--krp-font); color: var(--krp-red); }
.krp-sheet__addr { font: 400 12px/1.2 var(--krp-font); color: var(--krp-ink-soft); }
/* A shop that has been announced but has no phone line yet: listed so the
   town is visible, but it is not a call target. (Dawson, 2026-10-06) */
.krp-sheet__row--soon { cursor: default; }
.krp-sheet__row--soon .krp-sheet__ic { background: var(--krp-bg-soft); color: var(--krp-ink-soft); }
.krp-sheet__num--soon { color: var(--krp-ink-soft); font-weight: 700; letter-spacing: .02em; text-transform: uppercase; font-size: 12px; }

/* Lock background scroll when a panel is open */
html.krp-lock, html.krp-lock body { overflow: hidden !important; }

/* ==========================================================================
   5. DESKTOP  — hide mobile chrome, restore normal document flow
   ========================================================================== */
@media (min-width: 1025px) {
  .krp-actionbar,
  .krp-bottomnav { display: none !important; }
}

/* ==========================================================================
   6. HARDENING — the injected chrome lives inside Elementor's aggressive
   global CSS. Enforce link/text colors so nothing bleeds through.
   ========================================================================== */
html.krp-enhanced .krp-drawer a,
html.krp-enhanced .krp-sheet a { text-decoration: none !important; box-shadow: none !important; }
html.krp-enhanced .krp-nav__link { color: var(--krp-ink) !important; }
html.krp-enhanced .krp-nav__link svg { color: var(--krp-red) !important; }
html.krp-enhanced .krp-acc__toggle { color: var(--krp-ink) !important; background: none !important; text-transform: none !important; letter-spacing: normal !important; font-family: var(--krp-font) !important; font-weight: 600 !important; }
html.krp-enhanced .krp-nav__link,
html.krp-enhanced .krp-acc__panel a,
html.krp-enhanced .krp-actionbar__btn span,
html.krp-enhanced .krp-drawer__cta a,
html.krp-enhanced .krp-drawer__cta button { font-family: var(--krp-font) !important; text-transform: none !important; }
html.krp-enhanced .krp-acc__toggle > span svg { color: var(--krp-red) !important; width: 18px; height: 18px; }
html.krp-enhanced .krp-acc__panel a { color: var(--krp-ink-soft) !important; }
html.krp-enhanced .krp-drawer__close { background: rgba(255,255,255,.14) !important; color: #fff !important; }
html.krp-enhanced .krp-sheet__row { color: var(--krp-ink) !important; }
html.krp-enhanced .krp-sheet__num { color: var(--krp-red) !important; }
html.krp-enhanced .krp-sheet__addr { color: var(--krp-ink-soft) !important; }
html.krp-enhanced .krp-sheet__ic { background: var(--krp-red) !important; color: #fff !important; }
html.krp-enhanced .krp-sheet__title,
html.krp-enhanced .krp-sheet__city { color: var(--krp-ink) !important; }

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  .krp-drawer, .krp-sheet, .krp-scrim,
  .krp-enhanced .elementor-button { transition: none !important; }
}


/* Elementor's kit styles every <button>, and the drawer's accordion rows are
   buttons, so the kit's red button border was painted under Services, Vehicles
   and Locations while the plain link rows kept the grey divider. Matched with
   one more class so every row in the drawer shares the same line.
   Dawson, 2026-10-05: "some of the red lines ... look thicker / brighter red". */
html.krp-enhanced .krp-acc__toggle {
  border: 0 !important;
  border-bottom: 1px solid var(--krp-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
html.krp-enhanced .krp-acc__toggle:hover,
html.krp-enhanced .krp-acc__toggle:focus-visible {
  border-bottom-color: var(--krp-line) !important;
  background: var(--krp-bg-soft) !important;
}