/**
 * @file
 * The header components.
 *
 * It includes styles for the header itself and their
 * component as the logotype or the main menu.
 */

/**
 * Global header rules
 */

.main__header {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  z-index: 10;
  padding: 1rem 0;
  -webkit-box-shadow: 0px 10px 20px -10px rgba(0,0,0,0.05);
  box-shadow: 0px 10px 20px -10px rgba(0,0,0,0.05);
}
.main__header span {
  cursor: default;
}
.menu__link  {
  user-select: none;
}
@media all and (min-width: 610px) {
  .role-administrator .main__header {
    top: 39px;
  }
}
@media all and (min-width: 975px) {
  .role-administrator .main__header {
    top: 53px;
  }
}
@media all and (min-width: 1000px) {
  .main__header {
    padding: 0;
    transition: 0.2s;
  }
  .main__header-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}



/**
 * Header Brand
 */

.main__header-brand {
  width: fit-content;
}
.main__header-brand .block-system-branding-block {
  z-index: 10;
  position: relative;
}
.main__header-brand a{
  display: inline-block;
}
.main__header-brand img{
  display: block;
}
@media all and (min-width: 1000px) {
  .main__header-brand img{
    max-width: 125px;
  }
}
@media all and (min-width: 1300px) {
  .main__header-brand img{
    max-width: none;
  }
}


/**
 * Header Menu
 */


.main__header-menu {
  position: fixed;
  top: 85.5px;
  left: 0;
  width: 0;
  bottom: 0;
  overflow: hidden;
  transition: 0.2s;
}
.main__header-menu.is-active {
  width: 100%;
}
.main__header-menu-wrapper {
  height: 100%;
  width: 0;
  transition: 0.3s;
  background-color: var(--brand-secondary-light-color);
  overflow: scroll;
}
.main__header-menu .menu {
  margin: 0;
}
.main__header-menu.is-active .main__header-menu-wrapper{
  width: 90%;
}
.main__header-menu .menu__item--level-0.menu__item--expanded {
  position: relative;
}
.main__header-menu .menu__item--level-0.menu__item--expanded::after {
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  right: 1.5rem;
  transform: translateY(-50%);
  width: 8px;
  height: 14px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url('../../images/arrow-dark.svg');
}
.main__header-menu .menu--level-1 {
  position: fixed;
  top: 85.5px;
  right: 10%;
  bottom: 0;
  width: 0;
  overflow: hidden;
  z-index: 12;
  transition: 0.2s;
}
.menu--level-1 .menu__link-title {
  cursor: pointer;
}
.main__header-menu .menu--level-1.is-active {
  width: 90%;
}
.main__header-menu .menu--level-1 .menu--level-wrapper {
  background-color: var(--brand-white);
  height: 100%;
  overflow: scroll;
}
.main__header-menu .menu--level-1.is-active .menu--level-wrapper {
  width: 100%;
}
.role-administrator .main__header-menu,
.role-administrator .main__header-menu .menu--level-1 {
  top: 124.5px;
}
.main__header-menu .menu--level-1 .menu__link-image {
  display: none;
}
@media all and (min-width: 975px) {
  .role-administrator .main__header-menu,
  .role-administrator .main__header-menu .menu--level-1 {
    top: 138px;
  }
}
@media all and (min-width: 1000px) {
  .main__header-menu {
    position: static;
    top: initial;
    left: initial;
    width: initial;
    bottom: initial;
    background-color: var(--brand-white);
    overflow: initial;
    width: 100%;
  }
  .main__header-menu-wrapper {
    width: 100%;
    overflow: initial;
    display: flex;
    justify-content: space-between;
    background-color: var(--brand-white);

  }
  .main__header-menu .menu--level-1 .menu__link-image {
    display: block;
  }
  .main__header-menu .menu__item--level-0.menu__item--expanded::after {
    content: none;
  }
  .main__header-menu .menu--level-1 {
    /* top: 119px; */
    bottom: initial;
    width: 100%;
    height: 0;
    background-color: var(--brand-white);
    overflow: hidden;
    -webkit-box-shadow: 0px 10px 20px -10px rgba(0,0,0,0.05);
    box-shadow: 0px 10px 20px -10px rgba(0,0,0,0.05);
    transition: none;
  }
  .role-administrator .main__header-menu .menu--level-1 {
    top: 172px;
  }
  .main__header-menu .menu--level-1 .menu--level-wrapper {
    width: 70%;
    display: grid;
    grid-gap: 2rem;
    justify-content: end;
    padding: 2rem;
    overflow: hidden;
  }
  .main__header-menu .menu__link-container-submenu--size-s .menu--level-1 .menu--level-wrapper {
    grid-template-columns: repeat(2,180px);
  }
  .main__header-menu .menu__link-container-submenu--size-m .menu--level-1 .menu--level-wrapper {
    grid-template-columns: repeat(3,180px);
  }
  .main__header-menu .menu--level-1 .menu__item--level-1.menu__item--expanded {
    position: absolute;
    width: 30%;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: var(--brand-primary-medium-color);
    padding: 2rem;
    min-height: 280px;
  }
  .main__header-menu .menu__item--level-0.menu__item--expanded .menu--level-1 {
    left: 0;
    right: 0;
  }
  .main__header-menu .menu__item--level-0.menu__item--expanded .menu--level-1::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: rgb(255,255,255);
    background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 70%, rgba(255,225,221,1) 70%);
    z-index: -1;
  }
  .main__header-menu .menu__item--level-0.menu__item--expanded:hover::before {
    content: "";
    display: block;
    position: absolute;
    bottom: -4.5px;
    left: 50%;
    transform: translateX(-50%);
    width: 9px;
    height: 9px;
    background-image: url('../../images/losange-hover-menu.svg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 99;
  }
  .main__header-menu .menu__item--level-0.menu__item--expanded:hover > span.menu__link {
    color: var(--brand-primary-color);
  }
  .main__header-menu .menu__item--level-0.menu__item--expanded:hover .menu--level-1 {
    height: max-content;
    min-height: 280px;
    border-top: 1px solid var(--brand-grey-light);
  }
  .main__header-menu .menu__item--level-0.menu__item--expanded .menu--level-1 .grid-row {
    position: relative;
  }
  .main__header-menu .menu--level-1 .menu__item--level-1.menu__item--expanded .menu__link {
    text-align: left;
    max-width: 210px;
  }
  .main__header-menu .menu__item.menu__item--level-2 .menu__link {
    padding: 1rem;
    border-top: 1px solid var(--brand-white);
  }
  .main__header-menu .menu__item.menu__item--level-2:last-child .menu__link {
    border-bottom: 1px solid var(--brand-white);
  }
  .main__header-menu .menu__item.menu__item--level-2 .menu__link:hover {
    color: var(--brand-secondary-color);
    background: linear-gradient(270.12deg, #FFE1DD 0.1%, #FFF2F1 99.89%);
  }
}
@media all and (min-width: 1300px) {
  .main__header-menu .menu--level-1 {
    top: 99px;
  }
  .role-administrator .main__header-menu .menu--level-1 {
    top: 152px
  }
  .main__header-menu .menu--level-1 .menu__item--level-1.menu__item--expanded .menu__link {
    max-width: 240px;
  }
  .main__header-menu .menu__item--level-0.menu__item--expanded:hover::before {
    bottom: -5px;
  }
}

/**
 * Back To Lvl 0
 */

.menu-item-back {
  display: block;
  width: 100%;
  background-color: var(--brand-secondary-light-color);
  padding: 1rem 3rem;
  position: relative;
  font-size: var(--paragraph-size-large);
}
.menu-item-back::before {
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  left: 1.5rem;
  transform: translateY(-50%);
  width: 8px;
  height: 14px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url('../../images/arrow-back.svg');
}

/**
 * Header Primary Menu
 */

.main__header-menu-primary .menu__link {
  display: block;
  width: 100%;
  padding: 1rem 1.5rem;
}
.main__header-menu-primary {
  background-color: var(--brand-white);
}
.main__header-menu-primary .menu--level-1 .menu__link {
  display: block;
  width: 100%;
  padding: 1rem 3rem;
}
@media all and (min-width: 1000px) {
  .main__header-menu-primary .menu--level-0 {
    display: flex;
    justify-content: space-between;
  }
  .main__header-menu-primary .menu__link {
    padding: 2rem 0.5rem 2rem 0.5rem;
    transition: 0.1s;
  }
  .main__header-menu-primary .menu__link:hover {
    color: var(--brand-primary-color);
    text-decoration: none;
  }
  .main__header-menu-primary {
    z-index: 10;
    position: relative;
    width: 100%;
  }
  .main__header-menu-primary .region-header-primary-menu {
    padding: 0 1rem;
    max-width: 790px;
    margin: auto;
  }

  .main__header-menu-primary .menu--level-1 .menu__link{
    padding: 0;
    text-align: center;
    text-transform: uppercase;
    font-size: var(--paragraph-size-small);
    color: var(--brand-grey-medium);
  }
  .main__header-menu-primary .menu--level-1 .menu__link:hover{
    background-color: var(--brand-secondary-light-color);
  }
  .main__header-menu-primary .menu--level-1 .menu__link-title{
    padding: 0.5rem;
    display: block;
  }
}


/**
 * Header Secondary Menu
 */

.main__header-menu-secondary {
  font-size: var(--paragraph-size-small);
  position: relative;
}
.main__header-menu-secondary .menu__link {
  padding: 0.5rem 0;
  display: block;
}
.region-header-secondary-menu .block-commerce-cart {
  display: none;
}
.region-header-secondary-menu {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 16px;
  padding: 1rem;
}
.menu--mobile-only-menu {
  display: block;
}
.menu--mobile-only-menu .menu {
  display: flex;
  flex-direction: column;
  align-items: center;
}
@media all and (min-width: 1000px) {
  .menu--mobile-only-menu {
    display: none;
  }
  .main__header-menu-secondary {
    background-color: var(--brand-white);
    flex-shrink: 0;
  }
  .region-header-secondary-menu {
    padding: 0;
    height: 100%;
    justify-content: unset;
    flex-direction: row;
    gap: 16px;
  }
  .region-header-secondary-menu .block-commerce-cart {
    display: block;
  }
  .main__header-menu-secondary .menu {
    display: flex;
    justify-content: flex-end;
    font-size: var(--paragraph-size-extra-small);
  }
  .main__header-menu-secondary .menu__link {

  }
}
@media all and (min-width: 1400px) {
  .main__header-menu-secondary {

  }
  .region-header-secondary-menu {
    gap: 24px;
  }
}

/**
 * Menu Link Custom
 */

.menu__link--special {
  background-color: var(--brand-primary-light-color);
}
.main__header-menu-secondary .menu__link--phone,
.main__header-menu-secondary .menu__link--price,
.main__header-menu-secondary .menu__link--logout {

  display: inline-flex;
  align-items: center;
}
.menu__link--phone::before,
.menu__link--price::before,
.menu__link--logout::before {
  content: "";
  display: block;
  position: relative;
  width: 13px;
  height: 13px;
  margin-right: 0.5rem;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
.menu__link--phone::before {
  background-image: url('../../images/phone.svg');
}

.menu__link--price::before {
  background-image: url('../../images/price.svg');
}

.menu__link--logout::before {
  background-image: url('../../images/logout.svg');
}
.main__header-menu-primary .menu__link.menu__link--sidebar,
.role-administrator .menu__link.menu__link--no-admin {
  display: none;
}
@media all and (min-width: 1000px) {
  .main__header-menu-primary .menu__link.menu__link--sidebar {
    display: block;
  }
  .main__header-menu-primary .menu__link.menu__link--special {
    background-color: transparent;
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 0;
    margin: 2rem 0.5rem 2rem 0.5rem;
    width: initial;
  }
  .menu__link--special::before {
    content: "";
    display: block;
    position: relative;
    width: 7px;
    height: 7px;
    background-color: var(--brand-primary-color);
    border-radius: 100%;
    margin-right: 0.5rem;
  }
  .menu__link--special::after {
    content: "";
    display: block;
    position: absolute;
    height: 15px;
    background-color: var(--brand-primary-light-color);
    top: 35%;
    left: 0.8rem;
    right: -0.1rem;
    z-index: -1;
  }
  .main__header-menu-primary .menu__link.menu__link--sidebar {
    margin-bottom: 1rem;
    color: var(--brand-primary-color);
    font-size: var(--paragraph-size);
    text-transform: none;
  }
  .main__header-menu-primary .menu__link.menu__link--sidebar:hover {
    background-color: transparent;
  }
}
@media all and (min-width: 1100px) {
  .menu__link--special {
    margin-left: 1.5rem;
  }
}


/**
 * Header Sidebar
 */

.region-header-sidebar {
  display: block;
  position: absolute;
  top: 50%;
  right: 4.25rem;
  transform: translateY(-50%);
}
@media all and (min-width: 1000px) {
  .main__header-sidebar {
    display: none;
  }
}
/**
 * Language Menu
 */

.block-language {
  display: flex;
  align-items: baseline;
  order: 3;
}
.block-language .links {
  display: inline-block;
  text-transform: capitalize;
  padding: 0.375rem;
  margin: 0;
  list-style: none;
  background-color: var(--brand-secondary-color);
  border-radius: 100%;
  width: 30px;
  height: 30px;
}
.block-language .links li:not(.is-active) {
  display: none;
}
.block-language .links a{
  color: var(--brand-white);
  display: block;
  user-select: none;
  transform: translateX(5px);
}
.block-language .links a[hreflang="en"]{
  transform: translateX(3px);
}
.block-language.is-active .links a{
  transform: translateX(0);
}
.block-language .links a.is-active{
  color: var(--brand-white);
}
.block-language.is-active .links {
  height: fit-content;
  border-radius: 5px;
}
.block-language.is-active .links li:not(.is-active) {
  display: block;
}
.block-language__more {
  position: relative;
  border: none;
  background-color: transparent;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 10px 10px;
  background-image: url("../../images/lang-arrow.svg");
  width: 30px;
  height: 30px;
  text-indent: -9999px;
  cursor: pointer;
}
@media all and (min-width: 1000px) {
  .block-language {
    order: unset;
  }
  .block-language .links {
    background-color: var(--brand-secondary-light-color);
  }
  .block-language .links a{
    color: var(--brand-secondary-color);
  }
  .block-language .links a.is-active{
    color: var(--brand-secondary-color);
  }
}
@media all and (min-width: 1300px) {
  .block-language .links {
    width: 35px;
    height: 35px;
  }
}


/**
 * Commerce Cart Block
 */


.cart-menu  {
  font-size: var(--paragraph-size-extra-small);
}
.cart-menu a,
.menu--account .menu--level-0 .menu__link--account {
  color: var(--brand-secondary-color);
  font-size: 12px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  user-select: none;
}
.cart-menu a::before,
.menu--account .menu--level-0 .menu__link--account::before {
  content: "";
  display: block;
  position: relative;
  height: 25px;
  width: 25px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
.cart-menu a::before{
  background-image: url('../../images/menu-cart-2k25.svg');
}

.menu--account .menu--level-0 .menu__link--account::before {
  background-image: url('../../images/menu-account.svg');
}
.menu--account .menu--level-0 {
  display: flex;
  align-items: center;
}

@media all and (min-width: 1400px){

  .cart-menu a,
  .menu--account .menu--level-0 .menu__link--account {
    font-size: 14px;
  }
  .cart-menu a::before,
  .menu--account .menu--level-0 .menu__link--account::before {
    height: 36px;
    width: 36px;
  }
}
/**
 * Background Menu Active
 */

.bg-menu-active {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(25, 30, 51, 0.5);
  z-index: 8;
}
.bg-menu-active-pass {
  z-index: 99;
}

/**
 * Mobile menu button
 */

.menu-toggle{
  position: absolute;
  right: 1.5rem;
  top: 50%;
  width: 22px;
  height: 16px;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
}
.menu-toggle__button{
  border: none;
  width: 22px;
  height: 16px;
  padding: 0;
  text-indent: 100px;
  background-color: transparent;
  white-space: nowrap;
  overflow: hidden;
  z-index:1;
  position: absolute;
  left:0;
  top:0;
}
.menu-toggle span {
  position: absolute;
  left: 1px;
  display: block;
  width: 22px;
  height: 2px;
  background-color: var(--brand-primary-color);
  transition: all ease .25s;
  -webkit-transition: all ease .25s;
  -moz-transition: all ease .25s;
  -ms-transition: all ease .25s;
  -o-transition: all ease .25s;
  border-radius: 0px;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  -ms-border-radius: 0px;
  -o-border-radius: 0px;
}
.menu-toggle span:nth-child(1) {
  top: 1px;
}
.menu-toggle span:nth-child(2) {
  top: 7px;
}
.menu-toggle span:nth-child(3) {
  top: 13px;
}
.menu-toggle.is-active span:nth-child(1) {
  top: 7px;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}
.menu-toggle.is-active span:nth-child(2) {
  width: 0;
  left: 22px;
}
.menu-toggle.is-active span:nth-child(3) {
  top: 7px;
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
}
@media all and (min-width: 1000px) {
  .menu-toggle{
    display: none;
  }
}




/**
 * CTA Menu
 */

.menu--account .menu {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  background-color: #FF8674;
  z-index: 10;
  position: relative;
}
.menu--account .menu--level-0 .menu__link--contact,
.menu--account .menu--level-0 .menu__link--offer{
  padding: 10px 16px;
}
.menu--account .menu li:first-child a{
  position: relative;
}
.menu--account .menu li:first-child a::after {
  content: '';
  width: 1px;
  background-color: #fff;
  height: 24px;
  display: block;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}
.menu--account .menu a,
.menu--account .menu a.is-active,
.menu--account .menu span{
  color: white;
  display: flex;
  align-items: center;
  gap: 4px;
  height: fit-content;
  text-transform: uppercase;
  font-weight: 400;
  line-height: normal;
}
.menu--account .menu a::before,
.menu--account .menu span::before {
  display: block;
  content: '';
  width: 15px;
  height: 15px;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}
.menu--account .menu--level-0 .menu__link--contact::before {
  background-image: url('../../images/menu/reserver-white.svg');
}
.menu--account .menu--level-0 .menu__link--offer::before{
  background-image: url('../../images/menu/offrir-white.svg');
}
@media all and (min-width: 1000px){
  .menu--account {
    display: flex;
    justify-content: flex-end;
    transform: none;
  }
  .menu--account .menu--level-0 .menu__link--contact,
  .menu--account .menu--level-0 .menu__link--offer{
    padding: 10px 12px 10px 16px;
  }
  .menu--account .menu a,
  .menu--account .menu span {
    color: #fff;
    transition: ease all 150ms;
    position: relative;
    font-size: 13px;
    text-indent: -99999px;
    white-space: nowrap;
    overflow: hidden;
  }
  .menu--account .menu span {
    text-indent: unset;
  }
  .menu--account .menu a:hover,
  .menu--account .menu span:hover {
    background-color: #ec7e6d;
  }
  .menu--account .menu a {
    padding: 10px 16px 10px 12px;
  }
  .menu--account .menu span {
    padding: 10px 12px 10px 16px;
    border-right: none;
    position: relative;
  }

  .menu--account .menu a::before,
  .menu--account .menu span::before {
    width: 24px;
    height: 24px;
  }
}
@media all and (min-width: 1400px) {
  .menu--account .menu a,
  .menu--account .menu span {
    text-indent: unset;
    overflow: unset;
    white-space: unset;
  }
}