/*
 * Responsive corrections shared by the current and legacy templates.
 * Keep these rules narrowly scoped so desktop layouts remain unchanged.
 */

/* Match the full-width mobile menu content to the active site container. */
@media (max-width: 575px) {
  #nav .first-tier-mobile-menu {
    padding-left: 15px;
    padding-right: 15px;
  }
}

@media (min-width: 576px) and (max-width: 767px) {
  #nav .first-tier-mobile-menu {
    /* The header container remains full width in this range. */
    padding-left: 15px;
    padding-right: 15px;
  }
}

@media (min-width: 768px) and (max-width: 1199px) {
  #nav .first-tier-mobile-menu {
    padding-left: max(15px, calc((100vw - 920px) / 2 + 15px));
    padding-right: max(15px, calc((100vw - 920px) / 2 + 15px));
  }
}

@media (min-width: 1200px) and (max-width: 1459px) and (pointer: coarse) {
  #nav .first-tier-mobile-menu {
    padding-left: max(15px, calc((100vw - 1140px) / 2 + 15px));
    padding-right: max(15px, calc((100vw - 1140px) / 2 + 15px));
  }
}

@media (min-width: 1460px) and (pointer: coarse) {
  #nav .first-tier-mobile-menu {
    padding-left: max(15px, calc((100vw - 1400px) / 2 + 15px));
    padding-right: max(15px, calc((100vw - 1400px) / 2 + 15px));
  }
}

/* Keep the stream brochure useful at tablet widths without making it page-sized. */
@media (min-width: 576px) and (max-width: 1199px) {
  body.page-template-stream-landing-page .stream-intro-layout .stream-brochure {
    flex: 0 0 320px;
    margin-left: 0;
    max-width: 320px;
  }

  body.page-template-stream-landing-page .stream-intro-layout .stream-intro-aside {
    flex: 1 1 0;
    max-width: none;
    min-width: 0;
  }
}

/* Legacy download images were rendered at their intrinsic desktop width. */
body.single-article .single-download-img img,
body.single-presentation .single-download-img img,
body.single-book_brochure .single-download-img img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
}

/* Reflow legacy multi-column templates in iPad portrait instead of squeezing
 * their desktop columns into the narrower viewport. */
@media (min-width: 631px) and (max-width: 820px) {
  body.page-template-page-4-col .main-content-area,
  body.page-template-hype_office-php .country-content-wrapper,
  body.page-template-hype_office-php .office-tab-container,
  body.page-template-hype_projects-level-1-php .building-projects-left-col,
  body.page-template-hype_projects-level-1-php .middle-row,
  body.page-template-hype_projects-level-1-php .projects-level-one-layout > [class*="col-"],
  body.single-project .project-title,
  body.single-project .project-title + .middle-row,
  body.single-project .project-title + .middle-row + [class*="col-"] {
    float: none;
    flex: 0 0 100%;
    margin-left: 0;
    max-width: 100%;
    width: 100% !important;
  }

  body.page-template-hype_office-php .office-tab-container,
  body.page-template-hype_projects-level-1-php .middle-row,
  body.single-project .project-title + .middle-row,
  body.single-project .project-title + .middle-row + [class*="col-"] {
    margin-top: 30px;
  }
}