/* Header styles */

.admin-bar header.wp-block-template-part {
  top: 32px;
}

header.wp-block-template-part {
  position: sticky;
  top: 0;
  z-index: 999;
}

header.wp-block-template-part .pinena-header {
  box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.1);
}

header.wp-block-template-part
  .pinena-header
  .pinena-header__inner
  .pinena-header__nav
  .wp-block-navigation-item {
  position: relative;
}

header.wp-block-template-part
  .pinena-header
  .pinena-header__inner
  .pinena-header__nav
  .wp-block-navigation-item::after,
header.wp-block-template-part
  .pinena-header
  .pinena-header__inner
  .pinena-header__nav
  .wp-block-navigation-item
  .wp-block-navigation-item__content::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: transparent;
  transition: background-color 0.2s ease;
}

header.wp-block-template-part
  .pinena-header
  .pinena-header__inner
  .pinena-header__nav
  .wp-block-navigation-item:hover::after,
header.wp-block-template-part
  .pinena-header
  .pinena-header__inner
  .pinena-header__nav
  .wp-block-navigation-item.current-menu-item::after,
header.wp-block-template-part
  .pinena-header
  .pinena-header__inner
  .pinena-header__nav
  .wp-block-navigation-item
  .wp-block-navigation-item__content[aria-expanded="true"]::after {
  background-color: var(--wp--preset--color--orange);
}

/* Submenu */
@media screen and (min-width: 900px) {
  header.wp-block-template-part
    .pinena-header
    .pinena-header__inner
    .pinena-header__nav
    .wp-block-navigation__submenu-icon {
    display: none !important;
  }

  header.wp-block-template-part
    .pinena-header
    .pinena-header__inner
    .pinena-header__nav
    li.wp-block-navigation-item.open-on-click
    .wp-block-navigation-submenu__toggle {
    padding: 0;
  }

  header.wp-block-template-part
    .pinena-header
    .pinena-header__inner
    .pinena-header__nav
    ul.wp-block-navigation-submenu {
    left: -30px;
    top: 40px;
    background: var(--wp--preset--color--light-beige);
    border: none;
    box-shadow: 0 4px 20.7px 0 rgba(0, 0, 0, 0.1);
    min-width: 28em;
    padding: 2em;
    gap: 0.75em;
    z-index: 99;
  }

  header.wp-block-template-part
    .pinena-header
    .pinena-header__inner
    .pinena-header__nav
    ul.wp-block-navigation-submenu
    .wp-block-navigation-item__content {
    font-family: var(--wp--preset--font-family--haikara);
    font-size: var(--wp--preset--font-size--text-l);
    color: var(--wp--preset--color--green);
    line-height: 1.25;
    font-weight: 500;
    padding: 0.25em 0;
  }
}

/* Header actions row */

header.wp-block-template-part
  .pinena-header
  .pinena-header__inner
  .pinena-header__actions
  .contact-link
  a {
  position: relative;
  color: var(--wp--preset--color--dark-green);
  font-family: var(--wp--preset--font-family--figtree);
  font-size: var(--wp--preset--font-size--text-s);
  text-decoration: none;
  transition: color 0.2s ease;
}

header.wp-block-template-part
  .pinena-header
  .pinena-lang-switcher
  .pinena-lang-switcher__toggle::after,
header.wp-block-template-part
  .pinena-header
  .pinena-header__inner
  .pinena-header__actions
  .contact-link
  a::after,
header.wp-block-template-part
  .pinena-header
  .pinena-header__inner
  .pinena-header__actions
  .wc-block-mini-cart__button
  .wc-block-mini-cart__quantity-badge::after {
  content: "";
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: transparent;
  transition: background-color 0.2s ease;
}
header.wp-block-template-part
  .pinena-header
  .pinena-lang-switcher:hover
  .pinena-lang-switcher__toggle::after,
header.wp-block-template-part
  .pinena-header
  .pinena-header__inner
  .pinena-header__actions
  .contact-link:hover
  a::after,
header.wp-block-template-part
  .pinena-header
  .pinena-header__inner
  .pinena-header__actions
  .wc-block-mini-cart__button:hover
  .wc-block-mini-cart__quantity-badge::after {
  background-color: var(--wp--preset--color--orange);
}

header.wp-block-template-part .pinena-header .pinena-lang-switcher .pinena-lang-switcher__toggle {
  position: relative;
  background: transparent;
  border: none;
  color: var(--wp--preset--color--dark-green);
  font-family: var(--wp--preset--font-family--figtree);
  font-size: var(--wp--preset--font-size--text-m);
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  padding: 0;
  margin: 0;
  transition: color 0.2s ease;
}

header.wp-block-template-part
  .pinena-header
  .pinena-header__inner
  .pinena-header__actions
  .wc-block-mini-cart__button {
  position: relative;
  padding: 0.5rem 0;
  /*margin: 0 0 0.2rem;*/
}

@media screen and (min-width: 900px) and (max-width: 1100px) {
  header.wp-block-template-part .pinena-header .pinena-header__inner,
  header.wp-block-template-part .pinena-header .pinena-header__inner .pinena-header__actions {
    gap: var(--wp--preset--spacing--20);
  }

  header.wp-block-template-part
    .pinena-header
    .pinena-header__inner
    .pinena-header__nav
    ul.wp-block-navigation-submenu {
    min-width: 320px;
  }

  header.wp-block-template-part .pinena-header .pinena-header__inner .pinena-header__nav {
    gap: var(--wp--preset--spacing--20) !important;
  }
}

/* Mobile menu */

@media screen and (max-width: 900px) {
  /* Override WordPress navigation block breakpoint: show hamburger at <= 900px instead of 600px */
  nav.wp-block-navigation
    .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
    display: none !important;
  }

  nav.wp-block-navigation .wp-block-navigation__responsive-container-open:not(.always-shown) {
    display: flex !important;
  }

  .admin-bar header.wp-block-template-part {
    top: 46px;
  }

  .pinena-header__inner {
    width: 100%;
    align-items: center;
  }

  .pinena-header__inner > .pinena-header__nav {
    width: 100%;
    justify-content: space-between;
  }

  .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__responsive-dialog
    .wp-block-navigation__overlay-container
    ul.wp-block-navigation__container {
    width: 100%;
  }

  button.wp-block-navigation__responsive-container-open {
    padding: var(--wp--preset--spacing--10);
    border: 2px solid #173d1026;
    border-radius: 999px;
  }

  header.wp-block-template-part
    .pinena-header
    .pinena-header__inner
    .pinena-header__nav
    .wp-block-navigation-item::after {
    display: none !important;
  }

  .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__responsive-dialog
    .wp-block-navigation__overlay-container
    .wp-block-group
    .wp-block-navigation
    > ul.wp-block-navigation__container
    li.wp-block-navigation-item
    .wp-block-navigation-item__content {
    font-family: var(--wp--preset--font-family--haikara);
    font-size: var(--wp--preset--font-size--text-m);
  }

  /* Submenu */
  .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__responsive-dialog
    .wp-block-navigation__overlay-container
    .wp-block-group
    .wp-block-navigation
    > ul.wp-block-navigation__container
    li.wp-block-navigation-item.wp-block-navigation-submenu.has-child {
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__responsive-dialog
    .wp-block-navigation__overlay-container
    .wp-block-group
    .wp-block-navigation
    > ul.wp-block-navigation__container
    li.wp-block-navigation-item.wp-block-navigation-submenu.has-child
    > .wp-block-navigation__submenu-icon {
    display: none !important;
  }

  .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__responsive-dialog
    .wp-block-navigation__overlay-container
    .wp-block-group
    .wp-block-navigation
    > ul.wp-block-navigation__container
    li.wp-block-navigation-item.wp-block-navigation-submenu.has-child
    .wp-block-navigation-item__content.wp-block-navigation-submenu__toggle {
    width: 100%;
    position: relative;
  }

  .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__responsive-dialog
    .wp-block-navigation__overlay-container
    .wp-block-group
    .wp-block-navigation
    > ul.wp-block-navigation__container
    li.wp-block-navigation-item.wp-block-navigation-submenu.has-child
    .wp-block-navigation-item__content.wp-block-navigation-submenu__toggle::after {
    display: none;
  }

  .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__responsive-dialog
    .wp-block-navigation__overlay-container
    .wp-block-group
    .wp-block-navigation
    > ul.wp-block-navigation__container
    li.wp-block-navigation-item.wp-block-navigation-submenu.has-child
    .wp-block-navigation-item__content.wp-block-navigation-submenu__toggle::before {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    display: inline-block;
    width: 16px;
    height: 10px;
    background-color: currentColor;
    -webkit-mask-image: url(../icons/chevron.svg);
    mask-image: url(../icons/chevron.svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    flex-shrink: 0;
    transform-origin: center;
    transition: transform 0.2s;
  }

  .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__responsive-dialog
    .wp-block-navigation__overlay-container
    .wp-block-group
    .wp-block-navigation
    > ul.wp-block-navigation__container
    li.wp-block-navigation-item.wp-block-navigation-submenu.has-child
    .wp-block-navigation-item__content.wp-block-navigation-submenu__toggle[aria-expanded="true"]::before {
    transform: translateY(-50%) rotate(-180deg);
  }

  .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__responsive-dialog
    .wp-block-navigation__overlay-container
    .wp-block-group
    .wp-block-navigation
    > ul.wp-block-navigation__container
    li.wp-block-navigation-item.wp-block-navigation-submenu.has-child
    > .wp-block-navigation__submenu-container.wp-block-navigation-submenu {
    position: relative !important;
    background: transparent !important;
    border: none !important;
    width: 100%;
    min-width: 100%;
  }

  .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__responsive-dialog
    .wp-block-navigation__overlay-container
    .wp-block-group
    .wp-block-navigation
    > ul.wp-block-navigation__container
    li.wp-block-navigation-item.wp-block-navigation-submenu.has-child
    > .wp-block-navigation__submenu-container.wp-block-navigation-submenu
    > li.wp-block-navigation-item
    > .wp-block-navigation-item__content {
    padding: 24px 0 0 0 !important;
  }

  header.wp-block-template-part .pinena-header .pinena-lang-switcher .pinena-lang-switcher__toggle {
    color: var(--wp--preset--color--white);
  }
}