/* Lambda: the entrance in English, Arabic and French (task E01). The styles of the language switch, of right to left,
   and of the Arabic letters. Every class of its own starts with gl-. The words are in gateway/gate-text.js.

   ENGLISH IS NOT TOUCHED HERE: every rule below is for the switch, for the small line of the kindergarten card, or it
   begins with html[lang="ar"], html[lang="fr"] or [dir="rtl"]. gate.css and the worlds-*.css files are as they were.

   RIGHT TO LEFT: the two halves stay where they are (Abdallah, 2026-10-09). <html dir="rtl"> turns the words and the
   insides of the cards; the switch, "Grown-ups" and the sound button keep their corner in every language. */

/* ---------------------------------------------------------------- Arabic letters
   The Lab card's two fonts (Unbounded, DM Sans) hold Latin letters only, and the entrance asks no other website. So the
   Arabic letters of these two families come from Readex Pro, the font of the school pages: it is in the project already
   (school/shared/fonts/, SIL Open Font License, OFL.txt beside it) and is fetched only when Arabic letters are shown.
   Each rule has the weight of a Latin file of gateway/fonts.css, so that the browser treats the two as one font.
   The kindergarten's font (Baloo Bhaijaan 2) has its own Arabic letters. */
@font-face{font-family:'DM Sans';font-style:normal;font-weight:400;font-display:swap;src:url(../school/shared/fonts/readex-pro-arabic-wght-normal.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:500;font-display:swap;src:url(../school/shared/fonts/readex-pro-arabic-wght-normal.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:700;font-display:swap;src:url(../school/shared/fonts/readex-pro-arabic-wght-normal.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'Unbounded';font-style:normal;font-weight:500;font-display:swap;src:url(../school/shared/fonts/readex-pro-arabic-wght-normal.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'Unbounded';font-style:normal;font-weight:700;font-display:swap;src:url(../school/shared/fonts/readex-pro-arabic-wght-normal.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'Unbounded';font-style:normal;font-weight:800;font-display:swap;src:url(../school/shared/fonts/readex-pro-arabic-wght-normal.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}

/* ---------------------------------------------------------------- the language switch
   Top end corner, under "Grown-ups" and the sound button (gate.css: .sound; sign-in.css: .si-grown): the same place on a
   computer and on a phone, and in every language. Its order never turns (EN, Arabic, FR), like the Lab's own switch. */
.gl-lang{position:absolute;z-index:7;top:calc(clamp(10px,2.2vh,22px) + 52px);right:clamp(10px,2vw,22px);display:inline-flex;direction:ltr;padding:3px;border-radius:999px;
 background:rgba(255,255,255,.78);box-shadow:0 6px 18px rgba(10,20,60,.22);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.gl-lang button{min-width:40px;min-height:34px;border:0;background:transparent;cursor:pointer;font:700 12.5px/1.2 'DM Sans',system-ui,sans-serif;color:#414b6e;padding:0 11px;border-radius:999px}
.gl-lang button[lang="ar"]{font-size:13.5px}
.gl-lang button[aria-pressed="true"]{background:#fff;color:var(--ink);box-shadow:0 1px 4px rgba(26,42,74,.25)}
.gl-lang button:hover:not([aria-pressed="true"]){color:var(--ink)}
.gate.entering .gl-lang{opacity:0;transition:opacity .3s}
/* a very narrow phone: "Grown-ups" stands under the sound button there (sign-in.css), so the switch goes lower, clear of
   the Lab's card beside it (that card ends about 135 px from the top), and is a little narrower */
@media (max-width:359px){.gate.v .gl-lang{top:calc(clamp(10px,2.2vh,22px) + 128px)}.gate.v .gl-lang button{min-width:36px;padding:0 9px}}

/* until the words of the chosen language are on the page, the two cards wait (index.html sets gl-wait before the page is
   drawn, gate-text.js takes it off); if that file never comes, the cards show by themselves after three seconds */
html.gl-wait .labcard,html.gl-wait .kp-sign{visibility:hidden;animation:glShow 0s 3s forwards}
@keyframes glShow{to{visibility:visible}}

/* ---------------------------------------------------------------- the kindergarten card
   the small line "English for now" (Arabic and French only; gate-text.js hides it when it is empty): it is seen at every
   size, also where the card hides its sentence */
.gl-note{display:block;margin:10px 0 0;font:600 13.5px/1.3 'Baloo Bhaijaan 2',sans-serif;color:#5d618f}
.gl-note[hidden]{display:none}
.gate.v .gl-note{margin:0;font-size:12.5px}
/* the big coloured word in Arabic: one joined word, written whole underneath (the white edge) and once more on top with
   a colour for each letter */
.kp-big.gl-ar{position:relative;display:inline-block;direction:rtl;white-space:nowrap;line-height:1.5;font-size:min(clamp(34px,3.7vw,52px),17cqi);margin:-8px 0 -2px;transform:rotate(-1.5deg)}
.tz .kp-big.gl-ar{font-size:min(clamp(34px,3.7vw,52px),17cqi)}
.kp-big.gl-ar .gl-under{color:#fff;text-shadow:2px 0 #fff,-2px 0 #fff,0 2px #fff,0 -2px #fff,2px 2px #fff,-2px -2px #fff,2px -2px #fff,-2px 2px #fff,0 5px 0 rgba(31,48,90,.14)}
.kp-big.gl-ar .gl-over{position:absolute;inset:0}
.kp-big.gl-ar .gl-over i{font-style:normal}
@container half (max-width:560px){.kp-big.gl-ar,.tz .kp-big.gl-ar{font-size:min(32px,17cqi)}}
.gate.v .kp-big.gl-ar,.gate.v.tz .kp-big.gl-ar{font-size:27px;line-height:1.3;margin:-4px 0}

/* ---------------------------------------------------------------- Arabic: room for the letters, and what must not turn */
html[lang="ar"] .labcard h2{line-height:1.25}
html[lang="ar"] .labcard p{font-size:16px;line-height:1.75}
html[lang="ar"] .labcard button,html[lang="ar"] .kp-btn{line-height:1.3}
html[lang="ar"] .kp-sign p,html[lang="ar"] .kp-soon p{line-height:1.6}
html[lang="ar"] .kp-soon h3{line-height:1.3}
[dir="rtl"] .brandmark{direction:ltr}                 /* the mark on the seam is the logo: it reads LAMBDA in every language */
[dir="rtl"] .tz-label span{direction:ltr}             /* a molecule's formula */
/* a Lambda ID, an email address and a password are Latin letters: they are typed from the left, and stand at the start (the right) */
[dir="rtl"] .si-f input[name="name"],[dir="rtl"] .si-f input[type="email"],[dir="rtl"] .si-f input[name="email"],[dir="rtl"] .si-secret input{direction:ltr;text-align:right}