/* Grouped language menu. landing.css positions the popover and caps its
   height to the viewport; this file lays out the region groups inside it.
   Logical properties only, so the menu mirrors for Arabic and Urdu. */
.rfh-lang-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.rfh-lang-icon { flex: none; }

.rfh-lang .rfh-lang-menu {
  display: block;
  width: max-content;
  min-width: 12rem;
  padding: 0 8px 8px;
  overflow-x: hidden;
  /* Keyboard focus keeps a little room so the focus ring is never cut at the edge. */
  scroll-padding-block: 0.5rem;
}

/* Headings scroll with their choices, so no heading outlives its group. */
.rfh-lang-group {
  margin: 0;
  padding: 12px 12px 6px;
  color: var(--text-tertiary);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.rfh-lang-list { margin: 0 0 4px; padding: 0; list-style: none; }

.rfh-lang .rfh-lang-menu a {
  display: flex; align-items: center; gap: 10px;
  min-height: 44px;
  padding: 8px 12px;
}
.rfh-lang .rfh-lang-menu a:focus-visible { outline-offset: -2px; }
/* Arabic-script names fall back to a system face that looks smaller than Archivo at the
   same size; enlarge just those choice labels, keeping the 44px row. */
.rfh-lang .rfh-lang-menu a:is(:lang(ar), :lang(ur)) > span { font-size: 1.2em; line-height: 1.4; }
.rfh-lang .rfh-lang-menu a[aria-current="page"] { font-weight: var(--weight-semibold); }
.rfh-lang .rfh-lang-menu a[aria-current="page"]::after {
  content: "";
  flex: none;
  width: 5px; height: 10px;
  margin-inline-start: auto;
  border: solid var(--cyan);
  border-width: 0 2px 2px 0;
  transform: translateY(-1px) rotate(45deg);
}

/* Wide screens show each group in two columns, read top to bottom. */
@media (min-width: 720px) {
  /* Taller cap than landing.css so desktop shows every group without inner scrolling. */
  .rfh-lang .rfh-lang-menu { width: 30rem; max-height: min(80vh, 48rem, calc(100dvh - 100px)); }
  .rfh-lang-list { columns: 2; column-gap: 4px; }
  .rfh-lang-list li { break-inside: avoid; }
}

/* Phone headers keep their previous summary width next to the brand. */
@media (max-width: 620px) {
  .rfh-lang-icon { display: none; }
}