/* GGS HORIZONTAL OVERFLOW FIX V1
   Keeps the document inside the viewport on desktop and mobile while
   allowing content itself to wrap instead of expanding the whole page. */
html,
body{
  width:100%;
  max-width:100%;
  overflow-x:hidden!important;
}

body{position:relative}

/* Core public shell */
.site-header,
.site-nav,
.container,
.article-wrap,
.article,
.article-content,
.toc,
.footer,
.site-footer,
.feedback-section,
.product-widget,
.faq{
  min-width:0!important;
  max-width:100%!important;
  box-sizing:border-box!important;
}

/* A max-content brand can create page-wide horizontal overflow on narrow screens. */
.site-brand,
.site-brand-copy,
.site-nav-links,
.mobile-site-menu{
  min-width:0!important;
  max-width:100%!important;
}

/* Every direct article block must be allowed to shrink inside the article column. */
.article-content>*{
  min-width:0;
  max-width:100%;
  box-sizing:border-box;
}

.article-content,
.article-content p,
.article-content li,
.article-content h1,
.article-content h2,
.article-content h3,
.article-content h4,
.article-content a,
.feedback-section,
.feedback-section p,
.feedback-section a{
  overflow-wrap:anywhere;
  word-break:normal;
}

/* Media can never define the document width. */
.article-content img,
.article-content video,
.article-content iframe,
.article-content svg,
.article-content canvas,
.article-hero-img{
  max-width:100%!important;
  box-sizing:border-box!important;
}

.article-content video,
.article-content iframe{
  width:100%!important;
}

/* Tables should shrink/wrap rather than pushing the whole page sideways. */
.article-content table{
  width:100%!important;
  max-width:100%!important;
  table-layout:fixed;
}

.article-content th,
.article-content td{
  min-width:0!important;
  max-width:100%!important;
  overflow-wrap:anywhere;
  word-break:break-word;
}

/* Explicit table wrappers keep their own scroll when needed. */
.article-content .gg-table-wrap,
.article-content .table-responsive{
  width:100%!important;
  max-width:100%!important;
  overflow-x:auto!important;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
}

.article-content pre,
.article-content code{
  max-width:100%!important;
  overflow-x:auto;
  overflow-wrap:anywhere;
  white-space:pre-wrap;
}

/* Premium/custom article blocks introduced by newer articles. */
.gg-premium-page,
.gg-hero-wrap,
.gg-hero-copy,
.gg-grid2,
.gg-quote,
.gg-toc-card,
.gg-number-card,
.gg-wide-card,
.gg-benefits,
.gg-compare,
.gg-cta,
.gg-source-note{
  min-width:0!important;
  max-width:100%!important;
  box-sizing:border-box!important;
}

.gg-grid2>*,
.gg-benefits>*,
.gg-compare>*{
  min-width:0!important;
  max-width:100%!important;
}

/* Forms/comments must not enlarge the viewport. */
.feedback-section input,
.feedback-section select,
.feedback-section textarea,
.feedback-section button,
.feedback-comments-shell,
.feedback-comments-list,
.feedback-comment-main,
.feedback-comment-content,
.feedback-comment-replies,
.feedback-comment-reply,
.feedback-comment-reply-form{
  min-width:0!important;
  max-width:100%!important;
  box-sizing:border-box!important;
}

@media(max-width:760px){
  .container,
  .article-wrap{
    max-width:calc(100% - 24px)!important;
  }

  .article{
    width:100%!important;
  }

  .site-brand{
    max-width:calc(100% - 52px)!important;
  }

  .site-brand-copy{
    overflow:hidden;
  }

  .site-brand-copy strong,
  .site-brand-copy small{
    white-space:normal!important;
    overflow-wrap:anywhere;
  }

  .article-content ul,
  .article-content ol{
    padding-inline-start:24px!important;
    padding-inline-end:18px!important;
  }

  .article-content table{
    font-size:14px;
  }

  .article-content th,
  .article-content td{
    padding:9px!important;
  }
}
