/* ================================================================================================
   Blog — additions on top of doc.css, which every blog page also loads.

   doc.css already styles the chrome (top bar, masthead, footer) and the prose basics inside .doc
   (h2 with its cherry rule, h3, p, ul, a, strong). Everything here is what an article needs and a
   legal page does not: a byline row, a cover image, figures, quotes, and the index listing.

   Arabic only, and deliberately so: there is no language toggle on a blog page. The chrome could be
   swapped but the article could not, and a toggle that leaves the body in Arabic is a lie.
   ================================================================================================ */

/* ------------------------------------------------------------------------------------------------
   Post header
   ------------------------------------------------------------------------------------------------ */
.post__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  align-items: center;
  justify-content: center;
  font-family: var(--f-body);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--rose);
}
.post__meta time { font-variant-numeric: tabular-nums; }
.post__meta .dot { opacity: .5; }

.post__cover {
  display: block;
  width: 100%;
  height: auto;
  margin-block-end: clamp(24px, 4vw, 40px);
}

/* ------------------------------------------------------------------------------------------------
   Article body. Scoped to .prose so it cannot reach the chrome.
   ------------------------------------------------------------------------------------------------ */
.prose > :first-child { margin-block-start: 0; }

.prose h2 { margin-block: 1.9em .2em; }
.prose h3 { margin-block: 1.5em .3em; font-size: 1.12rem; }

.prose p { margin-block-end: 1.1em; }

/* Body images sit on the paper rather than in a frame — the article is already inside a sheet, and
   a border around every picture makes a page of stacked boxes. */
.prose img {
  width: 100%;
  height: auto;
  border-radius: 6px;
  margin-block: 1.6em;
}
.prose figure { margin-block: 1.8em; }
.prose figure img { margin-block: 0; }
.prose figcaption {
  margin-block-start: .7em;
  font-size: .86rem;
  color: var(--muted);
  text-align: center;
}

.prose blockquote {
  margin-block: 1.7em;
  padding-inline-start: 20px;
  border-inline-start: 4px solid var(--rose-dp);
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 1.12rem;
  line-height: 1.6;
  color: var(--ink);
}
.prose blockquote p:last-child { margin-block-end: 0; }

.prose hr {
  border: 0;
  height: 2px;
  background: var(--rule, #E3D6C4);
  margin-block: 2.4em;
}

.prose code {
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: .88em;
  background: rgba(85, 28, 37, .07);
  padding: .12em .38em;
  border-radius: 3px;
  direction: ltr;
  unicode-bidi: isolate;
  display: inline-block;
}
.prose pre {
  background: var(--maroon);
  color: var(--cream);
  padding: 16px 18px;
  border-radius: 6px;
  overflow-x: auto;
  direction: ltr;
  text-align: start;
  margin-block: 1.5em;
}
.prose pre code { background: none; padding: 0; color: inherit; }

/* Ordered lists need their own marker treatment — doc.css removes list-style for its rose lozenge,
   which is right for an unordered list and wrong for a numbered one. */
.prose ol { list-style: decimal; padding-inline-start: 1.6em; margin-block-end: 1.2em; }
.prose ol li { padding-inline-start: 0; }
.prose ol li::before { content: none; }

/* ------------------------------------------------------------------------------------------------
   Index listing
   ------------------------------------------------------------------------------------------------ */
.postlist { display: grid; gap: 22px; margin-block-start: 8px; list-style: none; padding: 0; }
.postlist li { margin: 0; padding: 0; }
.postlist li::before { content: none; }

.postcard {
  display: grid;
  gap: 4px 20px;
  padding: 20px clamp(18px, 3vw, 26px);
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 10px;
  box-shadow: 3px 3px 0 var(--ink);
  text-decoration: none;
  color: inherit;
  transition: transform .12s ease, box-shadow .12s ease;
}
.postcard:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--ink); }
@media (prefers-reduced-motion: reduce) {
  .postcard, .postcard:hover { transition: none; transform: none; }
}
@media (min-width: 700px) {
  .postcard--cover { grid-template-columns: 160px 1fr; align-items: start; }
}
.postcard__cover {
  width: 100%;
  height: 100%;
  max-height: 130px;
  object-fit: cover;
  border-radius: 6px;
}
.postcard__date {
  font-family: var(--f-body);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.postcard h2 {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 1.15rem;
  line-height: 1.35;
  color: var(--ink);
  margin: 0;
  padding: 0;
  border: 0;
}
.postcard h2::after { content: none; }
.postcard p { font-size: .95rem; color: var(--muted); margin: 0; }

/* Shown when every post is still a draft, so the page is never a blank sheet. */
.empty {
  padding: 40px 20px;
  text-align: center;
  color: var(--muted);
  border: 2px dashed var(--rule, #E3D6C4);
  border-radius: 10px;
}

/* A draft is only ever built in `astro dev`; this badge is what stops one being mistaken for live. */
.draft-flag {
  display: inline-block;
  margin-inline-start: .6em;
  padding: .2em .6em;
  border-radius: 3px;
  background: var(--cherry);
  color: var(--cream);
  font-family: var(--f-body);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  vertical-align: .2em;
}

/* ------------------------------------------------------------------------------------------------
   Back link
   ------------------------------------------------------------------------------------------------ */
.backlink {
  display: inline-block;
  margin-block-start: 3em;
  font-family: var(--f-display);
  font-weight: 700;
  color: var(--cherry);
  text-decoration: none;
  border-block-end: 1.5px solid var(--rose-dp);
}
.backlink:hover { border-color: var(--cherry); }

/* ------------------------------------------------------------------------------------------------
   Blog header nav — the blog link plus the language switch.

   The switch is a LINK, not the marketing page's JS toggle: the chrome could be swapped in place
   but an article cannot translate itself, so each language is its own URL. That is also what keeps
   both versions indexable.
   ------------------------------------------------------------------------------------------------ */
.blognav { display: flex; align-items: center; gap: 6px; }

.blognav > a {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: .92rem;
  color: var(--cream);
  text-decoration: none;
  padding: .3em .2em;
  border-block-end: 1.5px solid rgba(251, 242, 227, .4);
}
.blognav > a:hover { border-color: var(--cream); }

.blognav .langswitch {
  font-family: "Outfit", system-ui, sans-serif;
  font-size: .78rem;
  letter-spacing: .06em;
  margin-inline-start: 10px;
  padding: .42em 1.05em;
  border: 2px solid var(--cream);
  border-radius: 999px;
}
.blognav .langswitch:hover { background: var(--cream); color: var(--maroon); }

/* Markdown tables — the styling guide uses one for the five slots, and doc.css has no table rules
   because a legal page never needed any. Scrolls in its own box so the page never scrolls sideways. */
.prose table {
  width: 100%;
  border-collapse: collapse;
  margin-block: 1.6em;
  font-size: .95rem;
}
.prose thead th {
  text-align: start;
  font-family: var(--f-display);
  font-weight: 700;
  color: var(--ink);
  border-block-end: 2px solid var(--ink);
  padding-block-end: 10px;
}
.prose tbody td {
  padding-block: 11px;
  border-block-end: 1px solid var(--rose-dp);
  vertical-align: top;
}
.prose tbody tr:last-child td { border-block-end: 0; }