/*
 * giladkenan.art — /assets/i18n-rtl.css
 * Generated by tools/i18n-build.mjs from the multilingual-pilot template
 * (vendored at tools/i18n/rtl-logical-properties.css) with site adaptations
 * appended.
 * Linked ONLY from /he/ and /ar/ editions. Do not hand-edit; re-run the builder.
 */

/*
 * Gilad Kenan multilingual pilot — RTL/logical-properties template
 *
 * Illustrative reusable patterns only. Adapt component-by-component after
 * reviewing intent; do not copy this file over production CSS wholesale.
 *
 * Routing invariant:
 *   /ar/        = Arabic-language homepage
 *   /ar-studio  = augmented-reality experience
 *
 * Never mirror an entire document, artwork, image, video, WebGL canvas,
 * 3D scene, camera interaction, technical diagram, or AR world.
 */

:root {
  --font-display-en: "Bodoni Moda", "Cormorant Garamond", Georgia, serif;
  --font-interface-en: "Space Grotesk", Arial, sans-serif;

  --font-display-he: "Frank Ruhl Libre", "Noto Serif Hebrew", serif;
  --font-interface-he: "Heebo", "Noto Sans Hebrew", sans-serif;

  --font-display-ar: "Noto Serif Arabic", "Amiri", "Noto Naskh Arabic", serif;
  --font-interface-ar: "IBM Plex Sans Arabic", "Noto Sans Arabic", sans-serif;

  --font-display: var(--font-display-en);
  --font-interface: var(--font-interface-en);
  --leading-display: 1.08;
  --leading-body: 1.6;
  --tracking-display: 0.02em;
  --tracking-interface: 0.08em;

  --page-gutter: clamp(1rem, 3vw, 3rem);
  --control-min-block-size: 2.75rem;
  --focus-ring: 0 0 0 3px rgb(255 255 255 / 0.9),
    0 0 0 5px rgb(24 24 24 / 0.9);
  --drawer-size: min(28rem, 92vi);
  --drawer-offscreen: 100%;
  --motion-fast: 180ms;
  --motion-standard: 320ms;
}

html:lang(he) {
  --font-display: var(--font-display-he);
  --font-interface: var(--font-interface-he);
  --leading-display: 1.18;
  --leading-body: 1.72;
  --tracking-display: normal;
  --tracking-interface: normal;
}

html:lang(ar) {
  --font-display: var(--font-display-ar);
  --font-interface: var(--font-interface-ar);
  --leading-display: 1.3;
  --leading-body: 1.84;
  --tracking-display: normal;
  --tracking-interface: normal;
}

html {
  font-family: var(--font-interface);
  font-synthesis: none;
}

body {
  margin: 0;
  line-height: var(--leading-body);
  text-align: start;
}

h1,
h2,
h3,
.display-type {
  font-family: var(--font-display);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}

.interface-label,
button,
input,
select,
textarea {
  font-family: var(--font-interface);
  letter-spacing: var(--tracking-interface);
}

html:lang(he) :where(.uppercase, .interface-label, button),
html:lang(ar) :where(.uppercase, .interface-label, button) {
  letter-spacing: normal;
  text-transform: none;
}

/* Page and content flow */

.i18n-shell {
  box-sizing: border-box;
  inline-size: min(100%, 90rem);
  margin-inline: auto;
  padding-inline: var(--page-gutter);
}

.prose {
  max-inline-size: 68ch;
  margin-inline: 0 auto;
}

.stack {
  display: grid;
  gap: var(--stack-gap, 1rem);
}

.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cluster-gap, 0.75rem);
}

.split {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, 2vi, 1.5rem);
  padding-inline: var(--page-gutter);
  text-align: start;
}

.site-nav__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-inline-start: auto;
}

.language-switcher {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.125rem;
}

.language-switcher a {
  display: inline-grid;
  min-inline-size: var(--control-min-block-size);
  min-block-size: var(--control-min-block-size);
  padding-inline: 0.625rem;
  place-items: center;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.22em;
}

.language-switcher a[aria-current="page"] {
  text-decoration-line: underline;
}

/* Drawer anchored to logical inline end. The sign of the physical transform
 * is the one place direction must be explicit: CSS transforms are not logical.
 */

.drawer {
  position: fixed;
  inset: 0;
  z-index: 100;
  visibility: hidden;
  pointer-events: none;
}

.drawer.is-open {
  visibility: visible;
  pointer-events: auto;
}

.drawer__backdrop {
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / 0.58);
  opacity: 0;
  transition: opacity var(--motion-standard) ease;
}

.drawer__panel {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  box-sizing: border-box;
  inline-size: var(--drawer-size);
  max-inline-size: 100%;
  padding-block: 1.25rem;
  padding-inline: clamp(1rem, 4vi, 2rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: Canvas;
  border-inline-start: 1px solid currentColor;
  transform: translateX(var(--drawer-offscreen));
  transition: transform var(--motion-standard) ease;
}

html[dir="rtl"] {
  --drawer-offscreen: -100%;
}

.drawer.is-open .drawer__backdrop {
  opacity: 1;
}

.drawer.is-open .drawer__panel {
  transform: translateX(0);
}

.drawer__close {
  display: inline-grid;
  min-inline-size: var(--control-min-block-size);
  min-block-size: var(--control-min-block-size);
  margin-inline-start: auto;
  place-items: center;
}

/* Sheets and callouts */

.side-sheet {
  position: fixed;
  inset-block: 0;
  inset-inline-end: 0;
  inline-size: min(30rem, 100vi);
  padding-block: 1.5rem;
  padding-inline: var(--page-gutter);
  border-inline-start: 1px solid currentColor;
}

.callout {
  padding-block: 1rem;
  padding-inline: 1.25rem;
  border-inline-start: 0.25rem solid currentColor;
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.breadcrumb__separator,
.icon-logical {
  transition: transform var(--motion-fast) ease;
}

html[dir="rtl"] :where(.breadcrumb__separator, .icon-logical) {
  transform: rotate(180deg);
}

/* Apply .icon-logical only to arrows whose meaning is back/forward,
 * previous/next, disclosure, or reading direction. Never put it on logos,
 * play/pause, camera, microphone, volume, fullscreen, or physical diagrams.
 */

.icon-physical,
.brand-logo,
.artwork-media,
.physical-media,
.webgl-surface,
.ar-surface {
  direction: ltr;
}

/* These declarations establish bidi direction only. They deliberately do not
 * override component transforms, matrices, camera controls, or media crops.
 */

.ltr-token,
bdi[dir="ltr"] {
  direction: ltr;
  unicode-bidi: isolate;
}

.ltr-token {
  display: inline-block;
  max-inline-size: 100%;
}

.auto-direction,
bdi[dir="auto"] {
  unicode-bidi: plaintext;
}

.technical-value {
  direction: ltr;
  unicode-bidi: isolate;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Forms */

.form-field {
  display: grid;
  gap: 0.375rem;
  text-align: start;
}

.form-control {
  box-sizing: border-box;
  inline-size: 100%;
  min-block-size: var(--control-min-block-size);
  padding-block: 0.75rem;
  padding-inline: 0.875rem;
  border: 1px solid currentColor;
  border-radius: 0;
  text-align: start;
}

textarea.form-control {
  min-block-size: 9rem;
  resize: block;
}

:where(input[type="email"], input[type="url"], input[type="tel"]) {
  direction: ltr;
  text-align: left;
}

.select-wrap {
  position: relative;
}

.select-wrap select {
  appearance: none;
  padding-inline-end: 2.75rem;
}

.select-wrap__icon {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: 0.875rem;
  pointer-events: none;
  transform: translateY(-50%);
}

.field-error {
  padding-inline-start: 0;
  color: var(--error-color, #a40000);
  text-align: start;
}

/* Gallery controls: visual placement follows reading direction, while stable
 * previous/next IDs and step(-1)/step(+1) semantics stay in JavaScript data.
 */

.gallery-nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, auto));
  justify-content: space-between;
  gap: 1rem;
}

.gallery-nav__control {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-block-size: var(--control-min-block-size);
  padding-inline: 0.75rem;
}

/* Focus, hit targets, and visually hidden content */

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid transparent;
  box-shadow: var(--focus-ring);
}

:where(button, [role="button"], .icon-button) {
  min-inline-size: var(--control-min-block-size);
  min-block-size: var(--control-min-block-size);
}

.visually-hidden {
  position: absolute !important;
  inline-size: 1px !important;
  block-size: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

@media (max-width: 40rem) {
  .site-nav {
    gap: 0.5rem;
  }

  .language-switcher {
    max-inline-size: 100%;
  }

  .gallery-nav {
    inline-size: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast: 0ms;
    --motion-standard: 0ms;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Do not add global RTL transform rules below this line. Direction-specific
 * exceptions must be local, documented, and backed by visual/interaction QA.
 */

/* ------------------------------------------------------------------ */
/* S145 — RTL overflow law (his iPhone find): hiding helpers offscreen */
/* LEFT creates real scrollable space in RTL (left = the inline-start  */
/* growth side) — iOS then shrinks the whole page to fit and opens a   */
/* void below the footer. Every offscreen helper flips sides in RTL.   */
/* ------------------------------------------------------------------ */
html[dir="rtl"] .skip{left:auto;right:-999px}
html[dir="rtl"] .skip:focus{right:auto;left:14px}
html[dir="rtl"] #c-hp{left:auto!important;right:-6000px!important}
html[dir="rtl"] #sr-cut{left:auto;right:-9999px}
html[dir="rtl"]{overflow-x:clip}

/* ------------------------------------------------------------------ */
/* giladkenan.art adaptations — map the site's typography to the       */
/* locale font stacks. The site sets fonts via --display/--mono/--ui   */
/* on body-level rules, which outrank the template's html rule, so the */
/* locale stacks are re-asserted on the site's own hooks here.         */
/* ------------------------------------------------------------------ */
html:lang(he) body,
html:lang(ar) body {
  font-family: var(--font-interface);
}

html:lang(he) :where(h1, h2, h3, .serif, .ns-t, .sh-title, .brand b, .foot-grid b, .pull, .display-type),
html:lang(ar) :where(h1, h2, h3, .serif, .ns-t, .sh-title, .brand b, .foot-grid b, .pull, .display-type) {
  font-family: var(--font-display);
  letter-spacing: normal;
}

/* Mono-tracked uppercase labels: tracking and uppercase are Latin
 * gestures — neutralize them for Hebrew/Arabic glyphs. Latin brand
 * terms inside keep their form (they are already Latin). */
html:lang(he) :where(.kicker, .meta, .caption, .btn, .nav-cta, .crumbs, .project-meta, .ns-eyebrow, .ns-foot, .legal-line, .brand span, .fact b, figcaption),
html:lang(ar) :where(.kicker, .meta, .caption, .btn, .nav-cta, .crumbs, .project-meta, .ns-eyebrow, .ns-foot, .legal-line, .brand span, .fact b, figcaption) {
  font-family: var(--font-interface);
  letter-spacing: 0.02em;
}