/*
 * Shared public icon direction.
 * LTR: icon then text. RTL: text then icon (icon at the visual right).
 * This stylesheet is loaded by the shared public head include on every public page.
 */

html body :is(
  .uhf-nav-link,
  .vtx-nav-link,
  .nav-link,
  .header-nav a,
  .journal-nav a,
  .main-nav a,
  .site-nav a,
  .main-university-nav > a,
  .vu-links > a,
  .links > a,
  .gsj-nav > a,
  .side-nav a,
  .sidebar-nav a,
  .vu-side-list a,
  .vu-side-cta,
  .uhf-footer-link,
  .footer-links a,
  .site-footer-col a,
  .footer-contact-item,
  .utility-contact-item,
  .btn,
  .lv-btn,
  .hero-btn,
  .cta-actions a,
  .cta-actions button,
  .membership-hero-actions a,
  .membership-hero-actions button,
  .pricing-card-actions a,
  .pricing-card-actions button,
  .form-actions a,
  .form-actions button,
  .announcement-content a,
  .uhf-announcement-content a,
  .submission-toggle
) {
  direction: ltr !important;
  display: inline-flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
}

html[dir="rtl"] body :is(
  .uhf-nav-link,
  .vtx-nav-link,
  .nav-link,
  .header-nav a,
  .journal-nav a,
  .main-nav a,
  .site-nav a,
  .main-university-nav > a,
  .vu-links > a,
  .links > a,
  .gsj-nav > a,
  .side-nav a,
  .sidebar-nav a,
  .vu-side-list a,
  .vu-side-cta,
  .uhf-footer-link,
  .footer-links a,
  .site-footer-col a,
  .footer-contact-item,
  .utility-contact-item,
  .btn,
  .lv-btn,
  .hero-btn,
  .cta-actions a,
  .cta-actions button,
  .membership-hero-actions a,
  .membership-hero-actions button,
  .pricing-card-actions a,
  .pricing-card-actions button,
  .form-actions a,
  .form-actions button,
  .announcement-content a,
  .uhf-announcement-content a,
  .submission-toggle
),
html[lang="ar"] body :is(
  .uhf-nav-link,
  .vtx-nav-link,
  .nav-link,
  .header-nav a,
  .journal-nav a,
  .main-nav a,
  .site-nav a,
  .main-university-nav > a,
  .vu-links > a,
  .links > a,
  .gsj-nav > a,
  .side-nav a,
  .sidebar-nav a,
  .vu-side-list a,
  .vu-side-cta,
  .uhf-footer-link,
  .footer-links a,
  .site-footer-col a,
  .footer-contact-item,
  .utility-contact-item,
  .btn,
  .lv-btn,
  .hero-btn,
  .cta-actions a,
  .cta-actions button,
  .membership-hero-actions a,
  .membership-hero-actions button,
  .pricing-card-actions a,
  .pricing-card-actions button,
  .form-actions a,
  .form-actions button,
  .announcement-content a,
  .uhf-announcement-content a,
  .submission-toggle
),
body.is-ar :is(
  .uhf-nav-link,
  .vtx-nav-link,
  .nav-link,
  .header-nav a,
  .journal-nav a,
  .main-nav a,
  .site-nav a,
  .main-university-nav > a,
  .vu-links > a,
  .links > a,
  .gsj-nav > a,
  .side-nav a,
  .sidebar-nav a,
  .vu-side-list a,
  .vu-side-cta,
  .uhf-footer-link,
  .footer-links a,
  .site-footer-col a,
  .footer-contact-item,
  .utility-contact-item,
  .btn,
  .lv-btn,
  .hero-btn,
  .cta-actions a,
  .cta-actions button,
  .membership-hero-actions a,
  .membership-hero-actions button,
  .pricing-card-actions a,
  .pricing-card-actions button,
  .form-actions a,
  .form-actions button,
  .announcement-content a,
  .uhf-announcement-content a,
  .submission-toggle
) {
  direction: rtl !important;
  flex-direction: row !important;
}

/* Normalize either DOM order: icons are first logically, then direction places
   them at the left in LTR and at the right in RTL. */
html body :is(
  .uhf-nav-link,
  .vtx-nav-link,
  .nav-link,
  .header-nav a,
  .journal-nav a,
  .main-nav a,
  .site-nav a,
  .main-university-nav > a,
  .vu-links > a,
  .links > a,
  .gsj-nav > a,
  .side-nav a,
  .sidebar-nav a,
  .vu-side-list a,
  .vu-side-cta,
  .uhf-footer-link,
  .footer-links a,
  .site-footer-col a,
  .footer-contact-item,
  .utility-contact-item,
  .btn,
  .lv-btn,
  .hero-btn,
  .cta-actions a,
  .cta-actions button,
  .membership-hero-actions a,
  .membership-hero-actions button,
  .pricing-card-actions a,
  .pricing-card-actions button,
  .form-actions a,
  .form-actions button,
  .announcement-content a,
  .uhf-announcement-content a,
  .submission-toggle
) > :is(i, svg, .contact-icon) {
  order: -1 !important;
  flex: 0 0 auto !important;
  margin-inline: 0 !important;
}

/* Override the former language-independent contact grid without changing the
   footer columns, widths, colours or typography. */
html body .uhf-footer .uhf-footer-inner > .uhf-footer-block:last-child > .uhf-footer-link,
html body footer .footer-contact-item {
  display: flex !important;
  grid-template-columns: none !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
}

html[dir="rtl"] body .uhf-footer .uhf-footer-inner > .uhf-footer-block:last-child > .uhf-footer-link,
html[lang="ar"] body .uhf-footer .uhf-footer-inner > .uhf-footer-block:last-child > .uhf-footer-link,
body.is-ar .uhf-footer .uhf-footer-inner > .uhf-footer-block:last-child > .uhf-footer-link,
html[dir="rtl"] body footer .footer-contact-item,
html[lang="ar"] body footer .footer-contact-item,
body.is-ar footer .footer-contact-item {
  direction: rtl !important;
  flex-direction: row !important;
}

html body .uhf-footer .uhf-footer-inner > .uhf-footer-block:last-child > .uhf-footer-link > span,
html body footer .footer-contact-item > .contact-text {
  grid-column: auto !important;
  grid-row: auto !important;
  order: 0 !important;
  min-width: 0 !important;
  text-align: start !important;
  justify-self: auto !important;
}

html body .uhf-footer .uhf-footer-inner > .uhf-footer-block:last-child > .uhf-footer-link > i,
html body footer .footer-contact-item > .contact-icon {
  grid-column: auto !important;
  grid-row: auto !important;
  order: -1 !important;
  flex: 0 0 auto !important;
  justify-self: auto !important;
  margin: 0 !important;
}

/* Technical values keep their character order while their surrounding row
   follows the active language's visual icon placement. */
html body :is(
  .utility-contact-item,
  .footer-contact-item,
  .uhf-footer-link[href^="mailto:"],
  .uhf-footer-link[href^="tel:"]
) > :is(span, .contact-text),
html body :is(.technical-value, .email, .phone, .url, .doi, .issn, .currency) {
  unicode-bidi: isolate !important;
}

html body :is(
  .utility-contact-item,
  .footer-contact-item,
  .uhf-footer-link[href^="mailto:"],
  .uhf-footer-link[href^="tel:"]
) > :is(span, .contact-text),
html body :is(.technical-value, .email, .phone, .url, .doi, .issn, .currency) {
  direction: ltr !important;
}

@media (max-width: 900px) {
  html body :is(
    .uhf-nav-link,
    .vtx-nav-link,
    .nav-link,
    .side-nav a,
    .sidebar-nav a,
    .vu-side-list a,
    .uhf-footer-link,
    .footer-contact-item,
    .utility-contact-item,
    .btn,
    .lv-btn,
    .hero-btn
  ) {
    flex-wrap: nowrap !important;
  }
}

/* High-specificity integration points for legacy public/journal styles that
   previously forced row-reverse or a two-column contact grid. */
html body :is(
  .footer-col a,
  .main-register-link,
  .topline-email,
  .topline-phone,
  [data-global-ethics-nav],
  [data-global-editions-link]
) {
  direction: ltr !important;
  display: inline-flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
}

html[dir="rtl"][dir="rtl"] body :is(
  .footer-col a,
  .main-register-link,
  .topline-email,
  .topline-phone,
  [data-global-ethics-nav],
  [data-global-editions-link]
),
html[lang="ar"][lang="ar"] body :is(
  .footer-col a,
  .main-register-link,
  .topline-email,
  .topline-phone,
  [data-global-ethics-nav],
  [data-global-editions-link]
),
body.is-ar.is-ar :is(
  .footer-col a,
  .main-register-link,
  .topline-email,
  .topline-phone,
  [data-global-ethics-nav],
  [data-global-editions-link]
) {
  direction: rtl !important;
  flex-direction: row !important;
}

html body :is(
  .footer-col a,
  .main-register-link,
  .topline-email,
  .topline-phone,
  [data-global-ethics-nav],
  [data-global-editions-link]
) > :is(i, svg, .contact-icon) {
  order: -1 !important;
  flex: 0 0 auto !important;
  margin-inline: 0 !important;
}

html[dir="ltr"] body .vtx-utility-bar .utility-contact-item {
  direction: ltr !important;
  flex-direction: row !important;
}

html[dir="rtl"] body .vtx-utility-bar .utility-contact-item,
html[lang="ar"] body .vtx-utility-bar .utility-contact-item,
body.is-ar .vtx-utility-bar .utility-contact-item {
  direction: rtl !important;
  flex-direction: row !important;
}

html body .uhf-footer.uhf-footer .uhf-footer-inner > .uhf-footer-block:last-child > .uhf-footer-link,
html body footer .footer-contact-item.footer-contact-item {
  display: flex !important;
  grid-template-columns: none !important;
  flex-direction: row !important;
}

html[dir="rtl"][dir="rtl"] body :is(
  .uhf-nav-link, .vtx-nav-link, .nav-link, .header-nav a,
  .journal-nav a, .main-nav a, .site-nav a,
  .main-university-nav > a, .vu-links > a, .links > a,
  .gsj-nav > a, .side-nav a, .sidebar-nav a, .vu-side-list a,
  .vu-side-cta, .uhf-footer-link, .footer-links a, .site-footer-col a,
  .footer-contact-item, .utility-contact-item, .btn, .lv-btn, .hero-btn,
  .cta-actions a, .cta-actions button, .membership-hero-actions a,
  .membership-hero-actions button, .pricing-card-actions a,
  .pricing-card-actions button, .form-actions a, .form-actions button,
  .announcement-content a, .uhf-announcement-content a, .submission-toggle
),
html[lang="ar"][lang="ar"] body :is(
  .uhf-nav-link, .vtx-nav-link, .nav-link, .header-nav a,
  .journal-nav a, .main-nav a, .site-nav a,
  .main-university-nav > a, .vu-links > a, .links > a,
  .gsj-nav > a, .side-nav a, .sidebar-nav a, .vu-side-list a,
  .vu-side-cta, .uhf-footer-link, .footer-links a, .site-footer-col a,
  .footer-contact-item, .utility-contact-item, .btn, .lv-btn, .hero-btn,
  .cta-actions a, .cta-actions button, .membership-hero-actions a,
  .membership-hero-actions button, .pricing-card-actions a,
  .pricing-card-actions button, .form-actions a, .form-actions button,
  .announcement-content a, .uhf-announcement-content a, .submission-toggle
),
body.is-ar.is-ar :is(
  .uhf-nav-link, .vtx-nav-link, .nav-link, .header-nav a,
  .journal-nav a, .main-nav a, .site-nav a,
  .main-university-nav > a, .vu-links > a, .links > a,
  .gsj-nav > a, .side-nav a, .sidebar-nav a, .vu-side-list a,
  .vu-side-cta, .uhf-footer-link, .footer-links a, .site-footer-col a,
  .footer-contact-item, .utility-contact-item, .btn, .lv-btn, .hero-btn,
  .cta-actions a, .cta-actions button, .membership-hero-actions a,
  .membership-hero-actions button, .pricing-card-actions a,
  .pricing-card-actions button, .form-actions a, .form-actions button,
  .announcement-content a, .uhf-announcement-content a, .submission-toggle
) {
  direction: rtl !important;
  flex-direction: row !important;
}

html[dir="rtl"] body .uhf-footer.uhf-footer .uhf-footer-inner > .uhf-footer-block:last-child > .uhf-footer-link,
html[lang="ar"] body .uhf-footer.uhf-footer .uhf-footer-inner > .uhf-footer-block:last-child > .uhf-footer-link,
body.is-ar .uhf-footer.uhf-footer .uhf-footer-inner > .uhf-footer-block:last-child > .uhf-footer-link {
  direction: rtl !important;
  flex-direction: row !important;
}

/* Catch page-specific links/buttons that use their own class names while still
   keeping the behavior language-driven rather than hard-coded per component. */
html body :is(a, button):has(> :is(i, svg)) {
  direction: ltr !important;
  display: inline-flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
}

html[dir="rtl"] body :is(a, button):has(> :is(i, svg)),
html[lang="ar"] body :is(a, button):has(> :is(i, svg)),
body.is-ar :is(a, button):has(> :is(i, svg)) {
  direction: rtl !important;
  flex-direction: row !important;
}

html body :is(a, button):has(> :is(i, svg)) > :is(i, svg) {
  order: -1 !important;
  flex: 0 0 auto !important;
  margin-inline: 0 !important;
}

html body #vu-inner-standard-header :is(.vu-side-item, .vu-side-cta) {
  direction: ltr !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
}

html[dir="rtl"] body #vu-inner-standard-header :is(.vu-side-item, .vu-side-cta),
html[lang="ar"] body #vu-inner-standard-header :is(.vu-side-item, .vu-side-cta),
body.is-ar #vu-inner-standard-header :is(.vu-side-item, .vu-side-cta) {
  direction: rtl !important;
  flex-direction: row !important;
}

/* Footer columns stay in the existing responsive grid, while their textual
   items always form one vertical list. This deliberately does not target the
   social row or the copyright row. */
html body .uhf-footer .uhf-footer-inner > .uhf-footer-col,
html body footer :is(.footer-links, .site-footer-col, .footer-col):not(.uhf-footer-social-row) {
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
}

html body .uhf-footer .uhf-footer-inner > .uhf-footer-col > .uhf-footer-link,
html body footer :is(.footer-links, .site-footer-col, .footer-col):not(.uhf-footer-social-row) > a {
  display: flex !important;
  flex: 0 0 auto !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

html[dir="ltr"] body .uhf-footer .uhf-footer-inner > .uhf-footer-col > .uhf-footer-link,
html[dir="ltr"] body footer :is(.footer-links, .site-footer-col, .footer-col):not(.uhf-footer-social-row) > a {
  direction: ltr !important;
  justify-content: flex-start !important;
  text-align: left !important;
}

html[dir="rtl"] body .uhf-footer .uhf-footer-inner > .uhf-footer-col > .uhf-footer-link,
html[lang="ar"] body .uhf-footer .uhf-footer-inner > .uhf-footer-col > .uhf-footer-link,
body.is-ar .uhf-footer .uhf-footer-inner > .uhf-footer-col > .uhf-footer-link,
html[dir="rtl"] body footer :is(.footer-links, .site-footer-col, .footer-col):not(.uhf-footer-social-row) > a,
html[lang="ar"] body footer :is(.footer-links, .site-footer-col, .footer-col):not(.uhf-footer-social-row) > a,
body.is-ar footer :is(.footer-links, .site-footer-col, .footer-col):not(.uhf-footer-social-row) > a {
  direction: rtl !important;
  flex-direction: row !important;
  justify-content: flex-start !important;
  text-align: right !important;
}

html body .uhf-footer .uhf-footer-inner > .uhf-footer-col > .uhf-footer-link > :is(i, svg, .contact-icon),
html body footer :is(.footer-links, .site-footer-col, .footer-col):not(.uhf-footer-social-row) > a > :is(i, svg, .contact-icon) {
  order: -1 !important;
  flex: 0 0 auto !important;
}

/* Contact values keep their character order without changing the row's icon
   side in Arabic. */
html body .uhf-footer .uhf-footer-inner > .uhf-footer-col:last-child > .uhf-footer-link > span,
html body footer .footer-contact-item > .contact-text {
  unicode-bidi: isolate !important;
}

html body .uhf-footer .uhf-footer-inner > .uhf-footer-col:last-child > .uhf-footer-link[href^="mailto:"] > span,
html body .uhf-footer .uhf-footer-inner > .uhf-footer-col:last-child > .uhf-footer-link[href^="tel:"] > span,
html body footer .footer-contact-item > :is(.email, .phone, .url) {
  direction: ltr !important;
  text-align: start !important;
}

/* The social controls remain a horizontal icon row at every breakpoint. */
html body .uhf-footer .uhf-footer-social-row {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
}

html body .uhf-footer .uhf-footer-social-row > a {
  display: grid !important;
  place-items: center !important;
  flex: 0 0 auto !important;
  width: 38px !important;
}

/* Shared submission checklist: DOM order is icon then text. The writing
   direction places that icon on the left in English and on the right in Arabic. */
html body .mini-check {
  direction: ltr !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  text-align: left !important;
}

html[dir="rtl"] body .mini-check,
html[lang="ar"] body .mini-check,
body.is-ar .mini-check {
  direction: rtl !important;
  flex-direction: row !important;
  text-align: right !important;
}

html body .mini-check > :is(i, svg) {
  order: -1 !important;
  flex: 0 0 auto !important;
}

/* Legacy public pages, including Publication Ethics, opt into the same footer
   column contract with .footer-col. Major columns remain governed by the
   existing .footer-grid responsive layout. */
html body footer .footer-grid > .footer-col {
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
}

html body footer .footer-grid > .footer-col > a {
  display: flex !important;
  flex: 0 0 auto !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  width: 100% !important;
}

html[dir="rtl"] body footer .footer-grid > .footer-col > a,
html[lang="ar"] body footer .footer-grid > .footer-col > a,
body.is-ar footer .footer-grid > .footer-col > a {
  direction: rtl !important;
  flex-direction: row !important;
  justify-content: flex-start !important;
  text-align: right !important;
}