/* ─── 0) FONT: Almarai (default in super-theme-pro, 2026-07-19) ──────────
 * Duplicated here (also in input.css) so post-detail gets Almarai even if
 * theme.css has not been rebuilt yet after the input.css change. Google
 * Fonts CDN is allowed by the site CSP (font-src fonts.gstatic.com).
 * ------------------------------------------------------------------------ */
@font-face {
  font-family: 'Almarai';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('https://fonts.gstatic.com/s/almarai/v29/tsstApxBaigK_hnnQ1iFgw.woff2') format('woff2');
}
@font-face {
  font-family: 'Almarai';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('https://fonts.gstatic.com/s/almarai/v29/tssoApxBaigK_hnnS_anhnicoq72sXg.woff2') format('woff2');
}
@font-face {
  font-family: 'Almarai';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('https://fonts.gstatic.com/s/almarai/v29/tsstApxBaigK_hnnQ1iFow_swqOh.woff2') format('woff2');
}
@font-face {
  font-family: 'Almarai';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('https://fonts.gstatic.com/s/almarai/v29/tsstApxBaigK_hnnQ1iFtwzswqOh.woff2') format('woff2');
}
html body,
[data-article] {
  font-family: 'Almarai', 'Cairo', system-ui, -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
}

/* ============================================================================
 * Manhal — article-extra.css
 * Plain CSS (no tailwind build) additive to theme.css.
 * Linked directly from templates/post-detail.gohtml so it ships without a
 * tailwind rebuild. Covers 3 concerns:
 *   1) Tables inside .prose-manhal (thead/tbody/hover/zebra + overflow-x wrap)
 *   2) Responsive 16:9 YouTube iframe wrappers created by article-extra.js
 *   3) Article layout tweaks (widen body, ensure sticky sidebars behave)
 *
 * All colors resolve through the theme tokens in input.css (--fg, --line, …),
 * so the styles remain in sync with light/dark + accent.
 * ========================================================================== */

/* ─── 1) TABLES ──────────────────────────────────────────────────────────── */

/* Wrapper generated by the Python renderer:
     <div class="table-wrap"><table>…</table></div>
   Also match bare tables authored inline. */
.prose-manhal .table-wrap,
.prose-manhal figure.table {
  width: 100%;
  margin: 1.75rem 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 0.75rem;
  border: 1px solid rgb(var(--line) / 0.12);
  background: rgb(var(--surface));
  box-shadow: 0 1px 2px rgb(var(--shadow-color) / 0.03);
}

.prose-manhal .table-wrap > table,
.prose-manhal figure.table > table,
.prose-manhal > table {
  width: 100%;
  min-width: 480px;
  margin: 0;
  border-collapse: collapse;
  border-spacing: 0;
  font-size: 0.95rem;
  line-height: 1.7;
  color: rgb(var(--fg));
  text-align: start;
}

/* Bare tables (no wrapper) get their own spacing and horizontal scroll via
   a display wrapper only where possible — plus we still soften the borders. */
.prose-manhal > table {
  display: block;
  overflow-x: auto;
  margin: 1.75rem 0;
  border: 1px solid rgb(var(--line) / 0.12);
  border-radius: 0.75rem;
  background: rgb(var(--surface));
}

.prose-manhal table thead {
  background: rgb(var(--bg-soft));
}
.prose-manhal table thead th {
  padding: 0.85rem 1rem;
  font-weight: 700;
  font-size: 0.9rem;
  color: rgb(var(--fg));
  text-align: start;
  border-bottom: 2px solid rgb(var(--line) / 0.22);
  white-space: nowrap;
}
.prose-manhal table tbody td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid rgb(var(--line) / 0.10);
  color: rgb(var(--fg-muted));
  vertical-align: top;
}
/* Last row: no bottom border. */
.prose-manhal table tbody tr:last-child td { border-bottom: 0; }

/* First column reads as a mini-header (echoing merchant "row-header" cue). */
.prose-manhal table tbody td:first-child {
  font-weight: 500;
  color: rgb(var(--fg));
}

/* Zebra + hover — subtle so it does not fight brand accent. */
.prose-manhal table tbody tr:nth-child(even) {
  background: rgb(var(--bg-soft) / 0.55);
}
.prose-manhal table tbody tr:hover {
  background: hsl(var(--brand-h) 84% 65% / 0.06);
}

/* Alignment helper for numeric columns (RTL friendly — start = right in AR). */
.prose-manhal table td.num,
.prose-manhal table th.num { text-align: end; font-variant-numeric: tabular-nums; }

/* Mobile: keep readable font, allow scroll rather than shrink. */
@media (max-width: 640px) {
  .prose-manhal table thead th,
  .prose-manhal table tbody td { padding: 0.7rem 0.8rem; font-size: 0.9rem; }
  .prose-manhal .table-wrap > table,
  .prose-manhal figure.table > table,
  .prose-manhal > table { min-width: 420px; }
}

/* ─── 2) YOUTUBE EMBED WRAPPER ───────────────────────────────────────────── */

/* article-extra.js swaps youtube links → <div class="yt-embed"><iframe …/></div> */
.prose-manhal .yt-embed {
  position: relative;
  width: 100%;
  margin: 2rem 0;
  aspect-ratio: 16 / 9;
  border-radius: 1rem;
  overflow: hidden;
  background: #000;
  box-shadow: 0 8px 30px -12px rgb(var(--shadow-color) / 0.35);
}
.prose-manhal .yt-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Fallback (very old browsers without aspect-ratio) */
@supports not (aspect-ratio: 16 / 9) {
  .prose-manhal .yt-embed { padding-top: 56.25%; height: 0; }
}

/* ─── 3) ARTICLE LAYOUT ADJUSTMENTS ──────────────────────────────────────── */

/* Force the author/tags aside to hold a real sticky position on desktop.
   The template already sets `sticky top-24` but the aside must have enough
   height context — this pins it and stops it from collapsing when tags empty.

   v2.0.7 (2026-07-28): the post-detail redesign in v2.0.2 made the ASIDE
   itself sticky (not a descendant). Tailwind's `lg:sticky` compiled OK,
   but `self-start` (arbitrary Tailwind class name) wasn't scanned, so the
   aside stretched to fill the grid row and killed the sticky effect
   (a sticky element can't scroll if it's as tall as its containing block).
   Added explicit rules for the aside itself. */
@media (min-width: 1024px) {
  article[data-article] { min-height: 60vh; }
  aside .sticky, aside > .sticky { position: sticky; top: 6rem; align-self: start; }
  main aside[class*="sticky"] { position: sticky; top: 6rem; align-self: flex-start; }
}

/* Small screens: put the aside cards under the article, natural flow. */
@media (max-width: 1023px) {
  aside .sticky, aside > .sticky { position: static; top: auto; }
  main aside[class*="sticky"] { position: static; top: auto; align-self: auto; }
}

/* Prefer-latin-digits marker: nothing to style, but expose a hook if the
   merchant later wants a different numeric font. */
[data-prefer-latin-digits="1"] { font-variant-numeric: proportional-nums; }