body:has(.header-nav-content [name="menu-openener"]:checked) {
  overflow-y: hidden;
}

.user-logged-in.toolbar-vertical {
  header {
    top: 39px !important;

    nav.tabs-wrapper {
      top: 119px;
      left: 0;
    }
  }
}

.user-logged-in.toolbar-horizontal.toolbar-fixed {
  header {
    top: 39px !important;

    & .region-header {
      & .header-nav-content {
        .menu-container{
          top: 105px;
        }
      }
    }

    nav.tabs-wrapper {
      top: 119px;
      left: 0;
    }
  }
}

.user-logged-in.toolbar-horizontal.toolbar-fixed.toolbar-tray-open {
  header {
    top: 79px !important;

    & .region-header {
      & .header-nav-content {
        .menu-container{
          top: 145px;
        }
      }
    }
  }

  nav.tabs-wrapper {
    top: 215px;
  }
}

@keyframes customFadeOut {
  0% {
    opacity: 0.8;
  }
  25% {
    opacity: 0.4;
  }
  50% {
    opacity: 0.2;
  }
  75% {
    opacity: 0.1;
  }
  100% {
    opacity: 0;
    visibility: hidden; /* Hide the element after animation */
  }
}

@keyframes customFadeIn {
  0% {
    opacity: 0;
    visibility: visible; /* Make the element visible before animating */
  }
  25% {
    opacity: 0.2;
  }
  50% {
    opacity: 0.4;
  }
  75% {
    opacity: 0.6;
  }
  100% {
    opacity: 1;
    visibility: visible; /* Ensure the element stays visible */
  }
}

/* Sorteos Nav Mobile */
header {
  position: sticky;
  padding: 16px;
  background-color: transparent;
  top: 0;
  background-color: #030219;
  z-index: 101;

  .region-header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .logo {
      width: 150px;
      height: 34px;
    }

    .header-nav-content {
      display: flex;

      .menu-container{
        #block-tec-prepa-navegacionprincipal {
          .menu {
            display: flex;
            flex-direction: column;
            margin: 0;

            details {
              position: relative;
              display: flex;
              justify-content: center;
              flex-direction: column;

              &[open] {
                summary {
                  &:after {
                    transform: rotate(180deg);
                  }
                }
              }

              summary {
                list-style: none;
                cursor: pointer;
                color: #FFF;
                text-align: center;
                font-family: "DM Sans";
                font-size: 14px;
                font-style: normal;
                font-weight: 700;
                line-height: 14px; /* 100% */
                text-transform: uppercase;
                position: relative;
                display: flex;
                justify-content: center;
                align-items: center;
                padding: 8px;

                &:after {
                  content: '';
                  width: 24px;
                  height: 24px;
                  display: block;
                  transform: rotate(0);
                  background-color: #FFFFFF;
                  mask-size: 24px 24px;
                  mask-position: center;
                  mask-repeat: no-repeat;
                  mask-image: url(/sites/sorteostec/themes/tec_prepa/images/svg/arrow-down.svg);
                  transition: transform 0.2s;
                }
              }

              .dropdown-menu{
                display: flex;
                flex-direction: column;
              }

              &[open],
              &:hover {
                summary {

                }
              }
            }

            li{
              a{
                color: #FFF;
                text-align: center;
                font-family: "DM Sans";
                font-size: 14px;
                font-style: normal;
                font-weight: 700;
                line-height: 14px; /* 100% */
                text-transform: uppercase;
                display: block;
                text-align: center;
                padding: 8px;

                &:hover{
                  background-color: #D24204;
                }
              }
            }
          }
        }
      }

      .menu-opener {
        position: relative;
        width: 32px;
        height: 32px;

        input[name="menu-openener"] {
          position: absolute;
          top: 0;
          right: 0;
          bottom: 0;
          left: 0;
          z-index: 10;
          opacity: 0;
          background: transparent;
          cursor: pointer;
          width: 32px;
          height: 32px;
        }

        #mobile-menu-trigger {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 100%;
          height: 100%;
          padding: 0;
          margin: 0;

          img {
            display: block;
            width: auto;
            height: auto;
          }
        }

        #mobile-menu-close {
          display: none;
          justify-content: center;
          align-items: center;
          width: 100%;
          height: 100%;
          padding: 0;
          margin: 0;

          img {
            display: block;
            width: auto;
            height: auto;
          }
        }
      }
    }
  }

  .search-wrap{
    display: none;

    &.mobile{
      display: flex;
    }

    .search-wrapper{
      border-radius: 20px;
      border: 2px solid #FFF;
      background: #030219;
      color: #FFF;
      padding: 10px 16px;
      position: relative;

      #search-form{
        width: 100%;
      }

      input{
        background: #030219;
        color: #FFF;
        padding-right: 26px;
        width: 100%;

        &::placeholder{
          color: #FFF;
        }
      }

      #search-submit-btn{
        position: absolute;
        right: 16px;
        width: 18px;
        height: 18px;
      }
    }
  }
}

@media screen and (max-width: 1279px) {
  header{
    &:has(.header-nav-content [name="menu-openener"]:checked) {
      .header-nav-content {
        .menu-container{
          animation: customFadeIn 0.4s forwards;
        }

        .menu-opener {
          #mobile-menu-trigger {
            display: none;
          }

          #mobile-menu-close {
            display: flex;
          }
        }
      }
    }

    &:not(:has(.header-nav-content [name="menu-openener"]:checked)) {
      .header-nav-content {
        .menu-container{
          animation: customFadeOut 0.4s forwards;
        }
      }
    }

    .region-header{
      .header-nav-content{
        .menu-container{
          opacity: 0;
          visibility: hidden;
          background: #030219;
          height: calc(100dvh - 66px);
          position: fixed;
          top: 66px;
          left: 0;
          right: 0;
          width: 100%;
          overflow: auto;
          padding: 16px;

          #block-tec-prepa-navegacionprincipal{
            & ul.menu{
              margin-top: 8px;
            }
          }

          #block-tec-prepa-headertop-2{
            ul.menu{
              display: flex;
              justify-content: center;
              flex-direction: column;
              margin: 0;

              li {
                list-style: none;

                a {
                  color: #FFF;
                  text-align: center;
                  font-family: "DM Sans";
                  font-size: 14px;
                  font-style: normal;
                  font-weight: 700;
                  line-height: 14px; /* 100% */
                  text-transform: uppercase;
                  display: block;
                  text-align: center;
                  padding: 8px;

                  &:hover{
                    background-color: #D24204;
                  }
                }
              }
            }
          }

          #block-tec-prepa-socialmenu-2{
            display: flex;
            justify-content: center;
            margin-top: 16px;
          }
        }
      }
    }
  }
}

@media screen and (min-width: 576px) {
  .user-logged-in.toolbar-vertical {
    header {
      top: 78px !important;
  
      nav.tabs-wrapper {
        top: 132px;
      }
    }
  }
}

@media screen and (min-width: 732px) {
  .user-logged-in.toolbar-vertical {
    header {
      top: 39px !important;

      & .region-header {
        & .header-nav-content {
          .menu-container{
            top: 105px;
          }
        }
      }

      nav.tabs-wrapper {
        top: 119px;
      }
    }
  }
}

/* Sorteos Nav Landscape */
@media screen and (min-width: 1280px) {
  header {
    display: flex;
    padding: 24px 96px;
    gap: 16px;
    top: 43px;

    & .region-header {
      position: relative;
      flex: 1;

      .logo {
        width: 195px;
        height: 44px;
        position: relative;
        z-index: 2;
      }

      .header-nav-content {
        display: flex;
        position: relative;
        z-index: 2;

        .menu-container{
          #block-tec-prepa-navegacionprincipal {
            display: flex;
            align-items: center;

            .menu {
              flex-direction: row;
              justify-content: center;
              align-items: center;

              details {
                &[open]{
                  .dropdown-menu{
                    margin: 0;
                    padding: 0;
                    position: absolute;
                    top: 100%;
                    background: #030219;
                    display: block;
                    max-height: 150px;
                    overflow-y: auto;
                    overflow-x: hidden;
                  }
                }
              }

              li {
                a {
                  text-align: left;
                }
              }
            }
          }

          #block-tec-prepa-socialmenu-2, #block-tec-prepa-headertop-2{
            display: none;
          }
        }

        .menu-opener{
          display: none;
        }
      }
    }

    .search-wrap{
      display: flex;

      &.mobile{
        display: none;
      }
    }
  }

  .user-logged-in.toolbar-horizontal.toolbar-fixed {
    header {
      nav.tabs-wrapper {
        top: 135px;
      }
    }
  }
}