/*------------------------------------*\
    $THEME OVERRIDES
\*------------------------------------*/
@import 'overrides/components/button';
@import 'overrides/components/main-header';

pre,
blockquote {
  border: 1px solid rgb(var(--color-brown-grey));
}

.o-list--numbered li::before {
  background-color: rgb(var(--color-black));
}

/* forms */

input[type=radio],
input[type=checkbox] {
  border: 2px solid rgb(var(--color-dark-gray), 0.3);
  background-color: rgb(var(--color-dark-gray));
}


/* articles */

.c-article__header .u-has-accent,
.c-article__body a,
.c-article__body .u-has-accent,
.c-article__body .u-has-accent--neutral,
.c-article__footer .o-rte-text a {
  &:hover {
    background-color: rgb(var(--color-reddish-orange));
  }
}


blockquote {
  @include border-accent(bottom, left);
}

.c-article__body blockquote {
  border: none;
}

.c-main-header {
  // Header uses the dark color group
  @include color-group-dark;

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

  .c-share-tools__label {
    color: rgb(var(--color-white));
  }

  .c-primary-nav:not(.c-primary-nav--side) {
    @media all and (max-width: 1090px) {
        display: none;
    }
  }
}

.c-main-footer .c-share-tools__label {
  @include typeface(small, 3);
  text-align: center;
  text-transform: uppercase;
}

.c-main-footer .c-share-tools__group {
  margin: auto;
}

.c-main-header__title {
  text-align: left;
}

.c-main-header__share {
  display: inline-grid;
  margin-right: var(--space-3);
  width: max-content;
  @include media('>small') {
    display: flex;
  }
}

.c-main-header__share .c-share-tools__group {
  width: max-content;
}

.c-main-header__share .c-share-tools__link:hover path {
  fill: rgb(var(--color-header-icon-hover));
}

.c-main-header__donate.o-button {
  // there's some weirdness here right now because the donate button has
  // the o-button-sm class on it (why?) so we're overriding extra things
  @include typeface(small, 5);
  letter-spacing: 2px;
  font-weight: 700;
  line-height: 22px;
  height: 43px;

  &::before {
    border: 3px solid rgb(var(--color-header-button-background));
  }
}

// Back to top icon & text
.o-to-top .o-icon--up-arrow {
  fill: rgb(var(--color-primary-2));
}

.o-to-top:hover {
  color: rgb(var(--color-primary-2));
}

// Header with full stacked logo
.c-main-header--emphasis {
  .c-main-header__ad-unit {
    padding-bottom: var(--space-2);

    @include media('>medium') {
      padding-bottom: 30px;
    }
  }

  &:not(.out-of-viewport) .c-primary-nav--top {
    @include media('>xxlarge') {
      padding-left: 166px;
    }
  }

  &:not(.out-of-viewport) .c-main-header__branding {
    width: 110px;
    position: relative;
    bottom: calc(var(--space-3) * -1);
    align-self: flex-bottom;
    z-index: $z-index-heading-logo;
    left: var(--space-2);
    opacity: 1;
    transition: var(--animation-duration-fast) var(--animation-easing-incoming);

    @include media('>medium') {
      width: 135px;
      bottom: calc(var(--space-2) * -1);
    }

    @include media('>xlarge') {
      margin-left: calc(var(--grid-col-width) + var(--grid-gutter));
    }

    --xl-container: calc(var(--max-width-xl) + var(--space-5));
    @include media('>xxlarge') {
      position: absolute;
      bottom: -43px;
      margin-left: calc(50% - var(--xl-container) / 2 + var(--space-5));
    }
  }

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

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

.c-main-footer {
  background-color: transparent;
  background-image: linear-gradient(to bottom, white 0, rgb(var(--color-background)) 0%);
  background-position: 100% 142px;
  background-repeat: repeat-x;
  padding: var(--space-5);
  @include media(">xlarge") {
    padding: var(--space-5) 0;
  }

  // Footer uses the dark color group
  @include color-group-dark;

  // But mini-newsletter form uses the light color group
  .c-newsletter-form {
    @include color-group-light;
  }

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

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

  .c-main-footer__slogan p {
    color: rgb(var(--color-text));
    font-size: var(--font-size-4); /* Not in the type scale*/
  }

  .c-newsletter-form__button :hover {
    background-color: rgb(var(--color-form-button));
  }

  .c-main-footer__bottom {
    text-align: center;
    border-top: 1px dashed rgba(var(--color-text), 0.5);
    @include media(">xlarge") {
      text-align: left;
      justify-content: space-between;
    }
  }

  .c-main-footer__bottom p {
    @include typeface(body, 4);
    @include media(">xlarge") {
      font-size: var(--font-size-6);
      line-height: var(--line-height-6);
    }
  }
}

.c-main-footer__send-story {
  display: inline-block;
  color: rgb(var(--color-background));
  padding: var(--space-3) 0;
  margin-bottom: var(--space-3);
  @include typeface(small, 3);
  text-transform: uppercase;
  text-decoration: none;

  &:hover {
    color: rgb(var(--color-background));
    text-decoration: none;
  }
}

.c-main-footer .c-main-footer__bottom .c-main-footer__copyright-text {
  @include typeface(small, 3);
  text-transform: uppercase;
}

.c-secondary-nav__link {
  @include typeface(small, 3);
  text-transform: uppercase;
}

.c-main-footer__terms-links {
  @include media("<=large") {
    margin-top: var(--space-5);
  }
}

.c-main-footer__terms-links a {
  @include typeface(small, 3);
  margin: 0 var(--space-3);
  padding: 8px 0;
  text-transform: uppercase;
  font-weight: bold;

  @include media(">large") {
    margin: 0 11px 0 var(--space-5);
  }
}

.c-main-footer__right-component {
  color: rgb(var(--color-text-inverse));
}

.c-main-footer .c-main-footer__right-component svg,
.c-main-footer .c-main-footer__right-component svg path,
.c-main-footer .c-main-footer__right-component svg rect {
  fill: rgb(var(--color-text-inverse));
}

// brand group

.c-main-footer__nypr-logo {
  margin: 0 auto var(--space-3) auto;
  @include media(">xlarge") {
    margin: 0 var(--space-5) 0 0;
  }
}

.c-main-footer__brand-group {
  text-align: center;
}

// view all brands
.o-text-with-icon {
  text-transform: capitalize;
  font-size: var(--font-size-2);
}

/* sponsored tags */
.o-tag--sponsored {
  font-weight: normal;
}

.o-tag--sponsored,
.o-kicker--sponsored {
  color: rgb(var(--color-white));
  background-color: rgb(var(--color-purple));
}


.u-has-accent .u-has-accent--secondary {
  color: rgb(var(--color-brick-red));
}

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

.c-toggle-box .c-toggle-box__label {
  @include color-group-dark
}

// Standard repeating dashed border
.o-border-accent {
  background-image: repeating-linear-gradient(to right, rgb(var(--color-black)) 0%, rgb(var(--color-black)) 44%, transparent 44%, transparent 100%), repeating-linear-gradient(to right, rgb(var(--color-black)) 0%, rgb(var(--color-black)) 44%, transparent 44%, transparent 100%), repeating-linear-gradient(to bottom, rgb(var(--color-black)) 0%, rgb(var(--color-black)) 44%, transparent 44%, transparent 100%), repeating-linear-gradient(to bottom, rgb(var(--color-black)) 0%, rgb(var(--color-black)) 44%, transparent 44%, transparent 100%);
  background-position: left top, left bottom, left top, right top;
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
  background-size: 18px 2px, 18px 2px, 2px 18px, 2px 18px;
}


// Buttons
.o-button {
  color: rgb(var(--color-dark-gray));
  font-weight: bold;
  transition: all var(--animation-duration-standard) var(--animation-easing-standard);
  text-transform: uppercase;
}

.o-button:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  z-index: $z-index-button-outline;
  width: 100%;
  height: 100%;
  border: 3px solid rgb(var(--color-button));
  border-color: rgb(var(--color-button));
  transform: translate(0, 0);
  transition: all var(--animation-duration-standard) var(--animation-easing-standard);
}

.o-button:hover {
  color: rgb(var(--color-dark-gray));
  transform: translate(10px, -10px);
}

.o-button:hover:before {
  transform: translate(-10px, 10px);
}

.o-button.mod-donate {
  color: rgb(var(--color-white));
  background-color: rgb(var(--color-reddish-orange));

  &:hover {
    background-color: rgb(var(--color-reddish-orange));
  }

  &:active {
    background-color: rgb(var(--color-reddish-orange));
  }
}

.o-button.mod-donate:before {
  border: 3px solid rgb(var(--color-reddish-orange));
  border-color: rgb(var(--color-reddish-orange));
}

// Link styles
@mixin dotted-underline($color) {
  display: inline-block;
  padding-bottom: 2px;
  border-bottom: 2px dotted rgb(var($color));
  box-decoration-break: clone;
}

// Headline link
.c-block__title a {
  color: rgb(var(--color-text));
  transition: none;
  text-decoration: none;
}

.c-block__object .c-block__title-link:hover,
.c-block__title a:hover {
  color: rgb(var(--color-reddish-orange));
  text-decoration: underline;
  text-decoration-style: dotted;
}

.c-lead-gallery__thumbs-thumb.is-active {
  border-color: rgb(var(--color-reddish-orange));
}

.c-lead-gallery__thumbs-thumb-text:hover {
  background-color: rgb(var(-color-reddish-orange));
}

.c-lead-gallery .o-credit a:hover {
  color: rgb(var(--color-link-hover));
  background-color: rgb(var(--color-reddish-orange));
}

.c-lead-gallery__thumbs-thumb-text:hover {
  background-color: rgb(var(--color-reddish-orange));
}


.c-block__title {
  @include media(">medium") {
    @include typeface(header, 10);
  }
}

.c-block--horizontal--large .c-block__title {
  @include media(">medium") {
    font-size: var(--font-size-11);
    line-height: var(--line-height-11);
  }
}

// Top Navigation
.c-primary-nav--top .c-primary-nav__link:hover {
  color: rgb(var(--color-reddish-orange));

  .c-primary-nav-link__icon svg {
    fill: rgb(var(--color-reddish-orange));
  }
}

// Side Navigaton
.c-side-menu .c-search__button:hover {
  background-color: rgb(var(--color-reddish-orange));
  opacity: 1;
}

.c-side-menu .c-side-menu__social {
  margin-top: var(--space-6);
}

.c-primary-nav--side {
  margin-bottom: 0;
}

.c-primary-nav--side .c-primary-nav__link {
  color: rgb(var(--color-banana-yellow));
  display: flex;
  justify-content: center;
  align-items: center;
  @extend .u-has-accent;

  &:hover {
    color: rgb(var(--color-white));
    background-color: rgb(var(--color-reddish-orange));

    .c-primary-nav-link__icon svg {
      fill: rgb(var(--color-white));
    }
  }
}

.c-primary-nav--side .c-primary-nav__link .c-primary-nav-link__text {
  @include dotted-underline(--color-banana-yellow);
}

.c-primary-nav--side .c-primary-nav__link .c-primary-nav-link__icon svg {
  fill: rgb(var(--color-banana-yellow));
}

.c-secondary-nav .c-secondary-nav__link {
  color: rgb(var(--color-white));
  @include dotted-underline(--color-white);
  text-decoration: none;

  &:hover, &:focus {
    color: rgb(var(--color-white));
    background-color: rgb(var(--color-reddish-orange));
    text-decoration: none;
  }
}

.c-side-menu {
  @include color-group-dark;
}

.c-side-menu__terms-links a,
.c-main-footer__terms-links a,
.c-main-footer__terms-links a:visited {
  color: rgb(var(--color-banana-yellow));
  text-decoration: none;
  text-transform: uppercase;

  &:hover, &:focus {
    color: rgb(var(--color-white));
    background-color: rgb(var(--color-reddish-orange));
  }
}

// Read More Links
.c-read-more-nav__link {
  font-family: var(--font-family-pragati);
  color: rgb(var(--color-reddish-orange));
  @include dotted-underline(--color-reddish-orange);

  &:hover, &:focus {
    color: rgb(var(--color-white));
    background-color: rgb(var(--color-reddish-orange));
  }
}

// brand navigation links
.c-nypr-nav__link {
  font-family: var(--font-family-pragati);
  color: rgb(var(--color-brick-red));
  @include dotted-underline(--color-brick-red);

  &:hover, &:focus {
    color: rgb(var(--color-white));
    background-color: rgb(var(--color-reddish-orange));
  }
}

// Highlight headline link when hovering card image
.c-block__media:hover + .c-block__object .c-block__title-link,
.c-block__media:hover .c-block__title-link {
  color: rgb(var(--color-reddish-orange));
  text-decoration: underline;
  text-decoration-style: dotted;
}

// homepage newsletter signup
.c-newsletter-tout__heading strong {
  background-image: linear-gradient(rgba(36, 76, 132, 0.2), rgba(36, 76, 132, 0.2));
  background-position: center bottom .2em;
  background-size: 100% .55em;
  background-repeat: no-repeat;
  padding: 0 8px;
  box-decoration-break: clone;
  margin-left: -8px;
}

.c-newsletter-tout__dek {
  font-family: var(--font-family-barlow);
  font-size: var(--font-size-6);
}

.c-newsletter-form__button {
  background-color: rgb(var(--color-reddish-orange));
}

.c-newsletter-form .c-newsletter-form__button {
  background-color: rgb(var(--color-dark-gray));
}

.c-newsletter-article {
  .o-button {
    background-color: rgb(var(--color-reddish-orange));
  }

  input[type=checkbox] {
    background-color: rgb(var(--color-reddish-orange));
    border: rgb(var(--color-reddish-orange));
  }
}

form .o-button:hover {
  background-color: rgb(var(--color-reddish-orange));
}

.o-rte-text a:hover {
  color: rgb(var(--color-link-hover));
  background-color: rgb(var(--color-reddish-orange));
}

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

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

// footer newsletter signup
.c-main-footer .c-newsletter-form__terms a {
  color: rgb(var(--color-text));
  border-bottom: 2px dotted rgb(var(--color-text));

  &:hover {
    background-color: rgb(var(--color-reddish-orange));
  }
}


.c-newsletter-form .c-newsletter-form__button:hover[disabled] {
  background-color: rgb(var(--color-dark-gray));
}

.c-newsletter-form .c-newsletter-form__button {
  background-color: rgb(var(--color-dark-gray));
}

// article page credit
.o-caption__text > span a {
  text-decoration: none;
}

// article page newsletter signup
.c-newsletter-article__heading {
  font-family: var(--font-family-pragati);
}

.c-newsletter-form__terms a {
  color: rgb(var(--color-text));
  border-bottom: 2px dotted rgb(var(--color-text));

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


// advertisement label
.o-ad__label {
  text-transform: uppercase;
}

// view all button on gallery
.c-lead-gallery__thumbs-thumb-text {
  text-transform: uppercase;
}

// gallery title text
.o-back-to-link {
  font-family: var(--font-family-pragati);
  text-decoration: none;

  .o-icon svg > * {
    fill: rgb(var(--color-text));
  }

  .u-has-accent {
    @include dotted-underline(--color-white);
  }

  &:hover {
    text-decoration: none;
    border-bottom: none;

    .u-has-accent {
      background-image: none;

      &:hover {
        background-color: rgb(var(--color-reddish-orange));
      }
    }
  }
}

.c-gallery-overlay .u-has-accent:hover {
  background-color: rgb(var(--color-link-hover-background));
}

// gallery share text
.o-text-with-icon {
  text-transform: uppercase;
  font-family: var(--font-family-b612);
}

// gallery slide count text
.c-slide__count {
  font-family: var(--font-family-b612);
  text-transform: uppercase;
}

// gallery

.c-gallery-overlay {
  // Gallery uses the dark color group
  @include color-group-dark;

  // But the share link popus use the light color group
  .c-toggle-box__dropdown {
    @include color-group-light;
  }
}

.c-gallery-overlay .o-credit a {
  @include dotted-underline(--color-link);
  text-decoration: none;

  &:hover {
    color: rgb(var(--color-link-hover));
    background-color: rgb(var(--color-reddish-orange));
  }
}

// staff page
.o-rte-text > h3 {
  font-weight: normal;
}

.o-rte-text > ul li:before {
  background-color: rgb(var(--color-brick-red));
}

.o-rte-text > ul li li:before {
  border: 2px solid rgb(var(--color-brick-red));
}

.c-author-block__details-link:hover {
  background-color: rgb(var(--color-reddish-orange));
}

// article page

.c-article__headline {
  @include typeface(header, 14);

  @include media(">medium") {
    @include typeface(header, 16);
  }
}

// article page image caption arrow icon
.image-none i {
  font-family: var(--font-family-barlow);
  line-height: var(--line-height-2);
}

// breaking news
.c-block--urgent .c-block__title a {
  &:hover {
    color: rgb(var(--color-brick-red));
    text-decoration: underline;
    text-decoration-style: dotted;
  }
}

.c-banners .o-box-banner {
  padding: var(--space-3) var(--space-4) var(--space-4);
}

.c-block--urgent .c-block__eyebrow > .o-kicker {
  color: rgb(var(--color-white));
  background: rgb(var(--color-dark-gray));
}

.c-block--urgent .c-block__title a {
  color: rgb(var(--color-brick-red));
}

.c-block--urgent .c-block-meta__timestamp {
  color: rgb(var(--color-brick-red));
}

.c-block-meta__timestamp {
  @include typeface(small, 1);
}

// Section page
.c-tag-listing__heading {
  @include typeface(tags, 10);
  color: rgb(var(--color-text-inverse));
  text-transform: none;
  font-weight: normal;
  padding: var(--space-2) var(--space-3);
  background-color: rgb(var(--color-tag-highlight)); //dark
  margin-bottom: 0;

  @include media(">medium") {
    @include typeface(tags, 14);
  }
}

.c-section__header {
  background-color: rgb(var(--color-primary-1));
}

.c-section__heading {
  @include typeface(small, 10);
  text-transform: uppercase;
  font-weight: normal;
  letter-spacing: 3px;

  @include media(">medium") {
    @include typeface(header, 14);
    font-weight: normal;
  }
}

.c-basic__heading {
  @include typeface(header, 14);
  @include media(">=medium") {
    @include typeface(header, 16);
  }
}

.c-basic__header:before {
  content: "";
  position: absolute;
  top: 50%;
  width: 100%;
  height: 1px;
  @include border-accent;
}

/**
 * 3D box effect for headings
 */
.o-3d-heading {
  padding: .1em .25em;
  display: inline-block;
  position: relative;
  z-index: 5;
  background-color: rgb(var(--color-background));
  left: 10px;
  margin-right: var(--space-3);
}

.o-3d-heading:before,
.o-3d-heading:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  border: var(--border-standard);
  background-color: transparent;
}

.o-3d-heading:before {
  z-index: -2;
  left: -10px;
  top: 10px;
}

.o-3d-heading:after {
  z-index: -1;
  background-color: rgb(var(--color-white));
}

.o-3d-heading--quinary:after {
  background-color: rgb(var(--color-background-highlight));
}

// Read more nav
.c-read-more-nav {
  border-top: 2px dashed rgb(var(--color-border-subtle));
  border-bottom: 2px dashed rgb(var(--color-border-subtle));

  @include media(">medium") {
    border: 2px dashed rgb(var(--color-border-subtle));
  }
}

.c-read-more-nav__label {
  text-transform: uppercase;
}

/**
 * Newsletter signup tout
 */
.c-newsletter-tout {
  /* Adjusted vertical spacing because of the 10px shadow border.*/
  margin-bottom: calc(var(--space-7) + 10);
}

.c-newsletter-tout:before {
  content: "";
  position: absolute;
  left: -10px;
  top: 11px;
  border: var(--border-standard);
  width: 100%;
  height: 100%;
  z-index: 0;
}

// Breadcrumbs
.o-breadcrumbs:before {
  content: "";
  height: 1px;
  width: 100%;
  position: absolute;
  left: -4px;
  top: calc(50% + 1px);
  @include border-accent;
}

// Typography

.o-rte-text > h1,
.o-rte-text > h2,
.o-rte-text > h3,
.o-rte-text > h4,
.o-rte-text > h5,
.o-rte-text > h6 {
  padding-top: var(--space-3);
}

.u-has-accent--secondary:hover path,
.o-rte-text .u-has-accent--secondary:hover path {
  fill: rgb(var(--color-background));
}

.o-box-banner__close {
  right: var(--space-2);
  top: var(--space-2);
}

.c-search--top .c-search__button:hover {
  background-color: rgb(var(--color-primary-1));
}

.c-contact-tout {
  padding: var(--space-4);
  width: 100%;
}

.u-reversed-out:after {
  background-color: rgb(var(--color-background));
}

.c-block--horizontal .c-block__title {
  @include typeface(header, 8);
}

// icons

.u-icon--xs {
  width: 16px;
  height: 16px;
}

.u-icon--s {
  width: 20px;
  height: 20px;
}

.u-icon--m {
  width: 30px;
  height: 30px;
}

.u-icon--l {
  width: 40px;
  height: 40px;
}

.u-icon--xl {
  width: 50px;
  height: 50px;
}

.c-main-footer .c-main-footer__social {
  margin: auto;
  @include media(">xlarge") {
    margin: auto 0 auto auto;
  }
}

.c-main-footer .c-main-footer__right-component {
  @include media(">medium") {
    margin-top: 170px;
  }
  @include media(">xlarge") {
    margin-top: 0;
  }
}

.c-main-footer .c-main-footer__right-component svg,
.c-main-footer .c-main-footer__right-component svg path,
.c-main-footer .c-main-footer__right-component svg rect {
  fill: rgb(var(--color-text));
}

.c-main-footer .c-newsletter-form__button svg,
.c-main-footer .c-newsletter-form__button svg path,
.c-main-footer .c-newsletter-form__button svg rect {
  fill: rgb(var(--color-footer-text));
}

.c-newsletter-article svg,
.c-newsletter-article svg path,
.c-newsletter-article svg rect {
  fill: rgb(var(--color-text-inverse));
}

.o-caption .o-icon--dashed-arrow svg path {
  fill: rgb(var(--color-primary-2));
}

// curated tage page

.c-main.tags-page {
  display: flex;
  flex-direction: column;

  .tagpage-zone {
    max-width: none;
  }

  .c-tag-listing__image {
    height: 95px;
    overflow: hidden;
    margin-top: -32px;
    @include media(">medium") {
      height: 277px;
      margin-top: -80px;
    }

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      margin: auto;
    }
  }

  .c-tag-listing__description {
    margin-top: var(--space-2);
  }

  .c-listing__sections iframe,
  .c-listing__sections .twitter-tweet {
    margin: auto;
  }

  .c-banners {
    order: 2;
    padding-top: 0;
  }

  .c-tag-listing__image {
    order: 1;
    flex-basis: 100%;
  }

  .c-listing__sections {
    order: 3;
  }

  .c-article__body-spacer {
    margin-top: var(--space-5);
    margin-bottom: var(--space-5);
  }

  .c-article__body-spacer:first-child {
    margin-top: var(--space-4);
    margin-bottom: var(--space-4);
  }


  // force 4:3 ratio on images
  .o-figure__image .o-picture {
    position: relative;
    overflow: hidden;
    padding-top: 75%;
    background-color: RGB(var(--color-dark-gray));
  }

  .o-figure__image .o-picture img {
    position: absolute;
    top: calc(50%); // account for the figcaption
    left: 50%;
    transform: translate(-50%, -50%);
    max-height: 100%;
    max-width: 100%;
    height: auto;
    width: auto;
  }
}

// tags

.c-block__eyebrow {
  display: inline-block;
  padding-top: 0;
  padding-bottom: 0;
  line-height: 17px;
}