/* ===========================================================================
   Section 10 — FOOTER

   Geometry inherited from the measured Aeline footer (card radius 24, padding
   40, 80px gutter, 48px link rows, 44px legal row). What is NOT inherited is
   its content: the newsletter field is gone (there is no list to sign up to)
   and a contact column took its place, so the vertical budget is now two rows
   instead of three and the card height falls out of the copy.

   Written to work in both directions from one stylesheet:
     - no physical properties anywhere; margin-inline / padding-inline /
       inset-inline only.
     - no arrows or chevrons in this block at all, so nothing needs mirroring.
       The pin and the handset are objects, not direction indicators, and are
       deliberately left alone under RTL.
     - every positive letter-spacing is zeroed under [dir="rtl"]: positive
       tracking pulls Arabic letters apart at the joins and the word stops
       being a word.
     - the phone number is wrapped in <bdi dir="ltr"> in the markup, which is
       the only place that problem can be fixed. CSS cannot reorder it.

   Nothing here uses [data-rise]: this block ships on every page of the site,
   and a page without motion.js would leave a data-rise footer stuck at
   opacity 0. Reuse beats consistency for the one section that is everywhere.
   =========================================================================== */

.ftr {
  padding: 12px;
  background: #fff;
  scroll-margin-block-start: 90px;      /* the nav is fixed; #contact clears it */
}

.ftr__card {
  background: var(--ink);
  border-radius: 24px;
  padding: 40px;                        /* content box = --container at 1440 */
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* -- row 1 --------------------------------------------------------------- */

/* Two equal halves with an 80px gutter, as measured: the copy column is
   always exactly (content - 80) / 2. */
.ftr__top {
  display: flex;
  align-items: flex-start;
  gap: 80px;
}
.ftr__intro,
.ftr__nav { flex: 1 1 0; min-width: 0; }

.ftr__brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ftr__mark { width: 96px; height: 27px; flex: none; color: #fff; }

.ftr__word {
  font-family: var(--wordmark);
  font-size: 24px;
  line-height: 28.8px;
  font-weight: 400;
  letter-spacing: -0.06em;              /* -1.44px at 24px */
  color: #fff;
}
/* Inter carries no Arabic, so the wordmark falls back to the UI sans here.
   -1.44px of tracking on top of that closes the counters and crowds the
   joins, and Arabic needs the extra leading at this size. */
[dir="rtl"] .ftr__word { letter-spacing: 0; line-height: 34px; }

.ftr__tagline {
  margin-block-start: 14px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: rgba(255, 255, 255, 0.55);
}
[dir="rtl"] .ftr__tagline { line-height: 24px; }

/* text-wrap:balance is measured, not taste: the box is 628px wide and the
   live line boxes come back short, so the browser's default greedy break
   leaves a visibly ragged last line. */
.ftr__desc {
  margin-block-start: 20px;
  max-width: var(--measure-wide);
  text-wrap: balance;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  letter-spacing: -0.02em;              /* -0.32px */
  color: rgba(255, 255, 255, 0.78);
}
/* Arabic sits taller in the em box than Latin; 24px is tight for it. */
[dir="rtl"] .ftr__desc { line-height: 28px; }

/* The columns are pushed to the far edge of their half, not stretched. In a
   flex row, flex-end follows `direction`, so this is the container edge in
   both languages without a second rule. */
.ftr__nav {
  display: flex;
  justify-content: flex-end;
  gap: 64px;
}

.ftr__col { min-width: 0; }
.ftr__col--contact { flex: 0 1 320px; }

/* The eyebrow treatment without the mono face: Geist Mono has no Arabic and
   falls back to a system monospace, which is the wrong voice for "الموقع".
   Same family as the body text, told apart by size, weight and colour. */
.ftr__colTitle {
  padding-inline: 20px;                 /* aligns with the link labels below */
  font-family: var(--sans);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}
[dir="rtl"] .ftr__colTitle {
  letter-spacing: 0;                    /* positive tracking breaks the joins */
  text-transform: none;
}

.ftr__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ftr__addr,
.ftr__list {
  margin-block-start: 12px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.ftr__addr { font-style: normal; }      /* <address> is italic by default */

/* The hit area is 48px tall and 20px wider than the label on each side. */
.ftr__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  padding: 12px 20px;
  border-radius: 999px;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: #fff;
  transition: background-color .25s;
}
.ftr__link:hover,
.ftr__link:focus-visible { background: rgba(255, 255, 255, 0.07); }
/* The roll window is overflow:hidden, so the line box is also a clip box.
   Measured, an Arabic label leaves 1px of headroom above and 2px below inside
   a 24px window, which is close enough to a clipped descender that the extra
   leading is worth the 4px it adds to the row. */
[dir="rtl"] .ftr__link { line-height: 28px; }

/* Every footer label is carried twice, the copy sitting exactly one
   line-height below the original, and rolls up on hover. The movement is
   vertical, so it needs no RTL variant. */
.ftr__roll { display: block; height: 24px; overflow: hidden; }
.ftr__roll i {
  display: block;
  font-style: normal;
  transition: transform .42s cubic-bezier(.22, .61, .36, 1);
}
.ftr__link:hover .ftr__roll i,
.ftr__link:focus-visible .ftr__roll i { transform: translateY(-24px); }

/* the window and the travel must stay equal to the line-height, or the roll
   stops one copy short and shows a sliver of the other */
[dir="rtl"] .ftr__roll { height: 28px; }
[dir="rtl"] .ftr__link:hover .ftr__roll i,
[dir="rtl"] .ftr__link:focus-visible .ftr__roll i { transform: translateY(-28px); }

/* -- the contact column -------------------------------------------------- */

.ftr__item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 20px;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.02em;
  color: rgba(255, 255, 255, 0.72);
}
[dir="rtl"] .ftr__item { line-height: 28px; }

.ftr__icon {
  width: 20px;
  height: 20px;
  flex: none;
  margin-block-start: 2px;
  color: var(--lime-soft);
  opacity: .85;
}
/* on the phone row the icon is centred against a single line, not a block */
.ftr__link--tel .ftr__icon { margin-block-start: 0; }

/* the tel: link never wraps, so the roll can keep its fixed height */
.ftr__link--tel { white-space: nowrap; }

/* -- row 2, legal -------------------------------------------------------- */

.ftr__legal {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 24px;
}
/* The reference grey is #7b7b7b, which is 4.4:1 on --ink and fails AA for
   14px text. This is the same weight of grey, raised over the line. */
.ftr__legal p {
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: rgba(255, 255, 255, 0.55);     /* 6.2:1 on #131313 */
}
[dir="rtl"] .ftr__legal p { line-height: 24px; }

/* ======================================================= RESPONSIVE ==== */

/* 1280: the halves narrow but keep the split, as measured. Only the gutter
   between the two link columns gives, because the contact column now holds a
   four-part street address that the reference footer never had. */
@media (max-width: 1279px) {
  .ftr__top { gap: 56px; }
  .ftr__nav { gap: 40px; }
  .ftr__col--contact { flex: 0 1 300px; }
}

/* 1024: below this the address column and the description are fighting over
   the same 350-odd pixels, so the row stacks and each gets the full width. */
@media (max-width: 1024px) {
  .ftr__top { flex-direction: column; gap: 48px; }
  /* Stacked, the columns sit under the copy rather than beside it, so the
     20px optical inset that the link pills need now reads as a misalignment
     against the description. Pull the whole block back by exactly that. */
  .ftr__nav { justify-content: flex-start; gap: 80px; margin-inline-start: -20px; }
  .ftr__col--contact { flex: 0 1 420px; }
}

/* 810: the card drops to a 16px radius with 32px/16px padding, the block gap
   opens to 48px, and the links lose their pill padding for plain lines. With
   the padding gone the 20px optical inset goes with it, so the titles and the
   address rows lose theirs too or the column stops being a column. */
@media (max-width: 809px) {
  .ftr { padding: 8px; }
  .ftr__card { border-radius: 16px; padding: 32px 16px; gap: 48px; }

  .ftr__nav { flex-direction: column; gap: 40px; margin-inline-start: 0; }
  .ftr__col--contact { flex: 0 1 auto; }

  .ftr__colTitle,
  .ftr__item { padding-inline: 0; }
  .ftr__item { padding-block: 0; }
  .ftr__list, .ftr__addr { gap: 20px; }

  .ftr__link { padding: 0; border-radius: 6px; }
  .ftr__link:hover,
  .ftr__link:focus-visible { background: none; text-decoration: underline; }
}

/* The [dir="rtl"] roll rules above are one selector heavier than these, so a
   plain reset here would lose to them and the Arabic footer would keep
   rolling with motion switched off. Both directions are stated. */
@media (prefers-reduced-motion: reduce) {
  .ftr__roll i { transition: none; }
  .ftr__link:hover .ftr__roll i,
  .ftr__link:focus-visible .ftr__roll i,
  [dir="rtl"] .ftr__link:hover .ftr__roll i,
  [dir="rtl"] .ftr__link:focus-visible .ftr__roll i { transform: none; }
}