/** ************************************************************************* *
 ** CSS for HTML docs (e.g. Pursuit)
 **
 ** STRUCTURE
 **
 ** This CSS file is structured into several sections, from general to
 ** specific, and (mostly) alphabetically within the sections.
 **
 ** Several global element styles are used. This is not encouraged and should
 ** be kept to a minimum. If you want to add new styles you'll most likely
 ** want to add a new CSS component. See the Components section for examples.
 **
 ** CSS components use three simple naming ideas from the BEM system:
 **   - Block:    `.my-component`
 **   - Element:  `.my-component__item`
 **   - Modifier: `.my-component.my-component--highlighted`
 **
 **   Example:
 **   <div .my-component>
 **     <div .my-component__item>
 **     <div .my-component__item>
 **   ...
 **   <div .my-component.my-component--highlighted>
 **     <div .my-component__item>
 **     <div .my-component__item>
 **
 ** Components can be nested.
 **
 **
 ** TYPOGRAPHY
 **
 ** Typographic choices for sizes, line-heights and margins are based on a
 ** musical major third scale (4:5). This gives us a way to find numbers
 ** and relationships between them that are perceived as harmonic.
 **
 ** To make use of this modular scale, use a ratio of the form
 **   (5/4)^n
 ** where n ∈ ℤ, -6 ≤ n ≤ 8.
 **
 ** LESS
 **
 ** This CSS is generated by less. To compile it:
 **
 **   npm install [-g] less
 **   lessc app/static/pursuit.less > app/static/pursuit.css
 **
 ** ************************************************************************* */

/* Section: Variables
 * ========================================================================== */
@background: rgb(255, 255, 255);
@banner_background: rgb(29, 34, 45);
@package_banner_background: lighten(@banner_background, 30%);
@dark_foreground: rgb(240, 240, 240);
@link: rgb(196, 149, 58);
@link_active: rgb(123, 89, 4);
@error_background: rgb(255, 240, 240);
@error_border: rgb(200, 80, 80);
@not_available_background: rgb(240, 240, 150);
@code_foreground: rgb(25, 74, 91);
@code_background: rgb(241, 245, 249);
@light_glyph: rgb(160, 160, 160);
@light_type: rgb(102, 102, 102);

/* Section: Document Styles
 * ========================================================================== */

html {
  box-sizing: border-box;

  /* This overflow rule prevents everything from shifting slightly to the side
     when moving from a page which isn't large enough to generate a scrollbar
     to one that is. */
  overflow-y: scroll;
}

*, *::before, *::after {
  box-sizing: inherit;
}

body {
  background-color: @background;
  color: #000;
  font-family: "Roboto", sans-serif;
  font-size: 87.5%;
  line-height: 1.563;
}

@media (min-width: 38em) {
  body {
    font-size: 100%;
  }
}


/* Section: Utility Classes
 * ========================================================================== */

.clear-floats {
  clear: both;
}

.clearfix::before,
.clearfix::after {
  content: " ";
  display: table;
}

.clearfix::after {
  clear: both;
}

/* Content hidden like this will still be read by a screen reader */
.hide-visually {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}


/* Section: Layout
 * ========================================================================== */

.container {
  display: block;
  max-width: 66em;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
}

.col {
  display: block;
  position: relative;
  width: 100%;
}

.col.col--main {
  margin-bottom: 3.08em;
}

.col.col--aside {
  margin-bottom: 2.44em;
}

@media (min-width: 52em) {
  .container {
    padding-left: 30px;
    padding-right: 30px;
  }

  .col.col--main {
    float: left;
    width: 63.655%; /* 66.6…% - 30px */
  }

  .col.col--aside {
    float: right;
    font-size: 87.5%;
    width: 33.333333%;
  }
}

@media (min-width: 66em) {
  .col.col--aside {
    font-size: inherit;
  }
}


/* Footer
 * Based on http://www.lwis.net/journal/2008/02/08/pure-css-sticky-footer/
 * Except we don't support IE6
 * -------------------------------------------------------------------------- */

html, body {
  height: 100%;
}

.everything-except-footer {
  min-height: 100%;
  padding-bottom: 3em;
}

.footer {
  position: relative;
  height: 3em;
  margin-top: -3em;
  width: 100%;
  text-align: center;
  background-color: @banner_background;
  color: @dark_foreground;
}

.footer * {
  margin-bottom: 0;
}


/* Section: Element Styles
 *
 * Have as few of these as possible and keep them general, because they will
 * influence every component hereafter.
 * ========================================================================== */

:target {
  background-color: @code_background;
}

a, a:visited {
  color: @link;
  text-decoration: none;
  font-weight: bold;
}

a:hover {
  color: @link_active;
  text-decoration: none;
}

code, pre {
  background-color: @code_background;
  border-radius: 3px;
  color: @code_foreground;
  font-family: "Roboto Mono", monospace;
  font-size: 87.5%;
}

:target code,
:target pre {
  background-color: darken(@code_background, 5%);
}

code {
  padding: 0.2em 0;
  margin: 0;
  white-space: pre-wrap;
  word-wrap: break-word;
}

code::before,
code::after {
  letter-spacing: -0.2em;
  content: "\00a0";
}

a > code {
  font-weight: normal;
}

a > code::before {
  content: "🡒";
  letter-spacing: 0.33em;
}

a:hover > code {
  color: @link;
}

pre {
  margin-top: 0;
  margin-bottom: 0;
  padding: 1em 1.25rem; /* Using rem here to align with lists etc. */
  overflow: auto;
  white-space: pre;
  word-wrap: normal;
}

pre code {
  background-color: transparent;
  border: 0;
  font-size: 100%;
  max-width: auto;
  padding: 0;
  margin: 0;
  overflow: visible;
  line-height: inherit;
  white-space: pre;
  word-break: normal;
  word-wrap: normal;
}

pre code::before,
pre code::after {
  content: normal;
}

h1 {
  font-size: 3.052em;
  font-weight: 300;
  letter-spacing: -0.5px;
  line-height: 1.125;
  margin-top: 1.563rem;
  margin-bottom: 1.25rem;
}

@media (min-width: 52em) {
  h1 {
    font-size: 3.814em;
    margin-top: 5.96rem;
  }
}

h2 {
  font-size: 1.953em;
  font-weight: normal;
  line-height: 1.250;
  margin-top: 3.052rem;
  margin-bottom: 1rem;
}

h3 {
  font-size: 1.563em;
  font-weight: normal;
  line-height: 1.250;
  margin-top: 2.441rem;
  margin-bottom: 1rem;
}

h4 {
  font-size: 1.25em;
  font-weight: normal;
  margin-top: 2.441rem;
  margin-bottom: 1rem;
}

h1 + h2,
h1 + h3,
h1 + h4,
h2 + h3,
h2 + h4,
h3 + h4 {
  margin-top: 1rem;
}

hr {
  border: none;
  height: 1px;
  background-color: darken(@background, 20%);
}

img {
  border-style: none;
  max-width: 100%;
}

p {
  font-size: 1em;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

table {
  border-bottom: 1px solid darken(@background, 20%);
  border-collapse: collapse;
  border-spacing: 0;
  margin-top: 1rem;
  margin-bottom: 1rem;
  width: 100%;
}

td, th {
  text-align: left;
  padding: 0.41em 0.51em;
}

td {
  border-top: 1px solid darken(@background, 20%);
}

td:first-child, th:first-child {
  padding-left: 0;
}

td:last-child, th:last-child {
  padding-right: 0;
}

ul {
  list-style-type: none;
  margin-top: 1rem;
  margin-bottom: 1rem;
  padding-left: 0;
}

ul li {
  position: relative;
  padding-left: 1.250em;
}

ul li::before {
  position: absolute;
  color: @light_glyph;
  content: "–";
  display: inline-block;
  margin-left: -1.250em;
  width: 1.250em;
}

/* Tying this tightly to ul at the moment because it's a slight variation thereof */
ul.ul--search li::before {
  content: "⚲";
  top: -0.2em;
  transform: rotate(-45deg);
}

ol {
  margin-top: 1rem;
  margin-bottom: 1rem;
  padding-left: 1.250em;
}

ol li {
  position: relative;
  padding-left: 0;
}


/* Section: Components
 * ========================================================================== */

/* Component: Badge
 * -------------------------------------------------------------------------- */

.badge {
  position: relative;
  top: -0.1em;
  display: inline-block;
  background-color: #000;
  border-radius: 1.3em;
  color: #fff;
  font-size: 77%;
  font-weight: bold;
  line-height: 1.563;
  text-align: center;
  height: 1.5em;
  width: 1.5em;
}

.badge.badge--package {
  background-color: @link;
  letter-spacing: -0.1em;
}

.badge.badge--module {
  background-color: #75B134;
}


/* Component: Declarations
 * -------------------------------------------------------------------------- */

.decl {}

.decl__title {
  position: relative;
  padding-bottom: 0.328em;
  margin-bottom: 0.262em;
}

.decl__source {
  display: block;
  float: right;
  font-size: 64%;
  position: relative;
  top: 0.57em;
}

.decl__anchor, .decl__anchor:visited {
  position: absolute;
  left: -0.8em;
  color: lighten(@light_glyph, 10%);
}

.decl__anchor:hover {
  color: @link;
}

.decl__signature {
  background-color: transparent;
  border-radius: 0;
  border-top: 1px solid darken(@background, 20%);
  border-bottom: 1px solid darken(@background, 20%);
  padding: 0.328em 0;
}

.decl__signature code {
  display: block;
  padding-left: 2.441em;
  text-indent: -2.441em;
  white-space: normal;
}

:target .decl__signature,
:target .decl__signature code {
  /* We want the background to be transparent, even when the parent is a target */
  background-color: transparent;
}

.decl__body .keyword,
.decl__body .syntax {
  color: #0B71B4;
}

.decl__child_comments {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

/* Component: Dependency Link
 * -------------------------------------------------------------------------- */

.deplink { /* Currently no root styles, but keep the class as a namespace */ }

.deplink__link {
  display: inline-block;
  margin-right: 0.41em;
}

.deplink__version {
  color: @light_type;
  display: inline-block;
  font-size: 0.8em;
  line-height: 1;
}


/* Component: Grouped List
 * -------------------------------------------------------------------------- */

.grouped-list {
  border-top: 1px solid darken(@background, 20%);
  margin: 0 0 2.44em 0;
}

.grouped-list__title {
  color: @light_type;
  font-size: 0.8em;
  font-weight: 300;
  letter-spacing: 1px;
  margin: 0.8em 0 -0.1em 0;
  text-transform: uppercase;
}

.grouped-list__item {
  margin: 0;
}


/* Component: Message
 * -------------------------------------------------------------------------- */

.message {
  border: 5px solid;
  border-radius: 5px;
  padding: 1em !important;
}

.message.message--error {
  background-color: @error_background;
  border-color: @error_border;
}

.message.message--not-available {
  background-color: @not_available_background;
  border-color: darken(@not_available_background, 20%);
}


/* Component: Multi Col
 * Multiple columns side by side
 * -------------------------------------------------------------------------- */

.multi-col {
  margin-bottom: 2.44em;
}

.multi-col__col {
  display: block;
  padding-right: 1em;
  position: relative;
  width: 100%;
}

@media (min-width: 38em) and (max-width: 51.999999em) {
  .multi-col__col {
    float: left;
    width: 50%;
  }

  .multi-col__col:nth-child(2n+3) {
    clear: both;
  }
}

@media (min-width: 52em) {
  .multi-col__col {
    float: left;
    width: 33.333333%;
  }

  .multi-col__col:nth-child(3n+4) {
    clear: both;
  }
}


/* Component: Page Title
 * -------------------------------------------------------------------------- */

.page-title {
  margin: 4.77em 0 1.56em;
  padding-bottom: 1.25em;
  position: relative;
}

.page-title__title {
  margin: 0 0 0 -0.05em; /* Visually align on left edge */
}

.page-title__label {
  position: relative;
  color: @light_type;
  font-size: 0.8rem;
  font-weight: 300;
  letter-spacing: 1px;
  margin-bottom: -0.8em;
  text-transform: uppercase;
  z-index: 1;
}


/* Component: Top Banner
 * -------------------------------------------------------------------------- */

.top-banner {
  background-color: @banner_background;
  color: @dark_foreground;
  font-weight: normal;
}

.top-banner__logo,
.top-banner__logo:visited {
  float: left;
  color: @dark_foreground;
  font-size: 2.44em;
  font-weight: 300;
  line-height: 90px;
  margin: 0;
}

.top-banner__logo:hover {
  color: @link;
  text-decoration: none;
}

.top-banner__form {
  margin-bottom: 1.25em;
}

.top-banner__form input {
  border: 1px solid @banner_background;
  border-radius: 3px;
  color: @banner_background;
  font-weight: 300;
  line-height: 2;
  padding: 0.21em 0.512em;
  width: 100%;
}

.top-banner__actions {
  float: right;
  text-align: right;
}

.top-banner__actions__item {
  display: inline-block;
  line-height: 90px;
  margin: 0;
  padding-left: 1.25em;
}

.top-banner__actions__item:first-child {
  padding-left: 0;
}

.top-banner__actions__item a,
.top-banner__actions__item a:visited {
  color: @dark_foreground;
}

.top-banner__actions__item a:hover {
  color: @link;
}

@media (min-width: 38em) {
  .top-banner__logo {
    float: left;
    width: 25%;
  }

  .top-banner__form {
    float: left;
    line-height: 90px;
    margin-bottom: 0;
    width: 50%;
  }

  .top-banner__actions {
    float: right;
    width: 25%;
  }
}


/* Component: Search Results
 * -------------------------------------------------------------------------- */

.result {}

.result.result--empty {
  font-size: 1.25em;
}

.result__title {
  font-size: 1.25em;
  margin-bottom: 0.2rem;
}

.result__badge {
  margin-left: -0.1em;
}

.result__body > *:first-child {
  margin-top: 0!important;
}

.result__body > *:last-child {
  margin-bottom: 0!important;
}

.result__signature {
  background-color: transparent;
  border-radius: 0;
  border-top: 1px solid darken(@background, 20%);
  border-bottom: 1px solid darken(@background, 20%);
  padding: 0.328em 0;
}

.result__signature code {
  display: block;
  padding-left: 2.441em;
  text-indent: -2.441em;
  white-space: normal;
}

.result__actions {
  margin-top: 0.2rem;
}

.result__actions__item {
  font-size: 80%;
}

.result__actions__item + .result__actions__item {
  margin-left: 0.65em;
}


/* Component: Version Selector
 * -------------------------------------------------------------------------- */

.version-selector {
  margin-bottom: 0.8em;
}

@media (min-width: 38em) {
  .version-selector {
    position: absolute;
    top: 0.8em;
    right: 0;
    margin-bottom: 0;
  }
}


/* Section: FIXME
 * These styles should be cleaned up
 * ========================================================================== */

/* Help paragraphs */
.help {
  padding: 5px 0;
}

.help h3 { /* FIXME: target with class */
  margin-top: 16px;
}


/* Section: Markdown
 * Github rendered README
 * ========================================================================== */

.markdown-body {
  /*
  Useful for narrow screens, such as mobiles. Documentation often contains URLs
  which would otherwise force the page to become wider, and force creation of
  horizontal scrollbars. Yuck.
  */
  word-wrap: break-word;
}

.markdown-body>*:first-child {
  margin-top: 0 !important;
}

.markdown-body>*:last-child {
  margin-bottom: 0 !important;
}

.markdown-body a:not([href]) {
  color: inherit;
  text-decoration: none;
}

.markdown-body blockquote {
  margin: 0;
  padding: 0 1em;
  color: #777;
  border-left: 0.25em solid #ddd;
}

.markdown-body blockquote>:first-child {
  margin-top: 0;
}

.markdown-body blockquote>:last-child {
  margin-bottom: 0;
}

.markdown-body .anchor {
  /* We hide the anchor because the link doesn't point to a valid location */
  display: none;
}

.markdown-body .pl-k {
  /* Keyword */
  color: #a0a0a0;
}

.markdown-body .pl-c1,
.markdown-body .pl-en {
  /* Not really sure what this is */
  color: #39d;
}

.markdown-body .pl-s {
  /* String literals */
  color: #1a1;
}

.markdown-body .pl-cce {
  /* String literal escape sequences */
  color: #921;
}

.markdown-body .pl-smi {
  /* type variables? */
  color: #62b;
}