/* ==========================================================================
   Kodu Media — Shared content width aligned with Elementor header/footer
   Elementor kit container: 1280px (matches .e-con-inner max-width)
   ========================================================================== */

:root {
  --kodumedia-container-width: 1280px;
  --kodumedia-container-narrow: 1080px;
  --kodumedia-container-padding: 20px;
}

/* Remove theme/Elementor wrappers that squeeze custom templates */
.blog-archive-page #page,
.blog-single-page #page,
.service-landing-page #page,
.pricing-page #page,
.services-hub-page #page,
.blog-archive-page .site-content,
.blog-single-page .site-content,
.service-landing-page .site-content,
.pricing-page .site-content,
.services-hub-page .site-content,
.blog-archive-page #content,
.blog-single-page #content,
.service-landing-page #content,
.pricing-page #content,
.services-hub-page #content {
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.blog-archive-page #main.blog-page,
.blog-single-page #main.blog-page,
.service-landing-page #main.service-landing,
.pricing-page #main.pricing-page-main,
.services-hub-page #main.services-hub-main {
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

@media (min-width: 1025px) {
  .sl-container,
  .blog-container,
  .blog-container--article,
  .blog-container--narrow,
  .pricing-container,
  .pricing-container--narrow,
  .sh-container,
  .sh-container--narrow {
    max-width: var(--kodumedia-container-width);
    padding-left: 0;
    padding-right: 0;
  }

  .sl-container--narrow {
    max-width: var(--kodumedia-container-narrow);
  }

  .blog-container--narrow {
    max-width: var(--kodumedia-container-narrow);
  }
}

@media (max-width: 1024px) {
  .sl-container,
  .blog-container,
  .blog-container--article,
  .blog-container--narrow,
  .sl-container--narrow,
  .pricing-container,
  .pricing-container--narrow,
  .sh-container,
  .sh-container--narrow {
    max-width: 100%;
    padding-left: var(--kodumedia-container-padding);
    padding-right: var(--kodumedia-container-padding);
  }
}

@media (max-width: 480px) {
  .sl-container,
  .blog-container,
  .blog-container--article,
  .blog-container--narrow,
  .sl-container--narrow,
  .pricing-container,
  .pricing-container--narrow,
  .sh-container,
  .sh-container--narrow {
    padding-left: 16px;
    padding-right: 16px;
  }
}