/* This is your theme file. Use the selectors used in the other layers or extend them.
See https://css.underdark.nl/docs for further explanation */

/* Colours */
/* 0, 120, 231 */

/* Complimentary */
/* 154, 96, 0 */
/* 0, 80, 154 */

/* Triad */
/* 15, 88, 154 */
/* 235, 35, 23 */

/* 167, 180, 18 */
/* 143, 154, 8 */

a {
  color: hsl(208, 56%, 46%);
  -webkit-transition: color .2s;
  transition: color .2s;
}
/* a:not(:hover) {
  text-decoration: none;
} */

/* lvha */
a:link {
}
a:visited {
  /* color: rgb(118, 78, 127); */
}
a:hover {
  color: hsl(208, 56%, 66%);
}
a:active {
  /* color: rgb(235, 35, 23); */
}

pre {
  color: #000;
}
:not(pre) > code {
  color: #000;
}

label {
  color: #888;
}

figure > em {
  color: #ccc;
}

/* body header and footer */
body > header,
body > header nav > ul ul {
  border-color: hsl(208, 56%, 46%);
}

body > header a:focus,
body > header a:hover,
body > footer a:focus,
body > footer a:hover {
  text-shadow: 0 0 1em hsl(208, 56%, 46%);
}

/*  depth header and footer links */
body > header nav > ul:not(.external) a,
body > header nav > ul:not(.external) > li > button {
  text-shadow: 0 -1px 1px rgba(0, 0, 0, .5);
}

body > header nav > ul.external > li > a,
body > header .logo > a,
body > footer a {
  text-decoration: none;
  -webkit-transition-duration: .2s;
  transition-duration: .2s;
  -webkit-transition-property: color, text-shadow;
  transition-property: color, text-shadow;
}
body > header nav > ul.external > li > a:focus,
body > header .logo > a:focus,
body > footer a:focus {
  outline: 0;
}
body > header nav > ul:not(.external) > li > button::after {
  text-shadow: 0 1px 0 rgba(0, 0, 0, .5);
}

/* table */
table a {
  /* increase click area size */
  /* display: inline-block; */
}
thead,
tfoot {
  color: #000;
}
/* caption {
  color: #000;
} */

/* form */
form p {
  font-size: .875rem;
  color: #666;
}

main aside,
main nav {
  /* TODO: should be more specific. aside and navs should be normaly usable inside sectioning elements */
  /* font-size: .875rem; */
  color: #666;
}

/* button */
/* [type="submit"], */
[type="button"].primary,
[type="button"].selected,
button.primary,
button.selected,
a.button.primary,
a.button.selected {
  background-color: hsl(208, 56%, 46%);
  color: #fff;
}
a.button:hover {
  color: #000; /* reset */
  /* text-decoration: none; */
}
a.button.primary:hover,
a.button.selected:hover {
  color: #fff; /* reset */
}

.logo > a {
  -webkit-transition-property: color, text-shadow;
  transition-property: color, text-shadow;
}

/* sticky footer */
body {
  display: -webkit-flex;
  display: flex;
  min-height: 100vh;
  -webkit-flex-direction: column;
  flex-direction: column;
}
body > main {
  -webkit-flex: 1;
  flex: 1;
  width: 100%;
  box-sizing: border-box;
}

/*
 * When a user agent cannot parse the selector (i.e., it is not valid CSS 2.1),
 * it must ignore the selector and the following declaration block (if any) as well.
 * See: http://stackoverflow.com/questions/20541306/how-to-write-a-css-hack-for-ie-11
 */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  /* Fix body collapsing in IE 11 when flexbox is used for sticky footer. */
  body {
    display: block; /* reset */
  }
}

/* pagination */
nav.pagination > ol > li.first,
nav.pagination > ol > li.previous,
nav.pagination > ol > li.next,
nav.pagination > ol > li.last {
  overflow: hidden;
  white-space: nowrap;
  vertical-align: bottom; /* overflow hidden changes vertical alignment */
}
nav.pagination > ol > li.first > a,
nav.pagination > ol > li.previous > a,
nav.pagination > ol > li.next > a,
nav.pagination > ol > li.last > a {
  color: transparent;
  width: 1rem;
}
nav.pagination > ol > li.first > a::before,
nav.pagination > ol > li.previous > a::before,
nav.pagination > ol > li.next > a::before,
nav.pagination > ol > li.last > a::before {
  display: inline-block;
  width: 1rem;
  height: 1.5rem;
  vertical-align: top;
}
nav.pagination > ol > li.first > a::before {
  content: url('data:image/svg+xml,<svg fill="%23347ab7" viewBox="-2 -3 4 6" xmlns="http://www.w3.org/2000/svg"><polygon points="-0.5 0, 1.5 -1.5, 1.5 1.5"/><rect x="-1.5" y="-1.5" width="1" height="3"/></svg>');
}
nav.pagination > ol > li.previous > a::before {
  content: url('data:image/svg+xml,<svg fill="%23347ab7" viewBox="-2 -3 4 6" xmlns="http://www.w3.org/2000/svg"><polygon points="-2 0, 0 -1.5, 0 1.5"/><polygon points="0 0, 2 -1.5, 2 1.5"/></svg>');
}
nav.pagination > ol > li.next > a::before {
  content: url('data:image/svg+xml,<svg fill="%23347ab7" viewBox="-2 -3 4 6" xmlns="http://www.w3.org/2000/svg"><polygon points="2 0, 0 -1.5, 0 1.5"/><polygon points="0 0, -2 -1.5, -2 1.5"/></svg>');
}
nav.pagination > ol > li.last > a::before {
  content: url('data:image/svg+xml,<svg fill="%23347ab7" viewBox="-2 -3 4 6" xmlns="http://www.w3.org/2000/svg"><polygon points="0.5 0, -1.5 -1.5, -1.5 1.5"/><rect x="0.5" y="-1.5" width="1" height="3"/></svg>');
}