/* Al Miqlat — landing page
   Static, no build step. Arabic is the default language and source of
   truth (see /CLAUDE.md); English is a parallel rendering of the same
   content, never a translation added later. */

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

html {
  background: var(--color-bg);
  scroll-behavior: smooth;
  overflow-x: hidden;
}

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

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

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

a { color: inherit; text-decoration: none; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 900; /* thmanyah serif display only ships Black for headings */
  line-height: 1.25;
  margin: 0;
}

p { margin: 0; }

ul { margin: 0; padding: 0; list-style: none; }

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* Latin-script runs inside Arabic copy (emails, product names) must not
   reorder under the bidi algorithm — pin them LTR and isolate from the
   surrounding paragraph, matching the iOS app's own rule. */
.ltr {
  unicode-bidi: isolate;
  direction: ltr;
}

/* Language visibility — html[data-lang] controls which copy renders.
   Both languages are always in the DOM; nothing is fetched or swapped in. */
[data-lang-content] { display: none; }
html[data-lang="ar"] [data-lang-content="ar"] { display: revert; }
html[data-lang="en"] [data-lang-content="en"] { display: revert; }
html[data-lang="ar"] span[data-lang-content="ar"],
html[data-lang="en"] span[data-lang-content="en"] { display: inline; }
html[data-lang="ar"] li[data-lang-content="ar"],
html[data-lang="en"] li[data-lang-content="en"] { display: list-item; }

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-5);
}

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: color-mix(in srgb, var(--color-bg) 88%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-divider);
}

.site-header__mark { height: 28px; width: auto; }

.site-header__nav {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.lang-toggle {
  display: flex;
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  padding: 3px;
  gap: 2px;
}
.lang-toggle__btn {
  font-size: 13px;
  font-weight: 500;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  color: var(--color-text-muted);
  transition: background 0.15s ease, color 0.15s ease;
}
.lang-toggle__btn[aria-pressed="true"] {
  background: var(--color-accent);
  color: #FFFFFF;
}

/* ---------- Sections, generic ---------- */

.section {
  padding: var(--space-9) 0;
}
.section--tight { padding: var(--space-8) 0; }

.section__eyebrow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--color-accent2);
  margin-bottom: var(--space-2);
}

.section__title {
  font-size: clamp(24px, 3.4vw, 34px);
  margin-bottom: var(--space-4);
}

.section__lede {
  font-size: 17px;
  line-height: 1.8;
  color: var(--color-text-muted);
  max-width: 62ch;
}

/* reveal-on-scroll — progressive enhancement, not a requirement to read the
   page. .reveal alone (what every section has in the markup) carries no
   hidden state, so content is visible with no JS at all, with JS disabled,
   or if main.js errors before it gets here. main.js adds .reveal--pending
   to opt an element INTO the animated hidden state right before observing
   it, then .is-visible removes it — so the only way to end up hidden is if
   JS itself did it, and main.js also carries a timeout that force-reveals
   anything still pending if the observer never fires (see initReveal). */
.reveal.reveal--pending {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.reveal--pending.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Hero ---------- */

.hero {
  padding: var(--space-8) 0 var(--space-9);
  text-align: center;
}

.hero__title {
  font-size: clamp(32px, 5.4vw, 56px);
  margin-bottom: var(--space-4);
}

.hero__lede {
  font-size: clamp(17px, 2vw, 20px);
  color: var(--color-text-muted);
  max-width: 56ch;
  margin: 0 auto var(--space-6);
  line-height: 1.75;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
}

/* App Store CTA — plain-text nominative reference to the store, not a
   reproduction of Apple's badge artwork. Swap for the official
   "Download on the App Store" badge once the listing is live. */
.store-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 14px 28px;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  color: #FFFFFF;
  font-weight: 700;
  font-size: 16px;
  box-shadow: var(--shadow-floating);
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}
.store-cta:hover { box-shadow: var(--shadow-dialog); transform: translateY(-1px); }
.store-cta:active { transform: translateY(0) scale(0.98); }

.store-cta[data-live="false"] {
  opacity: 0.92;
  cursor: default;
}

.store-cta__toast {
  position: fixed;
  inset-inline: 0;
  bottom: var(--space-6);
  margin: 0 auto;
  width: fit-content;
  max-width: calc(100% - var(--space-5) * 2);
  padding: 12px 22px;
  border-radius: var(--radius-pill);
  background: var(--color-text);
  color: var(--color-bg);
  font-size: 14px;
  font-weight: 500;
  box-shadow: var(--shadow-dialog);
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 60;
}
.store-cta__toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.hero__scroll-cue {
  margin-top: var(--space-8);
  display: flex;
  justify-content: center;
  color: var(--color-text-muted);
  animation: bob 2.2s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .hero__scroll-cue { animation: none; }
}
@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}

/* ---------- Why pseudonymous ---------- */

.why {
  display: grid;
  gap: var(--space-6);
  align-items: start;
}
@media (min-width: 760px) {
  .why { grid-template-columns: 1fr 1fr; }
}
.why__card {
  background: var(--color-card);
  border-radius: var(--radius-card);
  padding: var(--space-6);
  box-shadow: var(--shadow-card);
}
.why__card p + p { margin-top: var(--space-4); }
.why__card p { color: var(--color-text-muted); font-size: 15.5px; }

/* ---------- Topics grid ---------- */

.topics-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}
@media (min-width: 620px) {
  .topics-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 980px) {
  .topics-grid { grid-template-columns: repeat(4, 1fr); }
}

.topic-card {
  background: var(--color-card);
  border-radius: var(--radius-card);
  padding: var(--space-5);
  box-shadow: var(--shadow-card);
}

.topic-card__title {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}
.topic-card__title-text {
  font-family: var(--font-display);
  font-weight: 900; /* only Black is registered for the display face */
  font-size: 19px;
}

/* The app's own topic-identity mark (docs/design/screens/3a-universities.png,
   1b-topic-browse.png) — a flat-tinted circle holding the topic's Arabic
   initial, not a coloured border. Reused here at the same "browsing" weight
   the app itself uses for a subtopic row, not the bolder solid-fill circle
   reserved for an open topic's own header. */
.topic-card__badge {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 17px;
}
.topic-card__badge--accent { background: var(--accent-100); color: var(--accent-700); }
.topic-card__badge--accent2 { background: var(--accent2-100); color: var(--accent2-700); }
.topic-card__badge--neutral { background: var(--neutral-200); color: var(--neutral-700); }

.topic-card__body {
  color: var(--color-text-muted);
  font-size: 14.5px;
  line-height: 1.75;
}

/* ---------- Moderation & safety ---------- */

.safety {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-7) var(--space-6);
}

.safety__intro {
  max-width: 62ch;
  color: var(--color-text-muted);
  font-size: 15.5px;
  margin-bottom: var(--space-6);
}

.safety-list {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}
@media (min-width: 700px) {
  .safety-list { grid-template-columns: repeat(2, 1fr); }
}

.safety-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  background: var(--color-card);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  box-shadow: var(--shadow-card);
  font-size: 14.5px;
  line-height: 1.7;
}

.safety-list__icon {
  flex: none;
  width: 22px;
  height: 22px;
  color: var(--color-accent2);
}

/* ---------- Screenshots ---------- */

.screens {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

/* No captures yet — the section renders nothing rather than a placeholder
   box. Drop <img> or <picture> elements into #screens-gallery and this
   selector stops matching; no other markup change needed. */
.screens:empty { display: none; }
.screens-section:has(.screens:empty) { display: none; }

.screens img {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-dialog);
}

/* ---------- Download (secondary) ---------- */

.download {
  text-align: center;
  background: var(--color-text);
  color: var(--color-bg);
  border-radius: var(--radius-lg);
  padding: var(--space-8) var(--space-6);
}
.download .section__title { color: var(--color-bg); }
.download .section__lede { color: var(--neutral-400); margin-inline: auto; }
.download .hero__actions { margin-top: var(--space-6); }

/* ---------- Contact ---------- */

.contact {
  display: grid;
  gap: var(--space-6);
}
@media (min-width: 760px) {
  .contact { grid-template-columns: 1.1fr 0.9fr; align-items: center; }
}

.contact__card {
  background: var(--color-card);
  border-radius: var(--radius-card);
  padding: var(--space-6);
  box-shadow: var(--shadow-card);
}

.contact__email {
  display: inline-flex;
  margin-top: var(--space-4);
  font-size: 18px;
  font-weight: 700;
  color: var(--color-accent-700, var(--color-accent));
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  background: var(--accent-100);
}

.social-row {
  display: flex;
  gap: var(--space-3);
}

.social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-pill);
  background: var(--color-card);
  box-shadow: var(--shadow-card);
  color: var(--color-text-muted);
  transition: color 0.15s ease, box-shadow 0.15s ease;
}

/* Inactive by design — no account exists yet. Structured so dropping a
   real href in and removing this attribute is the entire launch step. */
.social-icon[data-inactive="true"] {
  cursor: default;
  opacity: 0.55;
}
.social-icon[data-inactive="true"]:hover { box-shadow: var(--shadow-card); }
.social-icon:not([data-inactive="true"]):hover {
  color: var(--color-accent);
  box-shadow: var(--shadow-floating);
}

.social-icon svg { width: 20px; height: 20px; }

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

.site-footer {
  padding: var(--space-6) 0 var(--space-8);
  border-top: 1px solid var(--color-divider);
}

.site-footer__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
  justify-content: space-between;
  font-size: 13.5px;
  color: var(--color-text-muted);
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}
.footer-links a:hover { color: var(--color-accent); }

/* Privacy/terms/content-policy 404 until the Apple lane publishes them —
   don't ship links to a blank page. Remove this rule (or flip the markup's
   data-live to "true") once they're live. */
.footer-links[data-live="false"] { display: none; }