/* v13.3: brand fonts for the language switch; the Arabic label uses a 4-letter subset so English pages stay light. */
@font-face{font-family:'Sami Arabic UI';src:url('fonts/sami-arabic-ui-500.woff') format('woff');font-weight:400 700;font-display:swap;unicode-range:U+0600-06FF}

/* v13.4 language toggle: a glass pill with a pearl thumb that slides to the chosen language.
   Self-coloured, so it stays readable on light, dark and photographic headers. */
.v13-language{position:relative;isolation:isolate;display:inline-grid;grid-template-columns:1fr 1fr;align-items:center;flex-shrink:0;margin-inline:4px;padding:3px;border-radius:999px;
  background:rgba(9,38,27,.62);-webkit-backdrop-filter:blur(10px) saturate(1.3);backdrop-filter:blur(10px) saturate(1.3);
  border:1px solid rgba(214,232,192,.4);box-shadow:0 8px 22px -12px rgba(4,20,13,.75),inset 0 1px 0 rgba(255,255,255,.08);white-space:nowrap}
.v13-language>span{display:none}
.v13-language::before{content:'';position:absolute;z-index:0;top:3px;bottom:3px;left:3px;width:calc(50% - 3px);border-radius:999px;
  background:linear-gradient(180deg,#f7f9f0,#dde9cf);box-shadow:0 2px 8px rgba(4,20,13,.35),inset 0 -1px 0 rgba(20,56,38,.12);
  transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.v13-language:has(a[lang=ar][aria-current])::before{transform:translateX(100%)}
.v13-language a{position:relative;z-index:1;display:grid;place-items:center;min-width:38px;height:26px;padding:0 10px;border-radius:999px;border:0;
  color:#e6f0df;text-decoration:none;opacity:1;font:600 10.5px/1 Manrope,Arial,sans-serif;letter-spacing:.12em;transition:color .35s ease}
.v13-language a[lang=ar]{font-family:'Sami Arabic','Sami Arabic UI',Tahoma,Arial,sans-serif;font-size:12.5px;font-weight:500;letter-spacing:0}
.v13-language a[aria-current]{color:#143826}
.v13-language a:not([aria-current]):hover{color:#fff}
.v13-language a:focus-visible{outline:2px solid #d6e8c0;outline-offset:2px}
/* A small nudge toward the other language on hover, then a full slide when chosen. */
.v13-language:has(a[lang=ar]:not([aria-current]):hover)::before{transform:translateX(9%)}
.v13-language:has(a[lang=en]:not([aria-current]):hover)::before{transform:translateX(91%)}
.v13-language.is-switching::before{transform:translateX(100%)}
.v13-language.is-switching:has(a[lang=ar][aria-current])::before{transform:translateX(0)}
.v13-language.is-switching a[aria-current]{color:#e6f0df}
.v13-language.is-switching a:not([aria-current]){color:#143826}
@media(prefers-reduced-motion:reduce){.v13-language::before,.v13-language a{transition:none}}
@media(max-width:760px){.v13-language{margin-inline:0;padding:2px}.v13-language::before{top:2px;bottom:2px;left:2px;width:calc(50% - 2px)}.v13-language a{min-width:32px;height:26px;padding:0 8px;font-size:10px}.v13-language a[lang=ar]{font-size:12px}}

/* Small phones, English pages: the long SAMI HASSAN wordmark leaves no room for both labels,
   so the toggle becomes a single glass chip offering Arabic. */
@media(max-width:400px){html:not([lang=ar]) .header .v13-language{grid-template-columns:1fr}html:not([lang=ar]) .header .v13-language::before{display:none}html:not([lang=ar]) .header .v13-language a[aria-current]{display:none}html:not([lang=ar]) .header .v13-language a{padding:0 11px}}

/* The added control stays compact inside the existing action area. */
.header-actions:has(.v13-language){column-gap:clamp(8px,1.25vw,20px)}
@media(max-width:760px){.header-actions:has(.v13-language){column-gap:8px}.header-floating .header-actions:has(.v13-language){column-gap:6px}}

.v13-language[hidden]{display:none}.masthead .v13-language{margin-inline-start:auto}.ab-skin-bar .v13-language{margin-inline-start:auto}