/* ── QOTTUF JAZEERA — UX / mobile hotfixes ──────────────────────────────
   Applied to the built bundle. Port these into source on the next build.
   Ref: WCAG 2.1 AA + Apple HIG / Material touch-target minimums.        */

/* [1] Hero z-index — the low-bandwidth/reduced-motion fallback renders the
   hero without z-[2], letting the fixed WebGL stage (z-1) cover it.     */
main>section:first-of-type{position:relative;z-index:2}

/* [2] Contrast — navy/45 (3.31:1) and navy/50 (3.91:1) on the gray-100
   contact panel failed WCAG AA 4.5:1. Raised to ~0.72 alpha (~5.6:1).  */
.text-navy\/45{color:rgb(13 43 92 / .72)}
.text-navy\/50{color:rgb(13 43 92 / .72)}

/* [3] Touch targets — min 44x44 (was 38x19 / 27x19 / 56x25 / auto x23).
   Hit area is expanded with a transparent ::after so the *visual* size
   stays exactly as designed — no chunky buttons, no layout shift.
   The toggle gap widens to 12px so the two hit boxes never overlap
   (centres end up 44.3px apart) and to satisfy the 8px spacing rule.  */
[aria-label="English"],[aria-label="\0627\0644\0639\0631\0628\064A\0629"],
button[aria-label^="Copy"],button[aria-label^="\0646\0633\062E"],
a[href^="tel:"],a[href^="mailto:"]{position:relative}
[aria-label="English"]::after,[aria-label="\0627\0644\0639\0631\0628\064A\0629"]::after,
button[aria-label^="Copy"]::after,button[aria-label^="\0646\0633\062E"]::after,
a[href^="tel:"]::after,a[href^="mailto:"]::after{
  content:"";position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);
  width:100%;height:100%;min-width:44px;min-height:44px}
/* Widen the toggle gap so the expanded hit boxes sit side by side. */
.fixed.right-5.top-5>div{gap:12px}
/* The two contact CTAs are already >=44px — no expansion needed. */
a.btn{position:static}
a.btn::after{content:none}

/* [4] Tap responsiveness — removes the 300ms delay and the flashing
   grey iOS tap highlight (we supply our own press state below).        */
a,button,[role="button"]{touch-action:manipulation;-webkit-tap-highlight-color:transparent}

/* [5] Press feedback — the design only defined :hover, which never fires
   on touch, so taps felt dead. Opacity/colour only: no layout shift.   */
@media (hover:none){
  a.btn:active,button:active{opacity:.72;transition:opacity 120ms ease-out}
  button[aria-label^="Copy"]:active,button[aria-label^="نسخ"]:active{
    border-color:rgb(13 43 92 / .5);color:rgb(13 43 92)}
}

/* [6] Safe areas — the fixed language toggle sat at a flat 20px inset and
   could collide with the notch / Dynamic Island, notably in landscape.  */
.fixed.right-5.top-5{
  top:max(1.25rem,env(safe-area-inset-top));
  right:max(1.25rem,env(safe-area-inset-right))}
@media (min-width:640px){
  .fixed.right-5.top-5{
    top:max(2rem,env(safe-area-inset-top));
    right:max(2rem,env(safe-area-inset-right))}}

/* [7] Legibility — 10px uppercase at 0.26em tracking is under the 12px
   floor. Nudged up on small screens only; desktop keeps the fine look.  */
@media (max-width:639px){
  .text-\[0\.625rem\]{font-size:.6875rem}
}

/* ── [8] Section navigation ─────────────────────────────────────────────
   A centred floating pill rather than a full-width bar: the site already
   fixes a section indicator top-left (z-8) and the language toggle
   top-right (z-70). Centring clears both, so neither has to move.
   z-index 65 keeps us above the hero (z-2) but under the toggle.      */
.qj-nav{
  position:fixed;top:max(.875rem,env(safe-area-inset-top));left:50%;
  transform:translateX(-50%);z-index:65;
  display:flex;align-items:center;
  font-family:var(--font-dm-sans,ui-sans-serif,system-ui,sans-serif)}
.qj-nav-list{
  display:flex;align-items:center;gap:2px;list-style:none;margin:0;padding:4px;
  border:1px solid rgb(255 255 255 / .16);border-radius:2px;
  background:rgb(13 43 92 / .62);backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  transition:background 300ms ease,border-color 300ms ease}
.qj-nav.qj-scrolled .qj-nav-list{background:rgb(13 43 92 / .82);border-color:rgb(255 255 255 / .22)}
.qj-nav-list>li{position:relative}
.qj-nav-link{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-height:44px;padding:0 14px;border:0;background:none;cursor:pointer;
  font-size:.6875rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:rgb(255 255 255 / .92);border-radius:2px;
  transition:color 240ms ease,background 240ms ease;white-space:nowrap}
.qj-nav-link:hover{color:#fff;background:rgb(255 255 255 / .08)}
.qj-nav-link.qj-active{color:#fff;background:rgb(255 255 255 / .12)}
.qj-nav-link:focus-visible,.qj-panel-link:focus-visible,.qj-menu-btn:focus-visible,
.qj-sub-link:focus-visible{outline:2px solid #7eb5a8;outline-offset:2px}
.qj-caret{width:0;height:0;border-left:3.5px solid transparent;border-right:3.5px solid transparent;
  border-top:4px solid currentColor;opacity:.7;transition:transform 240ms ease}
[data-menu].qj-open .qj-caret{transform:rotate(180deg)}

/* Elevators dropdown */
.qj-sub{
  position:absolute;top:calc(100% + 6px);inset-inline-start:0;min-width:210px;
  list-style:none;margin:0;padding:4px;z-index:80;
  border:1px solid rgb(255 255 255 / .18);border-radius:2px;
  background:rgb(9 30 66 / .96);backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  opacity:0;visibility:hidden;transform:translateY(-4px);
  transition:opacity 200ms ease,transform 200ms ease,visibility 200ms}
[data-menu].qj-open .qj-sub{opacity:1;visibility:visible;transform:none}
.qj-sub-link{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  min-height:44px;padding:0 12px;text-decoration:none;border-radius:2px;
  font-size:.6875rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  color:rgb(255 255 255 / .8);transition:color 200ms ease,background 200ms ease}
.qj-sub-link:hover{color:#fff;background:rgb(255 255 255 / .1)}

/* Unconfigured configurator: visible but inert, never a dead link. */
.qj-soon{cursor:default;color:rgb(255 255 255 / .58)}
.qj-soon:hover{background:none;color:rgb(255 255 255 / .58)}
.qj-soon-tag{
  font-size:.5625rem;letter-spacing:.1em;padding:2px 6px;border-radius:2px;
  background:rgb(126 181 168 / .18);color:#7eb5a8;text-transform:lowercase}

/* Compact trigger + panel (small screens) */
.qj-menu-btn{
  display:none;align-items:center;gap:8px;min-height:44px;padding:0 14px;
  border:1px solid rgb(255 255 255 / .16);border-radius:2px;cursor:pointer;
  background:rgb(13 43 92 / .68);backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  font-size:.6875rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:rgb(255 255 255 / .85)}
.qj-menu-bars{position:relative;width:14px;height:9px;flex:0 0 14px}
.qj-menu-bars::before,.qj-menu-bars::after{
  content:"";position:absolute;left:0;width:100%;height:1px;background:currentColor}
.qj-menu-bars::before{top:0}.qj-menu-bars::after{bottom:0}
.qj-panel{
  position:fixed;top:calc(max(.875rem,env(safe-area-inset-top)) + 56px);
  left:50%;transform:translateX(-50%) translateY(-6px);
  width:min(300px,calc(100vw - 2rem));z-index:80;
  border:1px solid rgb(255 255 255 / .18);border-radius:2px;
  background:rgb(9 30 66 / .97);backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  opacity:0;visibility:hidden;transition:opacity 220ms ease,transform 220ms ease,visibility 220ms}
.qj-panel-open{opacity:1;visibility:visible;transform:translateX(-50%)}
.qj-panel-list{list-style:none;margin:0;padding:6px}
.qj-panel-link{
  display:flex;align-items:center;justify-content:space-between;width:100%;
  min-height:48px;padding:0 14px;border:0;background:none;cursor:pointer;
  text-align:start;text-decoration:none;border-radius:2px;
  font-size:.75rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  color:rgb(255 255 255 / .82)}
.qj-panel-link:hover,.qj-panel-link:active{background:rgb(255 255 255 / .09);color:#fff}
.qj-panel-head{
  padding:14px 14px 6px;font-size:.5625rem;letter-spacing:.24em;text-transform:uppercase;
  color:rgb(255 255 255 / .62)}
.qj-panel-sub{padding-inline-start:26px}

@media (max-width:900px){
  .qj-nav-list{display:none}
  .qj-menu-btn{display:inline-flex}
}
@media (prefers-reduced-motion:reduce){
  .qj-nav-list,.qj-sub,.qj-panel,.qj-caret,.qj-nav-link{transition:none}
}