/*
 Theme Name:   Storefront Child
 Description:  Storefront Child Theme
 Author:       Sauli Purhonen
 Author URI:   https://github.com/saulipurhonen
 Template:     storefront
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         simple
 Text Domain:  storefrontchild
*/

.row {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-gap: 1rem;
}

.bold {
  font-weight: bold;
}

.site-header {
  background: url("./assets/img/varpaat.png");
  background-repeat: no-repeat;
}

.site-branding {
  display: flex;
  width: auto;
  margin-top: -1.5rem;
}

.tagline {
  margin-top: 1.4rem;
  line-height: 2rem;
  align-self: end;
}

a:focus,
input:focus,
textarea:focus,
button:focus {
  outline: 2px solid #5d3d7b;
}

/* .wp-block-cover,
.wp-block-cover-image {
  width: 116%;
  margin-left: -8%;
}
*/

.home.page-template-template-fullwidth
  .hentry
  .entry-content
  > .wp-block-cover {
  margin-bottom: 0 !important;
}

.wp-block-cover img.wp-block-cover__image-background {
  height: auto !important;
  opacity: 0.3;
}

.woocommerce-info,
.woocommerce-noreviews,
p.no-comments {
  background-color: #0f834d !important;
}

.woocommerce-breadcrumb a:focus {
  padding: 2px;
}

.wc-block-grid__product-onsale,
.onsale,
.woocommerce-pagination .page-numbers li .page-numbers:not(.current) {
  color: white;
  background: #5d3d7b;
  border: none;
}

.site {
  overflow-x: visible;
}

/* Nav */
.main-navigation ul li a:hover,
.main-navigation ul li:hover > a,
.site-title a:hover,
.site-header ul.menu li.current-menu-item > a {
  color: #0f834d;
}

button.menu-toggle {
	margin-right: 1rem;
}

button.menu-toggle a:focus,
input:focus,
textarea:focus,
button:focus {
  outline: 0;
  border-color: #5d3d7b !important;
}

button.dropdown-toggle:focus::after {
  color: #5d3d7b;
  outline: 1px solid;
  padding: 5px 10px;
  margin-right: -10px;
}

button.menu-toggle::before {
  -webkit-transform: translateY(-5px);
  -ms-transform: translateY(-5px);
  transform: translateY(-5px);
}

button.menu-toggle::after {
  -webkit-transform: translateY(5px);
  -ms-transform: translateY(5px);
  transform: translateY(5px);
}

button.menu-toggle::before,
button.menu-toggle::after,
button.menu-toggle span::before {
  width: 19px;
  left: 0.5em;
}

.handheld-navigation .dropdown-toggle {
  right: 3px;
  top: 0.3rem;
  width: 100%;
  text-align: right;
}

.handheld-navigation ul.menu li button::after {
  -webkit-transition: all, ease, 0.4s;
  transition: all, ease, 0.4s;
}

.menu-item a:focus {
  outline: 0;
  font-weight: bold;
  text-decoration: underline;
}

.secondary-navigation ul li a {
  color: #ffffffe8 !important;
}

/* Sticky nav */
.storefront-primary-navigation.sticky {
  position: fixed;
  top: 0rem;
  width: 100%;
  background: white;
}

.storefront-primary-navigation.sticky + .content {
  padding-top: 102px;
}

/* Handheld sticky nav */
.main-navigation.toggled {
  height: 100vh;
}

.main-navigation.toggled .handheld-navigation,
.main-navigation.toggled .menu > ul:not(.nav-menu),
.main-navigation.toggled ul[aria-expanded="true"] {
  max-height: calc(100vh + -128px);
  overflow-y: scroll;
}

/* Social icons */
/* Both in secondary desktop menu and in mobile primary menu */
.secondary-navigation .menu {
  font-size: 1.5rem;
}

.secondary-navigation .menu a {
  padding: 0.5rem;
}

.secondary-navigation a[href*="facebook.com"],
.secondary-navigation a[href*="instagram.com"] {
  text-indent: -9999px;
}

.secondary-navigation a[href*="facebook.com"]:after,
.secondary-navigation a[href*="instagram.com"]:after {
  text-indent: 0;
  display: block;
  float: left;
}

.secondary-navigation a[href*="facebook.com"]:after,
.secondary-navigation a[href*="instagram.com"]:after,
.main-navigation a[href*="facebook.com"]:after,
.main-navigation a[href*="instagram.com"]:after {
  font-family: "Font Awesome 5 Brands";
  font-weight: 400;
}

.secondary-navigation a[href*="facebook.com"]:after,
.main-navigation a[href*="facebook.com"]:after {
  content: "\f09a";
  color: #27152b;
}
.secondary-navigation a[href*="instagram.com"]:after,
.main-navigation a[href*="instagram.com"]:after {
  content: "\f16d";
  color: #27152b;
}

.main-navigation a:after {
  padding-left: 0.5rem;
}

/* Content */
.custom-header,
h1,
h2:not(.woocommerce-loop-product__title),
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  font-family: "Amatic SC", cursive;
}

h1,
.h1 {
  font-size: 3em !important;
}

h2:not(.woocommerce-loop-product__title),
.h2 {
  font-size: 2.5em !important;
}

h3,
.h3 {
  font-size: 2em !important;
}

h4,
.h4 {
  font-size: 1.75em !important;
}

h5,
.h5 {
  font-size: 1.5em !important;
}

h6,
.h6 {
  font-size: 1.5em !important;
}

header.entry-header {
  text-align: center;
}

/* Woocommerce */

/* Force emojis to be smaller */
.woocommerce-product-details__short-description {
  font-size: 16px;
  line-height: 1.5;
}

.woocommerce-product-details__short-description .emoji,
.woocommerce-product-details__short-description img.emoji {
  width: 1em !important;
  height: 1em !important;
  vertical-align: -0.1em;
}

/* Cookie consent */
.cookie-consent {
  display: none;
  background: #27152b;
  color: white;
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 9999;
}

.cookie-consent .col {
  width: fit-content;
  margin: 0 auto;
  padding: 0.5rem 1rem;
}

.cookie-consent button {
  margin-left: 1rem;
}

/* Footer */
.site-footer {
  background: url("./assets/img/varpaat_inv.png");
  background-repeat: no-repeat;
  background-color: #27152b;
  background-position: right;
  background-position-y: top;
  color: white;
  /* padding: 1.618em 0 0; */
}

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

ul.list {
  margin: 0;
  list-style: none;
}

.copyright {
  padding: 2rem 0;
  text-align: center;
}

#menu-main-navigation li.menu-item-has-children .dropdown-toggle {
  text-align: right;
  width: 100%;
}

/** Spacing helpers **/

.m-0 {
  margin: 0;
}

.my-lg {
	margin: 1.5rem 0;
}

.p-default: {
	padding: 1rem;
}

.py-default {
	padding: 1rem 0;
}

.px-default {
	padding: 0 1rem;
}

/* Responsive */

@media (min-width: 600px) {
  .row {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 768px) {
  .sm-only {
    display: none !important;
  }

  .storefront-secondary-navigation.woocommerce-active
    .site-header
    .site-branding {
    width: 47%;
    display: flex;
  }

  .storefront-secondary-navigation.woocommerce-active
    .site-header
    .secondary-navigation {
    width: 47.8260869565%;
    float: right;
    margin-right: 0;
  }

  .storefront-secondary-navigation.woocommerce-active
    .site-header
    .secondary-navigation {
    width: 36%;
  }

  .secondary-navigation .menu {
    font-size: 1.5rem;
  }

  .secondary-navigation .menu a {
    padding: 0.5rem;
  }

  .main-navigation ul.menu ul a:hover,
  .main-navigation ul.menu ul li:hover > a,
  .main-navigation ul.menu ul li.focus,
  .main-navigation ul.nav-menu ul a:hover,
  .main-navigation ul.nav-menu ul li:hover > a,
  .main-navigation ul.nav-menu ul li.focus {
    background-color: #0f834d;
    color: white;
  }

  .main-navigation ul ul,
  .secondary-navigation ul ul {
    top: 101%;
  }

  /* Mega menu */
	.main-navigation ul li:hover>ul, .main-navigation ul li.focus>ul {
		display: flex !important;
		flex-wrap: wrap;
    	width: 400px;
	}
	
	.menu-item-type-taxonomy.focus > ul.sub-menu {
		display: block !important;
		width: auto;
	}

  .menu-item-object-product_cat ul.sub-menu {
    width: 200px;
  }

  .menu-item-object-product_cat ul.sub-menu,
  .menu-item-object-product_cat ul.sub-menu li {
    background-color: #0f834d !important;
  }

  .menu-item-object-product_cat ul.sub-menu li:hover > a {
    background-color: #11643e !important;
  }

  .menu-item-object-product_cat ul.sub-menu li a,
  .menu-item-object-product_cat ul.sub-menu li.current-menu-item > a {
    color: white !important;
  }
}

@media (min-width: 900px) {
  .row {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 374px) {
  .site-header .custom-logo-link img {
    max-width: 178px;
  }
}

@media (max-width: 767px) {
  .tagline {
    display: none;
  }

  .storefront-primary-navigation.sticky {
    background: unset;
    top: 1rem;
  }
	
  .storefront-primary-navigation .col-full {
    margin: 0;
  }
	
  .handheld-navigation ul.menu li {
    padding: 0  1.41575em;
  }

  .main-navigation.toggled .handheld-navigation,
  .main-navigation.toggled .menu > ul:not(.nav-menu),
  .main-navigation.toggled ul[aria-expanded="true"] {
    height: 100vh;
    padding-bottom: 8rem;
    background: white;
  }

  .wp-block-cover img.wp-block-cover__image-background {
    height: 100% !important;
  }

  .cookie-consent {
    bottom: 69px;
  }
}

@media (max-width: 1330px) {
  .site-header {
    background: none;
  }
}