// navbar toggler
input#nav-toggle:checked ~ label#show-button {
  @apply hidden;
}

input#nav-toggle:checked ~ label#hide-button {
  @apply flex lg:hidden;
}

input#nav-toggle:checked ~ #nav-menu {
  @apply block lg:flex;
}
.header {
  flex-direction: row;
  --shadow-color: rgba(99, 99, 99, 0.3);
  --bg: rgba(255, 255, 255, 0.565);
  animation: reduce-header linear both;
  animation-timeline: scroll();
  animation-range: 0 150px;
  @apply sticky top-0 z-50 transition-all duration-300 py-6;
}

.dark .header {
  --shadow-color: rgba(255, 255, 255, 0.3);
  --bg: rgba(28, 28, 45, 0.3);
}

@keyframes reduce-header {
  100% {
    padding-block: 1rem;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 5px 50px -5px var(--shadow-color), 0 0 3px 1px var(--shadow-color);
    background-color: var(--bg)
  }
}


// navbar items
.navbar {
  @apply relative flex flex-wrap items-center justify-between;
}

.navbar-brand {
  @apply text-xl font-semibold text-text;
  image {
    @apply max-h-full max-w-full;
  }
}

.navbar-nav {
  @apply text-center lg:text-left;
}

.nav-link {
  @apply block p-3 py-2 text-xl md:text-base text-text transition hover:text-secondary md:px-2 lg:inline-block;

  &.active {
    @apply relative;

    &::after {
      @apply absolute bottom-0 left-2 right-2 h-0.5 bg-gradient-to-tl content-[''];
    }
  }
}

.nav-dropdown {
  @apply mr-0;
}

.nav-dropdown-list {
  @apply z-10 mx-auto ml-1 mt-4 max-w-[300px] rounded-lg border-0 border-solid  border-white/10 bg-primary/5 px-4 py-3 hidden shadow-sm duration-300  lg:mt-0 lg:border lg:bg-surface lg:shadow-[0_0.9rem_1.56rem_rgb(0,0,0,0.1)];
  @apply mx-auto hidden duration-300 lg:invisible lg:absolute lg:block lg:h-auto lg:w-[13.5rem] lg:opacity-0 lg:group-hover:visible lg:group-hover:opacity-100;
}



.nav-dropdown.open > .nav-dropdown-list {
  display: block; /* Visible cuando está abierto */
}

@media (min-width: 1024px) {
  .nav-dropdown-list {
    display: block; /* Visible en pantallas grandes */
  }
  .nav-dropdown.open > .nav-dropdown-list {
    display: block; /* Aseguramos que siga funcionando en desktop */
  }
}

.nav-dropdown-item {
  @apply mb-1;
}

.nav-dropdown-link {
  @apply min-w-[150px] py-1 text-base font-medium transition hover:text-secondary text-text;
}
