/* Final responsive overrides for the approved header and footer design. */

html{
  min-height: 100%;
  background: #181818;
  color-scheme: dark;
  scrollbar-color: #777 #181818;
  scrollbar-width: thin;
}

body{
  min-height: 100%;
  background: #181818;
  color-scheme: dark;
}

.page-surface{
  display: flow-root;
  background: #f4f4f4;
  color: #333333;
}

::-webkit-scrollbar{
  width: 10px;
}

::-webkit-scrollbar-track{
  background: #181818;
}

::-webkit-scrollbar-thumb{
  border: 2px solid #181818;
  border-radius: 999px;
  background: #777;
}

::-webkit-scrollbar-button,
::-webkit-scrollbar-corner{
  display: none;
  width: 0;
  height: 0;
  background: #181818;
}

body .top-banner{
  padding: 9px clamp(20px, 4vw, 64px);
}

body .top-banner .banner-left,
body .top-banner .banner-right{
  margin-left: 0;
  margin-right: 0;
}

body header{
  padding: 22px clamp(20px, 4vw, 64px);
}

body .header-container{
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0;
}

body .header-brand .logo{
  width: 132px;
  max-width: 132px;
  margin: 0;
}

body .seasonal-logo{
  width: 220px;
  max-width: 220px;
}

body .header-brand .logo.seasonal-logo{
  width: 220px;
  max-width: 220px;
}

body .desktop-nav{
  margin: 0;
}

body .social-icon img,
body .footer-socials .social-icon img{
  width: 100%;
  height: 100%;
  max-width: 32px;
  max-height: 32px;
}

body footer{
  position: relative;
  background: #191919;
  border-image: linear-gradient(90deg, #FF9800, #FFC107) 1;
  padding-bottom: calc(22px + env(safe-area-inset-bottom));
}

body footer::after{
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 152, 0, 0.25), rgba(255, 193, 7, 0.25));
}

body .footer-column a{
  text-decoration: none;
}

@media (max-width: 768px){
  body .top-banner{
    display: flex;
    flex-wrap: wrap;
    padding: 10px 14px;
  }

  body header{
    padding: 16px;
  }

  body .header-container{
    justify-content: center;
  }

  body .header-brand .logo{
    width: 92px;
    max-width: 92px;
  }

  body .seasonal-logo{
    width: 176px;
    max-width: 176px;
  }

  body .header-brand .logo.seasonal-logo{
    width: 176px;
    max-width: 176px;
  }

  body .top-banner .banner-right{
    margin-left: auto;
  }

  body .top-banner .mobile-nav{
    position: static;
    order: 3;
    flex: 0 0 calc(100% + 28px);
    width: calc(100% + 28px);
    margin: 10px -14px -10px;
    padding: 18px 20px 22px;
  }
}