/* ================================================================================================
   Shared shell for the two standalone document pages — privacy-policy.html and support.html.

   These are the URLs Apple and Google require on a listing, so they are also among the first pages
   a store reviewer opens. They carry the landing page's chrome (top bar, language toggle, footer)
   so that following a footer link keeps you inside the same site instead of dropping you onto a
   default browser stylesheet.

   Same rules as index.html: single theme, Arabic first, every colour painted explicitly from a
   token, every layout rule logical so dir="rtl" ⇄ "ltr" costs nothing.

   ⚠ SYNC POINT. The token block below is copied from index.html's inline <style>. The landing page
   keeps its CSS inline on purpose and is not refactored here, so a palette or font-role change has
   to be made in both places. Everything after the token block is unique to these two pages.
   ================================================================================================ */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

:root {
  --maroon:  #551C25;
  --ink:     #2C0F14;
  --rose:    #F2C4CE;
  --rose-dp: #E79FB2;
  --sky:     #C6D6F0;
  --cream:   #FBF2E3;
  --butter:  #F2D888;
  --olive:   #8A8A3C;
  --cherry:  #C4303B;
  --paper:   #FFFDF8;
  --muted:   #6B4A50;

  --f-display: "Baloo Bhaijaan 2", "Outfit", system-ui, sans-serif;
  --f-body:    "Tajawal", "Outfit", system-ui, sans-serif;
  --f-script:  "Aref Ruqaa", "Grand Hotel", Georgia, serif;

  --display-lh: 1.28;
  --script-size: 1em;

  --shadow-card: 0 8px 22px rgba(44, 15, 20, .16);
  --shadow-hard: 5px 5px 0 var(--ink);
}

html[lang="en"] {
  --f-display: "Outfit", system-ui, sans-serif;
  --f-body:    "Outfit", system-ui, sans-serif;
  --f-script:  "Grand Hotel", cursive;
  --display-lh: 1.08;
  --script-size: 1.25em;
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--maroon);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.8;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

:focus-visible {
  outline: 3px solid var(--cherry);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ------------------------------------------------------------------------------------------------
   Shell — full-bleed, matching the landing page. Both used to be a 1080px card inset on a maroon
   table; past ~1300px of viewport that became two wide bands of nothing down either side. The
   reading measure is held by .doc below, not by the shell, so nothing is lost by letting the cream
   run edge to edge — and clicking a footer link no longer makes the frame reappear.
   ------------------------------------------------------------------------------------------------ */
.frame { padding: 0; }

.sheet {
  overflow: clip;
  background: var(--cream);
}

/* ------------------------------------------------------------------------------------------------
   Top bar — identical to the landing page's, except the wordmark leaves for "/" instead of
   scrolling to an anchor on the current page.
   ------------------------------------------------------------------------------------------------ */
.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px clamp(16px, 4vw, 34px);
  background: var(--maroon);
  border-block-end: 2px solid rgba(251, 242, 227, .18);
}
.wordmark {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 1.35rem;
  color: var(--cream);
  text-decoration: none;
  letter-spacing: .01em;
}
/* alt="" on purpose — the wordmark beside it already says the name. The icon is a maroon tile on a
   maroon bar, so a hairline ring is what stops it reading as loose white glyphs. */
.wordmark__mark {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  flex-shrink: 0;
  box-shadow: 0 0 0 1.5px rgba(251, 242, 227, .38);
}
.wordmark small {
  display: block;
  font-family: var(--f-body);
  font-size: .58rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--rose);
  margin-block-start: -2px;
}

.lang {
  display: inline-flex;
  border: 2px solid var(--cream);
  border-radius: 999px;
  overflow: hidden;
  background: transparent;
}
.lang button {
  font-family: "Outfit", system-ui, sans-serif;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .06em;
  padding: .42em 1.05em;
  border: 0;
  background: transparent;
  color: var(--cream);
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.lang button[aria-pressed="true"] { background: var(--cream); color: var(--maroon); }

/* ------------------------------------------------------------------------------------------------
   Masthead — a maroon band carrying the page title, so the document reads as part of the zine
   rather than as a bare text file that happens to share a header.
   ------------------------------------------------------------------------------------------------ */
.masthead {
  background: var(--maroon);
  color: var(--cream);
  padding: clamp(30px, 6vw, 52px) clamp(20px, 5vw, 56px) clamp(34px, 6vw, 56px);
  text-align: center;
}
.masthead .script {
  font-family: var(--f-script);
  font-weight: 400;
  font-size: calc(clamp(1.35rem, 3.4vw, 1.9rem) * var(--script-size));
  line-height: 1.3;
  color: var(--butter);
}
.masthead h1 {
  font-family: var(--f-display);
  font-weight: 800;
  line-height: var(--display-lh);
  font-size: clamp(1.7rem, 4.6vw, 2.6rem);
  margin-block: 6px 14px;
  text-wrap: balance;
}
.updated {
  font-family: var(--f-body);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--rose);
}

/* ------------------------------------------------------------------------------------------------
   The document itself.

   62ch, not the sheet's full 1080px. These are the two pages on the site somebody actually reads
   top to bottom rather than scans, and a line that long is where legal copy loses people.
   ------------------------------------------------------------------------------------------------ */
.doc {
  max-width: 68ch;
  margin-inline: auto;
  padding: clamp(38px, 7vw, 64px) clamp(20px, 5vw, 40px) clamp(52px, 8vw, 80px);
}

.doc > p { margin-block-end: 1.1em; }
.doc .lede { font-size: 1.06rem; color: var(--muted); }

.doc h2 {
  font-family: var(--f-display);
  font-weight: 800;
  line-height: var(--display-lh);
  font-size: clamp(1.25rem, 3vw, 1.6rem);
  margin-block: 2em .7em;
  text-wrap: balance;
}
/* A short cherry rule under each heading — the printed-zine equivalent of a section break, and the
   only thing separating what would otherwise be six identical blocks of text. */
.doc h2::after {
  content: "";
  display: block;
  width: 46px;
  height: 4px;
  border-radius: 999px;
  background: var(--cherry);
  margin-block-start: .45em;
}
.doc h2:first-of-type { margin-block-start: 0; }

.doc h3 {
  font-family: var(--f-display);
  font-weight: 700;
  line-height: var(--display-lh);
  font-size: 1.08rem;
  margin-block-end: .35em;
}

.doc ul { list-style: none; margin-block-end: 1.3em; }
.doc li {
  position: relative;
  padding-inline-start: 1.5em;
  margin-block-end: .6em;
}
/* A rose lozenge rather than a disc: the default marker sits outside the padding box and lands in
   a different place in each direction, and this one is styleable and direction-agnostic. */
.doc li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: .68em;
  width: .5em;
  height: .5em;
  border-radius: 2px;
  background: var(--rose-dp);
  transform: rotate(45deg);
}

.doc a {
  color: var(--cherry);
  text-decoration: none;
  border-block-end: 1.5px solid var(--rose-dp);
  padding-block-end: 1px;
}
.doc a:hover { border-color: var(--cherry); background: var(--butter); }

.doc strong { font-weight: 700; }

/* ------------------------------------------------------------------------------------------------
   Cards inside the document.
   ------------------------------------------------------------------------------------------------ */

/* Contact block. Scalloped like the landing page's cards, and built the same way — keep the two in
   step if either changes.

   TWO pseudo-elements, each inset on ONE axis. The single all-round pseudo is the obvious version
   and it breaks at the corners: the horizontal strips run the full width including the corner
   squares, the vertical strips run the full height including them, and each corner collects a stray
   arc from each direction with the outermost pixel painted by neither. `round` rather than `repeat`
   scales the tile so a whole number of bumps spans each edge, flush into both corners.

   No border-radius: a rounded rect under a straight run of bumps makes the card curve away while
   the scallops keep marching, which is the other half of the same corner problem. */
.card {
  position: relative;
  --sc: 11px;
  --sc-color: var(--butter);
  background: var(--sc-color);
  border-radius: 0;
  padding: 22px clamp(18px, 4vw, 28px);
  margin-block: 1.6em;
  /* drop-shadow, not box-shadow: box-shadow is cast from the rectangular border box and would draw
     a straight edge behind the scallops. This follows the rendered alpha, pseudo-elements included. */
  filter: drop-shadow(0 6px 9px rgba(44, 15, 20, .20));
}
.card::before,
.card::after {
  content: "";
  position: absolute;
  pointer-events: none;
}
.card::before {
  inset: calc(var(--sc) * -1) 0;
  background:
    radial-gradient(circle var(--sc) at 50% 100%, var(--sc-color) 97%, transparent 100%) top    / calc(var(--sc) * 2) var(--sc) round no-repeat,
    radial-gradient(circle var(--sc) at 50% 0,    var(--sc-color) 97%, transparent 100%) bottom / calc(var(--sc) * 2) var(--sc) round no-repeat;
}
.card::after {
  inset: 0 calc(var(--sc) * -1);
  background:
    radial-gradient(circle var(--sc) at 100% 50%, var(--sc-color) 97%, transparent 100%) left   / var(--sc) calc(var(--sc) * 2) no-repeat round,
    radial-gradient(circle var(--sc) at 0 50%,    var(--sc-color) 97%, transparent 100%) right  / var(--sc) calc(var(--sc) * 2) no-repeat round;
}
.card > * { position: relative; }
.card p + p { margin-block-start: .5em; }
.card .mail {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 1.15rem;
  /* The address is Latin script inside an Arabic paragraph; without this the bidi algorithm can
     move the trailing punctuation to the wrong end of it. */
  direction: ltr;
  display: inline-block;
  unicode-bidi: isolate;
}
.card .fine { font-size: .86rem; color: var(--muted); }

/* FAQ entries. Left open rather than collapsed into <details>: this is the page someone lands on
   mid-problem, and browser find-in-page does not search inside a closed disclosure. */
.faq {
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 10px;
  box-shadow: 3px 3px 0 var(--ink);
  padding: 18px clamp(16px, 3.5vw, 24px);
  margin-block-end: 16px;
}
.faq p { font-size: .97rem; }
.faq p + p { margin-block-start: .6em; }

/* A quiet aside — used for the "the Arabic text governs" note, which is true but is not what the
   reader came for. */
.note {
  border-inline-start: 4px solid var(--rose-dp);
  padding-inline-start: 16px;
  font-size: .88rem;
  color: var(--muted);
  margin-block: 1.6em;
}

/* ------------------------------------------------------------------------------------------------
   Footer — identical to the landing page's.
   ------------------------------------------------------------------------------------------------ */
.footer {
  background: var(--ink);
  color: var(--rose);
  padding: 34px clamp(20px, 5vw, 56px) 40px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px 28px;
  align-items: center;
  justify-content: space-between;
  font-size: .84rem;
}
.footer nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.footer a { text-decoration: none; border-block-end: 1px solid rgba(242, 196, 206, .4); padding-block-end: 1px; }
.footer a:hover { color: var(--cream); border-color: var(--cream); }