/* ==========================================================================
   Yusra — compatibility layer.

   Loaded last. This file used to carry the whole authored design; that role
   now belongs to css/yusra-ds.css, and the vendor sheets it used to patch
   (bootstrap.min.css, plugins.css, swiper.css, style.css) are no longer
   loaded by any page at all.

   What remains is the language switcher, which predates the design system
   and is shared with js/i18n.js. If anything else needs adding, it belongs
   in yusra-ds.css, not here.
   ========================================================================== */

/* ==========================================================================
   language switcher

   Retuned to the new palette. The markup and the JavaScript in js/i18n.js
   are unchanged, so the trilingual behaviour — including RTL mirroring —
   carries over from the previous build untouched.
   ========================================================================== */

.lang-switcher {
  position: relative;
  z-index: 60;
}

.lang-current {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-block-size: 2.25rem;
  padding: 0.4375rem 0.875rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  line-height: 1;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out);
}

.lang-current:hover,
.lang-switcher.is-open .lang-current {
  border-color: var(--primary);
  background: var(--primary-tint);
}

.lang-current svg { color: var(--primary); flex: none; }

.lang-menu {
  position: absolute;
  inset-block-start: calc(100% + var(--space-2));
  inset-inline-end: 0;
  min-inline-size: 10.5rem;
  padding: var(--space-2);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-0.25rem);
  transition: opacity var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out),
              visibility var(--dur-fast);
}

.lang-switcher.is-open .lang-menu {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.lang-option {
  display: block;
  inline-size: 100%;
  min-block-size: var(--touch-min);
  padding: var(--space-3) var(--space-4);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--fs-ui);
  font-weight: var(--fw-medium);
  text-align: start;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out);
}

.lang-option:hover { background: var(--accent-blush); }

.lang-option.is-active {
  background: var(--primary);
  color: var(--text-on-primary);
  font-weight: var(--fw-semibold);
}

/* On a phone the switcher lives in the drawer footer, where it has room to
   sit inline rather than as a dropdown pinned to a cramped header. */
@media (max-width: 63.99rem) {
  .ds-header__actions .lang-switcher { display: none; }
}