/* Here be dragons */

$magic-number: 1.5rem;

header, footer, article, section, nav, aside {
  display: block;
}

@import "bourbon/bourbon";
@import "grid-settings";
@import "neat/neat";
@import "base/base";
@import "tablesort";

@import "navigation";
@import "tooltip";

@import "icons";

body {
  background-color: white;
  margin: 0;
}

main {
  background-color: white;
}

sup {
  font-size: 0.6rem;
}

small {
  font-size: 0.8rem;
  line-height: $magic-number*0.75;
}

ul.default {
  list-style-type: disc;
}

ol.default {
  list-style-type: decimal;
}

ul.default,
ol.default {
  list-style-position: inside;
  margin-bottom: $small-spacing;
  padding-left: 0;

  > li {
    margin-bottom: $magic-number/4;
  }
}

code {
  background-color: #f1f1f1;
  font-size: 0.95em;
  padding: 0.1rem 0.3rem;
}

table {
  margin-top: 0;
  width: auto;

  tbody {
    font-size: 0.9em;
  }

  td.userdata {
    @include overflow-wrap;
    word-break: break-all;
  }
}

.anchor-link {
  font-size: 1rem;
  text-decoration: none;
  vertical-align: middle;
  visibility: hidden;
}

h3:hover .anchor-link {
  visibility: visible;
}

table.requests {
  .host {
    min-width: 30rem;
  }

  @include media($tablet) {
    .host {
      min-width: auto;
    }
  }
}

/* Based on https://allthingssmitty.com/2016/10/03/responsive-table-layout/ */
@include media($mobile) {
  table {
    width: 100%;
  }

  table thead {
    border: none;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }
  
  table tr {
    border-bottom: 3px solid #ddd;
    display: block;
  }
  
  table td {
    border-bottom: 1px solid #ddd;
    display: block;
    text-align: right;
  }
  
  table td::before {
    content: attr(data-label);
    font-weight: 600;
    float: left;
  }
}

ul {
  margin-bottom: 0.75rem;
}

a.no-decoration {
  text-decoration: none;
}

a.external::after {
  content: "\ea7e";
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  font-family: "icomoon";
  font-weight: normal;
  margin-left: 4px;
}

[aria-hidden='true'],
[data-a11y-toggle]:not([aria-controls]) {
  display: none;
}

.non-button-toggle {
  color: #1565c0;
  font-weight: bold;
}

button[data-a11y-toggle][aria-expanded="false"],
.non-button-toggle[data-a11y-toggle][aria-expanded="false"] {
  &::before {
    font-family: 'icomoon' !important;
    font-weight: normal;
    content: "\ea43";
    margin-right: 0.5em;
  }
}

button[data-a11y-toggle][aria-expanded="true"],
.non-button-toggle[data-a11y-toggle][aria-expanded="true"] {
  &::before {
    font-family: 'icomoon' !important;
    font-weight: normal;
    content: "\ea41";
    margin-right: 0.5em;
  }
}

[role="button"] {
  cursor: pointer;
}

.icon-fixed {
  display: inline-block;
  text-align: center;
  width: 1.25em;
}

.icon-empty {
  display: inline-block;
  text-align: center;
  width: 1.25em;
}

.success {
  color: #00d900;
}

.alert {
  color: red;
}

.warning {
  color: gold;
}

.index-search {
  //background-color: #f5f5f5;

  padding-bottom: $magic-number*2;
  padding-top: $magic-number*2;

  h1 {
    font-family: $font-stack-system;
    font-weight: 600;
    font-size: modular-scale(4);
    letter-spacing: -1px;
    margin-bottom: $magic-number;
    text-align: center;
  }

  p,
  ol {
    margin-left: auto;
    margin-right: auto;
    max-width: 40em;
  }

  p.desc {
    font-size: modular-scale(1);
    text-align: center;
  }

  form.search-bar {
    ///////////////////////////////////////////////////////////////////////////////////
    $base-spacing: 1.5rem !default;
    $base-border-color: gainsboro !default;
    $base-line-height: 1.5rem !default;
    //////////////////////////////////////////////////////////////////////////////////

    $search-bar-border-color: $base-border-color;
    $search-bar-border: 1px solid $search-bar-border-color;
    $search-bar-background: lighten($search-bar-border-color, 10%);

    height: $magic-number*2;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: $magic-number;

    max-width: 35rem;

    position: relative;

    input[type=search] {
      appearance: none;
      background-color: white;
      border: 1px solid $base-border-color;
      box-sizing: border-box;
      display: block;
      font-size: $magic-number*0.75;
      font-style: italic;
      margin: 0;
      padding: ($base-spacing / 3) ($base-spacing / 3);
      position: relative;
      transition: border-color;
      width: 100%;
      height: $magic-number*2;
    }

    button[type=submit] {
      @include position(absolute, 0 0 0 null);
      font-size: 1.25rem;
      outline: none;
      padding: 5px 10px;
      height: $magic-number*2;

      img {
        height: 12px;
        opacity: 0.7;
      }
    }
  }


  @include media($mobile) {
    padding-bottom: $magic-number;
    padding-top: $magic-number;

    h1 {
      font-size: modular-scale(2);
    }
  }
}

#results-header {
  background-color: #3b4255; // #5c5857;
  border-bottom: 1px solid #2f2e2d;
  color: white;
  padding-bottom: $magic-number;
  padding-top: $magic-number;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  a {
    color: white;
  }

  @include media($mobile) {
    padding-bottom: $magic-number/4;
    padding-top: $magic-number/4;

    h2 {
      line-height: $magic-number*1.5;
    }
  }
}

#results-title {
  a {
      text-decoration: underline;
  }

  h2 {
    font-family: $font-stack-system;

    @include media($mobile) {
      font-size: modular-scale(2);
    }
  }

  > .alpha {
    @include span-columns(8);

    > h2 {
      @include overflow-wrap;
      margin-bottom: $magic-number/4;
    }
  }

  > .beta {
    @include span-columns(4);
    text-align: right;

    a {
      text-decoration: none;
      > span {
        text-decoration: underline;
      }
    }

    i {
      padding-right: 0.4rem;
    }

    > .button {
      display: block;
    }
  }

  @include media($mobile) {
    > .alpha {
      @include span-columns(4);
    }
    > .beta {
      @include span-columns(4);
      margin-bottom: $magic-number/4;
      text-align: left;
    }
  }
}

#results-summary {
  > .summary {
    @include span-columns(8);
    span.label {
      display: inline-block;
      width: 12rem;
    }

    span.label a {
      text-decoration: none;
    }

    ul {
      margin-bottom: 0;
    }

    li {
      border-bottom: 1px solid transparentize(white, 0.9);
      padding-bottom: $magic-number/8;
      padding-top: $magic-number/8;
    }

    li:last-child {
      border-bottom: none;
    }
  }

  > .url {
    @include span-columns(4);
    @include overflow-wrap;
    color: transparentize(white, 0.4);
    padding-top: 1rem;
    text-align: right;
  }

  @include media($mobile) {
    > .summary {
      @include span-columns(4);

      span.label {
        display: block;
      }
    }
    > .url {
      @include span-columns(4);
      text-align: left;

      span {
        display: block;
      }
    }
  }
}

section,
article.text {
  @include outer-container;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

#results {
  //border-top: 1px solid #e0dbda;
  padding-top: $magic-number;
}

.result {
  blockquote {
    margin: 0 0 0.75rem 0;
    padding-left: 0.5rem;
    border-left: 1px dotted black;

  }
}

.text {
  padding-top: $magic-number;
}

.result,
.text {
  display: block;
  padding-bottom: $magic-number;
  position: relative;

  .info-large {
    background-color: #f5f5f5;
    border-radius: 5px;
    font-size: 0.8rem;
    line-height: $magic-number*0.75;
    padding: $small-spacing;
  }

  .howto {
    background-color: #f5f5f5;
    border-radius: 5px;
    font-size: 0.8rem;
    line-height: $magic-number*0.75;
    padding: $small-spacing;

    > div > p {
      margin-top: 0.75em;
    }
  }

  .howto + p {
    margin-top: 0.75em;
  }

  article + article {
    margin-top: $magic-number;
  }

  .howto,
  .beta {
    code {
      background-color: white;
    }
  }

  > .alpha {
    @include span-columns(7);

    @include media($mobile) {
      margin-bottom: 0.7rem;
    }
  }

  > .beta {
    @include span-columns(5);
    background-color: #f5f5f5;
    border-radius: 5px;
    font-size: 0.8rem;
    line-height: $magic-number*0.75;
    padding: $small-spacing;

    p:last-child {
      margin-bottom: 0;
    }
  }

  @include media($mobile) {
    > .alpha,
    > .beta {
      @include span-columns(4);
      //padding: $small-spacing/2;
    }
  }

  p,
  ul li {
    max-width: 50rem;
  }

  p:last-child {
    margin-bottom: 0;
  }

  strong {
    font-weight: 600;
  }

  h3 > i {
    font-size: 0.8em;
  }
}

#tls-info > table {
  margin-bottom: 0;
}

#mixed-content ul {
  margin-bottom: 0;
}

#mixed-content table {
  margin-bottom: 1rem;

  tr {
    border-bottom: none;
  }

  td {
    padding-top: 0.25rem;
    padding-bottom: 0;
  }

  &:last-child {
    margin-bottom: 0;
  }
}

.requests-list {
  font-size: 0.9em;

  i {
    padding-right: 0.4rem;
  }

  .icon-lock {
    color: green;
  }

  .icon-unlock-alt {
    color: red;
  }
}

.footer-outer {
  background-color: #3b4255; //#f5f5f5;
  border-top: 1px solid #1e222b;
  color: white;
  padding-bottom: $magic-number*0.75;
  padding-top: $magic-number*0.75;
  //flex-shrink: 0;
  width: 100%;

  a {
    color: white;
  }
}

.footer-outer > footer {
  @include outer-container;
  padding-bottom: 1rem;
  padding-left: 0.5em;
  padding-right: 0.5em;

  p:last-child {
    margin-bottom: 0;
  }

  #disclaimer {
    font-size: 0.9em;
    max-width: 40em;
  }

  > .alpha {
    @include span-columns(6);

    img {
      padding-right: 0.5em;
      vertical-align: top;
    }
  }

  > .beta {
    @include span-columns(6);
    text-align: right;
  }

  @include media($mobile) {
    > .alpha,
    > .beta {
      @include span-columns(4);
    }

    > .beta {
      padding-top: 1rem;
      text-align: left;
    }
  }
}

.flash-notice {
  background-color: #e5edf8;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: $base-spacing;
  max-width: 40rem;
  padding: $base-spacing / 2;
  text-align: center;
}

.btn-link {
  background: none;
  border: none;
  color: white;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  font-weight: normal;
  outline: none;
  text-decoration: underline;
  padding: 0;
}

.btn-link:hover {
  background: none;
}

.btn-link-dark,
.btn-link-dark:hover {
  color: $action-color;
}
