/* ==========================================================================
   Elementor Free Layout Bridging System
   Norwest Communications Custom Theme Integration
   ========================================================================== */

/* 1. Reset Default Spacing Constraints on Widgets */
.elementor-widget:not(:last-child) {
  margin-bottom: 0 !important;
}

/* Ensure widgets inside grids or flex columns don't force full widths or extra margins */
.e-con.grid > .elementor-widget,
.e-con-full.grid > .elementor-widget,
.e-con.grid > .e-con,
.e-con-full.grid > .e-con {
  margin: 0 !important;
  width: auto !important;
}

/* Ensure Elementor's widget inner container expands fully to prevent styling constraints */
.elementor-widget-container {
  width: 100%;
  height: 100%;
}

/* Fix stats counter gaps on widgets */
body:not(.elementor-editor-active) .counter-item .elementor-widget {
  margin-bottom: 0 !important;
}


/* 2. Container Mapping (1280px / 1140px / 760px Width Logic) */
.e-con.container,
.e-con-full.container,
.e-con-inner.container {
  max-width: var(--container-wide) !important;
  margin-inline: auto !important;
  padding-inline: var(--container-pad) !important;
  width: 100% !important;
}

.e-con.container--default,
.e-con-full.container--default,
.e-con-inner.container--default {
  max-width: var(--container-default) !important;
  margin-inline: auto !important;
  padding-inline: var(--container-pad) !important;
  width: 100% !important;
}

.e-con.container--narrow,
.e-con-full.container--narrow,
.e-con-inner.container--narrow {
  max-width: var(--container-narrow) !important;
  margin-inline: auto !important;
  padding-inline: var(--container-pad) !important;
  width: 100% !important;
}


/* 3. Grid Utility Mapping to Elementor Containers */
.e-con.grid,
.e-con-full.grid,
.e-con-inner.grid {
  display: grid !important;
  gap: var(--space-md) !important;
}

.e-con.grid-2,
.e-con-full.grid-2,
.e-con-inner.grid-2 {
  grid-template-columns: repeat(2, 1fr) !important;
}

.e-con.grid-3,
.e-con-full.grid-3,
.e-con-inner.grid-3 {
  grid-template-columns: repeat(3, 1fr) !important;
}

.e-con.grid-auto-sm,
.e-con-full.grid-auto-sm,
.e-con-inner.grid-auto-sm {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
}

.e-con.grid-auto-md,
.e-con-full.grid-auto-md,
.e-con-inner.grid-auto-md {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
}


/* Responsive Grid Collapses */
@media (max-width: 1024px) {
  .e-con.grid-3,
  .e-con-full.grid-3,
  .e-con-inner.grid-3 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 768px) {
  .e-con.grid-3,
  .e-con-full.grid-3,
  .e-con-inner.grid-3,
  .e-con.grid-2,
  .e-con-full.grid-2,
  .e-con-inner.grid-2 {
    grid-template-columns: 1fr !important;
  }
}


/* 4. Flex Layout Utility Mapping */
.e-con.flex,
.e-con-full.flex,
.e-con-inner.flex {
  display: flex !important;
  gap: var(--space-sm) !important;
}

.e-con.flex--center,
.e-con-full.flex--center,
.e-con-inner.flex--center {
  align-items: center !important;
}

.e-con.flex--between,
.e-con-full.flex--between,
.e-con-inner.flex--between {
  justify-content: space-between !important;
}

.e-con.flex--wrap,
.e-con-full.flex--wrap,
.e-con-inner.flex--wrap {
  flex-wrap: wrap !important;
}


/* 5. Specific Component Page Section Mapping */

/* Hero Section */
.e-con.hero-container,
.e-con-full.hero-container {
  display: grid !important;
  grid-template-columns: 1.2fr 0.8fr !important;
  gap: var(--space-xl) !important;
  align-items: center !important;
  width: 100% !important;
}

.hero-container > .e-con,
.hero-container > .elementor-widget {
  width: auto !important;
  margin: 0 !important;
}

@media (max-width: 1024px) {
  .e-con.hero-container,
  .e-con-full.hero-container {
    grid-template-columns: 1fr !important;
    text-align: center !important;
  }
}

/* Stats Counter Grid */
.e-con.counters-grid,
.e-con-full.counters-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: var(--space-lg) !important;
  text-align: center !important;
}

@media (max-width: 768px) {
  .e-con.counters-grid,
  .e-con-full.counters-grid {
    grid-template-columns: 1fr !important;
    gap: var(--space-md) !important;
  }
}

/* 03 Steps Process Grid */
.e-con.process-grid,
.e-con-full.process-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: var(--space-lg) !important;
}

@media (max-width: 768px) {
  .e-con.process-grid,
  .e-con-full.process-grid {
    grid-template-columns: 1fr !important;
    gap: var(--space-md) !important;
  }
}

/* Services Matrix Grid */
.e-con.services-matrix-grid,
.e-con-full.services-matrix-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: var(--space-md) !important;
}

@media (max-width: 768px) {
  .e-con.services-matrix-grid,
  .e-con-full.services-matrix-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Testimonial Grid */
.e-con.premium-testimonial-grid,
.e-con-full.premium-testimonial-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: var(--space-md) !important;
}

@media (max-width: 1024px) {
  .e-con.premium-testimonial-grid,
  .e-con-full.premium-testimonial-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Stats Counter Section Overlay */
.e-con.hero-stats,
.e-con-full.hero-stats {
  position: relative !important;
  z-index: 3 !important;
  margin-top: -64px !important;
  margin-bottom: calc(-1 * var(--space-lg)) !important;
}

@media (max-width: 768px) {
  .e-con.hero-stats,
  .e-con-full.hero-stats {
    margin-top: -32px !important;
  }
}

/* Approach Headers (used in cards, services, why choose us) */
.e-con.approach-header,
.e-con-full.approach-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-end !important;
  margin-bottom: var(--space-xl) !important;
  flex-wrap: wrap !important;
  gap: var(--space-md) !important;
}

/* About Split Grid */
.e-con.about-split,
.e-con-full.about-split {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: var(--space-xl) !important;
  align-items: center !important;
  width: 100% !important;
}

@media (max-width: 1024px) {
  .e-con.about-split,
  .e-con-full.about-split {
    grid-template-columns: 1fr !important;
  }
}

/* Services Matrix Wrapper Grid */
.e-con.services-matrix,
.e-con-full.services-matrix {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: var(--space-lg) !important;
  align-items: center !important;
  width: 100% !important;
}

@media (max-width: 1024px) {
  .e-con.services-matrix,
  .e-con-full.services-matrix {
    grid-template-columns: 1fr !important;
  }
}

/* Subpage Hero Container */
.e-con.subpage-hero-container,
.e-con-full.subpage-hero-container {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--space-xs) !important;
  width: 100% !important;
}

/* Card Padding Preservation Overrides */
.e-con.approach-card,
.e-con-full.approach-card,
.approach-card {
  padding: var(--space-lg) !important;
}

.e-con.services-matrix-card,
.e-con-full.services-matrix-card,
.services-matrix-card {
  padding: var(--space-md) !important;
}

.e-con.process-card,
.e-con-full.process-card,
.process-card {
  padding: var(--space-lg) !important;
}

.e-con.premium-testimonial-card,
.e-con-full.premium-testimonial-card,
.premium-testimonial-card {
  padding: var(--space-lg) !important;
}


/* 6. Button Widget Double-Styling Fixes */
.elementor-widget-button.btn,
.elementor-widget-button.btn-primary,
.elementor-widget-button.btn-secondary,
.elementor-widget-button.btn-on-dark,
.elementor-widget-button.btn-ghost,
.elementor-widget-button.hero-btn-primary {
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  border: none !important;
  transform: none !important;
}

/* Generic Button Widget Bridge to inherit theme styling */
.elementor-widget-button .elementor-button {
  font-family: var(--font-display, inherit) !important;
  font-weight: 600 !important;
  border-radius: var(--radius-md, 10px) !important;
  padding: 14px 28px !important;
  transition: all var(--duration-fast, 0.2s) var(--ease-standard, ease) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}

.elementor-widget-button.btn-primary .elementor-button {
  background-color: var(--color-ochre-500) !important;
  color: var(--color-white) !important;
}

.elementor-widget-button.btn-primary .elementor-button:hover {
  background-color: var(--color-ochre-600) !important;
  transform: translateY(-2px) !important;
}

.elementor-widget-button.btn-secondary .elementor-button {
  background-color: transparent !important;
  border: 1px solid var(--color-navy-800) !important;
  color: var(--color-navy-800) !important;
}

.elementor-widget-button.btn-secondary .elementor-button:hover {
  background-color: var(--color-navy-800) !important;
  color: var(--color-white) !important;
  transform: translateY(-2px) !important;
}

/* Bridge theme .btn style properties onto the actual anchor tag of the Elementor Widget */
.elementor-widget-button.btn .elementor-button,
.elementor-widget-button.hero-btn-primary .elementor-button {
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  font-size: var(--text-sm) !important;
  line-height: 1 !important;
  border-radius: var(--radius-full) !important;
  padding: 0.9em 1.7em !important;
  border: 1.5px solid transparent !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5em !important;
  cursor: pointer !important;
  transition: transform var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-fast) var(--ease-standard),
              background-color var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard) !important;
}

.elementor-widget-button.btn-primary .elementor-button {
  background: var(--color-ochre-500) !important;
  color: var(--color-white) !important;
  box-shadow: var(--shadow-sm) !important;
}

.elementor-widget-button.btn-primary:hover .elementor-button,
.elementor-widget-button.btn-primary:focus-within .elementor-button {
  background: var(--color-ochre-600) !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--shadow-md) !important;
  color: var(--color-white) !important;
}

.elementor-widget-button.hero-btn-primary .elementor-button {
  background: var(--color-ochre-500) !important;
  color: var(--color-white) !important;
  font-weight: 700 !important;
  padding: 1.1em 2.2em !important;
  box-shadow: 0 8px 24px rgba(193, 85, 44, 0.4) !important;
  transition: transform var(--duration-fast) var(--ease-standard), background var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard) !important;
}

.elementor-widget-button.hero-btn-primary:hover .elementor-button {
  background: var(--color-ochre-600) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 12px 30px rgba(193, 85, 44, 0.5) !important;
  color: var(--color-white) !important;
}

.elementor-widget-button.btn-secondary .elementor-button {
  background: transparent !important;
  border-color: var(--color-navy-800) !important;
  color: var(--color-navy-800) !important;
}

.elementor-widget-button.btn-secondary:hover .elementor-button,
.elementor-widget-button.btn-secondary:focus-within .elementor-button {
  background: var(--color-navy-800) !important;
  color: var(--color-white) !important;
}

.elementor-widget-button.btn-on-dark .elementor-button {
  border-color: rgba(255, 255, 255, 0.6) !important;
  color: var(--color-white) !important;
}

.elementor-widget-button.btn-on-dark:hover .elementor-button,
.elementor-widget-button.btn-on-dark:focus-within .elementor-button {
  background: var(--color-white) !important;
  color: var(--color-navy-900) !important;
}

.elementor-widget-button.btn-sm .elementor-button {
  font-size: var(--text-xs) !important;
  padding: 0.65em 1.3em !important;
}


/* 7. Nested Accordion Expand Fixes */
.premium-faq-list .e-n-accordion-item.e-active > div {
  max-height: none !important;
  overflow: visible !important;
  padding: 0 var(--space-md) var(--space-md) var(--space-md) !important;
}

/* 9. Hero Background Video — Responsive Fill & Height
   Elementor hardcodes this section's height at 670px with no
   responsive override configured in the editor, and the loaded
   <video> has no explicit width/height, so on narrow screens the
   banner is disproportionately tall and the clip can crop oddly.
   Scale the height fluidly with viewport width instead of relying
   on fixed per-breakpoint steps, and guarantee the video itself
   always fills and covers its container edge-to-edge. */
.elementor-element-ba97bb9 {
  --min-height: clamp(240px, 48vw, 670px) !important;
}

.elementor-background-video-container {
  width: 100% !important;
  height: 100% !important;
}

.elementor-background-video-hosted {
  top: 50% !important;
  left: 50% !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  object-fit: cover !important;
  transform: translate(-50%, -50%) !important;
}

/* 10. Elementor Editor Active Resets */
.elementor-editor-active .reveal,
.elementor-editor-active .reveal-group > *,
.elementor-editor-active .reveal-group > .e-con-inner > *,
.elementor-editor-active .counter-item,
body.elementor-editor-active .reveal,
body.elementor-editor-active .reveal-group > *,
body.elementor-editor-active .reveal-group > .e-con-inner > *,
body.elementor-editor-active .counter-item {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  transition: none !important;
  transition-delay: 0s !important;
}


/* ==========================================================================
   11. Elementor Absolute-Position Widget Overflow Guard
   Elementor stores a fixed px `left` offset per breakpoint for widgets set
   to Position: Absolute in the Advanced tab. The "Automation" badge on the
   Electronic Parts & Accessories page has a mobile (≤767px) offset tuned
   against its own width but not against the narrowest phones (320–360px),
   so it overflows the right edge there. Anchor it from the right instead of
   the left so it can never push past the safe content edge, regardless of
   exact viewport width.
   ========================================================================== */

@media (max-width: 767px) {
  .elementor-element-f1ca400 {
    left: auto !important;
    right: var(--space-xs) !important;
  }
}


/* ==========================================================================
   12. Mobile Spacing & Layout Overrides
   ========================================================================== */

@media (max-width: 767px) {
  /* Reset layout stretching & vertical growing for stacked child containers to prevent vertical gaping */
  .e-con.e-child,
  .e-con-full.e-child {
    --container-widget-flex-grow: 0 !important;
    --container-widget-height: auto !important;
    --container-widget-align-self: auto !important;
    height: auto !important;
  }

  /* Reduce vertical gaping in collapsed split layouts (Cabling & Who We Are sections) */
  .e-con.about-split,
  .e-con-full.about-split,
  .e-con.services-matrix,
  .e-con-full.services-matrix {
    gap: var(--space-md) !important;
  }

  /* Manage gaps inside general containers */
  .e-con,
  .e-con-full,
  .e-con-inner {
    --gap: var(--space-md) !important;
    --row-gap: var(--space-md) !important;
    --column-gap: var(--space-md) !important;
  }

  /* Preserve component-specific horizontal gap for benefits list */
  .benefit {
    gap: var(--space-sm) !important;
  }
}