/* Support pages, Hebrew and English. Same palette as join.css, which mirrors
   AppTheme in the app — the support page and the invitation card have to read
   as the same product. No build step here either: this file is the site. */

:root {
  --sl-accent: #3dab70;
  --sl-accent-soft: #6bcc8c;
  /* Text laid on top of --sl-accent. White reads on the dark green; on the
     lighter green the dark scheme uses, it doesn't. */
  --sl-on-accent: #fff;
  --sl-ink: #14201a;
  --sl-muted: #5d6f65;
  --sl-page: #f4f7f5;
  --sl-card: #fff;
  --sl-line: rgba(20, 32, 26, 0.1);
  --sl-shadow: 0 18px 44px rgba(16, 54, 35, 0.14);
}

@media (prefers-color-scheme: dark) {
  :root {
    --sl-accent: #6bcc8c;
    --sl-on-accent: #0e1a13;
    --sl-ink: #eaf2ed;
    --sl-muted: #a3b5ab;
    --sl-page: #101613;
    --sl-card: #18211c;
    --sl-line: rgba(234, 242, 237, 0.12);
    --sl-shadow: 0 18px 44px rgba(0, 0, 0, 0.45);
  }
}

* { box-sizing: border-box; }

body {
  background: var(--sl-page);
  color: var(--sl-ink);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  line-height: 1.65;
  margin: 0;
  -webkit-text-size-adjust: 100%;
}

/* Header */

.sl-hero {
  background: linear-gradient(170deg, var(--sl-accent-soft) 0%, #2e935f 55%, #226f48 100%);
  color: #fff;
  padding: clamp(32px, 8vw, 64px) clamp(18px, 5vw, 32px) clamp(48px, 10vw, 80px);
  text-align: center;
}

.sl-hero img {
  border-radius: 22px;
  box-shadow: 0 12px 30px rgba(16, 54, 35, 0.32);
  height: 84px;
  width: 84px;
}

.sl-hero h1 {
  font-size: clamp(1.6rem, 6vw, 2.1rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 18px 0 8px;
}

.sl-hero p {
  margin: 0 auto;
  max-width: 30rem;
  opacity: 0.92;
}

/* Body */

main {
  margin: clamp(-40px, -8vw, -60px) auto 0;
  max-width: 720px;
  padding: 0 clamp(14px, 4vw, 24px) 64px;
  position: relative;
}

section {
  background: var(--sl-card);
  border-radius: 22px;
  box-shadow: var(--sl-shadow);
  margin-bottom: 18px;
  padding: clamp(22px, 5vw, 34px);
}

h2 {
  font-size: 1.22rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 0 0 14px;
}

h3 {
  font-size: 1rem;
  font-weight: 700;
  margin: 22px 0 6px;
}

p { margin: 0 0 12px; }

section > p:last-child,
section > ul:last-child { margin-bottom: 0; }

a {
  color: var(--sl-accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* The numbered walkthrough */

.sl-steps {
  counter-reset: step;
  list-style: none;
  margin: 0;
  padding: 0;
}

.sl-steps li {
  counter-increment: step;
  margin-bottom: 14px;
  padding-inline-start: 44px;
  position: relative;
}

.sl-steps li:last-child { margin-bottom: 0; }

.sl-steps li::before {
  align-items: center;
  background: rgba(61, 171, 112, 0.14);
  border-radius: 50%;
  color: var(--sl-accent);
  content: counter(step);
  display: flex;
  font-weight: 700;
  height: 30px;
  inset-inline-start: 0;
  justify-content: center;
  position: absolute;
  top: -1px;
  width: 30px;
}

/* Plain bulleted lists */

ul:not(.sl-steps) {
  margin: 0 0 12px;
  padding-inline-start: 1.25em;
}

ul:not(.sl-steps) li { margin-bottom: 6px; }

/* FAQ */

details {
  border-bottom: 1px solid var(--sl-line);
  padding: 4px 0;
}

details:last-of-type { border-bottom: 0; }

summary {
  cursor: pointer;
  font-weight: 700;
  list-style: none;
  padding: 12px 0;
  position: relative;
  padding-inline-end: 28px;
}

summary::-webkit-details-marker { display: none; }

summary::after {
  color: var(--sl-accent);
  content: "+";
  font-size: 1.3rem;
  font-weight: 600;
  inset-inline-end: 4px;
  line-height: 1;
  position: absolute;
  top: 14px;
}

details[open] > summary::after { content: "–"; }

details > *:not(summary) { color: var(--sl-muted); }

details > p:last-child { margin-bottom: 14px; }

/* Contact */

.sl-contact {
  background: linear-gradient(160deg, rgba(61, 171, 112, 0.12), rgba(61, 171, 112, 0.04));
  text-align: center;
}

.sl-mail {
  align-items: center;
  background: var(--sl-accent);
  border-radius: 15px;
  color: var(--sl-on-accent);
  display: inline-flex;
  font-weight: 700;
  gap: 9px;
  margin-top: 6px;
  padding: 14px 26px;
  text-decoration: none;
  /* An address is Latin in an RTL page — pin it so the dot doesn't wander. */
  direction: ltr;
  unicode-bidi: isolate;
}

.sl-note {
  color: var(--sl-muted);
  font-size: 0.9rem;
}

/* Footer */

footer {
  color: var(--sl-muted);
  font-size: 0.86rem;
  padding: 6px clamp(14px, 4vw, 24px);
  text-align: center;
}

footer a { margin: 0 6px; }