/*
Theme Name: Sass to the reCSSue
Theme URI: https://woocommerce.com/storefront/
Version: 1.0
Description: Part of the workshop "Sass to the reCSSue" at WordCamp Cape Town 2017.
Author: Job Thomas and Gareth Allison
Author URI: http://www.woocommerce.com
Tags: woocommerce, storefront, sass, css
Template: Storefront

-------------------------------------------------------------------------------------------*/
@import url("https://fonts.googleapis.com/css?family=Athiti|Domine");

/* General */

body {
  background-color: #f7f7f7;
  font-family: "Athiti", Helvetica, Arial, san-serif;
}

h1, h2, h3, .site-title {
    font-family: 'Domine', Times New Roman, serif;
}

.site-header .site-branding .site-description,
.storefront-primary-navigation ul li a,
.entry-title,
.section-title,
.products .count,
.products .onsale,
.site-footer a:not(.button) {
  font-weight: bold;
}

/* Header */

.site-header {
  background-color: #b0dbd2;
  border-bottom: none;
}

  .site-header .site-branding .site-title,
  .site-header .site-branding .site-description {
    color: #000;
  }

  .site-header .site-search input[type=search] {
    background-color: #f3deb3 !important;
    box-shadow: none;
  }

/* Navigation */

.storefront-primary-navigation ul li a {
  color: #000;
  transition: color 0.3s ease;
  -webkit-transition: color 0.3s ease;
  -moz-transition: color 0.3s ease;
  -ms-transition: color 0.3s ease;
  -o-transition: color 0.3s ease;
}

  .storefront-primary-navigation ul li a:hover {
    background-color: black;
    color: #fff;
  }

/* Hero */

.entry-title.loaded:after,
.section-title.loaded:after {
  background-image: url(https://pbs.twimg.com/profile_images/914511436768038912/DIyOOwd8.jpg);
  background-size: 200px 200px;
  display: block;
  margin: 20px auto;
  width: 200px;
  height: 200px;
  content: '';
  border-radius: 2em;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  background-clip: padding-box;
  -webkit-background-clip: padding-box;
  -moz-background-clip: padding;
  box-shadow: 0px 0px 100px #f3a591;
  -webkit-box-shadow: 0px 0px 100px #f3a591;
  -moz-box-shadow: 0px 0px 100px #f3a591;
}

/* Products */

.products li:hover img {
  opacity: 1;
  filter: alpha(opacity=100);
}

  .products img {
    opacity: 0.8;
    filter: alpha(opacity=80);
  }

  .products .count {
    color: #f3a591;
  }

  .products .onsale {
    background-color: #f3deb3;
    border-color: #f3deb3;
  }

/* Buttons */

.button {
  background-color: #f3a591;
  color: #000;
  transition: color 0.3s ease;
  -webkit-transition: color 0.3s ease;
  -moz-transition: color 0.3s ease;
  -ms-transition: color 0.3s ease;
  -o-transition: color 0.3s ease;
  border-radius: 2em;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  background-clip: padding-box;
  -webkit-background-clip: padding-box;
  -moz-background-clip: padding;
}

  .button:hover {
    background-color: black;
    color: #fff;
    box-shadow: 0px 0px 50px grey;
    -webkit-box-shadow: 0px 0px 50px grey;
    -moz-box-shadow: 0px 0px 50px grey;
  }

/* Footer */

.site-footer {
  background-color: #b0dbd2;
  color: #000;
}

  .site-footer a:not(.button) {
    color: #000;
  }

/* Media queries */

@media (min-width: 768px) {
  .entry-title.loaded:after,
  .section-title.loaded:after {
    display: none;
  }
}

@media (min-width: 1070px) {
  .site-header .site-branding {
    padding-bottom: 2.6em;
  }
  .site-header-cart .cart-contents {
    padding: 1.618em 8%;
  }
  .storefront-primary-navigation {
    background-color: #f3a591;
  }
}