/* =============================================================================
   WPML language switcher — navigation-block variant

   WPML's Language Switcher block renders as a core navigation item with a
   submenu, and the pairing of that block with this theme leaves the switcher
   unusable out of the box. Two separate faults, both the theme's to fix:

   1. The submenu never opens. Core ships the container as display: none with
      zero width and height, and opens it from JavaScript that the switcher's
      markup does not trigger. It is rendered here instead and toggled with
      opacity/visibility, so hover, keyboard focus and aria-expanded all work.

   2. When it did open it was white text on white. style.css sets every
      submenu-container without a background to `color: base` — right over the
      dark contrast background it also sets there, wrong once a light footer or
      header supplies its own background underneath.

   Promoted out of yk_overrides/assets/css/layout/footer.css, which scoped all
   of this to `footer`. Nothing here is about a footer: the same block in a
   header was equally invisible, and CLAUDE.md puts WPML on every production
   site. The colours are theme.json tokens now rather than the four hex values
   the client file hardcoded, so a styles/*.json variation carries the switcher
   with it.

   Loaded by yk_enqueue_wpml_styles() only when WPML is active.
   ============================================================================= */

.wpml-language-switcher-block
  li.wp-block-navigation-item.has-child
  > ul.wp-block-navigation__submenu-container {
  display: block !important;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;

  position: absolute !important;
  top: calc(100% + 8px);
  bottom: auto;
  left: 0 !important;
  right: auto !important;
  transform: none !important;

  height: auto !important;
  max-height: none !important;
  overflow: visible !important;

  padding: 6px 0 !important;
  margin: 0 !important;
  background: var(--wp--preset--color--base, #fff) !important;
  color: var(--wp--preset--color--contrast, #212121) !important;
  border: 1px solid
    var(--wp--custom--mega-menu--border, rgba(0, 0, 0, 0.1)) !important;
  /* Matches the header switcher's dropdown in yk-ecommerce-mega-menu.css. */
  border-radius: 10px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14) !important;
  z-index: 100 !important;
  transition: opacity 0.15s ease;
}

/*
 * Open state. Four ways in, because core's navigation reaches this container
 * through more than one route depending on how the block was configured:
 * pointer hover, keyboard focus inside the item, either of the two class names
 * core's script sets, and the toggle button's own aria-expanded.
 */
.wpml-language-switcher-block
  li.has-child:hover
  > ul.wp-block-navigation__submenu-container,
.wpml-language-switcher-block
  li.has-child:focus-within
  > ul.wp-block-navigation__submenu-container,
.wpml-language-switcher-block
  li.has-child.is-menu-open
  > ul.wp-block-navigation__submenu-container,
.wpml-language-switcher-block
  li.has-child.is-open
  > ul.wp-block-navigation__submenu-container,
.wpml-language-switcher-block
  .wp-block-navigation-submenu__toggle[aria-expanded="true"]
  ~ ul.wp-block-navigation__submenu-container {
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

.wpml-language-switcher-block ul.wp-block-navigation__submenu-container li {
  display: block !important;
  width: 100% !important;
  height: auto !important;
}

.wpml-language-switcher-block ul.wp-block-navigation__submenu-container a,
.wpml-language-switcher-block
  ul.wp-block-navigation__submenu-container
  .wp-block-navigation-item__content {
  display: block !important;
  /* The fix for fault 2: overrides style.css's `color: base` on the container. */
  color: var(--wp--preset--color--contrast, #212121) !important;
  text-decoration: none !important;
  padding: 9px 16px !important;
  white-space: nowrap;
  font-size: 14px;
  line-height: 1.2;
}

.wpml-language-switcher-block
  ul.wp-block-navigation__submenu-container
  a:hover {
  background: var(
    --wp--custom--mega-menu--light-hover,
    rgba(0, 0, 0, 0.04)
  ) !important;
}

.wpml-language-switcher-block .wp-block-navigation-submenu__toggle {
  cursor: pointer;
}