/* Harf site: shared tokens and components.
   Identity: the dual-legend keycap from the app icon (Latin top-left, Arabic bottom-right),
   teal from the icon, Alexandria (an Egyptian-designed Arabic face) for display. */
:root {
  --bg: #f2f7f6;
  --surface: #ffffff;
  --raised: #e6f1ef;
  --ink: #0a2b29;
  --muted: #4b6361;
  --line: #d2e1de;
  --accent: #0b8174;
  --accent-ink: #ffffff;
  --accent-soft: #dcf0ec;
  --latin: #0a2b29;
  --good: #1f7a3d;
  --warn: #9a5b00;
  --warn-soft: #fff3df;
  --bad: #b3261e;
  --bad-soft: #fdecea;
  --key-top: #ffffff;
  --key-side: #c4d9d5;
  --key-lit: #43d1ba;
  --font-display: "Alexandria", "IBM Plex Sans Arabic", "Geeza Pro", system-ui, sans-serif;
  --font-body: "IBM Plex Sans Arabic", "Geeza Pro", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --radius: 14px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0a1413; --surface: #111f1d; --raised: #172926; --ink: #e3efed; --muted: #93aaa7; --line: #21403b;
    --accent: #43d1ba; --accent-ink: #062320; --accent-soft: #123631; --latin: #e3efed;
    --good: #6fd38f; --warn: #f2b55c; --warn-soft: #33270f; --bad: #ff8a80; --bad-soft: #3a1513;
    --key-top: #1a2e2b; --key-side: #08100f; --key-lit: #2fae9a;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0a1413; --surface: #111f1d; --raised: #172926; --ink: #e3efed; --muted: #93aaa7; --line: #21403b;
  --accent: #43d1ba; --accent-ink: #062320; --accent-soft: #123631; --latin: #e3efed;
  --good: #6fd38f; --warn: #f2b55c; --warn-soft: #33270f; --bad: #ff8a80; --bad-soft: #3a1513;
  --key-top: #1a2e2b; --key-side: #08100f; --key-lit: #2fae9a;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 1.05rem/1.85 var(--font-body);
}
img { max-width: 100%; display: block; }
a { color: var(--accent); }
h1, h2, h3 { font-family: var(--font-display); line-height: 1.3; margin: 0; text-wrap: balance; font-weight: 700; }
p { margin: 0; }
bdi, .ltr { unicode-bidi: isolate; direction: ltr; }
.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; unicode-bidi: isolate; direction: ltr; }
.muted { color: var(--muted); }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

.wrap { max-width: 68rem; margin-inline: auto; padding-inline: 20px; }
.narrow { max-width: 44rem; margin-inline: auto; padding-inline: 20px; }

/* Header */
.site-header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 10;
  background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
.site-header .wrap { display: flex; align-items: center; gap: 1.5rem; min-height: 64px; }
.brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--ink); }
.brand img { width: 34px; height: 34px; }
.brand b { font: 700 1.3rem/1 var(--font-display); }
.site-nav { display: flex; gap: 1.2rem; margin-inline-start: auto; align-items: center; }
.site-nav a:not(.btn) { color: var(--muted); text-decoration: none; font-size: .95rem; }
.site-nav a:not(.btn):hover { color: var(--ink); }
@media (max-width: 46rem) { .site-nav a:not(.btn) { display: none; } }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font: 600 1rem/1 var(--font-body); text-decoration: none; cursor: pointer;
  padding: .85rem 1.4rem; border-radius: 12px; border: 1px solid transparent;
  background: var(--accent); color: var(--accent-ink);
  transition: transform .12s ease, filter .12s ease;
}
.btn:hover { filter: brightness(1.06); }
.btn:active { transform: translateY(1px); }
.btn.secondary { background: var(--surface); color: var(--ink); border-color: var(--line); }
.btn.small { padding: .55rem .9rem; font-size: .92rem; border-radius: 10px; }
.btn.danger { background: var(--bad); color: #fff; }
.btn[disabled] { opacity: .55; cursor: progress; }

/* Keycaps */
kbd, .key {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2rem; padding: .05rem .5rem; margin-inline: .1rem;
  font: 500 .9rem/1.7 var(--font-mono); color: var(--ink);
  background: var(--key-top); border: 1px solid var(--line); border-radius: 7px;
  box-shadow: 0 3px 0 var(--key-side);
  direction: ltr; unicode-bidi: isolate;
}

/* Cards, forms */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; }
.stack { display: grid; gap: 1rem; }
.field { display: grid; gap: .35rem; }
.field label { font-weight: 600; font-size: .95rem; }
.field small { color: var(--muted); font-size: .85rem; }
input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="search"], input:not([type]), select, textarea {
  width: 100%; font: 500 1rem var(--font-body); color: var(--ink);
  background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: .7rem .85rem;
}
input.ltr-input { direction: ltr; text-align: left; font-family: var(--font-mono); }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.choice { display: flex; gap: .6rem; flex-wrap: wrap; }
.choice label {
  flex: 1 1 10rem; display: flex; gap: .5rem; align-items: center; cursor: pointer;
  border: 1px solid var(--line); border-radius: 10px; padding: .7rem .9rem; background: var(--bg);
}
.choice input { accent-color: var(--accent); }
.choice label:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }

.alert { border-radius: 10px; padding: .8rem 1rem; font-size: .95rem; }
.alert.error { background: var(--bad-soft); color: var(--bad); }
.alert.ok { background: var(--accent-soft); color: var(--ink); }
.alert.warn { background: var(--warn-soft); color: var(--warn); }

.copy-row { display: flex; gap: .5rem; align-items: stretch; flex-wrap: wrap; }
.copy-row code {
  flex: 1 1 14rem; min-width: 0; overflow-x: auto; white-space: nowrap; direction: ltr; text-align: left;
  font: 600 1.05rem/1.6 var(--font-mono); background: var(--bg); border: 1px dashed var(--line);
  border-radius: 10px; padding: .6rem .8rem;
}

.chip { display: inline-block; font-size: .78rem; font-weight: 600; padding: .1rem .6rem; border-radius: 999px; white-space: nowrap; border: 1px solid currentColor; }
.chip.good { color: var(--good); } .chip.warn { color: var(--warn); } .chip.bad { color: var(--bad); } .chip.muted { color: var(--muted); }

.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
table { width: 100%; border-collapse: collapse; font-size: .93rem; }
th, td { text-align: start; padding: .65rem .8rem; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: .8rem; color: var(--muted); font-weight: 600; background: var(--raised); }
tr:last-child td { border-bottom: 0; }

/* Plain content pages (legal, guides) */
.page { padding-block: 3rem 5rem; display: grid; gap: 2rem; }
.prose { display: grid; gap: 1rem; max-width: 42rem; }
.prose h2 { font-size: 1.35rem; margin-top: 1rem; }
.prose ul, .prose ol { margin: 0; padding-inline-start: 1.3rem; display: grid; gap: .35rem; }

/* Footer */
.site-footer { border-top: 1px solid var(--line); padding-block: 2.5rem; color: var(--muted); font-size: .9rem; }
.site-footer .wrap { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; }
.site-footer a { color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Consent banner for the Meta Pixel */
.consent {
  position: fixed; inset-inline: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 50;
  max-width: 40rem; margin-inline: auto; display: flex; gap: .8rem 1.2rem; align-items: center; flex-wrap: wrap;
  padding: .9rem 1.1rem; border-radius: 14px; background: var(--surface); border: 1px solid var(--line);
  box-shadow: 0 18px 40px -20px rgba(0, 0, 0, .35); font-size: .92rem;
}
.consent p { flex: 1 1 18rem; margin: 0; }
.consent-actions { display: flex; gap: .5rem; }

/* "Harf is a Mac app" sheet for phone visitors */
.sheet { position: fixed; inset: 0; z-index: 60; display: grid; place-items: end center; padding: 16px;
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); background: rgba(0, 0, 0, .45); }
.sheet-card { width: min(100%, 26rem); display: grid; gap: .9rem; justify-items: center; text-align: center;
  padding: 1.6rem 1.3rem; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); }
.sheet-card h2 { font-size: 1.35rem; }
.sheet-card p { color: var(--muted); }
.sheet-card .copy-row { width: 100%; }
.sheet-card .btn { width: 100%; }

/* WhatsApp chat button */
.chat-fab {
  position: fixed; z-index: 40; inset-inline-start: auto; inset-inline-end: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  display: inline-flex; align-items: center; gap: .5rem; padding: .7rem 1rem; border-radius: 999px;
  background: #1f9d55; color: #fff; text-decoration: none; font: 600 .95rem/1 var(--font-body);
  box-shadow: 0 12px 28px -12px rgba(0, 0, 0, .45); transition: transform .15s ease;
}
.chat-fab:hover { transform: translateY(-2px); }
.consent ~ .chat-fab, body:has(.consent) .chat-fab { bottom: calc(110px + env(safe-area-inset-bottom, 0px)); }
@media (max-width: 30rem) { .chat-fab span { display: none; } .chat-fab { padding: .8rem; } }