/* ---------------------------------------------------------------------------
   cuapartheiddivest.org - self-hosted rebuild
   Responsive fixes and hardening.

   The site's original Squarespace stylesheets (site.css / static.css) were
   mirrored intact, so the real responsive layout - breakpoints, the mobile
   header, the fluid-engine grid - already works on every page. What follows is
   deliberately narrow: one genuine mobile bug, plus guards so nothing else can
   force a horizontal scrollbar. No spacing, colour or typography is overridden.
   --------------------------------------------------------------------------- */

/* --- Mobile: oversized call-to-action buttons -------------------------------
   Squarespace sizes button blocks with a fixed horizontal padding (~110px per
   side on the "OUR DEMANDS" button). That padding does not scale down, so on a
   narrow phone the button became wider than the viewport. Because the fixed
   header is sized against the resulting document width, the whole header grew
   with it and pushed the hamburger menu button off the right edge - leaving the
   site unnavigable on a phone.

   Capping the width and letting the padding scale with the viewport keeps the
   button's proportions on larger screens while making it fit on small ones. */
@media screen and (max-width: 767px) {
  .sqs-block-button-container {
    max-width: 100%;
  }

  .sqs-block-button-element {
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Squarespace sets this padding through `#siteWrapper.site-wrapper ...`, so
     the override has to carry the same id specificity to win.
     `min(original, 11vw)` only ever shrinks a button that is too wide - the
     smaller secondary buttons already fit and keep their original padding -
     and the `max(1.25rem, ...)` floor stops the label from touching the edge. */
  #siteWrapper.site-wrapper .sqs-button-element--primary,
  #siteWrapper.site-wrapper .sqs-button-element--secondary,
  #siteWrapper.site-wrapper .sqs-button-element--tertiary {
    padding-left: max(1.25rem, min(var(--primary-button-padding-x, 110px), 11vw));
    padding-right: max(1.25rem, min(var(--primary-button-padding-x, 110px), 11vw));
  }
}

/* --- Guards ---------------------------------------------------------------- */

/* Embeds (Instagram, Google Docs, video) stay inside their column. */
iframe,
embed,
object,
video {
  max-width: 100%;
}

/* A long unbroken string - a pasted URL, a hashtag - wraps rather than widening
   the page. Scoped to text content, so image and grid blocks keep their sizing. */
.sqs-block-content p,
.sqs-block-content li,
.sqs-block-content h1,
.sqs-block-content h2,
.sqs-block-content h3,
.sqs-block-content h4,
.sqs-block-content blockquote {
  overflow-wrap: break-word;
}

/* Wide tables scroll within their own block instead of stretching the layout. */
.sqs-block-content table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}

/* The mobile nav's folder drawer is parked one screen-width to the right while
   closed. Clipping it there keeps it out of the document's scroll extent; the
   drawer is unclipped as soon as the menu opens, so the slide-in is unaffected. */
@media only screen and (pointer: coarse) and (max-width: 1024px),
       screen and (max-width: 799px) {
  body:not(.header--menu-open) .header-menu {
    overflow: hidden;
  }
}

/* Respect a reduced-motion preference for the marquee and header animations. */
@media (prefers-reduced-motion: reduce) {
  .Marquee-display,
  .header-menu,
  .header-menu-nav-folder {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}