/** BASE STYLES **************************************************************/

/* Use border-box sizing for easier calculation */
html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }

body {
  font: 1em/1.5 "Roboto", Arial, sans-serif;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  margin: 0;
}

header, article, footer,
h1, h2, h3, h4, h5, h6,
ul, ol, dd, p, pre, table, hr, input {
  margin-top: 0;
  margin-bottom: 1.5rem;
}

table { width: 100%; }

ul ul, ul ol,
ol ol, ol ul {
  margin-bottom: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Roboto Condensed", Arial, sans-serif;
  color: #77777a;
}

h1 { font-size: 3em; }
h2 { font-size: 2.5em; }
h3 { font-size: 2em; }
h4 { font-size: 1.5em; }
h5 { font-size: 1.25em; }
h6 { font-size: 1em; }

a {
  color: #222;
  cursor: pointer;
  text-decoration: underline;
}
a:hover { color: #14679e; }

pre, code {
  font-family: "Roboto Mono", monospace;
}

pre {
  background: #ffdead;
  border-radius: 5px;
  padding: 1em;
  overflow-x: auto;
  max-width: calc(100vw - 2em);
}

ul {
  list-style-type: square;
}

ul, ol {
  padding-left: 1.5em;
}

li pre {
  margin-top: 1.5rem;
  max-width: calc(100vw - 5em);
}

table th,
table td {
  text-align: left;
  vertical-align: bottom;
}

input {
  font-size: 1rem;
  width: 100%;
  border: 1px solid #cacaca;
  padding: 8px;
  transition: border 0.25s;
}

input::placeholder { color: #77777a; }
input:focus { border: 1px solid #77777a; }
input:disabled { background-color: #ddd; }

/** HEADER STRUCTURE *********************************************************/

#noticebar {
  padding: 0 calc(50vw - 37.5rem);
  background: #ffdead;
}

#noticebar.hidden {
  display: none;
}

#noticebar .contents {
  line-height: 30px;
}

#noticebar .contents p {
  margin: 0;
}

header {
  display: grid;
  grid-gap: 1em;
  grid-template-columns: auto 1fr;
  grid-template-areas: "logo menu";
  background-color: #444;
  padding: 1em calc(50vw - 37.5rem);
}

@media screen and (max-width: 77rem) {
  header, #noticebar { padding: 1em; }
}

@media screen and (max-width: 50rem) {
  header {
    grid-template-rows: auto auto;
    grid-template-columns: 100%;
    grid-template-areas:
      "logo"
      "menu";
  }
}

header a { text-decoration: none; }
header a,
header h1 { color: white; }
header a:hover { color: white; }

header .logo {
  grid-area: logo;
  display: flex;
  align-items: center;
}

@media screen and (max-width: 50rem) {
  header .logo {
    justify-content: center;
  }
}

header .logo h1 {
  margin: 0 0 0 5px;
}

header .logo div {
  content: url('piwheels-logo.opt.svg');
  width: 75px;
  height: 75px;
}

/* Oh the silly things you can do with CSS these days... */
header .logo:hover div { animation: 1s ease 0s 1 normal spin; }
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(-720deg); }
}

header nav {
  grid-area: menu;
  display: flex;
  align-items: center;
  grid-template-columns: repeat(4, 25%);
}

header nav a {
  flex: 1 1 0;
  padding: 1em;
  border-radius: 5px;
  background-color: #1779ba;
  text-align: center;
  transition: background-color 0.5s;
  margin-left: 1em;
}

header nav a.selected { background-color: #77777a; }
header nav a:hover { background-color: #14679e; }
header nav a:first-child { margin-left: 0; }

/** ARTICLE STRUCTURE ********************************************************/

article {
  flex: 1;
  align-self: center;
}

article section {
  display: grid;
  grid-gap: 1.5rem;
  grid-template-columns: calc(70% - 1.5rem) 30%;
  grid-template-areas: "content sidebar";
  width: 75rem;
  margin: 0 1em;
}

@media screen and (max-width: 77rem) {
  article { align-self: stretch; }
  article section { width: auto; }
}

@media screen and (max-width: 50rem) {
  article section {
    grid-template-columns: 100%;
    grid-template-areas:
      "content"
      "sidebar";
  }
}

article section .content { grid-area: content; }
article section .sidebar { grid-area: sidebar; }
article section .content.no-sidebar { grid-column: content / sidebar; }

/** FOOTER STRUCTURE *********************************************************/

footer {
  display: grid;
  grid-gap: 1em;
  grid-template-rows: auto auto;
  grid-template-columns: auto minmax(240px, 1fr);
  grid-template-areas:
    "menu    mythic"
    "notices mythic";
  background: #99999b;
  margin: 0;
  padding: 1em calc(50vw - 37.5rem);
}

@media screen and (max-width: 77rem) {
  footer { padding: 1em; }
}

@media screen and (max-width: 50rem) {
  footer {
    grid-template-rows: auto auto auto;
    grid-template-columns: 100%;
    grid-template-areas:
      "menu"
      "notices"
      "mythic";
  }
}

footer .notices { grid-area: notices; margin-bottom: 0; }

footer nav {
  grid-area: menu;
  display: flex;
}

footer nav a {
  flex: 1;
  display: flex;
  align-items: center;
  text-decoration: none;
  transition: color 0.5s;
}

@media screen and (max-width: 50rem) {
  footer nav a {
    justify-content: center;
  }
}

footer nav a div {
  filter: brightness(0);
  margin-right: 5px;
  transition: filter 0.5s;
}

footer nav a:hover div {
  filter: none;
}

footer #github div      { content: url('github.svg'); }
footer #readthedocs div { content: url('readthedocs.svg'); }
footer #twitter div     { content: url('twitter.svg'); }

footer #mythic {
  grid-area: mythic;
  content: url('mythic-beasts-logo.png');
  margin: 0 auto;
}

/** SIDEBAR STATS ************************************************************/

.stats { margin-bottom: 1.5rem; }

.stats dl {
  display: flex;
  justify-content: space-between;
  flex-flow: wrap;
  margin: 0;
}

.stats dl dt {
  font-weight: bold;
}

.stats dl dd {
  flex-grow: 1;
  text-align: right;
  margin: 0;
}

/** GENERAL STYLES ***********************************************************/

.box {
  border-radius: 5px;
  background: #f1f1f1;
  padding: 1em;
}

.highlight {
  border-radius: 5px;
  background: #8addd5;
  padding: 1em;
}

.highlight > :last-child { margin-bottom: 0; }

.button {
  cursor: pointer;
  color: white;
  background-color: #1779ba;
  border-radius: 5px;
  transition: background-color 0.25s;
  padding: 5px;
  text-decoration: none;
}
.button a { text-decoration: none; }
.button:hover { color: white; background-color: #14679e; }

.prerelease { background-color: #ffdf76; }
.yanked { color: white; background-color: #d52d40; }
.prerelease,
.yanked {
  border-radius: 3px;
  text-transform: uppercase;
  font-size: 0.65rem;
  padding: 0.15rem 0.35rem;
  margin-left: 1em;
  vertical-align: middle;
}

.skip { background-image: url('skip.svg'); }
.fail { background-image: url('fail.svg'); }
.success { background-image: url('success.svg'); }
.pending { background-image: url('pending.svg'); }
.skip,
.fail,
.success,
.pending {
  min-width: 20px;
  background-repeat: no-repeat;
  background-position: center;
}

.skip a,
.fail a,
.success a,
.pending a {
  width: 100%;
  height: 100%;
  display: block;
  text-indent: -9999px;
}

/** SHADING STYLES ***********************************************************/

.shaded {
  transition: height 0.5s;
  height: 0;
  overflow: hidden;
}

.expandable,
.collapsible {
  margin-left: calc(30px + 0.5em);
}

.expandable > div,
.collapsible > div {
  cursor: pointer;
  display: inline-block;
  margin-left: calc(-30px - 0.5em);
  margin-right: 0.5em;
  border-radius: 5px;
  background-color: #1779ba;
  transition: background-color 0.25s;
}

.collapsible > div { background-color: #77777a; }

.expandable > div::before,
.collapsible > div::before {
  content: '✕';
  color: white;
  width: 30px;
  text-align: center;
  display: inline-block;
  transform: rotate(45deg);
  transition: transform 0.25s;
}

.collapsible > div::before { transform: rotate(0deg); }

/** SPECIFIC STYLES **********************************************************/

#support ~ table th:nth-child(3) { text-align: center; }

#releases + table:first-of-type {
  width: 100%;
  background-color: #f1f1f1;
  border-spacing: 0;
  border-radius: 5px;
}
#releases + table td { padding: 0; }
#releases + table tr.hidden { display: none; }
#releases + table th:nth-child(1n+3),
#releases + table td:nth-child(1n+3) { text-align: center; }
#releases + table tbody tr:nth-child(4n+1) td,
#releases + table tbody tr:nth-child(4n+2) td { background-color: white; }

#releases + table tbody tr.more td {
  cursor: pointer;
  background: #e0e0e0;
  border-radius: 0 0 5px 5px;
}
#releases + table tbody tr.more td:hover {
  color: #14679e;
  text-decoration: underline;
}

#releases + table tbody tr:nth-child(2n+1) td { padding: 5px 0; }
#releases + table thead tr th:first-child,
#releases + table tbody tr td:first-child { padding-left: 1em; }
#releases + table thead tr th:last-child,
#releases + table tbody tr td:last-child { padding-right: 1em; }

#releases + table td.collapsible > div,
#releases + table td.expandable > div { margin: 0; }
#releases + table ul { margin-bottom: 0; padding-left: 0; }
#releases + table ul li {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  list-style-type: none;
  padding: 8px 0;
}
#releases + table ul li span.install { 
  margin-left: 1em;
  font-size: 0.75rem;
  padding: 3px 5px;
}

#key + table td:first-child {
  width: 1.5rem;
}

#timestamp { text-align: right; color: #99999b; }