/* Stops the homepage from scrolling sideways.
   Three things made the page wider than the window:
   - the sections (.inner) are flex items whose automatic minimum size is their
     content width, so they grew past the window instead of shrinking; the fixed
     navigation is laid out against that widened viewport, which pushed its links
     off-screen on phones
   - the two Menu buttons are 300px each with a 34px gap in a row that cannot wrap
   - the four contact links sat in one row with 50px margins on either side
   The caps below keep the existing desktop sizes (sections still stop at 1220px,
   slider art at 800px); the wrapping rules apply to small screens only. */

.container { min-width: 0; }
.inner { min-width: 0; max-width: min(1220px, 100%); }
/* Testimonials: shrink to the section rather than to the width of the quote. */
.slider { min-width: 0; max-width: 100%; }
/* Weekday banner: keep its designed 800px, shrink below that, one slide at a time.
   Without the cap the window grows past the slide and the next banner bleeds in. */
.slider-2 { min-width: 0; max-width: min(800px, 100%); margin-left: auto; margin-right: auto; }
.slider-2 .w-slide { width: 100%; }

/* The two dispensary cards sit side by side, and their headings and addresses
   are different lengths. The cards already stretch to the same height, so let
   the white panel fill whatever the heading leaves and pin the map to the
   bottom: the panels and maps then line up whatever the text does. */
@media screen and (min-width: 768px) {
  .blocks-container > .div-block-22 { display: flex; flex-direction: column; }
  .blocks-container > .div-block-22 > .div-block-25 { display: flex; flex-direction: column; flex: 1 1 auto; }
  .blocks-container > .div-block-22 > .div-block-25 > .div-block-27 { margin-top: auto; }
}
@media screen and (min-width: 1301px) {
  /* Above 1300px the cards are a fixed 365px, where the Tulsa heading needs four
     lines and the shorter OKC heading three. Four lines keeps both panels level. */
  .blocks-container > .div-block-22 > .heading-9 { min-height: 5em; }
}

/* Items that should be centered but sat off-center, because the Webflow styles
   give them a margin on one side only. Vertical margins are left alone. */
.heading-10-copy { margin-left: 0; margin-right: 0; }          /* Social sub-headings: was 17px / 1px */
.link-block-4 { margin-left: 0; }                              /* Instagram icons: was 40px */
.hero-visit.purple { margin-left: 20px; margin-right: 20px; }  /* hero buttons: was 0 / 20px */

@media screen and (max-width: 479px) {
  /* Stacked hero buttons: the side margins only shifted them off-center. */
  .hero-visit, .hero-visit.purple { margin-left: 0; margin-right: 0; }
}

@media screen and (max-width: 991px) {
  /* The Menu buttons wrap and share the available width. */
  .div-block-32 { flex-wrap: wrap; gap: 16px; }
  .div-block-32 .button, .div-block-32 .button-2 {
    width: 100%;
    max-width: 300px;
    margin-left: 0;
    margin-right: 0;
  }

  /* The contact links wrap instead of forcing one wide row. */
  .container.mint { flex-wrap: wrap; gap: 10px 28px; padding: 22px 20px; }
  .container.mint .link { margin-left: 0; margin-right: 0; text-align: center; }
}