// Public header styles // --------------------------------------------------

@import "compass/css3/images";
@import "compass/css3/inline-block";
@import "compass/css3/border-radius";
@import "compass/css3/box-shadow";
@import "compass/css3/transform";
@import "compass/css3/transition";
@import "../old_common/vars";
@import "../plugins/tipsy";
@import "../old_common/mixins";

.cartodb-public-header {
  @include background(image-url('layout/gradient.jpg') repeat-x center center #429FDF);
  display: block;
  position: relative;
  z-index: 10;
  width: auto;
  height: 67px;
  margin: 0;
  padding: 0;
  border: none;
  box-shadow: none;
  font-family: $text-fonts;
}

// Inner block
.cartodb-public-header .inner {
  width: auto;
  max-width: 1024px;
  margin: auto;
  padding: 0 20px;
  clear: both;
  overflow: hidden;
}

// h1 reset style
.cartodb-public-header h1 {
  margin: 0;
}

// Logo
.cartodb-public-header .logo {
  @include background(image-url('layout/cartodb_logo_with_cartofante.png') no-repeat);
  display: block;
  width: 128px;
  height: 39px;
  margin: 14px 0;
  float: left;
  font-size: 0;
  line-height: 67px;
  line-height: 0;
  text-indent: -9999px;
  text-transform: uppercase;
}

// Options
.cartodb-public-header .options {
  display: block;
  width: auto;
  height: 67px;
  margin: 0;
  float: right;

  li {
    display: inline-block;
    margin-left: 0;
    line-height: 64px;
    vertical-align: top;
    vertical-align: middle;

    &:first-child a {
      margin-left: 0;
    }
  }

  // Options link
  a {
    padding: 10px 18px;
    transform-style: linear;
    transition: background 150ms;
    border-radius: 50px;
    color: WHITE;
    font-family: 'ProximaNova', Arial;
    font-size: 12px;
    text-decoration: none;
    text-transform: uppercase;

    &:hover {
      background: rgba(#000, 0.1);
    }
  }

  // Options link with border
  a.border {
    margin-left: 10px;
    padding: 8px 20px;
    border: 2px solid white;

    &:hover {
      background: WHITE;
      color: #2E72A3;
    }
  }

  // Options with old font (editor font)
  a.editor {
    margin-left: 10px;
    padding: 0 0 0 20px;
    border: none;
    font-family: $text-fonts, Arial;
    font-size: 15px;
    font-weight: 300;
    text-transform: none;

    &:hover {
      background: none;
      color: WHITE;
      text-decoration: underline;
    }
  }

  // Account link
  a.account {
    position: relative;
    margin-left: 20px;
    padding: 0 20px 0 0;

    span.separator {
      position: absolute;
      top: 50%;
      right: 12px;
      width: 1px;
      height: 14px;
      margin-top: -6px;
      background: #8FBADE;
    }
  }
}

/* Hello media queries */

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
  .cartodb-public-header .logo {
    @include background(image-url('layout/cartodb_logo_with_cartofante@2x.png') no-repeat !important);
    background-size: 128px 35px !important;
  }
}

@media only screen and (min-width: 351px) and (max-width: 710px) {
  .options a.clone {
    display: none;
  }
}

/* iPhone portrait */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: portrait) {
  .cartodb-public-header {
    .logo {
      width: 96px;
      height: 27px;
      margin: 19px 0 0;
      background-size: 96px 27px !important;
    }

    .options a {
      display: none;
    }

    .options .account {
      display: flex;
      padding: 8px 10px;
      font-size: 11px;
    }

    .options .login,
    .options .signup {
      display: inline;
      padding: 8px 10px;
      font-size: 11px;
    }
  }
}