/* Arabic desktop navigation alignment and dropdown presentation. */
@media (min-width: 992px) {
  html[lang^="ar"] #sp-header #sp-menu > .sp-column,
  html[dir="rtl"] #sp-header #sp-menu > .sp-column {
    align-items: center !important;
    flex-wrap: nowrap !important;
  }

  html[lang^="ar"] #sp-header .sp-megamenu-wrapper,
  html[dir="rtl"] #sp-header .sp-megamenu-wrapper,
  html[lang^="ar"] #sp-header .sp-megamenu-parent,
  html[dir="rtl"] #sp-header .sp-megamenu-parent {
    align-items: stretch !important;
    align-self: stretch !important;
    height: 100% !important;
    min-width: 0;
  }

  html[lang^="ar"] #sp-header .sp-megamenu-parent > li,
  html[dir="rtl"] #sp-header .sp-megamenu-parent > li {
    align-items: stretch !important;
    display: flex !important;
    flex: 0 0 auto;
  }

  html[lang^="ar"] #sp-header .sp-megamenu-parent > li > a,
  html[lang^="ar"] #sp-header .sp-megamenu-parent > li > span,
  html[dir="rtl"] #sp-header .sp-megamenu-parent > li > a,
  html[dir="rtl"] #sp-header .sp-megamenu-parent > li > span {
    align-items: center !important;
    display: flex !important;
    height: 100% !important;
    line-height: 1.35 !important;
    padding-inline: .68rem !important;
    white-space: nowrap;
  }

  /* Keep the readable Arabic face without making the seven-item desktop row
     wider than the available navigation area. EasySocial/body Arabic text
     retains the larger 1.03–1.08rem settings from the typography release. */
  html[lang^="ar"] #sp-header .sp-megamenu-parent > li > a,
  html[lang^="ar"] #sp-header .sp-megamenu-parent > li > span {
    font-size: 1rem !important;
  }

  html[lang^="ar"] #sp-header .st-header-language,
  html[lang^="ar"] #sp-header .st-header-auth,
  html[dir="rtl"] #sp-header .st-header-language,
  html[dir="rtl"] #sp-header .st-header-auth {
    align-self: center !important;
    margin-block: 0 !important;
  }

  /* custom.css reserves a tall guest-login block on desktop. Once EasySocial
     replaces it with the compact member menu, release that reservation so the
     Arabic navigation and account controls share one centered header row. */
  html[lang^="ar"] #sp-header .st-header-auth:has(> .mod-es:only-child),
  html[dir="rtl"] #sp-header .st-header-auth:has(> .mod-es:only-child) {
    height: auto !important;
    min-height: 0 !important;
  }

  html[lang^="ar"] #sp-header .sp-megamenu-parent > li.sp-has-child > a::after,
  html[dir="rtl"] #sp-header .sp-megamenu-parent > li.sp-has-child > a::after {
    margin-inline: .38rem 0;
  }

  html[lang^="ar"] #sp-header .sp-dropdown,
  html[dir="rtl"] #sp-header .sp-dropdown {
    direction: rtl;
    text-align: right;
  }

  html[lang^="ar"] #sp-header .sp-dropdown li a,
  html[dir="rtl"] #sp-header .sp-dropdown li a {
    font-size: .96rem !important;
    line-height: 1.55 !important;
    text-align: right;
    white-space: normal;
  }
}