/* ===========================================================
   File: assets/css/polylang-switcher.css
   Purpose: 12D Polylang Switcher widget
   =========================================================== */

.d12-pll-switcher {
  /* ===========================================================
     D12 Polylang Switcher defaults
     -----------------------------------------------------------
     Widget-scoped defaults.
     These keep the switcher portable while allowing site-level
     tokens to influence color, surface, border, and radius.
     =========================================================== */

  --d12-pll-trigger-width: 140px;
  --d12-pll-dropdown-width: 140px;

  --d12-pll-top-pad-top: 8px;
  --d12-pll-top-pad-right: 10px;
  --d12-pll-top-pad-bottom: 8px;
  --d12-pll-top-pad-left: 10px;

  --d12-pll-dropdown-pad-top: 8px;
  --d12-pll-dropdown-pad-right: 10px;
  --d12-pll-dropdown-pad-bottom: 8px;
  --d12-pll-dropdown-pad-left: 10px;

  /*
   * Trigger semantic state palette.
   *
   * The Polylang Switcher is an opaque-surface component.
   * White backgrounds preserve readability over arbitrary header
   * backgrounds, images, gradients, and other page content.
   *
   * Elementor controls may override these variables per widget instance.
   * Clearing an override restores these component defaults.
   */

  /* Normal */
  --d12-pll-bg: var(--d12-white, #ffffff);
  --d12-pll-text-color: var(--e-global-color-text, currentColor);

  /*
  * The trigger border is transparent by default.
  * Elementor's border color controls explicitly enable visible borders.
  * Retaining the border width preserves trigger and dropdown geometry.
  */
  --d12-pll-border-color: transparent;

  /* Hover */
  --d12-pll-hover-bg: var(
    --d12-accent-hover,
    var(--e-global-color-accent, currentColor)
  );
  --d12-pll-hover-text-color: var(--d12-white, #ffffff);

  /*
  * The Hover border remains transparent unless Elementor explicitly
  * configures a Hover Border Color.
  */
  --d12-pll-hover-border-color: transparent;

  /* Focus */
  --d12-pll-focus-text-color: var(
    --d12-accent-hover,
    var(--e-global-color-accent, currentColor)
  );
  --d12-pll-focus-bg: var(--d12-white, #ffffff);
  --d12-pll-focus-indicator-color: var(
    --d12-accent-hover,
    var(--e-global-color-accent, currentColor)
  );

  /*
   * Pressed.
   *
   * Historical "active" variable names are retained for Elementor
   * saved-data compatibility.
   */
  --d12-pll-active-bg: var(--d12-pll-hover-bg);
  --d12-pll-active-text-color: var(--d12-pll-hover-text-color);
  --d12-pll-active-border-color: var(--d12-pll-hover-border-color);

  /*
   * Dropdown semantic state palette.
   */

  /* Normal */
  --d12-pll-dropdown-bg: var(--d12-white, #ffffff);
  --d12-pll-dropdown-text-color: var(--e-global-color-text, currentColor);
  --d12-pll-dropdown-border-color: var(--e-global-color-text, currentColor);

  /* Hover */
  --d12-pll-dropdown-hover-bg: var(
    --d12-accent-hover,
    var(--e-global-color-accent, currentColor)
  );
  --d12-pll-dropdown-hover-text-color: var(--d12-white, #ffffff);

  /* Focus */
  --d12-pll-dropdown-focus-bg: var(--d12-white, #ffffff);
  --d12-pll-dropdown-focus-text-color: var(
    --d12-accent-hover,
    var(--e-global-color-accent, currentColor)
  );
  --d12-pll-dropdown-focus-indicator-color: var(
    --d12-accent-hover,
    var(--e-global-color-accent, currentColor)
  );

  /*
   * Pressed.
   *
   * Historical "active" variable names are retained for Elementor
   * saved-data compatibility.
   */
  --d12-pll-dropdown-active-bg: var(--d12-pll-dropdown-hover-bg);
  --d12-pll-dropdown-active-text-color: var(
    --d12-pll-dropdown-hover-text-color
  );

  --d12-pll-border-width: 1px;

  /*
   * Dropdown border geometry defaults to the historical shared border width.
   * Elementor's Dropdown Border Width control can override each side
   * independently without changing existing widget instances.
   */
  --d12-pll-dropdown-border-top-width: var(--d12-pll-border-width);
  --d12-pll-dropdown-border-right-width: var(--d12-pll-border-width);
  --d12-pll-dropdown-border-bottom-width: var(--d12-pll-border-width);
  --d12-pll-dropdown-border-left-width: var(--d12-pll-border-width);

  --d12-pll-rec1-radius-tl: var(--site-radius-sm, 4px);
  --d12-pll-rec1-radius-tr: var(--site-radius-sm, 4px);
  --d12-pll-rec1-radius-br: var(--site-radius-sm, 4px);
  --d12-pll-rec1-radius-bl: var(--site-radius-sm, 4px);
  --d12-pll-rec1-open-radius-br: var(--d12-pll-rec1-radius-br);
  --d12-pll-rec1-open-radius-bl: var(--d12-pll-rec1-radius-bl);

  --d12-pll-rec2-radius-tl: 0px;
  --d12-pll-rec2-radius-tr: 0px;
  --d12-pll-rec2-radius-br: var(--site-radius-sm, 4px);
  --d12-pll-rec2-radius-bl: var(--site-radius-sm, 4px);

  --d12-pll-item-gap: 6px;

  --d12-pll-flag-width: 16px;
  --d12-pll-flag-height: 11px;
  --d12-pll-flag-offset-y: 0px;

  --d12-pll-label-offset-y: 0px;

  --d12-pll-caret-pad-top: 0px;
  --d12-pll-caret-pad-right: 0px;
  --d12-pll-caret-pad-bottom: 0px;
  --d12-pll-caret-pad-left: 2px;

  --d12-pll-caret-size: 10px;
  --d12-pll-caret-offset-y: 1px;
  --d12-pll-dropdown-gap: 0px;

  position: relative;
}

/* Reset lists */
.d12-pll-switcher .d12-pll-dropdown,
.d12-pll-switcher .d12-pll-dropdown ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Parent item */
.d12-pll-switcher .d12-pll-parent-menu-item {
  position: relative;
  display: inline-block;
  z-index: 9999;
}

/* Top rectangle (Trigger - REC1) */
.d12-pll-switcher .d12-pll-rec1 {
  position: relative;
  z-index: 2;
  width: var(--d12-pll-trigger-width);
  box-sizing: border-box;
  background: var(--d12-pll-bg);
  border: var(--d12-pll-border-width) solid var(--d12-pll-border-color);
  border-radius: var(--d12-pll-rec1-radius-tl) var(--d12-pll-rec1-radius-tr)
    var(--d12-pll-rec1-open-radius-br) var(--d12-pll-rec1-open-radius-bl);
  box-shadow: none;
}

.d12-pll-switcher .d12-pll-rec1 > .d12-pll-menu-item,
.d12-pll-switcher .d12-pll-rec1 > .d12-pll-menu-item:hover {
  display: flex;
  align-items: center;
  gap: var(--d12-pll-item-gap);

  width: 100%;
  padding: var(--d12-pll-top-pad-top) var(--d12-pll-top-pad-right)
    var(--d12-pll-top-pad-bottom) var(--d12-pll-top-pad-left);
  box-sizing: border-box;

  color: var(--d12-pll-text-color);
  text-decoration: none;
  border: none;
  background: transparent;
  transform: none;

  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
  border-radius: inherit;
  box-shadow: none;
}

/* Trigger hover */
.d12-pll-switcher .d12-pll-parent-menu-item:hover > .d12-pll-rec1 {
  background: var(--d12-pll-hover-bg);
  border-color: var(--d12-pll-hover-border-color);
}

.d12-pll-switcher.is-dropdown-open .d12-pll-parent-menu-item > .d12-pll-rec1 {
  border-radius: var(--d12-pll-rec1-radius-tl) var(--d12-pll-rec1-radius-tr) 0 0;
}

.d12-pll-switcher
  .d12-pll-parent-menu-item:hover
  > .d12-pll-rec1
  > .d12-pll-menu-item {
  color: var(--d12-pll-hover-text-color);
}

/* Trigger active / pressed */
.d12-pll-switcher .d12-pll-parent-menu-item:active > .d12-pll-rec1 {
  background: var(--d12-pll-active-bg);
  border-color: var(--d12-pll-active-border-color);
}

.d12-pll-switcher
  .d12-pll-parent-menu-item:active
  > .d12-pll-rec1
  > .d12-pll-menu-item {
  color: var(--d12-pll-active-text-color);
}

/*
 * An expanded switcher is persistently Pressed, even after the pointer leaves
 * the trigger. Keeping the trigger's Pressed border completes the visual box
 * while the dropdown remains open.
 */
.d12-pll-switcher.is-dropdown-open
  .d12-pll-parent-menu-item
  > .d12-pll-rec1 {
  background: var(--d12-pll-active-bg);
  border-color: var(--d12-pll-active-border-color);
}

.d12-pll-switcher.is-dropdown-open
  .d12-pll-parent-menu-item
  > .d12-pll-rec1
  > .d12-pll-menu-item {
  color: var(--d12-pll-active-text-color);
}

.d12-pll-switcher img {
  display: inline-block;
  vertical-align: middle;
  flex: 0 0 auto;
  width: var(--d12-pll-flag-width);
  height: var(--d12-pll-flag-height);
  transform: translateY(var(--d12-pll-flag-offset-y));
}

/* Bottom rectangle (Dropdown - REC2) */
.d12-pll-switcher .d12-pll-sub-menu {
  position: absolute;
  top: calc(100% + var(--d12-pll-dropdown-gap));
  left: 0;
  right: auto;
  margin: 0;
  padding: 0;

  width: var(--d12-pll-dropdown-width);
  box-sizing: border-box;

  background: var(--d12-pll-dropdown-bg);
  border-style: solid;
  border-color: var(--d12-pll-dropdown-border-color);
  border-width: var(--d12-pll-dropdown-border-top-width)
    var(--d12-pll-dropdown-border-right-width)
    var(--d12-pll-dropdown-border-bottom-width)
    var(--d12-pll-dropdown-border-left-width);
  box-shadow: none;
  display: none;
  z-index: 1;

  border-radius: var(--d12-pll-rec2-radius-tl) var(--d12-pll-rec2-radius-tr)
    var(--d12-pll-rec2-radius-br) var(--d12-pll-rec2-radius-bl);
  overflow: hidden;
  background-clip: padding-box;
}

.d12-pll-switcher.is-dropdown-open
  .d12-pll-parent-menu-item
  > .d12-pll-sub-menu {
  display: block;
  margin-top: calc(-1 * var(--d12-pll-border-width));
}

/* Dropdown alignment (controlled from Elementor) */

.d12-pll-align-left .d12-pll-sub-menu {
  left: 0;
  right: auto;
  transform: none;
}

.d12-pll-align-center .d12-pll-sub-menu {
  left: 50%;
  right: auto;
  transform: translateX(-50%);
}

.d12-pll-align-right .d12-pll-sub-menu {
  left: auto;
  right: 0;
  transform: none;
}

.d12-pll-switcher .d12-pll-sub-menu > li {
  margin: 0;
}

.d12-pll-switcher .d12-pll-sub-menu > li > .d12-pll-sub-menu-item {
  display: flex;
  align-items: center;
  gap: var(--d12-pll-item-gap);

  width: 100%;
  padding: var(--d12-pll-dropdown-pad-top) var(--d12-pll-dropdown-pad-right)
    var(--d12-pll-dropdown-pad-bottom) var(--d12-pll-dropdown-pad-left);
  box-sizing: border-box;

  color: var(--d12-pll-dropdown-text-color);
  text-decoration: none;
  background: var(--d12-pll-dropdown-bg);
  transform: none;
}

.d12-pll-switcher .d12-pll-sub-menu > li > .d12-pll-sub-menu-item:hover {
  background: var(--d12-pll-dropdown-hover-bg);
  color: var(--d12-pll-dropdown-hover-text-color);
  transform: none;
}

.d12-pll-switcher .d12-pll-sub-menu > li > .d12-pll-sub-menu-item:active {
  background: var(--d12-pll-dropdown-active-bg);
  color: var(--d12-pll-dropdown-active-text-color);
  transform: none;
}

/*
 * Neutralize theme-level border and transform effects on the
 * switcher's independently interactive controls.
 */
.d12-pll-switcher .d12-pll-menu-item,
.d12-pll-switcher .d12-pll-sub-menu-item {
  border: none;
  transform: none;
}

/*
 * Trigger Focus State and Focus Indicator.
 *
 * Focus styling belongs to the actual independently focusable trigger.
 * The structurally specific selector ensures Focus takes precedence over
 * Hover when both conditions occur at the same time.
 *
 * A single inset outline identifies the focused control. Theme focus shadows
 * and the wrapper's structural border must not create a second ring.
 */
.d12-pll-switcher
  .d12-pll-parent-menu-item
  > .d12-pll-rec1
  > .d12-pll-menu-item:focus-visible {
  color: var(--d12-pll-focus-text-color);
  background: var(--d12-pll-focus-bg);
  outline: 2px solid var(--d12-pll-focus-indicator-color, currentColor) !important;
  outline-offset: -2px !important;
  box-shadow: none !important;
}

/*
 * Dropdown Focus State.
 *
 * Focus styling belongs to the actual independently focusable
 * alternative-language link. The indicator is drawn inside the link
 * so the dropdown's overflow clipping cannot cut off its edges.
 */
.d12-pll-switcher
  .d12-pll-sub-menu
  > li
  > .d12-pll-sub-menu-item:focus-visible {
  color: var(--d12-pll-dropdown-focus-text-color);
  background: var(--d12-pll-dropdown-focus-bg);
  outline: 2px solid var(--d12-pll-dropdown-focus-indicator-color, currentColor) !important;
  outline-offset: -2px !important;
  box-shadow: none !important;
}

/*
 * Keep the trigger's structural surface and border in their Focus
 * conditions only when the trigger has keyboard-visible focus.
 *
 * Using :has(:focus-visible) prevents ordinary pointer focus from
 * overriding the Hover surface after the trigger is clicked.
 */
.d12-pll-switcher
  .d12-pll-parent-menu-item
  > .d12-pll-rec1:has(> .d12-pll-menu-item:focus-visible) {
  /* The button owns its Focus surface; do not surround it with a second
   * coloured frame. Retain border dimensions to avoid a layout shift. */
  background: transparent;
  border-color: transparent !important;
  box-shadow: none !important;
}

/*
 * Prevent theme-level link/button transitions from altering the
 * switcher's semantic interaction states.
 *
 * Keep this scoped to the independently interactive controls rather
 * than disabling transitions throughout the entire widget subtree.
 */
.d12-pll-switcher .d12-pll-menu-item,
.d12-pll-switcher .d12-pll-sub-menu-item {
  transition: none !important;
}

/* Trigger label optical alignment */
.d12-pll-switcher
  .d12-pll-rec1
  > .d12-pll-menu-item
  > .d12-pll-label {
  position: relative;
  top: var(--d12-pll-label-offset-y);
}

/* Caret */
.d12-pll-switcher .d12-pll-caret {
  display: inline-block;
  flex: 0 0 auto;

  padding: var(--d12-pll-caret-pad-top) var(--d12-pll-caret-pad-right)
    var(--d12-pll-caret-pad-bottom) var(--d12-pll-caret-pad-left);

  color: currentColor;
  font-size: var(--d12-pll-caret-size);
  line-height: 1;
  transform: translateY(var(--d12-pll-caret-offset-y));
}

/* End of file polylang-switcher.css */