/*
Theme Name:        Wiggly Goat Farm
Theme URI:         https://github.com/ndiego/wiggly-goat-farm/
Author:            Nick Diego
Author URI:        https://www.nickdiego.com
Description:       An ecommerce block theme for Wiggly Goat Farm.
Requires at least: 6.1
Requires PHP:      5.6
Version:           0.1.0
License:           GNU General Public License v2 or later
License URI:       http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:       wgf
*/
/* Defaults
 ----------------------------------------------------------------------------- */
body {
  overflow-x: hidden;
}

html {
  box-sizing: border-box;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  /* Add smooth scrolling to anchor links throughout the site. */
  scroll-behavior: smooth;
}

* {
  box-sizing: border-box;
}

/* General Styles (Styles not supported in theme.json and/or not block specific)
 ----------------------------------------------------------------------------- */
/*
 * Text and navigation link styles.
 */
a {
  text-decoration-thickness: 1px;
  text-underline-offset: 0.5ch;
}

/*
 * Make bold styles look a bit nicer.
 */
strong {
  color: var(--wp--preset--color--primary);
  font-weight: 600;
}

/*
 * Custom styles for form inputs, textareas and labels.
 */
input,
select,
textarea {
  font-size: var(--wp--preset--font-size--small);
  padding: 0.8rem 1rem;
}

input:not([type=submit]),
textarea {
  border: var(--wp--custom--border--default);
  border-radius: var(--wp--custom--border-radius--default);
  font-size: var(--wp--preset--font-size--small);
}

label {
  font-family: var(--wp--preset--font-family--primary);
  font-size: var(--wp--preset--font-size--medium);
  font-weight: 500;
}

select {
  border: var(--wp--custom--border--default);
  border-radius: var(--wp--custom--border-radius--default);
  color: var(--wp--preset--color--primary-light);
  min-height: 30px;
  padding: 0.8rem 1rem;
}

fieldset {
  border: none;
  padding: 0;
}
fieldset legend {
  font-weight: 500;
}

/*
 * Set default font style for cite.
 */
cite {
  font-style: normal;
}

/*
 * Custom color for the * indicator in forms.
 */
span.required {
  color: var(--wp--preset--color--secondary);
  font-family: var(--wp--preset--font-family--primary);
  font-size: var(--wp--preset--font-size--medium);
  font-weight: 600;
}

/*
 * Responsive menu container padding.
 * This ensures the responsive container inherits the same
 * spacing defined above. This behavior may be built into
 * the Block Editor in the future.
 */
.wp-block-navigation__responsive-container.is-menu-open {
  padding: var(--wp--preset--spacing--medium);
  padding-bottom: calc(2 * var(--wp--preset--spacing--medium));
}

/*
 * Visually separate the page/post title from the post content in Editor.
 */
.edit-post-visual-editor__post-title-wrapper {
  align-items: center;
  display: flex;
  background-color: #fff;
  border-bottom: 1px solid #dddddd;
  margin-top: 0 !important;
  margin-bottom: 0;
  min-height: 48px;
}

.edit-post-visual-editor__post-title-wrapper h1 {
  color: var(--wp--preset--color--primary);
  font-size: 18px;
  text-align: center;
}

/* Add a little separation, but allow blocks with margin control to override. */
.block-editor-block-list__layout.is-root-container:not(.edit-site-block-editor__block-list):not(.is-outline-mode) > *:first-child:not(.alignfull) {
  margin-top: calc(2 * var(--wp--style--block-gap));
}

/*
 * Utility styles.
 ----------------------------------------------------------------------------- */
/* Margin */
.my-0 {
  margin-bottom: 0 !important;
  margin-top: 0 !important;
}

.mt-0,
.mt-0 .wp-block-post-template {
  margin-top: 0 !important;
}

/* Height */
.height-100 {
  height: 100%;
}

/* Flexbox */
.items-start {
  align-items: flex-start !important;
}

.justify-space-between {
  justify-content: space-between !important;
}

.flex-shrink-0 {
  flex-shrink: 0;
}

.flex-1 {
  flex: 1;
}

/* Box Shadow */
.box-shadow--minimal {
  box-shadow: var(--wp--custom--box-shadow--minimal);
}

.box-shadow--default {
  box-shadow: var(--wp--custom--box-shadow--default);
}

.box-shadow--none {
  box-shadow: none !important;
}

/* Border */
.border-radius--default {
  border-radius: var(--wp--custom--border-radius--default);
  overflow: hidden;
}

/* Links */
.text-decoration--none a {
  text-decoration-thickness: 0 !important;
  text-decoration: none !important;
}

.has-hidden-links a {
  text-decoration-thickness: 0 !important;
  text-decoration: none !important;
}

.has-underlined-links a,
.has-hidden-links a:hover {
  text-decoration: underline !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 0.5ch !important;
}

.has-hover-no-duotone:hover img,
img.has-hover-no-duotone:hover {
  filter: url() !important;
  transition: all 10s ease-in-out;
}

/* Conditionally display content browser width. */
@media (min-width: 781px) {
  .hide-on-desktop {
    display: none !important;
  }
}
@media (max-width: 782px) {
  .hide-on-tablet {
    display: none !important;
  }
}
@media (max-width: 599px) {
  .hide-on-mobile {
    display: none !important;
  }
}
/* Mobile align content. */
@media (max-width: 782px) {
  .mobile-align-center,
  .mobile-align-center .has-text-align-left,
  .mobile-align-center .has-text-align-right {
    text-align: center !important;
  }
  .mobile-align-center.is-layout-flex,
  .mobile-align-center .is-layout-flex {
    display: inline-flex;
    justify-content: center;
  }
  .mobile-align-left,
  .mobile-align-left .has-text-align-right,
  .mobile-align-left .has-text-align-center {
    text-align: left !important;
  }
  .mobile-align-left.is-layout-flex,
  .mobile-align-left .is-layout-flex {
    display: inline-flex;
    justify-content: start;
  }
}
.wp-block-eedee-block-gutenslider {
  --gutenslider-dot-y-offset: 1.5rem !important;
}
/* .wp-block-eedee-block-gutenslider .swiper {
  max-width: 1200px;
} */
.wp-block-eedee-block-gutenslider.arrow-position-sides .eedee-gutenslider-nav {
  display: none;
}
.wp-block-eedee-block-gutenslider.arrow-position-sides .eedee-gutenslider-nav svg {
  stroke: var(--wp--preset--color--white);
}
.wp-block-eedee-block-gutenslider.arrow-position-sides:hover .eedee-gutenslider-nav {
  display: block;
}

/*--------------------------------------------------------------
	* Responsive Breakpoints

		 @include breakpoint(768)	{ } sm
		 @include breakpoint(1024)	{ } md
		 @include breakpoint(1280)	{ } lg
		 @include breakpoint(1536)	{ } xl
		 @include breakpoint(1140)	{ } header
	* ------------------------------------------------------------ */
/* Centering */
/* Button styles */
/* Button sizes */
/* Avatars */
/* Grid gaps */
.mobile-hide {
  display: none !important;
}

@media (min-width: 64em) {
  .tablet-hide {
    display: none !important;
  }
  .tablet-show {
    display: block !important;
  }
  .tablet-flex {
    display: flex;
  }
  .justify-between {
    justify-content: space-between;
  }
}
@media (min-width: 80em) {
  .desktop-hide {
    display: none !important;
  }
  .desktop-show {
    display: block !important;
  }
  .desktop-flex {
    display: flex;
  }
}
.no-hyphens {
  hyphens: none !important;
}

.no-letterspacing {
  letter-spacing: 0 !important;
}

.no-lineheight {
  line-height: 0;
}

.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.top-fullwidth {
  top: 0;
  left: 0;
  right: 0;
}

.bottom-fullwidth {
  bottom: 0;
  left: 0;
  right: 0;
}

.zindex100 {
  z-index: 100;
}

.zindex1000 {
  z-index: 1000;
}

.display-block {
  display: block !important;
}

.display-flex {
  display: flex !important;
}

.display-inline {
  display: inline !important;
}

.woocommerce-account .wp-block-post-title,
.woocommerce-account main .woocommerce {
  max-width: var(--wp--custom--layout--wide);
}
.woocommerce-account .woocommerce-MyAccount-navigation li {
  padding: 4px;
}
.woocommerce-account .woocommerce-MyAccount-navigation li a {
  color: var(--wp--preset--color--primary-light);
}
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
  color: var(--wp--preset--color--primary);
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
  color: var(--wp--preset--color--primary);
}

/*--------------------------------------------------------------
# WooCommerce
--------------------------------------------------------------*/

.woocommerce .woocommerce-breadcrumb {
	color: var(--wp--preset--color--primary);
    font-size: var(--wp--preset--font-size--small);
}

.woocommerce .woocommerce-breadcrumb a {
	color: var(--wp--preset--color--primary-light);
	text-decoration: none;
}

.woocommerce .woocommerce-breadcrumb a:hover {
	text-decoration: underline;
}