/* Silver Spider Media post-migration enhancement stylesheet — doncasterprospray.co.uk
   (C&S Pro Spray, Doncaster).

   Every token below was lifted from the LIVE staging site's own computed styles
   (Playwright getComputedStyle on /, /car-body-repairs/ and /services/ at 1440):
     body        : "DM Sans", sans-serif / 16px / weight 400-500 / line-height 29.71px
                   colour rgb(254,249,225) on rgb(22,25,35)
     display     : Outfit / 600 / UPPERCASE / rgb(255,255,255)
                   H1 80px/88px, H2 40px/44px, H3 32px/41.6px
     kicker+btn  : Oswald / 400 / 14px / UPPERCASE / letter-spacing 2px
                   padding 14px 38px / border-radius 0
     accent      : rgb(253,152,0) primary, rgb(233,140,0) secondary
     containers  : 1000px on service pages, 1200px on the services index
     hero        : /wp-content/uploads/2025/02/465280887_...n.jpg, the ONLY background
                   image the whole site uses, over a dark overlay
   Motifs echoed here: orange triangle bullets and the short orange rule under a
   heading (both from /services/), zero-radius outline buttons (from the hero
   "CALL US"), photo band with dark overlay, uppercase Oswald micro-labels.

   CACHE NOTE: this file lives under /wp-content/, which vercel.json caches
   public, max-age=31536000, immutable. A returning visitor will NEVER see an edit
   at a stable path. Bump the ?v= query on EVERY change to this file.
   Current version: v1
*/

.dps-enh {
  --dps-bg: #161923;
  --dps-black: #000000;
  --dps-cream: #fef9e1;
  --dps-white: #ffffff;
  --dps-orange: #fd9800;
  --dps-orange-2: #e98c00;
  --dps-line: #2c3140;
  --dps-display: Outfit, sans-serif;
  --dps-body: "DM Sans", sans-serif;
  --dps-label: Oswald, sans-serif;
}

/* Theme CSS fights injected styles on this build, so typography and colour are
   pinned in explicit px with !important throughout. */
.dps-enh {
  background: var(--dps-black) !important;
  color: var(--dps-cream) !important;
  font-family: var(--dps-body) !important;
}
.dps-enh *,
.dps-enh *::before,
.dps-enh *::after { box-sizing: border-box; }

.dps-enh h1, .dps-enh h2, .dps-enh h3, .dps-enh h4 {
  font-family: var(--dps-display) !important;
  font-weight: 600 !important;
  color: var(--dps-white) !important;
  text-transform: uppercase !important;
  letter-spacing: normal !important;
  margin: 0 0 20px !important;
}
.dps-enh h1 { font-size: clamp(34px, 6vw, 80px) !important; line-height: 1.1 !important; }
.dps-enh h2 { font-size: clamp(26px, 3.4vw, 40px) !important; line-height: 1.1 !important; }
.dps-enh h3 { font-size: clamp(20px, 2.4vw, 32px) !important; line-height: 1.3 !important; }
.dps-enh h4 { font-size: 20px !important; line-height: 1.3 !important; }

.dps-enh p, .dps-enh li, .dps-enh td, .dps-enh th {
  font-family: var(--dps-body) !important;
  font-size: 16px !important;
  line-height: 29.71px !important;
  color: var(--dps-cream) !important;
  font-weight: 400 !important;
}
.dps-enh p { margin: 0 0 20px !important; }
.dps-enh strong { color: var(--dps-white) !important; font-weight: 700 !important; }

.dps-kicker {
  display: block;
  font-family: var(--dps-label) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  color: var(--dps-orange) !important;
  margin: 0 0 14px !important;
}

/* Short orange rule under a heading — lifted from the /services/ H1 treatment. */
.dps-rule { display: block; width: 80px; height: 4px; background: var(--dps-orange); margin: 0 0 34px; }
.dps-hero .dps-rule { margin-left: auto; margin-right: auto; }

.dps-wrap { max-width: 1000px; margin: 0 auto; padding: 0 24px; }
.dps-wrap-wide { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.dps-sec { padding: 72px 0; background: var(--dps-black); }
.dps-sec-alt { background: var(--dps-bg); }

/* 48px scroll anchor offset: the site has a sticky header band. */
.dps-enh [id] { scroll-margin-top: 48px; }

/* ---------- hero ---------- */
.dps-hero {
  position: relative;
  /* The theme header is transparent and overlays the hero, so the top padding has
     to clear the logo lockup or the kicker lands behind it. Measured on the
     rendered exemplar, not guessed. */
  padding: 200px 24px 110px;
  text-align: center;
  background-color: #0b0d13;
  background-image:
    linear-gradient(rgba(8, 10, 15, 0.72), rgba(8, 10, 15, 0.82)),
    url("/wp-content/uploads/2025/02/465280887_9352592418103501_6333277339166402368_n.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
.dps-hero h1 { text-shadow: 0 2px 18px rgba(0, 0, 0, 0.75); max-width: 16ch; margin-left: auto !important; margin-right: auto !important; }
.dps-hero .dps-lede {
  max-width: 62ch; margin: 0 auto 30px !important;
  font-size: 18px !important; line-height: 32px !important;
  color: var(--dps-cream) !important;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.8);
}
.dps-hero .dps-kicker { text-shadow: 0 1px 8px rgba(0, 0, 0, 0.8); }

/* ---------- buttons ---------- */
.dps-btns { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }
.dps-sec .dps-btns { justify-content: flex-start; }
.dps-btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--dps-label) !important;
  font-size: 14px !important; font-weight: 400 !important;
  letter-spacing: 2px !important; text-transform: uppercase !important;
  padding: 14px 38px !important; border-radius: 0 !important;
  text-decoration: none !important; line-height: 1.4 !important;
  border: 1px solid var(--dps-white); color: var(--dps-white) !important;
  background: transparent !important; transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.dps-btn:hover, .dps-btn:focus-visible { background: var(--dps-white) !important; color: #101010 !important; }
.dps-btn-accent { border-color: var(--dps-orange); color: var(--dps-orange) !important; }
.dps-btn-accent:hover, .dps-btn-accent:focus-visible { background: var(--dps-orange) !important; color: #101010 !important; }
.dps-btn-solid { background: var(--dps-orange) !important; border-color: var(--dps-orange); color: #101010 !important; }
.dps-btn-solid:hover, .dps-btn-solid:focus-visible { background: var(--dps-orange-2) !important; border-color: var(--dps-orange-2); color: #101010 !important; }
.dps-enh a:focus-visible { outline: 2px solid var(--dps-orange); outline-offset: 3px; }

/* ---------- breadcrumbs ---------- */
.dps-crumbs { background: var(--dps-bg); border-bottom: 1px solid var(--dps-line); padding: 14px 0; }
.dps-crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.dps-crumbs li { font-family: var(--dps-label) !important; font-size: 12px !important; letter-spacing: 1.5px !important; text-transform: uppercase; line-height: 1.6 !important; color: #c9c3ab !important; }
.dps-crumbs li + li::before { content: "/"; margin-right: 8px; color: var(--dps-orange) !important; }
.dps-crumbs a { color: #c9c3ab !important; text-decoration: none !important; }
.dps-crumbs a:hover { color: var(--dps-orange) !important; }

/* ---------- two column rows ---------- */
.dps-row { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.dps-row-media img { display: block; width: 100%; height: auto; }
.dps-row-flip .dps-row-media { order: -1; }

/* ---------- orange triangle bullet list (from /services/) ---------- */
.dps-blist { list-style: none; margin: 0 0 28px !important; padding: 0; display: grid; gap: 14px; }
.dps-blist li { position: relative; padding-left: 26px; }
.dps-blist li::before {
  content: ""; position: absolute; left: 0; top: 11px;
  border-left: 8px solid var(--dps-orange);
  border-top: 5px solid transparent; border-bottom: 5px solid transparent;
}

/* ---------- process steps ---------- */
.dps-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; counter-reset: dps; }
.dps-step { counter-increment: dps; background: var(--dps-bg); border-left: 3px solid var(--dps-orange); padding: 24px 28px; }
.dps-step h3 { font-size: 20px !important; margin: 0 0 8px !important; }
.dps-step h3::before {
  content: counter(dps, decimal-leading-zero);
  font-family: var(--dps-label) !important; font-size: 14px; letter-spacing: 2px;
  color: var(--dps-orange) !important; display: block; margin-bottom: 6px;
}
.dps-step p { margin: 0 !important; }

/* ---------- spec table: substrate / preparation / coating / handling ---------- */
.dps-spec { width: 100%; border-collapse: collapse; margin: 0 0 24px; }
.dps-spec caption { text-align: left; font-family: var(--dps-label) !important; font-size: 12px !important; letter-spacing: 2px; text-transform: uppercase; color: var(--dps-orange) !important; padding-bottom: 12px; }
.dps-spec th, .dps-spec td { text-align: left; padding: 14px 16px; border-bottom: 1px solid var(--dps-line); vertical-align: top; }
.dps-spec thead th { font-family: var(--dps-label) !important; font-size: 12px !important; letter-spacing: 1.5px; text-transform: uppercase; color: var(--dps-white) !important; background: var(--dps-bg); }
.dps-spec tbody th { color: var(--dps-white) !important; font-weight: 700 !important; width: 26%; }
.dps-spec-scroll { overflow-x: auto; }

/* ---------- photo statement band ---------- */
.dps-band {
  position: relative; padding: 96px 24px; text-align: center;
  background-color: #0b0d13;
  background-image:
    linear-gradient(rgba(8, 10, 15, 0.74), rgba(8, 10, 15, 0.84)),
    url("/wp-content/uploads/2025/02/465280887_9352592418103501_6333277339166402368_n.jpg");
  background-position: center center; background-size: cover; background-repeat: no-repeat;
}
.dps-band h2, .dps-band p { text-shadow: 0 2px 14px rgba(0, 0, 0, 0.8); }
.dps-band p { max-width: 68ch; margin: 0 auto 26px !important; }

/* ---------- honesty / limits block ---------- */
.dps-limits { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.dps-limit { background: var(--dps-bg); padding: 26px 28px; border-top: 3px solid var(--dps-orange); }
.dps-limit h3 { font-size: 20px !important; }
.dps-limit ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.dps-limit li { position: relative; padding-left: 24px; }
.dps-limit li::before { content: ""; position: absolute; left: 0; top: 11px; border-left: 8px solid var(--dps-orange); border-top: 5px solid transparent; border-bottom: 5px solid transparent; }

/* ---------- FAQ accordions ---------- */
.dps-faq { display: grid; gap: 12px; }
.dps-faq details { background: var(--dps-bg); border-left: 3px solid var(--dps-orange); }
.dps-faq summary {
  cursor: pointer; list-style: none; padding: 18px 24px;
  font-family: var(--dps-display) !important; font-size: 18px !important; font-weight: 600 !important;
  color: var(--dps-white) !important; text-transform: uppercase !important; line-height: 1.35 !important;
  display: flex; justify-content: space-between; align-items: flex-start; gap: 16px;
}
.dps-faq summary::-webkit-details-marker { display: none; }
.dps-faq summary::after { content: "+"; color: var(--dps-orange); font-family: var(--dps-label); font-size: 24px; line-height: 1; flex: none; }
.dps-faq details[open] summary::after { content: "\2212"; }
.dps-faq details > div { padding: 0 24px 20px; }
.dps-faq details > div p:last-child { margin-bottom: 0 !important; }
.dps-faq summary:focus-visible { outline: 2px solid var(--dps-orange); outline-offset: -2px; }

/* ---------- designed internal-link block (never plain outline pills) ---------- */
.dps-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.dps-link {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  background: var(--dps-orange) !important; color: #101010 !important;
  font-family: var(--dps-label) !important; font-size: 14px !important; letter-spacing: 1.6px !important;
  text-transform: uppercase !important; text-decoration: none !important; line-height: 1.4 !important;
  padding: 18px 22px; border: 1px solid var(--dps-orange); border-radius: 0;
  transition: transform .18s ease, background-color .18s ease;
}
.dps-link::after { content: "\2192"; font-size: 18px; flex: none; }
.dps-link:hover, .dps-link:focus-visible { background: var(--dps-orange-2) !important; transform: translateY(-3px); }
.dps-link-ghost { background: transparent !important; color: var(--dps-white) !important; border-color: #4a4f60; }
.dps-link-ghost:hover, .dps-link-ghost:focus-visible { background: transparent !important; border-color: var(--dps-orange); color: var(--dps-orange) !important; }

/* ---------- contact strip ---------- */
.dps-contact { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 34px; }
.dps-contact div { border-top: 1px solid var(--dps-line); padding-top: 18px; }
.dps-contact span { display: block; font-family: var(--dps-label) !important; font-size: 12px !important; letter-spacing: 2px; text-transform: uppercase; color: var(--dps-orange) !important; margin-bottom: 8px; }
.dps-contact a { color: var(--dps-white) !important; text-decoration: none !important; font-size: 18px !important; }
.dps-contact a:hover { color: var(--dps-orange) !important; }

/* ---------- injected block on legacy pages ---------- */
.dps-wired { background: var(--dps-black); padding: 64px 0; border-top: 1px solid var(--dps-line); }
.dps-wired h2 { font-size: clamp(24px, 3vw, 34px) !important; }

/* ---------- services hub: new-page cards ---------- */
.dps-hubgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 8px; }
.dps-hubcard {
  display: flex; flex-direction: column; gap: 10px;
  background: var(--dps-bg) !important; border-left: 3px solid var(--dps-orange);
  padding: 22px 24px; text-decoration: none !important;
  transition: transform .18s ease, background-color .18s ease;
}
.dps-hubcard:hover, .dps-hubcard:focus-visible { background: #1d212e !important; transform: translateY(-3px); }
.dps-hubcard-label {
  font-family: var(--dps-display) !important; font-size: 18px !important; font-weight: 600 !important;
  color: var(--dps-white) !important; text-transform: uppercase !important; line-height: 1.3 !important;
}
.dps-hubcard-blurb { font-family: var(--dps-body) !important; font-size: 15px !important; line-height: 1.6 !important; color: var(--dps-cream) !important; }

@media (max-width: 900px) {
  .dps-row, .dps-limits { grid-template-columns: 1fr; gap: 28px; }
  .dps-row-flip .dps-row-media { order: 0; }
  .dps-links, .dps-hubgrid { grid-template-columns: repeat(2, 1fr); }
  .dps-contact { grid-template-columns: 1fr; }
  .dps-hero { padding: 150px 20px 72px; }
  .dps-sec { padding: 56px 0; }
}
@media (max-width: 560px) {
  .dps-links, .dps-hubgrid { grid-template-columns: 1fr; }
  .dps-btns { justify-content: stretch; }
  .dps-btn { width: 100%; }
  .dps-hero h1 { max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .dps-link, .dps-btn { transition: none; }
  .dps-link:hover { transform: none; }
}