// Scratch styles - these are styles I'm quickly throwing together and prototyping with which will be  eventually tidied/consolodated into the relevant partials if the design works. It's supposed to be a mess.
// ---------------------------------------/

/* filter tags */
ul.filter-tags {
  padding: 0;
}
ul.filter-tags li {
  list-style: none;
  float: left;
}
// label {
//   user-select: none!important; /* need to check this */
// }
input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    & + label {
        display: inline-block;
        cursor: pointer;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;

        transition: all 0.3s ease-in-out;
        padding: .4em .8em;
        color: $black;
        background-color: $silver;
        border: solid $black;
        border-width: 2px;
        margin-right: -2px;
        margin-bottom: -2px; /* offsets bottom border when tags wrap */
        &:hover  {
          background-color: darken($silver, 20%);
        }
        &:active, &:focus {
          background-color: $primary;
        }
    }
    &:checked + label {
        background-color: $primary;
        color:  $black;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;

        &:hover, &:focus {
          background-color: $primary;
          color: $black;
        }
    }
    &:active {
        background-color: red;
    }
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid $black;
    margin: 1em 0;
    padding: 0;
}

.site-logo:hover, .logo:hover, .view-toggle:hover, .view-toggle-list:hover {
  transform: scale(1.05);
  transition: all .2s ease-in-out;
}

.site-nav, div.filters {
  grid-column: auto / span 12;
}
div.filters span {
  display: block;
  width: 100%;
}


.full, .post-header {
  grid-column: auto / span 12;
}

.tdn {
  text-decoration: none;
}

.two-thirds {
  grid-column: auto / span 12;
  @media (min-width: $bp-medium) {
    grid-column: auto / span 8;
    }
}

.three-up {
  grid-column: auto / span 6;
  position: relative;
  @media (min-width: $bp-medium) {
    grid-column: auto / span 3;
    margin-bottom: 1.6em;
    }
}
.info-block, .post-content, article {
  grid-column: auto / span 12;
  position: relative;
  @media (min-width: $bp-medium) {
    grid-column: auto / span 8;
    }
}

aside {
  grid-column: auto / span 12;
  @media (min-width: $bp-medium) {
    grid-column: auto / span 4;
    }
}

p.source {
  display: block;
  border-bottom: solid 1px $black;
  font-weight: bold;
}

.arrow:after {
  content: "❯";
  padding: 1em 0.2em;
  font-size: 120%;
  position: relative;
  top: 0.1em;
}

.arrow:hover:after {
  color: $secondary;
}

.info-block {
  padding-top: 1em;
  padding-bottom: 1.6em;
}
.info-block:last-child
  {
    margin-bottom: 0em;
  }

.info-block:after {
  content:"";
  background: $black;
  position: absolute;
  top: 0;
  left: 0;
  height: 12px;
  width: 8em;
  @media (min-width: $bp-medium) {
    width: 12em;
    }
}
header.site-header {
  background: $primary;
  height: auto;
  margin-bottom: 2em;
}

div.page-content {
  background: $white;
}
ol.principles {
  padding-left: 1em;
}
ol.cards {
position: relative;
margin-left: -0.6em;
}

ol.cards li {
  counter-increment: step-counter;
  margin: 0 0 0.125em 0;
}


.sort-label {
  display: block;
  float: left;
  margin-top: 0;
  user-select: none;
@media (min-width: $bp-medium) {
  margin-top: -1.6em;
  display: inline;
  }
}

.sort{
  display:inline-block;
  float: left;
  cursor: pointer;
  user-select: none;
  transition: all 0.3s ease-in-out;
  margin-right: -2px;
  width: auto!important; /* overrides .btn utility class */
}
.sort-arrow {
  height: 0.8em;
  width: auto;
  display: none;
}
.sort:hover {

}
.sort:focus {
}

.sort.asc .sort-arrow{
  transform: rotate(0deg);
  transition: all 0.3s ease;
  display: inline-block;
}

.sort.desc .sort-arrow{
  transform: rotate(180deg);
  transition: all 0.3s ease;
  display: inline-block;

}


ol.cards li:before {

}
img.circle {
  border-radius: 50%;
}
.bold {
  font-weight: bold;
}

.tile {
  padding: 0.6em 0.2em;
  border-top: solid 8px $black;
  grid-column: auto / span 12;
  overflow: hidden;
  transition: background-color 0.3s ease;
  @media (min-width: $bp-medium) {
        grid-column: auto / span 6;
      }
  @media (min-width: $bp-large) {
        grid-column: auto / span 4;
      }
}
a.view-toggle {
  width: 48px;
  height: 48px;
  float: right;
  background: url(/images/list-view.svg) no-repeat top left;
  float: right;
}
a.view-toggle-list {
  width: 48px;
  height: 48px;
  float: right;
  background: url(/images/grid-view.svg) no-repeat top left;
}
.tile-list {
  padding: 0.6em 0.2em;
  border-top: solid 8px $black;
  grid-column: auto / span 12;
  overflow: hidden;
  transition: background-color 0.3s ease;
}


input.search  {
  height: 2.6em;
  color: $black;
  font-weight: bold;
  border: solid 2px $black;
  padding-left: 1em;
  width: 100%;
}

input.search {
  grid-column: auto / span 12;
  @media (min-width: $bp-medium) {
        grid-column: auto / span 6;
      }
  @media (min-width: $bp-large) {
        grid-column: auto / span 8;
      }

}
@supports (display: grid) {
  div.toggle {
    display: none; //hidden on mob
    @media (min-width: $bp-medium) {
          grid-column: auto / span 6;
          display: block;
        }
    @media (min-width: $bp-large) {
          grid-column: auto / span 4;
        }
  }
}
div.hide-large {
  display: inline-block;
@media (min-width: $bp-medium) {
        display: none;
    }
  }
input.search::placeholder {
  color: $black;
  font-weight: normal;
}
.tile a, .tile-list a {text-decoration: none;}

.tile:last-child {
  background: transparent;
}

input[type=text], .subscribe-input {
    padding: 0.4em 1em;
    border: solid 2px $black;
    color: $black;
    height: 48px!important;
}

input[type=text]:focus {
    border-color:#333;
}

.btn, input[type=submit] {
    padding: 0.4em 0.6em;
    background:$primary;
    border:0 none;
    cursor:pointer;
    -webkit-user-select: none;
    user-select: none;
    border: solid 2px $black;
}
.btn-secondary {
  background: $silver;
}
input[type=submit]:hover, .btn:hover {
  background: lighten($primary, 10%);
}








.icon {
  width: 120px;
  height: auto;
  margin-bottom: -2.8em;
}
.site-footer {
  background: $white;

}


header.example-header {
  grid-column: 1 / -1;
  border-bottom: solid 3px $black;
  margin-bottom: 1.4em;
}

.help-footer {
  grid-column: 1 / -1;
  background: lighten($primary, 40%);
  border-top: solid 12px $primary;
  border-bottom: solid 2px $primary;
  padding: 1em;
  overflow: hidden;
}

pre, code {
  display: block;
  background: $silver;
  padding: 1em;
}

ul.logos {
  list-style: none;
  padding-left: 0;
}

ul.logos li {
  float: left;
  width: 48px;
  height: 48px;
  margin-right: 1em;
  margin-bottom: 1em;
}
ul.logos img {
  width: 100%;
  height: auto;
}


.onclick-menu {
    position: absolute;
    display: inline-block;
    width: 44px;
    height: 44px;
    right: 0;
    font-weight: bold;
    text-align: center;
}
.onclick-menu:before {
    content: "…";
}
.onclick-menu:focus {
    /* clicking on label should toggle the menu */
    pointer-events: none;
}
.onclick-menu:focus .onclick-menu-content {
    /*  opacity is 1 in opened state (see below) */
    opacity: 1;
    visibility: visible;

    /* don't let pointer-events affect descendant elements */
    pointer-events: auto;
}
.onclick-menu-content {
    position: absolute;
    z-index: 1;

    /* use opacity to fake immediate toggle */
    opacity: 0;
    visibility: hidden;
    transition: visibility 0.5s;
    list-style: none;
    margin: 0;
    padding: 0;
    float: right;
    text-align: right;
    min-width: 8em;
    position: absolute;
    right: 0;
}
.onclick-menu-content li {
  background: none;
  padding: 0.4em;
  border-top: 1px $silver solid;
  background: $white;
}
.onclick-menu-content li:first-child {
  border-top: none;
}

input, button, submit { border:none; }


.subscribe-input, .subscribe-btn {
  display: block;
  width: 100%;
  @media (min-width: $bp-medium) {
    display: inline-block;
    }
}
@media (min-width: $bp-medium) {
  .subscribe-input {
  width: 64%;
  border-right: 0!important;
  }
}
.subscribe-btn {
  height: 48px;
  margin-top: 0.4em;
  @media (min-width: $bp-medium) {
      width: auto;
      margin-top: 0;
      margin-left: -0.4em;
    }
}

// active nav highlighting




header h1 {
  margin-top: 0.6em;
}

.credit {
  border-bottom: solid 4px $black;
  padding-bottom: 1em;
}
.grid-background {
  background: url(/images/cross-grid.svg) center top;
  padding: 1em 0 0.6em 0;
    @media (min-width: $bp-medium) {
      height: 158px;
      padding-bottom: none;
    }
    @media (min-width: $bp-large) {
      height: 236px;
    }
}
