/* ============================================================
   HAMZA MOHAMMED TRADING - right-to-left overrides
   Loaded on top of site.css for the Arabic site only
   (page.includeCSS.rtl, guarded by [siteLanguage("languageId") == 1]).

   site.css is left-to-right throughout: the side rail is pinned
   left, the top bar starts at var(--rail) from the left, and the
   -31.5deg skew that carries the brand always leans the same way.
   Mirroring means flipping the axis, not the skew - the shape is
   part of the identity and stays as drawn.
   ============================================================ */

body{
  padding-left:0;
  padding-right:var(--rail);
  font-family:"Noto Kufi Arabic",var(--b),system-ui,sans-serif;
  line-height:1.9;
}

/* Arabic headings: Kufi has no heavy display cut, so lean on weight
   and drop the wide tracking that only works for Latin caps. */
h1,h2,h3,h4,.tag,.bt,.quote,.tnav a,.pno,.n,.fld label,.rail-name{
  font-family:"Noto Kufi Arabic",var(--d),system-ui,sans-serif;
  letter-spacing:0;
}
h1,h2{line-height:1.25}

/* --- side rail: right edge --- */
.rail{
  left:auto;
  right:0;
  border-right:0;
  border-left:1px solid rgba(255,255,255,.07);
}

/* --- top bar and mobile sheet follow the rail ---
   No flex-direction here on purpose. dir="rtl" already runs the main
   axis right to left, so the DOM order (lock, nav, quote) lays itself
   out correctly. Adding row-reverse on top flips it a second time and
   lands the logo on the wrong edge. */
.top{
  left:0;
  right:var(--rail);
  justify-content:flex-start;
}
.sheet{inset:0 var(--rail) 0 0}

/* --- underlines, rules and reveals start from the right --- */
.tnav a::after,
.card::after,
.prow::after{transform-origin:right}
.tnav a:hover::after,.tnav a.on::after{transform:skewX(-31.5deg) scaleX(1)}

/* --- wipes travel the other way --- */
.quote::before,
.bt-o::before,
.bt-g::before,
.bt-n::before{transform:translateX(102%) skewX(-31.5deg)}
.quote:hover::before,
.bt-o:hover::before,
.bt-g:hover::before,
.bt-n:hover::before{transform:translateX(0) skewX(-31.5deg)}

/* --- hero footer dividers --- */
.hfi:first-child{padding-left:var(--pad);padding-right:0}
.hfi+.hfi::before{left:auto;right:0}

/* --- lists and quotes --- */
.ab-list,.ce-bodytext ul{padding-left:0;padding-right:20px}
.crumb{direction:rtl}
address{font-style:normal}

/* --- the arrow in the project index points the other way --- */
.irow .ar{transform:scaleX(-1)}

/* --- floating WhatsApp button --- */
.wa{right:auto;left:22px}

/* --- forms --- */
.form-errors{border-left:0;border-right:3px solid var(--orange)}
.typo3-messages .alert{border-left:0;border-right:3px solid var(--orange)}

/* --- numbers stay latin, and stay left to right inside RTL text --- */
.num,.hfi b,.fgi b,.ab-num,.tbl td:first-child,.tbl th:first-child{
  direction:ltr;
  unicode-bidi:isolate;
}

@media (max-width:900px){
  .wa{left:16px;right:auto}
}

/* --- additions for the dynamic build --- */
.skip:focus{left:auto;right:var(--rail)}
.form-errors{border-left:0;border-right:3px solid var(--orange)}

/* ============================================================
   Motion layer and the home projects showcase, mirrored.
   Same principle as above: flip the axis, keep the skew.
   ============================================================ */

/* Progress hairline runs from the right. */
.sprog{ left:0; right:var(--rail); transform-origin:right center }

/* Heading wipes come from the right. */
.rv h2,.rv h3{ clip-path:inset(0 0 0 100%) }
.rv.in h2,.rv.in h3{ clip-path:inset(0 0 0 0) }

/* The showcase: photo panel and index swap sides, and the
   hover shift and arrow travel the other way. */
.pshow-frame{ clip-path:polygon(0 0, 91% 0, 100% 100%, 9% 100%) }
.pshow-cap{ padding-left:0; padding-right:9% }
.pshow-row::after{ transform-origin:right center }
.pshow-row.active .pshow-body h3,
.pshow-row:hover .pshow-body h3,
.pshow-row.active .pshow-body .m,
.pshow-row:hover .pshow-body .m{ transform:translateX(-10px) }
.pshow-row.active .ar,
.pshow-row:hover .ar{ transform:translateX(-6px) scaleX(-1) }
.pshow-row .ar{ transform:scaleX(-1) }
.pshow-all::after{ transform-origin:left center }
.pshow-all:hover::after{ transform-origin:right center }
.pshow-all i{ transform:scaleX(-1) }
.pshow-all:hover i{ transform:translateX(-6px) scaleX(-1) }

@media (max-width:1000px){
  .pshow-thumb{ clip-path:polygon(0 0, 88% 0, 100% 100%, 12% 100%) }
}
@media (max-width:760px){
  .sprog{ left:0; right:var(--rail) }
}

/* Depth layer, mirrored: the bloom and the ghost numerals move to the
   other side, and the scroll cue anchors to the right. */
.px::after,.pd::after{ left:auto; right:-10% }
.prow::before{ right:auto; left:2% }
.prow:hover::before{ transform:translateY(-50%) translateX(10px) }
.card{ clip-path:polygon(22px 0, 100% 0, 100% 100%, 0 100%, 0 22px) }
.card .n::after{ left:auto; right:0 }
.scroll-cue{ left:auto; right:var(--pad) }
.scroll-cue i::after{ transform-origin:right center }

/* Full-width bar and the rail beneath it, mirrored. */
.top{ left:0; right:0 }
.sprog{ left:0; right:0; transform-origin:right center }


/* The lock-up belongs on the start side, which in Arabic is the right —
   the same edge as the rail. The reference pushes it with margin-right:auto,
   which in a row-reverse bar drives it the wrong way. */
.top .lock{ margin-right:0; margin-left:auto }

/* Full-bleed heroes, mirrored. */
.hero,.phero{ margin-left:0; padding-left:0; margin-right:calc(var(--rail) * -1); padding-right:var(--rail) }
.hero-foot{ left:0; right:var(--rail) }

/* --- hero imagery mirrors too -----------------------------------------
   In Arabic the text runs from the right, so the photograph has to move
   to the left or the headline lands on top of it. The diagonal cut and
   the gradient that fades the photo into the navy both flip with it —
   the cut is mirrored point for point, not re-angled, so the edge keeps
   the same slope as the rest of the brand. */
.hero-img{
  inset:0 auto 0 0;
  clip-path:polygon(0 0, 70% 0, 100% 100%, 0 100%);
}
.hero-img::after{
  background:linear-gradient(260deg, var(--navy) 0%, rgba(18,35,63,.72) 34%, rgba(18,35,63,.18) 100%);
}
.hero-img::before{
  background:radial-gradient(ellipse 90% 80% at 40% 45%, transparent 35%, rgba(11,22,38,.55) 100%);
}
.phero-img{
  inset:0 auto 0 0;
  clip-path:polygon(0 0, 66% 0, 100% 100%, 0 100%);
}
.phero-img::after{
  background:linear-gradient(260deg, var(--navy) 2%, rgba(18,35,63,.75) 40%, rgba(18,35,63,.25) 100%);
}

/* --- no side rail ----------------------------------------------------
   --rail is 0, so the offsets collapse on their own. These just clear
   the mirrored bleed and keep the language switch on the correct edge. */
.hero,.phero{ margin-right:0; padding-right:0 }
.hero-foot{ left:0; right:0 }
.tlang{ flex-direction:row-reverse }

/* Figures band, mirrored: dividers and the label tick swap sides. */
.fgi:first-child{ padding-left:clamp(18px,2.2vw,38px); padding-right:0 }
.fgi + .fgi::after{ left:auto; right:0 }
.fgi span:not(.num){ padding-left:0; padding-right:22px }
.fgi span:not(.num)::before{ left:auto; right:0 }
@media (max-width:760px){
  .fgi:first-child{ padding-right:0 }
}

/* Years plate moves to the other corner, corner cut mirrored. */
.ab-num{ right:auto; left:-5%; clip-path:polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%) }
.ab-num em{ margin-left:0; margin-right:.04em }
@media (max-width:1100px){ .ab-num{ left:0; right:auto } }