/* =============================================================================
   Shipnex — site chrome: the header and the footer, defined ONCE.

   WHY THIS FILE EXISTS. These two strips were written out longhand in seven
   pages, and seven copies drift. They had drifted: three different footers,
   two different logo components, a blue download button on three pages and an
   orange one on two, a menu whose first item was "الرئيسية" on five pages and
   "التطبيقات" on the homepage, and a footer wordmark that fell back to the body
   font because its rule was named for a component the markup no longer used.
   None of that is visible while reading any single file — each page looks
   internally consistent. It is only visible side by side.

   The homepage is the reference, so every value here is the homepage's value,
   lifted verbatim. Loaded LAST on every page, after the page's own <style>, so
   it settles the chrome and nothing else.

   TOKENS ARE SCOPED TO THE CHROME, not to :root. lib/site.css and index.html
   disagree on a few of them (--ink-2 is #4B5567 there and #48526A here; --wrap
   is 1200/28 there and 1220/30 here). Redefining those globally would repaint
   body text on three pages to fix a nav link. Custom properties inherit, so
   declaring them on header/footer reaches everything inside and nothing else.

   THE ONE THING THAT IS NOT IDENTICAL, DELIBERATELY: the wordmark colour.
   `.light` paints it white, and it belongs on dark ground only — the footer
   everywhere, and the header on the four pages whose bar is dark. On about,
   help and partners the bar is white from the first pixel, and a white
   wordmark there is an invisible logo. Same component, same file, coloured for
   what it sits on. The bar's own background is likewise left to each page: it
   is a property of what scrolls underneath it, not of the header.
   ============================================================================= */

header.nav,
footer {
  --navy: #16213A;
  --navy-deep: #0B1422;
  --navy-700: #243353;
  --orange: #F97316;
  --orange-deep: #E5640A;
  --ink: #101626;
  --ink-2: #48526A;
  --display: 'Fredoka', 'IBM Plex Sans Arabic', sans-serif;
  --ar: 'IBM Plex Sans Arabic', system-ui, sans-serif;
  --r-pill: 999px;

  /* Inherited from body otherwise, and the seven bodies disagree: 1.6, 1.65,
     1.8. Same glyphs at the same size, different line boxes — the wordmark
     measured 37, 38, 41 and 45px tall across the pages, and the footer ended
     up 376 to 397px. Invisible in isolation, and the reason "identical" has to
     be measured rather than looked at. 1.65 is the homepage's. */
  line-height: 1.65;
}

header.nav .wrap,
footer .wrap { max-width: 1220px; margin: 0 auto; padding: 0 30px; }

/* ── Brand lockup ─────────────────────────────────────────────────────────── */
.lockup { display: inline-flex; align-items: center; gap: 11px; }
.lockup .chip { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; padding: 7px; flex: 0 0 auto; }
.lockup .chip.navy { background: var(--navy); }
.lockup .chip.orange { background: var(--orange); }
.lockup .chip img { width: 100%; height: 100%; object-fit: contain; }
.lockup .wm { font-family: var(--display); font-weight: 600; font-size: 23px; letter-spacing: -.01em; }
.lockup .wm .nx { color: var(--orange); }
.lockup.light .wm { color: #fff; }

/* Once the bar turns white under a scrolled page, the ground is light again. */
header.nav.scrolled .lockup.light .wm { color: var(--ink); }
header.nav.scrolled .lockup .chip.navy { background: var(--navy); }

/* ── Header ───────────────────────────────────────────────────────────────── */
.nav-in { display: flex; align-items: center; gap: 26px; height: 78px; }
.nav-links { display: flex; gap: 30px; margin-inline-start: 14px; }
.nav-links a { font-size: 15px; font-weight: 600; color: var(--ink-2); transition: color .15s; white-space: nowrap; }
.nav-links a:hover { color: var(--orange); }
.nav-cta { margin-inline-start: auto; display: flex; align-items: center; gap: 14px; }

/* `on-dark` marks a bar that starts over a dark hero; it says nothing about
   the page below, which is why the background itself stays with the page. */
header.nav.on-dark .nav-links a { color: rgba(255,255,255,.82); }
header.nav.on-dark .nav-links a:hover { color: var(--orange); }
header.nav.on-dark.scrolled .nav-links a { color: var(--ink-2); }

/* The download button, pinned so it cannot go blue again on a page that
   happens to define .btn differently. */
header.nav .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--ar); font-weight: 600; font-size: 15.5px; border: none; cursor: pointer;
  border-radius: var(--r-pill); padding: 15px 28px; white-space: nowrap;
  transition: transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .2s, background .15s, color .15s;
}
header.nav .btn svg { width: 19px; height: 19px; }
header.nav .btn-orange { background:#C2410C;color:#fff; box-shadow: 0 12px 26px rgba(249,115,22,.32); }
header.nav .btn-orange:hover { background: var(--orange-deep); transform: translateY(-3px); }

/* ── Footer ───────────────────────────────────────────────────────────────── */
footer { background: var(--navy-deep); color: #fff; padding: 70px 0 32px; margin-top: 0; border-top: 1px solid var(--navy-700); }
.foot-grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: 36px; margin-bottom: 46px; }
.foot-brand p { color: rgba(255,255,255,.6); font-size: 14.5px; max-width: 300px; margin: 16px 0 0; }
/* line-height because terms.html sets `h1,h2,h3,h4{line-height:1.35}`, which
   beats the inherited value on the element and made its column headings — and
   so its whole footer — 4px shorter than everyone else's. */
.foot-col h4 { font-size: 14px; font-weight: 700; margin: 0 0 17px; line-height: 1.65; }
.foot-col a { display: block; color: rgba(255,255,255,.62); font-size: 14.5px; margin-bottom: 12px; transition: color .15s; }
.foot-col a:hover { color: var(--orange); }

/* Not yet a place to go. A link would be a promise the site cannot keep, so
   this is plain text with the status attached — the same treatment the two
   unreleased apps already get in the column above. */
.foot-soon { display: block; color: rgba(255,255,255,.38); font-size: 14.5px; margin-bottom: 12px; cursor: default; }
.foot-soon small { font-size: 10.5px; font-weight: 700; color: var(--orange); margin-inline-start: 6px; }

.foot-bottom { border-top: 1px solid var(--navy-700); padding-top: 24px; display: flex; justify-content: space-between; align-items: center; color: rgba(255,255,255,.5); font-size: 13.5px; flex-wrap: wrap; gap: 12px; }

/* `.foot-social` is NOT carried over. Four pages defined it, no page has ever
   had the markup — it styled a social row that was never built. */

/* ب١ (owner, 08-21): a MOBILE NAV. Below 900px the links were display:none with NO burger anywhere
   in the DOM (measured live: five links, all 0×0, no toggle) — a phone had no navigation but the
   footer. A checkbox toggle, because lang.js is the only script every page loads, so a CSS-only
   control works on all ten pages without one. Desktop is untouched. */
.nav-cb { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.nav-burger { display: none; }

@media (max-width: 900px) {
  .foot-grid { grid-template-columns: 1fr; }
  .nav-links { display: none; }

  .nav-burger {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 44px; height: 44px; padding: 12px; margin-inline-start: 4px; cursor: pointer;
    border-radius: 10px; color: inherit;
  }
  .nav-burger span { display: block; height: 2px; background: currentColor; border-radius: 2px;
    transition: transform .2s ease, opacity .2s ease; }

  /* Checked → the hidden links become a full-width dropdown under the fixed 78px header. */
  .nav-cb:checked ~ .wrap .nav-links {
    display: flex; flex-direction: column; gap: 2px;
    position: fixed; top: 78px; inset-inline: 0; padding: 12px 22px 22px;
    background: var(--navy); border-top: 1px solid var(--navy-700);
    box-shadow: 0 24px 44px -22px rgba(0,0,0,.65);
  }
  .nav-cb:checked ~ .wrap .nav-links a,
  .nav-cb:checked ~ .wrap .nav-links .langtoggle {
    display: flex; align-items: center; min-height: 44px; padding: 8px 4px;
    font-size: 16px; color: rgba(255,255,255,.92);
  }
  .nav-cb:checked ~ .wrap .nav-links .langtoggle { border: none; opacity: 1; }

  /* Burger → X while open. */
  .nav-cb:checked ~ .wrap .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-cb:checked ~ .wrap .nav-burger span:nth-child(2) { opacity: 0; }
  .nav-cb:checked ~ .wrap .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* The language switch. Styled here rather than inline so both mount points share one rule and the
   nav row keeps its own rhythm — the control sits at the end of the link row, reading as part of
   the navigation rather than as a call to action. */
.langtoggle{font-weight:700;font-size:13px;letter-spacing:.02em;text-decoration:none;
  padding:6px 12px;border-radius:999px;border:1px solid currentColor;opacity:.85;line-height:1.6}
.langtoggle:hover{opacity:1}
.langtoggle-foot{display:inline-block;margin-top:10px;border:none;padding:0;opacity:.75;
  text-decoration:underline;font-weight:600}

/* ب٣ (owner, 08-21): Arabic typography, corrected in ONE place.
   Arabic script is cursive: every heading on the ar pages carries a Latin-display
   letter-spacing (measured live: -0.8px to -0.42px), which pulls the joined letters into
   one another, and the small-caps labels (.eyebrow, .role, .banner .ey) carry a positive
   +.03–.08em that does the same. Tracking is a Latin device; Arabic must not be tracked.
   The headings also sit in a 1.08 line box (measured live on every ar h1/h2/h3) — no room
   for the hamza over an alef or the dots under ي/ج where a heading wraps.
   Scoped to html[lang="ar"] so the English pages keep their Latin display tracking, and
   placed here — the sheet every page loads LAST — so the six drifted inline heading rules
   (1.08 / 1.15 / 1.2, one per page) stop deciding Arabic spacing. h4 is left alone: the
   footer column headings own their own line-height. */
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3,
html[lang="ar"] .eyebrow, html[lang="ar"] .role, html[lang="ar"] .banner .ey {
  letter-spacing: normal;
}
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3 { line-height: 1.25; }