/* Home page language layer: one language at a time (shared switch in case-v2.js), Cairo for Arabic. */
@font-face{font-family:Cairo;src:url('../fonts/Cairo-Variable.ttf') format('truetype');font-weight:200 1000;font-display:swap}
html[data-lang=en] .ar,html[data-lang=ar] .en{display:none!important}
html[data-lang=ar] .ar{font-family:Cairo,'Dennis Sans',sans-serif;letter-spacing:normal}
html[data-lang=ar] .home-intro h4 .ar,html[data-lang=ar] .footer h2 .ar,html[data-lang=ar] .work-items h4 .ar{font-weight:600}
html[data-lang=ar] .home-intro h4{line-height:1.45}
html[data-lang=ar] .footer h2{line-height:1.25}

/* Language switch */
.lang-item{display:flex;align-items:center}
.home-lang-toggle,.menu-lang-toggle{font:600 15px/1 Cairo,sans-serif;color:inherit;background:none;border:1px solid currentColor;border-radius:40px;padding:.55em 1em;cursor:pointer;opacity:.85;transition:opacity .2s,background .2s,color .2s}
.home-lang-toggle:lang(en),.menu-lang-toggle:lang(en){font-family:'Dennis Sans',sans-serif;font-weight:450}
.home-lang-toggle:hover,.menu-lang-toggle:hover{opacity:1}
.lang-row{display:flex;padding-bottom:1.5em}
.menu-lang-toggle{color:#fff;font-size:17px;padding:.7em 1.3em}
.menu-lang-toggle:hover{background:#fff;color:#1c1d20}
html:not([data-lang]) .home-lang-toggle,html:not([data-lang]) .menu-lang-toggle{display:none}
@media(max-width:540px){.nav-bar .links-wrap li.lang-item{display:flex;margin-inline-end:.6em}.nav-bar .links-wrap{display:flex;align-items:center}.home-lang-toggle{font-size:14px;padding:.5em .9em}}

/* The opening scene is a fixed composition (video, moving name, project links): keep its layout left-to-right
   in Arabic and let only its text read right-to-left. The rest of the page mirrors normally. */
html[dir=rtl] .bassuoni-story{direction:ltr}
html[dir=rtl] .hero-name,html[dir=rtl] .name-label,html[dir=rtl] .name-word{direction:ltr;unicode-bidi:isolate}
html[data-lang=ar] .bassuoni-story .hero-specialty,html[data-lang=ar] .bassuoni-story h4.ar{text-align:left}
html[data-lang=ar] .workspace-copy .ar{text-align:left}

/* Footer heading: the template makes every span in the heading its own line; keep the language spans inline
   so the round picture stays beside "Let's work" / "لنعمل". */
.footer h2 > span > .en,.footer h2 > span > .ar{display:inline}
html[dir=rtl] .footer .profile-picture{margin-right:0;margin-left:.125em}
html[dir=rtl] .footer .arrow{right:auto;left:0}
html[dir=rtl] .footer .arrow svg{transform:scaleX(-1) rotate(90deg)}

/* Intro: mirror the template's physical column spacing and the round "About me" button. */
html[dir=rtl] .home-intro .flex-col:nth-child(1){padding-right:0;padding-left:var(--gap-padding)}
html[dir=rtl] .home-intro .flex-col:nth-child(2){padding-left:0;padding-right:var(--gap-padding)}
@media screen and (max-width:720px){
  html[dir=rtl] .home-intro .flex-col:nth-child(1){padding-left:0}
  html[dir=rtl] .home-intro .flex-col:nth-child(2){padding-right:0}
  html[dir=rtl] .home-intro .flex-col:nth-child(2) .btn{right:auto;left:0;transform:translate(20%,50%)}
}

/* Keep the Cairo clock in its own left-to-right run inside Arabic text ("08:19 PM", not "PM 08:19"). */
#timeSpan{display:inline-block;direction:ltr;unicode-bidi:isolate}