/* Keep every page-level content section 10px from the viewport edges. */
:root {
  --okc-page-gutter: 24px;
}

.okc-container,
.okc-news-list .okc-container,
.okc-event-container,
.okc-ed-container,
.okc-business-container,
.okc-article-container,
.okc-events > .okc-container,
.okc-sections,
.okcp {
  padding-left: var(--okc-page-gutter) !important;
  padding-right: var(--okc-page-gutter) !important;
}

/* Do not add centered margins on wide screens; the gutter above is the only
   horizontal space these page-level content wrappers should have. */
.okc-news-list .okc-container,
.okc-event-container,
.okc-ed-container,
.okc-business-container,
.okc-article-container,
.okc-events > .okc-container {
  max-width: none !important;
  width: 100%;
}

/* Business details used a centered 1180px content cap, which made the apparent
   side gutter much larger than 24px on desktop displays. */
.okc-business-detail .okc-bd-container {
  box-sizing: border-box;
  max-width: none !important;
  width: 100% !important;
  padding-left: var(--okc-page-gutter);
  padding-right: var(--okc-page-gutter);
}

.okc-business-detail .okc-newsletter-contact .okc-sections__inner {
  max-width: none;
  width: 100%;
}

/* Standard WordPress pages and their top-level Elementor layout should use the
   same fixed page gutter instead of the theme's narrow centered content width. */
.page-template-default .okc-page-header .okc-container-narrow,
.page-template-default .okc-page-content-standard {
  box-sizing: border-box;
  max-width: none !important;
  width: 100%;
  padding-left: var(--okc-page-gutter) !important;
  padding-right: var(--okc-page-gutter) !important;
}

.page-template-default .okc-page-content-elementor > .elementor,
.page-template-default .okc-page-content-elementor > .elementor > .e-con,
.page-template-default .okc-page-content-elementor > .elementor > .elementor-section > .elementor-container {
  box-sizing: border-box;
  max-width: none !important;
  width: 100% !important;
}

.page-template-default .okc-page-content-elementor > .elementor > .elementor-section > .elementor-container {
  padding-left: var(--okc-page-gutter) !important;
  padding-right: var(--okc-page-gutter) !important;
}

/* The post newsletter is already inside .okc-article-container. Avoid applying
   the page gutter a second time to this nested section. */
.okc-article-page .okc-newsletter-contact {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Join the business promotion directly to the following newsletter section. */
.okc-business-list .okc-business-owner {
  margin-bottom: 0 !important;
}

/* These page shells use an inner wrapper instead of padding on the section. */
.okca-wrap {
  max-width: none !important;
  width: calc(100% - (2 * var(--okc-page-gutter)));
}

.elementor-element-okcabout .okc-journey {
  box-sizing: border-box;
  max-width: none !important;
  padding-left: var(--okc-page-gutter) !important;
  padding-right: var(--okc-page-gutter) !important;
}

@media (max-width: 780px) {
  .okc-not-found__inner {
    padding-inline: var(--okc-page-gutter) !important;
  }

  .okc-not-found__explore {
    margin-inline: var(--okc-page-gutter) !important;
  }
}

/* Keep the shared newsletter readable in every mobile page layout. */
@media (max-width: 767px) {
  .okc-sections.okc-newsletter-contact {
    width: 100%;
    min-width: 0;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .okc-article-page .okc-sections.okc-newsletter-contact {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .okc-newsletter-contact .okc-sections__inner {
    width: 100%;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 28px !important;
    padding: 32px 20px !important;
  }

  .okc-newsletter-contact .okc-newsletter__signup,
  .okc-newsletter-contact .okc-newsletter__community,
  .okc-newsletter-contact .okc-newsletter__contact {
    min-width: 0;
  }

  .okc-newsletter-contact .okc-newsletter__signup {
    padding: 0 !important;
  }

  .okc-newsletter-contact .okc-newsletter__community {
    border-left: 0;
    border-top: 1px solid #282828;
    padding: 28px 0 0 !important;
  }

  .okc-newsletter-contact h2 {
    font-size: clamp(26px, 7vw, 32px);
    line-height: 1.25;
  }

  .okc-newsletter-contact .okc-newsletter__form input[type="email"] {
    min-width: 0;
    width: 100%;
    flex-basis: 100%;
  }

  .okc-newsletter-contact .okc-newsletter__form button {
    width: 100%;
  }

  .okc-newsletter-contact .okc-newsletter__consent {
    align-items: flex-start;
  }
}