/* ==========================================================================
   Magnetrix Operator — polish layer
   --------------------------------------------------------------------------
   Loaded after brand.css. This corrects the places where plugin defaults
   fight the design system: Xpro's menu (its widget style controls are not
   settable from the API, so the menu ships unstyled), Elementor's counter,
   accordion and testimonial defaults, WPForms' modern renderer, and Astra's
   residual chrome.

   Everything here is keyed to classes that actually render on the page.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. GLOBAL RESETS
   -------------------------------------------------------------------------- */
body {
  font-family: var(--mx-font-body);
  color: var(--mx-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Elementor text-editor wraps every paragraph; kill the trailing gap so
   container flex-gap alone controls rhythm. */
.elementor-widget-text-editor p:last-child,
.elementor-widget-text-editor > div > p:last-child { margin-bottom: 0; }
.elementor-widget-text-editor p { margin-block-start: 0; }

/* Body copy should never run wider than a comfortable measure. */
.elementor-widget-text-editor { max-width: 68ch; }
.elementor-widget-text-editor[class*="align-center"],
.mx-measure-full .elementor-widget-text-editor { max-width: none; }

::selection { background: var(--mx-accent); color: var(--mx-ink); }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--mx-accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* --------------------------------------------------------------------------
   2. ASTRA CHROME
   -------------------------------------------------------------------------- */
.ast-page-builder-template .site-content > .ast-container { padding: 0; max-width: none; }
.ast-page-builder-template .entry-header,
.ast-page-builder-template .entry-title,
.ast-page-builder-template .ast-single-post-order { display: none; }
.site-content { padding: 0; }
#page { overflow-x: clip; }

#ast-scroll-top {
  background: var(--mx-teal-600);
  color: #fff;
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(4, 16, 15, .18);
}
#ast-scroll-top:hover { background: var(--mx-ink); }

/* --------------------------------------------------------------------------
   3. XPRO HEADER + NAVIGATION
   Xpro's widget style controls could not be written programmatically, so the
   menu arrives with plugin defaults. Everything below restores the brand.
   -------------------------------------------------------------------------- */
.xpro-theme-builder-header {
  position: sticky;
  top: 0;
  z-index: 500;
  background: var(--mx-ink);
}
.xpro-theme-builder-header.xtb-header-sticky { position: sticky; }
.admin-bar .xpro-theme-builder-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .xpro-theme-builder-header { top: 46px; } }

.xpro-theme-builder-header .elementor-element.e-con,
#xpro-theme-builder-footer .elementor-element.e-con { --e-con-grid-template-columns: none; }

/* Top-level items */
.xpro-elementor-horizontal-navbar-nav { gap: 4px; align-items: center; }
.xpro-elementor-horizontal-navbar-nav > li > a {
  font-family: var(--mx-font-display);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -.01em;
  color: var(--mx-sage);
  padding: 10px 13px;
  border-radius: 8px;
  transition: color .18s, background .18s;
}
.xpro-elementor-horizontal-navbar-nav > li > a:hover,
.xpro-elementor-horizontal-navbar-nav > li > a:focus-visible { color: var(--mx-accent); }
.xpro-elementor-horizontal-navbar-nav > li.current-menu-item > a,
.xpro-elementor-horizontal-navbar-nav > li.current-menu-ancestor > a,
.xpro-elementor-horizontal-navbar-nav > li.current_page_item > a { color: var(--mx-accent); }

/* Parent items get a caret so the submenu is discoverable */
.xpro-elementor-horizontal-navbar-nav > li.menu-item-has-children > a::after {
  content: "";
  display: inline-block;
  width: 8px; height: 8px;
  margin-left: 7px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  opacity: .7;
}

/* Dropdown */
.xpro-elementor-horizontal-navbar-nav .sub-menu {
  background: var(--mx-ink);
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: var(--mx-r-md);
  padding: 8px;
  min-width: 250px;
  box-shadow: 0 22px 54px rgba(0, 0, 0, .55);
}
.xpro-elementor-horizontal-navbar-nav .sub-menu li a {
  font-family: var(--mx-font-body);
  font-size: 14.5px;
  color: var(--mx-sage);
  padding: 10px 13px;
  border-radius: 9px;
  transition: color .18s, background .18s;
}
.xpro-elementor-horizontal-navbar-nav .sub-menu li a:hover {
  color: var(--mx-accent);
  background: rgba(32, 230, 242, .08);
}
/* The two service lines lead the submenu, so separate them from the six
   capabilities beneath. */
.xpro-elementor-horizontal-navbar-nav .sub-menu li:nth-child(2) {
  padding-bottom: 8px;
  margin-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, .09);
}

/* Hamburger + off-canvas */
.xpro-elementor-horizontal-menu-btn,
.xpro-elementor-horizontal-menu-toggle,
[class*="horizontal-menu"] button i { color: var(--mx-mist, #F7FCFC); }
.xpro-elementor-horizontal-menu-btn i { font-size: 22px; }
.xpro-elementor-horizontal-menu-close { color: var(--mx-sage); }

@media (max-width: 1024px) {
  .xpro-elementor-horizontal-navbar-wrapper .xpro-elementor-horizontal-navbar {
    background: var(--mx-ink);
    padding: 68px 22px 28px;
  }
  .xpro-elementor-horizontal-navbar-nav { gap: 0; align-items: stretch; }
  .xpro-elementor-horizontal-navbar-nav > li > a {
    font-size: 17px;
    padding: 14px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
    border-radius: 0;
  }
  .xpro-elementor-horizontal-navbar-nav .sub-menu {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0 0 8px 14px;
  }
}

/* --------------------------------------------------------------------------
   4. BUTTONS
   -------------------------------------------------------------------------- */
.elementor-button,
.xpro-elementor-button {
  font-family: var(--mx-font-display);
  font-weight: 600;
  letter-spacing: -.01em;
  border-radius: 999px;
  transition: background-color .18s, color .18s, border-color .18s, transform .18s, box-shadow .18s;
}
.elementor-button:hover,
.xpro-elementor-button:hover { transform: translateY(-1px); }
.elementor-button:active { transform: translateY(0); }

/* Cyan primary earns a glow; nothing else does. */
/* Cyan primary earns a glow. Matched on the rendered fill colour. */
.elementor-widget-button .elementor-button { box-shadow: none; }

.elementor-button .elementor-button-content-wrapper { gap: 9px; }

/* --------------------------------------------------------------------------
   5. ICON BOX
   Brand rule: 48px tile, cyan 12% fill, teal hairline, 13px radius.
   -------------------------------------------------------------------------- */
.elementor-widget-icon-box .elementor-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: rgba(32, 230, 242, .12);
  border: 1px solid rgba(0, 99, 109, .20);
  color: var(--mx-teal-600);
  font-size: 21px;
  transition: background .18s, border-color .18s;
}
.elementor-widget-icon-box .elementor-icon svg { width: 21px; height: 21px; fill: currentColor; }

/* On dark grounds the tile flips to the cyan-on-black treatment. */
.mx-glow .elementor-widget-icon-box .elementor-icon,
.mx-dark-band .elementor-widget-icon-box .elementor-icon {
  background: rgba(32, 230, 242, .10);
  border-color: rgba(32, 230, 242, .30);
  color: var(--mx-accent);
}

.elementor-widget-icon-box .elementor-icon-box-title { margin: 0 0 6px; }
.elementor-widget-icon-box .elementor-icon-box-description { margin: 0; }
.elementor-widget-icon-box .elementor-icon-box-icon { margin-bottom: 18px; }

/* --------------------------------------------------------------------------
   6. COUNTER
   Elementor prints the label before the number. The figure has to lead.
   -------------------------------------------------------------------------- */
.elementor-counter {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: 8px;
  text-align: center;
}
.elementor-counter .elementor-counter-number-wrapper {
  font-family: var(--mx-font-display);
  font-weight: 700;
  font-size: clamp(2.2rem, 1.6rem + 2.4vw, 2.9rem);
  letter-spacing: -.03em;
  line-height: 1;
  color: var(--mx-accent);
}
.elementor-counter .elementor-counter-title {
  font-family: var(--mx-font-body);
  font-size: 15px;
  line-height: 1.45;
  color: var(--mx-sage);
  max-width: 22ch;
}
/* Counters used on light cards (the network band on Industries). */
.mx-on-light .elementor-counter .elementor-counter-number-wrapper,
.elementor-widget.mx-on-light .elementor-counter-number-wrapper { color: var(--mx-teal-600); }
.mx-on-light .elementor-counter .elementor-counter-title,
.elementor-widget.mx-on-light .elementor-counter-title { color: var(--mx-muted); }

/* --------------------------------------------------------------------------
   7. ACCORDION (FAQ)
   -------------------------------------------------------------------------- */
.elementor-accordion { display: grid; gap: 12px; }
.elementor-accordion .elementor-accordion-item {
  border: 1px solid var(--mx-border) !important;
  border-radius: var(--mx-r-md);
  overflow: hidden;
  background: #fff;
  transition: border-color .18s, box-shadow .18s;
}
.elementor-accordion .elementor-accordion-item:has(.elementor-active) {
  border-color: #BFE2E4 !important;
  box-shadow: var(--mx-shadow-sm);
}
.elementor-accordion .elementor-tab-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 19px 22px;
  font-family: var(--mx-font-display);
  font-size: 17px;
  font-weight: 600;
  color: var(--mx-ink);
  border: 0 !important;
  background: transparent;
}
.elementor-accordion .elementor-tab-title.elementor-active { color: var(--mx-accent-text); }
/* Move the plus/minus to the trailing edge. */
.elementor-accordion .elementor-accordion-icon.elementor-accordion-icon-left {
  order: 2;
  margin: 0;
  padding: 0;
  float: none;
  width: auto;
  color: var(--mx-teal-600);
}
.elementor-accordion .elementor-accordion-icon svg { width: 15px; height: 15px; }
.elementor-accordion .elementor-tab-content {
  border: 0 !important;
  padding: 0 22px 21px;
  font-family: var(--mx-font-body);
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--mx-muted);
}
.elementor-accordion .elementor-tab-content p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   8. TESTIMONIAL + STAR RATING
   -------------------------------------------------------------------------- */
.elementor-widget-star-rating .elementor-star-rating { font-size: 15px; letter-spacing: 2px; }
.elementor-widget-star-rating .elementor-star-rating__title { display: none; }

.elementor-testimonial-wrapper { text-align: left; }
.elementor-testimonial-wrapper .elementor-testimonial-content {
  font-family: var(--mx-font-body);
  font-size: 16px;
  line-height: 1.62;
  color: var(--mx-ink);
  margin-bottom: 20px;
}
.elementor-testimonial-wrapper .elementor-testimonial-meta {
  padding-top: 18px;
  border-top: 1px solid var(--mx-border);
  width: 100%;
}
.elementor-testimonial-wrapper .elementor-testimonial-meta-inner { justify-content: flex-start; }
.elementor-testimonial-wrapper .elementor-testimonial-name {
  font-family: var(--mx-font-display);
  font-weight: 600;
  font-size: 15px;
  color: var(--mx-ink);
}
.elementor-testimonial-wrapper .elementor-testimonial-job {
  font-size: 13.5px;
  color: var(--mx-muted);
}
/* No avatar supplied, so drop the empty image slot. */
.elementor-testimonial-wrapper .elementor-testimonial-image { display: none; }

/* --------------------------------------------------------------------------
   9. BLOCKQUOTE
   -------------------------------------------------------------------------- */
.elementor-widget-blockquote blockquote {
  font-family: var(--mx-font-quote);
  font-style: italic;
  border-left: 3px solid var(--mx-accent);
  padding-left: 20px;
  margin: 6px 0;
  color: var(--mx-ink);
}
.elementor-widget-blockquote blockquote footer,
.elementor-widget-blockquote .e-q-footer { display: none; }

/* --------------------------------------------------------------------------
   10. ICON LIST (tick lists)
   -------------------------------------------------------------------------- */
.elementor-widget-icon-list .elementor-icon-list-item { align-items: flex-start; }
.elementor-widget-icon-list .elementor-icon-list-icon {
  margin-top: 3px;
  width: 20px; height: 20px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(32, 230, 242, .16);
  border: 1px solid rgba(0, 99, 109, .26);
  flex: none;
}
.elementor-widget-icon-list .elementor-icon-list-icon svg { width: 10px; height: 10px; }
.elementor-widget-icon-list .elementor-icon-list-text {
  font-family: var(--mx-font-body);
  line-height: 1.55;
}
.mx-glow .elementor-widget-icon-list .elementor-icon-list-icon,
.mx-dark-band .elementor-widget-icon-list .elementor-icon-list-icon {
  background: rgba(32, 230, 242, .12);
  border-color: rgba(32, 230, 242, .34);
}

/* --------------------------------------------------------------------------
   11. IMAGE SLOTS
   Placeholders should read as an intentional slot, not a broken image.
   Delete this block once real photography is in.
   -------------------------------------------------------------------------- */
.elementor-widget-image img[src*="elementor/assets/images/placeholder"] {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--mx-r-lg);
  background:
    repeating-linear-gradient(135deg, rgba(0,99,109,.07) 0 10px, transparent 10px 20px),
    var(--mx-surface-alt);
  border: 1px solid var(--mx-border);
  opacity: .9;
}
.mx-glow .elementor-widget-image img[src*="placeholder"] {
  background:
    repeating-linear-gradient(135deg, rgba(32,230,242,.06) 0 10px, transparent 10px 20px),
    #072021;
  border-color: rgba(255, 255, 255, .10);
}
.elementor-widget-image img { border-radius: var(--mx-r-lg); display: block; }

/* --------------------------------------------------------------------------
   12. WPFORMS
   The modern renderer is driven by custom properties, so set those rather
   than fighting its specificity.
   -------------------------------------------------------------------------- */
.wpforms-container.wpforms-render-modern {
  --wpforms-field-border-radius: 11px;
  --wpforms-field-background-color: #ffffff;
  --wpforms-field-border-color: #DCEAEA;
  --wpforms-field-text-color: #04100F;
  --wpforms-label-color: #04100F;
  --wpforms-label-sublabel-color: #6C8A88;
  --wpforms-label-error-color: #C7766B;
  --wpforms-button-border-radius: 999px;
  --wpforms-button-background-color: #20E6F2;
  --wpforms-button-text-color: #04100F;
  --wpforms-field-size-input-height: 50px;
  --wpforms-field-size-input-spacing: 16px;
  --wpforms-field-size-font-size: 15.5px;
  --wpforms-field-size-sublabel-spacing: 6px;
  --wpforms-button-size-font-size: 15px;
  --wpforms-button-size-height: 50px;
  --wpforms-button-size-padding-h: 26px;
  margin: 0;
}
.wpforms-container .wpforms-field { padding: 0 0 18px; }
.wpforms-container .wpforms-field-label {
  font-family: var(--mx-font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--mx-muted);
  margin-bottom: 7px;
}
.wpforms-container .wpforms-required-label { color: var(--mx-clay); }
.wpforms-container input[type=text],
.wpforms-container input[type=email],
.wpforms-container input[type=tel],
.wpforms-container input[type=url],
.wpforms-container input[type=number],
.wpforms-container select,
.wpforms-container textarea {
  font-family: var(--mx-font-body);
  border: 1px solid var(--mx-border);
  border-radius: 11px;
  background: #fff;
  color: var(--mx-ink);
  transition: border-color .18s, box-shadow .18s;
}
.wpforms-container input:focus,
.wpforms-container select:focus,
.wpforms-container textarea:focus {
  border-color: var(--mx-teal-600);
  box-shadow: 0 0 0 3px rgba(32, 230, 242, .20);
  outline: none;
}
.wpforms-container textarea { min-height: 128px; line-height: 1.6; }
.wpforms-container .wpforms-field-description {
  font-family: var(--mx-font-body);
  font-size: 13.5px;
  color: var(--mx-muted);
}
.wpforms-container button[type=submit],
.wpforms-container .wpforms-submit {
  font-family: var(--mx-font-display) !important;
  font-weight: 600 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--mx-accent) !important;
  color: var(--mx-ink) !important;
  box-shadow: 0 6px 18px rgba(32, 230, 242, .28);
  transition: background .18s, transform .18s, box-shadow .18s;
  width: 100%;
}
.wpforms-container button[type=submit]:hover,
.wpforms-container .wpforms-submit:hover {
  background: #4CEDF6 !important;
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(32, 230, 242, .36);
}
.wpforms-container .wpforms-error,
.wpforms-container label.wpforms-error { color: var(--mx-clay); font-size: 13px; }
.wpforms-container input.wpforms-error,
.wpforms-container textarea.wpforms-error,
.wpforms-container select.wpforms-error { border-color: var(--mx-clay) !important; }
.wpforms-confirmation-container-full {
  background: rgba(0, 99, 109, .08);
  border: 1px solid rgba(0, 99, 109, .28);
  border-radius: var(--mx-r-md);
  color: var(--mx-teal-800);
  padding: 16px 18px;
}
.wpforms-container .wpforms-field-gdpr-checkbox label { font-size: 13.5px; color: var(--mx-muted); }
.wpforms-container .wpforms-field-gdpr-checkbox input { accent-color: var(--mx-teal-600); }

/* Newsletter form sits inline where there is room. */
.mx-newsletter .wpforms-container .wpforms-field { padding-bottom: 12px; }
.mx-newsletter .wpforms-container .wpforms-field-label { display: none; }

/* --------------------------------------------------------------------------
   13. FOOTER
   -------------------------------------------------------------------------- */
#xpro-theme-builder-footer a { text-decoration: none; }
#xpro-theme-builder-footer .xpro-elementor-infolist-title { transition: color .18s; }
#xpro-theme-builder-footer .xpro-elementor-horizontal-navbar-nav { gap: 20px; flex-wrap: wrap; }
#xpro-theme-builder-footer .xpro-elementor-horizontal-navbar-nav > li > a {
  font-family: var(--mx-font-body);
  font-size: 14px;
  color: var(--mx-slate);
  padding: 0;
}
#xpro-theme-builder-footer .xpro-elementor-horizontal-navbar-nav > li > a:hover { color: var(--mx-accent); }
#xpro-theme-builder-footer .xpro-elementor-horizontal-navbar-nav > li.menu-item-has-children > a::after { display: none; }

/* --------------------------------------------------------------------------
   14. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .e-con.e-con-boxed > .e-con-inner,
  .e-con { --container-max-width: 100%; }
}
@media (max-width: 767px) {
  .elementor-widget-heading h1 { font-size: clamp(28px, 7.4vw, 34px) !important; line-height: 1.14 !important; }
  .elementor-widget-heading h2 { font-size: clamp(24px, 6.2vw, 29px) !important; line-height: 1.16 !important; }
  .elementor-widget-heading h3 { font-size: 19px !important; }
  .elementor-widget-text-editor { font-size: 16px !important; }
  .elementor-counter .elementor-counter-number-wrapper { font-size: 2.2rem; }
  .elementor-widget-button .elementor-button { width: 100%; }
  .elementor-accordion .elementor-tab-title { padding: 17px 18px; font-size: 16px; }
  .elementor-accordion .elementor-tab-content { padding: 0 18px 19px; }
  .mx-panel { padding: 22px 18px; }
  .mx-step { padding-top: 22px; }
}

/* Process rail reads as a rail on desktop and a simple stack on mobile. */
@media (max-width: 767px) {
  .mx-step:before { width: 44px; left: 0; right: auto; }
}

/* --------------------------------------------------------------------------
   15. MOTION
   Dial is 0.2: restrained, and off entirely when the user asks for that.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}