/* FreeToolLabs global browser compatibility fixes
   Keeps native select menus readable in Chrome, Edge, Firefox and Safari. */

html, body {
  color-scheme: dark;
}

select,
.field select,
.field-with-unit select {
  color-scheme: dark !important;
  background-color: #070807 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff;
}

select option,
select optgroup,
.field select option,
.field select optgroup {
  background-color: #111313 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff;
}

select option:checked {
  background-color: #4a3d00 !important;
  color: #ffffff !important;
}

select:disabled,
select option:disabled {
  color: rgba(255,255,255,.48) !important;
  -webkit-text-fill-color: rgba(255,255,255,.48);
}

/* =========================================================
   GLOBAL THREE-LEVEL NAVIGATION VIEWPORT FIX
   Keeps Categories submenus fully visible on desktop screens.
   All menu-enabled pages load this shared stylesheet.
   ========================================================= */
@media (min-width: 921px) {
  /* Anchor the main Categories panel to the right side of its trigger. */
  .nav .nav-dropdown > .tool-menu {
    left: auto !important;
    right: -8px !important;
    max-width: none !important;
    overflow: visible !important;
    transform: translateY(10px) !important;
    transform-origin: top right !important;
  }

  .nav .nav-dropdown:hover > .tool-menu,
  .nav .nav-dropdown:focus-within > .tool-menu,
  .nav .nav-dropdown.open > .tool-menu {
    transform: translateY(0) !important;
  }

  /* Keep the pointer aligned with the Categories trigger. */
  .nav .nav-dropdown > .tool-menu::before {
    left: auto !important;
    right: 34px !important;
  }

  /* Right-edge navigation panels open toward the page center. */
  .nav .tool-menu .submenu {
    left: auto !important;
    right: calc(100% + 8px) !important;
    transform: translateX(-6px) !important;
    transform-origin: top right !important;
  }

  .nav .tool-menu .menu-item:hover > .submenu,
  .nav .tool-menu .menu-item:focus-within > .submenu {
    transform: translateX(0) !important;
  }

  /* Arrows now point in the actual opening direction. */
  .nav .tool-menu .menu-arrow {
    transform: rotate(180deg);
    transform-origin: center;
  }
}