/* The blog: its index and its posts, in both languages.
   -------------------------------------------------------------------------
   Loaded AFTER assets/site.css, never instead of it — the same arrangement the
   legal pages use. The header, the footer, the colour tokens, dark mode, the
   theme button and the mobile menu all come from there, so these pages cannot
   drift away from the rest of the site.

   Everything here is written in tokens. Not one literal colour: a hard-coded
   hex is a page that looks right until somebody switches to dark mode, and
   this file will be edited by whoever is writing that week's post.

   Everything is scoped to `main` or to a blog class for the same reason
   legal.css is: `.wrap` centres the header and the footer too, so narrowing it
   unscoped would pull those in as well and give away the shared chrome.
   ------------------------------------------------------------------------- */

main{
  /* Clear the fixed header. site.css sets --head-h and the scroll-padding that
     matches it; this is the same number applied as layout rather than scroll. */
  padding:calc(var(--head-h) + clamp(28px,5vw,48px)) 0 clamp(56px,9vw,96px);
}
/* A post opens with a full-width coloured band, and the band has to start
   directly under the header rather than after a gap of page colour. So the
   page's top padding drops to the header's own height and the band supplies
   the rest — see .post-mast. */
main.has-mast{padding-top:var(--head-h)}

/* The reading column. 720px is the legal pages' measure and it is right for
   the same reason: at the body size below it lands around 70 characters a
   line in English and rather fewer in Hebrew, which is where a long read stops
   costing the reader anything to follow. */
main .wrap-post{max-width:720px}

/* ==========================================================================
   SHARED — the kicker, the by-line, the dot between metadata items
   ========================================================================== */
.post-kicker{
  font-family:'Rubik',sans-serif;font-weight:800;font-size:.82rem;
  letter-spacing:.08em;text-transform:uppercase;
  color:var(--accent-down);margin-bottom:10px;
}
.post-kicker a{text-decoration:none}
.post-kicker a:hover{text-decoration:underline;text-underline-offset:3px}
:root[data-theme="dark"] .post-kicker{color:var(--accent)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .post-kicker{color:var(--accent)}
}

.dot{margin:0 8px;opacity:.5}

/* ==========================================================================
   THE INDEX
   ========================================================================== */
/* Two centred lines: the blog's name, and one line saying what it is for. The
   kicker that used to sit above them is gone — a page reached by clicking
   "בלוג" does not need a label reading בלוג.

   The bottom margin lives on the header rather than on the h1 because the h1
   is not always the last thing in it; two margins would otherwise stack. */
.blog-head{
  margin-bottom:clamp(30px,5vw,44px);
  text-align:center;
}
.blog-head h1{
  font-family:'Rubik',sans-serif;
  font-size:clamp(1.9rem,4.6vw,2.8rem);font-weight:900;line-height:1.15;
}
/* The line under the name. It comes from the body of content/blog/index.md, so
   it is prose rather than a field — but it is one line and it is set as one.

   No measure of its own, deliberately: a max-width here is what broke it in
   two under a heading it is meant to sit beneath.

   It has to hold ONE line, and the numbers are why the minimum below is
   0.98rem rather than the 1.02 it started at. Measured: the Hebrew sentence
   sets 326px at 18.9px, so it scales to about 271px at 15.7px — against the
   280px a 320px-wide phone leaves after this page's own padding. At 1.02rem it
   was 282px and broke in two on exactly that screen. `text-wrap:balance` then
   only decides WHERE it breaks on anything narrower still, and browsers
   without it fall back to an ordinary wrap.

   Any longer sentence here has to be re-measured. This one is 34 characters. */
.blog-tagline{margin-top:12px}
.blog-tagline p{
  font-size:clamp(.98rem,2.2vw,1.18rem);color:var(--ink-soft);line-height:1.55;
  text-wrap:balance;
  margin:0 0 10px;
}
.blog-tagline p:last-child{margin-bottom:0}

/* An ordered list, because the order is the content: newest first. The numbers
   themselves are not, so they are dropped rather than styled. */
.post-list{list-style:none;margin:0;padding:0;display:grid;gap:clamp(14px,2.4vw,20px)}

.post-card{
  background:var(--surface);
  border:1px solid var(--line);border-radius:18px;
  padding:clamp(20px,3.4vw,28px);
  transition:border-color .18s ease, box-shadow .22s var(--ease), transform .22s var(--ease);
}
.post-card:hover{
  border-color:var(--dash);
  box-shadow:var(--shot-shadow);
  transform:translateY(-2px);
}
/* Nobody hovers a phone, and the lift on tap reads as a glitch. */
@media (hover:none){
  .post-card:hover{transform:none;box-shadow:none;border-color:var(--line)}
}

.card-meta{
  font-size:.85rem;color:var(--ink-soft);margin-bottom:8px;
  /* Dates and reading times are digits inside Hebrew; without isolation the
     bidi algorithm drags the separator to the wrong end of the line. */
  direction:inherit;unicode-bidi:isolate;
}
.post-card h2{
  font-family:'Rubik',sans-serif;
  font-size:clamp(1.2rem,2.6vw,1.5rem);font-weight:800;line-height:1.3;
  margin-bottom:8px;
}
.post-card h2 a{text-decoration:none}
.post-card h2 a:hover{color:var(--accent-down)}
:root[data-theme="dark"] .post-card h2 a:hover{color:var(--accent)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .post-card h2 a:hover{color:var(--accent)}
}
.post-card p{color:var(--ink-soft);margin-bottom:14px}
.card-more{
  font-family:'Rubik',sans-serif;font-weight:800;font-size:.9rem;
  color:var(--accent-down);text-decoration:none;
}
.card-more:hover{text-decoration:underline;text-underline-offset:4px}
:root[data-theme="dark"] .card-more{color:var(--accent)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .card-more{color:var(--accent)}
}

.post-empty{
  color:var(--ink-soft);background:var(--bg-soft);
  border:1px dashed var(--dash);border-radius:14px;
  padding:22px;text-align:center;
}

/* ==========================================================================
   A POST
   ========================================================================== */
/* The title block, drenched in the brand colour.
   -------------------------------------------------------------------------
   Written entirely in tokens, which is what makes it survive dark mode: there
   the accent becomes a light pink and --on-accent becomes near-black ink, so
   the band inverts as a set rather than staying a dark-pink block with white
   text on it. Nothing here is a literal colour, and the two quieter greys are
   opacity on --on-accent rather than a white that would vanish when the ground
   turns light. */
.post-mast{
  background:var(--accent);color:var(--on-accent);
  padding:clamp(28px,5vw,52px) 0 clamp(26px,4vw,44px);
  margin-bottom:clamp(28px,4.5vw,44px);
}
.post-mast .post-kicker{color:var(--on-accent);opacity:.82}
.post-mast .post-kicker a:hover{opacity:1}
.post-mast .post-lede{color:var(--on-accent);opacity:.95}
.post-mast .post-meta{
  color:var(--on-accent);opacity:.8;
  border-bottom:0;padding-bottom:0;margin-bottom:0;
}
/* The dark-mode overrides that follow .post-kicker elsewhere in this file must
   not reach inside the band: on a light-pink ground the accent IS the ground. */
:root[data-theme="dark"] .post-mast .post-kicker{color:var(--on-accent)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .post-mast .post-kicker{color:var(--on-accent)}
}

.post h1{
  font-family:'Rubik',sans-serif;
  font-size:clamp(1.9rem,4.8vw,2.9rem);font-weight:900;line-height:1.14;
  margin-bottom:14px;
  text-wrap:balance;
}
/* The description, promoted to a standfirst. It is the same sentence the
   search result shows, which is the point: a reader who clicked because of it
   should find it at the top rather than have to reconstruct it. */
.post-lede{
  font-size:1.14rem;line-height:1.65;color:var(--ink);
  margin-bottom:16px;
}
.post-meta{
  font-size:.87rem;color:var(--ink-soft);
  padding-bottom:clamp(20px,3vw,28px);
  border-bottom:1px solid var(--line);
  margin-bottom:clamp(26px,4vw,38px);
  unicode-bidi:isolate;
}

.post-body{line-height:1.8;font-size:1.02rem}
.post-body h2{
  font-family:'Rubik',sans-serif;
  font-size:clamp(1.3rem,2.8vw,1.65rem);font-weight:800;line-height:1.3;
  margin:clamp(34px,5vw,48px) 0 12px;
}
.post-body h3{
  font-family:'Rubik',sans-serif;
  font-size:clamp(1.08rem,2.2vw,1.25rem);font-weight:700;line-height:1.35;
  margin:clamp(26px,3.6vw,34px) 0 8px;
}
.post-body p{color:var(--ink-soft);margin-bottom:16px}
.post-body strong{color:var(--ink);font-weight:600}
.post-body ul,.post-body ol{
  margin:0 0 18px;padding-inline-start:22px;display:grid;gap:8px;
}
.post-body li{color:var(--ink-soft)}
.post-body li::marker{color:var(--accent)}
.post-body a{color:var(--accent-down);text-underline-offset:3px}
.post-body a:hover{color:var(--accent)}
:root[data-theme="dark"] .post-body a{color:var(--accent)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .post-body a{color:var(--accent)}
}

/* A pulled-out claim, and the place a post concedes a point to somebody else.
   The accent bar is on the inline start, so it moves side with the language. */
.post-body blockquote{
  margin:0 0 18px;padding:2px 0 2px 0;
  padding-inline-start:18px;
  border-inline-start:3px solid var(--accent);
  color:var(--ink);font-size:1.05rem;
}
.post-body blockquote p:last-child{margin-bottom:0}

.post-body hr{
  border:0;border-top:1px solid var(--line);
  margin:clamp(30px,4.5vw,42px) 0;
}

.post-body code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.88em;direction:ltr;unicode-bidi:isolate;
  background:var(--bg-soft);border-radius:5px;padding:1px 5px;
  overflow-wrap:anywhere;
}
.post-body pre{
  background:var(--bg-soft);border:1px solid var(--line);border-radius:12px;
  padding:16px 18px;overflow-x:auto;margin:0 0 18px;
  direction:ltr;text-align:start;
}
.post-body pre code{background:none;padding:0}

.post-body img{max-width:100%;height:auto;border-radius:14px;margin:0 0 18px}

/* The comparison tables. These are the reason half these posts exist and they
   are wider than a phone, so each one scrolls inside its own box rather than
   pushing the page sideways — the one layout failure a reader blames the site
   for instead of the writing. The wrapper is added by lib/blog-page.mjs. */
.table-scroll{
  overflow-x:auto;margin:0 0 20px;
  border:1px solid var(--line);border-radius:14px;
  background:var(--surface);
  -webkit-overflow-scrolling:touch;
}
.post-body table{
  border-collapse:collapse;width:100%;
  font-size:.92rem;line-height:1.6;
  min-width:520px;
}
.post-body th,.post-body td{
  text-align:start;vertical-align:top;
  padding:12px 14px;border-bottom:1px solid var(--line);
  color:var(--ink-soft);
}
.post-body thead th{
  font-family:'Rubik',sans-serif;font-weight:800;font-size:.85rem;
  color:var(--ink);background:var(--bg-soft);
}
.post-body tbody tr:last-child td,.post-body tbody tr:last-child th{border-bottom:0}
.post-body tbody td:first-child{color:var(--ink);font-weight:600}

/* ==========================================================================
   THE TABLE, AT TWO WIDTHS
   ==========================================================================
   The prose wants a 720px column and the comparison table wants to be wide,
   and those two are in conflict. Rather than compromise both, the table gets a
   different answer at each end of the range.

   WIDE — the table alone breaks out of the reading column to the site's full
   1120px. The negative margin is derived, not typed: `100%` is the column's
   content box, so ((1120 - content) / -2) centres a 1120px box on the same
   axis whatever the padding resolves to. Below 1180px there is no room to
   break out and it falls back to scrolling in place.

   NARROW — below 700px it stops being a table at all. Each row becomes a card
   and each value carries its own label, read out of the data-label that
   lib/blog-page.mjs writes onto every cell. Dragging four columns of Hebrew
   sideways on a phone was the worst moment on these pages, and this removes
   the gesture rather than making it smoother. What it gives up is real: you
   can no longer read down a column to compare one field across tools. That
   trade is right on a phone and wrong on a laptop, which is why it is a
   breakpoint and not a redesign. */
@media (min-width:1180px){
  .post-body .table-scroll{
    width:1120px;
    margin-inline:calc((1120px - 100%) / -2);
  }
  .post-body table{min-width:0}
}

@media (max-width:700px){
  .post-body .table-scroll{
    border:0;background:transparent;border-radius:0;overflow:visible;
  }
  .post-body table{min-width:0;display:block;font-size:.95rem}
  /* The headings are not dropped from the document, only from view: they are
     still the accessible name each cell is labelled with. */
  .post-body thead{
    position:absolute;width:1px;height:1px;overflow:hidden;
    clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
  }
  .post-body tbody{display:grid;gap:12px}
  .post-body tbody tr{
    display:block;
    border:1px solid var(--line);border-radius:14px;background:var(--surface);
    padding:14px 16px;
  }
  .post-body tbody td{
    display:grid;grid-template-columns:auto 1fr;gap:4px 12px;
    border:0;padding:5px 0;
  }
  .post-body tbody td::before{
    content:attr(data-label);
    font-family:'Rubik',sans-serif;font-weight:700;font-size:.78rem;
    color:var(--ink-soft);white-space:nowrap;padding-top:2px;
  }
  /* The first cell is the tool's name — the card's heading, not a labelled
     field, so it loses its label and takes the weight instead. */
  .post-body tbody td:first-child{
    display:block;
    font-family:'Rubik',sans-serif;font-weight:800;font-size:1.02rem;
    color:var(--ink);
    padding:0 0 8px;margin-bottom:6px;
    border-bottom:1px solid var(--line);
  }
  .post-body tbody td:first-child::before{content:none}
  .post-body tbody tr:last-child td{border-bottom:0}
  .post-body tbody tr:last-child td:first-child{border-bottom:1px solid var(--line)}
}

/* ==========================================================================
   ON A PHONE
   ==========================================================================
   The body type and the measure already hold at this width — around 38 Hebrew
   characters a line at 16.3px — so nothing here touches the reading itself.
   What changes is everything you have to hit with a thumb, and the one number
   that decides whether the first sentence is visible without scrolling. */
@media (max-width:600px){
  /* Type this size wants more room from the edge than the landing page's cards
     do, and a phone case takes a few millimetres of the left one. */
  main .wrap-post{padding-inline:24px}

  /* 30px of Rubik 900 over four lines pushes the opening sentence under the
     fold. One step down keeps the headline heavy and the first line visible. */
  .post h1{font-size:1.62rem}
  .post-lede{font-size:1.04rem}

  /* Apple's floor for a tap target is 44px and Google's is 48. These were all
     text-height — around 20px — which is a link you aim at rather than press. */
  .post-next li a,
  .post-back a,
  .agent-line a{
    display:inline-flex;align-items:center;min-height:44px;
  }
  .post-next li{padding-top:4px}

  /* The closing action becomes a bar rather than a pill. It is easier to reach
     with one thumb, and a full-width control reads as the end of the page. */
  .post-cta .btn{display:flex;width:100%;justify-content:center;padding:15px 20px}
}

/* ==========================================================================
   THE BLOCKS AFTER THE PROSE
   ========================================================================== */

/* The same line the pricing page carries: the page, as a file. */
.agent-line{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-size:.85rem;color:var(--ink-soft);
  margin-top:clamp(28px,4vw,40px);
}
.agent-line a{color:var(--accent-down);text-underline-offset:3px}
:root[data-theme="dark"] .agent-line a{color:var(--accent)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .agent-line a{color:var(--accent)}
}

/* The closing pitch. Deliberately one block at the end rather than a banner
   partway down: a post that interrupts its own argument to sell is a post
   nobody finishes, and an unfinished post converts nothing. */
.post-cta{
  margin-top:clamp(34px,5vw,48px);
  background:var(--bg-soft);border:1px solid var(--line);border-radius:20px;
  padding:clamp(24px,4vw,34px);
  /* Centred, unlike everything above it. That is the point: the post is a
     column of left-aligned prose, and the one block that is not is read as a
     different kind of thing rather than as one more paragraph. The button is
     inline-level, so this centres it too. */
  text-align:center;
}
.post-cta h2{
  font-family:'Rubik',sans-serif;
  font-size:clamp(1.2rem,2.6vw,1.5rem);font-weight:800;margin-bottom:10px;
}
/* Centred text needs a measure of its own — at the full column width the eye
   has to find the start of each new line somewhere different every time, which
   is exactly what centring costs and why it is only worth paying for a few
   lines. */
.post-cta p{
  color:var(--ink-soft);margin:0 auto 18px;
  max-width:52ch;text-wrap:pretty;
}
.post-cta .btn{
  display:inline-flex;align-items:center;
  font:800 .95rem 'Rubik',sans-serif;text-decoration:none;
  padding:12px 24px;border-radius:999px;
  background:var(--accent);color:var(--on-accent);
  border:2px solid var(--accent);
  transition:background .16s ease,border-color .16s ease,transform .18s var(--ease);
}
.post-cta .btn:hover{
  background:var(--accent-down);border-color:var(--accent-down);
  transform:translateY(-1px);
}

.post-next{margin-top:clamp(34px,5vw,48px)}
.post-next h2{
  font-family:'Rubik',sans-serif;font-size:1.1rem;font-weight:800;
  margin-bottom:12px;
}
.post-next ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.post-next li{
  border-top:1px solid var(--line);padding-top:12px;
}
.post-next li a{
  display:block;font-family:'Rubik',sans-serif;font-weight:700;
  text-decoration:none;margin-bottom:3px;
}
.post-next li a:hover{color:var(--accent-down)}
:root[data-theme="dark"] .post-next li a:hover{color:var(--accent)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .post-next li a:hover{color:var(--accent)}
}
.post-next li span{display:block;font-size:.9rem;color:var(--ink-soft)}

.post-back{
  margin-top:clamp(28px,4vw,38px);
  padding-top:clamp(18px,2.6vw,24px);
  border-top:1px solid var(--line);
  font-family:'Rubik',sans-serif;font-weight:700;font-size:.92rem;
}
.post-back a{text-decoration:none;color:var(--accent-down)}
.post-back a:hover{text-decoration:underline;text-underline-offset:4px}
:root[data-theme="dark"] .post-back a{color:var(--accent)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .post-back a{color:var(--accent)}
}