/* Load after site.css, stories.css and page-specific inline styles.
   Supply a local @font-face named "Noto Sans Arabic" in the font stylesheet.
   Set lang on every page and dir="rtl" on the Arabic html element. */

.locale-bar {
  background: #f4f8fd;
  color: #004188;
  border-block-end: 1px solid #dce5f0;
  font-size: 14px;
  line-height: 1.5;
}

.locale-bar > .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 20px;
  padding-block: 8px;
}

.locale-label {
  font-size: 13px;
  font-weight: 650;
  min-inline-size: 0;
  overflow-wrap: anywhere;
}

.locale-select { display: none; }

@media (max-width: 600px) {
  .locale-enhanced .locale-bar > .wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px;
  }
  .locale-enhanced .locale-links { display: none; }
  .locale-enhanced .locale-select {
    display: block;
    width: 100%;
    min-height: 44px;
    padding: 8px;
    border: 1px solid #a9c5e6;
    border-radius: 5px;
    background: white;
    color: #004188;
    font: inherit;
  }
  .locale-select:focus-visible { outline: 3px solid #0e6ace; outline-offset: 2px; }
}

.locale-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  min-inline-size: 0;
  max-inline-size: 100%;
}

.locale-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: 44px;
  max-inline-size: 100%;
  padding: 8px 12px;
  border: 1px solid transparent;
  border-radius: 5px;
  color: #004188;
  font-size: 14px;
  line-height: 1.5;
  font-weight: 600;
  text-decoration: none;
  overflow-wrap: anywhere;
  unicode-bidi: isolate;
}

.locale-links a:not([lang|="ar"]) {
  direction: ltr;
}

.locale-links a[lang|="ar"] {
  direction: rtl;
  font-family: "Noto Sans Arabic", Tahoma, Arial, sans-serif;
}

.locale-links a:hover {
  color: #004188;
  background: #e2edfa;
  border-color: #a9c5e6;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.locale-links a[aria-current="page"] {
  background: #004188;
  border-color: #004188;
  color: #fff;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.locale-links a:focus-visible {
  outline: 3px solid #0e6ace;
  outline-offset: 3px;
}

.locale-notice.wrap {
  padding-block: 12px;
  margin-block: 0;
  color: #41566d;
  font-size: 14px;
  line-height: 1.65;
  overflow-wrap: anywhere;
}

.locale-notice a {
  color: #004188;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Labels may grow during translation. Keep the existing mobile menu rules. */
.navigation {
  height: auto;
  min-block-size: 94px;
  flex-wrap: wrap;
  row-gap: 12px;
  padding-block: 16px;
}

.navigation > nav,
.navigation .desktop-nav {
  flex: 1 1 420px;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px 18px;
  min-inline-size: 0;
}

.navigation > nav a,
.navigation .desktop-nav a {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  max-inline-size: 100%;
  overflow-wrap: anywhere;
  line-height: 1.5;
}

.navigation > .button,
.navigation .compact {
  max-inline-size: 100%;
  white-space: normal;
  text-align: center;
  overflow-wrap: anywhere;
}

.navigation > a:first-child,
.navigation .logo-link {
  flex-shrink: 0;
}

.mobile-nav nav {
  max-inline-size: calc(100vw - 44px);
}

.mobile-nav nav a,
#mobile-menu a {
  overflow-wrap: anywhere;
}

.topline .wrap,
.demo,
.footer-bottom,
.pagination,
.browse-bar {
  flex-wrap: wrap;
}

.topline .wrap {
  gap: 4px 20px;
}

.browse-bar p,
.price-list > a > span {
  white-space: normal;
}

.trust { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.trust p {
  min-inline-size: 0;
  overflow-wrap: anywhere;
  border-right: 0;
  border-inline-end: 1px solid var(--line);
}
.trust p:last-child { border-inline-end: 0; }

.utility-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  align-items: center;
}
.utility-links a { min-block-size: 44px; display: inline-flex; align-items: center; }

.button,
.text-link,
.service-jumps a,
.filter-links a,
.story-filter a,
.pagination button {
  max-inline-size: 100%;
  overflow-wrap: anywhere;
}

:is(.hero-layout, .split, .service-row, .pricing, .faq, .name-grid,
    .name-help, .footer-main, .footer-grid, .story-grid, .story-card,
    .story-hero-grid, .story-body, .story-meaning .wrap, .overview) > * {
  min-inline-size: 0;
}

:is(h1, h2, h3, h4, .gateway p, .story-card-copy, .guide-copy,
    .footer-main, .footer-grid, .overview a) {
  overflow-wrap: anywhere;
}

html:lang(de) :is(h1, h2, h3, h4, .navigation a, .gateway p) {
  hyphens: auto;
}

.hero-art figcaption {
  max-inline-size: calc(100% - 32px);
  overflow-wrap: anywhere;
}

.controls label,
.controls input,
.controls select,
.controls button {
  min-inline-size: 0;
  max-inline-size: 100%;
}

.controls label:first-child {
  min-inline-size: min(190px, 100%);
}

.overview {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Isolate technical strings in markup; never set direction on all links.
   Use <bdi dir="ltr" translate="no"> for inline filenames and extensions. */
.locale-ltr,
[data-locale-ltr],
.machine-code,
.file-extension,
.filename,
.url,
#page-count,
a[href^="tel:"],
a[href^="mailto:"],
code,
pre,
kbd,
samp {
  direction: ltr;
  unicode-bidi: isolate;
}

/* Arabic type needs its own metrics; existing image assets stay unchanged. */
html:lang(ar) body,
html:lang(ar) :is(h1, h2, h3, h4, h5, h6, button, input, select,
    textarea, .eyebrow, .tiny, .name-type, .story-family,
    .story-card-copy p, .hero-art strong, .story-list-heading) {
  font-family: "Noto Sans Arabic", Tahoma, Arial, sans-serif;
}

html:lang(ar) body {
  line-height: 1.9;
}

html:lang(ar) :is(h1, h2, h3, h4, h5, h6, .hero-art strong) {
  line-height: 1.5;
  letter-spacing: normal;
}

html:lang(ar) :is(.eyebrow, .tiny, .name-type, .story-family,
    .option-label, .scope, .demo, .demo-bar, .quick-guides > span,
    .hero-art figcaption > span) {
  letter-spacing: normal;
  text-transform: none;
  line-height: 1.75;
}

html:lang(ar) :is(.article-content, .story-chapter p,
    .story-lead, .story-intro p, .story-meaning p,
    .story-card-copy p, .story-brief p, .story-brief li) {
  line-height: 1.9;
}

html[dir="rtl"] .hero {
  text-align: start;
}

/* Keep Arabic labels and isolated file/material tokens in one text flow. */
html[dir="rtl"] .service-options li a { display: block; }

html[dir="rtl"] .skip {
  left: auto;
  right: 20px;
}

html[dir="rtl"] .demo-bar span {
  margin-left: 0;
  margin-right: 20px;
}

html[dir="rtl"] .mobile-nav nav {
  right: auto;
  left: 0;
}

html[dir="rtl"] :is(.article-content ul, .article-content ol) {
  padding-left: 0;
  padding-right: 24px;
}

html[dir="rtl"] .process-grid ul {
  padding-left: 0;
  padding-right: 22px;
}

html[dir="rtl"] :is(.page-directory, .name-grid ul) {
  padding-left: 0;
  padding-right: 20px;
}

html[dir="rtl"] .story-brief ul {
  padding-left: 0;
  padding-right: 19px;
}

html[dir="rtl"] :is(.article-content blockquote, .form-note) {
  border-left: 0;
  border-right: 3px solid #0e6ace;
}

html[dir="rtl"] .article-content :is(th, td) {
  text-align: start;
}

html[dir="rtl"] .story-chapter:first-child {
  border-left: 0;
  border-right: 3px solid #0e6ace;
  padding-left: 0;
  padding-right: 25px;
}

html[dir="rtl"] .hero-art > img {
  padding-right: 5px;
  padding-left: 80px;
}

html[dir="rtl"] .hero-art figcaption {
  right: auto;
  left: 20px;
  border-left: 0;
  border-right: 3px solid #0e6ace;
}

html[dir="rtl"] .gateway p {
  padding-right: 0;
  padding-left: 20px;
}

html[dir="rtl"] .round-arrow {
  right: auto;
  left: 15px;
}

html[dir="rtl"] .trust p {
  border-right: 0;
  border-left: 1px solid #dce5f0;
}

html[dir="rtl"] .trust p:last-child {
  border-left: 0;
}

html[dir="rtl"] .faq details > p {
  padding-right: 0;
  padding-left: 24px;
}

html[dir="rtl"] .footer-bottom span {
  margin-right: 0;
  margin-left: auto;
}

html[dir="rtl"] :is(.url, a[href^="tel:"], a[href^="mailto:"]) {
  text-align: right;
}

/* Visual sitemap has an independent inline stylesheet. */
.branch li {
  grid-template-columns: minmax(0, 1fr) max-content minmax(0, 150px);
}

.branch .scope {
  max-inline-size: 110px;
  overflow-wrap: anywhere;
}

@media (max-width: 650px) {
  .controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }
  .controls :is(label, input, select, button) {
    inline-size: 100%;
    min-inline-size: 0;
  }
  .controls label:first-child { min-width: 0; }
  .branch li { grid-template-columns: minmax(0, 1fr) max-content; }
}

html[dir="rtl"] .branch {
  border-left: 1px solid #d5e0ec;
  border-right: 4px solid #0e6ace;
}

html[dir="rtl"] .branch-count {
  float: left;
}

html[dir="rtl"] .branch ul {
  padding-right: 33px;
  padding-left: 16px;
}

@media (max-width: 1100px) {
  html[dir="rtl"] .hero-art > img {
    padding-left: 55px;
  }
}

@media (max-width: 980px) {
  .navigation {
    min-block-size: 80px;
    padding-block: 12px;
  }

  html[dir="rtl"] .navigation > .button,
  html[dir="rtl"] .navigation .compact {
    margin-left: 0;
    margin-right: auto;
  }

  html[dir="rtl"] .hero-art > img {
    padding-left: 10px;
  }

  html[dir="rtl"] .hero-art figcaption {
    left: 10px;
  }
}

@media (max-width: 767px) {
  .locale-bar > .wrap {
    align-items: flex-start;
    justify-content: flex-start;
    gap: 4px 12px;
  }

  .locale-label {
    flex-basis: 100%;
  }

  .locale-links {
    gap: 4px;
  }

  .locale-links a {
    padding-inline: 10px;
  }

  .locale-notice.wrap {
    font-size: 13px;
  }

  html[dir="rtl"] .hero-art > img {
    padding-left: 100px;
  }

  html[dir="rtl"] .hero-art figcaption {
    left: 16px;
  }

  html[dir="rtl"] .gateway p {
    padding-left: 12px;
  }

  html[dir="rtl"] .round-arrow {
    left: 10px;
  }
}

@media (max-width: 760px) {
  html[dir="rtl"] .story-chapter:first-child {
    padding-right: 18px;
  }
}

@media (max-width: 650px) {
  .overview {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  html[dir="rtl"] .branch ul {
    padding-right: 16px;
  }
}

@media (max-width: 390px) {
  html[dir="rtl"] .hero-art > img {
    padding-left: 65px;
  }

  html[dir="rtl"] .hero-art figcaption {
    left: 10px;
  }
}