/* Bridge: reconcile Elementor's DOM wrappers with the original class-based CSS.
   Loaded after snakes-design.css. Keeps native Elementor widgets pixel-accurate. */

/* Make Text-Editor "raw" wrappers layout-transparent so exact markup sits where
   the original CSS expects it. */
.snakes-page .elementor-widget.nm-raw > .elementor-widget-container { display: contents; }
.snakes-page .elementor-widget.nm-raw { display: contents; }

/* Text-Editor content wrapper transparent by default so <p class="eyebrow"> etc.
   participate directly in the parent layout. */
.snakes-page .elementor-widget-text-editor > .elementor-widget-container { display: contents; }

/* Raw HTML widget wrappers transparent so exact markup sits where the CSS expects. */
.snakes-page .elementor-widget-html > .elementor-widget-container { display: contents; }

/* Elementor container defaults must not add their own gaps/padding; the original
   CSS owns all spacing. (Kit already zeroes these, this is a safety net.) */
.snakes-page .e-con-inner { width: 100%; padding: 0; }
.snakes-page .e-con { --gap: 0px; }

/* ---- Hello Elementor theme class collision: the theme caps .site-footer at
   1140px. Keep the footer full width; the header keeps the theme behaviour. ---- */
.snakes-page .site-footer:not(.dynamic-footer) { max-width: 100%; }
.snakes-page .site-footer { padding-block: 80px 28px; }
@media (max-width: 680px) {
  .snakes-page .site-footer { padding-block: 80px calc(95px + env(safe-area-inset-bottom)); }
}

/* ---- Buttons: map Elementor button widget onto the original .button system ---- */
.snakes-page .elementor-widget-button { flex-shrink: 0; }

/* The .button/.button-* classes sit on the widget WRAPPER only to select the
   variant — the visual button is the inner .elementor-button. Strip the
   .button visuals from the wrapper so no phantom second border/box appears. */
.snakes-page .elementor-widget-button.button,
.snakes-page .elementor-widget-button.button-small,
.snakes-page .elementor-widget-button.button-ghost,
.snakes-page .elementor-widget-button.button-outline,
.snakes-page .elementor-widget-button.button-dark {
  width: auto;
  min-height: 0;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
}
.snakes-page .elementor-widget-button.button:hover,
.snakes-page .elementor-widget-button.button-outline:hover,
.snakes-page .elementor-widget-button.button-dark:hover,
.snakes-page .elementor-widget-button.button-ghost:hover {
  transform: none;
  background: transparent;
}
/* Wrapper-level width rules from the source that must still apply */
.snakes-page .sidebar-card .elementor-widget-button,
.snakes-page .sidebar-card .elementor-widget-button .elementor-button { width: 100%; }
@media (max-width: 680px) {
  .snakes-page .hero-copy .button-row .elementor-widget-button,
  .snakes-page .hero-copy .button-row .elementor-widget-button .elementor-button,
  .snakes-page .call-band-inner .elementor-widget-button,
  .snakes-page .call-band-inner .elementor-widget-button .elementor-button { width: 100%; }
}
.snakes-page .elementor-widget-button .elementor-button {
  white-space: nowrap;
  display: inline-flex; min-height: 52px; align-items: center; justify-content: center;
  border: 1px solid var(--lime); border-radius: 4px; padding: 0 24px;
  background: var(--lime); color: var(--ink);
  font-family: var(--font-body); font-size: 13px; font-weight: 850;
  letter-spacing: 0.03em; text-transform: uppercase; fill: var(--ink);
  transition: transform .2s ease, background .2s ease;
}
.snakes-page .elementor-widget-button .elementor-button:hover { transform: translateY(-2px); background: #ffd35d; }
.snakes-page .elementor-widget-button.button-small .elementor-button { min-height: 42px; padding-inline: 19px; }
.snakes-page .elementor-widget-button.button-dark .elementor-button { border-color: var(--ink); background: var(--ink); color: var(--white); fill: var(--white); }
.snakes-page .elementor-widget-button.button-dark .elementor-button:hover { background: #1a2a20; }
.snakes-page .elementor-widget-button.button-ghost .elementor-button { border-color: rgb(255 255 255 / 44%); background: rgb(255 255 255 / 8%); color: var(--white); }
.snakes-page .elementor-widget-button.button-outline .elementor-button { border-color: var(--forest); background: transparent; }

/* ---- Headings: Elementor heading wrappers transparent so ancestor selectors
   (.hero-copy h1, .section-heading h2, .service-card h3 ...) apply cleanly ---- */
.snakes-page .elementor-widget-heading > .elementor-widget-container { display: contents; }

/* ---- Fill images: reproduce SiteImage fill (inline styles in the source) and
   the source's child-combinator rules, which cannot pierce Elementor's
   display:contents widget wrappers. ---- */
.snakes-page .home-hero-photo img,
.snakes-page .harley-image img,
.snakes-page .story-image img,
.snakes-page .species-image img,
.snakes-page .field-card-image img,
.snakes-page .page-hero-image img,
.snakes-page .vehicle-frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Source: .home-hero-photo > img — sharp foreground layer above the blur */
.snakes-page .home-hero-photo img {
  z-index: 1;
  object-fit: cover !important;
  object-position: 58% center;
  filter: brightness(0.82) contrast(1.18) saturate(1.08);
  transform: scale(1.035);
}
/* Source: .harley-image > img */
.snakes-page .harley-image img { object-position: center 20%; }
/* Portrait hero images keep contain (class sits on the img element itself) */
.snakes-page .page-hero-image img.article-portrait-hero-image,
.snakes-page .page-hero-image img.protective-clothing-hero-image {
  object-fit: contain !important;
  object-position: center;
  background: #101a14;
}

/* ---- Images: Image widget wrappers transparent; original descendant selectors
   (.story-image img, .species-image img) then apply. ---- */
.snakes-page .elementor-widget-image > .elementor-widget-container { display: contents; }

/* Logo sits on the image element in the source (.brand-logo{width:116px}) */
.snakes-page .brand-logo img, .snakes-page img.brand-logo { width: 116px; height: auto; object-fit: contain; }
@media (max-width: 680px) { .snakes-page .brand-logo img { width: 84px; } }