/**
 * Styles for the blocks on the editor and the frontend.
 */

@media (max-width: 600px) {

  :root {
    --wp--preset--spacing--70: 2rem;
    --wp--preset--spacing--80: 3rem;
    --wp--preset--spacing--90: 4rem;
  }

  body h1 {
    font-size: 2rem;
  }

  .heading-container {
    height: auto;
    min-height: 500px !important;
  }
}

/* Header block template styles */

header.wp-block-template-part {
  width: 100%;
  position: absolute;
  z-index: 10000;
  transition: top 0.8s, background-color 0.5s;
}

header.wp-block-template-part.scroll {
  position: fixed;
  top: -299px;
}

header.wp-block-template-part.fixed.scroll {
  position: fixed;
  top: 0;
  /* background-color: var(--wp--preset--color--custom-vktoy-sininen-keski); */
}

.header-top-row {
  transition: background-color 0.8s;
}

header.wp-block-template-part.fixed.scroll .header-top-row {
  background-color: #011823;
}

.header-bottom-center {}

.mobile-header {
  background-color: var(--wp--preset--color--custom-vktoy-vaaleanharma);
}

@media screen and (min-width: 1025px) {
  .mobile-header {
    display: none;
  }

  .desktop-header {
    display: block;
  }
}

@media screen and (max-width: 1024px) {
  .desktop-header {
    display: none;
  }

  .mobile-header {
    display: block;
  }
}

/* navigation */

.wp-block-navigation-item__content {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.header-top-row .wp-block-navigation-item__content:hover span {
  border-bottom: 1px solid;
}

.desktop-header ul.wp-block-navigation-submenu,
.mobile-menu-canvas ul.wp-block-navigation-submenu {
  border-radius: 0.25rem;
  /* overflow: hidden !important; */
  /* font-family: "Fira Sans", sans-serif; */
  letter-spacing: 1.1;
  font-size: 0.95rem;

  background-color: var(--wp--preset--color--custom-vktoy-vaaleanharma);
}

.desktop-header .wp-block-navigation-submenu li:hover {
  background-color: rgb(240, 240, 240);
}

.desktop-header .wp-block-navigation .has-child .wp-block-navigation-submenu__toggle[aria-expanded=true]~.wp-block-navigation__submenu-container {
  width: max-content;
}

.desktop-header .wp-block-navigation-submenu li a,
.mobile-header .wp-block-navigation-submenu li a {
  padding: 1rem;
}

.mobile-menu-canvas .wp-block-navigation .wp-block-navigation-item {
  flex-wrap: wrap;
}

.mobile-menu-canvas .wp-block-navigation .has-child .wp-block-navigation__submenu-container {
  position: relative;
  width: 100%;
}

.desktop-header .header-desktop-inner-row {
  box-shadow: 0 4px 4px 0 rgb(0 0 0 / 25%);
}

/* header .desktop-header .wp-block-navigation-item :not(:has(.wp-block-navigation__submenu-container)) a {
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
  transition: border-bottom-color 0.3s;
} */

header .desktop-header .wp-block-navigation-item a {
  padding-top: 0.1rem;
  padding-bottom: 0.1rem;
  border-top: 2px solid transparent;
  border-bottom: 2px solid transparent;
  transition: border-color 0.2s ease;
}


header .desktop-header nav>ul>.wp-block-navigation-item:not(:has(.wp-block-navigation__submenu-container))>a:hover,
header .desktop-header .wp-block-navigation-item:not(:has(.wp-block-navigation__submenu-container)) a:focus,
header .desktop-header .wp-block-navigation-item:not(:has(.wp-block-navigation__submenu-container)) a:active,
header .desktop-header nav>ul>.current-menu-item>a,
header .desktop-header .wp-block-navigation-item:has(.current-menu-item)>a {
  border-bottom-color: var(--wp--preset--color--custom-vktoy-oranssi);
}


/* Search canvas and Menu canvas */

.mobile-search-canvas,
.mobile-menu-canvas {
  width: 100%;
  position: fixed;
  z-index: 999;
  top: 0;
  right: -100%;
  overflow-x: hidden;
  transition: 0.1s;
  height: 0;
}

.mobile-search-canvas.open,
.mobile-menu-canvas.open {
  width: 100%;
  height: 100dvh;
  right: 0;
  overflow-y: scroll;
  background-color: var(--wp--preset--color--custom-vktoy-vaaleanharma);
}

/**
 * When the mobile search canvas is open, prevent scrolling on the body
 */
body:has(.mobile-search-canvas.open),
body:has(.mobile-menu-canvas.open) {
  overflow: hidden;
}

.mobile-search-canvas .wp-block-column {
  overflow-wrap: normal;
  word-break: normal;
}

/* Contact form */

.form-wrapper {
  padding: 1.5rem;
  border: 1px solid #E9E9E9;
  border-radius: 0.5rem;
}

.wpcf7-form-control-wrap {
  display: block;
}

input.wpcf7-form-control.wpcf7-text,
textarea.wpcf7-form-control.wpcf7-textarea {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid #E9E9E9;
  border-radius: 0.5rem;
  box-sizing: border-box;
}

/* elements */

.home .entry-content {
  margin-block-start: 0;
}

.wp-block-template-part {
  margin-block-start: initial;
}

hr.wp-block-separator {
  border-top: 1px solid;
}

a.wp-block-button__link.wp-element-button:has(img) {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: 1rem;
  padding-right: 1.5rem;
}

.wp-block-button__link:hover {
  filter: brightness(1.4);
}

/* Terms Block */

.wp-block-post-terms {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  margin: 1.5rem 0;
}

.wp-block-post-terms .wp-block-post-terms__separator {
  display: none;
}

.wp-block-post-terms a {
  color: #ffffff;
  text-decoration: none;
  padding: 0.33rem 1rem 0.3rem;
  border-radius: 1rem;
  font-size: small;
  line-height: 1;
}

.wp-block-post-terms.taxonomy-product_tag a {
  /* background-color: var(--wp--preset--color--custom-vktoy-oranssi); */
  background-color: var(--wp--preset--color--custom-vktoy-sininen-keski);
}

.wp-block-post-terms.taxonomy-product_category a {
  background-color: var(--wp--preset--color--custom-vktoy-sininen-keski);
}