/* ==========================================================================
   Yad Avshalom — yadavshalom.org
   Plain static CSS. No build step, no framework.

   Palette and type are lifted verbatim from the app's design tokens in
   src/theme/index.ts so the site and the app read as one thing.

   Every colour pair used for text was measured against WCAG 2.1:
     #1A1815 on #FAF7F2  16.58   body on sand
     #1A1815 on #FFFFFF  17.72   body on white
     #6B635A on #FAF7F2   5.52   muted on sand
     #6B635A on #FFFFFF   5.90   muted on white
     #746C5F on #FFFFFF   5.18   meta on white
     #1E4B7A on #FAF7F2   8.39   links on sand
     #FFFFFF on #1E4B7A   8.96   button label
     #866B1F on #FAF7F2   4.75   gold on sand
     #866B1F on #FFFFFF   5.08   gold on white
     #B3261E on #FCF1F0   5.91   danger on its own tint
     #1A1815 on #F7F0DC  15.57   body on gold tint
   Gold on gold-tint measures 4.46, below AA for body text, so gold text is
   never set on #F7F0DC — that surface always carries near-black text.

   Direction: the whole sheet uses CSS logical properties (inline-start /
   inline-end, padding-inline, text-align: start). Hebrew pages are real
   dir="rtl" documents; nothing here is a mirrored stylesheet.
   ========================================================================== */

:root {
  /* Surfaces */
  --bg:            #FAF7F2;
  --surface:       #FFFFFF;
  --surface-alt:   #F4EFE7;
  --border:        #E9E2D6;
  --border-strong: #DCD2C0;

  /* Text */
  --text:       #1A1815;
  --text-muted: #6B635A;
  --text-meta:  #746C5F;

  /* Accent */
  --accent:         #1E4B7A;
  --accent-pressed: #173C63;
  --accent-soft:    #E9F0F7;

  /* Gold */
  --gold:      #866B1F;
  --gold-soft: #F7F0DC;

  /* Live / danger */
  --live-text:   #12633C;
  --live-soft:   #E6F6EE;
  --live-border: #A7E0C1;
  --danger:      #B3261E;
  --danger-soft: #FCF1F0;

  /* Spacing scale, from the app */
  --s-xs: 4px;  --s-sm: 8px;  --s-md: 12px;
  --s-lg: 16px; --s-xl: 24px; --s-xxl: 32px;

  /* Radii, from the app */
  --r-sm: 8px; --r-md: 14px; --r-lg: 20px; --r-pill: 999px;

  --shadow:        0 2px 8px rgba(74, 63, 47, 0.06);
  --shadow-raised: 0 6px 16px rgba(74, 63, 47, 0.10);

  --measure: 34rem;   /* prose line length */
  --page:    46rem;   /* page container */

  --font-display: 'Frank Ruhl Libre', 'Times New Roman', Georgia, serif;
  --font-ui: 'Assistant', 'Segoe UI', system-ui, -apple-system, sans-serif;
}

/* One face per script, the same split the app makes: Assistant's Hebrew is
   excellent and its Latin is plain, so English gets Sora. */
html[lang="he"] { --font-ui: 'Assistant', 'Segoe UI', system-ui, -apple-system, sans-serif; }
html[lang="en"] { --font-ui: 'Sora', system-ui, -apple-system, 'Segoe UI', sans-serif; }

/* --------------------------------------------------------------------------
   Reset
   -------------------------------------------------------------------------- */

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

html {
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 17px;
  line-height: 1.65;
  /* Generous leading suits Hebrew, which has no ascenders or descenders to
     give the eye vertical rhythm. Same reasoning as the app's tokens. */
  overflow-x: hidden;
}

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

/* --------------------------------------------------------------------------
   Skip link + focus
   -------------------------------------------------------------------------- */

.skip-link {
  position: absolute;
  inset-inline-start: var(--s-lg);
  inset-block-start: -100px;
  z-index: 20;
  background: var(--accent);
  color: #FFFFFF;
  padding: var(--s-md) var(--s-lg);
  border-radius: var(--r-sm);
  text-decoration: none;
  font-size: 15px;
}
.skip-link:focus { inset-block-start: var(--s-lg); }

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--page);
  margin-inline: auto;
  padding-inline: var(--s-xl);
}

main { display: block; }

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

.site-header {
  border-block-end: 1px solid var(--border);
  background: var(--bg);
}

.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-lg);
  padding-block: var(--s-lg);
  flex-wrap: wrap;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s-md);
  text-decoration: none;
  color: var(--text);
}

.brand__mark {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  flex: none;
  /* The emblem art already sits on the sand ground, so it needs no plate. */
}

.brand__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: 0.1px;
}

.brand__sub {
  display: block;
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.3;
  color: var(--text-meta);
  letter-spacing: 0.4px;
}

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

.lang {
  display: inline-flex;
  align-items: center;
  gap: 0;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-pill);
  background: var(--surface);
  padding: 3px;
  font-size: 14px;
  overflow: hidden;
}

.lang a,
.lang span {
  display: inline-block;
  padding: 5px 14px;
  border-radius: var(--r-pill);
  text-decoration: none;
  line-height: 1.4;
  white-space: nowrap;
}

.lang a { color: var(--accent); }
.lang a:hover { background: var(--accent-soft); }

.lang [aria-current="true"] {
  background: var(--accent);
  color: #FFFFFF;   /* 8.96:1 */
  font-weight: 600;
}

/* Primary nav ------------------------------------------------------------ */

.site-nav ul {
  list-style: none;
  margin: 0;
  padding: 0 0 var(--s-lg);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-sm) var(--s-lg);
}

.site-nav a {
  color: var(--text-muted);   /* 5.52:1 on sand */
  text-decoration: none;
  font-size: 15px;
  padding-block: 2px;
  border-block-end: 2px solid transparent;
}

.site-nav a:hover { color: var(--accent); }

.site-nav a[aria-current="page"] {
  color: var(--text);
  font-weight: 600;
  border-block-end-color: var(--gold);
}

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

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--text);
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: 30px; line-height: 1.27; }
h2 { font-size: 22px; line-height: 1.36; margin-block-start: var(--s-xxl); }
h3 { font-size: 18px; line-height: 1.45; margin-block-start: var(--s-xl); }

p, ul, ol, dl { margin-block: 0 var(--s-lg); max-width: var(--measure); }
li { margin-block-end: var(--s-sm); }
ul, ol { padding-inline-start: 1.35em; }

a { color: var(--accent); text-underline-offset: 3px; }
a:hover { color: var(--accent-pressed); }

strong, b { font-weight: 700; }

.lead {
  font-size: 19px;
  line-height: 1.6;
  color: var(--text);
}

.muted { color: var(--text-muted); }

.small {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-muted);
}

.meta {
  font-size: 14px;
  color: var(--text-meta);   /* 5.18:1 on white, 4.85:1 on sand */
}

code, .mono {
  font-family: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, Consolas, monospace;
  font-size: 0.92em;
  background: var(--surface-alt);
  padding: 1px 5px;
  border-radius: 5px;
  /* Emails and identifiers stay left-to-right inside Hebrew paragraphs. */
  direction: ltr;
  unicode-bidi: isolate;
  display: inline-block;
}

/* A thin gold rule, the one decorative motif on the site.

   linear-gradient() has no logical direction keyword — `to inline-end` is invalid
   and silently kills the whole background declaration — so the fade direction is
   set per document direction instead. Decorative only; never carries meaning. */
.rule {
  border: 0;
  block-size: 1px;
  background: linear-gradient(to right, var(--gold), rgba(134, 107, 31, 0));
  margin-block: var(--s-xxl);
  inline-size: 96px;
  opacity: 0.6;
  margin-inline: 0 auto;
}

[dir="rtl"] .rule {
  background: linear-gradient(to left, var(--gold), rgba(134, 107, 31, 0));
}

/* --------------------------------------------------------------------------
   Page head
   -------------------------------------------------------------------------- */

.page-head { padding-block: var(--s-xxl) var(--s-lg); }
.page-head p { margin-block-start: var(--s-md); }

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

.hero {
  padding-block: 56px 40px;
  text-align: center;
}

.hero__mark {
  inline-size: 128px;
  block-size: 128px;
  margin-inline: auto;
  margin-block-end: var(--s-xl);
  border-radius: 30px;
}

.hero h1 {
  font-size: 38px;
  line-height: 1.22;
}

.hero__tagline {
  font-family: var(--font-display);
  font-size: 19px;
  color: var(--gold);      /* 4.75:1 on sand */
  margin-block: var(--s-md) 0;
}

.hero__lead {
  font-size: 19px;
  line-height: 1.65;
  color: var(--text);
  max-width: 32rem;
  margin-inline: auto;
  margin-block-start: var(--s-xl);
  text-wrap: pretty;
}

/* Steps ------------------------------------------------------------------ */

.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: none;
  display: grid;
  gap: var(--s-lg);
}

@media (min-width: 720px) {
  .steps { grid-template-columns: repeat(3, 1fr); gap: var(--s-lg); }
}

.step {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-xl);
  box-shadow: var(--shadow);
  margin: 0;
}

.step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 30px;
  block-size: 30px;
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  color: var(--accent);      /* 7.80:1 */
  font-size: 15px;
  font-weight: 700;
  margin-block-end: var(--s-md);
}

.step h3 { margin: 0 0 var(--s-sm); font-size: 17px; }
.step p { margin: 0; font-size: 15.5px; color: var(--text-muted); max-width: none; }

/* Store badges ----------------------------------------------------------- */

.badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-md);
  justify-content: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-md);
  min-block-size: 56px;
  padding: var(--s-md) var(--s-xl);
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--text-muted);   /* 5.90:1 on white */
  text-align: start;
  margin: 0;
}

.badge__icon { flex: none; color: var(--text-meta); }

.badge__text { display: block; font-size: 14px; line-height: 1.35; }
.badge__store { display: block; font-size: 16px; font-weight: 700; color: var(--text); }

/* --------------------------------------------------------------------------
   Cards, callouts
   -------------------------------------------------------------------------- */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-xl);
  box-shadow: var(--shadow);
  margin-block-end: var(--s-lg);
}

.card > :last-child { margin-block-end: 0; }
.card h2, .card h3 { margin-block-start: 0; }

.note {
  border-radius: var(--r-md);
  padding: var(--s-lg) var(--s-xl);
  margin-block-end: var(--s-xl);
  border: 1px solid var(--border-strong);
  background: var(--surface-alt);
}
.note > :last-child { margin-block-end: 0; }
.note p { font-size: 15.5px; }

.note--draft {
  background: var(--gold-soft);
  border-color: #E4D6A8;
  color: var(--text);        /* 15.57:1 on the gold tint */
}

.note--danger {
  background: var(--danger-soft);
  border-color: #F0D3D1;
}

.note--accent {
  background: var(--accent-soft);
  border-color: #C9DBEC;
}

.note__title {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  margin-block-end: var(--s-sm);
}

.note--danger .note__title { color: var(--danger); }  /* 5.91:1 */

/* An inline "a lawyer still has to look at this" marker. */
.flag {
  display: inline-block;
  background: var(--gold-soft);
  border: 1px solid #E4D6A8;
  border-radius: var(--r-sm);
  padding: 1px 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.5;
}

/* Untranslated source text held in English inside a Hebrew page. */
.en-source {
  direction: ltr;
  text-align: left;
  unicode-bidi: isolate;
  border-inline-start: 3px solid var(--border-strong);
  padding-inline-start: var(--s-lg);
  margin-block: var(--s-md) var(--s-lg);
  color: var(--text-muted);
  font-family: 'Sora', system-ui, sans-serif;
  font-size: 15px;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-sm);
  min-block-size: 48px;
  padding: var(--s-md) var(--s-xl);
  border-radius: var(--r-md);
  background: var(--accent);
  color: #FFFFFF;             /* 8.96:1 */
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid var(--accent);
  text-align: center;
}
.btn:hover { background: var(--accent-pressed); border-color: var(--accent-pressed); color: #FFFFFF; }

.btn--quiet {
  background: var(--surface);
  color: var(--accent);       /* 8.96:1 on white */
  border-color: var(--border-strong);
}
.btn--quiet:hover { background: var(--accent-soft); color: var(--accent-pressed); }

/* --------------------------------------------------------------------------
   Definition-style FAQ
   -------------------------------------------------------------------------- */

.faq { margin: 0; max-width: none; }

.faq > div {
  border-block-end: 1px solid var(--border);
  padding-block: var(--s-xl);
}
.faq > div:last-child { border-block-end: 0; padding-block-end: 0; }

.faq dt {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17.5px;
  line-height: 1.45;
  margin-block-end: var(--s-sm);
}

.faq dd { margin: 0; max-width: var(--measure); }
.faq dd p { margin-block-end: var(--s-md); }
.faq dd > :last-child { margin-block-end: 0; }

/* --------------------------------------------------------------------------
   Legal prose
   -------------------------------------------------------------------------- */

.prose { padding-block-end: var(--s-xxl); }
.prose h2 { margin-block: 40px var(--s-md); }
.prose h3 { margin-block: var(--s-xl) var(--s-sm); }
.prose h2 + p, .prose h3 + p { margin-block-start: 0; }
.prose ul { max-width: var(--measure); }

.updated {
  font-size: 14px;
  color: var(--text-meta);
  margin-block-end: var(--s-xl);
}

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

.contact-list { list-style: none; padding: 0; margin: 0; max-width: none; }

.contact-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-xs) var(--s-md);
  padding-block: var(--s-md);
  border-block-end: 1px solid var(--border);
  margin: 0;
}
.contact-list li:last-child { border-block-end: 0; }

.contact-list__label { font-weight: 600; font-size: 15px; }
.contact-list__value { font-size: 15px; }

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

.site-footer {
  border-block-start: 1px solid var(--border);
  margin-block-start: 56px;
  padding-block: var(--s-xxl) 40px;
  background: var(--surface-alt);
}

.site-footer h2 {
  font-size: 15px;
  font-family: var(--font-ui);
  font-weight: 700;
  margin: 0 0 var(--s-md);
  color: var(--text-muted);
  letter-spacing: 0.3px;
}

.footer-cols {
  display: grid;
  gap: var(--s-xl);
  margin-block-end: var(--s-xl);
}

@media (min-width: 620px) {
  .footer-cols { grid-template-columns: repeat(3, 1fr); }
}

.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-block-end: var(--s-sm); }
.site-footer a { color: var(--accent); text-decoration: none; font-size: 15px; }
.site-footer a:hover { text-decoration: underline; }

.colophon {
  border-block-start: 1px solid var(--border-strong);
  padding-block-start: var(--s-lg);
  font-size: 14px;
  color: var(--text-meta);
}
.colophon p { margin-block-end: var(--s-xs); max-width: none; }

/* --------------------------------------------------------------------------
   Phones
   -------------------------------------------------------------------------- */

@media (max-width: 560px) {
  body { font-size: 16.5px; }
  .wrap { padding-inline: var(--s-lg); }
  h1 { font-size: 26px; }
  .hero { padding-block: 36px 28px; }
  .hero h1 { font-size: 30px; }
  .hero__mark { inline-size: 104px; block-size: 104px; }
  .hero__lead, .lead { font-size: 17.5px; }
  .card, .step, .note { padding: var(--s-lg); }
  .badge { inline-size: 100%; justify-content: flex-start; }
  .site-header__bar { gap: var(--s-md); }
  .brand__mark { inline-size: 34px; block-size: 34px; }
  .brand__name { font-size: 18px; }
}

/* --- Where the money goes -------------------------------------------------
   Logical properties only, so the same rules serve the RTL and LTR builds. */
.tiers { display: grid; gap: var(--s-md); margin-block: var(--s-lg); }
@media (min-width: 40rem) { .tiers { grid-template-columns: 1fr 1fr; } }
.tier {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--s-lg);
}
.tier__price {
  font-family: var(--font-display);
  font-size: 1.75rem;
  line-height: 1.2;
  color: var(--accent);
  margin: 0 0 var(--s-xs);
}
.breakdown { width: 100%; border-collapse: collapse; margin-block: var(--s-md); }
.breakdown thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.breakdown th[scope="row"] { font-weight: 700; white-space: nowrap; }
.breakdown th, .breakdown td {
  text-align: start;
  vertical-align: baseline;
  padding: var(--s-md) var(--s-sm);
  border-block-end: 1px solid var(--border);
}
.breakdown .money { font-variant-numeric: tabular-nums; white-space: nowrap; }
/* On a phone the four columns are unreadable; stack each row into a block. */
@media (max-width: 40rem) {
  .breakdown, .breakdown tbody, .breakdown tr, .breakdown th, .breakdown td { display: block; }
  .breakdown tr { padding-block: var(--s-md); border-block-end: 1px solid var(--border); }
  .breakdown th, .breakdown td { border: 0; padding: 0 0 var(--s-xs); }
  .breakdown .money { display: inline-block; margin-inline-end: var(--s-md); color: var(--accent); font-weight: 700; }
}