/* First-party visual fixes on top of the Elementor markup (KontentPlus). Keep each rule small and commented. */

/* Mobile menu (popup 50674): the close button sat on top of the logo's "n". Move it to the right edge, centred on
   the logo row and aligned with the Let's Talk button's right edge. Desktop and tablet are unaffected. */
@media (max-width: 767px) {
  /* same specificity as Elementor's own "right: 90%" rule, loaded after it */
  body:not(.rtl) #elementor-popup-modal-50674 .dialog-close-button {
    left: auto;
    right: 25px;
    top: 52px;
  }
}

/* Cookie banner (public/assets/nowhere-consent.js), only on the page when consentBanner is on. Same black pill
   buttons as "Let's Talk Connectivity"; a white card at the bottom, full width on phones. */
.nn-consent {
  position: fixed; z-index: 99999; left: 24px; right: 24px; bottom: 24px; margin: 0 auto; max-width: 960px;
  display: flex; align-items: center; gap: 24px; padding: 20px 24px;
  background: #fff; color: #000; border-radius: 16px; box-shadow: 0 8px 32px rgba(0, 0, 0, .18);
  font-size: 15px; line-height: 1.5;
}
.nn-consent__text { margin: 0; flex: 1 1 auto; }
.nn-consent__text a { color: inherit; text-decoration: underline; }
.nn-consent__actions { display: flex; gap: 12px; flex: 0 0 auto; }
.nn-consent__btn {
  appearance: none; cursor: pointer; border: 1px solid #000; border-radius: 24px; padding: 12px 24px;
  background: #000; color: #fff; font: inherit; font-size: 15px; line-height: 1.2; white-space: nowrap;
}
.nn-consent__btn--ghost { background: #fff; color: #000; }
.nn-consent__btn:hover { background: #224583; border-color: #224583; color: #fff; }
.nn-consent__btn:focus-visible { outline: 2px solid #224583; outline-offset: 2px; }
@media (max-width: 767px) {
  .nn-consent { left: 12px; right: 12px; bottom: 12px; flex-direction: column; align-items: stretch; gap: 16px; padding: 18px; }
  .nn-consent__actions { flex-direction: column-reverse; }
  .nn-consent__btn { width: 100%; padding: 14px 24px; }
}

/* Header alignment. Home (canvas, post 40) and Solutions (canvas, post 48219) carry their own copy of the header
   inside the hero, with other paddings than the shared header (post 35); the hamburger, logo and button jumped
   between pages. The shared header is the reference; the two copies are aligned to it at every breakpoint.
   The shared bar itself had a fixed 1440px width, so below 1440px it overflowed: hamburger off-screen left,
   button clipped right. It now shrinks with the window (unchanged at 1440px and wider). */
@media (min-width: 768px) {
  .elementor-35 .elementor-element.elementor-element-84263ca { --padding-left: 0px; --padding-right: 0px; }
  .elementor-35 .elementor-element.elementor-element-84263ca > .e-con-inner { max-width: 100%; }
  .elementor-35 .elementor-element.elementor-element-294cf66 { --width: 100%; max-width: 1440px; margin-left: auto; margin-right: auto; }
}

/* Home + Solutions header rows. The hero's own padding (16px below 1025px) and the wrappers' paddings are cancelled
   so the row spans the full width from the top edge, like the shared bar. Targets (shared header, measured):
   desktop/tablet hamburger 35px from the left / 47px from the top, button 35px from the right, 116px tall row;
   tablet logo at 50% - 124px; phone hamburger at 20/34, logo at 115/20, 150px wide. */
.elementor-48219 .elementor-element.elementor-element-fd92d7c { --padding-top: 0px; --padding-bottom: 0px; --padding-left: 0px; --padding-right: 0px; }
.elementor-40 .elementor-element.elementor-element-1619b36,
.elementor-48219 .elementor-element.elementor-element-c2ee9a5 { position: relative; }
@media (min-width: 768px) {
  .elementor-40 .elementor-element.elementor-element-1619b36 { --padding-top: 25px; --padding-bottom: 25px; --padding-left: 25px; --padding-right: 25px; }
  .elementor-48219 .elementor-element.elementor-element-c2ee9a5 {
    --min-height: 116px; --justify-content: flex-start; --align-items: center;
    --padding-top: 25px; --padding-bottom: 25px; --padding-left: 35px; --padding-right: 35px;
  }
  .elementor-48219 .elementor-element.elementor-element-48441f0 { margin-left: 4px !important; }
  .elementor-48219 .elementor-element.elementor-element-b9749bb { margin-left: auto; }
}
@media (min-width: 1025px) {
  .elementor-48219 .elementor-element.elementor-element-91062ae { position: absolute; left: 50%; transform: translateX(-50%); z-index: 3; }
}
@media (min-width: 768px) and (max-width: 1024px) {
  .elementor-40 .elementor-element.elementor-element-1619b36,
  .elementor-48219 .elementor-element.elementor-element-c2ee9a5 {
    --margin-top: -16px; --margin-left: -16px; --margin-right: -16px; --width: calc(100% + 32px); max-width: none;
  }
  .elementor-40 .elementor-element.elementor-element-d6df054,
  .elementor-48219 .elementor-element.elementor-element-91062ae { position: absolute; left: calc(50% - 134px); margin: 0; z-index: 3; }
  /* Solutions had no hamburger at all on tablets */
  .elementor-48219 .elementor-element-aea66f4.elementor-hidden-tablet { display: block; }
}
@media (max-width: 767px) {
  .elementor-40 .elementor-element.elementor-element-1619b36,
  .elementor-48219 .elementor-element.elementor-element-c2ee9a5 {
    --margin-top: -16px; --margin-left: -16px; --margin-right: -16px; --width: calc(100% + 32px); max-width: none;
    --min-height: 0px; --gap: 0px 20px; --column-gap: 20px; --align-items: center;
    --padding-top: 20px; --padding-bottom: 20px; --padding-left: 20px; --padding-right: 20px;
  }
  .elementor-40 .elementor-element.elementor-element-1619b36 { --justify-content: flex-start; }
  .elementor-40 .elementor-element.elementor-element-a2ae416 { --padding-top: 0px; --padding-bottom: 0px; --padding-left: 0px; --padding-right: 0px; --width: fit-content; --gap: 0px; --column-gap: 0px; flex-shrink: 0; }
  .elementor-40 .elementor-element.elementor-element-2b6dc48 { margin-left: auto; }
  .elementor-40 .elementor-element.elementor-element-d6df054 { margin: 0 0 0 55px; width: auto; }
  .elementor-40 .elementor-element.elementor-element-d6df054 img { width: 150px; }
  /* row-reverse: flex-end is the left edge */
  .elementor-48219 .elementor-element.elementor-element-c2ee9a5 { --justify-content: flex-end; }
  .elementor-48219 .elementor-element.elementor-element-6126ea0 { margin-top: 5px; }
  .elementor-48219 .elementor-element.elementor-element-91062ae { margin: 0 0 0 55px; }
}
/* Sticky state: their custom CSS adds a 5px gap above the white bar; the shared header sits flush at the top */
.elementor-40 .elementor-sticky--effects.sticky-menu,
.elementor-48219 .elementor-sticky--effects.sticky-menu { margin-top: 0 !important; }

/* Related-posts card image (loop item 49143): Elementor has "max-width: 424%" (a typo for px) below 1025px, so on
   phones the image was wider than its card and 85 pages could be dragged sideways, header and all. */
@media (max-width: 1024px) {
  /* "body" outranks it: the loop item CSS is printed in the body, after this file */
  body .elementor-49143 .elementor-element.elementor-element-20b0d04 img { max-width: 100%; object-fit: cover; }
}

/* Single post template (50747): the article column is a fixed 872px from 768px up, so tablets in portrait could
   drag the page sideways. Long bare URLs and wide tables in post text did the same on phones.
   Same fixed width on the use-case (3cf9084) and service (8c47425) templates. */
body .elementor .elementor-element.elementor-element-3cf9084,
body .elementor .elementor-element.elementor-element-8c47425 { max-width: 100%; }
.elementor-widget-theme-post-content a { overflow-wrap: anywhere; }
.elementor-widget-theme-post-content figure:has(> table) { max-width: 100%; overflow-x: auto; }

/* Home, phones: the hamburger (b754167) opened the big slide-in menu (popup 50674); every other page opens the
   simple mobile menu (popup 49117). Show Home's own 49117 toggle (1fc7285) there instead. Decided 2026-10-12. */
@media (max-width: 767px) {
  .elementor-40 .elementor-element.elementor-element-a2ae416 { display: none; }
  .elementor-40 .elementor-element.elementor-element-1fc7285.elementor-hidden-mobile { display: block; margin-top: 5px; flex-shrink: 0; }
}

/* Solutions, tablets: three solution cards had 50px side padding, leaving ~116px for the heading, so
   "CONNECTIVITY" stuck out of the page at 768px. Same 10px as the other cards, and one heading size for all five. */
@media (min-width: 768px) and (max-width: 1024px) {
  body .elementor-48219 .elementor-element.elementor-element-8d33c82,
  body .elementor-48219 .elementor-element.elementor-element-5285a30,
  body .elementor-48219 .elementor-element.elementor-element-1908b24 { --padding-left: 10px; --padding-right: 10px; }
  body .elementor-48219 .elementor-element:is(.elementor-element-7fa27fd, .elementor-element-53a4180, .elementor-element-55c9841,
    .elementor-element-68599c8, .elementor-element-45e34b2) .elementor-heading-title { font-size: 24px; }
}
