/* shared by every page of every site: tokens, type, demo strip, nav, language switch.
   Colours come from the site's theme (site.js sets them on :root before first paint). */
@view-transition { navigation: auto; }

:root {
  --accent: #c5745f;
  --accent-deep: #9c4f3b;
  --accent-light: #e7a38c;
  --paper: #fbf1e3;
  --card: #f4d8b2;
  --ink: #2e160b;
  --muted: #6e4a36;
  --cream: #fff6ea;
  --line: color-mix(in srgb, var(--ink) 12%, transparent);

  --font-en-display: "Fraunces", Georgia, serif;
  --font-en: "Manrope", system-ui, sans-serif;
  --font-ar-display: "Lalezar", "Alexandria", system-ui, sans-serif;
  --font-ar: "Alexandria", system-ui, sans-serif;
  --font-display: var(--font-en-display);
  --font: var(--font-en);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --margin: clamp(16px, 3vw, 48px);
}
:lang(ar) { --font-display: var(--font-ar-display); --font: var(--font-ar); }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font); -webkit-font-smoothing: antialiased; color-scheme: light; }
img, svg { display: block; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; }
button { border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid currentColor; outline-offset: 4px; border-radius: 10px; }

/* swapping language: text dips out and back in */
[data-i18n] { transition: opacity 200ms ease, filter 200ms ease; }
.is-swapping [data-i18n], .is-swapping .swap-all { opacity: 0; filter: blur(4px); }
.swap-all { transition: opacity 200ms ease, filter 200ms ease; }

/* demo strip */
.demo {
  position: relative; z-index: 20; margin: 0;
  text-align: center; font-size: 13px; font-weight: 600; line-height: 1.4;
  padding: 7px 16px; background: color-mix(in srgb, var(--ink) 90%, transparent); color: var(--cream);
}

/* nav */
.nav {
  position: relative; z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px var(--margin);
  view-transition-name: nav;
}
.brand { display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: 15px; letter-spacing: 0.02em; }
.badge {
  width: 46px; height: 46px; border-radius: 50%; flex: none; overflow: hidden;
  display: grid; place-items: center; background: var(--logo-bg, var(--accent));
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.12);
  view-transition-name: badge;
}
.badge img { width: var(--logo-size, 58%); height: auto; max-height: 80%; object-fit: contain; }
.brand small { display: block; font-weight: 500; font-size: 12px; opacity: 0.75; letter-spacing: 0; }

.links { display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--pill, rgba(255, 246, 234, 0.18)); }
.links a { padding: 9px 18px; border-radius: 999px; font-size: 14px; font-weight: 600; transition: background-color 180ms ease, color 180ms ease; }
.links a[aria-current="page"] { background: var(--pill-on, var(--cream)); color: var(--pill-on-ink, var(--ink)); }
@media (hover: hover) and (pointer: fine) { .links a:not([aria-current]):hover { background: var(--pill, rgba(255, 246, 234, 0.18)); } }

.nav-end { display: flex; align-items: center; gap: 10px; }

/* language switch: two options, a thumb slides under the active one */
.lang {
  position: relative; display: grid; grid-template-columns: 1fr 1fr;
  padding: 4px; border-radius: 999px; background: var(--pill, rgba(255, 246, 234, 0.18));
  direction: ltr; /* EN stays on the left in both languages, so the thumb never jumps sides */
}
.lang button {
  position: relative; z-index: 1; min-width: 50px; min-height: 38px; padding: 0 12px;
  border-radius: 999px; font-size: 14px; font-weight: 700;
  transition: color 240ms ease;
}
.lang button[data-lang="ar"] { font-family: var(--font-ar); }
.lang button[aria-pressed="true"] { color: var(--pill-on-ink, var(--ink)); }
.lang .thumb {
  position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px);
  border-radius: 999px; background: var(--pill-on, var(--cream));
  transition: transform 420ms var(--ease-expo);
}
:lang(ar) .lang .thumb { transform: translateX(100%); }
.lang button:active { transform: scale(0.95); }

.order {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 0 22px; border-radius: 999px;
  background: var(--btn, var(--ink)); color: var(--btn-ink, var(--cream));
  font-weight: 700; font-size: 15px; white-space: nowrap;
  transition: transform 140ms var(--ease-out), filter 180ms ease, background-color 180ms ease;
}
.order.ghost { background: transparent; color: inherit; box-shadow: inset 0 0 0 2px currentColor; }
.order svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.order:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .order:hover { filter: brightness(1.18); }
  .order.ghost:hover { filter: none; background: color-mix(in srgb, currentColor 12%, transparent); }
}

@media (max-width: 760px) {
  .nav { padding-block: 12px; gap: 10px; }
  .nav .order, .brand > span:not(.badge) { display: none; }
  .badge { width: 42px; height: 42px; }
  .links a { padding: 8px 12px; font-size: 13px; }
  .lang button { min-width: 42px; padding: 0 9px; font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  [data-i18n], .swap-all, .lang .thumb { transition: none; }
  .is-swapping [data-i18n], .is-swapping .swap-all { filter: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation-duration: 0s !important; }
}