/* Navbar icon colors */
i.sun-icon {
  color: rgb(255, 183, 15);
  transform: rotate(22.5deg);
  transform-origin: center;
}
i.moon-icon {
  color: rgb(129, 86, 245);
}
i.desktop-icon {
  color: rgb(72, 199, 142);
}
i.search-icon {
  color: rgb(66, 88, 255);
}

/* Navbar dropdown behavior - click-based, not hover */
/* Hide dropdowns by default */
.navbar-item.has-dropdown:not(.is-hoverable) .navbar-dropdown {
  display: none;
}

/* Show dropdown when is-active is toggled via JavaScript */
.navbar-item.has-dropdown.is-active .navbar-dropdown {
  display: block;
}

/* Mobile: Make dropdowns horizontal and adjust layout */
@media screen and (max-width: 1023px) {
  /* Make dropdowns horizontal */
  .navbar-dropdowns-wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0;
  }

  .navbar-dropdowns-wrapper .navbar-item.has-dropdown {
    flex-grow: 0;
    flex-shrink: 0;
    position: relative;
  }

  /* Dropdown button styling: square size and rounded corners */
  .navbar-item.has-dropdown .navbar-link {
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.375rem;
  }

  .navbar-dropdowns-wrapper .navbar-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 9rem;
    box-shadow: 0 0.5em 0.5em hsla(var(--bulma-scheme-h),var(--bulma-scheme-s),var(--bulma-scheme-invert-l),0.1), 0 0 0 1px hsla(var(--bulma-scheme-h),var(--bulma-scheme-s),var(--bulma-scheme-invert-l),0.1);
    border-radius: 0.75rem;
  }
}

/* Desktop: Add border radius to dropdown buttons */
@media screen and (min-width: 1024px) {
  .navbar-item.has-dropdown .navbar-link {
    border-radius: 0.375rem;
  }
}

/* Desktop: Wrapper behaves normally */
@media screen and (min-width: 1024px) {
  .navbar-dropdowns-wrapper {
    display: contents;
  }
}

/* Theme dropdown button hover - light mode */
#theme-dropdown .navbar-link:hover {
  background-color: rgb(254, 248, 233);
}

/* Theme dropdown button hover - dark mode */
[data-theme="dark"] #theme-dropdown .navbar-link:hover {
  background-color: rgb(31, 29, 47);
}

/* Search dropdown button hover - light mode */
#search-dropdown .navbar-link:hover {
  background-color: rgb(236, 238, 254);
}

/* Search dropdown button hover - dark mode */
[data-theme="dark"] #search-dropdown .navbar-link:hover {
  background-color: rgb(26, 29, 48);
}

/* Theme dropdown menu items - Light mode */
/* Light item hover and is-selected */
#theme-dropdown .navbar-dropdown [data-theme-target="light"]:hover,
#theme-dropdown .navbar-dropdown [data-theme-target="light"].is-selected {
  background-color: rgb(253, 242, 211);
}

/* Dark item hover */
#theme-dropdown .navbar-dropdown [data-theme-target="dark"]:hover {
  background-color: rgb(241, 238, 253);
}

/* System item hover */
#theme-dropdown .navbar-dropdown [data-theme-target="system"]:hover {
  background-color: rgb(238, 249, 243);
}

/* System item is-selected (when system defaults to light) */
#theme-dropdown .navbar-dropdown [data-theme-target="system"].is-selected {
  background-color: rgb(223, 243, 233);
}

/* Theme dropdown menu items - Dark mode */
/* Light item hover */
[data-theme="dark"] #theme-dropdown .navbar-dropdown [data-theme-target="light"]:hover {
  background-color: rgb(43, 39, 27);
}

/* Dark item hover and is-selected */
[data-theme="dark"] #theme-dropdown .navbar-dropdown [data-theme-target="dark"]:hover,
[data-theme="dark"] #theme-dropdown .navbar-dropdown [data-theme-target="dark"].is-selected {
  background-color: rgb(41, 35, 68);
}

/* System item hover */
[data-theme="dark"] #theme-dropdown .navbar-dropdown [data-theme-target="system"]:hover {
  background-color: rgb(28, 40, 37);
}

/* System item is-selected (when system defaults to dark) */
[data-theme="dark"] #theme-dropdown .navbar-dropdown [data-theme-target="system"].is-selected {
  background-color: rgb(37, 57, 49);
}