@import (reference) '../id7.less';
@import (reference) 'hp.less';

.apply-brand(@brand-colour);

.id7-utility-masthead {
  background-color: @brand-colour;
}

.id7-left-border, .id7-right-border {
  background-color: #65686B;
}

// Fiddle me this
@media (min-width: @screen-lg-min) {
  .col-lg-10.col-lg-offset-1 {
    margin-left: 5%;
    width: 90%;
  }
}

@id7-site-footer-colour: #e6e6e6;
@site-footer-text-colour: contrast(@id7-site-footer-colour, @text-color, white, 50%);
@site-footer-link-hover-colour: #0073BB;

// Reverse footer colours
.id7-page-footer {
  &.id7-footer-coloured {
    .id7-site-footer {
      background: @id7-site-footer-colour;
      color: @site-footer-text-colour;
      .header-colour(@site-footer-text-colour);
      .link-colour(@site-footer-text-colour, @site-footer-link-hover-colour);
    }

    .id7-app-footer {
      .id7-logo-bleed {
        .logo-as-css-colour(@id7-site-footer-colour);
      }
    }
  }

  .id7-site-footer {
    font-size: floor((@font-size-base * 1.15));
    @media (min-width: @screen-sm-min) {
      font-size: floor(@font-size-base * 1.3);
    }

    h3 {
      margin-top: (@line-height-computed / 2);
      font-size: ceil((2.6rem * @font-scale-xs));

      @media screen and (min-width: @grid-float-breakpoint) {
        margin-top: @line-height-computed;
        font-size: 2.6rem;
      }
    }
  }
}

// Map things
@map-pin-colour: #EF4050;

.id7-site-footer {
  // When there's no map, add bottom padding to match the top/left/right
  padding-bottom: @grid-gutter-width;

  @media screen and (min-width: @screen-md-min) {
    padding-bottom: 0;
  }

  // Avoid being clipped on the .media-left
  .map-location i {
    text-align: center;
    width: 1em;
  }

  .map-location i {
    color: @map-pin-colour;
    font-size: 2.6rem;
  }

  .map-column {
    > a i {
      transition: 300ms font-size;
    }

    // Hovering over the column itself on non-touch devices
    @media (hover: hover) {
      &:hover > a i {
        &.fa-circle {
          font-size: 1.8rem;
        }

        &.fa-map-marker-alt {
          font-size: 3.2rem;
        }
      }
    }
  }

  // Added by JS when hovering over the links in .map-location or .map-column
  &.hovered {
    .map-location a {
      color: @site-footer-link-hover-colour !important;
      text-decoration-color: @site-footer-link-hover-colour !important;
    }

    .map-column > a i {
      &.fa-circle {
        font-size: 1.8rem;
      }

      &.fa-map-marker-alt {
        font-size: 3.2rem;
      }
    }
  }

  .map-column {
    display: none;

    @media (min-width: @grid-float-breakpoint) {
      margin: @grid-gutter-width 0;
    }

    @media (min-width: @screen-md-min) {
      display: block;
      margin-top: -@grid-gutter-width;
    }

    > a {
      display: block;
      position: relative;

      i {
        position: absolute;

        // Make it so that the pin point is positioned at the top left of the element as that's what we're positioning
        transform: translateX(-50%) translateY(-100%);

        &.fa-circle {
          color: @map-pin-colour;
          font-size: 1.2rem;

          top: 45%;
          left: 55.2%;
        }

        &.fa-map-marker-alt {
          color: white;
          font-size: 2.6rem;

          top: 49%;
          left: 55%;
        }
      }
    }
  }
}