/* McCann responsive audit fixes
   Scope: tablet and mobile only. Keeps original desktop design, ACF architecture, assets and template markup untouched. */

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

img,
iframe,
video,
embed,
object {
  max-width: 100%;
}

iframe {
  border: 0;
}

/* Shared page containers */
.pagewrap,
.narrowwrap,
.mccann-page-wrap,
.mccann-about-wrap,
.mccann-contact-wrap,
.team-page-wrap,
.mccann-news-wrap,
.mccann-single-news-wrap,
.sustainability-wrap,
.sector-filter-wrap {
  box-sizing: border-box;
}

@media screen and (max-width: 1180px) {

  .pagewrap,
  .mccann-page-wrap,
  .mccann-about-wrap,
  .mccann-contact-wrap,
  .team-page-wrap,
  .mccann-news-wrap,
  .mccann-single-news-wrap {
    width: auto !important;
    max-width: calc(100% - 56px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .narrowwrap {
    width: auto !important;
    max-width: 760px !important;
  }
}

/* Header / navigation */
@media screen and (min-width: 901px) and (max-width: 1230px) {

  .header,
  body:not(.home) .header,
  body.home .header.fixed {
    min-height: 92px !important;
    height: 92px !important;
  }

  .header .pagewrap,
  body:not(.home) .header .pagewrap,
  body.home .header .pagewrap {
    min-height: 92px !important;
    height: 92px !important;
    max-width: calc(100% - 48px) !important;
    position: relative !important;
  }

  .header .logo_small,
  .header .logo_large,
  body:not(.home) .logo_small,
  body:not(.home) .logo_large {
    display: block !important;
    position: absolute !important;
    left: 0 !important;
    top: 24px !important;
    width: 132px !important;
    height: auto !important;
    z-index: 100001 !important;
  }

  .header .logo_small img,
  .header .logo_large img,
  .header img.logo {
    width: 132px !important;
    max-width: 132px !important;
    height: auto !important;
  }

  .header .hamburger_menu,
  body:not(.home) .hamburger_menu,
  body.home .hamburger_menu {
    display: block !important;
    position: fixed !important;
    right: 18px !important;
    top: 24px !important;
    z-index: 100005 !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
    min-width: 48px !important;
    min-height: 48px !important;
    padding: 10px 12px !important;
    color: #13357a !important;
  }

  body.home .header:not(.smaller) .hamburger_menu {
    color: #fff !important;
  }

  .header .searchbox,
  body:not(.home) .searchbox,
  body.home .searchbox {
    position: absolute !important;
    top: 28px !important;
    right: 58px !important;
    width: 230px !important;
    max-width: calc(100% - 220px) !important;
    z-index: 20 !important;
  }

  .header .searchinput {
    width: 180px !important;
    max-width: 100% !important;
  }

  .header .nav_container,
  body:not(.home) .header .nav_container,
  body.home .header .nav_container,
  html body.home .header.smaller .nav_container,
  html body.front-page .header.smaller .nav_container {
    display: none !important;
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100vh !important;
    max-height: 100vh !important;
    padding: 100px 34px 42px !important;
    background: #13357a !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    z-index: 99998 !important;
  }

  .header .nav_container.on,
  body:not(.home) .header .nav_container.on,
  body.home .header .nav_container.on,
  html body.home .header.smaller .nav_container.on,
  html body.front-page .header.smaller .nav_container.on {
    display: block !important;
  }

  .header .nav_container.on .main_nav,
  .header .nav_container.on .main_nav>li {
    display: block !important;
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
  }

  .header .nav_container.on .main_nav>li>a {
    display: block !important;
    color: #fff !important;
    font-size: 20px !important;
    line-height: 1.35 !important;
    padding: 13px 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, .14) !important;
    white-space: normal !important;
  }
}

@media screen and (max-width: 900px) {

  .header,
  body:not(.home) .header,
  body.home .header.fixed,
  body.home .header.smaller {
    min-height: 78px !important;
    height: 78px !important;
  }

  .header .pagewrap,
  body:not(.home) .header .pagewrap,
  body.home .header .pagewrap,
  html body.home .header.smaller .pagewrap,
  html body.front-page .header.smaller .pagewrap {
    max-width: calc(100% - 34px) !important;
    min-height: 78px !important;
    height: 78px !important;
    position: relative !important;
  }

  .header .logo_small,
  .header .logo_large,
  body:not(.home) .logo_small,
  body:not(.home) .logo_large,
  html body.home .header.smaller .logo_small,
  html body.front-page .header.smaller .logo_small {
    display: block !important;
    position: absolute !important;
    left: 0 !important;
    top: 22px !important;
    width: 116px !important;
    height: auto !important;
    z-index: 100001 !important;
  }

  .header .logo_small img,
  .header .logo_large img,
  .header img.logo,
  html body.home .header.smaller .logo_small img,
  html body.front-page .header.smaller .logo_small img {
    width: 116px !important;
    max-width: 116px !important;
    height: auto !important;
  }

  .header .hamburger_menu,
  body:not(.home) .hamburger_menu,
  body.home .hamburger_menu {
    display: block !important;
    position: absolute !important;
    right: 0 !important;
    top: 23px !important;
    z-index: 100005 !important;
    color: #13357a !important;
    pointer-events: auto !important;
  }

  body.home .header:not(.smaller) .hamburger_menu {
    color: #fff !important;
  }

  .header .searchbox,
  body:not(.home) .searchbox,
  body.home .searchbox,
  html body.home .header.smaller .searchbox,
  html body.front-page .header.smaller .searchbox {
    display: none !important;
  }

  .header .nav_container,
  body:not(.home) .header .nav_container,
  body.home .header .nav_container,
  html body.home .header.smaller .nav_container,
  html body.front-page .header.smaller .nav_container {
    display: none !important;
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100vh !important;
    max-height: 100vh !important;
    padding: 88px 24px 36px !important;
    background: #13357a !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    z-index: 99998 !important;
  }

  .header .nav_container.on,
  body:not(.home) .header .nav_container.on,
  body.home .header .nav_container.on,
  html body.home .header.smaller .nav_container.on,
  html body.front-page .header.smaller .nav_container.on {
    display: block !important;
  }

  .header .nav_container.on .main_nav,
  .header .nav_container.on .main_nav>li {
    display: block !important;
    float: none !important;
    width: 100% !important;
  }

  .header .nav_container.on .main_nav>li>a {
    display: block !important;
    color: #fff !important;
    font-size: 18px !important;
    line-height: 1.35 !important;
    padding: 12px 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, .14) !important;
    white-space: normal !important;
  }

  .header .nav_container.on .main_nav>li>.sub-menu {
    display: block !important;
    position: static !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    padding: 4px 0 6px 15px !important;
    background: rgba(255, 255, 255, .08) !important;
    box-shadow: none !important;
  }

  .header .nav_container.on .main_nav>li>.sub-menu>li>a {
    color: #fff !important;
    font-size: 15px !important;
    padding: 9px 0 !important;
  }

  .active_search .pagewrap {
    max-width: calc(100% - 34px) !important;
  }
}

/* Home */
@media screen and (max-width: 1180px) {

  .banner,
  .banner_container,
  .banner_container .slide {
    min-height: 620px !important;
    height: 620px !important;
  }

  .banner_container .slide img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  .banner .caption {
    max-width: 620px !important;
    left: auto !important;
  }

  .blueimgbg .icon_wrapper {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 1px !important;
  }

  .blueimgbg .featurebox {
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 210px !important;
  }
}

@media screen and (max-width: 900px) {

  .banner,
  .banner_container,
  .banner_container .slide {
    min-height: 560px !important;
    height: 560px !important;
  }

  .banner .pagewrap {
    max-width: calc(100% - 34px) !important;
  }

  .banner .caption {
    width: auto !important;
    max-width: 90% !important;
    bottom: 70px !important;
  }

  .banner .caption h1 {
    font-size: 38px !important;
    line-height: 1.12 !important;
  }

  .blueimgbg {
    padding: 48px 0 !important;
  }

  .blueimgbg .icon_wrapper,
  .mccann-services-grid.icon_wrapper {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .blueimgbg .featurebox,
  .mccann-services-grid .featurebox {
    min-height: 190px !important;
    padding: 28px 18px !important;
  }

  .narrowwrap h1,
  .mccann-page-heading h1,
  .mccann-contact-title,
  .mccann-news-title,
  .team-title,
  .mccann-about-main h1 {
    font-size: 32px !important;
    line-height: 1.2 !important;
  }
}

@media screen and (max-width: 620px) {

  .banner,
  .banner_container,
  .banner_container .slide {
    min-height: 500px !important;
    height: 500px !important;
  }

  .banner .caption h1 {
    font-size: 30px !important;
  }

  .blueimgbg .icon_wrapper,
  .mccann-services-grid.icon_wrapper {
    grid-template-columns: 1fr !important;
  }

  .blueimgbg .featurebox,
  .mccann-services-grid .featurebox {
    min-height: 160px !important;
  }
}

/* About */
@media screen and (max-width: 1024px) {
  .mccann-about-main {
    padding-left: 0 !important;
    display: block !important;
  }

  .mccann-about-hero-img {
    width: 100% !important;
    height: auto !important;
    margin: 18px 0 28px !important;
    float: none !important;
    display: block !important;
  }

  .mccann-about-copy {
    width: 100% !important;
    max-width: none !important;
  }

  .mccann-about-logos {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 22px !important;
    align-items: center !important;
  }
}

@media screen and (max-width: 620px) {
  .mccann-about-logos {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Services */
@media screen and (max-width: 1180px) {
  .mccann-services-page {
    padding-top: 128px !important;
  }

  .mccann-services-page .pagewrap {
    width: auto !important;
    max-width: calc(100% - 56px) !important;
  }
}

@media screen and (max-width: 900px) {
  .mccann-services-page {
    padding-top: 110px !important;
    padding-bottom: 48px !important;
    min-height: 0 !important;
  }

  .mccann-page-heading {
    margin-bottom: 30px !important;
  }
}

/* Team */
@media screen and (max-width: 1180px) {
  .team-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 24px !important;
  }

  .team-card {
    width: auto !important;
    max-width: none !important;
  }

  .team-card img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
  }
}

@media screen and (max-width: 900px) {
  .team-page-section {
    padding-top: 110px !important;
  }

  .team-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .team-intro {
    width: 100% !important;
    max-width: none !important;
  }
}

@media screen and (max-width: 560px) {
  .team-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Contact */
@media screen and (max-width: 1024px) {

  .mccann-contact-offices,
  html body.page-template-page-contact .mccann-contact-offices,
  html body.page-template-page-contact-php .mccann-contact-offices {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    width: auto !important;
    max-width: 100% !important;
    gap: 28px !important;
  }

  .mccann-map-card iframe {
    width: 100% !important;
    height: 280px !important;
  }

  .mccann-office-info {
    display: block !important;
  }
}

@media screen and (max-width: 760px) {

  .mccann-contact-offices,
  html body.page-template-page-contact .mccann-contact-offices,
  html body.page-template-page-contact-php .mccann-contact-offices {
    grid-template-columns: 1fr !important;
  }

  .mccann-contact-form-panel input,
  .mccann-contact-form-panel textarea,
  .mccann-contact-form-panel select {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* News / blog */
@media screen and (max-width: 900px) {

  .mccann-news-list,
  .mccann-single-news {
    width: 100% !important;
    max-width: 100% !important;
  }

  .mccann-news-item {
    grid-template-columns: 180px minmax(0, 1fr) !important;
    gap: 18px !important;
  }

  .mccann-news-thumb {
    width: 180px !important;
    height: 120px !important;
  }

  .mccann-news-headline-row {
    grid-template-columns: 1fr !important;
    gap: 4px !important;
  }

  .mccann-news-headline-row time {
    white-space: normal !important;
  }
}

@media screen and (max-width: 620px) {
  .mccann-news-item {
    grid-template-columns: 1fr !important;
  }

  .mccann-news-thumb {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 10;
  }
}

/* Sectors */
@media screen and (max-width: 1024px) {
  .sector-filter-nav {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  .sector-filter-nav li {
    width: auto !important;
    flex: 1 1 calc(33.333% - 8px) !important;
    min-width: 150px !important;
    text-align: center !important;
  }

  .sector-gridbox {
    width: 33.333% !important;
    height: 300px !important;
  }
}

@media screen and (max-width: 760px) {
  .sector-filter-nav li {
    flex-basis: calc(50% - 8px) !important;
  }

  .sector-gridbox {
    width: 50% !important;
    height: 250px !important;
  }
}

@media screen and (max-width: 480px) {

  .sector-filter-nav li,
  .sector-gridbox {
    width: 100% !important;
    flex-basis: 100% !important;
  }
}

/* Sustainability / BREEAM template family */
@media screen and (max-width: 1024px) {

  .sustainability-wrap,
  .mccann-page-green-support .sustainability-wrap {
    grid-template-columns: 1fr !important;
    gap: 30px !important;
    max-width: calc(100% - 56px) !important;
  }

  .sustainability-images {
    padding-top: 0 !important;
    justify-content: flex-start !important;
  }
}

@media screen and (max-width: 620px) {

  .sustainability-wrap,
  .mccann-page-green-support .sustainability-wrap {
    max-width: calc(100% - 34px) !important;
  }

  .sustainability-images img,
  .sustainability-images .badge-small,
  .sustainability-images .badge-wide,
  .sustainability-images .badge-medium,
  .sustainability-images .code-logo,
  .sustainability-images .green-doc,
  .sustainability-images .travel-report {
    width: auto !important;
    max-width: 100% !important;
  }
}

/* Footer */
@media screen and (min-width: 901px) and (max-width: 1180px) {

  html body footer.mccann-footer-exact .footer_exact_wrap,
  html body .mccann-footer-exact .footer_exact_wrap,
  html body:not(.home) footer.mccann-footer-exact .pagewrap {
    grid-template-columns: 150px 130px minmax(220px, 1fr) 140px !important;
    column-gap: 34px !important;
    max-width: calc(100% - 48px) !important;
    width: auto !important;
  }

  html body .mccann-footer-exact .footer_exact_col,
  html body .mccann-footer-exact .footer_nav_col,
  html body .mccann-footer-exact .footer_address_col {
    font-size: 15px !important;
  }
}

@media screen and (max-width: 900px) {

  html body footer.mccann-footer-exact .footer_exact_wrap,
  html body .mccann-footer-exact .footer_exact_wrap,
  html body:not(.home) footer.mccann-footer-exact .pagewrap {
    width: auto !important;
    max-width: calc(100% - 34px) !important;
    grid-template-columns: 1fr !important;
    gap: 26px 30px !important;
    padding-bottom: 44px !important;
  }

  html body .mccann-footer-exact .footer_exact_col,
  html body .mccann-footer-exact .footer_nav_col,
  html body .mccann-footer-exact .footer_address_col {
    min-width: 0 !important;
  }

  html body .mccann-footer-exact .footer_exact_col a,
  html body .mccann-footer-exact .footer_nav_col a {
    word-break: break-word !important;
    white-space: normal !important;
  }

  html body .mccann-footer-exact .footer_socials,
  html body .mccann-footer-exact .footer_credit {
    position: static !important;
    grid-column: auto !important;
    grid-row: auto !important;
    justify-self: start !important;
    align-self: start !important;
    text-align: left !important;
    white-space: normal !important;
  }
}

@media screen and (max-width: 560px) {

  html body footer.mccann-footer-exact .footer_exact_wrap,
  html body .mccann-footer-exact .footer_exact_wrap,
  html body:not(.home) footer.mccann-footer-exact .pagewrap {
    grid-template-columns: 1fr !important;
    max-width: calc(100% - 28px) !important;
    gap: 20px !important;
  }
}