//  GOV.UK typography palettes


//  ANATOMY OF A TYPE STYLE
//  -----------------------
//  These are a collection of graphic styles. They are deliberately
//  abstracted from semantic HTML context to enable flexible reuse.
//  Although there is a lot of duplication within this file, as long
//  as you GZIP your CSS it shouldnt cause any bloat.
//
//
//  @mixin brand-45 {
//  _ Style name refers to graphic style rather than semantic use
//
//      font-size: 45px;
//      font-size: 4.5rem;
//      _ Font-sizing in rems to avoid issues with relative sizing
//        and DOM context. Font-size in pixels as fallback for
//        older browsers.
//
//      line-height: (52/45);
//      _ Unit-less, relative leading value.
//        line-height (52px) / font-size (45px) = relative line-height
//
//      font-weight: 300;
//      letter-spacing: 0.01em;
//      text-transform: none;
//      _ Again, we can't assume anything about pre-existing CSS on the
//        page, so setting these values (even if just resetting them
//        to default values) will increase the robustness of the style.
//
//      padding-top: 7px;
//      padding-top: 0.7rem;
//      padding-bottom: 5px;
//      padding-bottom: 0.5rem;
//      _ Set top and bottom padding values to ensure an appropriate
//        vertical measure before & after the text, ideally sitting it
//        on the 10px baseline grid. Rem sizing will allow the
//        whitespace to scale proportionally along with the text.
//  }











// CORE FONTS - NEW TRANSPORT

// Suitable for page headings
@mixin core-48 {
  font-family: $NTA-Light;
  font-size: 48px;
  font-size: 4.8rem;
  line-height: (50/48); /* 50px */
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  padding-top: 12px;
  padding-top: 1.2rem;
  padding-bottom: 8px;
  padding-bottom: 0.8rem;
  @media (max-width: 640px) {
    font-size: 2.5rem;
    line-height: (30/25);
    padding-top: 0.8rem;
    padding-bottom: 0.7rem;
  }
}

// Suitable for page headings
@mixin core-36 {
  font-family: $NTA-Light;
  font-size: 36px;
  font-size: 3.6rem;
  line-height: (40/36);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  padding-top: 6px;
  padding-top: 0.6rem;
  padding-bottom: 9px;
  padding-bottom: 0.9rem;
  @media (max-width: 640px) {
    font-size: 2.4rem;
    line-height: (25/24);
    padding-top: 0.8rem;
    padding-bottom: 0.7rem;
  }
}

// Suitable for body headings
@mixin core-27 {
  font-family: $NTA-Light;
  font-size: 27px;
  font-size: 2.7rem;
  line-height: (30/27); /* 30px */
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  padding-top: 3px;
  padding-top: 0.3rem;
  padding-bottom: 2px;
  padding-bottom: 0.2rem;
  @media (max-width: 640px) {
    font-size: 1.9rem;
    line-height: (25/19);
    padding-top: 0.7rem;
    padding-bottom: 0.3rem;
  }
}

// Suitable for short body copy
@mixin core-24 {
  font-family: $NTA-Light;
  font-size: 24px;
  font-size: 2.4rem;
  line-height: (30/24); /* 30px */
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  padding-top: 3px;
  padding-top: 0.3rem;
  padding-bottom: 2px;
  padding-bottom: 0.2rem;
  @media (max-width: 640px) {
    font-size: 1.7rem;
    line-height: (25/17);
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
  }
}

// Suitable for long body copy
@mixin core-19 {
  font-family: $NTA-Light;
  font-size: 19px;
  font-size: 1.9rem;
  line-height: (25/19); /* 25px */
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  padding-top: 7px;
  padding-top: 0.7rem;
  padding-bottom: 3px;
  padding-bottom: 0.3rem;
  @media (max-width: 640px) {
    font-size: 1.3rem;
    line-height: (20/13);
    padding-top: 0.6rem;
    padding-bottom: 0.4rem;
  }
}

// Suitable body pullouts and asides
@mixin core-16 {
  font-family: $NTA-Light;
  font-size: 16px;
  font-size: 1.6rem;
  line-height: (20/16); /* 20px */
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  padding-top: 5px;
  padding-top: 0.5rem;
  padding-bottom: 5px;
  padding-bottom: 0.5rem;
  @media (max-width: 640px) {
    font-size: 1.3rem;
    line-height: (20/13);
    padding-top: 0.6rem;
    padding-bottom: 0.4rem;
  }
}

// Suitable for captions, buttons etc
@mixin core-14 {
  font-family: $NTA-Light;
  font-size: 14px;
  font-size: 1.4rem;
  line-height: (20/14); /* 20px */
  font-weight: 400;
  -webkit-font-smoothing: subpixel-antialiased;
  letter-spacing: 0;
  text-transform: none;
  padding-top: 6px;
  padding-top: 0.6rem;
  padding-bottom: 4px;
  padding-bottom: 0.4rem;
  @media (max-width: 640px) {
    font-size: 1.2rem;
    line-height: (15/12);
    padding-top: 0.4rem;
    padding-bottom: 0.1rem;
  }
}

// DEPARTMENT LOGOS - HELVETICA

@mixin logo-48 {
  font-family: $Helvetica-Regular;
  font-size: 48px;
  font-size: 4.8rem;
  line-height: (50/48); /* 50px */
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  color: $black;

  padding-top: 50px;
  padding-top: 5.0rem;
  padding-bottom: 0;
  padding-left: 7px;
  padding-left: 0.7rem;

  display: block;

  border-left: 5px solid #bbb;

  background: image-url("coa-default-48.gif") no-repeat 8px 0;

  span {
    position: relative;
    top: 2px;
  }
}

@mixin logo-27 {
  font-family: $Helvetica-Regular;
  font-size: 27px;
  font-size: 2.7rem;
  line-height: (30/26.8); /* 30px */
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  color: $black;
  padding-top: 40px;
  padding-top: 4.0rem;
  padding-bottom: 0;
  padding-left: 10px;
  display: block;
  border-left: 3px solid #bbb;
  background: image-url("coa-default-27.png") no-repeat 10px 0;

  span {
    position: relative;
    top: 5px;
  }
}

@mixin logo-23 {
  font-family: $Helvetica-Regular;
  font-size: 23px;
  font-size: 2.3rem;
  line-height: (30/23); /* 30px */
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  padding-top: 1px;
  padding-top: 0.1rem;
  padding-bottom: 4px;
  padding-bottom: 0.4rem;
}


@mixin logo-19 {
  font-family: $Helvetica-Regular;
  font-size: 19px;
  font-size: 1.9rem;
  line-height: (20/19); /* 20px */
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  color: $black;

  @media (max-width: 640px) {
    font-size: 1.3rem;
    line-height: (15/13)
  }

  padding-top: 26px;
  padding-top: 2.6rem;
  padding-bottom: 0px;
  padding-bottom: 0rem;
  padding-left: 7px;
  padding-left: 0.7rem;

  @media (max-width: 640px) {
    padding-top: 20px;
    padding-top: 2rem;
  }

  display: block;

  border-left: 2px solid #bbb;
  background: image-url("coa-default-24.gif") no-repeat 8px 0;

  @media (max-width: 640px) {
    background-image: image-url("coa-default-18.gif");
  }
  span {
    position: relative;
    top: 2px;
  }

  &.single-line {
    padding-top: 5px;
    padding-top: 0.5rem;
    padding-bottom: 5px;
    padding-bottom: 0.5rem;
    padding-left: 45px;
    padding-left: 4.5rem;

    background-position: 8px 50%;
    span {
      top: 0;
      position: static;
    }
    @media (max-width: 640px) {
      padding-top: 1px;
      padding-top: 0.1rem;
      padding-bottom: 1px;
      padding-bottom: 0.1rem;
      padding-left: 31px;
      padding-left: 3.1rem;
      background-position: 5px 50%;
    }
  }
}


@mixin logo-13 {
  font-family: $Helvetica-Regular;
  font-size: 13px;
  font-size: 1.3rem;
  line-height: (20/13); /* 20px */
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  letter-spacing: 0;
  text-transform: none;
  padding-top: 5px;
  padding-top: 0.5rem;
  padding-bottom: 5px;
  padding-bottom: 0.5rem;
}

 @mixin bold {
    //  font-weight: 800;
  }
