/*
  Responsive fixes layered on top of the original Webflow CSS.
  Loaded after bobbyswaffles.webflow.css so these win. Keep fixes here
  rather than editing the exported Webflow file.
*/

/* Buttons: never wrap "Request a Quote" onto two lines inside the fixed-height pill */
.waves---nav-cta,
.button-3 {
  white-space: nowrap;
}

/* Footer: logo on its own row, links evenly spaced (no gaps left by the old grid slots) */
.footer ._12-column-grid.footer-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  row-gap: 3rem;
  column-gap: 2rem;
}
.footer ._12-column-grid.footer-grid > .brand-footer {
  flex: 0 0 100%;
}
.footer .container {
  min-height: 0;
}

/* ---------- Tablet and below ---------- */
@media screen and (max-width: 991px) {
  /* Plain h2 headings were sized off screen width and got huge on tablets */
  h2 {
    font-size: clamp(2rem, 6vw, 3.25rem);
    line-height: 1.1;
  }

  /* Darker overlay so white hero text stays readable over the photos */
  .hero-image-overlay {
    background-color: #080e2466;
  }
  .hero-inner-section.main::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: #0000004d;
    pointer-events: none;
  }

  /* State page hero headline was sized off screen width and shrank on tablets */
  .hero-inner-section.main .heading-4 {
    font-size: clamp(2.5rem, 6.5vw, 3.75rem);
    line-height: 1.05;
  }

  /* Big serif line in the signature waffle box */
  .waves---heading-3-no-margins.script {
    font-size: clamp(2.25rem, 6vw, 3.5rem);
    line-height: 1.1;
  }
}

/* ---------- Tablet only ---------- */
@media screen and (min-width: 480px) and (max-width: 991px) {
  /* Menu: 2 roomy columns instead of 3 cramped ones */
  .w-layout-grid.waves-grid-features-2.menu {
    grid-template-columns: 1fr 1fr;
    column-gap: 2rem;
  }
  .waves-grid-features-2.menu .waves---heading-3-no-margins-3 {
    font-size: 1.75rem;
    line-height: 1.15;
  }

  /* Merch heading: use the full row instead of half of it */
  .container.shop .intro-grid > .section-heading-container.shop {
    grid-column: 1 / span 4 !important;
    justify-self: stretch !important;
    width: 100% !important;
  }

  /* Home: "Select Your State" label matches the state links below it */
  .hero-section .nav-menu .heading-3 {
    font-size: 2rem;
  }

  /* Team: one column so the photo isn't squeezed into a thumbnail */
  .w-layout-grid.team-grid {
    grid-template-columns: 1fr;
  }
  .w-layout-grid.team-grid > * {
    grid-column: 1 / -1 !important;
  }
  .team-grid .team-member-image-wrapper {
    max-width: 460px;
  }

  /* Third feature card ("About Our Team") spans the row instead of sitting alone at half width */
  .w-layout-grid.waves-grid-features-1 > :nth-child(3) {
    grid-column: 1 / -1 !important;
  }
}

/* ---------- Phone ---------- */
@media screen and (max-width: 767px) {
  .footer ._12-column-grid.footer-grid {
    flex-direction: column;
    justify-content: center;
    row-gap: 1.5rem;
  }

  /* Slider: show one full photo at a time instead of a cut-off sliver of the next */
  .mask {
    width: 100%;
  }

  /* Team bio paragraph was set in heavy display type */
  .team-grid .testimonial-text {
    font-size: 1.0625rem;
    font-weight: 500;
    line-height: 1.55;
  }
}

@media screen and (max-width: 479px) {
  /* Home: logo first, state picker underneath (was the other way around) */
  .hero-section .hero-content-wrapper {
    align-items: flex-start;
    padding-top: 2rem;
    padding-bottom: 0;
  }
  .hero-section .navbar {
    padding-top: 8.5rem;
  }
}