/*
   Languages on the public pages (welcome / privacy / terms / support) and the error pages:
   the language switcher, and Arabic (right-to-left) typography.

   Lives in static/ - NOT static-app/, which `ng build` wipes on every deploy.
   Everything about direction here is gated on :lang(ar) / [dir="rtl"], so left-to-right pages are unchanged.
*/

/* Noto Sans Arabic (SIL Open Font License 1.1, see /assets/public-fonts/NotoSansArabic-OFL.txt).
   Variable weight; the unicode-range keeps it to Arabic text, so Latin text keeps the page's font and the
   file is only downloaded when Arabic is on screen. */
@font-face {
  font-family: "Noto Sans Arabic";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/public-fonts/NotoSansArabic-arabic.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011,
    U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

/* --font is the pages' font stack (public-pages.css, welcome.html); the error pages set body directly */
:root:lang(ar) {
  --font: "Noto Sans Arabic", -apple-system, BlinkMacSystemFont, "Segoe UI", Tahoma, Arial, sans-serif;
}
:root:lang(ar) body {
  font-family: "Noto Sans Arabic", -apple-system, BlinkMacSystemFont, "Segoe UI", Tahoma, Arial, sans-serif;
}
/* Tracking breaks the joined Arabic letters apart; uppercase does nothing for Arabic */
:root:lang(ar) body * { letter-spacing: 0 !important; }
/* Arabic needs a little more line height than Latin at the same size */
:root:lang(ar) h1, :root:lang(ar) h2, :root:lang(ar) h3 { line-height: 1.3; }

/* Codes, URLs, addresses and function names stay left-to-right inside Arabic text */
[dir="rtl"] code, [dir="rtl"] .ltr, [dir="rtl"] a[href^="mailto:"] { direction: ltr; unicode-bidi: isolate; }

/* ---------- Language switcher ---------- */
.lang-switch { position: relative; flex: none; }
.lang-switch summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 38px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--ls-border, #e2ebe6);
  color: var(--ls-ink, #14201b);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  user-select: none;
}
.lang-switch summary::-webkit-details-marker { display: none; }
.lang-switch summary:hover { background: var(--ls-hover, rgba(20, 32, 27, 0.05)); }
.lang-switch summary svg { width: 17px; height: 17px; flex: none; }
.lang-switch[open] summary { background: var(--ls-hover, rgba(20, 32, 27, 0.05)); }
/* The menu: a panel of two columns, the current language marked. Its links are styled through
   .lang-switch .lang-menu a.lang-opt: the pages' top bars style their links (.nav a:not(.btn): white text,
   hidden on narrow screens), which must not reach the menu. */
.lang-switch__chevron { width: 14px !important; height: 14px !important; opacity: 0.7; transition: transform 0.15s; }
.lang-switch[open] .lang-switch__chevron { transform: rotate(180deg); }
.lang-switch .lang-menu {
  position: absolute;
  inset-inline-end: 0;
  top: calc(100% + 10px);
  z-index: 100;
  width: 360px;
  padding: 14px;
  background: #fff;
  border: 1px solid #e2ebe6;
  border-radius: 14px;
  box-shadow: 0 18px 48px rgba(12, 22, 17, 0.18);
  text-align: start;
}
.lang-switch .lang-menu__title {
  margin: 0 0 8px;
  padding-inline: 10px;
  color: #6b7a73;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.lang-switch .lang-menu__list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.lang-switch .lang-menu a.lang-opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 10px;
  border-radius: 8px;
  color: #14201b;
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.3;
  text-align: start;
  text-decoration: none;
  white-space: nowrap;
}
.lang-switch .lang-menu a.lang-opt:hover,
.lang-switch .lang-menu a.lang-opt:focus-visible { background: #eef7f2; color: #14201b; outline: none; }
.lang-switch .lang-menu a.lang-opt.on { background: #eef7f2; color: var(--brand, #007541); font-weight: 700; }
/* the current language: a check mark at the end */
.lang-switch .lang-menu a.lang-opt.on::after {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.lang-switch .lang-menu a.lang-opt[lang="ar"] { font-family: "Noto Sans Arabic", -apple-system, "Segoe UI", Tahoma, Arial, sans-serif; }
@media (max-width: 520px) {
  .lang-switch summary span { display: none; }   /* the globe alone on a phone */
  /* a sheet across the screen under the top bar */
  .lang-switch .lang-menu { position: fixed; top: 64px; inset-inline: 12px; width: auto; }
}