/* DO NOT USE - THIS IS A FLAVOR BUILT FOR THE DOCUMENTATION AND CONTAINS A LOT OF EXTRA CODE!!! */

@import '../mini/core';
@import '../mini/grid';

:not(.doc) {
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, sans-serif;
}

code:not(.doc), kbd:not(.doc), pre:not(.doc), samp:not(.doc) {
    font-family: 'Inconsolata', Menlo, Consolas, monospace;
}

.index-splash {
  width: 100%;
  height: 100vh;
}
.index-splash-image {
  background-image: url('./index-splash.jpg');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 100%;
  position: absolute;
  &:not(.no-filter){
    filter: blur(2px);
  }
}

h1.splash {
  position: absolute;
  margin: 0;
  width: 100%;
  text-align: center;
  height: 100%;
  line-height: 60vh;
  font-size: 3rem;
  font-weight: 400;
  color: #f22f21;
  //color: #ef2917;
  & small {
    display: initial;
    font-size: 0.5em;
    color: #222;
  }
  &::first-letter {
    font-size: 1.33em;
    color: #fff;
    background: #f22f21;
    border-radius: 6px;
    padding: 0 10px;
  }
}

p.splash {
  margin: 0;
  position: absolute;
  width: 100%;
  text-align: center;
  padding-top: 40vh;
}

#version-info {
  position: absolute;
  bottom: 0;
  background: rgba(0,0,0,0.25);
  padding: 2px 6px;
  border-radius: 4px;
  color: #dc2b1e;
  right: 8px;
  font-weight: 500;
}

.row.padded {
  padding-top: 20px;
  padding-bottom: 80px;
}

.feature-image {
  display: block;
  margin: 50px auto 20px;
  @media screen and (min-width: 768px){
    height: 400px;
  }
}

.feature-header {
  text-align: center;
  margin-left: 0;
}

.alt-back {
  background: #f3f3f3;
}

.primary-section {
  background: #f22f21;
  color: #fff;
  a {
    &:link{
      color: #76FF03;
    }
    &:visited {
      color: #64DD17;
    }
    &.centered {
      display: block;
      margin: 0 auto;
      text-align: center;
    }
  }
  // TODO: Actually convert to a link, stylize as button, utilize module
  button {
    background: transparent;
    border: 1px solid #fff;
    border-radius: 4px;
    padding: 4px 8px;
    color: #fff;
    font-size: 1.25rem;
    display: block;
    margin: 20px auto 8px;
    cursor: pointer;
  }
}

// TODO: Replace with actual header when ready
header {
  display: block;
  height: 3.25rem;
  background: #f8f8f8;
  color: #444;
  padding: 0.125rem 0.5rem;
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  position: sticky;
  border-bottom: 1px solid #ddd;
  top: 0;
  text-transform: uppercase;
  // Rough testing draft, not for production use
  line-height: 3.5rem;
  font-weight: 500;
  cursor: pointer;
  &:hover {
    color: #111;
  }
}
