/* ── RepairMap Module Styles ──────────────────────────────────────────────
   Restored to RepairMap's own original visual identity. Source of truth:
   the ported React/Tailwind build this module was completed from
   (RepairMap-Full-Project/repairmap/client/src, see client/src/index.css),
   which defines a warm, editorial "repair workshop" look — cream paper
   background, dark teal-green ink text, a terracotta/coral accent, a deep
   forest-green for dark panels, and Playfair Display serif headings over
   Manrope body text.

   An earlier build pass ("2026-08-27 identity unification") deliberately
   stripped all of this out and made the module fall back to bimbly.eu's
   generic site-wide purple (--brand:#7657ff / --brand2:#9a7dff). That is
   reverted here — RepairMap gets its own palette back.

   How it's scoped: the palette lives in its own --rpm-* custom properties
   (below) so nothing here ever redefines bimbly's shared --brand/--text/
   --muted/etc. at :root — that would leak into the shared site-wide
   header/nav/footer. Instead, the shared token *names* are re-pointed to
   RepairMap's palette only inside <main> (which on every repair-map page
   contains just this module's own content — the shared header, nav and
   footer all render outside <main>). That single scoped block is what
   makes bimbly.css-defined shared classes reused here (.eyebrow, .section,
   ad slot links, breadcrumbs, etc.) automatically pick up RepairMap's
   colors instead of bimbly purple, without touching those files.

   Class names for this module's own components are prefixed rpm- to avoid
   colliding with other modules.
   ─────────────────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Playfair+Display:wght@600;700&display=swap');

:root {
  --rpm-ink: #243a38;
  --rpm-muted: #6b7977;
  --rpm-paper: #f7f4ed;
  --rpm-warm: #fffefa;
  --rpm-coral: #de7255;
  --rpm-coral-dark: #c65e44;
  --rpm-sage: #dbe7df;
  --rpm-sage-soft: #f2f6f2;
  --rpm-sage-text: #466056;
  --rpm-line: #dde3dd;
  --rpm-forest: #294840;
  --rpm-forest-dark: #1f3932;
  --rpm-font-serif: "Playfair Display", Georgia, serif;
  --rpm-font-sans: "Manrope", Arial, sans-serif;
  --rpm-radius: 16px;
  --rpm-shadow: 0 20px 50px rgba(41, 72, 64, .14);
  --rpm-easing: cubic-bezier(0.23, 1, 0.32, 1);
}

/* Re-point the shared bimbly tokens to RepairMap's own palette, scoped to
   <main> only — the shared site-header/nav/footer live outside <main> on
   every repair-map page and are completely unaffected by this. */
main {
  --brand: var(--rpm-coral);
  --brand2: var(--rpm-coral-dark);
  --text: var(--rpm-ink);
  --muted: var(--rpm-muted);
  --surface: var(--rpm-warm);
  --surface2: var(--rpm-sage);
  --surface-soft: var(--rpm-sage-soft);
  --surface-alt: rgba(222, 114, 85, .07);
  --line: var(--rpm-line);
  --bg: var(--rpm-paper);
  --dark: var(--rpm-forest);
  --radius: var(--rpm-radius);
  --shadow: var(--rpm-shadow);
  background: var(--rpm-paper);
  font-family: var(--rpm-font-sans);
  color: var(--rpm-ink);
}
main h1, main h2, main h3 { font-family: var(--rpm-font-serif); letter-spacing: -.03em; }

.rpm-radius { --rpm-radius: 16px; }

/* ── Hero section ──────────────────────────────────────────────────────── */
.rpm-hero-section {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(300px, .9fr);
  align-items: center;
  gap: clamp(28px, 5vw, 60px);
  padding: clamp(40px, 6vw, 72px) 0 clamp(48px, 7vw, 80px);
  border-bottom: 1px solid var(--rpm-line, #dde3dd);
}
.rpm-hero-content { padding-top: 0; }
.rpm-hero-content h1 {
  margin: 12px 0 0;
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1.06;
  letter-spacing: -.03em;
  color: var(--rpm-ink, #243a38);
}
.rpm-hero-content h1 em { color: var(--rpm-coral, #de7255); font-style: italic; }
.rpm-hero-copy {
  font-size: 1.08rem;
  color: var(--rpm-muted, #6b7977);
  margin: 18px 0 0;
  line-height: 1.6;
  max-width: 480px;
}
.rpm-hero-visual { align-self: start; }

/* ── Search form ───────────────────────────────────────────────────────── */
.rpm-search-form {
  margin-top: 28px;
  background: var(--rpm-warm, #fffefa);
  border: 1px solid var(--rpm-line, #dde3dd);
  border-radius: 18px;
  padding: 8px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  box-shadow: var(--rpm-shadow, 0 20px 50px rgba(41,72,64,.14));
  max-width: 560px;
}
.rpm-search-input {
  border: 0;
  background: var(--rpm-sage-soft, #f2f6f2);
  border-radius: 12px;
  padding: 14px 18px;
  font-size: .95rem;
  font-family: inherit;
  outline: none;
  color: var(--rpm-ink, #243a38);
  transition: background .2s;
}
.rpm-search-input::placeholder { color: var(--rpm-muted, #6b7977); }
.rpm-search-input:focus { background: var(--rpm-warm, #fffefa); box-shadow: 0 0 0 2px rgba(222,114,85,.25); }
.rpm-search-btn {
  padding: 12px 22px;
  background: var(--rpm-coral, #de7255);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-weight: 700;
  font-size: .9rem;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 8px 24px rgba(222,114,85,.28);
  transition: background .15s, transform .1s;
}
.rpm-search-btn:hover  { background: var(--rpm-coral-dark, #c65e44); }
.rpm-search-btn:active { transform: scale(.97); }

/* ── Hero side panel ───────────────────────────────────────────────────── */
.rpm-hero-panel {
  background: var(--rpm-forest, #294840);
  border: 1px solid var(--rpm-forest, #294840);
  border-radius: var(--rpm-radius, 16px);
  padding: 28px;
  box-shadow: var(--rpm-shadow, 0 20px 50px rgba(41,72,64,.14));
  color: #fffefa;
}
.rpm-hero-panel-head {
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #f6a588;
  margin: 0 0 12px;
}

/* ── Section heading ───────────────────────────────────────────────────── */
.rpm-section-head { margin-bottom: 20px; }
.rpm-section-head .eyebrow { margin-bottom: 10px; }
.rpm-section-head h2 {
  margin: 0;
  font-size: clamp(1.4rem, 2.5vw, 1.9rem);
  font-weight: 600;
  letter-spacing: -.03em;
  line-height: 1.15;
  color: var(--rpm-ink, #243a38);
}

/* ── Content layout (main column + sidebar) ───────────────────────────── */
.rpm-content-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 28px;
  align-items: start;
}
.rpm-sidebar { display: flex; flex-direction: column; gap: 20px; }

/* ── Cards ─────────────────────────────────────────────────────────────── */
.rpm-card {
  background: var(--rpm-warm, #fffefa);
  border: 1px solid var(--rpm-line, #dde3dd);
  border-radius: var(--rpm-radius, 16px);
  padding: 22px;
  box-shadow: 0 2px 12px rgba(41,72,64,.06);
  transition: border-color .18s var(--rpm-easing), box-shadow .18s var(--rpm-easing), transform .18s var(--rpm-easing);
}
.rpm-card:hover { border-color: rgba(222,114,85,.55); box-shadow: 0 12px 27px rgba(41,72,64,.1); }
.rpm-card-title {
  font-size: .68rem;
  font-weight: 800;
  font-family: var(--rpm-font-sans);
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--rpm-muted, #6b7977);
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rpm-line, #dde3dd);
}

/* ── Cat / result grid ─────────────────────────────────────────────────── */
.rpm-cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}

/* ── Status badge ──────────────────────────────────────────────────────── */
.rpm-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 700;
  color: #fff;
  background: var(--badge-color, var(--rpm-muted, #6b7977));
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Buttons ───────────────────────────────────────────────────────────── */
.rpm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 18px;
  border-radius: 999px;
  font-size: .85rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  border: 1.5px solid transparent;
  transition: background .15s var(--rpm-easing), border-color .15s var(--rpm-easing), color .15s var(--rpm-easing), opacity .15s var(--rpm-easing), transform .1s var(--rpm-easing);
  line-height: 1.4;
}
.rpm-btn:active { transform: scale(.97); }
.rpm-btn:hover  { text-decoration: none; }
.rpm-btn-primary {
  background: var(--rpm-coral, #de7255);
  color: #fff;
  box-shadow: 0 8px 24px rgba(222,114,85,.28);
  border-color: transparent;
}
.rpm-btn-primary:hover { background: var(--rpm-coral-dark, #c65e44); color: #fff; }
.rpm-btn-ghost {
  background: transparent;
  border-color: var(--rpm-line, #dde3dd);
  color: var(--rpm-ink, #243a38);
}
.rpm-btn-ghost:hover { border-color: var(--rpm-coral, #de7255); color: var(--rpm-coral, #de7255); }
.rpm-btn-full { width: 100%; }
.rpm-btn-sm   { padding: 6px 14px; font-size: .8rem; }

/* ── Small form utilities used by the lead / review forms ────────────────── */
.rpm-stack label { display: block; margin-bottom: 12px; font-size: .84rem; font-weight: 600; color: var(--rpm-ink, #243a38); }
.rpm-stack input, .rpm-stack textarea, .rpm-stack select {
  width: 100%; margin-top: 4px; padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--rpm-line, #dde3dd); font-family: inherit; font-size: .9rem;
  background: var(--rpm-warm, #fffefa); color: var(--rpm-ink, #243a38);
  transition: border-color .15s var(--rpm-easing);
}
.rpm-stack input:focus, .rpm-stack textarea:focus, .rpm-stack select:focus { border-color: var(--rpm-coral, #de7255); outline: none; }
.rpm-check { display: flex; align-items: center; gap: 6px; font-weight: 400 !important; }

@media (max-width: 900px) {
  .rpm-hero-section    { grid-template-columns: 1fr; }
  .rpm-content-layout  { grid-template-columns: 1fr; }
  .rpm-sidebar         { order: -1; }
  .rpm-search-form     { grid-template-columns: 1fr; border-radius: 18px; }
  .rpm-search-btn      { width: 100%; border-radius: 12px; justify-content: center; }
  .rpm-cat-grid        { grid-template-columns: 1fr; }
}


/* layout-fix-2026-09-29 (screenshot review) */
section.rpm-hero-section{max-width:1200px;margin-left:auto;margin-right:auto;padding-left:clamp(16px, 4vw, 24px);padding-right:clamp(16px, 4vw, 24px);box-sizing:border-box}section.rpm-hero-section .rpm-hero-visual .rpm-hero-panel p{color:rgba(255,254,250,.82)!important} /* the p carries an inline color:var(--muted) */