/* ==========================================================================
   ELEMENTOR COMPATIBILITY
   --------------------------------------------------------------------------
   Elementor ships a frontend reset containing:

       .elementor img { height: auto; max-width: 100%; }

   That selector has exactly the same specificity as ours (one class, one
   element), and Elementor's stylesheet is enqueued after the design system, so
   on a tie the later rule wins. Every image in this design that relies on an
   explicit height therefore loses: the logo renders at its natural 512px
   instead of 26px, and any object-fit crop collapses to the photo's own
   aspect ratio.

   The fix is one more class on the left of each selector, and loading this
   file after Elementor's so nothing can come back over the top of it. These
   are not new styles — they restate what the design system already says, at a
   weight Elementor cannot beat.
   ========================================================================== */

/* -------------------------------------------------------------- 1 the logo */
.elementor .bd img,
.elementor-widget-container .bd img {
  height: 26px;
  width: auto;
  /* the only place the guard is needed: a flex parent could otherwise
     shrink a fixed-height logo below its aspect ratio */
  max-width: none;
  background: #fff;
  padding: 2px 3px;
  border-radius: 2px;
}

/* ------------------------------------------------------- 2 cropped photos */
/* Each of these fills a box that the layout sizes, so the height has to hold. */
.elementor .hero-bg img {
  width: 100%;
  height: 108%;
  object-fit: cover;
}

.elementor .hero-bg[data-slider] img {
  position: absolute;
  inset: 0;
  height: 100%;
}

.elementor .phero .hero-bg img,
.elementor .feat .hero-bg img {
  position: absolute;
  left: 0;
  top: -11%;
  width: 100%;
  height: 122%;
  object-fit: cover;
}

.elementor .mos figure img,
.elementor .rvi > img,
.elementor .tile .ph img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ------------------------------------------------- 3 the widget's own box */
/* Our widgets render complete full-bleed <section> elements. Elementor's
   column and widget wrappers must not add width or padding around them. */
/* Every Walco widget carries .walco-widget on Elementor's own wrapper. */
.elementor-widget.walco-widget {
  width: 100%;
  margin: 0;
  margin-block-end: 0;
}

.elementor-widget.walco-widget > .elementor-widget-container {
  width: 100%;
  padding: 0;
  margin: 0;
}

/* Elementor pads the column by default, which would inset a full-bleed band.
   :has() does the job wherever it is supported; where it is not, the import
   already creates gap-less full-width sections, so nothing is lost. */
.elementor-widget-wrap:has(> .elementor-widget.walco-widget),
.elementor-element-populated:has(> .elementor-widget.walco-widget) {
  padding: 0;
}

.elementor-column:has(> .elementor-widget-wrap > .elementor-widget.walco-widget) {
  padding: 0;
}

.elementor .walco-widget section {
  margin: 0;
}

/* A section dropped in by hand is "boxed" by default, which would trap a
   full-bleed band inside a 1140px container. The import creates full-width
   sections; this makes a hand-built one behave too. */
.elementor-section-boxed > .elementor-container:has(.elementor-widget.walco-widget) {
  max-width: 100%;
}

/* ------------------------------------------------------ 4 header specifics */
/* Elementor's flex column would otherwise stretch the fixed header's children. */
.elementor .hd,
.elementor .ov {
  z-index: 100;
}

.elementor .hd-in {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
}

/* Menu labels must never break mid-item — "Why Walco" on two lines shortens
   the bar and pushes the row out of alignment. */
.elementor .nv > li > a.nl,
.nv > li > a.nl {
  white-space: nowrap;
}

.elementor .bd {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: none;
}

/* ----------------------------------------------------------- 5 typography */
/* Elementor resets figure margins for most widgets but not all; ours are
   positioned by the grid and must stay at zero either way. */
.elementor .walco-widget figure {
  margin: 0;
}

/* Elementor's `.elementor a { text-decoration: none }` is fine, but its
   heading reset can strip the margin collapse the section heading relies on. */
.elementor .walco-widget h1,
.elementor .walco-widget h2,
.elementor .walco-widget h3,
.elementor .walco-widget h4 {
  margin: 0;
}