/* Arranged by specificity */
/* - - - - - - - - - - - - - - 
  Fonts 
  (must be first) 
- - - - - - - - - - - - - - */

@font-face {
  font-family: 'Museo Sans';
  src: url('/fonts/MuseoSans_300-webfont.woff2') format('woff2'),
       url('/fonts/MuseoSans_300-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Museo Sans';
  src: url('/fonts/MuseoSans_300_Italic-webfont.woff2') format('woff2'),
       url('/fonts/MuseoSans_300_Italic-webfont.woff') format('woff');
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: 'Museo Sans';
  src: url('/fonts/MuseoSans_700-webfont.woff2') format('woff2'),
       url('/fonts/MuseoSans_700-webfont.woff') format('woff');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'Museo Sans';
  src: url('/fonts/MuseoSans_700_Italic-webfont.woff2') format('woff2'),
       url('/fonts/MuseoSans_700_Italic-webfont.woff') format('woff');
  font-weight: bold;
  font-style: italic;
}

/* - - - - - - - - - - - - - - 
  Elements
  (Default styles)
- - - - - - - - - - - - - - */

/* - - Block */

html {
  color: #4A4A4A; /* dark grey */
  font-family: 'Museo Sans', 'Helvetica', Arial, sans-serif;
  font-size: 1em;
  line-height: 1.4;
}

@media (min-width: 30em) {
  html {
    font-size: 1.2em;
  }
}

body {
  margin: 0;
  background: white;
}

header {
  margin: 0 auto;
  max-width: 36em;
  padding: 0 1em;
}

main {
  margin: 0 auto;
  max-width: 36em;
  padding: 0 1em;
}

section {
  margin: 3em 0;
}

@media (min-width: 40em) {
  section {
    margin: 4em 0;
  }
}

/* don’t have a margin at top of main content */
section:nth-of-type(1n) {
  margin-top: 0;
}

blockquote {
  background: rgba(0,0,0,0.07);
  border-left: 0.35em solid rgba(0,0,0,0.1);
  margin: 0;
  padding: 1em;
}

blockquote p:nth-of-type(1) {
  margin-top: 0;
}

blockquote p:last-of-type {
  margin-bottom: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: strong;
  margin: 1.5em 0 1em 0;
}

h1 {
  font-size: 2em;
}

/* don't have a massive gap between nav and h1 */

main > article > .entry-content > h1 {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}

h2 {
  font-size: 1.47em;
}

/* don't have a massive gap between first h1 and h2 */

main > article + h2 {
  margin-top: 0.5em;
}

ul, ol {
  margin: 0;
  padding: 0 0 0 1.1em;
}

li {
  margin: 0.5em 0;
}

img {
  max-width: 100%;
}

p {
  margin: 1em 0;
}

/* - - Inline */

a {
  color: #222; /* darker grey */
}

a:hover, a:active {
  color: #111;
  /* underline links that have no underlines on hover/active */
  text-decoration: underline;
  transition: .2s ease;
}

a:visited {
  color: #444; /* faded dark grey */
}

strong {
  font-weight: bold;
}

em {
  font-style: italic;
}

small {
  font-size: 0.8em;
}

/* - - - - - - - - - - - - - - 
  Site-wide
- - - - - - - - - - - - - - */

/* - - Navigation */

.skip-link {
	display: block;
	padding: 0.25em 1em;
	position: absolute;
	right: 0;
  top: -10em;
}

.skip-link:focus {
  top: 0;
  left: 0;
}

nav {
  margin: 0;
  margin-top: 1em;
  padding: 0;
}

@media (min-width: 40em) {
  nav {
    margin-top: 2em;
  }
}

nav ul {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-content: flex-start;
  padding: 0;
}

nav ul li {
  list-style-type: none;
}

nav ul li a {
  display: block;
  padding: 0.5em 1em 0.5em 0;
}

nav ul li.active a, body.kind-taxonomy ul li a[href="/news/"] {
  text-decoration: none;
}

/* - - Indie i Logo */

h1#indie, h2#indie {
  font-size: 2em;
  text-align: center;
}

h1#indie a, h2#indie a {
  background: url('/images/i.svg') top center no-repeat;
  background-size: 1.7em;
  display: block;
  height: 0;
  margin: 0 0 1em 0; /* left-align logo */
  overflow: hidden;
  padding-top: 3em;
  padding-left: 1.7em; /* width of image */
  width: 0;
}

@media (min-width: 40em) {
  h1#indie, h2#indie {
    margin-left: -0.2em; /* pull logo to slightly overlap left margin */
  }
  
  h1#indie a, h2#indie a {
    margin-left: 0;
  }
}

h1#indie a:hover, h2#indie a:hover {
  animation: infinite bobbing 5000ms linear;
}

/* - Bobbing animation for balloon */

@keyframes bobbing {
  30%{
    transform: translateY(-5%) rotate(1deg);
  }
  50%{
    transform: translateY(0) rotate(0);
  }
  70%{
    transform: translateY(-5%) rotate(-1deg);

  }
}

/* - - Ethical Design badge */

.ethical-design-badge {
  display: block;
  font-weight: normal;
  text-align: center;
  text-decoration: none;
}

.ethical-design-badge:before {
  background: top center no-repeat url('/images/ethical-design-badge.svg');
  background-size: 100%;
  content: "";
  display: block;
  height: 3.5em;
  margin: 0 auto;
  margin-bottom: 1em; /* space between the image and text */
  position: relative;
  text-align: center;
  text-decoration: none;
  width: 5em;
}

/* - - Footer */

footer {
  background: #eee;
  margin-top: 3em; /* same as on sections and nav */
  padding: 1em;
}

@media (min-width: 40em) {
  footer {
    margin-top: 4em; /* same as on sections and nav */
  }
}


footer h3, footer p {
  margin: 0 auto;
  max-width: 36em;
}

footer p {
  margin-top: 1em;
}

footer a[href="https://source.small-tech.org/site/www"] {
  display: block;
  margin-top: 1em;
  text-align: center;
}

/* - - - - - - - - - - - - - - 
  Home
- - - - - - - - - - - - - - */

.kind-home section:nth-of-type(1) > h2 {
  margin-top: 0.7em;
}

/* - - Learn more grid images */

#learn-more ul {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 1em;
  padding: 0;
}

@media (min-width: 35em) {
  #learn-more ul {
    grid-template-columns: 1fr 1fr;
  }
}

#learn-more li {
  list-style-type: none;
}

#learn-more li a img {
  display: block;
}

/* Style the images so they have a continuous background colour to fill available space */
#learn-more li a {
  display: block;
  overflow: hidden;
}

#learn-more .better > a:nth-of-type(1n) {
  background-color: #1A99FC; /* same as image bg */
}

#learn-more .indienet > a:nth-of-type(1n) {
  background-color: #2454A8; /* same as image bg */
}

#learn-more .ethical-design > a:nth-of-type(1n) {
  background-color: #434343; /* same as image bg */
}

#learn-more .accessibility-for-everyone > a:nth-of-type(1n) {
  background-color: #14943E; /* same as image bg */
}

#learn-more .better > a:nth-of-type(1n) img,
#learn-more .indienet > a:nth-of-type(1n) img,
#learn-more .accessibility-for-everyone > a:nth-of-type(1n) img {
  float: right; /* stick image to right of container */
}

#learn-more .ethical-design > a:nth-of-type(1n) img {
  float: left; /* stick image to left of container */
}

#learn-more li p {
  font-size: 0.9em;
}

#learn-more li p a {
  display: inline;
}

#learn-more li p a:nth-of-type(1) {
  font-weight: bold;
}

#learn-more li a:hover, #learn-more li a:active {
  color: #111;
  text-decoration: underline;
}

/* - - Fund buttons */

.fund {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 1em;
  padding: 0;
}

@media (min-width: 30em) {
  .fund {
    grid-template-columns: 1fr 1fr;
  }
}

.fund li {
  list-style-type: none;
  margin: 0;
}

.fund li a {
  border-radius: .25em;
  display: block;
  padding: 0.5em 1em;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
}

.fund li .patron {
  background: #008634;
  color: #fff;
}

.fund li .patron:hover, .fund li .patron:active {
  background: #007234;
}

.fund li .donor {
  background: #2054B3;
  color: #fff;
}

.fund li .donor:hover, .fund li .donor:active {
  background: #1C4BA0;
}

/* - - Friends grid of images */

#friends ul {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 1em;
  margin-top: 1.5em;
  padding: 0;
}

@media (min-width: 30em) {
  #friends ul {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 45em) {
  #friends ul {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

#friends li {
  list-style-type: none;
}

#friends li a {
  display: block;
}

#friends li a img {
  display: block;
  width: 85%; /* offset text alignment by making image slightly left-aligned */
}

#friends li p {
  font-size: 0.9em;
}

#friends li p a {
  display: inline;
  font-weight: bold;
}

#friends li a:hover, #friends li a:active {
  color: #111;
  text-decoration: underline;
}

/* - - - - - - - - - - - - - - 
  Events
- - - - - - - - - - - - - - */

.events-list {
  list-style-type: none;
  padding-left: 0;
}

.events-list .h-event {
  margin-bottom: 2em;
}

.events-list .p-name {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}

.events-list .p-summary {
  margin-top: 0.5em;
}

/* - - - - - - - - - - - - - - 
  News
- - - - - - - - - - - - - - */

.posts-list {
  list-style-type: none;
  padding-left: 0;
}

.posts-list .h-entry {
  margin-top: 2em;
  margin-bottom: 3em;
}

.posts-list .p-name {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}

.posts-list .p-name a {
  text-decoration: none;
}

.posts-list .p-summary {
  margin-top: 0.5em;
}