/* Rayne-Lab mobile viewport guard v1
 * Purpose: keep the page inside the visual viewport on phones.
 * Horizontal movement is allowed only inside components that explicitly opt in.
 */

html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}

@supports not (overflow: clip) {
  html,
  body {
    overflow-x: hidden;
  }
}

body {
  position: relative;
}

.site-header,
.header-inner,
.site-main,
.site-footer,
.footer-inner,
.page-head,
.article-shell,
.article-body,
.home-hero,
.home-section,
.hub-section,
.subcategory-grid,
.category-list {
  max-width: 100%;
  min-width: 0;
}

img,
video,
canvas,
iframe,
svg {
  max-width: 100%;
}

.article-body,
.article-body p,
.article-body li,
.article-body a,
.page-lead,
.subcategory-desc,
.list-title {
  overflow-wrap: anywhere;
  word-break: normal;
}

/* The off-canvas menu must never expand the document's scrollable width. */
.site-menu-panel {
  max-width: 100vw;
  overflow-x: hidden;
}

body.site-menu-open {
  overflow-x: clip;
}

@supports not (overflow: clip) {
  body.site-menu-open {
    overflow-x: hidden;
  }
}

/* Keep both fixed header controls inside the phone viewport. */
@media (max-width: 680px) {
  .site-menu-toggle {
    right: max(16px, env(safe-area-inset-right, 0px));
  }

  .site-account-icon {
    right: calc(max(16px, env(safe-area-inset-right, 0px)) + 50px);
  }

  .site-search-icon {
    right: calc(max(16px, env(safe-area-inset-right, 0px)) + 100px);
  }

  .header-inner,
  .site-main,
  .footer-inner {
    width: calc(100% - 28px);
    max-width: calc(100% - 28px);
  }
}