// Structural elements body {

background: $backgroundColour;
color: $bodyColour;
height: 100%;
display: flex;
@include flex-direction(column);
overflow-x: hidden;

}

.container {

width: 90%;
max-width: 1200px;
margin: 0 auto;

}

// Header, feature and footer .header, .footer {

.nav {
  text-align: right;
}
.logo {
  @include flex(0 0 auto);
}
.container {
  @include flexbox;
  @include flex-direction(row);
  @include justify-content(space-between);
  padding: 1rem 0;
  @include breakpoint(break-1) {
    @include align-items(center);
  }
}

}

.header .nav {

display: flex;
flex-direction: column-reverse;
align-items: flex-end;
justify-content: flex-end;
overflow: hidden;

}

.feature {

padding-bottom: .4rem;
margin-bottom: 1.6rem;
text-align: center;
background: $featureBackgroundColour;
background-size: cover;
background-position: center;
.container {
  min-height: 35vh;
  max-width: 60%;
  @include flex-direction(column);
  @include justify-content(center);
}

}

.logo {

display: inline-block;
line-height: 0;
max-height: 4rem;
@include flexbox;
@include align-items(center);
img {
  max-height: 5rem;
}

}

.nav {

a {
  padding: .2rem;
}
&--social a {
  display: inline-block;
  line-height: 1;
}

}

.small {

padding-top: .8rem;
color: $captionColour;
display: inline-block;

}

.footer {

background: $headingColour;
color: $captionColour;
a {
  color: $captionColour;
  &:hover {
    color: $backgroundColour;
  }
}
.container {
  @include flex-wrap(wrap);
}
.small {
  padding-top: 0;
}

}

// Pagination nav .nav–paginator {

@include flexbox;
@include justify-content(space-between);
color: $captionColour;
text-align: center;

}

.pagination {

min-width: 20%;

}

// Main content .main {

@include flexbox;
@include flex-direction(column);
@include flex(1, 0, auto);
@include justify-content(flex-start);
margin-bottom: 1.6rem;
@include breakpoint(break-1) {
  @include justify-content(center);
  @include flex-direction(row);
}

}

.header, .feature, .footer {

@include flex(0, 0, auto);

}

.content {

@include breakpoint(break-1) {
  width: 62%;
}

}

.share .button {

margin-right: .3rem;

}

.aside {

@include breakpoint(break-1) {
  max-width: 34%;
  margin-left: 4%;
  @include flex(1, 0, auto);
  opacity: 0.5;
  transition: opacity .1s;
  .section {
    position: sticky;
    top: 0;
  }
  &--left {
    margin-left: 0;
    margin-right: 4%;
    order: -1;
  }
  &:hover {
    opacity: 1;
  }
}

}

.section {

margin: 0;

}

// Lists .list {

list-style: none;
&--nav {
  overflow: hidden;
  margin-bottom: var(--listHeight, 0);
}
.item--post,
.item--result,
.item--category {
  margin-left: 0;
}

}

.item {

&--nav {
  @include breakpoint(break-1) {
    margin-left: .4rem;
    display: inline-block;
  }
  &:first-of-type {
    margin-left: 0;
  }
}
&--current {
  a {
    color: $captionColour;
  }
}

}

// Links, icons and images a .icon {

transition: fill .1s;
&:hover {
  fill: currentColor;
}

}

.icon {

vertical-align: middle;
width: 1.1em;
height: 1.1em;
fill: CurrentColor;

}

// Media content img {

max-width: 100%;
height: auto;

}

.figure {

line-height: 0;
&--left {
  float: left;
  padding-right: .8rem;
}
&--right {
  float: right;
  text-align: right;
  padding-left: .8rem;
}
&--center {
  text-align: center;
  clear: both;
}

}

.video, .map {

position: relative;
padding-bottom: 56.25%;
height: 0;
iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

}

.map {

padding-bottom: 70%;

}

.figure, .video, .map, .form {

margin-bottom: .8rem;

}

audio, video {

width: 100%;

}

// Form elements and buttons .form {

position: relative;
&__legend {
  font-style: italic;
  color: $captionColour;
  position: absolute;
  overflow: hidden;
  right: 0;
  clip: rect(0 0 0 0);
}

}

button, .button, input, input, input, input, input, textarea, select {

padding: .6rem 1.2rem;
margin-bottom: .6rem;
transition: color .1s, background-color .1s, border .1s;
line-height: inherit;
border: none;
box-shadow: none;
border-radius: 0;
-webkit-appearance: none;
.icon {
  margin: 0 0 .35rem;
}

}

input, button, .button {

cursor: pointer;
display: inline-block;
color: $backgroundColour;
background: $accentColour;
transition: box-shadow .1s;
will-change: box-shadow;
box-shadow: inset 0 0 0 2rem transparent;
&:hover {
  box-shadow: inset 0 0 0 2rem rgba(0,0,0,0.25);
}
&:active,
&:focus {
  box-shadow: inset 0 0 0 2rem rgba(0,0,0,0.25);
}

}

.button–nav {

@include breakpoint(break-1) {
  display: none;
}
background: none;
color: $linkColour;
margin-bottom: 0;
min-height: 4rem;
min-width: 4rem;
&:hover,
&:focus {
  box-shadow: none;
  color: $hoverColour;
}

}

a, button, .button, input, textarea, select {

&:focus,
&:hover:focus {
  outline: solid .12rem $focusColour;
  outline-offset: -.12rem;
}

}

a:hover:focus {

outline: none;

}

input, input, input, input, textarea, select {

width: 100%;
border: 1px solid $captionColour;
&:hover {
  border-color: $bodyColour;
}

}

select {

background: $codeBackgroundColour;

}

textarea {

resize: vertical;

}

label {

@include baseline($fontsize: zeta, $font: $bodytype, $lineheight: 2, $below: 2, $breakpoint: all);

}

code {

padding: .12rem .2rem;
color: $headingColour;

}

pre code {

padding: 0;

}

.required {

color: red;

}

::-webkit-input-placeholder {

opacity: 0.5;

} ::-moz-placeholder {

opacity: 0.5;

} :-ms-input-placeholder {

opacity: 0.5;

} :-moz-placeholder {

opacity: 0.5;

}

::selection {

background: $headingColour;
color: $backgroundColour;
text-shadow: none;

}

// Sassline overrides .typeset {

a > code {
  text-shadow: none;
}
.button,
button {
  background-image: none;
  text-shadow: none;
  color: $backgroundColour;
  &:hover,
  &:active,
  &:focus {
    background-image: none;
    color: $backgroundColour;
  }
}
hr {
  width: 100%;
}
li {
  > p {
    padding: 0;
    margin: 0;
  }
}
.nav a {
  padding-left: 0;
  padding-right: 0;
  margin-left: .2rem;
  margin-right: .2rem;
}
pre {
  white-space: pre;
  overflow-x: scroll;
}

}