/* ==========================================================================
   DRIVE LINE SERVICE, native-widget bridge
   Load order: dlp.css -> dlp-compat.css -> this file.

   SCOPED. Every rule sits under .dls-native, which only the native templates
   carry on their top-level containers. It cannot reach V1 pages, the header
   or footer templates, or the WooCommerce loop rendered by inc/shop.php.

   Why it exists: Elementor puts a widget's custom class on the outer wrapper,
   not on the inner <h1>, <p> or <a>. These rules land the styling on the
   element that actually needs it.
   ========================================================================== */

/* --- 0. Baseline inside native templates -------------------------------- */
.dls-native .elementor-widget-heading .elementor-heading-title{ margin:0; color:var(--zinc); }
.dls-native .elementor-widget-text-editor{ color:var(--chrome); }
.dls-native .elementor-widget-text-editor p{ margin:0; }

/* Display type. Beats Kit typography (.elementor-kit-N h1) on specificity. */
.dls-native h1.elementor-heading-title{
  font:800 italic var(--step-4)/.94 var(--display);
  text-transform:uppercase; letter-spacing:-.01em;
}
.dls-native h2.elementor-heading-title{
  font:800 italic var(--step-3)/.94 var(--display);
  text-transform:uppercase; letter-spacing:-.01em;
}
.dls-native h3.elementor-heading-title{
  font:800 var(--step-2)/.94 var(--display);
  text-transform:uppercase; letter-spacing:.005em;
}
.dls-native h4.elementor-heading-title{
  font:800 var(--step-1)/1 var(--display);
  text-transform:uppercase; letter-spacing:.02em;
}

/* --- 0. Spacing chain, restored ------------------------------------------
   Elementor's panel writes PHYSICAL variables (--padding-top and friends) per
   element. .e-con maps them to LOGICAL variables (--padding-block-start and
   friends), and only the logical ones are applied. dlp-compat.css section 1
   sets the logical variables straight to 0px, which severs the map, so no
   padding set in the panel can ever take effect.

   V1 never shows this because its spacing comes from .band and .wrap in
   dlp.css. Native templates carry their spacing in the panel, so the map is
   re-established here, inside .dls-native only. Every native container sets
   its own padding, so the 0px fallback never actually fires. */
.e-con.dls-native,
.dls-native .e-con,
.dls-native .e-con-inner{
  --padding-block-start:var(--padding-top, 0px);
  --padding-block-end:var(--padding-bottom, 0px);
  --padding-inline-start:var(--padding-left, 0px);
  --padding-inline-end:var(--padding-right, 0px);
}
/* compat also zeroes the gap variables directly ON .e-con-inner, so a boxed
   container's panel gap never reaches the row of children it holds. */
.dls-native > .e-con-inner{
  --gap:inherit; --row-gap:inherit; --column-gap:inherit;
}

/* --- 0a. THE --display COLLISION ---------------------------------------
   dlp.css uses --display as its font-family token. Elementor uses --display
   for layout and sets it to "flex" on every .e-con. Inside any container,
   font-family:var(--display) therefore resolved to the word "flex", and every
   heading fell back to a default serif. Widgets are not .e-con, so restoring
   the token on them fixes typography without touching container layout. */
.dls-native .elementor-widget{
  --display:"Barlow Condensed","Roboto Condensed","Oswald","Arial Narrow",sans-serif;
}

/* --- 0b. Inline widgets size from their content ------------------------
   Elementor gives widgets in a flex row a zero basis, so "auto" width widgets
   collapse to their narrowest wrap: one word per line. Basis auto fixes it;
   shrink stays on so long pairs can still wrap when the space runs out. */
.dls-native .e-con > .elementor-widget.elementor-widget__width-auto,
.dls-native .e-con > .e-con-inner > .elementor-widget.elementor-widget__width-auto{
  flex:0 1 auto;
}
/* These must never break mid-label. */
.dls-native .elementor-widget-heading.hours-time .elementor-heading-title,
.dls-native .elementor-widget-heading.brand-chip .elementor-heading-title,
.dls-native .elementor-widget-heading.hs-num .elementor-heading-title,
.dls-native .elementor-widget-button .elementor-button{ white-space:nowrap; }
.dls-native .elementor-widget-heading.hours-time,
.dls-native .elementor-widget-heading.brand-chip,
.dls-native .elementor-widget-button{ flex-shrink:0; }

/* --- 0c. Button wrapper ---------------------------------------------------
   dlp.css .btn / .btn--primary bind to the Elementor WRAPPER as well as to
   our inner .elementor-button rule, so each button rendered twice, nested.
   Strip the prototype button styling off the wrapper; the link carries it. */
.dls-native .elementor-widget-button.btn,
.dls-native .elementor-widget-button.btn:hover{
  display:block; padding:0; margin:0; gap:0;
  background:none; border:0; box-shadow:none; transform:none;
  font:inherit; letter-spacing:normal; text-transform:none;
}

/* --- 0d. Service cards ---------------------------------------------------
   dlp.css sets .svc to display:block, which beats the container's flex, which kills the
   gap between title, body and meta. Restore flex. The heading keeps the
   link; its ::after stretches the hit area across the whole card, which is
   why the heading wrapper must not be the positioned ancestor. */
.dls-native .e-con.svc{ display:flex; flex-direction:column; position:relative; }
/* height:100% from dlp.css is not "auto", so it switches off flex stretch and
   cards in a row stop matching heights. */
.dls-native .e-con.svc{ height:auto; }
.dls-native .e-con.svc-meta{ flex-wrap:nowrap; }
.dls-native .e-con.svc .elementor-widget-heading.svc-title{ position:static; }
.dls-native .e-con.svc .svc-title a::after{ content:""; position:absolute; inset:0; z-index:1; }

/* --- 0e. Hero stats: V3's own grid sizes the three columns -------------- */
.dls-native .e-con.hero-stats > .e-con{ --width:auto; width:auto; }
.e-con.dls-native.dls-hero > .e-con-inner{ position:relative; z-index:2; }

/* --- 0f. Util bar: phone and hours sit right, tag stays left ------------ */
.dls-native .elementor-widget-heading.util-tag{ margin-right:auto; }

/* --- 0g. Section-head rhythm, as V3 --------------------------------------
   Elementor clears margin-block-end on widgets inside containers at 0-3-0,
   which beats dlp.css .band-head .stamp (0-2-0). V3's .9rem under the stamp
   was silently dropped. Re-declared one class higher. A no-op wherever the
   margin already applies. */
.dls-native .band-head .elementor-widget.stamp{ margin-block-end:.9rem; }

/* V3 body copy runs at line-height 1.7; the text editor came out at ~1.5. */
.dls-native .elementor-widget-text-editor{ line-height:1.7; }
.dls-native .elementor-widget-text-editor p{ line-height:inherit; }

/* --- 1. Stamped labels --------------------------------------------------- */
.dls-native .elementor-widget-heading.stamp .elementor-heading-title{
  font:500 var(--step-xs)/1.4 var(--mono);
  text-transform:uppercase; letter-spacing:.15em; color:var(--chrome-mute);
}
.dls-native .elementor-widget-heading.stamp--red .elementor-heading-title{ color:var(--spicer-hot); }

/* --- 2. Buttons ---------------------------------------------------------- */
.dls-native .elementor-widget-button.btn .elementor-button{
  display:inline-flex; align-items:center; justify-content:center;
  font:700 var(--step-sm)/1 var(--body);
  text-transform:uppercase; letter-spacing:.1em;
  padding:.95rem 1.5rem; border-radius:var(--r);
  border:1px solid transparent; transition:.16s ease; background-image:none;
}
.dls-native .elementor-widget-button.btn--primary .elementor-button{ background:var(--spicer); color:#fff; }
.dls-native .elementor-widget-button.btn--primary .elementor-button:hover{ background:var(--spicer-hot); transform:translateY(-1px); }
.dls-native .elementor-widget-button.btn--ghost .elementor-button{ background:transparent; color:var(--zinc); border-color:var(--line-strong); }
.dls-native .elementor-widget-button.btn--ghost .elementor-button:hover{ border-color:var(--spicer); }
.dls-native .elementor-widget-button.btn--steel .elementor-button{ background:var(--graphite-3); color:var(--zinc); border-color:var(--line-strong); }
.dls-native .elementor-widget-button.btn--steel .elementor-button:hover{ background:var(--graphite-2); border-color:var(--spicer); }

/* --- 3. Body copy -------------------------------------------------------- */
.dls-native .elementor-widget-text-editor.lede{ font-size:var(--step-1); color:var(--chrome-dim); max-width:56ch; }
.dls-native .elementor-widget-text-editor.figcap{
  font:500 var(--step-xs)/1.6 var(--mono); letter-spacing:.08em;
  color:var(--chrome-dim); text-transform:uppercase;
}
.dls-native .elementor-widget-text-editor.figcap a{ color:inherit; text-decoration:underline; }

/* --- 4. Util bar --------------------------------------------------------- */
.e-con.dls-native.util-bar{ border-bottom:1px solid rgba(0,0,0,.5); }
.dls-native.util-bar .elementor-heading-title{
  font:500 var(--step-xs)/1.4 var(--mono);
  letter-spacing:.06em; text-transform:uppercase; white-space:nowrap;
}
.dls-native .elementor-widget-heading.util-tag  .elementor-heading-title{ color:#f0bfc0; }
.dls-native .elementor-widget-heading.util-item .elementor-heading-title{ color:#f7e2e3; }
.dls-native .elementor-widget-heading.util-sep  .elementor-heading-title{ color:#c98a8c; }
.dls-native .elementor-widget-heading.util-tel  .elementor-heading-title a{ color:#fff; }
.dls-native .elementor-widget-heading.util-tel  .elementor-heading-title a:hover{ color:#ffd9d9; }
@media (max-width:560px){
  .dls-native.util-bar .e-con{ justify-content:center; }
  .dls-native .elementor-widget-heading.util-tag{ flex-grow:0 !important; width:100%; text-align:center; }
}

/* --- 5. Hero ------------------------------------------------------------- */
/* Four-stop scrim. Keep Elementor's Background Overlay switched OFF. */
.e-con.dls-native.dls-hero{ position:relative; overflow:hidden; }
.e-con.dls-native.dls-hero::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    linear-gradient(90deg,
      rgba(10,10,11,.97) 0%, rgba(10,10,11,.93) 26%,
      rgba(10,10,11,.68) 48%, rgba(10,10,11,.34) 70%,
      rgba(10,10,11,.52) 100%),
    linear-gradient(180deg,
      rgba(10,10,11,.6) 0%, rgba(10,10,11,.1) 26%,
      rgba(10,10,11,.2) 62%, rgba(21,24,29,.95) 100%);
}
.e-con.dls-native.dls-hero > .e-con{ position:relative; z-index:2; }
.dls-native.dls-hero h1.elementor-heading-title{ text-shadow:0 2px 22px rgba(0,0,0,.7); }
.dls-native.dls-hero h1.elementor-heading-title em{ font-style:italic; color:var(--spicer-hot); }
@media (max-width:820px){
  .e-con.dls-native.dls-hero::before{
    background:
      linear-gradient(180deg, rgba(10,10,11,.86) 0%, rgba(10,10,11,.9) 50%, rgba(21,24,29,.98) 100%),
      rgba(10,10,11,.3);
  }
}

/* --- 6. Balancer readout ------------------------------------------------- */
.dls-native .e-con.readout{ max-width:390px; }
.dls-native .e-con.readout-track{
  position:relative; height:30px; min-height:30px; overflow:hidden;
  border-left:1px solid var(--line-strong); border-right:1px solid var(--line-strong);
  background:
    linear-gradient(var(--line-strong),var(--line-strong)) 0 50%/100% 1px no-repeat,
    repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 26px);
}
.dls-native .e-con.readout-needle{
  position:absolute; top:0; bottom:0; left:0; width:2px; min-height:0; padding:0;
  background:var(--spicer-hot); box-shadow:0 0 14px 2px rgba(255,42,32,.55);
  animation:dls-needle 3.4s cubic-bezier(.45,0,.55,1) infinite alternate;
}
@keyframes dls-needle{ from{ left:2% } to{ left:97% } }
.dls-native .elementor-widget-heading.readout-cap .elementor-heading-title{
  font:500 var(--step-xs)/1 var(--mono); letter-spacing:.16em;
  text-transform:uppercase; color:var(--chrome-mute);
}
@media (prefers-reduced-motion:reduce){
  .dls-native .e-con.readout-needle{ animation:none; left:80%; opacity:.6; }
}

/* --- 7. Hero stats ------------------------------------------------------- */
.dls-native .e-con.hero-stats{ padding-top:1.6rem; border-top:1px solid var(--line); }
.dls-native .elementor-widget-heading.hs-num .elementor-heading-title{
  font:800 italic 1.8rem/1 var(--display); color:var(--zinc); white-space:nowrap;
}
.dls-native .elementor-widget-heading.hs-label .elementor-heading-title{
  font:500 var(--step-xs)/1.5 var(--mono); letter-spacing:.08em;
  text-transform:uppercase; color:var(--chrome);
}

/* --- 8. Hazard rule ------------------------------------------------------ */
.e-con.dls-native.hazard{
  min-height:5px; padding:0;
  background:repeating-linear-gradient(115deg, var(--spicer) 0 14px, var(--void) 14px 28px);
  opacity:.72;
}

/* --- 9. Spec plates and service cards ----------------------------------- */
.dls-native .e-con.plate{
  position:relative;
  background:linear-gradient(160deg,var(--graphite-2),var(--graphite));
  border:1px solid var(--line); border-radius:var(--r);
  padding:1.6rem 1.4rem 1.4rem;
}
.dls-native .e-con.plate::before{
  content:""; position:absolute; top:10px; left:10px;
  width:7px; height:7px; border-radius:99px; z-index:2;
  background:var(--void); box-shadow:inset 0 0 0 1px var(--line-strong);
}
.dls-native .e-con.svc{ transition:border-color .16s ease; }
.dls-native .e-con.svc:hover{ border-color:rgba(213,22,28,.5); }
.dls-native .elementor-widget-heading.svc-title .elementor-heading-title a{ color:inherit; }
.dls-native .elementor-widget-text-editor.svc-body{ font-size:var(--step-sm); line-height:1.6; color:var(--chrome-dim); }
.dls-native .e-con.svc-meta{ margin-top:.5rem; padding-top:.9rem; border-top:1px solid var(--line); }
.dls-native .elementor-widget-heading.svc-meta-item .elementor-heading-title{
  font:500 var(--step-xs)/1.4 var(--mono); letter-spacing:.08em;
  text-transform:uppercase; color:var(--chrome-mute);
}

/* --- 10. Work order steps ------------------------------------------------ */
.dls-native .elementor-widget-heading.step-n .elementor-heading-title{
  font:800 italic 2.4rem/.8 var(--display);
  color:var(--graphite-3); -webkit-text-stroke:1px var(--chrome-mute);
}
.dls-native .elementor-widget-text-editor.step-body{ font-size:var(--step-sm); color:var(--chrome-dim); }

/* --- 11. Brand chips ----------------------------------------------------- */
.dls-native .elementor-widget-heading.brand-chip .elementor-heading-title{
  display:inline-block;
  border:1px solid var(--line); border-radius:var(--r);
  padding:.6rem 1rem; background:var(--graphite);
  font:500 var(--step-xs)/1 var(--mono); letter-spacing:.16em;
  text-transform:uppercase; color:var(--chrome-dim);
}

/* --- 12. Opening hours. Line-height 1.7 matches V3's table cells, which
   inherit it from body; that is what sets each row's height. --------------------------------------------------- */
.dls-native .e-con.hours-row{ padding:.55rem 0; border-bottom:1px solid var(--line); }
.dls-native .e-con.hours-list .e-con.hours-row:last-child{ border-bottom:0; }
.dls-native .elementor-widget-heading.hours-day .elementor-heading-title{
  font:500 var(--step-sm)/1.7 var(--body); color:var(--chrome);
  text-transform:none; letter-spacing:0;
}
.dls-native .elementor-widget-heading.hours-time .elementor-heading-title{
  font:500 .9rem/1.7 var(--mono); letter-spacing:.04em; color:var(--zinc);
}
.dls-native .e-con.hours-row--shut .elementor-widget-heading.hours-time .elementor-heading-title{ color:var(--chrome-mute); }
/* "now" is added by dlp.js, which already reads [data-dow] */
.dls-native .e-con.hours-row.now .elementor-widget-heading.hours-day .elementor-heading-title::before{
  content:"\25B8  "; color:var(--spicer-hot);
}

/* --- 13. Light band ------------------------------------------------------ */
/* .band--light in dlp.css redeclares the tokens on the container, so every
   var() inside flips to the paper palette. Only the ghost button needs help. */
.e-con.dls-native.band--light .elementor-widget-button.btn--ghost .elementor-button{ color:var(--zinc); }
.e-con.dls-native.band--light .elementor-widget-heading.h2--sm .elementor-heading-title{ font-size:var(--step-2); }

/* --- 14. Map -------------------------------------------------------------
   compat section 9 sizes the map by aspect-ratio. In a column flex container
   Elementor gives the widget a zero basis on the vertical axis, and an iframe
   at height:100% has no content to hold it open, so the ratio collapsed to
   0px. A content basis lets aspect-ratio set the height again. */
.dls-native .elementor-widget-google_maps.map{ flex:0 0 auto; }
/* */
.dls-native .elementor-widget-google_maps.dls-map iframe{
  border:1px solid var(--line); border-radius:var(--r);
  filter:grayscale(.35) contrast(1.05);
}