assets/stylesheets/site.css.scss
@charset "UTF-8";

// This is Sass, not straight-up Sprockets.
// Instead of using `= require_self` and `= require_tree .`, use @import instead, e.g.,
//
//   @import "products";
//
// Sprockets is kinda stupid sometimes. Better to require things explicitly.
//
//
// .rule {
//   @extend .first;
//   @include second;
//   alphabetical: properties;
//   go: here;
// }
//

// Global imports
@import '~flask';

// Variables -------------------------------------------------------------------
@import "globals";

// Config
@import '_config/**/*';

// External Libraries
@import '_lib/**/*';

// Libraries and patterns ------------------------------------------------------
@import "patterns/all";

// Syntax highlighting
@import "components/code";
@import "components/syntax";

// Icons
@import "components/icons";

// Statuses table
@import "components/statuses";

// Admonitions
@import "components/admonitions";

// Resets ------------------------------------------------------
@include reset;

// Layout ----------------------------------------------------------------------

.hide-mobile {
  @include mobile {
    display: none;
  }
}

.hide {
  display: none;
}

*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

@mixin col($col, $sum) {
  box-sizing: border-box;
  display: inline-block;
  padding-left: 15px;
  padding-right: 15px;
  width: percentage($col/$sum);

  @media (min-width: 768px) {
    width: percentage($col/$sum);
  }
}

@include standard-links-no-underline;

body {
  font-family: $primary-font;
  font-size: 17px;
  line-height: 1.5;

  @media (min-width: 320px)
  and (max-width: 900px) {
    font-size: 15px;
  }

  // sticky footer
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

main {
  flex: 1;
}

.article-list {
  margin-left: auto;
  margin-right: auto;
  @include desktop {
    max-width: 66.666667%;
  }
}

.article-list ul li {
  border-bottom: 1px solid #ddd;
  padding-bottom: 20px;
  padding-top: 30px;

  @include tablet {
    padding-left: 15px;
    padding-right: 15px;
  }
  @include mobile {
    padding-left: 15px;
    padding-right: 15px;
  }

  &:last-of-type {
    border-bottom: 0;
  }
}

.btn {
  background-color: $teal;
  border-radius: 4px;
  color: #FFFFFF;
  font-weight: $primary-font-bold-weight;
  font-size: 14px;
  padding: 12px 20px;
  text-align: center;
  transition: background-color 100ms ease;

  &:hover {
    background-color: shade( $teal, 5% );
    color: $white;
  }
}

.btn-social {
  @extend .btn;

  @include mobile {
    @include col(1,1);
    margin-bottom: 10px;
  }

  display: inline-block;
  margin-right: 15px;
  vertical-align: top;

  &:last-of-type {
    margin-right: 0;
  }
}

.btn-view-gems {
  @extend .btn;

  @include desktop {
    margin-top: 50px;
  }

  @include tablet {
    margin-top: 20px;
  }

  @include mobile {
    margin-top: 0;
    width: 100%;
  }

  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 140px;
}

.content-wrap {
  margin-left: auto;
  margin-right: auto;
  max-width: 1200px;
  @include mobile {
    max-width: 100%;
  }
  @include tablet {
    max-width: 900px;
  }
}

.content__features-list-item {
  @include col(1,3);
  padding-left: 50px;
  padding-right: 50px;
  text-align: center;

  @include mobile {
    @include col(1,1);
  }
}

.features-list-img {
  height: 64px;
  margin-bottom: 25px;
}

.features-list-img-door {
  @extend .features-list-img;
  background: url('/images/icon-door.png') no-repeat center center;

  @media screen
  and (min-resolution: 2dppx) {
    background: url('/images/icon-door@2x.png') no-repeat center center;
    background-size: contain;
  }
}

.features-list-img-flexible {
  @extend .features-list-img;
  background: url('/images/icon-flexible.png') no-repeat center center;

  @media screen
  and (min-resolution: 2dppx) {
    background: url('/images/icon-flexible@2x.png') no-repeat center center;
    background-size: 64px;
  }
}

.features-list-img-lightning {
  @extend .features-list-img;
  background: url('/images/icon-lightning.png') no-repeat center center;

  @media screen
  and (min-resolution: 2dppx) {
    background: url('/images/icon-lightning@2x.png') no-repeat center center;
    background-size: contain;
  }
}

.content__additional-features-list-item {
  @include col(1,4);

  @include tablet {
    @include col(1,2);
  }

  @include mobile {
    @include col(1,1);
  }
}

.content__code-snippets-list-item {
  @include col(1,3);

  @include tablet {
    @include col(2,3);
    margin-left: calc(100% / 6 * 1);
  }

  @include mobile {
    @include col(1,1);
  }

}

.content__gems-list {
  display: flex;
  flex-wrap: wrap;
}

.content__gems-list-item {
  @include col(1,4);
  display: flex;
  padding-bottom: 30px;

  @include tablet {
    @include col(1,2);
    display: flex;
  }

  @include mobile {
    @include col(1,1);
    display: flex;
  }

}

.content__gems-list-item a {
  background: #FFFFFF;
  border: 1px solid #DDDDDD;
  border-radius: 4px;
  display: block;
  padding: 20px;
  transition : border 100ms ease-out;
  width: 100%;

  h3 {
    color: $dark-grey;
  }

  &:hover {
    border: 1px solid #34BACF;
    box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.10);
  }
}

footer {
  background-color: $dark-teal;
  background-image: url(/images/bg-header.png);
  background-position: center center;
  background-size: cover;
  color: $white;
  padding-bottom: 40px;
  padding-top: 40px;
  width: 100%;
}

.footer__links {
  display: block;
  text-align: center;
}

.footer__links ul {
  display: block;

  @include desktop {
    display: inline-block;
  }
}

.footer__links li {
  display: block;
  margin-bottom: 0.5em;

  @include desktop {
    display: inline-block;
  }
}

.footer__links li:after {
  @include desktop {
    content: "\00b7";
  }
}

.footer__links li:last-of-type:after {
  @include desktop {
    content: "";
  }
}

.footer__links li a {
  padding-left: 1em;
  padding-right: 1em;
}

.footer__links li a span {
  border-bottom: 2px solid rgba(255,255,255,0);
  color: $white;
  padding-bottom: 3px;
  transition: border 250ms ease;

  &:hover,
  &:focus {
    border-bottom: 2px solid rgba(255,255,255,.3);
  }

  @include tablet {
    padding-bottom: 1px;
  }
  @include mobile {
    padding-bottom: 1px;
  }
}

.footer__credits {
  margin-top: 2em;
  text-align: center;

  p {
    color: $white;
    display: inline-block;
    font-size: 13px;
    margin-bottom: 0;
  }

  a {
    color: $white;
    font-weight: $primary-font-bold-weight;

    &:hover {
      text-decoration: underline;
    }
  }
}

.gem-header {
  margin-bottom: 0;
}

.gem-article {
  @include col(3,4);

  @include mobile {
    @include col(1,1);
  }
}

header {
  background-color: $dark-teal;
  background-image: url(/images/bg-header.png);
  background-position: center center;
  background-size: cover;
  color: $white;
  font-smoothing: antialiased;
  -webkit-font-smoothing: antialiased;
  padding-bottom: 20px;
  width: 100%;
}

hr {
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  height: 1px;
  display: block;
  margin-bottom: 60px;
  margin-top: 60px;

  @include tablet {
    margin-bottom: 40px;
    margin-top: 40px;
  }

  @include mobile {
    margin-bottom: 30px;
    margin-top: 30px;
  }
}

.intro-home {
  clear: both;
  margin-top: 60px;
  padding-bottom: 60px;
  text-align: center;
  @include mobile {
    padding-bottom: 50px;
    margin-left: 0;
    margin-top: 50px;
  }
}

.intro-page {
  border-bottom: 1px solid $light-blue;
  padding-top: 15px;
  padding-bottom: 17px;
  h1 {
    color: $dark-teal;
    font-weight: $primary-font-bold-weight;
    font-size: 24px;
    a {
      color: $dark-teal;
    }
  }
}
  .intro-page--content {
    padding-top: 30px;
    padding-bottom: 30px;
    h1 {
      font-size: 31px;
      line-height: 1.25;
    }
  }

.intro-page__inner {
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
  &:after {
    content: "";
    display: table;
    clear: both;
  }
  .intro-page__header {
    float: left;
  }
  .intro-page__link {
    float: right;
    margin-bottom: 0px;
    padding-top: 8px;
  }
  .intro-page--content & {
    @include desktop {
      max-width: 66.66667%;
    }
  }
}

.content-wrap--news-and-twitter {
  @include clearfix-micro;
}

.section-news {
  @include desktop {
    float: left;
    padding-right: 30px;
    width: 55%;
  }
  @include tablet { padding-bottom: 30px; }
  @include mobile { padding-bottom: 20px; }
}

.section-twitter {
  @include desktop {
    float: left;
    padding-left: 30px;
    width: 45%;
    & > iframe[style] { margin-top: -10px !important; }
  }
}

.news-index {
  margin-left: auto;
  margin-right: auto;
}

.news-pagination {
  float: right;
  font-size: 15px;
  padding-top: 8px;
}
  .news-pagination__links {
    display: inline-block;
    margin-left: 20px;
    a {
      display: inline-block;
      &:hover,
      &:focus {
        text-decoration: underline;
      }
      &:last-child {
        padding-left: 15px;
      }
      &:first-child {
        padding-left: 0;
      }
    }
  }

.news-article-meta {
  color: #999;
  font-size: 0.8em;
  margin-top: 5px;
  a:hover,
  a:focus {
    color: $light-blue;
  }
}

.content-article,
.news-article {
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
  @include desktop {
    max-width: 66.666667%;
  }
  strong {
    font-weight: $primary-font-bold-weight;
  }
}

.content-article-wide {
  @include desktop {
    max-width: 100%;
  }
}


.news__list-item {
  border-bottom: 1px solid $light-blue;
  padding-bottom: 20px;
  padding-top: 30px;

  &:first-of-type {
    padding-top: 0;
  }

  &:last-of-type {
    border-bottom: 0;
    padding-bottom: 0;
  }

}

.news__list-item-anchor {
  display: block;
  .intro-home__news & {
    font-size: 15px;
    h3 {
      color: $white;
    }
    &:hover h3 {
      text-decoration: underline;
    }
  }
  &:hover,
  &:focus {
    h2 {
      text-decoration: underline;
    }
  }
}

.news__list-item-content {
  @include col(6,8);
  .intro-home__news & {
    @include col(8,10);
    @include mobile {
      @include col(1,1);
    }
  }

  @include mobile {
    @include col(1,1);
  }
}

.news__list-item-date {
  @include col(2,8);
  font-size: 14px;
  margin-top: 7px;
  vertical-align: top;
  .intro-home__news & {
    @include col(2,10);
    margin-top: 0;
    @include mobile {
      @include col(1,1);
    }
  }
  @include mobile {
    @include col(1,1);
    p { margin-bottom: 10px; }
  }
}

pre {
  background: $very-light-blue;
  border-radius: 4px;
  padding: 20px;
}

pre code {
  background: none;
  color: #999;
}

.code-caption {
  color: lighten($dark-grey, 15%);
  font-size: 0.88em;
}
  pre + .code-caption {
    margin-top: -12px;
    margin-bottom: 15px;
  }

.row {
  padding-bottom: 100px;
  padding-top: 30px;
  width: 100%;

  @include tablet {
    padding-top: 60px;
    padding-bottom: 60px;
  }

  @include mobile {
    padding-top: 40px;
    padding-bottom: 40px;
  }
}

.row-blue {
  @extend .row;
  background-color: $light-blue;
}

.sidebar {
  @include col(1,4);
  font-size: 16px;
  vertical-align: top;

  @include mobile {
    @include col(1,1);
    margin-bottom: 30px;
  }
  a {
    &:hover,
    &:focus {
      text-decoration: underline;
    }
  }
}

.sidebar li {
  padding: 0.25em 0;
}

.sidebar li .active {
  color: $dark-blue;
  font-weight: 900;
  text-decoration: underline;
}

.sidebar ul ul {
  border-left: 2px solid $light-blue;
  font-size: 14px;
  margin-top: 10px;
  padding-left: 15px;
  a {
    color: $dark-blue;
  }
}

.sidebar__version select {
  margin-left: 5px;
}

// Navigation ---------------------------------------------------------

.main-nav {
  font-weight: $primary-font-bold-weight;
  padding-top: 30px;
  text-align: right;
  @include tablet {
    text-align: center;
  }
  @include mobile {
    text-align: center;
  }
}

.main-nav__list {
  @include tablet {
    display: inline-block;
  }
  @include mobile {
    display: inline-block;
  }
}

.main-nav__list>li {
  display: inline-block;
  margin-right: 30px;
  position: relative;
  @include desktop {
    padding-bottom: 10px;
    &:last-child {
      margin-right: 10px;
    }
  }
  @include tablet {
    margin-right: 20px;
  }
  @include mobile {
    margin-right: 20px;
    &.main-nav__logo {
      display: block;
      float: none;
      margin-bottom: 10px;
    }
  }
}
.main-nav__logo {
  float: left;
  padding-left: 15px;
  padding-top: 3px;
  a {
    display: block;
    position: relative;
    margin-left: 45px;
    &:before {
      content: '';
      background-image: url('/images/logo-sml.png');
      background-repeat: no-repeat;
      background-position: 0 0;
      background-size: 100%;
      display: block;
      height: 30px;
      left: -45px;
      position: absolute;
      top: -3px;
      width: 30px;
      @media screen and (min-resolution: 2dppx) {
        background-image: url('/images/logo-sml@2x.png');
      }
    }
    &:hover,
    &:focus {
      border-bottom: none;
    }
  }
  @include mobile {
    a {
      margin-left: auto;
      margin-top: 45px;
      &:before {
        top: -45px;
        left: 50%;
        margin-left: -15px;
      }
    }
  }
}
.main-nav__list li.main-nav__search {
  @include mobile {
    margin-right: 8px;
  }
}

.main-nav__list>li>a {
  color: $white;
  color: rgba($white, 0.7);
  @include desktop {
    border-bottom: 2px solid rgba(255,255,255,0);
    padding-bottom: 3px;
    transition: border 250ms ease;

    &:hover,
    &:focus {
      border-bottom: 2px solid rgba(255,255,255,.3);
      color: $white;
    }
  }
}
.main-nav__list>.main-nav__item--selected>a {
  color: $white;
}

.main-nav__list li.main-nav__code {
  font-smoothing: subpixel-antialiased;
  -webkit-font-smoothing: subpixel-antialiased;
  a {
    border: 1px solid rgba(255,255,255,.3);
    background-color: rgba(255,255,255,0);
    border-radius: 3px;
    display: block;
    font-size: 13px;
    font-weight: normal;
    letter-spacing: 0.15em;
    padding: 6px 14px 6px;
    text-transform: uppercase;
    transition: border, background-color 250ms;
    &:hover,
    &:focus {
      border-color: rgba(255,255,255,.5);
      background-color: rgba(255,255,255,.08);
    }
  }
}

.main-nav__with-dropdown {
  padding-right: 16px;
  height: 40px;
  &:before {
    content: '';
    display: block;
    position: absolute;
    border-color: $white;
    border-width: 0;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-style: solid;
    right: 0;
    top: 9px;
    height: 5px;
    width: 5px;
    transform: rotate(45deg);
  }
  @include mobile {
    padding-right: 0;
    &:before {
      display: none;
    }
  }
}

.main-nav__dropdown {
  background-color: rgba(darken($dark-blue, 10%), 0.95);
  border-radius: 3px;
  display: none;
  font-weight: normal;
  font-size: 0.9em;
  position: absolute;
  margin-top: 10px;
  padding: 17px 25px 22px;
  margin-left: -25px;
  text-align: left;
  left: 0;
  z-index: 1;
  @include mobile {
    display: none !important;
  }
  :after {
    bottom: 100%;
    left: 70px;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(0, 0, 0, 0);
    border-bottom-color: darken($dark-blue, 10%);
    border-width: 5px;
    margin-left: -5px;
  }
  li:hover &,
  li:focus & {
    display: block;
    /* @include mobile {
      display: none;
    } */
  }
}
  .main-nav__dropdown--gems {
    min-width: 300px;
    ul {
      float: left;
      width: 50%;
    }
  }

  .main-nav__dropdown li {
    display: block;
  }
  .main-nav__dropdown a {
    color: rgba($white, 0.8);
    display: block;
    padding-top: 3px;
    padding-bottom: 3px;
    &:hover,
    &:focus {
      text-decoration: underline;
      color: $white;
    }
  }


// Typography
blockquote {
  border-left: 4px solid $teal;
  padding-left: 26px;
  margin-bottom: 40px;

  p {
    color: #666666;
  }
}

.center-text {
  text-align: center;
}

code {
  background: $light-blue;
  font-family: $code-font;
  font-size: 0.8em;
  padding-left: 5px;
  padding-right: 5px;
}

.intro-home code {
  background: transparent;
}

.intro-home__heading {
  font-size: 33px;
  @include mobile {
    font-size: 29px;
    line-height: 1.4;
  }
  strong {
    font-weight: $primary-font-bold-weight;
  }
}

.intro-home__sub-heading {
  margin-bottom: 40px;
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
  @include desktop {
    max-width: 66.66667%;
  }
  h2 {
    color: $white;
    line-height: 1.5;
    font-family: $primary-font;
    font-size: 19px;
    font-weight: normal;
  }
}

.intro-home__actions {
  font-smoothing: subpixel-antialiased;
  -webkit-font-smoothing: subpixel-antialiased;
  margin-bottom: 60px;
  a {
    border: 1px solid $teal;
    background-color: $teal;
    border-radius: 3px;
    color: $white;
    display: inline-block;
    font-size: 14px;
    font-weight: normal;
    letter-spacing: 0.15em;
    padding: 13px 20px 14px;
    margin-left: 5px;
    margin-right: 5px;
    text-transform: uppercase;
    transition: border, background-color 250ms;
    &:hover,
    &:focus {
      border-color: rgba(255,255,255,.5);
      background-color: rgba(255,255,255,.08);
    }
  }
  .intro-home__code {
    border: 1px solid rgba($teal,.8);
    background-color: rgba($teal,0);
    color: lighten($teal, 30%);
    transition: border, background-color, color 250ms;
    &:hover,
    &:focus {
      border-color: rgba(255,255,255,.5);
      background-color: rgba(255,255,255,.08);
      color: $white;
    }
  }
}

.intro-home__news {
  margin-left: auto;
  margin-right: auto;
  text-align: left;
  @include desktop {
    max-width: 66.66667%;
  }
}

.home-taster {
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 40px;
  padding-bottom: 30px;

  @include tablet {
    padding-top: 0;
  }
  @include mobile {
    padding-top: 0;
  }
}

.home-taster__intro {
  color: $mid-teal;
  font-size: 24px;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 50px;
  @include desktop {
    max-width: 60%;
  }
}

.taster__header {
  position: relative;
  margin-bottom: 20px;
  &:before {
    border-bottom: 1px solid darken($light-blue, 8%);
    content: '';
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
  }
  h3 {
    background-color: $white;
    color: $mid-blue;
    display: inline-block;
    font-size: 24px;
    margin-bottom: 0;
    padding-right: 10px;
    position: relative;
    @include mobile {
      font-size: 19px;
    }
    a:hover,
    a:focus {
      text-decoration: underline;
    }
  }
  .taster__link {
    background-color: $white;
    display: inline-block;
    float: right;
    font-size: 13px;
    font-weight: normal;
    letter-spacing: 0.15em;
    margin-top: 8px;
    padding-left: 10px;
    position: relative;
    text-transform: uppercase;
    @include mobile {
      font-size: 12px;
    }
  }
}

.taster__content {
  overflow: hidden;
  // Offset cols
  margin-left: -15px;
  margin-right: -15px;
}
  .taster__summary {
    @include col(2,5);
    vertical-align: top;
    @include mobile {
      @include col(1,1);
    }
  }
  .taster__example {
    @include col(3,5);
    vertical-align: top;
    @include mobile {
      @include col(1,1);
    }
  }

h2 {
  color: $mid-blue;
  font-weight: $primary-font-bold-weight;
  font-size: 23px;
  line-height: 1.35;
  margin-bottom: 12px;
  @include mobile {
    font-size: 16px;
  }
}

.section-heading {
  margin-bottom: 60px;
  text-align: center;

  @include tablet {
    margin-bottom: 40px;
  }
  @include mobile {
    margin-bottom: 30px;
  }
}

h3 {
  color: $dark-grey;
  font-weight: $primary-font-bold-weight;
  font-size: 1.1em;
  margin-bottom: 0.6em;
}

.content__additional-features-list-item h3 {
  color: $teal;
}

p {
  color: $dark-grey;
  margin-bottom: 0.9em;
}

.intro-home p {
  color: $white;
}

article h2, .article h3 {
  padding-top: 10px;

  &:first-child {
    padding-top: 0;
  }
}

article strong {
  font-weight: $primary-font-bold-weight;
}


article {
  color: $dark-grey;
}

article ul,
article ol {
  margin-bottom: 1.2em;
}

article ol {
  list-style: decimal;
}
article ol li {
  display: list-item;
  list-style-type: decimal;
  margin-left: 1em;
  padding-left: 0.5em;
}

article ul li:before {
  color: $dark-teal;
  content: "\2022"; /* Insert content that looks like bullets */
  position: absolute;
  top: 0;
  left: 0;
}

article ul li {
  margin-bottom: 8px;
  margin-left: 0.5em;
  padding-left: 1em;
  position: relative;
}

article a {
  text-decoration: underline;
}

// Community page

.community-resources {
  display: flex;
  flex-wrap: wrap;
  padding: 20px 0 30px;

  @include tablet {
    padding-bottom: 10px;
  }

  @include mobile {
    padding-bottom: 10px;
  }

  a:link, a:visited, a:hover, a:active {
    text-decoration: none;
  }

  a:hover, a:active {
    background-color: $light-grey;
  }

  .resource {
    @include col(1,3);
    border-radius: 5px;
    margin-left: 0;
    text-align: center;

    @include mobile {
      @include col(1,1);
      padding-bottom: 20px;
    }

    .name {
      @extend h2;
    }

    img, svg, span.ss-icon {
      max-width: 70%;
      margin: 0 auto;
      display: block;

      @include mobile {
        max-width: 35%;
      }
    }

    svg {
      padding: 20px;
    }
  }
}

.people {
  margin-top: 40px;
  padding-bottom: 30px;
  @include tablet {
    padding-bottom: 10px;
  }

  @include mobile {
    padding-bottom: 10px;
  }
}

.people-list {
  display: flex;
  flex-wrap: wrap;
  padding-top: 20px;
}

.people-list__item {
  @include col(1,3);
  display: flex;
  margin-left: 0;

  @include mobile {
    @include col(1,1);
    display: flex;
    padding-bottom: 20px;
  }
}

.people-list__item:before {
  content: none;
}

.person {
  position: relative;
  .circular {
    border-radius: 50%;
  }

  h3 {
    padding-top: 20px;
    margin-bottom: 5px;
    text-align: center;

    @include mobile {
      padding-top: 30px;
    }
  }

  img {
    width: 100%;
    @include mobile {
      margin: 0 auto;
      max-width: 200px;
    }
  }
}

.person__image {
  margin-left: auto;
  margin-right: auto;
  max-width: 120px;
}

.person__byline {
  color: #aaa;
  font-size: 13px;
  margin-bottom: 10px;
  text-align: center;
}

.person__bio {
  font-size: 16px;
}

.person__github {
  font-size: 14px;
  font-family: $code-font;
  padding-left: 27px;
}

.octocat {
  font-size: 20px;
  position: absolute;
  left: 0;
  margin-top: 1px;
}

table {
  border-spacing: 0.5rem;
  border-collapse: collapse;
  margin-bottom: 2em;
  width: 100%;

  td, th {
    border: 1px solid #3e8188;
    padding: 0.6em;
  }

  thead {
    th {
      text-transform: capitalize;
      background-color: #3e8188;
      font-weight: 900;
      color: #fff;
    }
  }
}

.edit_page_link {
  float: right;
  position: relative;
  padding-left: 23px;
  color: $mid-blue;
  text-decoration: none;
  &:hover {
    color: $teal;
  }
  .octocat {
    font-size: 18px;
  }
}

.anchor {
  text-decoration: none;
}

// Search ----------------------------------------------------------------------

.searchbox {
  max-width: 150px;
  width: auto;

  #search-input {
    max-width: 30px;
    border: none;
    color: transparent;
    background-color: rgba(255, 255, 255, 0);
    background-image: url(/images/search.svg);
    background-size: 16px 16px;
    background-repeat: no-repeat;
    background-position-y: center;
    background-position-x: 5px;
    border: 1px solid rgba(255, 255, 255, 0);
    cursor: pointer;
    border-radius: 3px;
    display: block;
    font-size: 13px;
    font-weight: normal;
    padding: 6px 10px 6px;

    transition: all 250ms ease;

    &:focus {
      background-color: rgba(255, 255, 255, 0.3);
      border: 1px solid rgba(255, 255, 255, 0.3);
      color: #ffffff;
      cursor: auto;
      max-width: 150px;
      padding: 6px 10px 6px 25px;
    }

    @include mobile {
      background-color: rgba(255, 255, 255, 0.3);
      border: 1px solid rgba(255, 255, 255, 0.3);
      color: #ffffff;
      cursor: auto;
      width: 250px;
      max-width: 100%;
      padding: 6px 10px 6px 25px;

      &:focus {
        width: 250px;
        max-width: 100%;
      }
    }

    &::placeholder {
      color: rgba(255, 255, 255, 0.7);
      font-size: 13px;
      text-transform: uppercase;
      letter-spacing: 0.15em;
    }
  }
}

.algolia-autocomplete .ds-dropdown-menu {
  @include mobile {
    min-width: 290px;
    max-width: 350px;
  }
}

.mobile-only {
  display: none;
  @include mobile {
    display: block;
  }
}

body > .alert {
  text-align: center;
  padding: 0.35rem 0;
}

.sponsorship-banner {
  background-color: $light-blue;
  color: $mid-teal;
  padding: 1.5rem 1rem;
  text-align: center;
  font-size: 24px;
  position: relative;
  border-bottom: 3px solid rgba($dark-teal, 0.3);

  a {
    color: $mid-blue;
    font-weight: $primary-font-bold-weight;
    text-decoration: none;
    transition: color 150ms ease;
    margin-left: 0.5em;
    display: inline-block; // Support transform on inline element

    span {
      border-bottom: 2px solid rgba($mid-blue, 0.3); // Apply underline to span only
      padding-bottom: 3px;
      transition: border-bottom 150ms ease;
    }

    &:hover {
      color: $teal;

      span {
        border-bottom: 2px solid rgba($teal, 0.3); // Change border color on hover
      }

      &::after {
        transform: translateX(3px);
      }
    }

    &::after {
      content: "→";
      display: inline-block;
      margin-left: 0.2em;
      position: relative;
      top: 2px;
      transition: transform 200ms ease;
    }
  }

  @include mobile {
    font-size: 19px;
    padding: 1.2rem 1rem;
  }
}
