/* Site tweaks applied on top of the mirrored theme.
   Every deviation from the original site lives in this one file, so the deviations are auditable
   in a single place rather than scattered through the theme.

   Deliberately NOT in here: body button colours. Those use the brand orange, the same orange as
   the logo's C mark. The request was for a white-and-blue *background* scheme, and the backgrounds
   are already white, so overriding the brand accent would exceed what was asked. */

/* An empty Elementor container sits at left:72px and overflows the viewport by exactly 72px,
   producing a horizontal scrollbar on desktop and mobile alike. It holds nothing. */
.elementor-element-badf01b { display: none !important; }

/* Belt and braces: the page must never scroll sideways. */
html, body { overflow-x: hidden; }

/* No carousel rule here on purpose.
   Slides were previously forced to one aspect ratio so they would render at a uniform height, but
   `.swiper-slide-image` is a shared Elementor class and the rule also shrank the certification
   logo strip by ~57%. Instead every hero slide is now pre-cropped to the banner ratio (1532x650)
   in the source files, so heights match without any CSS - and nothing else is affected. */

/* Customers band on the homepage. Full-bleed and unstyled otherwise, so the theme cannot
   impose padding or a max-width that would letterbox the collage. */
.cn-customers {
  width: 100% !important; max-width: 100% !important;
  flex: 0 0 100% !important; align-self: stretch;
  margin: 0 !important; padding: 0 !important;
  line-height: 0; background: #fff;
}
.cn-customers img {
  width: 100% !important; height: auto !important; max-width: 100% !important;
  display: block; margin: 0 auto;
}
@media (max-width: 782px) {
  /* On phones the 1920px-wide collage scaled to ~390px makes the centre-panel text about 5px tall
     and unreadable. Cropping to a 260px-high band with object-fit:cover keeps the panel centred and
     renders its text at roughly 16px.

     height MUST be !important here. The rule above sets `height: auto !important`, and an !important
     declaration beats a later non-important one regardless of source order - so without this the
     image kept its natural ratio (measured 390x154) and the text stayed illegible, with object-fit
     and object-position silently doing nothing. */
  .cn-customers { overflow: hidden; max-height: 260px; }
  .cn-customers img {
    object-fit: cover !important;
    object-position: center 42% !important;
    height: 260px !important;
  }
}

/* The hero carousel was reduced to a single slide (the mould one) at the client's request, so its
   previous/next arrows and pagination dots no longer have anything to navigate to. The widget still
   renders them, so they are hidden here. Scoped to the hero widget's Elementor data-id so the
   products carousel further down the page keeps its own controls.

   The arrow class is `elementor-swiper-button` - ONE token. An earlier version of this rule targeted
   `.swiper-button`, which never matches, so the arrows stayed visible at every width. Class names
   verified against the rendered markup, not assumed. */
.elementor-element-dcd75ea .elementor-swiper-button,
.elementor-element-dcd75ea .swiper-pagination {
  display: none !important;
}

/* Elementor reserves 30px under the banner for pagination dots positioned outside it
   (`.elementor-pagination-position-outside .swiper { padding-bottom: 30px }`). With the dots hidden
   that reservation is just an empty white strip under the hero, so it is removed here. */
.elementor-element-dcd75ea .swiper {
  padding-bottom: 0 !important;
}

/* ---------------------------------------------------------------------------
   Contact links (footer phone + email, contact page phone + email boxes).
   Before this the site had no tel: and no mailto: link anywhere, so a visitor on a phone had to
   copy the number or address by hand.

   The anchors sit inside Elementor text widgets, so they are reset to inherit the surrounding
   colour and carry no underline by default - the contact rows must not change appearance at rest.
   The link affordance appears on hover and on keyboard focus only.
   --------------------------------------------------------------------------- */
.cn-contact-link,
.cn-contact-link:visited {
  color: inherit !important;
  text-decoration: none !important;
}
.cn-contact-link:hover,
.cn-contact-link:focus {
  color: #F88830 !important;
  text-decoration: underline !important;
}
.cn-contact-link:focus-visible {
  outline: 2px solid #38A0F0;
  outline-offset: 2px;
}