@import "measurements";
@import "css3";
@import "general-mixins";
@import "microformats";
@import "media-queries";

//@warn "remove magic numbers";

///
/// Basic Page header:
/// based on: https://drive.google.com/drive/folders/0B2LQIUUuUDJdUk00VFFLaWJJLU0
/// specifically: Discovery_home_v4a.psd
///

@mixin page-header(
  $background-color: lighten($page-color-light, 10%),
  $font-family: 'Milo-Light',
  $font-weight: 400,
  $type-color: $nypl-dark-gray) {
  background-color: $background-color;
  @content;

  h1,
  h2 {
    font-family: $font-family;
    font-size: 2rem;
    margin: 0;
  }

  h1 {
    font-weight: $font-weight;
    margin: 1rem 0 1.5rem;
  }

  ///
  /// TODO: clean this up so its not dependent upon a specific heading level
  /// Though its pretty clear at first glance at what its doing...
  h1.item-title,
  h2.item-title {
    font-family: $sans-serif-stack;
    font-weight: 400;
  }

  h2 { // when it's a secondary title (real title is inside content below)
    line-height: 1;
  }

  h2 {
    font-family: $sans-serif-stack;
    font-weight: 400;
    margin: 1rem 0 1.5rem;

    @include media($mobile-breakpoint) {
      margin-top: 0.5rem;
    }
  }
}



///
/// Home Page Hero
///

@mixin homepage-hero(
    $background-color: lighten($page-color-light, 10%),
    $font-family: $sans-serif-stack,
    $font-weight: 400,
    $type-color: $nypl-red) {
  background-color: $background-color;

  h1 {
    color: $type-color;
    font-family: 'Milo-Light', $font-family;
    font-size: 3rem;
    font-weight: $font-weight;
    margin: 3rem 0 1.5rem;

    @include media($mobile-breakpoint) {
      font-size: 2rem;
      margin-top: 0.5rem;
      margin-bottom: 0.25rem;
    }

    @include media($xtrasmall-breakpoint) {
      margin: 0.5rem 0 0.75rem;
    }
  } // /h1

  p {
    font-weight: 200;
    max-width: none;

    @include media($mobile-breakpoint) {
      line-height: 2;
    }
  }
} // /homepage-hero



///
/// Breadcrumbs
///

@mixin breadcrumbs {
  list-style-type: none;
  margin: 0 0 0 -0.5rem;
  padding-left: 0;

  li {
    display: inline-block;
    margin-left: 0;
    //overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    a {
      border-radius: $general-border-radius;
      color: $nypl-dark-gray;
      padding: 0.25rem 0.45rem;

      &:hover {
        background: $nypl-light-gray;
      }

      &:visited {
        color: lighten($nypl-dark-gray, 20%);
      }
    }



    @include media($mobile-breakpoint) {
      max-width: 90vw;
    }

    &::before {
      content: " > ";
    }

    &:first-child::before {
      content: "";
    }
  }
}



///
/// Full Width Wrapper(s) Mixin
///
/// TODO: Find a better way to abstract all this nasty math away from the below calculations...

@mixin full-width-wrapper($in-header: false) {
  @if $in-header == false {
    max-width: calc(#{$final-max-width} - #{$final-logo-offset * 2});
    padding: $general-padding $final-logo-offset $general-padding $final-logo-offset;
  } @else {
    max-width: calc(#{$max-width} - #{$general-padding * 2});
    padding: 0 $general-padding;
  }

  position: relative;
  margin: 0 auto;
  @include clearfix;

  @include media($mobile-breakpoint) {
    @if $in-header == false {
      padding-left: ($general-padding * 2);
      padding-right: ($general-padding * 2);
    } @else {
      margin: 0;
      padding: 0 #{$general-padding * 0.5};
    }
  }
}



///
/// Row Mixin
///
@mixin row {
  margin: 0 -0.5rem;
  min-height: 1rem;
  @include clearfix;
}

@mixin column-type(
    $border: 0,
    $float: left,
    $margin-bottom: 1rem,
    $width: auto) {
  //border: 1px solid $nypl-red;
  border: $border;
  float: $float;
  margin-bottom: $margin-bottom;
  min-height: 1rem;
  padding: 0 0.5rem;
  width: $width;
  @include clearfix;
  @include box-sizing(border-box);

  @include media($mobile-breakpoint) {
    float: none;
    padding: 0;
    width: auto;
  }
}

@mixin column-full {
  @include column-type($float: none);
}

@mixin column-half {
  @include column-type($width: $half);
}

@mixin column-one-quarter {
  @include column-type($width: $one-quarter);
}

@mixin column-one-third {
  @include column-type($width: $one-third);
}

@mixin column-two-thirds {
  @include column-type($width: $two-thirds);
}

@mixin column-three-quarters {
  @include column-type($width: $three-quarters);
}

@mixin column-offset($column-count) {
  margin-left: percentage($column-count / 4);

  @include media($mobile-breakpoint) {
    margin-left: 0;
  }
}

// @mixin inner-block {
//   @warn "deprecated. use row-column pattern instead.";
// }