/* Phone gutters: the same side spacing as the app on phones (1rem page padding + 0.75rem inner
   padding = 1.75rem). Loaded last on every page, so it overrides the per-section paddings, margins
   and vw widths that the section stylesheets set at their own breakpoints. */

:root {
  --site-gutter: 1.75rem;
}

@media (max-width: 768px) {
  /* Sections own the gutter */
  .banner-group,
  .differentiator-praxxi-different-group,
  .YourJourney-section,
  .RWI-impact-group,
  .about-group-section,
  .contact-us-footer,
  .blog-main > section,
  .blog-main > article {
    padding-left: var(--site-gutter) !important;
    padding-right: var(--site-gutter) !important;
    box-sizing: border-box;
  }

  /* Header: logo/menu on the left gutter, login button on the right gutter */
  .navigation-wrapper {
    width: 100%;
    padding-left: var(--site-gutter);
    padding-right: var(--site-gutter);
  }

  .navigation-container {
    margin-left: 0;
  }

  /* About: the desktop column widths and paddings become full width */
  .about-group-container {
    padding-right: 0;
  }

  .about-group-main-heading,
  .about-group-subheading,
  .about-group-diagram-content,
  .about-group-content-divider {
    width: 100%;
    margin-left: 0;
    padding-left: 0;
    padding-right: 0;
  }

  .about-group-section-left-box {
    max-width: 100%;
  }

  /* Contact form */
  .contact-us-main-content {
    padding-left: var(--site-gutter);
    padding-right: var(--site-gutter);
  }

  .contact-us-join-heading,
  .contact-us-contact-form {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* leaves room for the decorative logo at the top right */
  .contact-us-join-heading {
    padding-right: 80px;
  }

  /* Blog: no extra page margin; content fits the width between the gutters */
  .blog-main {
    margin-left: 0;
    margin-right: 0;
  }

  .blog-grid-container {
    grid-template-columns: minmax(0, 1fr);
  }

  .blog-filters-container {
    flex-wrap: wrap;
    gap: 16px;
  }

  .blog-newsletter-input,
  .blog-search-input {
    min-width: 0;
  }
}

@media (max-width: 480px) {
  /* Hamburger on the left gutter, logo 12px after it */
  .hamburger-menu {
    left: var(--site-gutter);
  }

  .company-logo {
    margin-left: 37px;
  }
}