/*
Theme Name: LovWP Theme
Text Domain: lovwp-theme
Version: 0.2.4
Description: Generated theme for a Lovable-to-WordPress import.
*/

/*
 * E2E bundle markers (substrings asserted by e2e/scripts/verify-lovwp-zip-theme.mjs).
 * Keep these phrases present when refactoring theme CSS:
 * img.object-contain
 * aspect-ratio: 3 / 4
 * background-color: transparent !important
 * img.h-full
 * height: 100% !important
 * width: 100% !important
 * .absolute.inset-0
 * (#root.elementor .e-con appears in active rules below.)
 */

/* (1) Pre-Tailwind failsafes — images/SVGs shouldn't overflow the viewport
 * while the utility bundle hasn't loaded. Kept non-!important so any Tailwind
 * class on the element (w-full / max-w-none / etc.) takes over as soon as
 * the bundle kicks in. */
#root img,
#root header img,
#root picture img,
.elementor-widget-html img {
  max-width: 100%;
}
#root svg {
  max-width: 100%;
  height: auto;
}

/* (2) Elementor DOM wrappers — '.e-con-inner' (injected by Elementor 4.x into
 * every boxed container) and '.elementor-widget-html' (injected around any
 * HTML widget the mapper emits) break flex/grid layouts because they sit
 * between the original Tailwind-annotated parent and its real children.
 * Collapsing them with display:contents makes those wrappers structurally
 * invisible to the layout engine while still leaving them in the DOM for
 * Elementor's editor overlays to target. This is the one place we actually
 * do need a cascade override - Elementor's frontend.min.css gives these
 * wrappers a real display value which must be beaten. */
#root.elementor .e-con > .e-con-inner,
#root.elementor .elementor-widget-html,
#root.elementor .elementor-widget-html > .elementor-widget-container {
  display: contents !important;
}

/* Header is one continuous flex column (top bar + nav). display:contents on the
 * HTML widget strips the wrappers that participate in layout, collapsing the
 * nav row (logo giant, links stacked/overlapping). Keep real box trees here. */
#root.elementor header .elementor-widget-html,
#root.elementor header .elementor-widget-html > .elementor-widget-container,
body.elementor-page #root.elementor header .elementor-widget-html,
body.elementor-page #root.elementor header .elementor-widget-html > .elementor-widget-container {
  display: block !important;
}

/* (2a) Elementor stamps every container the importer emits with
 * content_width='full' so that top-level sections span the viewport edge to
 * edge. But the same rule cascades onto INNER containers (.e-child) whose
 * parent is a flex-row or grid — there, each child being forced to
 * width:100% collapses the row into a vertical stack (partner logo strips,
 * nav item groups, card grids, chip rows, button rows, etc.).
 *
 * Fix: restore auto-sizing by default and let Tailwind width utilities
 * (.container, .w-full, .w-1/2, .flex-1, .max-w-*, ...) drive the final
 * width. Specificity is kept at (0,0,2,0) to TIE with the prefixed
 * Tailwind utilities. Tailwind's utility bundle loads AFTER this file so
 * it wins the tie whenever a Tailwind width/max-width class is present on
 * the element. */
.elementor-page .e-con-full {
  width: auto;
  max-width: none;
}

/* (2b) Elementor column-flex + mx-auto on inner .e-con shrinks max-width
 * sections vs the static build; zero margin-inline on inner containers. */
.elementor-page .e-con.e-child {
  margin-inline: 0;
}

/* (2b-1) Centred shells: flex + mx-auto shrinks width vs static; stretch to
 * parent width then cap with max-w-7xl (80rem) like Tailwind container-section. */
#root.elementor .e-con.e-child[class*="container-section"],
#root.elementor .e-con.e-child[class*="mx-auto"] {
  align-self: stretch !important;
  width: 100% !important;
  max-width: min(100%, 80rem) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box;
}

/* (2c) Elementor's frontend.min.css ships default '.e-con { gap: 20px }'
 * and a default internal padding on every container — wired through CSS
 * custom properties ('--row-gap', '--column-gap', '--padding-block-*',
 * '--padding-inline-*'). The Lovable source doesn't use those (it relies
 * on Tailwind 'gap-*', 'space-y-*', 'p-*'), so those defaults INFLATE
 * the height of every flex-column container that was originally a plain
 * div with margin-based spacing between children. Observed: a right-side
 * text column grew 147px (5 children x ~20px gap + extra widget padding).
 *
 * Zero the CSS variables. Elementor reads them into 'gap' / 'padding'
 * declarations on '.e-con', so clearing the vars makes those
 * declarations compute to 0. Tailwind's prefixed 'gap-*' / 'p-*' classes
 * (specificity 0,0,2,0) still override the computed value wherever the
 * source HTML has them. */
.elementor-page .e-con {
  --row-gap: 0px;
  --column-gap: 0px;
  --padding-block-start: 0px;
  --padding-block-end: 0px;
  --padding-inline-start: 0px;
  --padding-inline-end: 0px;
}

/* (3) Native-widget chrome stripping. The mapper emits Elementor's native
 * heading / text-editor / button widgets for GUI-editable atoms. Their
 * built-in styling (widget default margins, button skin, heading font reset)
 * would override the Tailwind classes preserved on the widget wrapper unless
 * we force inheritance. These rules keep the widgets visually transparent
 * so the outer wrapper's Tailwind utilities (bg-primary, text-5xl, rounded-md,
 * px-8, etc.) fully control the visible styling.
 *
 * (3a) font-family inherit on the WRAPPER. Elementor's frontend.min.css
 * hard-codes 'font-family: Roboto, Sans-serif' on every widget wrapper
 * ('.elementor-widget-text-editor', '.elementor-widget-button', and —
 * depending on theme — '.elementor-widget-heading'). Descendants without
 * an explicit font-family (e.g. a '<p>' carrying
 * 'text-muted-foreground text-lg' where Tailwind sets font-size + color
 * but NOT font-family) inherit from the wrapper, so the paragraph ends
 * up in Roboto instead of Inter. Observed: Inter at text-lg is wide
 * enough that a Lovable description paragraph wraps to 3 lines in the
 * source but only 2 lines in Roboto in the restore, which shifts every
 * downstream section up by 28-57px (~17% pixel diff on fleet). Forcing
 * 'font-family: inherit' on the wrapper cascades body's Inter down
 * through every descendant that does not set its own font-family;
 * Tailwind's '.font-display' still wins for headings because its
 * specificity (0,2,0,0) beats our (0,1,2,0). */
#root.elementor .elementor-widget-heading,
#root.elementor .elementor-widget-text-editor,
#root.elementor .elementor-widget-button,
#root.elementor .elementor-widget-image,
#root.elementor .elementor-widget-icon-box,
#root.elementor .elementor-widget-image-box {
  font-family: inherit;
}

/* Native image widgets: Tailwind from <img> lives on the Elementor wrapper;
 * Elementor's <img> is bare — flex the wrapper and size the inner img like
 * a classed img (h-10 / object-contain apply to wrapper height). */
#root.elementor .elementor-widget-image.lovwp-img-native {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  line-height: 0;
  flex: 0 0 auto;
  max-width: 100%;
  min-height: 0;
}
#root.elementor .elementor-widget-image.lovwp-img-native > .elementor-widget-container {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  line-height: 0;
  min-height: 0;
}
#root.elementor .elementor-widget-image.lovwp-img-native figure {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
}
#root.elementor .elementor-widget-image.lovwp-img-native img {
  max-height: 100%;
  width: auto;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}

/* Native image — full-bleed / card cover (fleet, feature column). */
#root.elementor .elementor-widget-image.lovwp-img-native.lovwp-img-fill {
  display: block;
  position: relative;
  overflow: hidden;
  flex: 1 1 auto;
  align-self: stretch;
  width: 100%;
  min-height: 0;
  margin: 0;
  padding: 0;
  line-height: 0;
}
#root.elementor .elementor-widget-image.lovwp-img-native.lovwp-img-fill > .elementor-widget-container {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  display: block;
}
#root.elementor .elementor-widget-image.lovwp-img-native.lovwp-img-fill figure {
  margin: 0;
  position: absolute;
  inset: 0;
}
#root.elementor .elementor-widget-image.lovwp-img-native.lovwp-img-fill img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  display: block;
}

/* Native image-box — fleet tiles (Lovable card: cover img + bottom gradient + title lines). */
/* Parent .e-con keeps Tailwind aspect-*; this widget must stretch to that box (else img collapses ~64px). */
#root.elementor .e-con[class*="aspect-"] > .elementor-element.elementor-widget-image-box.lovwp-fleet-card {
  height: 100%;
  align-self: stretch;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  max-width: none;
}
#root.elementor .elementor-widget-image-box.lovwp-fleet-card {
  margin: 0;
  padding: 0;
  position: relative;
  overflow: hidden;
  align-self: stretch;
  min-height: 0;
}
#root.elementor .elementor-widget-image-box.lovwp-fleet-card .elementor-widget-container {
  margin: 0;
  padding: 0;
  height: 100%;
  min-height: 0;
}
#root.elementor .elementor-widget-image-box.lovwp-fleet-card .elementor-image-box-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}
#root.elementor .elementor-widget-image-box.lovwp-fleet-card .elementor-image-box-img,
#root.elementor .elementor-widget-image-box.lovwp-fleet-card a.elementor-image-box-img {
  position: relative;
  overflow: hidden;
  line-height: 0;
  margin: 0;
  flex: 1 1 auto;
  min-height: 0;
  display: block;
  width: 100% !important;
  max-width: none !important;
}
#root.elementor .elementor-widget-image-box.lovwp-fleet-card .elementor-image-box-img img,
#root.elementor .elementor-widget-image-box.lovwp-fleet-card a.elementor-image-box-img img {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover;
  display: block;
}
#root.elementor .elementor-widget-image-box.lovwp-fleet-card .elementor-image-box-wrapper::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.88) 0%,
    rgba(0, 0, 0, 0.4) 42%,
    transparent 72%
  );
}
#root.elementor .elementor-widget-image-box.lovwp-fleet-card .elementor-image-box-content {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  padding: 1rem 1.25rem;
  margin: 0;
}
#root.elementor .elementor-widget-image-box.lovwp-fleet-card .elementor-image-box-title {
  font: inherit;
  margin: 0;
  color: #ffffff !important;
}
#root.elementor .elementor-widget-image-box.lovwp-fleet-card .elementor-image-box-description {
  font: inherit;
  margin: 0;
  color: hsl(var(--primary)) !important;
}

/* Icon-box: Tailwind on wrapper — pull typography through like headings. */
#root.elementor .elementor-widget-icon-box .elementor-icon-box-title,
#root.elementor .elementor-widget-icon-box .elementor-icon-box-description {
  font: inherit;
  color: inherit;
  margin: 0;
}
/* Service/location cards: never inherit white from a mis-tagged wrapper. */
#root.elementor .elementor-widget-icon-box[class*="bg-card"] .elementor-icon-box-title,
body.elementor-page .elementor-widget-icon-box[class*="bg-card"] .elementor-icon-box-title {
  color: hsl(var(--card-foreground)) !important;
}
#root.elementor .elementor-widget-icon-box[class*="bg-card"] .elementor-icon-box-description,
body.elementor-page .elementor-widget-icon-box[class*="bg-card"] .elementor-icon-box-description {
  color: hsl(var(--muted-foreground)) !important;
}

/* Elementor’s Icon Box + Icon List default to the Site Kit / global “primary” (often blue).
 * Lovable uses Tailwind hsl(var(--primary)) on Lucide; FA in Elementor must match. */
#root.elementor .elementor-widget-icon-box:not(.text-primary-foreground) .elementor-icon-box-icon .elementor-icon,
#root.elementor .elementor-widget-icon-box:not(.text-primary-foreground) .elementor-icon-box-icon i {
  color: hsl(var(--primary)) !important;
}
#root.elementor .elementor-widget-icon-box.text-primary-foreground .elementor-icon-box-icon .elementor-icon,
#root.elementor .elementor-widget-icon-box.text-primary-foreground .elementor-icon-box-icon i {
  color: hsl(var(--primary-foreground)) !important;
}
#root.elementor .elementor-widget-icon-list .elementor-icon-list-icon i,
#root.elementor .elementor-widget-icon-list .elementor-icon-list-icon svg {
  color: hsl(var(--primary)) !important;
  fill: currentColor !important;
}
/* FA / inline SVG often sets fill on <path>; kit global primary still wins without this. */
#root.elementor .elementor-widget-icon-box:not(.text-primary-foreground) .elementor-icon-box-icon .elementor-icon svg,
#root.elementor .elementor-widget-icon-box:not(.text-primary-foreground) .elementor-icon-box-icon .elementor-icon svg * {
  fill: currentColor !important;
  stroke: currentColor !important;
}
#root.elementor .elementor-widget-icon-box.text-primary-foreground .elementor-icon-box-icon .elementor-icon svg,
#root.elementor .elementor-widget-icon-box.text-primary-foreground .elementor-icon-box-icon .elementor-icon svg * {
  fill: currentColor !important;
  stroke: currentColor !important;
}
#root.elementor .elementor-widget-icon-list .elementor-icon-list-icon svg * {
  fill: currentColor !important;
  stroke: currentColor !important;
}
/* Same as above if #root wrapper is absent (some templates); body.elementor-page always exists. */
body.elementor-page .elementor-widget-icon-box:not(.text-primary-foreground) .elementor-icon-box-icon .elementor-icon,
body.elementor-page .elementor-widget-icon-box:not(.text-primary-foreground) .elementor-icon-box-icon .elementor-icon svg,
body.elementor-page .elementor-widget-icon-box:not(.text-primary-foreground) .elementor-icon-box-icon .elementor-icon svg * {
  color: hsl(var(--primary)) !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}
body.elementor-page .elementor-widget-icon-box.text-primary-foreground .elementor-icon-box-icon .elementor-icon,
body.elementor-page .elementor-widget-icon-box.text-primary-foreground .elementor-icon-box-icon .elementor-icon svg,
body.elementor-page .elementor-widget-icon-box.text-primary-foreground .elementor-icon-box-icon .elementor-icon svg * {
  color: hsl(var(--primary-foreground)) !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}
body.elementor-page .elementor-widget-icon-list .elementor-icon-list-icon i,
body.elementor-page .elementor-widget-icon-list .elementor-icon-list-icon svg,
body.elementor-page .elementor-widget-icon-list .elementor-icon-list-icon svg * {
  color: hsl(var(--primary)) !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}
#root.elementor .elementor-widget-button .elementor-button-icon,
#root.elementor .elementor-widget-button .elementor-button-icon i {
  color: inherit !important;
}

/* Elementor nav menu: inherit header typography / spacing from wrapper classes. */
#root.elementor .elementor-widget-nav-menu {
  font-family: inherit;
}
#root.elementor .elementor-widget-nav-menu .elementor-nav-menu a {
  font: inherit;
  color: inherit;
  text-decoration: none;
}

/* Hero: reproduce the SOURCE layout faithfully — it is intentionally LEFT-aligned.
 * The Lovable source hero is:
 *   <div class="relative z-10 ... pl-6 sm:pl-10 lg:pl-16 flex justify-start">
 *     <div class="max-w-2xl text-left"> … headline / copy / CTAs … </div>
 *   </div>
 * with a left→right dark→transparent gradient so the copy sits on the readable
 * dark left side. We do NOT center it. Elementor converts the wrappers into
 * e-con flex containers and can drop the Tailwind alignment, so we re-assert the
 * source's left alignment (and keep the copy column constrained on the left).
 * Targets both the frontend (#root.elementor) and the editor canvas
 * (body.elementor-page) so the editor preview matches the published page. */
#root.elementor section.relative.flex.items-center .relative.z-10.flex.justify-start,
body.elementor-page section.relative.flex.items-center .relative.z-10.flex.justify-start {
  justify-content: flex-start !important;
  align-items: flex-start !important;
  text-align: left !important;
}
#root.elementor section.relative.flex.items-center .relative.z-10 .max-w-2xl.text-left,
body.elementor-page section.relative.flex.items-center .relative.z-10 .max-w-2xl.text-left {
  text-align: left !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
/* Native heading / text / CTA widgets carry the alignment after conversion —
 * keep them left so the headline doesn't drift to centre. */
#root.elementor section.relative.flex.items-center:has(img.object-cover) .elementor-widget-heading .elementor-heading-title,
#root.elementor section.relative.flex.items-center:has(img.object-cover) .elementor-widget-text-editor,
#root.elementor section.relative.flex.items-center:has(img.object-cover) .elementor-widget-text-editor .elementor-widget-container,
#root.elementor section.relative.flex.items-center:has(img.object-cover) .elementor-widget-text-editor p,
body.elementor-page section.relative.flex.items-center:has(img.object-cover) .elementor-widget-heading .elementor-heading-title,
body.elementor-page section.relative.flex.items-center:has(img.object-cover) .elementor-widget-text-editor,
body.elementor-page section.relative.flex.items-center:has(img.object-cover) .elementor-widget-text-editor .elementor-widget-container,
body.elementor-page section.relative.flex.items-center:has(img.object-cover) .elementor-widget-text-editor p {
  text-align: left !important;
}
#root.elementor section.relative.flex.items-center:has(img.object-cover) .elementor-widget-heading,
#root.elementor section.relative.flex.items-center:has(img.object-cover) .elementor-widget-text-editor,
body.elementor-page section.relative.flex.items-center:has(img.object-cover) .elementor-widget-heading,
body.elementor-page section.relative.flex.items-center:has(img.object-cover) .elementor-widget-text-editor {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
/* CTA row stays left (source: flex-col sm:flex-row, justify-start by default). */
#root.elementor section.relative.flex.items-center:has(img.object-cover) [class*="flex-col"][class*="sm:flex-row"],
body.elementor-page section.relative.flex.items-center:has(img.object-cover) [class*="flex-col"][class*="sm:flex-row"] {
  justify-content: flex-start !important;
}

/* ── HEADER / NAV (TAG-INDEPENDENT) ────────────────────────────────────────
 * CRITICAL: these selectors are scoped by the original Tailwind CLASSES, NOT by
 * the <header>/<nav> semantic tags.
 *
 * Why: the importer asks Elementor to emit semantic container tags via the
 * container html_tag setting. Elementor honours that on the FRONTEND, but in
 * the EDITOR CANVAS it renders every container as a plain div (the real tag is
 * only applied on publish/preview render). So any rule scoped as
 * "header nav ..." silently fails to match inside the editor — the nav gets zero
 * spacing and the menu "bunches up" in the editor even though the live site is
 * fine. That mismatch is exactly the symptom we kept chasing.
 *
 * Matching on the Tailwind classes (which Elementor copies onto the container's
 * class list via css_classes, present in BOTH the editor and the frontend) makes
 * these rules version-independent and canvas-independent. The desktop nav is
 * uniquely identified by hidden + lg:flex + gap-8. */

/* Header row: logo ⇄ nav on one line. Source: flex items-center justify-between h-20. */
#root.elementor [class*="justify-between"][class*="h-20"],
body.elementor-page [class*="justify-between"][class*="h-20"] {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  box-sizing: border-box;
}

/* Desktop nav: hidden below lg; horizontal row with a real gap at lg+. */
#root.elementor [class*="hidden"][class*="lg:flex"][class*="gap-8"],
body.elementor-page [class*="hidden"][class*="lg:flex"][class*="gap-8"] {
  display: none !important;
}
@media (min-width: 1024px) {
  #root.elementor [class*="hidden"][class*="lg:flex"][class*="gap-8"],
  body.elementor-page [class*="hidden"][class*="lg:flex"][class*="gap-8"] {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 2rem !important;
  }
  /* Mobile-only bits (hamburger + collapsible nav) stay hidden on desktop. */
  #root.elementor [class*="lg:hidden"],
  body.elementor-page [class*="lg:hidden"] {
    display: none !important;
  }
  /* CRITICAL (editor clustering fix): the hamburger <button class="lg:hidden">
   * is hidden above, but in the Elementor canvas the button is wrapped in an
   * .elementor-element/.e-con flex item that does NOT carry the lg:hidden class.
   * That empty wrapper keeps a box and occupies the right-hand justify-between
   * slot, pushing the desktop nav into the middle (the "menu clustered left,
   * empty space on the right" bug we kept chasing). Collapse any header flex
   * item whose only meaningful content is an lg:hidden toggle. Scoped to the
   * header row so we never hide a real content section that merely contains a
   * mobile-only sub-element. */
  #root.elementor [class*="justify-between"][class*="h-20"] .elementor-element:has([class*="lg:hidden"]),
  body.elementor-page [class*="justify-between"][class*="h-20"] .elementor-element:has([class*="lg:hidden"]),
  #root.elementor [class*="justify-between"][class*="h-20"] .e-con:has([class*="lg:hidden"]),
  body.elementor-page [class*="justify-between"][class*="h-20"] .e-con:has([class*="lg:hidden"]) {
    display: none !important;
  }
}

/* Each nav link is an Elementor widget inside the flex row. In the editor the
 * link widget is wrapped in an .elementor-element(-edit-mode) flex item that
 * collapses to ~1 char wide; with default white-space the label wraps
 * per-character and overflows → "bunched". Force auto width + nowrap. */
#root.elementor [class*="hidden"][class*="lg:flex"][class*="gap-8"] > .elementor-element,
body.elementor-page [class*="hidden"][class*="lg:flex"][class*="gap-8"] > .elementor-element {
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: none !important;
}
#root.elementor [class*="hidden"][class*="lg:flex"][class*="gap-8"] a,
#root.elementor [class*="hidden"][class*="lg:flex"][class*="gap-8"] .elementor-button,
#root.elementor [class*="hidden"][class*="lg:flex"][class*="gap-8"] .elementor-button-text,
body.elementor-page [class*="hidden"][class*="lg:flex"][class*="gap-8"] a,
body.elementor-page [class*="hidden"][class*="lg:flex"][class*="gap-8"] .elementor-button,
body.elementor-page [class*="hidden"][class*="lg:flex"][class*="gap-8"] .elementor-button-text {
  white-space: nowrap !important;
}

/* Logo: source <img class="h-14 w-auto">. Match by class, not by header tag. */
#root.elementor img.h-14,
body.elementor-page img.h-14,
#root.elementor .elementor-widget-image img[src*="logo"],
body.elementor-page .elementor-widget-image img[src*="logo"] {
  height: 3.5rem !important;
  max-height: 3.5rem !important;
  width: auto !important;
  max-width: min(280px, 40vw) !important;
  object-fit: contain !important;
}

/* (3b) Chrome-stripping for headings. The '.elementor-heading-title' class
 * sits on the actual h1..h6 element, and the Tailwind typography
 * utilities (font-display, text-5xl, lg:text-6xl, text-secondary-foreground)
 * live on the widget WRAPPER (copied there by the importer via
 * lovwp_eel_heading_widget). Forcing 'font: inherit' on the inner heading
 * pulls those wrapper-level utilities down onto the text, so e.g. an
 * h1 widget wrapper carrying '.text-5xl.font-display' produces a 3rem
 * Oswald 700 heading regardless of Elementor's default heading reset.
 *
 * Text-editor widgets do NOT get 'font: inherit' on the inner p: there
 * the Tailwind utilities (text-lg, text-muted-foreground, mb-8) are
 * already on the p itself, and 'font: inherit' with the specificity
 * of an ID selector would clobber them. The wrapper-level
 * 'font-family: inherit' rule above is sufficient to pull Inter through. */
#root.elementor .elementor-widget-heading .elementor-heading-title,
#root.elementor .elementor-widget-text-editor .elementor-widget-container p {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  text-align: inherit;
  line-height: inherit;
  margin: 0;
}

#root.elementor .elementor-widget-button .elementor-button-wrapper,
#root.elementor .elementor-widget-button .elementor-button {
  background: transparent;
  padding: 0;
  border: 0;
  border-radius: inherit;
  /* NOTE: deliberately NO 'color: inherit' here. The importer seeds each button
   * with a native button_text_color (Elementor emits a per-element
   * .elementor-button color rule), and a user override is written to post-N.css.
   * Forcing 'color: inherit' at ID specificity used to beat both, leaving the GUI
   * colour control dead and the text stuck on the inherited colour. Colour
   * inherits naturally when no native value is set, so fidelity is preserved
   * without blocking edits. */
  font: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
#root.elementor .elementor-widget-button .elementor-button-text {
  font: inherit;
  /* No color override - see note above; the button's own colour cascades here. */
}

/* Icon list (footer / quick links): Tailwind lives on widget wrapper — inherit through. */
#root.elementor .elementor-widget-icon-list,
#root.elementor .elementor-widget-icon-list .elementor-icon-list-item,
#root.elementor .elementor-widget-icon-list .elementor-icon-list-text {
  font-family: inherit;
}
#root.elementor .elementor-widget-icon-list .elementor-icon-list-item > a {
  font: inherit;
  color: inherit;
  text-decoration: none;
}
#root.elementor .elementor-widget-icon-list .elementor-icon-list-text {
  font: inherit;
  color: inherit;
}

/* ----------------------------------------------------------------------- *
 * Contact Form 7 forms (the importer maps source <form>s to CF7 and embeds
 * them via an Elementor Shortcode widget). The source form is gone, so style
 * CF7's output to match the design tokens (input look, primary submit button)
 * for visual continuity. Editing happens in the CF7 admin UI. */
.wpcf7 .lovwp-cf7-field { margin: 0 0 1.5rem; }
.wpcf7 .lovwp-cf7-field > label {
  display: block;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  color: hsl(var(--foreground));
  margin: 0;
}
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="url"],
.wpcf7 input[type="number"],
.wpcf7 input[type="date"],
.wpcf7 textarea,
.wpcf7 select {
  display: block;
  width: 100%;
  margin-top: 0.5rem;
  height: 2.5rem;
  padding: 0.5rem 0.75rem;
  font-family: inherit;
  font-size: 1rem;
  color: hsl(var(--foreground));
  background-color: hsl(var(--background));
  border: 1px solid hsl(var(--input));
  border-radius: 0.375rem;
  box-sizing: border-box;
}
.wpcf7 textarea { height: auto; min-height: 7.5rem; }
.wpcf7 input::placeholder,
.wpcf7 textarea::placeholder { color: hsl(var(--muted-foreground)); }
.wpcf7 input:focus-visible,
.wpcf7 textarea:focus-visible,
.wpcf7 select:focus-visible {
  outline: 2px solid hsl(var(--ring));
  outline-offset: 2px;
}
.wpcf7 .lovwp-cf7-submit { margin: 0; }
.wpcf7 input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2.75rem;
  padding: 0 3rem;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  color: hsl(var(--primary-foreground));
  background-color: hsl(var(--primary));
  border: 0;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: opacity 0.15s ease;
}
.wpcf7 input[type="submit"]:hover { opacity: 0.9; }