/*------------------------------------*\
    $THEME OVERRIDES
\*------------------------------------*/

@import "overrides/vars/colors";
@import "overrides/vars/fonts";
@import "overrides/vars/animations";
@import "overrides/vars/tools.sg-updates";

@import "overrides/components/horizontal-nav";
@import "overrides/components/onboard-message";
@import "overrides/components/sliding-bar";
@import "overrides/components/footer";
@import "overrides/components/track-info";
@import "overrides/components/toggle-box";
@import "overrides/components/jukebox-player";
@import "overrides/components/brands-linkroll";
@import 'overrides/components/play-button';


.c-main-header {
  --color-background: var(--color-cool-white);

  &.side-menu-is-active {
    .c-main-header__branding {
      opacity: 0;
    }
  }
}

// Header search
.c-search--top .c-search__close path {
  fill: rgb(var(--color-ember-red));
}

// Header logo
.c-main-header--emphasis {
  .gothamist-buildings {
    fill: rgb(var(--color-black));
  }
}

// Footer
.c-main-footer {
  --color-background: var(--color-cool-white);

  .gothamist-letters {
    fill: rgb(var(--color-black));
  }

  .gothamist-buildings {
    fill: rgb(var(--color-black));
  }

  .c-main-footer__signup svg {
    fill: rgb(var(--color-text-inverse));
  }

  .c-newsletter-form__text p,
  .c-newsletter-form__terms p {
    color: rgb(var(--color-text-inverse));
  }

  .c-newsletter-form__terms-checkbox a,
  .c-newsletter-form__terms-checkbox a:visited,
  .c-newsletter-form__terms-checkbox a:active {
    background: transparent;
    color: rgb(var(--color-text-inverse));

    &:hover {
      color: rgb(var(--color-text-inverse));
    }
  }

}

.c-main-footer a,
.c-main-footer a:visited,
.c-main-footer a:active {
  text-decoration: none;

  &:hover {
    text-decoration: none;
  }
}

// Side menu
.c-side-menu {
  --color-background: var(--color-white);
}

.c-search--side .c-search__input {
  border: 1px solid;
  border-color: rgb(var(--color-concrete));
}

.o-caption .o-icon--dashed-arrow {
  fill: rgb(var(--color-sky-blue));
}

// newsletter signup

.c-newsletter-form__inner {
  border: none;
  background-color: rgb(var(--color-ceramic-blue));
  color: rgb(var(--color-white));
}

.c-newsletter-form__field-group {
  border: none;
}

.c-newsletter-form__field-group .o-button {
  background-color: rgb(var(--color-sky-blue));

  &:hover {
    background-color: rgb(var(--color-sky-blue));
  }
}

.c-newsletter-form__graphic {
  mix-blend-mode: normal;
}

.c-main-footer .c-main-footer__signup .c-newsletter-form__graphic svg,
.c-main-footer .c-main-footer__signup .c-newsletter-form__graphic path {
  fill: rgb(var(--color-sky-blue));
}

.c-newsletter-form__terms input[type="checkbox"] {
  background-color: rgb(var(--color-ceramic-blue));
  border: 2px solid;
  border-color: rgb(var(--color-white));
}

.c-newsletter-form__terms input[type="checkbox"]:checked {
  background-color: rgb(var(--color-ceramic-blue));
  border: 2px solid;
  border-color: rgb(var(--color-white));
}

.c-donate-tout__graphic path {
  fill: rgb(var(--color-ceramic-blue));
}

.c-gallery-overlay {
  @include color-group-dark;
}

// main player

.on-air-now .on-air-now-upper {
  @include media("<medium") {
    display: flex;
    flex-direction: column;
    margin-top: 25px;
    margin-bottom: 24px;
    justify-content: center;
  }
}

.playlist-history-container {
  margin-top: 20px;
  margin-left: 0;
  @include media(">medium") {
    margin-top: -60px;
    display: flex;
    justify-content: center;
    margin-left: 300px;
  }
}

.on-air-now {
  background: none;
}

.on-air-now .on-air-now-label {
  width: 84px;
}

.on-air-now .message-the-show-title {
  color: rgb(var(--color-white));
}

.on-air-now .message-the-show-toggle-box .u-icon--xs,
.on-air-now .message-the-show-toggle-box .u-icon--xs svg,
.on-air-now .message-the-show-toggle-box .u-icon--xs svg path {
  fill: rgb(var(--color-white));
}

.on-air-now .show-title {
  color: rgb(var(--color-white));
  font-family: "Playfair Display";
}

.on-air-now .on-air-now-inner .show-image {
  @include media(">medium") {
    height: 244px;
    width: 244px;
    object-fit: cover;
    filter: grayscale(100%);
    display: block;
    margin-right: 35px;
  }
}

.listen-play-button {
  display: flex;
  position: relative;
  background: none;
  top: 0;
  margin: 0 auto;
  justify-content: center;
  @include media(">medium") {
    justify-content: left;
    top: 25px;
    margin: 0 auto 0 0;
  }
}

.listen-play-button .play-button {
  margin-left: 0;
}

.listen-play-button .play-button svg {
  max-height: 60px;
  max-width: 60px;
}

// footer

.c-main-footer {
  background-color: rgb(var(--color-water-blue));
  padding: 100px 0 100px 0;
  background-image: linear-gradient(to bottom, #fff 0, #00518e 0);
  background-position: 100% 142px;
  background-repeat: repeat-x;
}