EOL/ggi

// Modules: layout and positioning of sub panels e.g. search form

.visually-hidden {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

article {
  padding-top: rhythm(2);
  &.list {
    text-align: center;
  }
  &.narrow {
    width: 92%;
    margin: {
      left: rhythm(1);
      right: rhythm(1);
      bottom: rhythm(2);
    }
    a:link {
      color: #44a;
    }
    img {
      max-width: 25em;
    }
    @include breakpoint($ggi-breakpoint-larger) {
      width: 60%;
      margin: {
        left: auto;
        right: auto;
        bottom: rhythm(2);
      }
    }
  }
  margin-left: rhythm(1);
  @include breakpoint($ggi-breakpoint-large) {
    margin-left: 0;
  }
}

.list__links {
  li {
    @include no-bullet;
  }
  a {
    display: inline-block;
  }
}

.list__tabs {
  @extend .list__links;
  @include inline-block-list(rhythm(0.5));
}

dl {
  overflow: hidden;
  margin-top: 0;
}

dt {
  float: left;
  padding-right: rhythm(0.5);
  clear: both;
}

dd {
  margin-left: 0;
}

hr {
  clear: both;
}

figure {
  margin: 0;
  padding: 0;
  width: 100%;
}

figcaption p {
  margin: 0;
}

figure.float {
  clear: both;
  width: 320px;
  max-width: 50%;
  img {
    width: 100%;
  }
  float: left;
  margin: 1em 2em 2em 1em;
}

table {
  width: 72%; // As wide as possible (w/ breathing rm), within:
  min-width: 21em;
  max-width: 29em;
  @include breakpoint($ggi-breakpoint-large) {
    margin: 0 auto;
  }
  padding: 0 rhythm(1);
}

caption {
  text-align: left;
}

th {
  text-align: left;
}

th, td {
  @include adjust-leading-to(1.5);
}

nav {
  font-size: 0.9em;
  ul {
    @extend .list__tabs;
  }
}

.search {

  height: rhythm(1.5); // Seems to fix phone problems.

  @include breakpoint(10em) {
    font-size: 0.7em;
  }
  @include breakpoint($ggi-breakpoint-huge) {
    font-size: 1em;
  }

  margin: {
    top: rhythm(0.25);
    bottom: rhythm(0.5);
  }
  h2 {
    @extend .visually-hidden;
  }
  label {
    @extend .visually-hidden;
    display: block;
  }
  .term {
    float: left;
    width: 70%;
    input {
      width: 100%;
    }
  }
  .actions {
    float: right;
    width: 20%;
    margin: {
      top: 0;
      right: rhythm(0.3);
    }
  }
}

.tree--taxonomy {
  clear: both;

  a.toggle {
    font-weight: bold;
    text-decoration: none;
  }
}

.ui-autocomplete {
  li {
    @include trailing-border(1px, 0);
    &:last-child {
      border-bottom: none;
    }
  }
}

.autocomplete-item {
  display: block;
  min-height: rhythm(3);
  span {
    display: block;
  }
  &--with-image {
    position: relative;
    padding-right: rhythm(3);
  }
  &__thumbnail {
    position: absolute;
    top: 0;
    right: 0;
    width: rhythm(3);
  }
}

.tagline {
  h2 {
    @extend .visually-hidden;
  }
}

.browser {
  max-width: 32em;
  > h2 {
    @extend .visually-hidden;
  }
  position: relative;
  nav {
    li {
      padding: 0;
    }
    a {
      padding: rhythm(0.5);
    }
  }
}

.browser__actions {
  font-size: 0.9em;
  position: absolute;
  top: rhythm(1);
  right: rhythm(1);
}

.tree {
  margin-top: 0;
  padding-left: 0;
  ul {
    padding: 0 0 0 rhythm(0.5);
  }
}

.toggle {
  display: inline-block;
  padding-left: rhythm(0.5);
  padding-right: rhythm(1);
}

.tree__item {
  white-space: nowrap;
}

.information__header,
.assessment__header,
.measurements__caption {
  @extend .visually-hidden;
}

.nomenclature__label {
  &--classification,
  &--common-name {
    @extend .visually-hidden;
  }
}

.measurement__label, .measurement__datum {
  &--score, &--value {
    text-align: right;
  }
}

.assessment__measurements {

  font-size: 1.1em;

  thead tr {
    border-bottom: 1px solid map-get($ggi-colors, dark);
  }

  tbody tr:last-child {
    th {
      font-weight: bold;
    }
    font-weight: bold;
    border-top: 3px solid map-get($ggi-colors, dark);
  }

  a.info {
    width: 20px;
    height: 20px;
    background-size: 20px 20px;
  }

}

footer.page__footer {
  h2 {
    @extend .visually-hidden;
  }
  ul {
    @extend .list__links;
    overflow: hidden;
    padding: 0;
    margin: 0;
  }
  @include susy-breakpoint($ggi-breakpoint-medium, 1) {
    li {
      &:nth-of-type(1) {
        @include span(2 at 1 of 3);
      }
      &:nth-of-type(2) {
        @include span(1 at 3 of 3);
      }
    }
  }
  @include susy-breakpoint($ggi-breakpoint-medium, 1) {
    li {
      &:nth-of-type(2) {
        width: 20em;
      }
    }
  }
  @include susy-breakpoint($ggi-breakpoint-medium, 1) {
    li {
      &:nth-of-type(2) {
        text-align: right;
      }
    }
  }
}

.footer__link--eol {
  margin: rhythm(1);
}