/* Language switch (FR · EN · ع) and the short hold while a translation is written.
   Loaded after type.css. Quiet text, no pill: the active language is underlined. */

/* English / Arabic: the page stays hidden (and its entrance animations wait)
   until assets/js/i18n has written the text; 2 s at most, see the <head> script */
html.i18n-wait body { visibility: hidden; }
html.i18n-wait body * { animation-play-state: paused !important; }

.lang { display: inline-flex; align-items: center; pointer-events: auto; }
.lang__btn {
  position: relative;
  display: inline-grid; place-items: center;
  min-width: 34px; min-height: 40px; padding: 0 0.5rem;
  border: 0; border-radius: 0; background: none; cursor: pointer;
  font-family: var(--f-sans); font-size: 0.78rem; font-weight: 500; line-height: 1;
  letter-spacing: 0.1em; text-indent: 0.1em; /* centres the tracked letters */
  color: rgba(247, 240, 230, 0.72);
  text-shadow: 0 1px 12px rgba(4, 7, 11, 0.55);
  transition: color 0.3s var(--e-out);
}
.lang__btn[lang="ar"] {
  font-family: "Geeza Pro", "IBM Plex Sans Arabic", "Noto Sans Arabic", "Segoe UI", Tahoma, sans-serif;
  font-size: 0.95rem; letter-spacing: 0; text-indent: 0;
}
/* the separating dot, on the boundary between two languages */
.lang__btn + .lang__btn::before {
  content: "·"; position: absolute; inset-inline-start: -0.18em; top: 50%; translate: 0 -54%;
  font-family: var(--f-sans); font-size: 0.78rem; letter-spacing: 0; text-indent: 0; opacity: 0.55; pointer-events: none;
}
.lang__btn::after {
  content: ""; position: absolute; left: 50%; bottom: 8px;
  width: 1.15em; height: 1px; margin-left: -0.575em;
  background: var(--champagne);
  transform: scaleX(0); transition: transform 0.35s var(--e-out);
}
.lang__btn[lang="ar"]::after { width: 0.9em; margin-left: -0.45em; bottom: 7px; }
.lang__btn:hover, .lang__btn[aria-pressed="true"] { color: #fff8ee; }
.lang__btn[aria-pressed="true"]::after { transform: scaleX(1); }
.lang__btn[aria-pressed="true"] { cursor: default; }

/* header, desktop: before "Let's talk business", over the film or the dark sections */
.lang--nav { margin-inline-end: 0.55rem; }
@media (min-width: 1024px) {
  .nav--light .lang--nav .lang__btn { color: rgba(30, 23, 16, 0.66); text-shadow: none; }
  .nav--light .lang--nav .lang__btn:hover,
  .nav--light .lang--nav .lang__btn[aria-pressed="true"] { color: var(--text); }
  .nav--light .lang--nav .lang__btn::after { background: var(--bronze-deep); }
}
@media (min-width: 1024px) and (max-width: 1299px) {
  .lang--nav { margin-inline-end: 0.2rem; }
  .lang--nav .lang__btn { min-width: 30px; padding: 0 0.38rem; }
  /* the logo already leads home: "Accueil" steps aside so the switch fits
     without squeezing "Pourquoi Baharia" onto two lines */
  .nav__links li:first-child { display: none; }
}
/* small laptops: also a little less air between the links, and no arrow on
   the header button */
@media (min-width: 1024px) and (max-width: 1099px) {
  .nav__links a { padding-inline: 0.55rem; }
  .nav__act .btn--sm .btn__arrow { display: none; }
  .lang--nav { margin-inline-end: 0; }
  .lang--nav .lang__btn { min-width: 28px; padding: 0 0.32rem; }
}

/* header, phone and tablet: inside the cream pill, beside Menu */
@media (max-width: 1023px) {
  .lang--nav { margin-inline-end: 0.1rem; padding-inline-start: 0.35rem; }
  .lang--nav .lang__btn { color: rgba(30, 23, 16, 0.6); text-shadow: none; }
  .lang--nav .lang__btn:hover, .lang--nav .lang__btn[aria-pressed="true"] { color: var(--text); }
  .lang--nav .lang__btn::after { background: var(--bronze-deep); }
}
/* too narrow to sit beside the logo and Menu: the switch lives at the top of the menu */
@media (max-width: 479px) {
  .lang--nav { display: none; }
}

/* menu dialog: right under the logo and Fermer */
.lang--menu { align-self: flex-start; margin-top: 1.1rem; margin-inline-start: -0.5rem; }
.lang--menu .lang__btn { min-width: 44px; min-height: 44px; font-size: 0.86rem; }
.lang--menu .lang__btn[lang="ar"] { font-size: 1.05rem; }
.lang--menu .lang__btn + .lang__btn::before { font-size: 0.86rem; }
.lang--menu .lang__btn::after { bottom: 10px; }