/*
 * İmanım — store pages.
 *
 * Every colour, radius and type size here comes from the app's own design
 * tokens (src/theme/tokens.ts in the app repo), so the privacy and support
 * pages look like the app a reviewer just opened. Nothing is invented: if a
 * value is missing, add it to the app's tokens first.
 */

:root {
  /* Warm neutrals — lightColors */
  --bg: #FDF7F1;
  --bg-row: #FFFAF5;
  --surface: #FFFFFF;
  --surface-muted: #F6EDE4;
  --surface-warm: #F9F1E8;
  --border: #F0E4D8;
  --border-strong: #E4D6C8;

  --text: #1C1410;
  --text-2: #7C6A5E;
  --text-3: #A9968A;

  /* Orange ramp */
  --accent: #F97316;
  --accent-pressed: #EA580C;
  --accent-ink: #C2410C;
  --accent-soft: #FFEDD5;
  --accent-surface: #FFF6EC;
  --accent-border: #FBD9BC;

  /* Gold — hijri / arabic accents */
  --gold: #D9A441;
  --gold-soft: #FBF0DC;
  --gold-border: #EFDDBB;
  --gold-ink: #8A6A22;

  --shadow: rgba(138, 106, 85, 0.10);

  /* Geometry */
  --r-sm: 12px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-card: 22px;
  --r-hero: 28px;
  --r-pill: 999px;

  --gutter: 20px;
  --measure: 720px;

  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-ar: "Tajawal", -apple-system, BlinkMacSystemFont, "Segoe UI", Tahoma, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #14100C;
    --bg-row: #1C1610;
    --surface: #221A12;
    --surface-muted: #241C14;
    --surface-warm: #2B2118;
    --border: #332921;
    --border-strong: #3A2E23;

    --text: #F7EFE7;
    --text-2: #B0A093;
    --text-3: #7C6A5E;

    --accent: #F97316;
    --accent-pressed: #FB8C3C;
    --accent-ink: #FB8C3C;
    --accent-soft: #3A2415;
    --accent-surface: #3A2415;
    --accent-border: #5C3A1E;

    --gold: #E8BC63;
    --gold-soft: #3A2415;
    --gold-border: #4A3620;
    --gold-ink: #E8BC63;

    --shadow: rgba(0, 0, 0, 0.32);
  }
}

:root[data-theme="dark"] {
  --bg: #14100C;
  --bg-row: #1C1610;
  --surface: #221A12;
  --surface-muted: #241C14;
  --surface-warm: #2B2118;
  --border: #332921;
  --border-strong: #3A2E23;

  --text: #F7EFE7;
  --text-2: #B0A093;
  --text-3: #7C6A5E;

  --accent: #F97316;
  --accent-pressed: #FB8C3C;
  --accent-ink: #FB8C3C;
  --accent-soft: #3A2415;
  --accent-surface: #3A2415;
  --accent-border: #5C3A1E;

  --gold: #E8BC63;
  --gold-soft: #3A2415;
  --gold-border: #4A3620;
  --gold-ink: #E8BC63;

  --shadow: rgba(0, 0, 0, 0.32);
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
}

body[dir="rtl"] {
  font-family: var(--font-ar);
  line-height: 1.85;
}

/* The warm wash the app puts behind its headers. */
body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto 0;
  height: 340px;
  background: linear-gradient(180deg, var(--accent-surface) 0%, transparent 100%);
  pointer-events: none;
  z-index: 0;
}

.page {
  position: relative;
  z-index: 1;
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 var(--gutter) 72px;
}

/* --------------------------------------------------------------------------
   Masthead
   -------------------------------------------------------------------------- */

.masthead {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 28px 0 22px;
}

/* The app icon, in the kit's squircle: radius is ~1/3 of the box. */
.mark {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  border-radius: 15px;
  overflow: hidden;
  display: block;
  box-shadow: 0 6px 18px var(--shadow);
}

.mark img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.masthead-text { min-width: 0; display: block; }

.masthead .brand {
  display: block;
  margin: 0;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.2px;
  line-height: 1.25;
}

.masthead .kicker {
  display: block;
  margin: 0;
  font-size: 13px;
  color: var(--text-2);
}

/* --------------------------------------------------------------------------
   Language switch
   -------------------------------------------------------------------------- */

.langbar {
  display: flex;
  gap: 8px;
  margin: 0 0 26px;
  flex-wrap: wrap;
}

.langbar a {
  display: inline-block;
  padding: 7px 15px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-2);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: border-color .15s ease, color .15s ease;
}

.langbar a:hover { border-color: var(--accent-border); color: var(--text); }

.langbar a[aria-current="page"] {
  background: linear-gradient(180deg, #FB923C 0%, #EA580C 100%);
  border-color: transparent;
  color: #FFFFFF;
}

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */

h1 {
  font-size: clamp(28px, 6vw, 38px);
  line-height: 1.22;
  letter-spacing: -0.5px;
  margin: 0 0 10px;
  font-weight: 700;
}

h2 {
  font-size: 22px;
  line-height: 1.32;
  letter-spacing: -0.2px;
  margin: 44px 0 12px;
  font-weight: 700;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

h2:first-of-type { border-top: 0; padding-top: 0; }

h3 {
  font-size: 18px;
  line-height: 1.4;
  margin: 28px 0 8px;
  font-weight: 600;
}

p { margin: 0 0 16px; }

a { color: var(--accent-ink); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--accent-pressed); }

strong { font-weight: 700; }

code {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.875em;
  background: var(--surface-muted);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 1px 6px;
  direction: ltr;
  unicode-bidi: isolate;
  white-space: nowrap;
}

ul, ol { margin: 0 0 16px; padding-inline-start: 22px; }
li { margin: 0 0 7px; }
li::marker { color: var(--accent); }

blockquote {
  margin: 0 0 18px;
  padding: 14px 18px;
  border-inline-start: 3px solid var(--gold);
  background: var(--gold-soft);
  border-radius: var(--r-sm);
  color: var(--text);
}

blockquote p:last-child { margin-bottom: 0; }

hr { border: 0; border-top: 1px solid var(--border); margin: 36px 0; }

/* The bold metadata lines under the title (App, contact, date). */
.meta {
  margin: 0 0 30px;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  font-size: 14.5px;
  color: var(--text-2);
  box-shadow: 0 2px 10px var(--shadow);
}

.meta p { margin: 0 0 4px; }
.meta p:last-child { margin: 0; }
.meta strong { color: var(--text); font-weight: 600; }

/* --------------------------------------------------------------------------
   Tables
   -------------------------------------------------------------------------- */

.table-wrap {
  overflow-x: auto;
  margin: 0 0 22px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  -webkit-overflow-scrolling: touch;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
}

th, td {
  text-align: start;
  padding: 11px 14px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

thead th {
  background: var(--surface-warm);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--text-2);
  white-space: nowrap;
}

tbody tr:last-child td { border-bottom: 0; }
tbody tr:nth-child(even) td { background: var(--bg-row); }

/* --------------------------------------------------------------------------
   Home cards
   -------------------------------------------------------------------------- */

.cards {
  display: grid;
  gap: 13px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  margin: 0 0 30px;
}

.card {
  display: block;
  padding: 20px;
  border-radius: var(--r-card);
  background: var(--surface);
  border: 1px solid var(--border);
  text-decoration: none;
  color: inherit;
  box-shadow: 0 2px 10px var(--shadow);
  transition: transform .15s ease, border-color .15s ease;
}

.card:hover { transform: translateY(-2px); border-color: var(--accent-border); }

.card .card-title {
  display: block;
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 4px;
  color: var(--text);
}

.card .card-sub {
  display: block;
  font-size: 14px;
  color: var(--text-2);
  line-height: 1.55;
}

.card .card-lang {
  display: inline-block;
  margin-top: 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--accent-ink);
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.foot {
  margin-top: 52px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  font-size: 13.5px;
  color: var(--text-3);
}

.foot a { color: var(--text-2); }

/* --------------------------------------------------------------------------
   Print — reviewers do print these.
   -------------------------------------------------------------------------- */

@media print {
  body { background: #FFFFFF; color: #000000; }
  body::before { display: none; }
  .langbar, .foot { display: none; }
  .page { max-width: none; padding: 0; }
  h2 { page-break-after: avoid; }
  .table-wrap, blockquote { page-break-inside: avoid; }
}