// Adds combination of margin and padding to headings to make them appear // correctly when they're linked to as anchors, and scale them on mobile // TODO: Headings are hidden underneath the sticky 'table of contents' on mobile // when following a link to them

@mixin heading-offset($tabletTopMargin) {

// Scale margins with font size on mobile (16/19ths)
$mobileTopMargin: ceil($tabletTopMargin * (16 / 19));

padding-top: min($mobileTopMargin, $gutter-half);
margin-top: max(0, $mobileTopMargin - $gutter-half);

@include media(tablet) {
  padding-top: min($tabletTopMargin, $gutter);
  margin-top: max(0, $tabletTopMargin - $gutter);
}

}

.technical-documentation {

// Required for IE11 to render <main> correctly
display: block;
margin: 0 $gutter-half 10px;
max-width: 40em;

line-height: 1.4;

color: $text-colour;

@include media(tablet) {
  // We add 2 pixels to the gutter here to ensure there's sufficient spacing between
  // an anchor link (see _anchored-heading.scss) on a heading and the left-hand pane.
  margin: 0 ($gutter + 2px) $gutter;
}

.has-search-results-open & {
  visibility: hidden;
}

// Headings
h1 {
  @include bold-48;
  @include heading-offset($gutter * 2);
  border-top: 5px solid $text-colour;

  &:first-of-type {
    @include heading-offset($gutter);
    border-top: none;
  }
}

h2 {
  @include bold-36;
  @include heading-offset($gutter * 1.5);
}

h3, h4, h5, h6 {
  @include heading-offset($gutter);
}

h3 {
  @include bold-24;
}

h4 {
  @include bold-19;
}

h5 {
  @include bold-19;
  color: $secondary-text-colour;
}

h6 {
  @include core-19;
  color: $secondary-text-colour;
}

// Expand margin when h1 followed directly by paragraph
h1 + p {
  @include media(tablet) {
    margin-top: $gutter * 1.5;
  }
}

// Tighten up margins where headings follow each other
h1 + h2 {
  @include heading-offset($gutter);
}

h2 + h3, h3 + h4, h4 + h5, h5 + h6 {
  @include heading-offset(20px);
}

p {
  margin-top: ceil($gutter-half * (16 / 19));
  margin-bottom: 0;

  @include media(tablet) {
    margin-top: $gutter-half;
  }
}

img {
  max-width: 100%;
  width: auto;
  height: auto;
}

ol, ul {
  margin: $gutter-half 0 0;
  padding-left: 20px;
}

ol ol, ul ul, ol ul, ul ol {
  margin-top: 0;
}

li {
  margin-top: 5px;
}

ol + p, ul + p, .table-container + p {
  margin-top: ceil($gutter * (16 / 19));

  @include media(tablet) {
    margin-top: $gutter;
  }
}

blockquote {
  background: $grey-4;
  padding: $gutter-half;
  margin: $gutter-half;
  border-left: 5px solid $grey-3;
}

pre {
  background: $code-00;
  padding: 15px;
  overflow: auto;
  position: relative;
  border: 1px solid $code-02;
  // Restrict the width of pre tags, as they have a tendency grow larger than
  // the viewport when placed within table cells.
  // @todo: Use table-layout: fixed, and remove the max-width definition from
  // .technical-documentation so tables can fill the viewport.
  max-width: 40em;
}

pre code {
  background: none;
  color: inherit;
  padding: 0;
}

code {
  background: $code-01;
  padding: 3px 5px;
  border-radius: 1px;

  font-family: monaco, Consolas, "Lucida Console", monospace;
  font-size: 15px;
  color: $code-0E;

  @include media(tablet) {
    font-size: 16px;
  }

  // Handle long strings (URLs, long variable names, etc) by allowing them
  // to break anywhere if required.
  overflow-wrap: break-word;
  word-wrap: break-word;

  -ms-word-break: break-all;
  /* This is the dangerous one in WebKit, as it breaks things wherever */
  word-break: break-all;
  /* Instead use this non-standard one: */
  word-break: break-word;
}

// Support monospace headings for e.g. listing API endpoints
h1, h2, h3, h4, h5, h6 {
  code {
    font-size: inherit;
    color: $text-colour;
    background: none;
    padding: 0;
  }
}

.table-container {
  display: block;
  max-width: 100%;
  overflow-x: auto;

  margin-top: $gutter-half;
}

table {
  width: 100%;

  border-collapse: collapse;
  border-spacing: 0;
}

th, td {
  padding: $gutter-one-third $gutter-two-thirds $gutter-one-third 0;

  background-color: transparent;
  border-bottom: 1px solid $border-colour;
  border-width: 0 0 1px 0;

  @include core-16;
  vertical-align: top;
  text-align: left;
}

th {
  font-weight: bold;
}

td {
  p, ul, ol {
    margin: 0;
  }
  p+p, p+ul, p+ol,
  ul+p, ul+ol,
  ol+p {
    margin-top: $gutter-one-third;
  }
}

hr {
  height: 1px;
  border: none;
  margin-top: $gutter - 1px;
  margin-bottom: $gutter;
  background-color: $border-colour;
  color: $border-colour;
}

}