/* Full-suite text containment and narrow-screen fit, 2026-08-15. */
/* Loaded after all design styles so local city overrides cannot reintroduce overflow. */

html,
body {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: auto;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Flex and grid items must be allowed to become narrower than their content. */
:where(
  header, main, footer, nav, section, article, aside, form, fieldset, details,
  .wrap, .content, .card, .nav, .menu, .two, .kpi, .cta,
  .contact-buttons, .service-actions, .home-section-actions,
  .final-footer-contact-actions, .callback-primary-contact
) {
  min-width: 0;
}

.nav > *,
.menu > *,
.grid > *,
[class*="-grid"] > *,
[class*="__grid"] > *,
[class*="-row"] > *,
[class*="__row"] > *,
.two > *,
.kpi > *,
.cta > *,
.contact-buttons > *,
.service-actions > *,
.home-section-actions > *,
.final-footer-contact-actions > *,
.callback-primary-contact > * {
  min-width: 0 !important;
}

/* Text may wrap at a natural word boundary, or inside a single long token as a fallback. */
:where(
  h1, h2, h3, h4, h5, h6,
  p, li, dt, dd, blockquote, figcaption, caption,
  th, td, label, legend, summary,
  a, button, strong, b, em, small, span
) {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: auto;
}

/* Form values, media and code must stay inside the available content width. */
:where(input, textarea, select, button, iframe, img, svg, video, canvas) {
  min-width: 0;
  max-width: 100%;
}

:where(pre, code, samp, kbd) {
  max-width: 100%;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Existing price tables remain usable by scrolling inside their own block. */
.table,
.table-responsive,
[class*="table-wrap"],
[class*="table-scroll"] {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table th,
.table td {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: normal;
}

/* Intrinsic-width labels and statuses are capped by their parent. */
:where(
  .hero-online-status, .callback-live-status, .callback-badge,
  .trust-kicker, .eyebrow, .pill, .badge, .tag,
  .master-meta, .service-meta, .final-footer-trust
) {
  min-width: 0;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* These controls previously had nowrap/fixed-min-width declarations in some city themes. */
html body :is(
  .btn, .smallBtn, .cta-oval-premium,
  .messenger-button, .site-contact-button, .final-footer-contact-btn,
  .home-action-primary, .home-action-secondary,
  .service-final-write, .service-final-more, .service-write-button,
  .price-contact-button, .blog-read-more,
  .services-help-link, .services-search-reset, .services-empty-reset,
  .mobile-sticky-cta__btn,
  .gde-catalog-link, .gde-address-jump, .gde-premium-textlink,
  .premium-action-link, .premium-oval-btn
):not(#site-text-overflow-guard) {
  min-width: 0 !important;
  max-width: 100% !important;
  height: auto !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
}

html body :is(
  .btn, .smallBtn, .cta-oval-premium,
  .messenger-button, .site-contact-button, .final-footer-contact-btn,
  .home-action-primary, .home-action-secondary,
  .service-final-write, .service-final-more,
  .mobile-sticky-cta__btn
):not(#site-text-overflow-guard) > :where(span, strong, small, b) {
  min-width: 0 !important;
  max-width: 100% !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

/* Fixed and sticky contact controls must never be wider than the viewport. */
:where(.floating-contact-buttons, .mobile-sticky-cta) {
  max-width: calc(100vw - 24px);
}

:where(.floating-contact-button, .mobile-sticky-cta__btn) {
  min-width: 0 !important;
  max-width: calc(100vw - 24px) !important;
}

@media (max-width: 760px) {
  /* On narrow screens every interactive label may wrap instead of leaving its box. */
  html body :is(a, button, summary):not(#site-text-overflow-guard) {
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }

  html body :is(a, button, summary):not(#site-text-overflow-guard) > :where(span, strong, small, b) {
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }
}

@media (max-width: 560px) {
  /* Content grids become one column before their fixed card minima can collide. */
  html body .grid:not(#site-text-overflow-guard),
  html body [class*="-grid"]:not(#site-text-overflow-guard),
  html body [class*="__grid"]:not(#site-text-overflow-guard) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  :where(.wrap, .content, .card, .notice, .callback-card, .final-footer-col) {
    min-width: 0;
    max-width: 100%;
  }
}

/* Width containment hardening, 2026-08-20. */
/* Keeps long localized text, URLs and intrinsic-width UI inside the main content blocks. */
:where(
  .wrap, .content, .section, .hero, .hero .wrap,
  .breadcrumbs, .links, .tagcloud,
  .callback-card, .callback-copy, .callback-form,
  .trust-head, .trust-compare, .trust-column,
  .final-footer-grid, .final-footer-col, .final-footer-bottom,
  .blog-context-links, .blog-context-links div
) {
  min-width: 0;
  max-width: 100%;
}

/* Intrinsic width badges/statuses can shrink instead of forcing their parent wider. */
html body :is(
  .hero-online-status, .callback-live-status, .callback-badge,
  .trust-kicker, .eyebrow, .pill, .badge, .tag,
  .final-footer-trust span
) {
  width: fit-content;
  max-width: 100% !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

/* Long navigation/breadcrumb/footer labels and generated locality names. */
html body :is(
  .breadcrumbs, .breadcrumbs a,
  .links, .links a,
  .tagcloud, .tagcloud a,
  .final-footer-col, .final-footer-col a,
  .blog-context-links, .blog-context-links a,
  .card, .card a, .card p, .card li,
  .notice, .notice a
) {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: normal;
}

/* Bare tables also stay within the article/card. They may scroll locally if needed. */
html body table:not(#site-text-overflow-guard) {
  max-width: 100% !important;
}

@media (max-width: 760px) {
  html body table:not(#site-text-overflow-guard) {
    display: block;
    width: 100% !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  html body :is(th, td, caption) {
    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }

  /* Prevent fixed/intrinsic minima from winning over the available content width. */
  html body :is(
    .callback-card, .trust-compare, .final-footer-grid,
    .blog-top-contact-actions, .contact-buttons,
    .messenger-glass-row, .callback-primary-contact
  ) > * {
    min-width: 0 !important;
    max-width: 100% !important;
  }
}

@media (max-width: 420px) {
  /* Very narrow devices: allow long action labels and locality names to break safely. */
  html body :is(
    .phone, .header-phone-compact,
    .blog-context-links a, .pill, .badge, .tag,
    .breadcrumbs a, .final-footer-col a
  ) {
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
  }
}



/* Main-grid containment fix, 2026-08-20.
   Some final local SEO blocks are direct children of <main> rather than .wrap.
   Keep them aligned to the same 1160px content grid as the rest of the page. */
main:not(.wrap) > .seo-final-local {
  width: 100%;
  max-width: 1160px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 18px;
  padding-right: 18px;
}

main:not(.wrap) > .seo-final-local > :where(h1,h2,h3,h4,p,ul,ol,.seo-final-links) {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}

main:not(.wrap) > .seo-final-local .seo-final-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
}

main:not(.wrap) > .seo-final-local .seo-final-links > a {
  min-width: 0;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}

@media (max-width: 760px) {
  main:not(.wrap) > .seo-final-local {
    padding-left: 16px;
    padding-right: 16px;
  }
}

@media (max-width: 420px) {
  main:not(.wrap) > .seo-final-local {
    padding-left: 13px;
    padding-right: 13px;
  }
}